/* ==========================================================================
   Varista PM — web design system
   Mirrors the iOS app (ios/Varista/Varista/Extensions/BrandColors.swift and
   DesignSystem.swift): Winsel for titles, Quicksand for body, espresso/sage/
   cream palette with a roast ramp and muted status accents.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "Quicksand"; src: url("../fonts/Quicksand-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/Quicksand-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/Quicksand-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/Quicksand-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Winsel"; src: url("../fonts/Winsel-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Winsel"; src: url("../fonts/Winsel-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Winsel"; src: url("../fonts/Winsel-DemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Winsel"; src: url("../fonts/Winsel-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Winsel Condensed"; src: url("../fonts/WinselCondensed-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
    /* Brand */
    --v-espresso: #1D1E1B;
    --v-espresso-2: #2A2B27;
    --v-sage: #C8C5AD;
    --v-sage-light: #E8E6D9;
    --v-sage-dark: #A8A690;
    --v-cream: #F2DCC2;
    --v-sand: #D9AE89;
    --v-roast: #74443A;
    --v-clay: #A6785D;

    /* Status */
    --v-success: #5A6B4A;
    --v-danger: #A63E2A;
    --v-neutral: #8A8577;
    --v-warning-ink: #8A5A2E;   /* sand is too light for text on white */

    /* Surfaces & lines */
    --v-paper: #F7F5EF;
    --v-surface: #FFFFFF;
    --v-hairline: rgba(29, 30, 27, 0.10);
    --v-hairline-strong: rgba(29, 30, 27, 0.18);
    --v-shadow-sm: 0 1px 2px rgba(29, 30, 27, 0.06);
    --v-shadow-md: 0 6px 24px -8px rgba(29, 30, 27, 0.18);

    /* Type */
    --v-font-body: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --v-font-display: "Winsel", "Quicksand", -apple-system, BlinkMacSystemFont, sans-serif;
    --v-font-numeric: "Winsel Condensed", "Winsel", -apple-system, sans-serif;

    /* Layout */
    --sidebar-width: 256px;
    --v-radius: 14px;
    --v-radius-sm: 10px;

    /* Bootstrap theme overrides */
    --bs-body-font-family: var(--v-font-body);
    --bs-body-color: var(--v-espresso);
    --bs-body-bg: var(--v-paper);
    --bs-border-color: var(--v-hairline-strong);
    --bs-secondary-color: rgba(29, 30, 27, 0.62);
    --bs-link-color: var(--v-espresso);
    --bs-link-color-rgb: 29, 30, 27;
    --bs-link-hover-color: var(--v-roast);
    --bs-link-hover-color-rgb: 116, 68, 58;

    --bs-primary: #1D1E1B;           --bs-primary-rgb: 29, 30, 27;
    --bs-secondary: #8A8577;         --bs-secondary-rgb: 138, 133, 119;
    --bs-success: #5A6B4A;           --bs-success-rgb: 90, 107, 74;
    --bs-danger: #A63E2A;            --bs-danger-rgb: 166, 62, 42;
    --bs-warning: #D9AE89;           --bs-warning-rgb: 217, 174, 137;
    --bs-info: #A6785D;              --bs-info-rgb: 166, 120, 93;

    --bs-success-bg-subtle: #E7EBE1;  --bs-success-border-subtle: #C5CFB9;  --bs-success-text-emphasis: #3F4C33;
    --bs-danger-bg-subtle: #F6E2DD;   --bs-danger-border-subtle: #E6B9AE;   --bs-danger-text-emphasis: #7A2C1D;
    --bs-warning-bg-subtle: #FBF1E6;  --bs-warning-border-subtle: #EED5BC;  --bs-warning-text-emphasis: #6E4623;
    --bs-info-bg-subtle: #F3E9E2;     --bs-info-border-subtle: #DCC4B4;     --bs-info-text-emphasis: #5E3F2E;
    --bs-primary-bg-subtle: #E8E6D9;  --bs-primary-border-subtle: #C8C5AD;  --bs-primary-text-emphasis: #1D1E1B;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
    min-height: 100vh;
    font-family: var(--v-font-body);
    font-weight: 500;
    background: var(--v-paper);
    color: var(--v-espresso);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--v-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--v-espresso);
}
small, .small { font-weight: 500; }
strong, b, th { font-weight: 700; }
a { color: var(--v-espresso); text-underline-offset: 2px; }
a:hover { color: var(--v-roast); }
::selection { background: var(--v-cream); color: var(--v-espresso); }
:focus-visible { outline: 2px solid var(--v-clay); outline-offset: 2px; }

