/* ============================================================================
 * settings.css
 * ----------------------------------------------------------------------------
 * Settings tab — section cards, segmented controls, dropdowns, link rows,
 * sign-out button. Combines what used to live in two places:
 *
 *   1. The original /response/assets/css/settings.css (which was already
 *      linked).
 *   2. The inline <style> block in /response/pages/settings.php (extra
 *      polish rules that loaded after).
 *
 * Both are now merged here. Restyled in Liquid Glass.
 *
 * Key change: the segmented controls (Theme / Header color / Tab bar color
 * / Font size / Metric+Imperial / etc.) used to use --fn-card-bg as the
 * active-button background. In dark mode that's #23272C, which is nearly
 * identical to the container's --fn-tertiary-bg #2A2F35 — there was no
 * visible difference between active and inactive. Now the active button
 * gets the brand-pill treatment (solid slate light, lighter slate dark,
 * white text either way) so it matches the tabbar's "you are here" pill.
 *
 * Load AFTER liquid-glass.css.
 * ========================================================================= */


/* ─────────────────────────────────────────────────────────────────────────
 * Section + title (e.g. "Display", "Calls", "Activity")
 * ──────────────────────────────────────────────────────────────────────── */
.fn-set-section {
    margin-bottom: .85rem;
}
.fn-set-title {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fn-text-muted);
    margin: 0 0 .35rem .25rem;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Settings card — frosted glass surface that groups related rows.
 * Cards stack vertically; multiple per page; each renders backdrop-filter.
 * Performance is fine because they're not animated.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-set-card {
    background-color: var(--lg-surface);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border: 1px solid var(--lg-edge);
    border-radius: var(--lg-r-md);
    box-shadow: var(--lg-shadow);
    overflow: hidden;
}

.fn-set-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--lg-divider);
    min-height: 2.4rem;
}
.fn-set-row:last-child {
    border-bottom: 0;
}

.fn-set-label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--fn-text);
    flex-shrink: 0;
}
.fn-set-value {
    margin-left: auto;
    color: var(--fn-text-muted);
    font-weight: 600;
    font-size: .88rem;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Hint banner — info / advisory note under a row. Tinted strip at the
 * bottom of a card. The blue-tint variant is the default; the danger
 * variant is for stronger "heads-up" advisories (red tint).
 *
 * Rules in here merged from settings.php's inline <style> block.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-set-hint {
    padding: .35rem .75rem .55rem;
    border-top: 1px solid var(--lg-divider);
    background: var(--lg-surface-subtle);
    color: var(--fn-text-muted);
    font-size: .77rem;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: .35rem;
}
.fn-set-hint .mdi {
    font-size: .95rem;
    flex-shrink: 0;
    line-height: 1.4;
    opacity: .85;
}

/* Info-tinted variant (was inline in settings.php). Light blue wash;
   the icon picks up a brand-ish slate. */
#fnSettingsRoot .fn-set-card > .fn-set-hint {
    background: rgba(13, 110, 253, .07);
    color: var(--fn-text-muted);
    border-top: 1px solid var(--lg-divider);
    border-radius: 0;
    margin: 0;
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    line-height: 1.4;
}
#fnSettingsRoot .fn-set-card > .fn-set-hint:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
#fnSettingsRoot .fn-set-card > .fn-set-hint .mdi {
    color: var(--fn-brand);
    opacity: .85;
    font-size: 1rem;
    flex-shrink: 0;
}
[data-bs-theme="dark"] #fnSettingsRoot .fn-set-card > .fn-set-hint {
    background: rgba(13, 110, 253, .14);
}
[data-bs-theme="dark"] #fnSettingsRoot .fn-set-card > .fn-set-hint .mdi {
    color: #6ea3ff;     /* lighter blue so the icon shows against dark */
}

/* Danger-tinted variant — stronger advisory (red wash). */
#fnSettingsRoot .fn-set-card > .fn-set-hint-danger {
    background: rgba(220, 53, 69, .08);
    color: var(--fn-text-muted);
    border-top: 1px solid var(--lg-divider);
    border-radius: 0;
    margin: 0;
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    line-height: 1.4;
}
#fnSettingsRoot .fn-set-card > .fn-set-hint-danger:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
#fnSettingsRoot .fn-set-card > .fn-set-hint-danger .mdi {
    color: #dc3545;
    opacity: .9;
    font-size: 1rem;
    flex-shrink: 0;
}
[data-bs-theme="dark"] #fnSettingsRoot .fn-set-card > .fn-set-hint-danger {
    background: rgba(220, 53, 69, .16);
}
[data-bs-theme="dark"] #fnSettingsRoot .fn-set-card > .fn-set-hint-danger .mdi {
    color: #ff6b78;
}


