/* ============================================================
   Zeltz Brand Theme — LoRemmit Customer Dashboard
   Brand Guide: Cyan #00B4D8 · Light Blue #4A91A7 · Navy #0D1B2A
   Overrides layout.css –- loaded after it in _Layout.cshtml
   ============================================================ */

/* ── Brand Tokens ─────────────────────────────────────────── */
:root {
    /* Brand palette */
    --z-cyan:           #00B4D8;
    --z-cyan-dark:      #0090AC;
    --z-cyan-light:     #E0F7FC;
    --z-cyan-muted:     rgba(0, 180, 216, 0.12);
    --z-blue:           #4A91A7;
    --z-navy:           #0D1B2A;
    --z-navy-mid:       #162436;

    /* Semantic aliases (override --primary-red equivalents) */
    --primary-red:          var(--z-cyan);
    --primary-red-dark:     var(--z-cyan-dark);
    --primary-red-light:    var(--z-blue);

    /* Surface & text */
    --z-bg:             #F5F9FC;
    --z-surface:        #FFFFFF;
    --z-border:         #E2EBF0;
    --z-text:           #1A2B3C;
    --z-text-muted:     #5A6B7C;
    --z-text-faint:     #9BA8B5;

    /* Shadows */
    --z-shadow-sm:      0 2px 8px rgba(0, 180, 216, 0.08);
    --z-shadow:         0 4px 20px rgba(0, 180, 216, 0.12);
    --z-shadow-lg:      0 8px 40px rgba(13, 27, 42, 0.14);

    /* Transition */
    --z-transition:     all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Override layout token */
    --bg-light:         var(--z-bg);
    --card-shadow:      var(--z-shadow-sm);
}

/* ── Base ─────────────────────────────────────────────────── */
body {
    background-color: var(--z-bg) !important;
    color: var(--z-text) !important;
}

a { color: var(--z-cyan); }
a:hover { color: var(--z-cyan-dark); }

/* ── Top Header ───────────────────────────────────────────── */
.top-header {
    background: linear-gradient(135deg, var(--z-navy) 0%, var(--z-navy-mid) 100%) !important;
    border-bottom: 1px solid rgba(0, 180, 216, 0.15) !important;
    box-shadow: 0 2px 12px rgba(13, 27, 42, 0.20) !important;
}

.top-header__nav-item:hover,
.top-header__nav-item.active {
    background: rgba(0, 180, 216, 0.2) !important;
    color: white !important;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
    background: linear-gradient(180deg, var(--z-navy) 0%, var(--z-navy-mid) 100%) !important;
    border-right: 1px solid rgba(0, 180, 216, 0.12) !important;
}

.sidebar__nav-link.active {
    background: rgba(0, 180, 216, 0.18) !important;
    border-left-color: var(--z-cyan) !important;
    color: white !important;
}

.sidebar__nav-link:hover {
    background: rgba(0, 180, 216, 0.12) !important;
    color: white !important;
}

.sidebar__nav-link--signout:hover {
    color: #fca5a5 !important;
    background: rgba(255, 100, 100, 0.12) !important;
}

.sidebar__divider {
    background: rgba(0, 180, 216, 0.15) !important;
}

/* ── Main Wrapper / Content Area ──────────────────────────── */
.main-wrapper,
.content-area {
    background: var(--z-bg) !important;
}

