/* ════════════════════════════════════════════════════════════════
   A NAM INVOICE — GLOBAL LIGHT THEME (eye-friendly)
   Palette: white background · light blue · orange · light green
   Loaded AFTER each page's own styles, it re-maps the shared design
   tokens and repaints the few hard-coded dark surfaces. The layout,
   spacing and components of every page stay exactly as designed.
   ════════════════════════════════════════════════════════════════ */

:root {
    /* ── App & Admin token remap ─────────────────────────────── */
    --navy:        #F3F8FC !important;   /* page background          */
    --navy-deep:   #FFFFFF !important;   /* deepest surface → white  */
    --navy-mid:    #FFFFFF !important;   /* cards / modals           */
    --navy-light:  #EAF3FA !important;   /* raised surface           */
    --accent:      #2D9CDB !important;   /* light blue               */
    --accent2:     #34B96F !important;   /* light green              */
    --accent-gold: #F5820D !important;   /* orange                   */
    --accent-purple:#7C6FD9 !important;
    --accent-red:  #C62828 !important;
    --glass-bg:    #FFFFFF !important;
    --glass-border:rgba(19,52,90,.12) !important;
    --glass-bright:rgba(19,52,90,.18) !important;
    --text-primary:#0B2545 !important;
    --text-muted:  #14406B !important;
    --text-faint:  #2E5A86 !important;
    --shadow:      0 6px 22px rgba(30,80,140,.10), 0 1px 4px rgba(30,80,140,.06) !important;
    --shadow-lg:   0 14px 40px rgba(30,80,140,.14) !important;

    /* ── Landing token remap ─────────────────────────────────── */
    --ink:      #F6FAFE !important;
    --ink-2:    #FFFFFF !important;
    --glass:    #FFFFFF !important;
    --glass-b:  rgba(19,52,90,.13) !important;
    --glass-b2: rgba(19,52,90,.09) !important;
    --cyan:     #2D9CDB !important;
    --cyan-d:   #1E7BB0 !important;
    --teal:     #34B96F !important;    /* light green */
    --teal-d:   #269D5B !important;
    --amber:    #F5820D !important;    /* orange */
    --amber-d:  #D96F06 !important;
    --text:     #0B2545 !important;
    --text-2:   #14406B !important;
    --text-3:   #2E5A86 !important;
    --glow-c:   0 4px 16px rgba(45,156,219,.22) !important;
    --glow-t:   0 4px 16px rgba(52,185,111,.24) !important;
    --glow-a:   0 4px 16px rgba(245,130,13,.22) !important;
}

/* ── Base ─────────────────────────────────────────────────────── */
html body {
    background: #F3F8FC !important;
    color: #0B2545 !important;
}
/* soft pastel ambience instead of dark radial glows */
body::before {
    background:
        radial-gradient(ellipse 80% 55% at 15% 8%,  rgba(45,156,219,.09) 0%, transparent 60%),
        radial-gradient(ellipse 55% 45% at 88% 90%, rgba(52,185,111,.08) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 60% 45%, rgba(245,130,13,.05) 0%, transparent 55%) !important;
}
.bg-shape { opacity: .5 !important; }

::selection { background: rgba(45,156,219,.22); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent !important; }
*::-webkit-scrollbar-thumb { background: rgba(19,52,90,.18) !important; border-radius: 6px; }

