/*
 * Polish layer — loaded LAST (after app.css and ui-system.css).
 * ------------------------------------------------------------------
 * Rules for this file:
 *   - Solid colors only. No gradients, anywhere. Depth comes from
 *     borders and tone, not blur or soft shadows.
 *   - Every brand color is derived from --color-primary /
 *     --color-secondary, so Administration > Branding & Appearance
 *     still re-colors the whole app (including the dark sidebar).
 *   - Two radii: 8px for controls, 12px for surfaces.
 *   - One typeface (Schibsted Grotesk, self-hosted so it works offline).
 *
 *   1. Fonts            5. Page header + type      9. Badges + alerts
 *   2. Tokens           6. Surfaces + KPI          10. Overlays + tabs
 *   3. Sidebar          7. Tables                  11. Sign-in screen (+11b pictures)
 *   4. Header + shell   8. Buttons + forms         12. Branding studio
 */

/* ================================================================== */
/* 1. Fonts                                                            */
/* ================================================================== */

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================================== */
/* 2. Tokens                                                           */
/* ================================================================== */

:root {
    --font-ui: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Paper, surfaces, lines. Slightly green-grey so the brand green sits
       in its own family instead of fighting a blue-grey page. */
    --color-background: #eff2ee;
    --color-surface: #ffffff;
    --color-surface-alt: #f5f7f3;
    --color-border: #dde2da;
    --color-border-strong: #c3cabf;
    --color-text: color-mix(in srgb, var(--color-primary) 8%, #101410);
    --color-text-muted: #545e56;

    --radius: 12px;
    --radius-lg: 16px;
    --radius-sm: 8px;
    --header-height: 60px;
    --sidebar-width: 248px;
    --shadow-card: none;
    --shadow-xs: none;
    --shadow-pop: 0 12px 32px rgba(14, 22, 17, 0.18), 0 0 0 1px var(--color-border);

    /* Sidebar: a deep tone of the primary, plus tints of white on top. */
    --sb-bg: color-mix(in srgb, var(--color-primary) 38%, #000);
    --sb-hover: color-mix(in srgb, #fff 7%, var(--sb-bg));
    --sb-active: color-mix(in srgb, #fff 13%, var(--sb-bg));
    --sb-line: color-mix(in srgb, #fff 11%, var(--sb-bg));
    --sb-text: color-mix(in srgb, #fff 78%, var(--sb-bg));
    --sb-muted: color-mix(in srgb, #fff 56%, var(--sb-bg));
    --sb-strong: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-background: #0c110e;
        --color-surface: #141a17;
        --color-surface-alt: #1a221e;
        --color-border: #26302a;
        --color-border-strong: #364139;
        --color-text: #e9eee9;
        --color-text-muted: #9aa79e;
        --shadow-pop: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--color-border-strong);
        --sb-bg: color-mix(in srgb, var(--color-primary) 14%, #050807);
    }
}

:root[data-theme="dark"] {
    --color-background: #0c110e;
    --color-surface: #141a17;
    --color-surface-alt: #1a221e;
    --color-border: #26302a;
    --color-border-strong: #364139;
    --color-text: #e9eee9;
    --color-text-muted: #9aa79e;
    --shadow-pop: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--color-border-strong);
    --sb-bg: color-mix(in srgb, var(--color-primary) 14%, #050807);
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

body {
    line-height: 1.5;
    font-feature-settings: "tnum" 0;
}

.table,
.kpi-value,
.profile-stat-value,
.entity-card-stat strong,
.bar-list-value,
.bs-hex {
    font-variant-numeric: tabular-nums;
}

/* ================================================================== */
/* 3. Sidebar                                                          */
/* ================================================================== */

.app-sidebar,
#mobileNav {
    background: var(--sb-bg);
    border-right: 0;
    color: var(--sb-text);
}

.app-sidebar { padding: 0.75rem 0.65rem; }

.app-sidebar .sidebar-brand,
#mobileNav .sidebar-brand {
    padding: 0.35rem 0.5rem 1rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--sb-line);
    gap: 0.7rem;
}

.sidebar-brand-mark:not(.sidebar-brand-mark--logo) {
    background: #ffffff;
    color: var(--color-primary);
    box-shadow: none;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.sidebar-brand-mark--logo {
    background: #ffffff;
    padding: 3px;
    border-radius: 10px;
    box-shadow: none;
}

.sidebar-brand-text {
    color: var(--sb-strong);
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: -0.015em;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-section-label,
#mobileNav .sidebar-section-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--sb-muted);
    opacity: 1;
    margin: 1.2rem 0 0.3rem;
    padding: 0 0.65rem;
}

.app-sidebar .nav-link,
#mobileNav .nav-link {
    position: relative;
    color: var(--sb-text);
    border-radius: 8px;
    font-weight: 500;
    padding: 0.48rem 0.65rem;
    transform: none;
    box-shadow: none;
}

.app-sidebar .nav-link i,
#mobileNav .nav-link i {
    background: transparent;
    color: var(--sb-muted);
    border-radius: 0;
}

.app-sidebar .nav-link:hover,
#mobileNav .nav-link:hover {
    background: var(--sb-hover);
    color: var(--sb-strong);
    transform: none;
}

.app-sidebar .nav-link:hover i,
#mobileNav .nav-link:hover i {
    background: transparent;
    color: var(--sb-strong);
}

.app-sidebar .nav-link.active,
#mobileNav .nav-link.active {
    background: var(--sb-active);
    color: var(--sb-strong);
    font-weight: 600;
    box-shadow: none;
}