/* ── Stats Banner ─────────────────────────────────────────── */
.stats-banner {
    background: linear-gradient(135deg, var(--z-navy) 0%, #0a2a3d 100%) !important;
}

/* ── Cards & Surfaces ─────────────────────────────────────── */
.card,
.content-card {
    background: var(--z-surface) !important;
    border-color: var(--z-border) !important;
    box-shadow: var(--z-shadow-sm) !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary,
.btn-brand {
    background: var(--z-cyan) !important;
    border-color: var(--z-cyan) !important;
    color: white !important;
}

.btn-primary:hover,
.btn-brand:hover {
    background: var(--z-cyan-dark) !important;
    border-color: var(--z-cyan-dark) !important;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.content-tab:hover {
    color: var(--z-cyan) !important;
}

.content-tab.active {
    color: var(--z-cyan) !important;
    border-bottom-color: var(--z-cyan) !important;
}

/* ── Dropdown ─────────────────────────────────────────────── */
.dropdown-menu-modern .dropdown-item i {
    color: var(--z-cyan) !important;
}

/* ── Avatar initials badge ────────────────────────────────── */
.top-header__avatar-initials,
.avatar-initials {
    background: linear-gradient(135deg, var(--z-cyan), var(--z-blue)) !important;
}

/* ── Theme toggle button ──────────────────────────────────── */
#themeToggle {
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: white !important;
    border: 1px solid rgba(0, 180, 216, 0.25) !important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--z-transition);
}

#themeToggle:hover {
    background: rgba(0, 180, 216, 0.25) !important;
    border-color: var(--z-cyan) !important;
}

/* ============================================================
   DARK MODE — Light Mode Base
   ============================================================ */

/* ── Dark: CSS token overrides ────────────────────────────── */
[data-theme="dark"] {
    --z-bg:           #0A1628;
    --z-surface:      #0F1E30;
    --z-border:       #1C2F45;
    --z-text:         #CBD5E1;
    --z-text-muted:   #64748B;
    --z-text-faint:   #334155;
    --z-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.4);
    --z-shadow:       0 4px 20px rgba(0, 0, 0, 0.5);
    --z-shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.6);
    --bg-light:       #0A1628;
    --card-shadow:    0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ── Dark: base ───────────────────────────────────────────── */
[data-theme="dark"] body {
    background-color: var(--z-bg) !important;
    color: var(--z-text) !important;
}

[data-theme="dark"] a {
    color: var(--z-cyan) !important;
}

[data-theme="dark"] a:hover {
    color: var(--z-cyan-dark) !important;
}

/* ── Dark: header stays navy (slightly lighter) ───────────── */
[data-theme="dark"] .top-header {
    background: linear-gradient(135deg, #091420 0%, #0D1B2A 100%) !important;
    border-bottom-color: rgba(0, 180, 216, 0.20) !important;
}

/* ── Dark: sidebar ────────────────────────────────────────── */
[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #091420 0%, #0D1B2A 100%) !important;
    border-right-color: rgba(0, 180, 216, 0.12) !important;
}

[data-theme="dark"] .sidebar__nav-link.active {
    background: rgba(0, 180, 216, 0.22) !important;
    border-left-color: var(--z-cyan) !important;
}

/* ── Dark: main content ───────────────────────────────────── */
[data-theme="dark"] .main-wrapper,
[data-theme="dark"] .content-area,
[data-theme="dark"] .skeleton-content {
    background: var(--z-bg) !important;
    color: var(--z-text) !important;
}

/* ── Dark: cards ──────────────────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .content-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .page-card {
    background: var(--z-surface) !important;
    border-color: var(--z-border) !important;
    color: var(--z-text) !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .card-header {
    color: #E2EBF0 !important;
    border-bottom-color: var(--z-border) !important;
}

/* ── Dark: tables ─────────────────────────────────────────── */
[data-theme="dark"] table,
[data-theme="dark"] .table {
    color: var(--z-text) !important;
    border-color: var(--z-border) !important;
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table-header {
    background: var(--z-navy-mid) !important;
    color: var(--z-text-muted) !important;
    border-bottom-color: var(--z-border) !important;
}

[data-theme="dark"] .table tbody tr {
    border-bottom-color: var(--z-border) !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background: #1C2F45 !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 180, 216, 0.04) !important;
    color: var(--z-text) !important;
}

/* ── Dark: form controls ──────────────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--z-surface) !important;
    border-color: var(--z-border) !important;
    color: var(--z-text) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--z-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.18) !important;
    background: var(--z-surface) !important;
    color: var(--z-text) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--z-text-muted) !important;
}

[data-theme="dark"] label,
[data-theme="dark"] .form-label {
    color: var(--z-text-muted) !important;
}

/* ── Dark: dropdowns & modals ─────────────────────────────── */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-menu-modern {
    background: var(--z-surface) !important;
    border-color: var(--z-border) !important;
    box-shadow: var(--z-shadow-lg) !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--z-text) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: rgba(0, 180, 216, 0.12) !important;
    color: var(--z-cyan) !important;
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--z-border) !important;
}