.text-muted { color: rgba(29, 30, 27, 0.58) !important; }
.text-warning { color: var(--v-warning-ink) !important; }
.text-info { color: var(--v-clay) !important; }
.low-stock { color: var(--v-danger); font-weight: 700; }

/* ---------- Sidebar ---------- */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: var(--v-espresso);
    z-index: 1040;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 197, 173, 0.3) transparent;
}
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.25rem 1rem;
}
.sidebar-mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(200, 197, 173, 0.18);
}
.sidebar-wordmark {
    font-family: var(--v-font-display);
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: 0.28em;
    color: var(--v-sage);
    line-height: 1;
}
.sidebar-wordmark small {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--v-font-body);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(200, 197, 173, 0.55);
}
.sidebar .nav { padding: 0 0.75rem 1.5rem; }
.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgba(242, 220, 194, 0.72);
    padding: 0.55rem 0.75rem;
    margin: 1px 0;
    border-radius: var(--v-radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar .nav-link i { width: 18px; text-align: center; font-size: 1rem; opacity: 0.9; }
.sidebar .nav-link:hover { color: var(--v-cream); background: rgba(200, 197, 173, 0.10); }
.sidebar .nav-link.active {
    color: var(--v-espresso);
    background: var(--v-sage);
    box-shadow: inset 3px 0 0 var(--v-clay);
}
.sidebar .nav-link.active i { opacity: 1; }
.nav-section {
    padding: 1.1rem 0.75rem 0.35rem;
    color: rgba(200, 197, 173, 0.6);
    font-family: var(--v-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    list-style: none;
}
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(29, 30, 27, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1035;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ---------- Main + top bar ---------- */
.main-content {
    margin-left: var(--sidebar-width);
    padding: 0 1.75rem 2.5rem;
    min-height: 100vh;
}
.top-bar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    margin: 0 -1.75rem 1.5rem;
    padding: 0.75rem 1.75rem;
    background: rgba(247, 245, 239, 0.86);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--v-hairline);
}
.top-bar-title { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.top-bar-title > div { min-width: 0; }
.top-bar h4, .top-bar h5 { margin: 0; font-size: 1.35rem; }
.top-bar .btn-toolbar, .top-bar .btn-group { flex-wrap: wrap; }
.sidebar-toggle {
    display: none;
    flex: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--v-hairline-strong);
    border-radius: 50%;
    background: var(--v-surface);
    color: var(--v-espresso);
    font-size: 1.25rem;
}
.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px !important;
    padding: 0.3rem 0.85rem 0.3rem 0.3rem !important;
    background: var(--v-surface);
}
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--v-espresso);
    color: var(--v-cream);
    font-family: var(--v-font-display);
    font-size: 0.8rem;
    font-weight: 700;
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--v-hairline);
    border-radius: var(--v-radius);
    box-shadow: var(--v-shadow-sm);
    background: var(--v-surface);
}
.card > .card-header:first-child { border-radius: calc(var(--v-radius) - 1px) calc(var(--v-radius) - 1px) 0 0; }
.card > .card-footer:last-child { border-radius: 0 0 calc(var(--v-radius) - 1px) calc(var(--v-radius) - 1px); }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--v-hairline);
    padding: 0.9rem 1.15rem;
    font-family: var(--v-font-display);
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--v-espresso);
}
.card-header i { color: var(--v-roast); margin-right: 0.25rem; }
.card-header .btn { white-space: nowrap; }
.card-header .btn i { color: inherit; }
.card-body { padding: 1.15rem; }
.card-footer { background: transparent; border-top: 1px solid var(--v-hairline); }