.app-sidebar .nav-link.active i,
#mobileNav .nav-link.active i {
    background: transparent;
    color: var(--sb-strong);
}

/* The one place the secondary brand color shows up in the shell. */
.app-sidebar .nav-link.active::before,
#mobileNav .nav-link.active::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-secondary);
}

.sidebar-scroll { scrollbar-width: thin; scrollbar-color: var(--sb-line) transparent; }

.sidebar-user,
#mobileNav .sidebar-user {
    background: transparent;
    border-top: 1px solid var(--sb-line);
    padding-top: 0.65rem;
    margin-top: 0.5rem;
}

.sidebar-user-trigger {
    color: var(--sb-text);
    border-radius: 8px;
    background: transparent;
}

.sidebar-user-trigger:hover,
.sidebar-user-trigger[aria-expanded="true"] { background: var(--sb-hover); }

.sidebar-user-name { color: var(--sb-strong); font-weight: 600; }
.sidebar-user-role { color: var(--sb-muted); }
.sidebar-user-caret { color: var(--sb-muted); }

#mobileNav .offcanvas-header { border-bottom: 0; }
#mobileNav .btn-close { filter: invert(1) grayscale(1) brightness(1.6); opacity: 0.8; }

/* Focus rings inside the dark sidebar need a light color. */
.app-sidebar :where(a, button):focus-visible,
#mobileNav :where(a, button):focus-visible {
    outline: 2px solid var(--sb-strong);
    outline-offset: -2px;
}

/* ================================================================== */
/* 4. Header + shell                                                   */
/* ================================================================== */

.app-header {
    height: var(--header-height);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
}

.app-content {
    padding: 1.6rem 1.75rem 3rem;
    max-width: 1440px;
    /* "clip" hides horizontal spill like "hidden" did, but does not turn the
       wrapper into a scroll container, so position: sticky inside pages works. */
    overflow-x: clip;
    overflow-y: visible;
}

@media (max-width: 767.98px) {
    .app-content { padding: 1.1rem 0.9rem 2.25rem; }
}

.icon-btn,
.lang-switch,
.sync-indicator-chip,
.account-chip,
.app-install-chip {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    box-shadow: none;
}

.icon-btn:hover,
.lang-switch:hover,
.sync-indicator-chip:hover,
.account-chip:hover,
.app-install-chip:hover,
.account-chip[aria-expanded="true"] {
    background: var(--color-surface-alt);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.icon-btn { position: relative; }

.notif-badge {
    background: var(--color-danger);
    color: #fff;
    border: 2px solid var(--color-surface);
    box-shadow: none;
    font-weight: 700;
}

.theme-switch-track {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-strong);
    box-shadow: none;
}