[data-theme="dark"] .modal-content {
    background: var(--z-surface) !important;
    border-color: var(--z-border) !important;
    color: var(--z-text) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--z-border) !important;
}

[data-theme="dark"] .modal-title {
    color: #E2EBF0 !important;
}

/* ── Dark: badges & pills ─────────────────────────────────── */
[data-theme="dark"] .badge-light,
[data-theme="dark"] .badge.bg-light {
    background: var(--z-border) !important;
    color: var(--z-text) !important;
}

/* ── Dark: tabs ───────────────────────────────────────────── */
[data-theme="dark"] .content-tab {
    color: var(--z-text-muted) !important;
    border-bottom-color: transparent !important;
}

[data-theme="dark"] .content-tab:hover {
    color: var(--z-cyan) !important;
}

[data-theme="dark"] .content-tab.active {
    color: var(--z-cyan) !important;
    border-bottom-color: var(--z-cyan) !important;
}

[data-theme="dark"] .nav-tabs {
    border-color: var(--z-border) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--z-text-muted) !important;
    border-color: transparent !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--z-cyan) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--z-surface) !important;
    border-color: var(--z-border) var(--z-border) var(--z-surface) !important;
    color: var(--z-cyan) !important;
}

/* ── Dark: borders, dividers, misc ───────────────────────────*/
[data-theme="dark"] hr,
[data-theme="dark"] .divider {
    border-color: var(--z-border) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--z-text-muted) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
    background: var(--z-surface) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top {
    border-color: var(--z-border) !important;
}

/* ── Dark: skeleton loader ────────────────────────────────── */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #1C2F45 25%, #243548 50%, #1C2F45 75%) !important;
    background-size: 200% 100% !important;
}

/* ── Dark: scrollbars ─────────────────────────────────────── */
[data-theme="dark"] * {
    scrollbar-color: rgba(0, 180, 216, 0.2) transparent;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 216, 0.2);
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 180, 216, 0.38);
}

/* ── Dark: footer ─────────────────────────────────────────── */
[data-theme="dark"] .main-footer {
    border-top-color: var(--z-border) !important;
    color: var(--z-text-muted) !important;
    background: var(--z-bg) !important;
}

/* ── Dark: transaction list ───────────────────────────────── */
[data-theme="dark"] .tx-item {
    border-bottom-color: var(--z-border) !important;
}

[data-theme="dark"] .tx-item:hover {
    background: var(--z-surface) !important;
}

[data-theme="dark"] .tx-item__title {
    color: #E2EBF0 !important;
}

[data-theme="dark"] .tx-item__meta,
[data-theme="dark"] .tx-item__subvalue,
[data-theme="dark"] .tx-date-header {
    color: var(--z-text-muted) !important;
}

[data-theme="dark"] .tx-date-header {
    border-bottom-color: var(--z-border) !important;
}

[data-theme="dark"] .tx-item__value {
    color: #E2EBF0 !important;
}

[data-theme="dark"] .tx-item__value--positive {
    color: #34D399 !important;
}

[data-theme="dark"] .tx-item__value--negative {
    color: #F87171 !important;
}

/* ── Dark: theme toggle icon ──────────────────────────────── */
[data-theme="dark"] #themeToggle {
    background: rgba(0, 180, 216, 0.15) !important;
    border-color: rgba(0, 180, 216, 0.30) !important;
}