/* ============================================================================
   pulse-card-details.css
   Shared utility classes for the card-details "Document layout" view.
   Declared globally because Blazor's scoped CSS does not cross component
   boundaries — the section head and add/edit/manage buttons are emitted by
   both the parent PlsCardDetails and its child sections (PlsChecklists,
   PlsAttachments, PlsCustomFieldsDisplay, PlsActivities), so they cannot live
   in any single .razor.css file.

   Component-specific layout (modal/sidepanel containers, hero, status row,
   conversation tabs, comment composer, …) stays in the relevant .razor.css.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Section frame — bold inline header + optional count + trailing action slot
   ---------------------------------------------------------------------------- */
.cd-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cd-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}

.cd-section-title {
    margin: 0;
    font-family: 'Asap', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #0D1A26;
}

.cd-section-count {
    font-family: 'Inter', 'Asap', sans-serif;
    font-feature-settings: "tnum";
    font-size: 11px;
    font-weight: 500;
    color: #6A778B;
}

.cd-section-head-spacer { flex: 1; }

/* ----------------------------------------------------------------------------
   Inline text/icon button used as trailing action on section heads,
   inside attachment rows, custom-field property values, and elsewhere.
   ---------------------------------------------------------------------------- */
.cd-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--pl-color-neutral-8, #495769);
    font-family: 'Asap', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    transition: background-color 150ms ease-out, color 150ms ease-out;
}

