/* ═══════════════════════════════════════════════════════════════════════
   HAz ERP — Accessible Light Brown Theme v5
   Very light warm brown backgrounds + high contrast dark text
   WCAG AA compliant (4.5:1+ contrast ratios)
   Optimized for users with glasses / low vision
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --haz-bg-darkest:    #e8ddd0;
    --haz-bg-dark:       #f0e6da;
    --haz-bg-main:       #f5efe7;
    --haz-bg-card:       #ffffff;
    --haz-bg-card-hover: #faf6f1;
    --haz-bg-surface:    #f8f3ed;
    --haz-bg-input:      #ffffff;
    --haz-bg-sidebar:    #404040;

    --haz-teal:          #0e8c84;
    --haz-teal-light:    #12a89e;
    --haz-teal-dark:     #0a6e68;
    --haz-teal-glow:     rgba(14,140,132,0.15);
    --haz-teal-subtle:   rgba(14,140,132,0.08);
    --haz-teal-border:   rgba(14,140,132,0.35);

    --haz-text-primary:   #1a1a1a;
    --haz-text-secondary: #404040;
    --haz-text-muted:     #6b5d50;
    --haz-text-dim:       #8a7b6c;

    --haz-border:         #d4c8b8;
    --haz-border-light:   #e0d5c8;
    --haz-border-accent:  #0e8c84;

    --haz-success:   #0e8c84;
    --haz-warning:   #b5850a;
    --haz-danger:    #c42b2b;
    --haz-info:      #1a6bbf;

    --haz-gradient-bg:     linear-gradient(135deg, #f5efe7 0%, #f0e6da 50%, #e8ddd0 100%);
    --haz-gradient-card:   linear-gradient(135deg, #ffffff 0%, #faf6f1 100%);
    --haz-gradient-accent: linear-gradient(135deg, #0e8c84 0%, #0a6e68 100%);
    --haz-gradient-hero:   linear-gradient(135deg, #f5efe7 0%, #f0e6da 30%, #e8ddd0 70%, #f5efe7 100%);

    --haz-shadow:      0 2px 12px rgba(60,50,35,0.10);
    --haz-shadow-lg:   0 8px 30px rgba(60,50,35,0.15);
    --haz-shadow-glow: 0 0 20px rgba(14,140,132,0.15);

    --haz-black: #1a1410; --haz-dark: #404040; --haz-darker: #1a1410;
    --haz-emerald: #0e8c84; --haz-emerald-light: #12a89e; --haz-emerald-dark: #0a6e68;
    --haz-cyan: #1a6bbf; --white: #ffffff;
    --gray-100: #f5efe7; --gray-200: #e8ddd0; --gray-300: #d4c8b8;
    --gray-400: #b8a998; --gray-500: #8a7b6c; --gray-600: #6b5d50;
    --gray-700: #4d4238; --gray-800: #404040; --gray-900: #1a1410;
    --success: #0e8c84; --warning: #b5850a; --danger: #c42b2b; --info: #1a6bbf;
    --gradient-hero: var(--haz-gradient-hero);
    --gradient-emerald: var(--haz-gradient-accent);
    --shadow-glow: var(--haz-shadow-glow);
    --shadow-glow-sm: 0 0 10px rgba(14,140,132,0.1);
    --primary: #0e8c84; --secondary: #b5850a; --accent: #b5850a;
}

/* ═══ GLOBAL ACCESSIBILITY ═══ */
html { font-size: 16px !important; }
body {
    background: var(--haz-bg-main) !important;
    color: var(--haz-text-primary) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}

/* ═══ BACKGROUNDS ═══ */
body, html, .app-container, .main-container, .content-wrapper,
.app-content, main, .main, .main-content, .content {
    background: var(--haz-bg-main) !important;
    color: var(--haz-text-primary) !important;
}

.card, .module-card, .stat-card, .info-card, .welcome-card,
.summary-card, .report-card, .chart-card, .dashboard-card,
.data-card, .cost-card, .metric-card, .kpi-card, .evm-card,
.pr-card, .po-card, .forecast-card, .issue-card, [class*="card"] {
    background: var(--haz-bg-card) !important;
    color: var(--haz-text-primary) !important;
    border: 1px solid var(--haz-border) !important;
    box-shadow: var(--haz-shadow) !important;
    border-radius: 10px;
}