/* ── Sidebar / overlay / bottom nav ───────────────────────────── */
.sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid rgba(19,52,90,.10) !important;
    box-shadow: 8px 0 40px rgba(30,80,140,.12) !important;
}
.sidebar-overlay { background: rgba(22,50,77,.35) !important; backdrop-filter: blur(4px) !important; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(19,52,90,.15) !important; }
.sidebar-nav a { color: #14406B !important; }
.sidebar-nav a:hover, .sidebar-nav a.active {
    background: #EAF4FB !important;
    color: #0B2545 !important;
    border-color: rgba(45,156,219,.25) !important;
}
.sidebar-nav a i { font-size: 14px !important; }
.sidebar-header h2 { color: #14406B !important; }
.logo-wrap {
    background: linear-gradient(135deg, rgba(45,156,219,.14), rgba(52,185,111,.10)) !important;
    border-color: rgba(45,156,219,.30) !important;
    box-shadow: 0 4px 14px rgba(45,156,219,.15) !important;
}
.bottom-nav {
    background: #FFFFFF !important;
    border-top: 1px solid rgba(19,52,90,.10) !important;
    box-shadow: 0 -6px 24px rgba(30,80,140,.10) !important;
}
.bottom-nav a { color: #2E5A86 !important; }
.bottom-nav a.active, .bottom-nav a.on { color: #2D9CDB !important; }

/* ── Top bar / header / page titles ───────────────────────────── */
.top-bar, .header {
    background: rgba(255,255,255,.92) !important;
    border-bottom: 1px solid rgba(19,52,90,.10) !important;
    box-shadow: 0 2px 10px rgba(30,80,140,.05) !important;
}
.page-title h1, .greeting h1, .greeting h2,
h1[class*="gradient"], .grad-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #0B2545 !important;
    color: #0B2545 !important;
}
.greeting, .greeting p { color: #14406B !important; }

/* ── Dropdowns / notifications / modals ───────────────────────── */
.notification-dropdown, .modal-content, .modal-box, .dropdown-menu, .user-dropdown {
    background: #FFFFFF !important;
    border: 1px solid rgba(19,52,90,.12) !important;
    box-shadow: 0 18px 48px rgba(30,80,140,.18) !important;
    color: #0B2545 !important;
}
.notification-item:hover { background: rgba(45,156,219,.07) !important; }
.notification-item.unread { background: rgba(52,185,111,.07) !important; }
.notification-title { color: #0B2545 !important; }
.notification-item.unread .notification-title { color: #0F2A44 !important; }
.modal-overlay, .modal-backdrop { background: rgba(22,50,77,.40) !important; }
.notif-badge { border-color: #FFFFFF !important; }

/* ── Cards & panels (glass → clean white) ─────────────────────── */
.stat-card, .welcome-card, .card, .glass-card, .panel, .table-card,
.chart-card, .content-card, .form-card, .list-card, .info-card,
.summary-card, .pnl-card, .filter-bar, .inv-card, .settings-card,
.section-card, .box-card, .data-card, .quick-card, .action-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(19,52,90,.10) !important;
    box-shadow: 0 6px 22px rgba(30,80,140,.08) !important;
}
.stat-card:hover { box-shadow: 0 12px 30px rgba(30,80,140,.14) !important; }
.welcome-card {
    background: linear-gradient(140deg, rgba(45,156,219,.10) 0%, rgba(52,185,111,.06) 100%) !important;
    border: 1px solid rgba(45,156,219,.18) !important;
}

/* ── Tables ───────────────────────────────────────────────────── */
table { color: #0B2545 !important; }
th { color: #14406B !important; background: #F0F6FB !important; }
td { border-color: rgba(19,52,90,.08) !important; }
tr:hover td { background: rgba(45,156,219,.05) !important; }

/* ── Forms ────────────────────────────────────────────────────── */
input, select, textarea {
    background: #FFFFFF !important;
    color: #0B2545 !important;
    border-color: rgba(19,52,90,.18) !important;
}
input::placeholder, textarea::placeholder { color: #6A89A5 !important; }
input:focus, select:focus, textarea:focus {
    border-color: #2D9CDB !important;
    box-shadow: 0 0 0 3px rgba(45,156,219,.15) !important;
}
select option, .form-group select option, .inline-form select option {
    background: #FFFFFF !important;
    color: #0B2545 !important;
}
label, .form-label { color: #14406B !important; }

/* ── Buttons: keep accents, ensure readable text ──────────────── */
.btn-start, .btn-hero-primary, .dbtn-fill, .pwa-btn {
    background: linear-gradient(135deg, #34B96F, #269D5B) !important;
    color: #FFFFFF !important;
}
.pop-badge { color: #FFFFFF !important; }
a.btn-login, .btn-hero-sec, .dbtn-out {
    color: #0B2545 !important;
    border-color: rgba(19,52,90,.22) !important;
    background: #FFFFFF !important;
}
/* the auth form submit button also uses .btn-login — keep it a solid primary */
button.btn-login, .login-card button[type="submit"], .auth-card button[type="submit"] {
    background: linear-gradient(135deg, #2D9CDB, #1E7BB0) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(45,156,219,.30) !important;
}

/* ── Public site chrome ───────────────────────────────────────── */
.site-header { background: rgba(255,255,255,.88) !important; border-bottom: 1px solid rgba(19,52,90,.09) !important; }
.site-header.scrolled { background: rgba(255,255,255,.97) !important; box-shadow: 0 8px 28px rgba(30,80,140,.10) !important; }
.nav-desk a { color: #14406B !important; }
.nav-desk a.active, .nav-desk a:hover { color: #2D9CDB !important; }
.drawer { background: #FFFFFF !important; border-left: 1px solid rgba(19,52,90,.10) !important; }
.drawer a { color: #14406B !important; }
.drawer-bg { background: rgba(22,50,77,.40) !important; }
.loader-wrap { background: #F6FAFE !important; }
.stats-bar {
    background: #FFFFFF !important;
    border-top: 1px solid rgba(19,52,90,.08) !important;
    border-bottom: 1px solid rgba(19,52,90,.08) !important;
}
.ph-shell {
    background: #FFFFFF !important;
    border-color: rgba(19,52,90,.14) !important;
    box-shadow: 0 20px 44px rgba(30,80,140,.16) !important;
}
.ph-screen { background: linear-gradient(160deg, rgba(45,156,219,.05), rgba(52,185,111,.03)) !important; }
.ph-screen text { fill: #0B2545 !important; }

/* footer (dark on public pages) */
.site-footer, footer.footer, .landing-footer {
    background: #EDF4FA !important;
    color: #14406B !important;
    border-top: 1px solid rgba(19,52,90,.09) !important;
}
.site-footer a, footer.footer a { color: #14406B !important; }
.site-footer a:hover, footer.footer a:hover { color: #2D9CDB !important; }

/* ── Charts / misc ────────────────────────────────────────────── */
.chip-lbl, .stat-l, .ph-ms-l { color: #2E5A86 !important; }
.stat-n, .chip-val, .ph-ms-v { color: #0B2545 !important; }
.empty-state, .empty-notifications { color: #2E5A86 !important; }
hr, .nav-divider, .drawer-sep { background: rgba(19,52,90,.10) !important; }

/* subtle badges keep their tinted look on white */
.plan-badge { background: rgba(45,156,219,.10) !important; }
.time-badge { background: #F0F6FB !important; color: #2E5A86 !important; border-color: rgba(19,52,90,.10) !important; }

/* keep icons compact & crisp */
.stat-icon { font-size: 13px !important; }
.top-right .notif-btn i { color: #14406B !important; }

/* ── Auth pages (login / signup) ─────────────────────────────── */
.brand-content h2, .auth-title, .login-title {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #0B2545 !important;
    color: #0B2545 !important;
}
.support-login-btn a, .back-to-top {
    background: #FFFFFF !important;
    color: #0B2545 !important;
    border: 1px solid rgba(19,52,90,.18) !important;
    box-shadow: 0 6px 20px rgba(30,80,140,.14) !important;
}
.login-card, .auth-card, .signup-card, .form-side, .auth-box {
    background: #FFFFFF !important;
    border-color: rgba(19,52,90,.12) !important;
}

/* Business Suite feature cards stack on small screens */
@media (max-width: 760px) {
    .feat-card[style*="grid-template-columns"] { display: block !important; }
    .feat-card > svg { max-width: 230px; margin: 16px auto 0; display: block; }
    .feat-list[style*="columns"] { columns: 1 !important; }
}

/* ── Header pinned to top & bottom nav visible on ALL devices ──── */
.top-bar { position: sticky !important; top: 0 !important; z-index: 500; }
.bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    z-index: 900;
}
/* keep content clear of the fixed bottom nav everywhere */
.content-container, .main-content > .container, .admin-content {
    padding-bottom: 92px !important;
}

/* ── STRONG TEXT PASS: dark blue words on white, red for warnings ── */
body, p, td, li, span, div { text-shadow: none; }
.stat-sub, .sec-sub, .hero-sub, .feat-card p, .party-detail,
.notification-message, .sub, .hint, .desc, small {
    color: #14406B !important;
}
h1, h2, h3, h4, .stat-value, .sec-title, .feat-card h3 { color: #0B2545 !important; }
.plan-badge.warn, .overdue, .text-danger, .status-overdue, .badge.red,
.flash.err, .error, .alert-danger {
    color: #C62828 !important;
}
.trust-txt, .country-pill, .hero-eyebrow { color: #14406B !important; }

/* ── Document editors fit every screen (phone → desktop) ───────── */
.modal .modal-box, .modal .modal-content {
    width: min(96vw, 920px) !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
    .modal .modal-box, .modal .modal-content {
        border-radius: 14px !important;
        padding: 14px !important;
    }
    .form-row { display: block !important; }
    .form-row .form-group { margin-bottom: 14px; }
    .doc-type-selector, .client-toggle { flex-wrap: wrap; }
    .items-table-wrap, .tbl-wrap { overflow-x: auto !important; }
}

/* ── Kill ALL faded gradient-clipped headings (white-on-white) ──── */
.top-center h1, .page-title h1, .greeting h1, .greeting h2,
.top-bar h1, header h1, .brand-content h2, .grad-text,
h1[class*="gradient"], h2[class*="gradient"] {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #0B2545 !important;
    color: #0B2545 !important;
}