/* =============================================================================
   FORTIS · Redesign layer  (2026)
   -----------------------------------------------------------------------------
   A cohesive, modern design-system overlay applied on top of the Metronic base
   and the existing custom stylesheets. Loaded LAST on every base template so it
   wins ties. Purely visual — no structural / DOM changes.

   Strategy
   --------
   • Re-brands the app around an elegant emerald accent (was indigo #2e397c).
     Metronic drives .btn-primary / .badge-light-primary / .text-primary / nav
     through CSS variables, so overriding the tokens cascades everywhere.
   • Elevates the shared primitives (buttons, pills, inputs, tables, cards,
     header, dropdowns, modals) with softer surfaces, refined type and motion.
   • Converts the customer panel profile card from the heavy dark-navy block
     into the light, airy card shown in the reference designs.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   1 · Design tokens  (brand + surfaces)
   ---------------------------------------------------------------------------- */
:root {
    /* Emerald brand ramp */
    --fx-brand-50:  #ecfdf5;
    --fx-brand-100: #d1fae5;
    --fx-brand-200: #a7f3d0;
    --fx-brand-300: #6ee7b7;
    --fx-brand-400: #34d399;
    --fx-brand-500: #10b981;
    --fx-brand-600: #059669;
    --fx-brand-700: #047857;
    --fx-brand-800: #065f46;

    /* Neutral / ink */
    --fx-ink:        #0f2437;   /* headings   */
    --fx-body:       #263445;   /* body text  */
    --fx-muted:      #647587;   /* secondary  */
    --fx-faint:      #8a99a9;   /* tertiary   */
    --fx-canvas:     #f4f6f9;   /* page bg    */
    --fx-surface:    #ffffff;   /* cards      */
    --fx-surface-2:  #f8fafc;   /* insets     */
    --fx-border:     #e4e9f0;   /* hairlines  */
    --fx-border-2:   #d5dde8;   /* stronger   */

    /* Semantic */
    --fx-success:    #059669;
    --fx-warning:    #d08700;
    --fx-danger:     #e2495f;
    --fx-info:       #3b7dd8;

    /* Elevation */
    --fx-shadow-xs:  0 1px 2px rgba(15, 36, 55, 0.05);
    --fx-shadow-sm:  0 1px 2px rgba(15, 36, 55, 0.04), 0 4px 12px rgba(15, 36, 55, 0.05);
    --fx-shadow-md:  0 2px 4px rgba(15, 36, 55, 0.04), 0 12px 30px rgba(15, 36, 55, 0.08);
    --fx-shadow-lg:  0 24px 60px rgba(15, 36, 55, 0.14);
    --fx-shadow-brand: 0 8px 20px rgba(5, 150, 105, 0.28);

    /* Radii */
    --fx-r-sm: 10px;
    --fx-r-md: 14px;
    --fx-r-lg: 18px;
    --fx-r-pill: 999px;

    --fx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* --- Re-map Metronic brand variables to emerald --- */
    --bs-primary:         #059669;
    --bs-primary-active:  #047857;
    --bs-primary-light:   #e7f7ef;
    --bs-primary-inverse: #ffffff;
    --bs-primary-rgb:     5, 150, 105;

    --bs-link-color:        #059669;
    --bs-link-hover-color:  #047857;
}

/* Dark theme token shifts */
html[data-bs-theme="dark"] {
    --fx-ink:       #eaf1f8;
    --fx-body:      #cdd8e4;
    --fx-muted:     #9aabbe;
    --fx-faint:     #7c8da3;
    --fx-canvas:    #0e131b;
    --fx-surface:   #151f2c;
    --fx-surface-2: #1b2735;
    --fx-border:    #26313f;
    --fx-border-2:  #313f52;

    --bs-primary-light: #10362a;
}

/* ----------------------------------------------------------------------------
   2 · Typography
   ---------------------------------------------------------------------------- */
body,
.fw-normal, .fw-semibold, .fw-bold, .fw-bolder,
.menu, .btn, .form-control, .form-select, .table, .card, .badge {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--fx-ink);
    letter-spacing: -0.015em;
    font-weight: 700;
}

::selection { background: var(--fx-brand-100); color: var(--fx-brand-800); }

/* ----------------------------------------------------------------------------
   3 · Header / top navigation
   ---------------------------------------------------------------------------- */
.header {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--fx-border);
    box-shadow: var(--fx-shadow-xs);
    /* backdrop-filter makes the header its own stacking context; without a
       positive z-index its dropdown menus (base z-index:107) get trapped
       inside it and are covered by later page content such as the upsection
       card. Lift the whole header context above the page body (still well
       below Bootstrap modals at 1050+). */
    position: relative;
    z-index: 100;
}
html[data-bs-theme="dark"] .header {
    background: rgba(17, 24, 34, 0.82);
}
.header .separator { display: none; }