.cd-text-btn:hover {
    background: var(--pl-color-neutral-1, #F2F4F7);
    color: var(--pl-color-neutral-10, #0D1A26);
}

.cd-text-btn svg { flex-shrink: 0; }

/* Square icon-only button (header, manage gear, etc.) */
.cd-icon-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 4px;
    color: #495769;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease-out, color 150ms ease-out;
}

.cd-icon-btn:hover {
    background: #F2F4F7;
    color: #0D1A26;
}

.cd-icon-btn.cd-close-btn:hover {
    background: #FFEDE6;
    color: #C22704;
}

.cd-icon-btn img {
    width: 14px;
    height: 14px;
    display: block;
}

/* Empty-state hint (no fields, no comments, …) */
.cd-empty,
.cd-properties-empty,
.cd-activities-empty {
    padding: 8px 0;
    font-family: 'Asap', sans-serif;
    font-size: 13px;
    color: #8A95A8;
}

/* ----------------------------------------------------------------------------
   Status-row "+ add" buttons (members / labels / dates)
   Solid border, no dashed look.
   ---------------------------------------------------------------------------- */
.cd-status-add {
    height: 26px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #DCE0EA;
    background: #FFFFFF;
    border-radius: 13px;
    cursor: pointer;
    font-family: 'Asap', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #495769;
    transition: all 150ms ease-out;
}

.cd-status-add:hover {
    color: var(--pl-color-neutral-10, #0D1A26);
    background: var(--pl-color-neutral-1, #F2F4F7);
}

.cd-status-add svg,
.cd-status-add img {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.cd-status-add-icon {
    width: 22px;
    height: 22px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid #DCE0EA;
    background: #FFFFFF;
    border-radius: 50%;
    cursor: pointer;
    color: #6A778B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease-out;
}

.cd-status-add-icon:hover {
    color: var(--pl-color-neutral-10, #0D1A26);
    background: var(--pl-color-neutral-1, #F2F4F7);
}

.cd-status-add-icon img {
    width: 10px;
    height: 10px;
}

/* FontAwesome plus glyph (matches the sidebar's add buttons) in both add affordances. */
.cd-status-add i {
    font-size: 12px;
    line-height: 1;
}

.cd-status-add-icon i {
    font-size: 12px;
    line-height: 1;
}

/* ----------------------------------------------------------------------------
   Custom-field inline value editors — circular add buttons next to URL /
   date / users fields. Flat to match the borderless field inputs: a subtle
   fill instead of an outlined white circle, darkening on hover like the
   other card-detail affordances.
   ---------------------------------------------------------------------------- */
.custom-field-add-btn,
.userlist-add-btn,
.users-add-btn,
.date-add-btn,
.url-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    background: #F2F4F7;
    color: #6A778B;
    cursor: pointer;
    font-size: 11px;
    transition: border-color 150ms ease-out, color 150ms ease-out, background-color 150ms ease-out;
}

.custom-field-add-btn:hover,
.userlist-add-btn:hover,
.users-add-btn:hover,
.date-add-btn:hover,
.url-add-btn:hover {
    border-color: transparent;
    color: var(--pl-color-neutral-10, #0D1A26);
    background: #E9ECF1;
}

/* AntDesign buttons used as icon triggers occasionally come with their own
   borders/shadows — strip them so they pick up the .custom-field-add-btn
   chrome cleanly. */
.custom-field-add-btn.ant-btn,
.userlist-add-btn.ant-btn,
.users-add-btn.ant-btn,
.date-add-btn.ant-btn,
.url-add-btn.ant-btn,
.custom-field-edit-btn.ant-btn,
.userlist-edit-btn.ant-btn,
.date-edit-btn.ant-btn,
.url-edit-btn.ant-btn {
    box-shadow: none !important;
}

.custom-field-add-btn .anticon,
.userlist-add-btn .anticon,
.users-add-btn .anticon,
.date-add-btn .anticon,
.url-add-btn .anticon {
    color: inherit;
}

/* Edit pencil buttons that appear on hover next to a populated value */
.date-edit-btn,
.url-edit-btn,
.userlist-edit-btn,
.custom-field-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 4px;
    border: 0;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #6A778B;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.date-field-value:hover .date-edit-btn,
.url-field-value:hover .url-edit-btn,
.users-field-value:hover .userlist-edit-btn,
.cd-property:hover .custom-field-edit-btn {
    opacity: 1;
}

.date-edit-btn:hover,
.url-edit-btn:hover,
.userlist-edit-btn:hover,
.custom-field-edit-btn:hover {
    background: #E9ECF1;
    color: #0D1A26;
}

/* "Manage custom fields" gear button — keep visible but understated */
.cf-manage-button,
.manage-btn {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #495769 !important;
}

.cf-manage-button:hover,
.manage-btn:hover {
    background: #F2F4F7 !important;
    color: #0D1A26 !important;
}

/* ----------------------------------------------------------------------------
   Card-details custom-field value editors (text / number / url / select /
   checkbox). These are emitted from PlsCustomFieldsDisplay's code-behind via
   RenderTreeBuilder, which Blazor does not tag with the component's scoped-CSS
   attribute — so their styling can't live in the scoped sheet and sits here.
   Flat by default: the value reads as plain text; a border + ring appear only
   on focus, with a subtle fill on hover to hint it's editable. Scoped under
   .cd-property so the board's .fields-wrapper custom fields are unaffected.
   ---------------------------------------------------------------------------- */
.cd-property .f-input-container {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
}

.cd-property .f-input-container input.f-input,
.cd-property .f-input-container select.f-input,
.cd-property .f-input-container textarea.f-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: 'Asap', sans-serif;
    font-size: 13px;
    line-height: 20px;
    background: transparent;
    color: #0D1A26;
    box-sizing: border-box;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}

.cd-property .f-input-container input.f-input:hover,
.cd-property .f-input-container select.f-input:hover,
.cd-property .f-input-container textarea.f-input:hover {
    background: #F2F4F7;
}

.cd-property .f-input-container input.f-input:focus,
.cd-property .f-input-container select.f-input:focus,
.cd-property .f-input-container textarea.f-input:focus {
    outline: none;
    border-color: #0070B5;
    background: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(0, 112, 181, 0.18);
}

.cd-property .f-input-container textarea.f-input {
    width: 100%;
    min-height: 60px;
    resize: vertical;
}

/* Checkbox: a clean 16px control, vertically centred by the flex container.
   The generic `input { border: 1px solid darkgrey }` from site.css is cleared
   explicitly so the box renders flat. The +4px left margin lines its centre up
   with the 24px circular add-icon buttons (date / url / users / commit). */
.cd-property .f-input-container input[type="checkbox"].f-input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0 0 0 4px;
    padding: 0;
    border: 0;
    cursor: pointer;
    accent-color: #21945E;
}