/* ============================================================================
   GMI ClientWeb — PRIVATE AREA THEME
   ----------------------------------------------------------------------------
   Conservative, sleek "Leopard Data" look for the authenticated client app.
   EVERYTHING here is scoped under `.gmi-scope` (the PrivateLayout root) so the
   public marketing pages are never touched. Light + dark are driven by the
   `data-theme` / `data-bs-theme` attribute on #gmi-app-root (see theme.js).
   ============================================================================ */

/* ---- design tokens : LIGHT (default) ---- */
.gmi-scope {
    /* Leopard Data brand metals (constant across themes) */
    --gmi-copper:        #C0894E;
    --gmi-copper-bright: #E2B583;
    --gmi-bronze:        #8A5A2E;
    --gmi-champagne:     #EBD3AE;
    --gmi-gunmetal:      #5A616B;
    --gmi-steel:         #AEB4BD;
    --gmi-charcoal:      #2B2F36;

    /* surfaces & ink */
    --gmi-bg:            #F4F1EB;   /* warm paper app background  */
    --gmi-surface:       #FFFFFF;   /* cards / raised panels      */
    --gmi-surface-2:     #EFEAE1;   /* subtle alt / headers       */
    --gmi-surface-3:     #E7E1D5;
    --gmi-text:          #25282D;
    --gmi-text-muted:    #6C7077;
    --gmi-border:        #E3DDD1;
    --gmi-border-strong: #D4CCBC;

    /* copper accent — darkened for AA contrast on light surfaces */
    --gmi-accent:          #A9712F;
    --gmi-accent-hover:    #8A5A2E;
    --gmi-accent-contrast: #FFFFFF;
    --gmi-accent-soft:     rgba(169, 113, 47, 0.10);
    --gmi-accent-line:     rgba(169, 113, 47, 0.28);
    --gmi-ring:            rgba(169, 113, 47, 0.30);

    --gmi-sidebar-bg:    #FBF9F5;
    --gmi-nav-ink:       #2A2D33;   /* high-contrast sidebar item text (near-black on light) */
    --gmi-shadow:        0 1px 2px rgba(43, 47, 54, 0.05), 0 10px 28px rgba(43, 47, 54, 0.07);
    --gmi-radius:        12px;
    --gmi-radius-sm:     8px;

    /* chrome (navbar / footer) — a constant gunmetal "terminal" bar in both
       themes for a memorable, conservative financial identity */
    --gmi-chrome:        linear-gradient(100deg, #2B2F36 0%, #21252B 100%);
    --gmi-chrome-text:   #EDE9E1;
    --gmi-chrome-muted:  rgba(237, 233, 225, 0.62);
    --gmi-chrome-border: rgba(226, 181, 131, 0.20);

    /* re-tint Bootstrap so every private page's components inherit the palette */
    --bs-body-bg:            var(--gmi-bg);
    --bs-body-color:         var(--gmi-text);
    --bs-secondary-bg:       var(--gmi-surface-2);
    --bs-tertiary-bg:        var(--gmi-surface-3);
    --bs-border-color:       var(--gmi-border);
    --bs-secondary-color:    var(--gmi-text-muted);
    --bs-emphasis-color:     #14161a;
    --bs-emphasis-color-rgb: 20, 22, 26;
    --bs-primary:            #A9712F;
    --bs-primary-rgb:        169, 113, 47;
    --bs-link-color:         #97632F;
    --bs-link-color-rgb:     151, 99, 47;
    --bs-link-hover-color:   #7C5021;
    --bs-link-hover-color-rgb: 124, 80, 33;
}

/* ---- design tokens : DARK ---- */
.gmi-scope[data-theme="dark"] {
    --gmi-bg:            #15171C;   /* soft charcoal, not pure void (conservative) */
    --gmi-surface:       #1E222A;
    --gmi-surface-2:     #252A32;
    --gmi-surface-3:     #2C323B;
    --gmi-text:          #E7E3DB;
    --gmi-text-muted:    #9A968D;
    --gmi-border:        #2E333B;
    --gmi-border-strong: #3B414B;

    --gmi-accent:          #E2B583;   /* bright copper reads well on dark */
    --gmi-accent-hover:    #EBD3AE;
    --gmi-accent-contrast: #1C1408;
    --gmi-accent-soft:     rgba(226, 181, 131, 0.12);
    --gmi-accent-line:     rgba(226, 181, 131, 0.22);
    --gmi-ring:            rgba(226, 181, 131, 0.40);

    --gmi-sidebar-bg:    #181B21;
    --gmi-nav-ink:       #E4DFD5;   /* high-contrast sidebar item text (bright on dark) */
    --gmi-shadow:        0 1px 2px rgba(0, 0, 0, 0.40), 0 14px 34px rgba(0, 0, 0, 0.45);

    --bs-body-bg:            var(--gmi-bg);
    --bs-body-color:         var(--gmi-text);
    --bs-secondary-bg:       var(--gmi-surface-2);
    --bs-tertiary-bg:        var(--gmi-surface-3);
    --bs-border-color:       var(--gmi-border);
    --bs-secondary-color:    var(--gmi-text-muted);
    --bs-emphasis-color:     #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-primary:            #E2B583;
    --bs-primary-rgb:        226, 181, 131;
    --bs-link-color:         #E2B583;
    --bs-link-color-rgb:     226, 181, 131;
    --bs-link-hover-color:   #EBD3AE;
    --bs-link-hover-color-rgb: 235, 211, 174;
}

/* ============================================================================
   BASE
   ============================================================================ */
.gmi-scope {
    background-color: var(--gmi-bg);
    color: var(--gmi-text);
}

.gmi-scope .content,
.gmi-scope .main-content {
    color: var(--gmi-text);
}

/* Editorial serif headings (matches the brand's Fraunces display face) */
.gmi-scope h1, .gmi-scope h2, .gmi-scope h3,
.gmi-scope .h1, .gmi-scope .h2, .gmi-scope .h3 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    letter-spacing: -0.01em;
    color: var(--gmi-text);
}

