/* ==========================================================================
   Shubharambh CRM — design system
   Mirrors shubharambhinfraadvisors.com: DM Sans · navy #0B1D33 · gold #B59355
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,500&display=swap');

:root {
    /* Brand palette — matches public site */
    --c-navy:        #0B1D33;
    --c-navy-deep:   #071323;
    --c-navy-soft:   #13283F;
    --c-navy-card:   #102943;
    --c-navy-line:   #1C3A58;
    --c-gold:        #B59355;
    --c-gold-light:  #D4B06F;
    --c-gold-soft:   #E8C98A;
    --c-gold-dim:    #8A6F3E;
    --c-gold-glow:   rgba(181, 147, 85, 0.22);
    --c-line:        rgba(181, 147, 85, 0.22);
    --c-line-strong: rgba(181, 147, 85, 0.45);

    --c-white:       #FFFFFF;
    --c-off-white:   #F5F1E8;
    --c-muted:       #B8BCC4;
    --c-muted-soft:  #8591A3;

    /* App-specific neutrals for content-heavy screens */
    --c-bg:          #FAF7EF;
    --c-paper:       #FFFFFF;
    --c-ink:         #1A2033;
    --c-ink-soft:    #4A5468;
    --c-ink-mute:    #8591A3;

    --c-success:     #52b788;
    --c-success-bg:  rgba(82, 183, 136, 0.12);
    --c-danger:      #ee6055;
    --c-danger-bg:   rgba(238, 96, 85, 0.10);

    /* Typography */
    --f-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Scale */
    --fs-h1: clamp(1.4rem, 2.6vw, 1.8rem);
    --fs-h2: clamp(1.15rem, 2vw, 1.3rem);
    --fs-body: 0.94rem;
    --fs-sm:   0.85rem;
    --fs-xs:   0.75rem;

    /* Radii */
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* Effects */
    --shadow-xs: 0 1px 2px rgba(11,29,51,.04);
    --shadow-sm: 0 2px 8px rgba(11,29,51,.06);
    --shadow-md: 0 10px 30px rgba(11,29,51,.10);
    --shadow-gold: 0 14px 34px rgba(181, 147, 85, 0.20);
    --ease: cubic-bezier(.2, .65, .25, 1);
    --t-fast: 160ms var(--ease);
    --t: 260ms var(--ease);

    /* Layout */
    --sidebar-w: 248px;
    --topbar-h:  64px;
}

/* Inline icon defaults */
.icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.sidebar-link .icon { color: currentColor; }
.btn .icon { vertical-align: -0.2em; }

/* -------------------------------------------------------------------------- */
/* Reset & base                                                                */
/* -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--f-sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss01' on, 'kern' on;
}

a { color: var(--c-navy); text-decoration: none; }
a:hover { color: var(--c-gold-dim); }
.text-muted { color: var(--c-ink-mute) !important; }

/* -------------------------------------------------------------------------- */
/* Typography                                                                  */
/* -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-sans);
    color: var(--c-navy);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 .5rem;
}

.eyebrow {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-gold-dim);
    margin-bottom: .35rem;
    display: block;
}

.page-title {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 1rem; flex-wrap: wrap;
    padding-bottom: 1rem; margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--c-line);
    position: relative;
}
.page-title::after {
    content:''; position:absolute; bottom:-1px; left:0; width: 48px; height: 2px;
    background: var(--c-gold);
}
.page-title h1 { font-size: var(--fs-h1); margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.page-title small { color: var(--c-ink-mute); font-weight: 500; font-size: .85rem; }

/* -------------------------------------------------------------------------- */
/* Sidebar                                                                     */
/* -------------------------------------------------------------------------- */

.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background:
        radial-gradient(circle at 0% 0%, rgba(181,147,85,0.08) 0%, transparent 55%),
        linear-gradient(180deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
    color: var(--c-off-white);
    display: flex; flex-direction: column;
    z-index: 1030;
    border-right: 1px solid rgba(181,147,85,.1);
}

.sidebar-brand {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 1.5rem 1rem 1.25rem;
    border-bottom: 1px solid var(--c-navy-line);
    position: relative;
}
.sidebar-brand::after {
    content: ''; position: absolute; bottom: -1px; left: 30%; right: 30%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
    opacity: .55;
}
.brand-logo {
    max-width: 180px; width: 100%; height: auto;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.brand-sub {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--c-gold-dim);
    margin-top: .15rem;
}

