/* ============================================================================
   portal-premium.css — Portal-wide DARK "premium glass" skin.
   Brings the Finance-Center dashboard look (deep glass cards, soft glow,
   bright accents) to EVERY module. Layered AFTER aurora-theme.css and only
   active in dark mode ([data-theme="dark"]). Pure presentation — additive.

   Golden rule enforced here: on a dark background the text is ALWAYS light.
   Genuinely light surfaces (printable payslips / reports) are excluded so
   they keep dark text.
   ========================================================================== */

/* ---- Default light text on the app shell ------------------------------- */
/* Guarantees any un-classed text inside the page is readable on dark. */
[data-theme="dark"] #main-content { color: var(--text-main, #e8ecf6); }
[data-theme="dark"] #main-content h1,
[data-theme="dark"] #main-content h2,
[data-theme="dark"] #main-content h3,
[data-theme="dark"] #main-content h4,
[data-theme="dark"] #main-content h5,
[data-theme="dark"] #main-content h6,
[data-theme="dark"] #main-content .h1,
[data-theme="dark"] #main-content .h2,
[data-theme="dark"] #main-content .h3,
[data-theme="dark"] #main-content .h4,
[data-theme="dark"] #main-content .h5 { color: #f1f5f9; }

/* Printable / intentionally-white surfaces keep DARK text */
[data-theme="dark"] .payslip-container,
[data-theme="dark"] .payslip-container *,
[data-theme="dark"] .mmg-report-content,
[data-theme="dark"] .mmg-report-content * { color: #0f172a; }

/* ---- Premium dark glass cards everywhere ------------------------------- */
[data-theme="dark"] #main-content .glass-card,
[data-theme="dark"] #main-content .card,
[data-theme="dark"] #main-content .dash-card {
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.82) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 38px -22px rgba(2, 6, 23, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
[data-theme="dark"] #main-content .glass-card:not(.lift-hover):hover,
[data-theme="dark"] #main-content .card:hover {
    box-shadow: 0 26px 50px -24px rgba(2, 6, 23, 0.82), 0 0 34px -12px rgba(99, 102, 241, 0.3) !important;
}

/* Card headers — subtle gradient sheen so they read as a header on dark */
[data-theme="dark"] #main-content .card-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- Contrast safety net: bright semantic colours on dark -------------- */
[data-theme="dark"] #main-content .text-success { color: #34d399 !important; }
[data-theme="dark"] #main-content .text-danger  { color: #f87171 !important; }
[data-theme="dark"] #main-content .text-primary { color: #60a5fa !important; }
[data-theme="dark"] #main-content .text-info    { color: #38bdf8 !important; }
[data-theme="dark"] #main-content .text-warning { color: #fbbf24 !important; }
[data-theme="dark"] #main-content .text-purple  { color: #c4b5fd !important; }

/* ---- Chrome bits: white headers, soft pills, light buttons, dividers --- */
[data-theme="dark"] #main-content .bg-white,
[data-theme="dark"] #main-content .bg-light { background: transparent !important; }
[data-theme="dark"] #main-content .btn-white,
[data-theme="dark"] #main-content .btn-light {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}
[data-theme="dark"] #main-content .btn-white:hover,
[data-theme="dark"] #main-content .btn-light:hover { background: rgba(255, 255, 255, 0.12) !important; }
[data-theme="dark"] #main-content .badge-light { background: rgba(255, 255, 255, 0.1) !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; }
[data-theme="dark"] #main-content .progress { background: rgba(255, 255, 255, 0.08) !important; }
[data-theme="dark"] #main-content .border,
[data-theme="dark"] #main-content .border-bottom,
[data-theme="dark"] #main-content .border-top,
[data-theme="dark"] #main-content .border-right,
[data-theme="dark"] #main-content .border-left { border-color: rgba(255, 255, 255, 0.08) !important; }
[data-theme="dark"] #main-content [style*="border-bottom"] { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }

/* Soft "x-soft" tint pills used in list rows */
[data-theme="dark"] #main-content .bg-success-soft { background: rgba(16, 185, 129, 0.2) !important; }
[data-theme="dark"] #main-content .bg-danger-soft  { background: rgba(239, 68, 68, 0.2) !important; }
[data-theme="dark"] #main-content .bg-info-soft     { background: rgba(56, 189, 248, 0.2) !important; }
[data-theme="dark"] #main-content .bg-warning-soft  { background: rgba(251, 191, 36, 0.2) !important; }

/* Nav tabs underline style readable on dark */
[data-theme="dark"] #main-content .nav-tabs .nav-link.active {
    background: transparent !important;
    color: #fff !important;
    border-color: transparent transparent var(--primary-color, #6366f1) transparent !important;
}

/* ============================================================================
   READABILITY PASS — every dim/dark text on dark is lifted to a light slate.
   Golden rule: on a dark background, text is ALWAYS clearly visible.
   ========================================================================== */

/* ---- The big one: Bootstrap .text-muted (#6c757d) is invisible on dark.
   thead column labels, subtitles, helper text & "Strategic Insights" all use
   it — lift to a readable light slate. ----------------------------------- */
[data-theme="dark"] #main-content .text-muted,
[data-theme="dark"] #main-content .text-secondary,
[data-theme="dark"] #main-content small.text-muted,
[data-theme="dark"] #main-content .text-gray,
[data-theme="dark"] #main-content .text-gray-500,
[data-theme="dark"] #main-content .text-gray-600,
[data-theme="dark"] #main-content .text-gray-700,
[data-theme="dark"] #main-content .text-gray-800,
[data-theme="dark"] #main-content .text-dark { color: #aab6c8 !important; }

/* ---- Tables: bright headers + readable cells -------------------------- */
[data-theme="dark"] #main-content .table { color: #d6deea !important; }
[data-theme="dark"] #main-content .table thead th,
[data-theme="dark"] #main-content thead th,
[data-theme="dark"] #main-content table th,
[data-theme="dark"] #main-content thead.text-muted th,
[data-theme="dark"] #main-content thead .text-muted {
    color: #c7d2e4 !important;          /* column labels clearly visible */
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] #main-content .table td,
[data-theme="dark"] #main-content table td {
    color: #d6deea !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] #main-content .table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* ---- Tabs: readable INACTIVE labels, bright active -------------------- */
[data-theme="dark"] #main-content .nav-tabs .nav-link,
[data-theme="dark"] #main-content .nav-pills .nav-link,
[data-theme="dark"] #main-content .nav .nav-link {
    color: #aebaca !important;
}
[data-theme="dark"] #main-content .nav-tabs .nav-link:hover,
[data-theme="dark"] #main-content .nav-pills .nav-link:hover { color: #eaf0f8 !important; }
[data-theme="dark"] #main-content .nav-pills .nav-link.active { color: #fff !important; }

/* ---- DataTables chrome (sort labels, info, length, filter, pages) ----- */
[data-theme="dark"] #main-content .dataTables_wrapper,
[data-theme="dark"] #main-content .dataTables_info,
[data-theme="dark"] #main-content .dataTables_length label,
[data-theme="dark"] #main-content .dataTables_filter label,
[data-theme="dark"] #main-content .dataTables_paginate,
[data-theme="dark"] #main-content .dataTables_paginate .paginate_button { color: #b4c0d3 !important; }

/* ---- Form labels readable on dark ------------------------------------ */
[data-theme="dark"] #main-content label,
[data-theme="dark"] #main-content .form-text { color: #c3cee0 !important; }

/* ---- Safety net: inline dark/gray text colors lifted on dark ---------- */
[data-theme="dark"] #main-content [style*="color:#333"],
[data-theme="dark"] #main-content [style*="color: #333"],
[data-theme="dark"] #main-content [style*="color:#666"],
[data-theme="dark"] #main-content [style*="color: #666"],
[data-theme="dark"] #main-content [style*="color:#777"],
[data-theme="dark"] #main-content [style*="color: #777"],
[data-theme="dark"] #main-content [style*="color:#888"],
[data-theme="dark"] #main-content [style*="color: #888"],
[data-theme="dark"] #main-content [style*="color:#6c757d"],
[data-theme="dark"] #main-content [style*="color: #6c757d"] { color: #b2bdce !important; }