.gmi-scope a { color: var(--bs-link-color); }
.gmi-scope a:hover { color: var(--bs-link-hover-color); }

/* thin copper accent under page section headers feels like a ledger rule */
.gmi-scope .text-muted { color: var(--gmi-text-muted) !important; }

/* ============================================================================
   BUTTONS  (copper primary)
   ============================================================================ */
.gmi-scope .btn-primary {
    --bs-btn-bg: var(--gmi-accent);
    --bs-btn-border-color: var(--gmi-accent);
    --bs-btn-color: var(--gmi-accent-contrast);
    --bs-btn-hover-bg: var(--gmi-accent-hover);
    --bs-btn-hover-border-color: var(--gmi-accent-hover);
    --bs-btn-hover-color: var(--gmi-accent-contrast);
    --bs-btn-active-bg: var(--gmi-accent-hover);
    --bs-btn-active-border-color: var(--gmi-accent-hover);
    --bs-btn-active-color: var(--gmi-accent-contrast);
    --bs-btn-disabled-bg: var(--gmi-accent);
    --bs-btn-disabled-border-color: var(--gmi-accent);
    --bs-btn-disabled-color: var(--gmi-accent-contrast);
}

.gmi-scope .btn-outline-primary {
    --bs-btn-color: var(--gmi-accent);
    --bs-btn-border-color: var(--gmi-accent);
    --bs-btn-hover-bg: var(--gmi-accent);
    --bs-btn-hover-border-color: var(--gmi-accent);
    --bs-btn-hover-color: var(--gmi-accent-contrast);
    --bs-btn-active-bg: var(--gmi-accent);
    --bs-btn-active-border-color: var(--gmi-accent);
    --bs-btn-active-color: var(--gmi-accent-contrast);
}

.gmi-scope .btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); }

/* keyboard / focus rings in copper */
.gmi-scope .btn:focus-visible,
.gmi-scope .form-control:focus,
.gmi-scope .form-select:focus,
.gmi-scope .form-check-input:focus {
    border-color: var(--gmi-accent);
    box-shadow: 0 0 0 0.2rem var(--gmi-ring);
}
.gmi-scope .form-check-input:checked {
    background-color: var(--gmi-accent);
    border-color: var(--gmi-accent);
}

/* ============================================================================
   SURFACES : cards, modals, dropdowns, lists, forms, tables
   ============================================================================ */
.gmi-scope .card {
    --bs-card-bg: var(--gmi-surface);
    --bs-card-border-color: var(--gmi-border);
    --bs-card-cap-bg: var(--gmi-surface-2);
    box-shadow: var(--gmi-shadow);
    border-radius: var(--gmi-radius);
}
.gmi-scope .card .card { box-shadow: none; } /* nested cards stay flat */