.sidebar-nav { flex-grow: 1; padding: 1rem 0; overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--c-navy-line); border-radius: 2px; }

.sidebar-link {
    display: flex; align-items: center; gap: .85rem;
    padding: .75rem 1.25rem;
    color: rgba(245, 241, 232, 0.7);
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
    letter-spacing: .01em;
    border-left: 2px solid transparent;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
    position: relative;
}
.sidebar-link:hover {
    color: var(--c-gold-soft);
    background: rgba(181, 147, 85, 0.05);
}
.sidebar-link.active {
    color: var(--c-gold);
    background: linear-gradient(90deg, rgba(181, 147, 85, 0.12) 0%, transparent 100%);
    border-left-color: var(--c-gold);
    font-weight: 600;
}
.sidebar-link.active::after {
    content: ''; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--c-gold);
}
.sidebar-icon { width: 22px; display: inline-flex; align-items: center; justify-content: center; opacity: .85; }
.sidebar-icon .icon { width: 18px; height: 18px; }
.sidebar-link.active .sidebar-icon { opacity: 1; }
.sidebar-label { flex-grow: 1; }

.sidebar-footer {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--c-navy-line);
    background: var(--c-navy-deep);
}
.sidebar-user { margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--c-navy-line); }
.user-name { color: var(--c-gold-soft); font-size: .95rem; font-weight: 600; }
.user-role { color: var(--c-ink-mute); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; margin-top: 2px; font-weight: 600; }

.sidebar-footer .btn-outline-light {
    border: 1px solid var(--c-gold-line);
    color: var(--c-gold-soft);
    font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
    font-size: .7rem; padding: .5rem .75rem; border-radius: var(--r-sm);
    background: transparent;
    transition: all var(--t-fast);
}
.sidebar-footer .btn-outline-light:hover { background: var(--c-gold); color: var(--c-navy); border-color: var(--c-gold); }

/* Content offset */
.app-main { margin-left: var(--sidebar-w); min-height: 100vh; }
@media (max-width: 767.98px) { .app-main { margin-left: 0; } }

/* -------------------------------------------------------------------------- */
/* Mobile offcanvas + topbar                                                   */
/* -------------------------------------------------------------------------- */

.sidebar-mobile { background: var(--c-navy); color: var(--c-off-white); width: 280px !important; border-right: 1px solid rgba(181,147,85,.15); }
.sidebar-mobile .offcanvas-header { border-bottom: 1px solid var(--c-navy-line); padding: 1rem 1.25rem; }
.sidebar-mobile .offcanvas-body   { background: var(--c-navy); padding: 0; }
.sidebar-mobile .btn-close-white  { filter: invert(82%) sepia(33%) saturate(296%) hue-rotate(10deg); }

.topbar {
    display: flex; align-items: center; gap: .6rem;
    padding: 0 .75rem;
    height: var(--topbar-h);
    background: var(--c-navy);
    color: var(--c-off-white);
    position: sticky; top: 0; z-index: 1020;
    border-bottom: 1px solid rgba(181,147,85,.15);
}
.topbar::after {
    content:''; position:absolute; bottom: -1px; left:0; right:0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
    opacity: .5;
}
.topbar-btn {
    width: 44px; height: 44px;
    min-width: 44px; min-height: 44px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-gold-line);
    color: var(--c-gold-soft) !important;
    background: rgba(181, 147, 85, 0.08);
    border-radius: var(--r-sm);
    transition: all var(--t-fast);
    line-height: 1;
}
.topbar-btn:hover, .topbar-btn:focus {
    background: var(--c-gold);
    color: var(--c-navy) !important;
    border-color: var(--c-gold);
    text-decoration: none;
}
.topbar-btn:active { transform: scale(.96); }
.topbar-btn-close { color: var(--c-gold-soft) !important; }
.topbar-btn .icon { width: 22px; height: 22px; }
.topbar-logo { max-height: 40px; width: auto; object-fit: contain; flex: 1; min-width: 0; }

/* -------------------------------------------------------------------------- */
/* Cards                                                                       */
/* -------------------------------------------------------------------------- */

