/* ============================================================================
   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: var(--pl-neutral-text-color-text, #0D1A26);
}

.cd-section-count {
    font-family: 'Inter', 'Asap', sans-serif;
    font-feature-settings: "tnum";
    font-size: 11px;
    font-weight: 500;
    color: var(--pl-neutral-text-color-text-tertiary, #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-neutral-fill-color-fill-quaternary, #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: var(--pl-neutral-text-color-text-secondary, #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: var(--pl-neutral-fill-color-fill-quaternary, #F2F4F7);
    color: var(--pl-neutral-text-color-text, #0D1A26);
}

.cd-icon-btn.cd-close-btn:hover {
    background: var(--pl-semantic-error-color-error-bg, #FFEDE6);
    color: var(--pl-semantic-error-color-error, #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: var(--pl-neutral-text-color-text-quaternary, #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 var(--pl-neutral-border-color-border-secondary, #DCE0EA);
    background: var(--pl-neutral-bg-color-bg-container, #FFFFFF);
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Asap', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--pl-neutral-text-color-text-secondary, #495769);
    transition: all 150ms ease-out;
}

.cd-status-add:hover {
    color: var(--pl-color-neutral-10, #0D1A26);
    background: var(--pl-neutral-fill-color-fill-quaternary, #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 var(--pl-neutral-border-color-border-secondary, #DCE0EA);
    background: var(--pl-neutral-bg-color-bg-container, #FFFFFF);
    border-radius: 50%;
    cursor: pointer;
    color: var(--pl-neutral-text-color-text-tertiary, #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-neutral-fill-color-fill-quaternary, #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: var(--pl-neutral-fill-color-fill-quaternary, #F2F4F7);
    color: var(--pl-neutral-text-color-text-tertiary, #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: var(--pl-neutral-fill-color-fill-tertiary, #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: var(--pl-neutral-text-color-text-tertiary, #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: var(--pl-neutral-fill-color-fill-tertiary, #E9ECF1);
    color: var(--pl-neutral-text-color-text, #0D1A26);
}

/* ----------------------------------------------------------------------------
   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 .url-field-value,
.cd-property .f-url-viewer {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.cd-property .url-field-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pl-semantic-primary-color-primary, #0070B5);
    text-decoration: none;
}

.cd-property .url-field-link:hover {
    color: var(--pl-semantic-link-color-link-active, #005A8F);
    text-decoration: underline;
}

.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: var(--pl-neutral-text-color-text, #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: var(--pl-neutral-fill-color-fill-quaternary, #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: var(--pl-semantic-primary-color-primary, #0070B5);
    background: var(--pl-neutral-bg-color-bg-container, #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 custom-field: styled identically to the checklist check (.cd-checkbox) so both
   on-card checkboxes look the same. `appearance: none` drops the native widget (whose accent-
   colour tick and corner rounding the browser draws itself and CSS cannot fully control), then
   the same 16px box / 3px radius / green-when-checked / white tick / blue hover are applied by
   hand. Size (16px) and corner radius (3px) match the Figma checkbox token. The tick is the
   exact SVG path used by PlsItemDetail. 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 {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0 0 0 4px;
    padding: 0;
    border: 1px solid var(--pl-neutral-border-color-border, #C4CBDA);
    border-radius: 3px;
    background: var(--pl-neutral-bg-color-bg-container, #FFFFFF);
    cursor: pointer;
    transition: all 150ms ease-out;
}

.cd-property .f-input-container input[type="checkbox"].f-input:hover:not(:disabled) {
    border-color: var(--pl-semantic-primary-color-primary-hover, #009ADB);
}

.cd-property .f-input-container input[type="checkbox"].f-input:checked {
    background-color: var(--pl-semantic-success-color-success-active, #21945E);
    border-color: var(--pl-semantic-success-color-success-active, #21945E);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5 5.5-5.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}