/* KPI tiles (dashboard) */
.kpi-card .card-body { padding: 1.1rem 1.2rem; }
.kpi-card h6 {
    font-family: var(--v-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v-roast) !important;
}
.kpi-card h3 {
    font-family: var(--v-font-numeric);
    font-size: 2.4rem;
    line-height: 1;
    margin: 0.35rem 0 0.4rem;
}
.kpi-card--dark { background: var(--v-espresso); border-color: var(--v-espresso); }
.kpi-card--dark h3 { color: var(--v-cream); }
.kpi-card--dark h6 { color: var(--v-sage) !important; }
.kpi-card--dark small { color: rgba(242, 220, 194, 0.8) !important; }

a.kpi-card { color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--v-shadow-md); }
.kpi-card--alert { border-color: rgba(166, 62, 42, 0.45); background: #FBF2EF; }
.kpi-card--alert h3 { color: var(--v-danger); }

/* ---------- Payments ---------- */
.card[id] { scroll-margin-top: 84px; }
.section-label {
    font-family: var(--v-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v-roast);
    margin-bottom: 0.6rem;
}
.payment-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: var(--v-radius-sm);
    background: var(--v-paper);
    border: 1px solid var(--v-hairline);
}
.payment-stat span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--v-roast); }
.payment-stat strong { font-family: var(--v-font-numeric); font-size: 1.35rem; line-height: 1.1; }
.payment-stat--alert { background: #FBF2EF; border-color: rgba(166, 62, 42, 0.35); }
.payment-stat--alert strong { color: var(--v-danger); }
.payment-activity summary { cursor: pointer; font-weight: 700; color: var(--v-roast); font-size: 0.85rem; }
.payment-activity li { padding: 0.35rem 0; border-bottom: 1px solid var(--v-hairline); font-size: 0.88rem; }
.payment-activity li:last-child { border-bottom: 0; }
.schedule-total {
    padding: 0.75rem 1rem;
    border-radius: var(--v-radius-sm);
    background: var(--v-paper);
    border: 1px solid var(--v-hairline);
}
.schedule-total.is-balanced { background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); color: var(--bs-success-text-emphasis); }
.schedule-total.is-off { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text-emphasis); }
.split-panel { padding: 0.85rem; border-radius: var(--v-radius-sm); background: var(--v-paper); border: 1px dashed var(--v-hairline-strong); margin: 0; }

