/* ----------- CARD HEADER (functions/ui/card_header/card_header.php, README in functions/ui/docs/) ----------- */

.ui-card-head {
    --card-head-title: #8f7b67;
    --card-head-side: #8a7a6a;
    --card-head-accent: var(--uniti-accent, #ea6d10);
    /* Icons mark structure, so a softer orange; links keep the full accent */
    --card-head-icon: #e2823f;
    --card-head-line: #ebebeb;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    margin: 0 0 16px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--card-head-line);
}

/* At the top of a card (first block, even after a form's hidden inputs), sit a little into its padding */
.ui-card-head:first-of-type {
    margin-top: -6px;
}

.ui-card-head-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--card-head-title);
}

.ui-card-head-title i {
    flex: 0 0 auto;
    font-size: 15px;
    color: var(--card-head-icon);
}

/* Right-hand slot: a quiet value, or an orange link (orange is for links) */
.ui-card-head-side {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--card-head-side);
}

.ui-card-head-link,
a.ui-card-head-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--card-head-accent);
    text-decoration: none;
    cursor: pointer;
}

.ui-card-head-link:hover,
.ui-card-head-link:focus-visible {
    color: var(--card-head-accent);
    text-decoration: underline;
}

.ui-card-head-link i {
    margin-left: 0.3rem;
    font-size: 0.6rem;
    vertical-align: 1px;
}

/* --- Dark mode --- */
html[data-theme="dark"] .ui-card-head {
    --card-head-title: #b39477;
    --card-head-side: #a3968a;
    --card-head-icon: #cf8551;
    --card-head-line: rgba(255, 255, 255, 0.10);
}