/* =============================================
    DARK MODE SYSTEM — Livo Bank
   ============================================= */

/* --- Smooth theme transition --- */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease !important;
}

/* --- Dark theme overrides --- */
html[data-theme="light-only"] {

    /* Backgrounds
    --white: #12121a;
    --gray-50: #16161f;
    --gray-100: #1a1a25;
    --gray-200: #2a2a35;
    --gray-300: #3a3a48;
    --gray-400: #5a5a6a;
    --gray-500: #7a7a8a;
    --gray-600: #9a9aaa;
    --gray-700: #b0b0bf;
    --gray-800: #d0d0da;
    --gray-900: #e8e8ed;

    /* Brand — keep identity
    --primary: #4d9ff5;
    --primary-dark: #3a8ae0;
    --primary-light: #162a40;
    --accent: #00d68f;
    --accent-dark: #00b87a;
    --accent-light: #0b3d2e;
    --gold: #d4b06a;
    --gold-light: #3d3420;

    /* Semantic
    --success: #34d399;
    --success-light: #0d2e1f;
    --warning: #fbbf24;
    --warning-light: #3d3010;
    --danger: #f87171;
    --danger-light: #3d1418;
    --info: #38bdf8;
    --info-light: #0c2a3a;

    /* Shadows — subtler on dark
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.45);
    --shadow-xl: 0 12px 40px rgba(0,0,0,0.55);

    /* Page-level
    background: #0a0a0f;
    color: #e8e8ed;
}

/* =============================================
   BODY
   ============================================= */
html[data-theme="light-only"] body {
    background: #0a0a0f;
    color: #e8e8ed;
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
html[data-theme="light-only"] h1,
html[data-theme="light-only"] h2,
html[data-theme="light-only"] h3,
html[data-theme="light-only"] h4,
html[data-theme="light-only"] h5,
html[data-theme="light-only"] h6 {
    color: #f0f0f5;
}

/* =============================================
   LINKS
   ============================================= */
html[data-theme="light-only"] a { color: inherit; }
html[data-theme="light-only"] a:hover { color: var(--accent); }

/* =============================================
   CARDS / SURFACES
   ============================================= */
html[data-theme="light-only"] .card,
html[data-theme="light-only"] .product-card,
html[data-theme="light-only"] .quick-card,
html[data-theme="light-only"] .feature-card-sm,
html[data-theme="light-only"] .stat-card,
html[data-theme="light-only"] .stakeholder-card,
html[data-theme="light-only"] .announcement-card,
html[data-theme="light-only"] .info-card,
html[data-theme="light-only"] .principle-card,
html[data-theme="light-only"] .tier-card,
html[data-theme="light-only"] .way-card {
    background: #12121a;
    border-color: #2a2a35;
}

html[data-theme="light-only"] .card-header {
    border-color: #2a2a35;
}

html[data-theme="light-only"] .card-footer {
    background: #16161f;
    border-color: #2a2a35;
}

/* =============================================
   BUTTONS
   ============================================= */
html[data-theme="light-only"] .btn-outline {
    background: transparent;
    border-color: #3a3a48;
    color: #b0b0bf;
}
html[data-theme="light-only"] .btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(77,159,245,0.1);
}

html[data-theme="light-only"] .btn-secondary {
    background: #2a2a35;
    color: #b0b0bf;
}
html[data-theme="light-only"] .btn-secondary:hover {
    background: #3a3a48;
    color: #e8e8ed;
}

html[data-theme="light-only"] .btn-ghost {
    color: #9a9aaa;
}
html[data-theme="light-only"] .btn-ghost:hover {
    background: #1a1a25;
    color: #e8e8ed;
}

html[data-theme="light-only"] .btn-white {
    background: #1a1a25;
    color: var(--primary);
    border-color: #2a2a35;
}

html[data-theme="light-only"] .btn-outline-white {
    border-color: rgba(255,255,255,0.15);
    color: #b0b0bf;
}

/* =============================================
   FORMS
   ============================================= */
html[data-theme="light-only"] .form-input,
html[data-theme="light-only"] .form-select,
html[data-theme="light-only"] .form-textarea,
html[data-theme="light-only"] input[type="text"],
html[data-theme="light-only"] input[type="email"],
html[data-theme="light-only"] input[type="password"],
html[data-theme="light-only"] input[type="number"],
html[data-theme="light-only"] input[type="date"],
html[data-theme="light-only"] input[type="url"],
html[data-theme="light-only"] input[type="tel"],
html[data-theme="light-only"] select,
html[data-theme="light-only"] textarea {
    background: #16161f;
    border-color: #2a2a35;
    color: #e8e8ed;
}
html[data-theme="light-only"] .form-input:focus,
html[data-theme="light-only"] .form-select:focus,
html[data-theme="light-only"] .form-textarea:focus,
html[data-theme="light-only"] input:focus,
html[data-theme="light-only"] select:focus,
html[data-theme="light-only"] textarea:focus {
    background: #1a1a25;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(77,159,245,0.12);
}
html[data-theme="light-only"] .form-input::placeholder,
html[data-theme="light-only"] .form-select::placeholder,
html[data-theme="light-only"] .form-textarea::placeholder,
html[data-theme="light-only"] input::placeholder {
    color: #5a5a6a;
}

html[data-theme="light-only"] .form-group label {
    color: #b0b0bf;
}

html[data-theme="light-only"] .form-check label {
    color: #9a9aaa;
}

/* =============================================
   TABLES
   ============================================= */
html[data-theme="light-only"] thead th {
    background: #16161f;
    color: #7a7a8a;
    border-color: #2a2a35;
}
html[data-theme="light-only"] tbody td {
    border-color: #1f1f2a;
    color: #d0d0da;
}
html[data-theme="light-only"] tbody tr:hover {
    background: #1a1a25;
}
html[data-theme="light-only"] .data-table th {
    border-color: #2a2a35;
}
html[data-theme="light-only"] .data-table td {
    border-color: #1f1f2a;
    color: #b0b0bf;
}
html[data-theme="light-only"] .data-table tbody tr:hover {
    background: #1a1a25;
}

/* =============================================
   MODALS
   ============================================= */
html[data-theme="light-only"] .modal {
    background: #12121a;
}
html[data-theme="light-only"] .modal-header {
    border-color: #2a2a35;
}
html[data-theme="light-only"] .modal-header h3 {
    color: #f0f0f5;
}
html[data-theme="light-only"] .modal-body {
    color: #d0d0da;
}
html[data-theme="light-only"] .modal-footer {
    border-color: #2a2a35;
    background: #16161f;
}
html[data-theme="light-only"] .modal-close:hover {
    background: #2a2a35;
    color: #f0f0f5;
}

/* =============================================
   TABS
   ============================================= */
html[data-theme="light-only"] .tab-nav {
    border-color: #2a2a35;
}
html[data-theme="light-only"] .tab-btn {
    color: #7a7a8a;
}
html[data-theme="light-only"] .tab-btn:hover {
    color: #b0b0bf;
}
html[data-theme="light-only"] .tab-btn.active {
    color: var(--primary);
}
html[data-theme="light-only"] .tab-btn {
    border-color: #2a2a35;
}
html[data-theme="light-only"] .tab-btn.active {
    border-bottom-color: var(--primary);
}

/* =============================================
   BADGES / PILLS
   ============================================= */
html[data-theme="light-only"] .badge-inactive {
    background: #2a2a35;
    color: #9a9aaa;
}
html[data-theme="light-only"] .badge-general {
    background: #2a2a35;
    color: #b0b0bf;
}

/* =============================================
   FILTER PILLS
   ============================================= */
html[data-theme="light-only"] .filter-pill {
    background: #12121a;
    border-color: #2a2a35;
    color: #9a9aaa;
}
html[data-theme="light-only"] .filter-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* =============================================
   STAT INFO OVERRIDES (admin stat values)
   ============================================= */
html[data-theme="light-only"] .stat-info h4,
html[data-theme="light-only"] .stat-info .stat-value {
    color: #f0f0f5;
}
html[data-theme="light-only"] .stat-info p,
html[data-theme="light-only"] .stat-info .stat-label {
    color: #7a7a8a;
}

/* =============================================
   DETAIL SECTIONS (modal internals)
   ============================================= */
html[data-theme="light-only"] .detail-section h4 {
    color: #7a7a8a;
    border-color: #1f1f2a;
}
html[data-theme="light-only"] .detail-item label,
html[data-theme="light-only"] .detail-item .label {
    color: #7a7a8a;
}
html[data-theme="light-only"] .detail-item span,
html[data-theme="light-only"] .detail-item .value {
    color: #e8e8ed;
}

/* =============================================
   ADMIN SIDEBAR
   ============================================= */
html[data-theme="light-only"] .sidebar {
    background: #0e0e16;
    border-color: #1f1f2a;
}
html[data-theme="light-only"] .sidebar-nav .nav-link {
    color: #9a9aaa;
}
html[data-theme="light-only"] .sidebar-nav .nav-link:hover {
    background: #1a1a25;
    color: #e8e8ed;
}
html[data-theme="light-only"] .sidebar-nav .nav-link.active {
    background: rgba(77,159,245,0.12);
    color: var(--primary);
}
html[data-theme="light-only"] .sidebar-header {
    border-color: #1f1f2a;
}
html[data-theme="light-only"] .sidebar-footer {
    border-color: #1f1f2a;
    background: #0e0e16;
}
html[data-theme="light-only"] .sidebar-footer .user-info .name,
html[data-theme="light-only"] .sidebar-user .user-info .user-name {
    color: #e8e8ed;
}
html[data-theme="light-only"] .sidebar-nav .nav-section-title {
    color: #5a5a6a;
}

/* =============================================
   ADMIN TOP BAR
   ============================================= */
html[data-theme="light-only"] .topbar,
html[data-theme="light-only"] .top-bar {
    background: #0e0e16;
    border-color: #1f1f2a;
}
html[data-theme="light-only"] .topbar .page-title,
html[data-theme="light-only"] .top-bar .page-title {
    color: #f0f0f5;
}
html[data-theme="light-only"] .topbar-left .hamburger,
html[data-theme="light-only"] .top-bar .hamburger {
    color: #b0b0bf;
}
html[data-theme="light-only"] .admin-badge {
    background: rgba(77,159,245,0.12);
    color: var(--primary);
}

/* =============================================
   ADMIN CONTENT AREA
   ============================================= */
html[data-theme="light-only"] .content-area {
    background: #0a0a0f;
}
html[data-theme="light-only"] .main-content {
    background: #0a0a0f;
}

/* =============================================
   SECTION BACKGROUNDS
   ============================================= */
html[data-theme="light-only"] .featured,
html[data-theme="light-only"] .corp-stats-section,
html[data-theme="light-only"] .ways-section,
html[data-theme="light-only"] .calc-section-alt,
html[data-theme="light-only"] .corp-section-alt,
html[data-theme="light-only"] .shariah-board {
    background: #0e0e16;
}

html[data-theme="light-only"] .section-tag {
    background: rgba(0,214,143,0.1);
    color: var(--accent);
}

/* =============================================
   HEADER / NAVIGATION
   ============================================= */
html[data-theme="light-only"] .main-header {
    background: #0e0e16;
    border-color: #1f1f2a;
}
html[data-theme="light-only"] .nav-link {
    color: #9a9aaa;
}
html[data-theme="light-only"] .nav-link:hover,
html[data-theme="light-only"] .nav-link.active {
    color: var(--primary);
}
html[data-theme="light-only"] .mega-dropdown {
    background: #12121a;
    border-color: #2a2a35;
}
html[data-theme="light-only"] .mega-dropdown::before {
    border-bottom-color: #12121a;
}
html[data-theme="light-only"] .mega-col a {
    color: #9a9aaa;
}
html[data-theme="light-only"] .mega-col a:hover {
    background: #1a1a25;
    color: var(--primary);
}

/* =============================================
   UTILITY BAR
   ============================================= */
html[data-theme="light-only"] .utility-bar {
    background: #08080c;
}

/* =============================================
   FOOTER
   ============================================= */
html[data-theme="light-only"] .main-footer {
    background: #08080c;
}
html[data-theme="light-only"] .footer-links a {
    color: #7a7a8a;
}
html[data-theme="light-only"] .footer-links a:hover {
    color: var(--accent);
}
html[data-theme="light-only"] .footer-social a {
    background: rgba(255,255,255,0.06);
    color: #7a7a8a;
}
html[data-theme="light-only"] .footer-social a:hover {
    background: var(--accent);
    color: #fff;
}
html[data-theme="light-only"] .footer-legal-links a {
    color: #7a7a8a;
}
html[data-theme="light-only"] .footer-legal-links a:hover {
    color: var(--accent);
}

/* =============================================
   LOGIN SCREENS (both portals)
   ============================================= */
html[data-theme="light-only"] .login-card {
    background: #12121a;
}
html[data-theme="light-only"] .login-tabs {
    border-color: #2a2a35;
}
html[data-theme="light-only"] .login-tab {
    background: #16161f;
    color: #7a7a8a;
}
html[data-theme="light-only"] .login-tab.active {
    background: var(--primary);
    color: #fff;
}
html[data-theme="light-only"] .security-badge {
    background: #16161f;
    color: #7a7a8a;
}
html[data-theme="light-only"] .login-footer {
    border-color: #2a2a35;
}
html[data-theme="light-only"] .login-footer p {
    color: #7a7a8a;
}

/* =============================================
   TOASTS
   ============================================= */
html[data-theme="light-only"] .toast {
    background: #1a1a25;
    color: #e8e8ed;
}

/* =============================================
   SPINNER OVERLAY
   ============================================= */
html[data-theme="light-only"] .spinner-overlay,
html[data-theme="light-only"] .loading-overlay {
    background: rgba(10,10,15,0.85);
}

/* =============================================
   NOTIFICATION PANEL (customer portal)
   ============================================= */
html[data-theme="light-only"] .notif-panel {
    background: #12121a;
}
html[data-theme="light-only"] .notif-header {
    background: #16161f;
    border-color: #2a2a35;
}
html[data-theme="light-only"] .notif-header h3 {
    color: #f0f0f5;
}
html[data-theme="light-only"] .notif-item {
    border-color: #1f1f2a;
    color: #d0d0da;
}
html[data-theme="light-only"] .notif-item:hover {
    background: #1a1a25;
}
html[data-theme="light-only"] .notif-empty {
    color: #5a5a6a;
}
html[data-theme="light-only"] .notif-empty i {
    color: #3a3a48;
}
html[data-theme="light-only"] .notif-overlay {
    background: rgba(0,0,0,0.6);
}

/* =============================================
   SECTION HEADER TITLES
   ============================================= */
html[data-theme="light-only"] .section-header h2 {
    color: #f0f0f5;
}
html[data-theme="light-only"] .section-title {
    color: #f0f0f5;
}

/* =============================================
   PROMO / CAROUSEL NAV
   ============================================= */
html[data-theme="light-only"] .promo-nav {
    background: rgba(18,18,26,0.9);
    color: #e8e8ed;
}
html[data-theme="light-only"] .promo-nav:hover {
    background: #1a1a25;
}
html[data-theme="light-only"] .promo-dot {
    background: #3a3a48;
}
html[data-theme="light-only"] .promo-dot.active {
    background: var(--primary);
}

/* =============================================
   QUICK ACTIONS GRID (admin)
   ============================================= */
html[data-theme="light-only"] .quick-action {
    background: #12121a;
    border-color: #2a2a35;
    color: #b0b0bf;
}
html[data-theme="light-only"] .quick-action:hover {
    background: rgba(77,159,245,0.08);
    border-color: var(--primary);
    color: var(--primary);
}
html[data-theme="light-only"] .quick-action-btn {
    background: #12121a;
    border-color: #2a2a35;
    color: #b0b0bf;
}
html[data-theme="light-only"] .quick-action-btn:hover {
    background: rgba(77,159,245,0.08);
    border-color: var(--primary);
    color: var(--primary);
}

/* =============================================
   SKELETON LOADING
   ============================================= */
html[data-theme="light-only"] .skeleton {
    background: linear-gradient(90deg, #1a1a25 25%, #2a2a35 50%, #1a1a25 75%);
    background-size: 200% 100%;
}

/* =============================================
   SCROLLBAR
   ============================================= */
html[data-theme="light-only"] ::-webkit-scrollbar-track {
    background: #0a0a0f;
}
html[data-theme="light-only"] ::-webkit-scrollbar-thumb {
    background: #3a3a48;
}
html[data-theme="light-only"] ::-webkit-scrollbar-thumb:hover {
    background: #5a5a6a;
}

/* =============================================
   CHART BARS
   ============================================= */
html[data-theme="light-only"] .chart-bar .chart-value {
    color: #d0d0da;
}
html[data-theme="light-only"] .chart-bar .chart-label {
    color: #7a7a8a;
}
html[data-theme="light-only"] .bar-value {
    color: #b0b0bf;
}
html[data-theme="light-only"] .bar-label {
    color: #7a7a8a;
}

/* =============================================
   SETTINGS
   ============================================= */
html[data-theme="light-only"] .settings-content label {
    color: #b0b0bf;
}
html[data-theme="light-only"] .settings-content input[type="text"],
html[data-theme="light-only"] .settings-content input[type="number"],
html[data-theme="light-only"] .settings-content input[type="email"] {
    background: #16161f;
    border-color: #2a2a35;
    color: #e8e8ed;
}

/* =============================================
   FORM VALIDATION STATES
   ============================================= */
html[data-theme="light-only"] .field-error {
    color: var(--danger);
}
html[data-theme="light-only"] .form-error {
    color: var(--danger);
    background: rgba(248,113,113,0.1);
}

/* =============================================
   DASHBOARD VIEW INLINE CARDS (customer portal)
   ============================================= */
html[data-theme="light-only"] #dashboardView {
    background: #0a0a0f;
}

html[data-theme="light-only"] [style*="background:#fff"],
html[data-theme="light-only"] [style*="background: #fff"] {
    background: #12121a !important;
    border-color: #2a2a35 !important;
}

html[data-theme="light-only"] [style*="background:var(--gray-50)"],
html[data-theme="light-only"] [style*="background: var(--gray-50)"] {
    background: #16161f !important;
}

/* =============================================
   ANNOUNCEMENT BANNER
   ============================================= */
html[data-theme="light-only"] .announcement-card {
    background: #12121a;
    border-color: #2a2a35;
}
html[data-theme="light-only"] .announcement-date {
    color: #5a5a6a;
}

/* =============================================
   SETTINGS GRID
   ============================================= */
html[data-theme="light-only"] .settings-grid .card {
    background: #12121a;
}

/* =============================================
   EMPTY STATE
   ============================================= */
html[data-theme="light-only"] .empty-state {
    color: #7a7a8a;
}
html[data-theme="light-only"] .empty-state i {
    color: #3a3a48;
}
html[data-theme="light-only"] .empty-state h3 {
    color: #b0b0bf;
}

/* =============================================
   TOOLTIP
   ============================================= */
html[data-theme="light-only"] [data-tooltip]::after {
    background: #1a1a25;
    color: #e8e8ed;
}

/* =============================================
   PRINT — disable dark in print
   ============================================= */
@media print {
    html[data-theme="light-only"] {
        --white: #fff;
        --gray-50: #F8F9FA;
        --gray-100: #F1F3F5;
        --gray-200: #E9ECEF;
        --gray-300: #DEE2E6;
        --gray-800: #343A40;
        --gray-900: #212529;
        background: #fff;
        color: #212529;
    }
}