/* Nav links — quiet by default, soft pill when active/hovered */
.header .menu > .menu-item > .menu-link {
    border-radius: var(--fx-r-pill);
    font-weight: 600;
    color: var(--fx-muted);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    transition: background-color 0.18s var(--fx-ease), color 0.18s var(--fx-ease);
}
.header .menu > .menu-item > .menu-link:hover,
.header .menu > .menu-item.here > .menu-link,
.header .menu > .menu-item.show > .menu-link {
    color: var(--fx-ink);
    background: var(--fx-surface-2);
}
.header .menu > .menu-item > .menu-link.active,
.header .menu > .menu-item.menu-here-bg > .menu-link {
    color: var(--fx-brand-700) !important;
    background: var(--fx-brand-50) !important;
}
html[data-bs-theme="dark"] .header .menu > .menu-item > .menu-link:hover,
html[data-bs-theme="dark"] .header .menu > .menu-item.here > .menu-link {
    background: rgba(255,255,255,0.05);
}

/* Round the topbar icon buttons */
.header .btn.btn-icon {
    border-radius: var(--fx-r-pill);
    transition: background-color 0.18s var(--fx-ease), color 0.18s var(--fx-ease);
}

/* Header search field */
.header-search .form-control {
    border-radius: var(--fx-r-pill);
    background: var(--fx-surface-2);
    border: 1px solid var(--fx-border);
}
.header-search .form-control:focus {
    background: var(--fx-surface);
}

/* ----------------------------------------------------------------------------
   4 · Buttons
   ---------------------------------------------------------------------------- */
.btn {
    border-radius: var(--fx-r-pill);
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: transform 0.16s var(--fx-ease), box-shadow 0.18s var(--fx-ease),
                background-color 0.18s var(--fx-ease), border-color 0.18s var(--fx-ease),
                color 0.18s var(--fx-ease);
}
.btn:active { transform: translateY(0); }

/* Primary — emerald gradient with a soft glow */
.btn.btn-primary,
.btn.btn-active-primary:active,
.btn.btn-active-primary.active {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--fx-brand-500) 0%, var(--fx-brand-600) 100%);
    box-shadow: var(--fx-shadow-brand);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    color: #fff;
    background: linear-gradient(135deg, var(--fx-brand-600) 0%, var(--fx-brand-700) 100%);
    box-shadow: 0 12px 26px rgba(5, 150, 105, 0.34);
    transform: translateY(-1px);
}
.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
    background: var(--fx-brand-300);
    box-shadow: none;
}

/* Secondary / light neutral */
.btn.btn-light,
.btn.btn-secondary,
.btn.btn-active-light {
    background: var(--fx-surface);
    border: 1px solid var(--fx-border-2);
    color: var(--fx-body);
}
.btn.btn-light:hover,
.btn.btn-secondary:hover {
    background: var(--fx-surface-2);
    border-color: var(--fx-border-2);
    color: var(--fx-ink);
    transform: translateY(-1px);
}

/* Soft light-primary */
.btn.btn-light-primary {
    background: var(--fx-brand-50);
    color: var(--fx-brand-700);
    border: 1px solid transparent;
}
.btn.btn-light-primary:hover {
    background: var(--fx-brand-100);
    color: var(--fx-brand-800);
}