.theme-switch-thumb {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: none;
}

.avatar {
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
}

.app-install-chip-icon { background: var(--color-primary); border-radius: 6px; }

/* ================================================================== */
/* 5. Page header + type                                               */
/* ================================================================== */

.app-content h1.h4,
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.2;
}

.app-content h1.h4 + p,
.page-header p {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    max-width: 68ch;
    margin-top: 0.3rem;
    line-height: 1.5;
}

.app-content h2.h6,
.app-content h3.h6 {
    font-size: var(--fs-md);
    font-weight: 650;
    letter-spacing: -0.012em;
}

/* Section headings that used to be tracked-out caps read as plain labels. */
.app-content .h6.text-uppercase,
.map-card-eyebrow {
    text-transform: none !important;
    letter-spacing: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text-muted);
}

.page-header {
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

a { color: var(--color-primary); }

/* ================================================================== */
/* 6. Surfaces + KPI                                                   */
/* ================================================================== */

.card,
.toolbar-card,
.chart-card,
.map-card,
.entity-card,
.kpi-card-v2,
.kpi-card,
.profile-panel,
.profile-hero,
.profile-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: none;
}

.toolbar-card { background: var(--color-surface); padding: 0.8rem 1rem; }

.entity-card { transition: border-color var(--dur-fast) var(--ease); }
.entity-card:hover { border-color: var(--color-primary); box-shadow: none; transform: none; }
.entity-card--selected { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }

.entity-card-icon { border-radius: 9px; }
.entity-card-title { font-weight: 650; letter-spacing: -0.01em; }

.kpi-card-v2 { padding: 1rem 1.15rem 1.05rem; }
.kpi-card-v2::before { display: none; }
.kpi-card-v2:hover { transform: none; box-shadow: none; border-color: var(--color-border); }

.kpi-value {
    font-size: 1.95rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--color-text);
}

.kpi-label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0.3rem;
}

.kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    box-shadow: none;
}

.kpi-icon--primary { background: var(--color-primary-soft); color: var(--color-primary); }
.kpi-icon--success { background: var(--color-success-soft); color: var(--color-success-ink); }
.kpi-icon--warning { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.kpi-icon--danger  { background: var(--color-danger-soft);  color: var(--color-danger-ink); }
.kpi-icon--info    { background: var(--color-info-soft);    color: var(--color-info-ink); }

.kpi-sub { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 0.7rem; }
.kpi-sub strong { color: var(--color-text); font-weight: 650; }

.kpi-bar { height: 6px; border-radius: 3px; background: var(--color-surface-alt); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; }
.kpi-bar-fill { background: var(--color-primary); border-radius: 0; }

.chart-card-title { font-weight: 650; letter-spacing: -0.012em; }
.chart-card-subtitle { color: var(--color-text-muted); }

.progress { background: var(--color-surface-alt); box-shadow: inset 0 0 0 1px var(--color-border); border-radius: 4px; }
.progress-bar { background: var(--color-primary); }

/* Older, more specific rules still forced caps on these labels. */
.kpi-card .kpi-label,
.kpi-card-v2 .kpi-label,
.toolbar-card .form-label,
.entity-card-stat span,
.profile-stat-label,
.auth-split-form .form-label {
    text-transform: none;
    letter-spacing: 0;
}

.kpi-card-v2 { display: flex; flex-direction: column; }
.kpi-card-v2 .kpi-bar { margin-top: auto; }

/* ================================================================== */
/* 7. Tables                                                           */
/* ================================================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--color-surface-alt);
    color: var(--color-text);
}

.table > thead > tr > th,
.table thead th {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--color-border-strong);
    white-space: nowrap;
}

.table > tbody > tr > td { border-color: var(--color-border); vertical-align: middle; }
.table-responsive { border-radius: var(--radius); }

/* ================================================================== */
/* 8. Buttons + forms                                                  */
/* ================================================================== */

.btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: none !important;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }

.btn-outline-secondary {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active { background: var(--color-surface-alt); border-color: var(--color-text-muted); color: var(--color-text); }

.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); margin-bottom: 0.35rem; text-transform: none; letter-spacing: 0; }
.form-text { font-size: var(--fs-xs); color: var(--color-text-muted); }

.form-control,
.form-select,
.input-group-text {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    color: var(--color-text);
    box-shadow: none;
}

.form-control::placeholder { color: color-mix(in srgb, var(--color-text-muted) 70%, transparent); }

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
    background-color: var(--color-surface);
}

.form-check-input { border-color: var(--color-border-strong); }
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); }

/* ================================================================== */
/* 9. Badges + alerts                                                  */
/* ================================================================== */

.status-pill,
.badge {
    border-radius: 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.alert {
    border-radius: 10px;
    border-width: 1px;
    box-shadow: none;
}

/* ================================================================== */
/* 10. Overlays + tabs                                                 */
/* ================================================================== */

.dropdown-menu,
.popover,
.notification-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}

.dropdown-item { border-radius: 6px; font-weight: 500; }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--color-surface-alt); color: var(--color-text); }
.dropdown-item.active,
.dropdown-item:active { background: var(--color-primary-soft); color: var(--color-primary); }

.modal-content { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); background: var(--color-surface); }
.modal-header,
.modal-footer { border-color: var(--color-border); }

/* Underline tabs use the brand color as text; filled pill tabs (profile page) keep readable on-primary text. */
.nav-tabs .nav-link.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.profile-tabs .nav-link.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

.page-link { border-radius: 8px; }
.page-item.active .page-link { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* ================================================================== */
/* 11. Sign-in screen                                                  */
/* ================================================================== */

.auth-split-media { background: var(--sb-bg); }

.auth-slide::after { background: color-mix(in srgb, var(--sb-bg) 62%, transparent); }

.auth-slide-copy { padding: 3.5rem 3.5rem 4.5rem; max-width: 620px; }

.auth-slide-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    font-size: 1.5rem;
    background: var(--color-secondary);
    color: color-mix(in srgb, var(--color-secondary) 10%, #000);
    backdrop-filter: none;
    margin-bottom: 1.25rem;
}

.auth-slide-copy h2 {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin-bottom: 0.7rem;
    text-wrap: balance;
}

.auth-slide-copy p { font-size: var(--fs-lg); line-height: 1.5; max-width: 44ch; }

.auth-slide-dots { left: 3.5rem; bottom: 2rem; }
.auth-slide-dot { height: 4px; border-radius: 2px; }
.auth-slide-dot.is-active { background: var(--color-secondary); width: 40px; }

.auth-split-form { background: var(--color-surface); flex: 1 1 42%; }
.auth-split-form-inner { max-width: 372px; }

/* Logo sits above the form as a plain mark, no overlap trick. */
.auth-logo-badge { justify-content: flex-start; margin-bottom: 2rem; }
.auth-logo-badge img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    box-shadow: none;
    object-fit: contain;
    padding: 4px;
    background: #fff;
}

.auth-split-form .auth-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }

.auth-split-form h1 { font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.15; }
.auth-split-form .auth-subtitle { font-size: var(--fs-base); color: var(--color-text-muted); margin-bottom: 1.6rem; }

.auth-input-group { border-color: var(--color-border-strong); border-radius: 8px; }
.auth-input-group:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.auth-submit { border-radius: 8px; padding: 0.7rem 1rem; font-weight: 650; }