/* ---------- Cash flow ---------- */
.checkin-card--due { border-color: var(--v-sand); box-shadow: 0 0 0 3px rgba(217, 174, 137, 0.25); }
.checkin-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--v-espresso); color: var(--v-cream); font-size: 1.1rem; flex: none;
}
.checkin-math { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.checkin-math > div {
    padding: 0.55rem 0.75rem; border-radius: var(--v-radius-sm);
    background: var(--v-paper); border: 1px solid var(--v-hairline);
    display: flex; flex-direction: column;
}
.checkin-math span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--v-roast); }
.checkin-math strong { font-family: var(--v-font-numeric); font-size: 1.2rem; }
.checkin-math__total { grid-column: 1 / -1; background: var(--v-espresso) !important; border-color: var(--v-espresso) !important; }
.checkin-math__total span { color: var(--v-sage); }
.checkin-math__total strong { color: var(--v-cream); font-size: 1.5rem; }
#prev-amount { max-width: 8rem; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.cashflow-chart { position: relative; height: 300px; }
.cashflow-table { font-variant-numeric: tabular-nums; }
.cashflow-table th, .cashflow-table td { white-space: nowrap; }
.cashflow-table .sticky-col { position: sticky; left: 0; background: var(--v-surface); z-index: 1; min-width: 12rem; box-shadow: 1px 0 0 var(--v-hairline); padding-left: 1rem; }
.cashflow-table th.is-current { color: var(--v-espresso); }
.cashflow-table .row-section td { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--v-roast); background: var(--v-paper); }
.cashflow-table .row-section .sticky-col { background: var(--v-paper); }
.cashflow-table .row-total td, .cashflow-table .row-strong td { font-weight: 700; }
.cashflow-table .row-closing td { font-weight: 700; background: var(--v-sage-light); border-top: 1px solid var(--v-hairline-strong); }
.cashflow-table .row-closing .sticky-col { background: var(--v-sage-light); }
.cashflow-table td.is-negative { color: #fff; background: var(--v-danger) !important; }
.week-detail summary { cursor: pointer; list-style: none; }
.week-detail summary::-webkit-details-marker { display: none; }
.week-detail[open] summary { margin-bottom: 0.25rem; }
.expected-date-form input { width: 9.5rem; }

/* ---------- Recurring ---------- */
.recurring-card.is-paused { opacity: 0.65; }
.recurring-amount { font-family: var(--v-font-numeric); font-size: 2rem; line-height: 1.1; margin-bottom: 0.25rem; }
.recurring-amount span { font-family: var(--v-font-body); font-size: 0.85rem; color: var(--v-roast); margin-left: 0.25rem; }
.recurring-pos { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.setup-guide ol { padding-left: 1.2rem; }
.setup-guide li { margin-bottom: 0.75rem; }

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(232, 230, 217, 0.55);
    --bs-table-striped-bg: rgba(232, 230, 217, 0.35);
    margin-bottom: 0;
    vertical-align: middle;
}
.table > thead th {
    font-family: var(--v-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--v-roast);
    border-bottom: 1px solid var(--v-hairline-strong);
    white-space: nowrap;
}
.table > :not(caption) > * > * { border-bottom-color: var(--v-hairline); padding: 0.7rem 0.75rem; }
.table-sm > :not(caption) > * > * { padding: 0.5rem 0.5rem; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table td a { font-weight: 700; text-decoration: none; }
.table td a:hover { text-decoration: underline; }
.table-light, .table > thead.table-light { --bs-table-bg: var(--v-paper); }

/* ---------- Badges & status ---------- */
.badge {
    font-family: var(--v-font-body);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    padding: 0.38em 0.75em;
    border-radius: 999px;
}
.badge-status { padding: 0.45em 0.9em; }
.badge.bg-primary { background-color: var(--v-espresso) !important; }
.badge.bg-warning { color: var(--v-espresso) !important; }

/* Same mapping as VaristaStatus.style(for:) on iOS */
.status-in_progress { background-color: var(--v-clay); color: #fff; }
.status-completed,
.status-paid,
.status-approved,
.status-received,
.status-active,
.status-ok { background-color: var(--v-success); color: #fff; }
.status-partial,
.status-pending,
.status-tight { background-color: var(--v-sand); color: var(--v-espresso); }
.status-overdue,
.status-rejected,
.status-low,
.status-shortfall { background-color: var(--v-danger); color: #fff; }
.status-planned { background-color: var(--v-sage-light); color: var(--v-espresso); box-shadow: inset 0 0 0 1px var(--v-sage); }
.status-on_hold { background-color: var(--v-sand); color: var(--v-espresso); }
.status-draft,
.status-sent,
.status-cancelled,
.status-closed,
.status-archived { background-color: var(--v-neutral); color: #fff; }

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--v-font-body);
    font-weight: 700;
    border-radius: var(--v-radius-sm);
    border-width: 1.5px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { border-radius: 8px; }
.btn-lg { border-radius: 12px; }
.btn-primary {
    --bs-btn-bg: var(--v-espresso); --bs-btn-border-color: var(--v-espresso); --bs-btn-color: var(--v-cream);
    --bs-btn-hover-bg: var(--v-espresso-2); --bs-btn-hover-border-color: var(--v-espresso-2); --bs-btn-hover-color: var(--v-cream);
    --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000; --bs-btn-active-color: var(--v-cream);
    --bs-btn-disabled-bg: var(--v-espresso); --bs-btn-disabled-border-color: var(--v-espresso);
}
.btn-outline-primary {
    --bs-btn-color: var(--v-espresso); --bs-btn-border-color: var(--v-espresso);
    --bs-btn-hover-bg: var(--v-espresso); --bs-btn-hover-border-color: var(--v-espresso); --bs-btn-hover-color: var(--v-cream);
    --bs-btn-active-bg: var(--v-espresso); --bs-btn-active-border-color: var(--v-espresso); --bs-btn-active-color: var(--v-cream);
}
.btn-secondary {
    --bs-btn-bg: var(--v-sage-light); --bs-btn-border-color: var(--v-sage-light); --bs-btn-color: var(--v-espresso);
    --bs-btn-hover-bg: var(--v-sage); --bs-btn-hover-border-color: var(--v-sage); --bs-btn-hover-color: var(--v-espresso);
    --bs-btn-active-bg: var(--v-sage-dark); --bs-btn-active-border-color: var(--v-sage-dark); --bs-btn-active-color: var(--v-espresso);
}
.btn-outline-secondary {
    --bs-btn-color: var(--v-espresso); --bs-btn-border-color: var(--v-hairline-strong); --bs-btn-bg: var(--v-surface);
    --bs-btn-hover-bg: var(--v-sage-light); --bs-btn-hover-border-color: var(--v-sage-dark); --bs-btn-hover-color: var(--v-espresso);
    --bs-btn-active-bg: var(--v-sage); --bs-btn-active-border-color: var(--v-sage-dark); --bs-btn-active-color: var(--v-espresso);
}
.btn-success {
    --bs-btn-bg: var(--v-success); --bs-btn-border-color: var(--v-success); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #4B5A3E; --bs-btn-hover-border-color: #4B5A3E; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #3F4C33; --bs-btn-active-border-color: #3F4C33;
}
.btn-outline-success {
    --bs-btn-color: var(--v-success); --bs-btn-border-color: var(--v-success);
    --bs-btn-hover-bg: var(--v-success); --bs-btn-hover-border-color: var(--v-success); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--v-success); --bs-btn-active-border-color: var(--v-success);
}
.btn-danger {
    --bs-btn-bg: var(--v-danger); --bs-btn-border-color: var(--v-danger); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #8D3423; --bs-btn-hover-border-color: #8D3423; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #7A2C1D; --bs-btn-active-border-color: #7A2C1D;
}
.btn-outline-danger {
    --bs-btn-color: var(--v-danger); --bs-btn-border-color: var(--v-danger);
    --bs-btn-hover-bg: var(--v-danger); --bs-btn-hover-border-color: var(--v-danger); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--v-danger); --bs-btn-active-border-color: var(--v-danger);
}
.btn-warning {
    --bs-btn-bg: var(--v-sand); --bs-btn-border-color: var(--v-sand); --bs-btn-color: var(--v-espresso);
    --bs-btn-hover-bg: #CC9C74; --bs-btn-hover-border-color: #CC9C74; --bs-btn-hover-color: var(--v-espresso);
    --bs-btn-active-bg: #BF8D63; --bs-btn-active-border-color: #BF8D63;
}
.btn-outline-warning {
    --bs-btn-color: var(--v-warning-ink); --bs-btn-border-color: var(--v-sand);
    --bs-btn-hover-bg: var(--v-sand); --bs-btn-hover-border-color: var(--v-sand); --bs-btn-hover-color: var(--v-espresso);
    --bs-btn-active-bg: var(--v-sand); --bs-btn-active-border-color: var(--v-sand);
}
.btn-info, .btn-outline-info {
    --bs-btn-color: var(--v-clay); --bs-btn-border-color: var(--v-clay);
    --bs-btn-hover-bg: var(--v-clay); --bs-btn-hover-border-color: var(--v-clay); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--v-clay); --bs-btn-active-border-color: var(--v-clay);
}
.btn-info { --bs-btn-bg: var(--v-clay); --bs-btn-color: #fff; }
.btn-link { --bs-btn-color: var(--v-roast); --bs-btn-hover-color: var(--v-espresso); }

/* ---------- Forms ---------- */
.form-label { font-weight: 700; font-size: 0.85rem; color: var(--v-espresso); margin-bottom: 0.35rem; }
.form-text { color: rgba(29, 30, 27, 0.55); }
.form-control, .form-select, .input-group-text {
    border-radius: var(--v-radius-sm);
    border-color: var(--v-hairline-strong);
    font-family: var(--v-font-body);
    font-weight: 500;
}
.form-control, .form-select { background-color: var(--v-surface); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--v-sage-light); }
.input-group-text { background: var(--v-paper); color: var(--v-roast); }
.form-control:focus, .form-select:focus {
    border-color: var(--v-clay);
    box-shadow: 0 0 0 0.22rem rgba(166, 120, 93, 0.18);
}
.form-check-input:checked { background-color: var(--v-espresso); border-color: var(--v-espresso); }
.form-check-input:focus { border-color: var(--v-clay); box-shadow: 0 0 0 0.22rem rgba(166, 120, 93, 0.18); }

/* ---------- Alerts, dropdowns, pagination, nav tabs ---------- */
.alert { border-radius: var(--v-radius-sm); font-weight: 600; }
.dropdown-menu {
    border: 1px solid var(--v-hairline);
    border-radius: 12px;
    box-shadow: var(--v-shadow-md);
    padding: 0.35rem;
    font-weight: 600;
}
.dropdown-item { border-radius: 8px; padding: 0.45rem 0.75rem; }
.dropdown-item i { color: var(--v-roast); margin-right: 0.35rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--v-sage-light); color: var(--v-espresso); }
.dropdown-item:active { background: var(--v-sage); color: var(--v-espresso); }
.pagination { --bs-pagination-color: var(--v-espresso); --bs-pagination-hover-color: var(--v-espresso); --bs-pagination-hover-bg: var(--v-sage-light); --bs-pagination-focus-box-shadow: 0 0 0 0.22rem rgba(166, 120, 93, 0.18); --bs-pagination-active-bg: var(--v-espresso); --bs-pagination-active-border-color: var(--v-espresso); --bs-pagination-active-color: var(--v-cream); }
.nav-tabs .nav-link { font-weight: 700; color: rgba(29, 30, 27, 0.6); }
.nav-tabs .nav-link.active { color: var(--v-espresso); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--v-espresso); --bs-nav-pills-link-active-color: var(--v-cream); }
.progress { --bs-progress-bg: var(--v-sage-light); border-radius: 999px; }
.list-group-item { border-color: var(--v-hairline); }
.modal-content { border: 0; border-radius: 18px; box-shadow: var(--v-shadow-md); }
hr { border-color: var(--v-hairline-strong); opacity: 1; }