/* ═══ SIDEBAR (keep dark) ═══ */
.sidebar, .cost-sidebar, nav.sidebar, aside.sidebar {
    background: #404040 !important;
    color: #f0e6da !important;
    border-right: 2px solid var(--haz-border-accent) !important;
}
.sidebar a, .sidebar button, .sidebar .nav-item, .sidebar .nav-btn,
.sidebar .quick-nav-link, .cost-sidebar a, .cost-sidebar button {
    color: #e8ddd0 !important;
}
.sidebar a:hover, .sidebar button:hover, .sidebar .nav-item:hover,
.sidebar .nav-btn:hover, .sidebar .quick-nav-link:hover {
    background: rgba(14,140,132,0.2) !important;
    color: #fff !important;
}
.sidebar .nav-item.active, .sidebar .nav-btn.active, .sidebar .quick-nav-link.active {
    background: rgba(14,140,132,0.25) !important;
    color: #12a89e !important;
}
.sidebar .nav-label, .sidebar .nav-section-label, .sidebar .sidebar-logo-subtitle {
    color: #b8a998 !important;
}
.sidebar .sidebar-logo-title, .sidebar .sidebar-title, .sidebar-header { color: #fff !important; }

/* ═══ TEXT ═══ */
h1,h2,h3,h4,h5,h6,.page-title,.section-title,.card-title,
.module-title,.welcome-title,.stat-value,.kpi-value,.metric-value {
    color: var(--haz-text-primary) !important; font-weight: 700 !important;
}
h1 { font-size: 1.8rem !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.25rem !important; }

.module-title-ar, .card-subtitle, .welcome-subtitle, .module-description {
    color: var(--haz-text-muted) !important; font-size: 0.95rem !important;
}
label, .form-label, .label, .input-label {
    color: var(--haz-text-secondary) !important; font-weight: 600 !important; font-size: 0.95rem !important;
}

/* ═══ FORMS ═══ */
input, select, textarea, .form-input, .form-control, .form-select {
    background: var(--haz-bg-input) !important;
    color: var(--haz-text-primary) !important;
    border: 2px solid var(--haz-border) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    min-height: 42px;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--haz-teal) !important;
    outline: 3px solid var(--haz-teal-glow) !important;
}
input::placeholder, textarea::placeholder { color: var(--haz-text-dim) !important; }