/* Danger / withdraw — soft outline pill */
.btn.btn-light-danger {
    background: #fdecef;
    color: var(--fx-danger);
    border: 1px solid #f7d0d8;
}
.btn.btn-light-danger:hover {
    background: #fbdbe1;
    color: #c62f45;
    transform: translateY(-1px);
}
.btn.btn-danger {
    background: var(--fx-danger);
    border: 0;
    color: #fff;
    box-shadow: 0 8px 20px rgba(226, 73, 95, 0.26);
}
.btn.btn-danger:hover { background: #cf3a4f; transform: translateY(-1px); }

html[data-bs-theme="dark"] .btn.btn-light,
html[data-bs-theme="dark"] .btn.btn-secondary {
    background: var(--fx-surface-2);
    border-color: var(--fx-border-2);
    color: var(--fx-body);
}
html[data-bs-theme="dark"] .btn.btn-light-danger { background: #3a1e24; border-color: #5a2b33; }

/* ----------------------------------------------------------------------------
   5 · Badges → status pills (soft tint + leading dot)
   ---------------------------------------------------------------------------- */
.badge {
    border-radius: var(--fx-r-pill);
    font-weight: 600;
    letter-spacing: -0.005em;
    padding: 0.45em 0.8em;
}
.badge[class*="badge-light-"] {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    border: 1px solid transparent;
}
.badge[class*="badge-light-"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.badge.badge-light-primary   { background: var(--fx-brand-50);  color: var(--fx-brand-700); border-color: var(--fx-brand-100); }
.badge.badge-light-success   { background: #e7f7ef; color: #0b7a55; border-color: #c8ecdb; }
.badge.badge-light-info      { background: #e9f1fc; color: #2f6fc4; border-color: #d3e3f8; }
.badge.badge-light-warning   { background: #fdf3e1; color: #b47410; border-color: #f6e2bf; }
.badge.badge-light-danger    { background: #fdecef; color: #d13a52; border-color: #f7d3da; }
.badge.badge-light-secondary { background: #eef1f5; color: #5b6b7d; border-color: #e0e6ee; }
.badge.badge-light-dark      { background: #e9edf2; color: #33475b; border-color: #dbe2ea; }

html[data-bs-theme="dark"] .badge.badge-light-primary   { background: #10362a; color: #6ee7b7; border-color:#1c4d3b; }
html[data-bs-theme="dark"] .badge.badge-light-success   { background: #123328; color: #7fe3b8; border-color:#1c4d3b; }
html[data-bs-theme="dark"] .badge.badge-light-info      { background: #16283f; color: #93bdf0; border-color:#22405f; }
html[data-bs-theme="dark"] .badge.badge-light-warning   { background: #38290f; color: #ecc27a; border-color:#54401d; }
html[data-bs-theme="dark"] .badge.badge-light-danger    { background: #3a1c22; color: #f2a3af; border-color:#5a2c34; }
html[data-bs-theme="dark"] .badge.badge-light-secondary { background: #202b38; color: #a9b8c8; border-color:#2e3b4c; }

/* ----------------------------------------------------------------------------
   6 · Forms & inputs
   ---------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--fx-r-sm);
    border: 1px solid var(--fx-border-2);
    background-color: var(--fx-surface);
    color: var(--fx-body);
    transition: border-color 0.16s var(--fx-ease), box-shadow 0.16s var(--fx-ease), background-color 0.16s var(--fx-ease);
}
.form-control-solid,
.form-select-solid {
    background-color: var(--fx-surface-2) !important;
    border-color: var(--fx-border) !important;
}
.form-control:focus,
.form-select:focus,
.form-control-solid:focus,
.form-select-solid:focus {
    border-color: var(--fx-brand-400) !important;
    background-color: var(--fx-surface) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14) !important;
}
.form-control::placeholder { color: var(--fx-faint); }

.form-check-input:checked {
    background-color: var(--fx-brand-600);
    border-color: var(--fx-brand-600);
}
.form-check-input:focus {
    border-color: var(--fx-brand-400);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}

/* ----------------------------------------------------------------------------
   7 · Cards (generic — prefixed systems keep their own layout & win ties)
   ---------------------------------------------------------------------------- */
.card {
    border-radius: var(--fx-r-lg);
    border: 1px solid var(--fx-border);
    box-shadow: var(--fx-shadow-sm);
}

/* ----------------------------------------------------------------------------
   8 · Tables
   ---------------------------------------------------------------------------- */
.table thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fx-faint) !important;
}
.table.table-row-dashed tbody tr {
    transition: background-color 0.15s var(--fx-ease);
}
.table.table-row-dashed tbody tr:hover {
    background: var(--fx-surface-2);
}
.table.table-row-dashed > :not(caption) > * > * { border-bottom-color: var(--fx-border); }

/* ----------------------------------------------------------------------------
   9 · Dropdown menus
   ---------------------------------------------------------------------------- */
.menu-sub-dropdown {
    border-radius: var(--fx-r-md);
    border: 1px solid var(--fx-border);
    box-shadow: var(--fx-shadow-md);
    background: var(--fx-surface);
}
.menu-state-bg .menu-item .menu-link.active,
.menu-state-primary .menu-item .menu-link.active,
.menu-active-bg .menu-item .menu-link.active {
    background-color: var(--fx-brand-50);
    color: var(--fx-brand-700);
    border-radius: var(--fx-r-sm);
}

/* ----------------------------------------------------------------------------
   10 · Modals & toasts
   ---------------------------------------------------------------------------- */
.modal-content {
    border-radius: var(--fx-r-lg);
    border: 1px solid var(--fx-border);
    box-shadow: var(--fx-shadow-lg);
    overflow: hidden;
}
.toast {
    border-radius: var(--fx-r-md);
    border: 1px solid var(--fx-border);
    box-shadow: var(--fx-shadow-md);
    overflow: hidden;
}

/* ----------------------------------------------------------------------------
   11 · Page header (eyebrow / title / subtitle)  — panel + shared
   ---------------------------------------------------------------------------- */
.panel-premium-eyebrow,
.admin-redesign .page-eyebrow {
    color: var(--fx-brand-600);
}
.panel-premium-title { letter-spacing: -0.02em; }

/* ----------------------------------------------------------------------------
   12 · Customer panel — profile card: dark-navy  →  light & elegant
   ---------------------------------------------------------------------------- */
.panel-premium .upsection-card {
    background: var(--fx-surface) !important;
    background-image: none !important;
    border: 1px solid var(--fx-border) !important;
    border-radius: var(--fx-r-lg);
    box-shadow: var(--fx-shadow-sm);
    color: var(--fx-body) !important;
}
.panel-premium .upsection-card::before { display: none; }

/* Text helpers inside the (now light) card */
.panel-premium .upsection-card .abs-white,
.panel-premium .abs-white { color: var(--fx-ink) !important; }
.panel-premium .upsection-card .abs-less-white,
.panel-premium .abs-less-white { color: var(--fx-muted) !important; }
.panel-premium .upsection-card .text-gen,
.panel-premium .text-gen,
.panel-premium .text-active-gen.active { color: var(--fx-brand-600) !important; }
.panel-premium .upsection-card .text-hover-primary:hover { color: var(--fx-brand-700) !important; }

/* Avatar tile — soft emerald wash */
.panel-premium .upsection-card .symbol-label.bg-light-primary,
.panel-premium .symbol-label.bg-light-primary {
    background: var(--fx-brand-50) !important;
    color: var(--fx-brand-600) !important;
    border-radius: var(--fx-r-md);
}
.panel-premium .upsection-card .profile_avatar {
    border: 1px solid var(--fx-border);
    box-shadow: none;
}

/* Stat tiles */
.panel-premium .upsection-card .profile-stats-info {
    background: var(--fx-surface-2) !important;
    border: 1px solid var(--fx-border) !important;
    border-style: solid !important;
    border-radius: var(--fx-r-md);
    box-shadow: none;
    backdrop-filter: none;
    transition: border-color 0.18s var(--fx-ease), box-shadow 0.18s var(--fx-ease);
}
.panel-premium .upsection-card .profile-stats-info:hover {
    border-color: var(--fx-brand-200) !important;
    box-shadow: var(--fx-shadow-xs);
}

/* Section tabs — emerald underline pills on the light card */
.panel-premium .upsection-card .nav-line-tabs {
    border-top: 1px solid var(--fx-border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    gap: 0.25rem;
}
.panel-premium .upsection-card .nav-line-tabs .nav-link {
    border: 0 !important;
    border-radius: var(--fx-r-sm) !important;
    color: var(--fx-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.5rem 0.85rem !important;
    margin-right: 0.25rem !important;
    font-weight: 600;
}
.panel-premium .upsection-card .nav-line-tabs .nav-link:hover {
    color: var(--fx-ink) !important;
    background: var(--fx-surface-2) !important;
    border-color: transparent !important;
}
.panel-premium .upsection-card .nav-line-tabs .nav-link.active {
    color: var(--fx-brand-700) !important;
    background: var(--fx-brand-50) !important;
    border-color: transparent !important;
}

/* ----------------------------------------------------------------------------
   13 · Upload zone / click-select (claim stock)
   ---------------------------------------------------------------------------- */
.panel-premium-upload-zone {
    border: 1.5px dashed var(--fx-border-2);
    border-radius: var(--fx-r-md);
    background: var(--fx-surface-2);
    transition: border-color 0.18s var(--fx-ease), background-color 0.18s var(--fx-ease);
}
.panel-premium-upload-zone:hover {
    border-color: var(--fx-brand-400);
    background: var(--fx-brand-50);
}
.panel-premium-click-select {
    border-radius: var(--fx-r-sm);
    border: 1px solid var(--fx-border-2);
    background: var(--fx-surface);
    font-weight: 600;
    transition: border-color 0.18s var(--fx-ease), background-color 0.18s var(--fx-ease), color 0.18s var(--fx-ease);
}
.panel-premium-click-select:hover {
    border-color: var(--fx-brand-400);
    color: var(--fx-brand-700);
    background: var(--fx-brand-50);
}

/* ----------------------------------------------------------------------------
   14 · Footer
   ---------------------------------------------------------------------------- */
.footer {
    border-top: 1px solid var(--fx-border);
}
.footer .menu-link:hover { color: var(--fx-brand-600) !important; }

/* ----------------------------------------------------------------------------
   15 · Scrollbars & focus
   ---------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--fx-border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: var(--fx-border-2);
    border-radius: var(--fx-r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fx-faint); background-clip: content-box; }

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--fx-brand-400);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   16 · Misc text-color harmonisation
   ---------------------------------------------------------------------------- */
.text-primary { color: var(--fx-brand-600) !important; }
.text-hover-primary:hover { color: var(--fx-brand-700) !important; }
.bg-primary { background-color: var(--fx-brand-600) !important; }
.symbol-label.bg-light-primary { background: var(--fx-brand-50); color: var(--fx-brand-600); }