/* ─────────────────────────────────────────────────────────────────────────
 * SEGMENTED CONTROL — Theme / Header / Tab bar / Font size etc.
 *
 * NEW: Active button uses the brand-pill treatment (solid slate light,
 * lighter slate dark, white text/icons either way) matching the tabbar's
 * active pill. Previously the active background was --fn-card-bg, which
 * in dark mode rendered identically to the container — there was no
 * visible "I am selected" cue.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-segmented {
    margin-left: auto;
    display: inline-flex;
    background-color: var(--lg-surface-subtle);
    backdrop-filter: var(--lg-blur-subtle);
    -webkit-backdrop-filter: var(--lg-blur-subtle);
    border: 1px solid var(--lg-edge);
    border-radius: var(--lg-r-sm);
    padding: .15rem;
    gap: .15rem;
}
.fn-segmented button {
    background: transparent;
    border: 0;
    color: var(--fn-text-muted);
    padding: .35rem .6rem;
    font-weight: 700;
    font-size: .78rem;
    border-radius: calc(var(--lg-r-sm) - .2rem);
    cursor: pointer;
    transition: background-color .18s var(--lg-ease),
                color .18s var(--lg-ease),
                box-shadow .18s var(--lg-ease);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    line-height: 1;
}
.fn-segmented button.active {
    /* Brand-pill treatment — same tokens the tabbar's active pill uses,
       so the design language is consistent. White text on the slate
       background reads unambiguously in both light and dark mode. */
    background-color: var(--lg-tabbar-pill-bg);
    color: var(--lg-tabbar-pill-fg);
    box-shadow: var(--lg-tabbar-pill-shadow);
}


/* ─────────────────────────────────────────────────────────────────────────
 * Color dot — inline swatch inside segmented buttons (Header color row,
 * Tab bar color row). Border had hardcoded rgba(0,0,0,.15) which was
 * invisible against the new brand-slate active button. Token now picks
 * up a theme-appropriate edge.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-color-dot {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    border: 1px solid var(--lg-edge-strong);
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
[data-bs-theme="dark"] .fn-color-dot {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}


/* ─────────────────────────────────────────────────────────────────────────
 * Dropdown — used for "Show calls from the past" and similar.
 * Frosted glass surface so it matches the card it sits in.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-set-select {
    margin-left: auto;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--lg-surface-subtle);
    backdrop-filter: var(--lg-blur-subtle);
    -webkit-backdrop-filter: var(--lg-blur-subtle);
    color: var(--fn-text);
    border: 1px solid var(--lg-edge);
    border-radius: var(--lg-r-sm);
    padding: .35rem 1.85rem .35rem .6rem;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    /* Chevron stroke colour picked from currentColor so it follows
       --fn-text — invisible in dark mode no more. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right .55rem center;
}
[data-bs-theme="dark"] .fn-set-select {
    /* Inline chevron uses %236B7280 stroke — readable in dark too,
       but swap to a lighter gray for higher contrast. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%239099A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
}


/* ─────────────────────────────────────────────────────────────────────────
 * Navigation link rows — Call History / Manage Accounts / Clear cache.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-set-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--lg-divider);
    color: var(--fn-text);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    min-height: 2.4rem;
    transition: background-color .15s var(--lg-ease);
}
.fn-set-link:last-child {
    border-bottom: 0;
}
.fn-set-link:active {
    background: var(--lg-pressed);
}
.fn-set-link > .mdi:first-child {
    font-size: 1.1rem;
    color: var(--fn-text-muted);
    flex-shrink: 0;
}
.fn-set-link span {
    flex: 1 1 auto;
}
.fn-set-chev {
    margin-left: auto;
    opacity: .5;
    flex-shrink: 0;
}

/* Button rendered as a link row (e.g. Clear cached app data). */
.fn-set-link-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--lg-divider);
    text-align: left;
    font-family: inherit;
}
.fn-set-link-btn:last-child {
    border-bottom: 0;
}

/* Monospace version label inside the Clear-cache button. */
.fn-set-version {
    flex: 0 0 auto;
    margin-left: auto;
    padding-right: .35rem;
    font-size: .68rem;
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--fn-text-muted);
    opacity: .8;
}
.fn-set-version:empty {
    display: none;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Sign-out button — solid red CTA at the bottom. Stays solid (no glass)
 * because action affordance.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-set-signout {
    width: 100%;
    background-image: var(--lg-fill-danger);
    color: #fff;
    border: 0;
    border-radius: var(--lg-r-sm);
    padding: .7rem;
    font-weight: 800;
    font-size: .95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,
                0 4px 12px -4px rgba(176, 58, 46, .45),
                0 2px 6px -2px rgba(0,0,0,.15);
    font-family: inherit;
    transition: filter .12s var(--lg-ease), transform .1s var(--lg-ease);
}
.fn-set-signout:active {
    filter: brightness(.9);
    transform: scale(.98);
}
.fn-set-signout .mdi {
    font-size: 1.1rem;
}