/* ═══ BUTTONS ═══ */
.btn, button[class*="btn"] {
    font-size: 14px !important; font-weight: 600 !important;
    border-radius: 8px !important; min-height: 40px; cursor: pointer;
}
.btn-primary, button.btn-primary, [class*="btn-primary"] {
    background: var(--haz-gradient-accent) !important; color: #fff !important; border: none !important;
}
.btn-secondary, button.btn-secondary {
    background: transparent !important; color: var(--haz-text-secondary) !important;
    border: 2px solid var(--haz-border) !important;
}
.btn-danger { background: var(--haz-danger) !important; color: #fff !important; }
.btn-success { background: var(--haz-success) !important; color: #fff !important; }

/* ═══ TABLES ═══ */
table { width: 100%; font-size: 14px !important; }
th {
    background: #404040 !important; color: #fff !important;
    font-weight: 700 !important; padding: 12px 16px !important;
    font-size: 13px !important; border-bottom: 2px solid var(--haz-teal) !important;
}
td {
    padding: 12px 16px !important; color: var(--haz-text-primary) !important;
    border-bottom: 1px solid var(--haz-border-light) !important; font-size: 14px !important;
}
tr:nth-child(even) td { background: var(--haz-bg-surface) !important; }
tr:hover td { background: var(--haz-teal-subtle) !important; }

/* ═══ MODALS ═══ */
.modal, .modal-content, .dialog, [class*="modal"] .modal-body,
[class*="modal"] .modal-header, [class*="modal"] .modal-footer {
    background: var(--haz-bg-card) !important; color: var(--haz-text-primary) !important;
}
.modal-overlay, .modal-backdrop { background: rgba(26,20,16,0.5) !important; }

/* ═══ BADGES ═══ */
.badge-success, .badge-approved, .badge-active, .status-active,
[class*="badge-success"], [class*="status-approved"] {
    background: rgba(14,140,132,0.12) !important; color: #0a6e68 !important;
    border: 1px solid rgba(14,140,132,0.3) !important;
}
.badge-warning, .badge-pending, .status-pending,
[class*="badge-warning"], [class*="status-pending"] {
    background: rgba(181,133,10,0.1) !important; color: #8a6508 !important;
    border: 1px solid rgba(181,133,10,0.3) !important;
}
.badge-danger, .badge-rejected, .badge-critical,
[class*="badge-danger"], [class*="status-rejected"] {
    background: rgba(196,43,43,0.08) !important; color: #a02020 !important;
    border: 1px solid rgba(196,43,43,0.3) !important;
}

/* ═══ TABS ═══ */
.tab.active, .tab-btn.active, .nav-tab.active, [class*="tab-btn"].active {
    color: var(--haz-teal-dark) !important; border-bottom-color: var(--haz-teal) !important;
    background: var(--haz-teal-subtle) !important;
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--haz-bg-dark); border-radius: 5px; }
::-webkit-scrollbar-thumb { background: var(--haz-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--haz-text-dim); }

/* ═══ HEADER ═══ */
.header, .top-bar, .page-header, .header-main {
    background: var(--haz-bg-card) !important; color: var(--haz-text-primary) !important;
    border-bottom: 2px solid var(--haz-border) !important;
}

/* ═══ LINKS ═══ */
a:not(.sidebar a):not(.btn):not(.nav-item):not(.quick-nav-link) {
    color: var(--haz-teal-dark) !important;
}

/* ═══ WELCOME CARD ═══ */
.welcome-card { background: var(--haz-gradient-card) !important; }
.welcome-greeting { color: var(--haz-teal-dark) !important; font-weight: 600 !important; }

/* ═══ STATUS BAR ═══ */
.haz-auto-bar { background: #404040 !important; border-top: 2px solid var(--haz-teal) !important; }

/* ═══ FOCUS ═══ */
*:focus-visible { outline: 3px solid var(--haz-teal) !important; outline-offset: 2px; }

/* ═══ PRINT ═══ */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .sidebar, .haz-auto-bar, .toast, button { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   NUCLEAR TEXT VISIBILITY OVERRIDE
   Forces ALL text readable on light backgrounds
   This overrides CSS class-based colors, not just inline
   ═══════════════════════════════════════════════════════════════ */

/* EVERYTHING gets dark text by default */
body *, body *::before, body *::after {
    --text-primary: #1a1a1a !important;
    --text-secondary: #404040 !important;
    --text-muted: #6b6b6b !important;
    --text-light: #404040 !important;
    --text-inverse: #1a1a1a !important;
    --text: #1a1a1a !important;
}

/* Force all generic text dark */
body, p, span, div, li, td, th, a, label,
h1, h2, h3, h4, h5, h6,
input, select, textarea, option,
article, section, main, aside, footer, header,
figcaption, legend, details, summary,
dt, dd, blockquote, pre, code {
    color: #1a1a1a;
}

/* ── Tab text (ALL modules) ── */
.top-nav-tab,
.top-nav-tab .tab-text,
.top-nav-tab .tab-label,
.top-nav-tab .tab-name,
.top-nav-tab span,
.top-nav-link,
.top-nav-link .link-text,
.top-nav-link span,
.nav-tab,
.nav-tab span,
.tab-btn,
.tab-btn span,
.tab, .tab span,
.cost-tab, .cost-tab span,
[class*="tab-"] span,
[class*="nav-tab"] span,
[role="tab"],
[role="tab"] span {
    color: #404040 !important;
}

/* Active tabs - dark bg, white text */
.top-nav-tab.active,
.top-nav-tab.active .tab-text,
.top-nav-tab.active span,
.tab-btn.active,
.tab-btn.active span,
.nav-tab.active,
.nav-tab.active span,
.tab.active,
.tab.active span,
[role="tab"][aria-selected="true"],
[role="tab"].active {
    color: #ffffff !important;
    background: #404040 !important;
}

/* ── Stat card labels ── */
.stat-card .label,
.stat-card .title,
.stat-card .stat-label,
.stat-card .stat-title,
.stat-card .description,
.stat-card p,
.stat-card small,
.kpi-card .label,
.kpi-card .title,
.metric-card .label,
.metric-card .title,
.cost-card .label,
.cost-card .title,
.summary-card .label,
.card .label,
.card small,
[class*="card"] .label,
[class*="card"] small,
[class*="stat"] .label,
[class*="stat"] small,
[class*="kpi"] .label {
    color: #404040 !important;
    opacity: 1 !important;
}

/* ── Stat card values ── */
.stat-card .value,
.stat-card .stat-value,
.kpi-card .value,
.metric-card .value,
.cost-card .value,
[class*="stat"] .value,
[class*="kpi"] .value {
    color: #1a1a1a !important;
    opacity: 1 !important;
}

/* ── Card titles ── */
.card-title,
.card-header,
.card-header span,
.section-title,
.section-header,
.module-title,
.page-title,
.panel-title,
.widget-title,
.header-title,
[class*="card-title"],
[class*="section-title"] {
    color: #1a1a1a !important;
    opacity: 1 !important;
}

/* ── Card subtitles and descriptions ── */
.card-subtitle,
.card-description,
.card-desc,
.module-description,
.subtitle,
[class*="subtitle"],
[class*="description"] {
    color: #6b6b6b !important;
    opacity: 1 !important;
}

/* ── Page headers ── */
.header h1, .header h2, .header h3,
.header .title, .header .subtitle,
.page-header h1, .page-header h2,
.top-nav-title,
.top-nav-subtitle {
    color: #1a1a1a !important;
}

.header p, .header small,
.header .desc, .header .subtitle {
    color: #6b6b6b !important;
    opacity: 1 !important;
}

/* ── Table text ── */
table td, table td *,
table td span, table td a,
table td div, table td p {
    color: #1a1a1a !important;
}

table th, table th * {
    color: #ffffff !important;
}

/* ── Form text ── */
input, select, textarea {
    color: #1a1a1a !important;
}
input::placeholder, textarea::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}
label, .form-label, .input-label {
    color: #404040 !important;
}

/* ── Links outside sidebar ── */
a:not(.sidebar a):not(.btn):not(.nav-item):not([class*="btn"]) {
    color: #0a6e68 !important;
}

/* ── Muted text fix ── */
.text-muted, .muted, .desc,
[class*="muted"], [class*="secondary-text"],
.helper-text, .hint {
    color: #6b6b6b !important;
    opacity: 1 !important;
}

/* ── Arabic labels ── */
.ar, [class*="-ar"], [lang="ar"] {
    color: #808080 !important;
    opacity: 1 !important;
}

/* ── Opacity reset ── */
.header p, .header small,
.stat-card *, .kpi-card *,
.metric-card *, .cost-card *,
.card *, [class*="card"] * {
    opacity: 1 !important;
}

/* ── Legend/chart labels ── */
.legend-item, .legend-label,
.chart-label, .axis-label,
[class*="legend"] {
    color: #404040 !important;
}

/* ═══ BUTTONS — Keep white text on colored bg ═══ */
.btn-primary, .btn-primary *,
.btn-danger, .btn-danger *,
.btn-success, .btn-success *,
.btn-warning, .btn-warning *,
button[style*="background: #"], 
button[style*="background:#"],
button[style*="background: var(--primary)"],
button[style*="background: var(--danger)"],
button[style*="background: linear-gradient"],
a[style*="background: #0"],
a[style*="background: linear-gradient"],
[class*="btn-primary"],
[class*="btn-danger"],
[class*="btn-success"] {
    color: #ffffff !important;
}

/* ═══ SIDEBAR — Keep light text on dark bg ═══ */
.sidebar, .sidebar *,
.cost-sidebar, .cost-sidebar *,
nav.sidebar, nav.sidebar *,
aside.sidebar, aside.sidebar * {
    color: #e0e0e0 !important;
}
.sidebar .nav-item.active,
.sidebar .nav-btn.active,
.sidebar .quick-nav-link.active {
    color: #12a89e !important;
}
.sidebar .nav-label,
.sidebar .nav-section-label {
    color: #999999 !important;
}
.sidebar .sidebar-logo-title,
.sidebar .sidebar-title {
    color: #ffffff !important;
}

/* ═══ STATUS BADGES — Keep appropriate colors ═══ */
.badge, [class*="badge"],
.status, [class*="status-badge"] {
    opacity: 1 !important;
}

/* ═══ TOAST/NOTIFICATION — Dark bg gets white ═══ */
.toast, .notification,
[class*="toast"] {
    color: #ffffff !important;
}

/* ═══ DARK HEADER BAR (EVM sync bar etc) ═══ */
[style*="background: linear-gradient(135deg, #0"],
[style*="background:#0"],
[style*="background: #1"],
[style*="background:#1"],
[style*="background: #2"],
[style*="background: #3"] {
    color: #ffffff !important;
}

/* ═══ Entry link/form pages ═══ */
.entry-card, .form-card,
.entry-card *, .form-card * {
    color: #1a1a1a !important;
}

/* ═══ Welcome section ═══ */
.welcome-card *, .welcome-title,
.welcome-subtitle, .welcome-greeting {
    color: #1a1a1a !important;
}