/* ---------- Auth & error pages ---------- */
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(166, 120, 93, 0.35), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(200, 197, 173, 0.18), transparent 60%),
        var(--v-espresso);
}
.auth-main { width: 100%; max-width: 420px; }
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--v-surface);
    border-radius: 22px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
    padding: 2.5rem 2.25rem 2rem;
}
.auth-brand { text-align: center; margin-bottom: 1.75rem; }
.auth-brand img { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 1.1rem; }
.auth-brand h1 { font-size: 1.6rem; margin-bottom: 0.25rem; }
.auth-brand p { margin: 0; color: var(--v-roast); }
.auth-footer { margin-top: 1.5rem; text-align: center; font-size: 0.75rem; letter-spacing: 0.18em; color: rgba(200, 197, 173, 0.6); font-family: var(--v-font-display); }

.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 3rem 1rem; }
.error-code {
    font-family: var(--v-font-numeric);
    font-size: clamp(5rem, 14vw, 8.5rem);
    line-height: 0.9;
    color: var(--v-sage);
    letter-spacing: -0.02em;
}
.error-page h1 { font-size: 1.75rem; margin: 0.75rem 0 0.5rem; }
.error-page p { color: rgba(29, 30, 27, 0.65); max-width: 440px; margin: 0 auto 1.75rem; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
        box-shadow: none;
    }
    body.sidebar-open .sidebar { transform: none; box-shadow: 12px 0 40px rgba(0, 0, 0, 0.3); }
    body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    body.sidebar-open { overflow: hidden; }
    .sidebar-toggle { display: inline-flex; }
    .main-content { margin-left: 0; padding: 0 1rem 2rem; }
    .top-bar { margin: 0 -1rem 1rem; padding: 0.6rem 1rem; min-height: 60px; }
}
@media (max-width: 575.98px) {
    .top-bar h4, .top-bar h5 { font-size: 1.15rem; }
    .top-bar-title { flex-wrap: wrap; }
    .user-menu-toggle { padding: 0.25rem !important; }
    .card-body { padding: 1rem; }
    .kpi-card h3 { font-size: 2rem; }
    .auth-card { padding: 2rem 1.5rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar-backdrop, .btn { transition: none; }
}