.card {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.card:hover { box-shadow: var(--shadow-sm); }

.filter-bar {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-xs);
}
.filter-bar .form-label.small {
    font-size: .66rem !important;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-ink-mute) !important;
    margin-bottom: .3rem;
}

/* KPI cards */
.card.p-3 .text-muted.small:first-child {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-gold-dim) !important;
    margin-bottom: .5rem;
    display: block;
}
.card.p-3 .fs-3, .card.p-3 .fs-4 {
    font-family: var(--f-sans);
    font-weight: 700;
    font-size: 1.85rem !important;
    color: var(--c-navy) !important;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
}
.card.p-3 .small.text-muted:not(:first-child) {
    margin-top: .4rem; font-size: .72rem; color: var(--c-ink-mute) !important;
}

/* -------------------------------------------------------------------------- */
/* Tables                                                                      */
/* -------------------------------------------------------------------------- */

.table { color: var(--c-ink); margin: 0; }
.table thead.table-light th {
    background: rgba(11,29,51,0.02) !important;
    color: var(--c-gold-dim) !important;
    font-weight: 600;
    font-size: .66rem !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--c-line) !important;
    padding: .85rem .75rem !important;
}
.table > :not(caption) > * > * { border-bottom-color: rgba(181,147,85,.08); }
.table-sm td, .table-sm th { padding: .7rem .75rem; vertical-align: middle; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: rgba(181, 147, 85, 0.04); }
.table tbody td { font-size: .9rem; }
.table tbody td.text-end { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------- */
/* Badges                                                                      */
/* -------------------------------------------------------------------------- */

.badge {
    font-weight: 600;
    font-size: .65rem !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .3rem .55rem;
    border-radius: var(--r-pill);
}
.badge.bg-warning    { background: rgba(181,147,85,.15) !important; color: var(--c-gold-dim) !important; border: 1px solid rgba(181,147,85,.35); }
.badge.bg-info       { background: rgba(11,29,51,.08) !important; color: var(--c-navy) !important; }
.badge.bg-secondary  { background: transparent !important; color: var(--c-ink-soft) !important; border: 1px solid var(--c-line); }
.badge.bg-danger     { background: var(--c-danger) !important; color: #fff; }
.badge-role-admin    { background: var(--c-navy) !important; color: var(--c-gold-soft) !important; }
.badge-role-associate{ background: var(--c-success) !important; color: #fff !important; }

/* Masked-contact cell + eye button */
.masked-contact {
    display: inline-flex; align-items: center; gap: .4rem;
    font-variant-numeric: tabular-nums;
}
.masked-contact .mask-value {
    font-family: var(--f-sans);
    letter-spacing: .08em;
    color: var(--c-ink);
}
.masked-contact.is-revealed .mask-value {
    color: var(--c-navy);
    font-weight: 600;
    animation: maskReveal .25s ease-out;
}
.masked-contact.is-denied .mask-value {
    color: var(--c-danger);
    text-decoration: line-through;
}
.masked-contact.is-revealing .mask-value { color: var(--c-ink-mute); }

.btn-reveal {
    background: rgba(181, 147, 85, .08);
    border: 1px solid var(--c-line);
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
    color: var(--c-gold-dim);
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--t-fast);
}
.btn-reveal:hover, .btn-reveal:focus-visible {
    background: var(--c-gold-whisper);
    color: var(--c-gold);
    border-color: var(--c-gold);
}
.btn-reveal:active { transform: scale(.94); }
.btn-reveal[disabled] { opacity: .5; cursor: wait; }
.btn-reveal .icon { width: 14px; height: 14px; }

@keyframes maskReveal {
    from { opacity: 0; transform: translateX(-2px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Block OS-level text selection inside masked values (prevents screenshot-OCR paste tricks) */
.masked-contact .mask-value { user-select: none; -webkit-user-select: none; }
.masked-contact.is-revealed .mask-value { user-select: text; -webkit-user-select: text; }

/* Lead-type pills: Hot=red, Warm=gold, Cold=blue */
.badge.badge-type {
    display: inline-flex; align-items: center; gap: .35rem;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: .28rem .6rem .25rem .5rem;
    border-radius: 999px;
    font-size: .62rem !important;
}
.badge.badge-type .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px rgba(255,255,255,.6); flex-shrink: 0; }
.badge-type-hot  { background: rgba(238, 96, 85, 0.15) !important; color: #b53228 !important; border: 1px solid rgba(238, 96, 85, 0.45); }
.badge-type-warm { background: rgba(181, 147, 85, 0.18) !important; color: var(--c-gold-dim) !important; border: 1px solid rgba(181, 147, 85, 0.55); }
.badge-type-cold { background: rgba(59, 130, 246, 0.14) !important; color: #1d4ed8 !important; border: 1px solid rgba(59, 130, 246, 0.45); }

/* -------------------------------------------------------------------------- */
/* Buttons                                                                     */
/* -------------------------------------------------------------------------- */

.btn {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: .84rem;
    letter-spacing: .02em;
    border-radius: var(--r-pill);
    padding: .6rem 1.25rem;
    transition: all var(--t-fast);
    border-width: 1px;
    white-space: nowrap;
}
.btn-sm { font-size: .78rem; padding: .45rem .9rem; }

.btn-primary {
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: var(--c-gold-soft);
    box-shadow: 0 2px 8px rgba(11,29,51,.18);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--c-navy-deep);
    border-color: var(--c-gold);
    color: var(--c-gold);
    box-shadow: var(--shadow-gold);
    transform: translateY(-1px);
}

.btn-outline-primary { color: var(--c-navy); border-color: var(--c-navy); background: transparent; }
.btn-outline-primary:hover { background: var(--c-navy); color: var(--c-gold-soft); }

.btn-outline-secondary { color: var(--c-ink-soft); border-color: var(--c-line-strong); background: transparent; }
.btn-outline-secondary:hover { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }

.btn-outline-success { color: var(--c-success); border-color: var(--c-success); background: transparent; }
.btn-outline-success:hover { background: var(--c-success); color: white; }

.btn-outline-danger { color: var(--c-danger); border-color: rgba(238, 96, 85, .4); background: transparent; }
.btn-outline-danger:hover { background: var(--c-danger); color: white; border-color: var(--c-danger); }

.btn-outline-warning { color: var(--c-gold-dim); border-color: var(--c-line-strong); background: transparent; }
.btn-outline-warning:hover { background: var(--c-gold); color: var(--c-navy); border-color: var(--c-gold); }

.btn-gold { background: var(--c-gold); color: var(--c-navy); border: 1px solid var(--c-gold); box-shadow: var(--shadow-gold); }
.btn-gold:hover { background: var(--c-gold-light); border-color: var(--c-gold-light); color: var(--c-navy); transform: translateY(-1px); }

/* -------------------------------------------------------------------------- */
/* Forms                                                                       */
/* -------------------------------------------------------------------------- */

.form-label { font-weight: 600; color: var(--c-navy); font-size: .8rem; letter-spacing: .01em; margin-bottom: .4rem; }
.form-label.small { font-size: .66rem; }

.form-control, .form-select {
    font-family: var(--f-sans);
    font-size: .92rem;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    color: var(--c-ink);
    padding: .55rem .8rem;
    min-height: 42px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus, .form-select:focus {
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(181, 147, 85, 0.15);
    background: var(--c-paper);
}
.form-control::placeholder { color: var(--c-ink-mute); }
.form-control-sm, .form-select-sm { min-height: 38px; padding: .4rem .65rem; font-size: .85rem; }

.required::after { content: ' *'; color: var(--c-gold); font-weight: 700; }

.form-check-input:checked { background-color: var(--c-gold); border-color: var(--c-gold); }
.form-check-input:focus { border-color: var(--c-gold); box-shadow: 0 0 0 .2rem rgba(181, 147, 85, 0.15); }

fieldset { border: 1px solid var(--c-line) !important; border-radius: var(--r); padding: 1rem !important; background: rgba(181,147,85,0.03); }
fieldset legend { color: var(--c-gold-dim) !important; font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .18em !important; text-transform: uppercase; padding: 0 .5rem; }

/* -------------------------------------------------------------------------- */
/* Tabs                                                                        */
/* -------------------------------------------------------------------------- */

.nav-tabs { border-bottom: 1px solid var(--c-line); gap: .25rem; }
.nav-tabs .nav-link {
    color: var(--c-ink-mute);
    border: 0;
    border-bottom: 2px solid transparent;
    padding: .7rem 1rem;
    font-weight: 600;
    font-size: .82rem;
    background: transparent;
    margin-bottom: -1px;
    border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--c-navy); }
.nav-tabs .nav-link.active {
    color: var(--c-navy);
    border-color: transparent;
    border-bottom: 2px solid var(--c-gold);
    background: transparent;
}

/* -------------------------------------------------------------------------- */
/* Alerts                                                                      */
/* -------------------------------------------------------------------------- */

.alert { border-radius: var(--r); border: 1px solid; padding: .85rem 1rem; font-size: .88rem; }
.alert-success { background: var(--c-success-bg); border-color: rgba(82, 183, 136, .3); color: #1a5e3a; }
.alert-danger  { background: var(--c-danger-bg);  border-color: rgba(238, 96, 85, .3);  color: #842029; }
.alert-warning { background: rgba(181,147,85,.08); border-color: var(--c-line-strong); color: var(--c-gold-dim); }

/* -------------------------------------------------------------------------- */
/* Pagination                                                                  */
/* -------------------------------------------------------------------------- */

.pagination-bar { padding: .75rem 0 .25rem; border-top: 1px solid var(--c-line); margin-top: 1rem; }
.pagination-info { color: var(--c-ink-soft); }
.pagination-info strong { color: var(--c-navy); }
.per-page-select label { color: var(--c-ink-mute); letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; font-weight: 600; }
.per-page-select .form-select-sm { min-width: 70px; }

.pagination { gap: .25rem; }
.page-link {
    border: 1px solid var(--c-line);
    color: var(--c-navy);
    background: var(--c-paper);
    border-radius: var(--r-sm) !important;
    font-weight: 600;
    font-size: .85rem;
    padding: .4rem .75rem;
    min-width: 36px;
    text-align: center;
    transition: all var(--t-fast);
}
.page-link:hover { background: var(--c-navy); color: var(--c-gold-soft); border-color: var(--c-navy); }
.page-item.active .page-link { background: var(--c-navy); color: var(--c-gold); border-color: var(--c-navy); }

/* -------------------------------------------------------------------------- */
/* Login                                                                       */
/* -------------------------------------------------------------------------- */

body.login-shell {
    min-height: 100vh; margin: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 15%, rgba(181,147,85,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 80% 60% at 85% 90%, rgba(181,147,85,0.10) 0%, transparent 70%),
        linear-gradient(160deg, var(--c-navy-deep) 0%, var(--c-navy) 60%, var(--c-navy-deep) 100%);
    display: flex; flex-direction: column; color: var(--c-off-white);
    position: relative; overflow-x: hidden;
}
body.login-shell::before {
    content:''; position: fixed; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
    z-index: 10;
}

.login-wrap {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; padding: 2rem 1.25rem; min-height: 100vh;
}

.login-card {
    width: 100%; max-width: 440px;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,.5), 0 10px 30px -10px rgba(11,29,51,.4);
    padding: 0; overflow: hidden;
    animation: fadeInUp .5s var(--ease);
}
.login-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--c-gold-dim), var(--c-gold-light), var(--c-gold-dim));
}

.login-brand {
    padding: 2.25rem 2rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(181,147,85,.15);
    background: radial-gradient(ellipse at center top, rgba(181,147,85,0.06) 0%, transparent 70%);
    position: relative;
}
.login-brand::after {
    content:''; position: absolute; bottom: -1px; left: 28%; right: 28%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
    opacity: .5;
}
.login-logo {
    display: block; max-width: 220px; width: 100%; height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 2px 4px rgba(11,29,51,.1));
}
.login-tagline {
    font-size: .82rem;
    color: var(--c-ink-soft);
    margin-top: .6rem; font-weight: 500;
}

.login-body { padding: 1.75rem 2rem 1.5rem; }
.login-eyebrow {
    font-size: .65rem; font-weight: 600;
    letter-spacing: .3em; text-transform: uppercase;
    color: var(--c-gold-dim);
    text-align: center; margin-bottom: .4rem;
}
.login-title {
    font-size: 1.5rem; color: var(--c-navy);
    text-align: center; margin: 0 0 .35rem;
    font-weight: 700; letter-spacing: -0.02em;
}
.login-sub { color: var(--c-ink-mute); font-size: .85rem; text-align: center; margin: 0 0 1.5rem; }

.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-field { display: block; margin: 0; }
.login-label {
    display: block; font-size: .7rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--c-ink-soft); margin-bottom: .35rem;
}
.login-field .form-control { padding: .7rem .85rem; font-size: .95rem; min-height: 46px; }
.login-submit {
    margin-top: .5rem; padding: .85rem 1rem;
    font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
    width: 100%;
}

.login-foot-hint {
    padding: .95rem 2rem; text-align: center;
    font-size: .72rem; color: var(--c-ink-mute);
    background: var(--c-off-white);
    border-top: 1px solid rgba(181,147,85,.12);
}

.login-footer {
    margin-top: 1.5rem; font-size: .7rem;
    color: rgba(255,255,255,.45);
    text-align: center; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
}

/* Progress bars (user_report) */
.progress { background: rgba(181,147,85,.08); height: 6px !important; border-radius: var(--r-pill); }
.progress-bar { border-radius: var(--r-pill); }

/* Chart wrappers — give canvases a fixed height so layout doesn't collapse */
.chart-wrap       { position: relative; height: 260px; }
.chart-wrap.sm    { height: 220px; }
.chart-wrap.tall  { height: 340px; }
@media (max-width: 767.98px) {
    .chart-wrap      { height: 220px; }
    .chart-wrap.tall { height: 300px; }
}

/* -------------------------------------------------------------------------- */
/* Motion                                                                      */
/* -------------------------------------------------------------------------- */

@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.app-main > main { animation: fadeInUp .35s var(--ease); }

/* Utility */
.text-gold { color: var(--c-gold) !important; }
.text-navy { color: var(--c-navy) !important; }
.hr-gold   { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-line), transparent); margin: 1.25rem 0; }