.gmi-scope .modal-content {
    --bs-modal-bg: var(--gmi-surface);
    --bs-modal-border-color: var(--gmi-border);
    --bs-modal-header-border-color: var(--gmi-border);
    --bs-modal-footer-border-color: var(--gmi-border);
}

.gmi-scope .dropdown-menu {
    --bs-dropdown-bg: var(--gmi-surface);
    --bs-dropdown-border-color: var(--gmi-border);
    --bs-dropdown-link-color: var(--gmi-text);
    --bs-dropdown-link-hover-bg: var(--gmi-accent-soft);
    --bs-dropdown-link-hover-color: var(--gmi-text);
    --bs-dropdown-link-active-bg: var(--gmi-accent);
    --bs-dropdown-link-active-color: var(--gmi-accent-contrast);
    box-shadow: var(--gmi-shadow);
}

.gmi-scope .list-group {
    --bs-list-group-bg: var(--gmi-surface);
    --bs-list-group-border-color: var(--gmi-border);
    --bs-list-group-color: var(--gmi-text);
    --bs-list-group-action-hover-bg: var(--gmi-accent-soft);
    --bs-list-group-active-bg: var(--gmi-accent);
    --bs-list-group-active-border-color: var(--gmi-accent);
}

.gmi-scope .form-control,
.gmi-scope .form-select {
    background-color: var(--gmi-surface);
    border-color: var(--gmi-border);
    color: var(--gmi-text);
}
.gmi-scope .form-control::placeholder { color: var(--gmi-text-muted); opacity: 0.8; }
.gmi-scope .input-group-text {
    background-color: var(--gmi-surface-2);
    border-color: var(--gmi-border);
    color: var(--gmi-text-muted);
}

.gmi-scope .table {
    --bs-table-color: var(--gmi-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--gmi-border);
    --bs-table-striped-bg: var(--gmi-surface-2);
    --bs-table-striped-color: var(--gmi-text);
    --bs-table-hover-bg: var(--gmi-accent-soft);
    --bs-table-hover-color: var(--gmi-text);
}
.gmi-scope .table-light,
.gmi-scope .table > thead {
    --bs-table-bg: var(--gmi-surface-2);
    --bs-table-color: var(--gmi-text);
    --bs-table-border-color: var(--gmi-border);
}

/* nav-tabs / pills accenting */
.gmi-scope .nav-tabs {
    --bs-nav-tabs-border-color: var(--gmi-border);
    --bs-nav-tabs-link-active-bg: var(--gmi-surface);
    --bs-nav-tabs-link-active-border-color: var(--gmi-border) var(--gmi-border) var(--gmi-surface);
    --bs-nav-tabs-link-active-color: var(--gmi-accent);
}
.gmi-scope .nav-pills {
    --bs-nav-pills-link-active-bg: var(--gmi-accent);
    --bs-nav-pills-link-active-color: var(--gmi-accent-contrast);
}
.gmi-scope .nav-link { color: var(--gmi-text) !important; }
.gmi-scope .nav-link:hover { color: var(--gmi-accent) !important; }

/* generic light/white utility surfaces inside private pages */
.gmi-scope .bg-white { background-color: var(--gmi-surface) !important; }
.gmi-scope .bg-light { background-color: var(--gmi-surface-2) !important; }
.gmi-scope .border { border-color: var(--gmi-border) !important; }
.gmi-scope hr { border-color: var(--gmi-border); opacity: 0.5; }

/* badges that use brand primary */
.gmi-scope .text-bg-primary { background-color: var(--gmi-accent) !important; color: var(--gmi-accent-contrast) !important; }

/* ============================================================================
   CHROME : top navbar + footer (constant gunmetal terminal bar)
   ============================================================================ */
.gmi-scope .navbar.bg-primary {
    background: var(--gmi-chrome) !important;
    border-bottom: 1px solid var(--gmi-chrome-border);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
.gmi-scope .navbar .th-brand-text { color: var(--gmi-chrome-text); }
.gmi-scope .navbar .navbar-brand,
.gmi-scope .navbar .nav-link { color: var(--gmi-chrome-text) !important; }
.gmi-scope .navbar .nav-link:hover,
.gmi-scope .navbar .dropdown-toggle:hover { color: var(--gmi-copper-bright) !important; }
.gmi-scope .navbar .navbar-toggler {
    border-color: var(--gmi-chrome-border);
}
/* copper hamburger that stays visible on the dark bar */
.gmi-scope .navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23E2B583' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
}