/* Row under the password field: "Remember me" left, "Forgot password?" right. */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.auth-link { font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Links under a form ("Back to sign in", "Send a new code"). */
.auth-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0; font-size: var(--fs-sm); }
.auth-foot a { font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-foot-sep { color: var(--color-text-muted); }

/* The 6-digit SMS code: large, evenly spaced, monospaced digits. */
.auth-code {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5em;
    text-indent: 0.25em;
    text-align: center;
    padding-block: 0.6rem;
    font-variant-numeric: tabular-nums;
}
.auth-code::placeholder { letter-spacing: 0.5em; font-weight: 500; }

/* Volunteer sign-in: same solid treatment (no radial wash). */
.v-auth-shell { background: var(--color-background); }

/* ================================================================== */
/* 11b. Profile pictures                                               */
/* ================================================================== */

/* A picture fills the whole circle. No overflow:hidden on .avatar itself,
   so the green "online" dot at its corner is never clipped. */
.avatar .avatar-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar:has(.avatar-img) { background: var(--color-surface-alt); }
.avatar-xxl { width: 96px; height: 96px; font-size: var(--fs-2xl); }

.profile-hero-photo { position: relative; flex: 0 0 auto; display: inline-flex; }
.profile-avatar-edit {
    position: absolute;
    left: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
    font-size: 0.8rem;
    text-decoration: none;
}
.profile-avatar-edit:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

.avatar-uploader { display: flex; align-items: center; gap: 1.1rem; }
.avatar-uploader-body { min-width: 0; display: grid; gap: 0.55rem; }
.avatar-uploader-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.avatar-uploader-row[hidden] { display: none; }
.avatar-uploader-note { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.avatar-uploader-note.is-error { color: var(--color-danger-ink); font-weight: 600; }
#avatar-input:focus-visible + .btn,
label[for="avatar-input"]:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (max-width: 575.98px) {
    .avatar-uploader { flex-direction: column; align-items: flex-start; }
}

/* ================================================================== */
/* 12. Branding studio                                                 */
/* ================================================================== */

.bs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 1.5rem;
    align-items: start;
}

.bs-main { display: grid; gap: 1.25rem; min-width: 0; }

.bs-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.bs-section-head {
    padding: 1.05rem 1.25rem 0.95rem;
    border-bottom: 1px solid var(--color-border);
}

.bs-section-title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.018em; margin: 0; line-height: 1.3; }
.bs-section-desc { margin: 0.2rem 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 62ch; }

.bs-section-body { padding: 1.25rem; display: grid; gap: 1.35rem; }

.bs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

.bs-field { min-width: 0; }
.bs-field > .form-label { display: block; }

/* -- Asset (logo / favicon / slide photo) uploader -------------------- */

.bs-asset {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-alt);
}

.bs-asset-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 1.4rem;
}

.bs-asset-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
.bs-asset--photo .bs-asset-thumb { width: 96px; height: 64px; }
.bs-asset--photo .bs-asset-thumb img { object-fit: cover; padding: 0; }

.bs-asset-meta { min-width: 0; flex: 1 1 auto; }
.bs-asset-name { font-size: var(--fs-sm); font-weight: 600; margin: 0; }
.bs-asset-note { font-size: var(--fs-xs); color: var(--color-text-muted); margin: 0.1rem 0 0; }
.bs-asset-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.55rem; }