/* -------------------------------------------------------------------------- */
/* Mobile                                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    body { font-size: 14.5px; }

    .page-title { padding-bottom: .85rem; margin-bottom: 1rem; }
    .page-title h1 { font-size: 1.3rem; }
    .page-title .d-flex.gap-2 { width: 100%; }
    .page-title .btn { flex: 1; min-width: 0; }

    /* KPI */
    .card.p-3 { padding: 1rem !important; }
    .card.p-3 .fs-3, .card.p-3 .fs-4 { font-size: 1.5rem !important; }
    .card.p-3 .text-muted.small:first-child { font-size: .6rem; letter-spacing: .18em; }

    /* Filter bar */
    .filter-bar .row > [class*="col-"] { margin-bottom: .55rem; }
    .filter-bar .row > [class*="col-"]:last-child { margin-bottom: 0; }

    /* Tables */
    .table-sm td, .table-sm th { padding: .55rem .5rem; font-size: .82rem; }
    .table thead.table-light th { font-size: .6rem !important; letter-spacing: .14em; padding: .7rem .5rem !important; }
    .table tbody td { font-size: .85rem; }
    .table tbody td.text-end { white-space: nowrap; }
    .table .btn-sm { padding: .3rem .55rem; font-size: .72rem; border-radius: var(--r-sm); }
    .table td.text-end form, .table td.text-end a { display: inline-block; margin: 2px 1px; }

    /* Forms — 16px to avoid iOS zoom */
    .form-control, .form-select { min-height: 44px; font-size: 16px; }
    .form-control-sm, .form-select-sm { min-height: 40px; font-size: 15px; }
    .form-check-input { width: 1.15em; height: 1.15em; }
    .btn { min-height: 42px; padding: .6rem 1rem; }
    .btn-sm { min-height: 36px; }

    fieldset { padding: .75rem !important; }

    /* Tabs scroll */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-link { white-space: nowrap; padding: .6rem .85rem; font-size: .75rem; }

    main.container-fluid { padding: 1rem !important; }

    .login-card { max-width: 100%; }
    .login-body, .login-brand, .login-foot-hint { padding-left: 1.5rem; padding-right: 1.5rem; }
    .login-title { font-size: 1.35rem; }

    .page-link { min-width: 34px; padding: .35rem .5rem; }
}

@media (max-width: 375px) {
    .card.p-3 .fs-3, .card.p-3 .fs-4 { font-size: 1.3rem !important; }
    .page-title h1 { font-size: 1.15rem; }
    .btn-sm { padding: .4rem .7rem; font-size: .72rem; }
    .topbar-logo { max-height: 36px; }
}

/* Print */
@media print {
    .sidebar, .topbar, .filter-bar, .btn { display: none !important; }
    .app-main { margin-left: 0; }
    body { background: white; }
}