.gmi-scope footer.bg-dark {
    background: var(--gmi-chrome) !important;
    border-top: 1px solid var(--gmi-chrome-border);
}

/* ============================================================================
   THEME TOGGLE button (used in the navbar and in the side menu)
   ============================================================================ */
.gmi-scope .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    color: inherit;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.gmi-scope .theme-toggle .theme-toggle-icon {
    width: 1.05rem; height: 1.05rem; display: inline-flex;
}
.gmi-scope .theme-toggle .theme-toggle-icon svg { width: 100%; height: 100%; }

/* navbar variant — round icon button on the gunmetal bar */
.gmi-scope .theme-toggle.theme-toggle--bar {
    width: 2.2rem; height: 2.2rem; justify-content: center;
    color: var(--gmi-chrome-text);
    border-color: var(--gmi-chrome-border);
}
.gmi-scope .theme-toggle.theme-toggle--bar:hover {
    color: var(--gmi-copper-bright);
    background: rgba(226, 181, 131, 0.12);
}

/* menu variant — full-width labelled row in the sidebar */
.gmi-scope .theme-toggle.theme-toggle--menu {
    width: 100%;
    justify-content: flex-start;
    padding: 0.55rem 0.8rem;
    border-radius: var(--gmi-radius-sm);
    color: var(--gmi-text-muted);
    font-size: 0.85rem;
}
.gmi-scope .theme-toggle.theme-toggle--menu:hover {
    color: var(--gmi-accent);
    background: var(--gmi-accent-soft);
}

/* ============================================================================
   COMPAT — neutralize the legacy gold/light global rules from app.css inside
   the private scope so both light and (especially) dark stay legible. Those
   globals use !important, so we match with higher-specificity !important.
   ============================================================================ */
.gmi-scope h4, .gmi-scope h5, .gmi-scope h6 { color: var(--gmi-text); }
.gmi-scope .text-dark { color: var(--gmi-text) !important; }
.gmi-scope code { color: var(--gmi-accent); }

/* sidebar nav links — high-contrast ink so items are clearly legible in both
   themes (legacy globals forced them to solid black / gold). */
.gmi-scope .sidebar .nav-link { color: var(--gmi-nav-ink) !important; }
.gmi-scope .sidebar .nav-link:hover { color: var(--gmi-accent) !important; }
.gmi-scope .sidebar .nav-link.active,
.gmi-scope .sidebar a.active { color: var(--gmi-accent) !important; }

/* brand-primary fills → copper (the navbar keeps its gunmetal rule above) */
.gmi-scope .bg-primary { background-color: var(--gmi-accent) !important; border-color: var(--gmi-accent) !important; }
.gmi-scope .badge.bg-primary { background-color: var(--gmi-accent) !important; }
.gmi-scope .btn-outline-primary { color: var(--gmi-accent); border-color: var(--gmi-accent); }
.gmi-scope .progress-bar,
.gmi-scope .progress-bar.bg-primary { background-color: var(--gmi-accent); }

/* ============================================================================
   SYNCFUSION — blend grids/inputs into the dark surface. The proper dark
   stylesheet (bootstrap5-dark.css) is enabled by PrivateLayout while mounted;
   these rules just fix the few surfaces it leaves on the page background.
   ============================================================================ */
.gmi-scope[data-theme="dark"] .e-grid,
.gmi-scope[data-theme="dark"] .e-card,
.gmi-scope[data-theme="dark"] .e-control {
    background-color: var(--gmi-surface);
    color: var(--gmi-text);
    border-color: var(--gmi-border);
}
.gmi-scope[data-theme="dark"] .e-grid .e-headercell,
.gmi-scope[data-theme="dark"] .e-grid .e-gridheader {
    background-color: var(--gmi-surface-2);
    color: var(--gmi-text);
}

/* Shepherd guided tour — keep copper accent in both themes */
.gmi-scope .shepherd-element .shepherd-button {
    background-color: var(--gmi-accent);
    border-color: var(--gmi-accent);
    color: var(--gmi-accent-contrast);
}
.gmi-scope .shepherd-element .shepherd-button:hover { background-color: var(--gmi-accent-hover); }

/* smooth the theme change so it doesn't feel jarring */
.gmi-scope,
.gmi-scope .card,
.gmi-scope .navbar.bg-primary,
.gmi-scope .sidebar,
.gmi-scope .main-content {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .gmi-scope, .gmi-scope * { transition: none !important; }
}