.bs-file { position: relative; display: inline-flex; }
.bs-file input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.bs-file:focus-within .btn { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bs-file-name { font-size: var(--fs-xs); color: var(--color-text-muted); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bs-remove { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); color: var(--color-text-muted); cursor: pointer; margin: 0; }
.bs-remove input { margin: 0; }

/* -- Color fields ------------------------------------------------------ */

.bs-color-row { display: flex; align-items: stretch; gap: 0.5rem; }

.bs-swatch {
    flex: 0 0 auto;
    width: var(--ctl-h);
    height: var(--ctl-h);
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
    cursor: pointer;
    overflow: hidden;
}
.bs-swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.bs-swatch::-webkit-color-swatch { border: 0; border-radius: 5px; }
.bs-swatch::-moz-color-swatch { border: 0; border-radius: 5px; }

.bs-color-row .form-control { flex: 1 1 auto; min-width: 0; }

.bs-palette { display: flex; margin-top: 0.7rem; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.bs-palette-chip { flex: 1 1 0; min-width: 0; padding: 0.55rem 0.5rem 0.4rem; display: grid; gap: 0.1rem; font-size: 11px; line-height: 1.25; }
.bs-palette-chip b { font-weight: 650; font-size: 11px; }
.bs-hex { opacity: 0.85; }

/* -- Segmented radios / slide tabs ------------------------------------ */

.bs-segment {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    max-width: 100%;
    flex-wrap: wrap;
}

.bs-segment input { position: absolute; opacity: 0; pointer-events: none; }

.bs-segment label,
.bs-segment button {
    margin: 0;
    padding: 0.38rem 0.85rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.bs-segment label:hover,
.bs-segment button:hover { color: var(--color-text); }

.bs-segment input:checked + label,
.bs-segment button[aria-selected="true"] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 0 0 1px var(--color-border-strong);
}

.bs-segment input:focus-visible + label,
.bs-segment button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* -- Slides ------------------------------------------------------------ */

.bs-slide-pane[hidden] { display: none; }
.bs-slide-pane { display: grid; gap: 1.1rem; }

.bs-icon-input { display: flex; align-items: center; gap: 0.5rem; }
.bs-icon-preview {
    flex: 0 0 auto;
    width: var(--ctl-h);
    height: var(--ctl-h);
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--color-secondary);
    color: color-mix(in srgb, var(--color-secondary) 10%, #000);
    font-size: 1.05rem;
}

/* -- Availability ------------------------------------------------------ */

.bs-switch-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.bs-switch-row .form-check-input { width: 2.6rem; height: 1.4rem; margin: 0.1rem 0 0; cursor: pointer; }
.bs-switch-title { font-size: var(--fs-base); font-weight: 600; margin: 0; }
.bs-switch-desc { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0.15rem 0 0; max-width: 56ch; }

.bs-callout {
    display: flex;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    font-size: var(--fs-sm);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
    border: 1px solid color-mix(in srgb, var(--color-warning-ink) 28%, transparent);
}
.bs-callout i { flex: 0 0 auto; margin-top: 0.1rem; }
.bs-maint-fields[data-off="true"] { opacity: 0.55; }

/* -- Live preview ------------------------------------------------------ */

.bs-preview {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.9rem;
    display: grid;
    gap: 0.85rem;
}

.bs-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bs-preview-title { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.012em; margin: 0; }

.bs-stage { border-radius: 10px; border: 1px solid var(--color-border-strong); overflow: hidden; background: var(--color-background); }
.bs-stage[hidden] { display: none; }

/* Mini app shell. All colors come from custom properties set by JS. */
.bs-mini {
    --p: #0a6b3a; --p-hover: #085530; --p-soft: #e3f3e9; --p-on: #fff; --s: #d4a017; --sb: #042a17;
    display: grid;
    grid-template-columns: 31% 1fr;
    height: 284px;
    font-size: 10.5px;
    line-height: 1.3;
    color: #17201a;
}

.bs-mini-side { background: var(--sb); padding: 12px 9px; display: flex; flex-direction: column; gap: 6px; color: rgba(255,255,255,.8); }
.bs-mini-brand { display: flex; align-items: center; gap: 7px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.12); min-width: 0; }
.bs-mini-mark { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; background: #fff; color: var(--p); display: grid; place-items: center; font-weight: 800; font-size: 9px; overflow: hidden; }
.bs-mini-mark img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.bs-mini-name { color: #fff; font-weight: 700; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-mini-nav { position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 5px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-mini-nav i { width: 8px; height: 8px; border-radius: 2px; background: currentColor; opacity: .55; }
.bs-mini-nav.is-active { background: rgba(255,255,255,.13); color: #fff; }
.bs-mini-nav.is-active::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 0 2px 2px 0; background: var(--s); }

.bs-mini-main { background: #eff2ee; display: flex; flex-direction: column; min-width: 0; }
.bs-mini-top { height: 30px; background: #fff; border-bottom: 1px solid #dde2da; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-weight: 700; font-size: 10.5px; }
.bs-mini-avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--p); color: var(--p-on); display: grid; place-items: center; font-size: 7px; font-weight: 700; }
.bs-mini-body { padding: 10px; display: grid; gap: 8px; align-content: start; }
.bs-mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bs-mini-card { background: #fff; border: 1px solid #dde2da; border-radius: 7px; padding: 8px; }
.bs-mini-num { font-size: 17px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.bs-mini-lbl { color: #5a645c; margin-top: 3px; }
.bs-mini-bar { height: 4px; border-radius: 2px; background: #eef1ec; margin-top: 7px; overflow: hidden; }
.bs-mini-bar i { display: block; height: 100%; width: 62%; background: var(--p); }
.bs-mini-row { display: flex; align-items: center; gap: 6px; }
.bs-mini-btn { background: var(--p); color: var(--p-on); border-radius: 5px; padding: 5px 9px; font-weight: 650; }
.bs-mini-badge { background: var(--p-soft); color: var(--p); border-radius: 4px; padding: 3px 6px; font-weight: 650; }
.bs-mini-list { padding: 0; overflow: hidden; }
.bs-mini-li { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-top: 1px solid #eef1ec; }
.bs-mini-li:first-child { border-top: 0; }
.bs-mini-dot { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--p-soft); color: var(--p); display: grid; place-items: center; font-size: 6.5px; font-weight: 700; }
.bs-mini-li b { font-weight: 600; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-mini-li .bs-mini-badge { font-size: 9px; padding: 2px 5px; }
.bs-mini-link { color: var(--p); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Mini sign-in screen */
.bs-mini-login {
    --p: #0a6b3a; --p-on: #fff; --s: #d4a017; --sb: #042a17;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    height: 284px;
    font-size: 10px;
    line-height: 1.3;
}
.bs-mini-photo { position: relative; background: var(--sb) center/cover no-repeat; display: flex; align-items: flex-end; overflow: hidden; }
.bs-mini-photo::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--sb) 62%, transparent); }
.bs-mini-copy { position: relative; padding: 12px 12px 18px; color: #fff; }
.bs-mini-copy i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--s); color: #101410; font-size: 12px; margin-bottom: 8px; }
.bs-mini-copy b { display: block; font-size: 12.5px; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 3px; }
.bs-mini-copy span { display: block; color: rgba(255,255,255,.86); }
.bs-mini-dots { position: absolute; left: 12px; bottom: 8px; display: flex; gap: 3px; }
.bs-mini-dots i { width: 9px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); }
.bs-mini-dots i.is-on { width: 16px; background: var(--s); }
.bs-mini-form { background: #fff; color: #17201a; padding: 16px 14px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.bs-mini-form .bs-mini-mark { border: 1px solid #dde2da; width: 26px; height: 26px; }
.bs-mini-form h6 { margin: 4px 0 0; font-size: 13px; font-weight: 700; letter-spacing: -.025em; }
.bs-mini-input { height: 20px; border: 1px solid #c3cabf; border-radius: 5px; background: #fff; }
.bs-mini-form .bs-mini-btn { text-align: center; padding: 6px 0; }

.bs-preview-note { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* -- Save bar ---------------------------------------------------------- */

.bs-savebar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
}

.bs-savebar-status { display: flex; align-items: center; gap: 0.55rem; font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
.bs-savebar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }
.bs-savebar[data-dirty="true"] .bs-savebar-dot { background: var(--color-warning); }
.bs-savebar[data-dirty="true"] .bs-savebar-status { color: var(--color-text); font-weight: 600; }
.bs-savebar-actions { display: flex; gap: 0.5rem; }

@media (max-width: 1199.98px) {
    .bs-layout { grid-template-columns: minmax(0, 1fr); }
    .bs-preview { position: static; order: -1; }
}

@media (max-width: 575.98px) {
    .bs-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .bs-asset { flex-wrap: wrap; }
    .bs-savebar { flex-direction: column; align-items: stretch; }
    .bs-savebar-actions .btn { flex: 1 1 0; }
}