/* =================================================================
   THEME-LIGHT.CSS — Light Mode Theme Override
   =================================================================
   Applied when the user explicitly selects "Light" from Display
   Preferences.  Scoped under  html.light-mode  so it only activates
   when the JS toggler adds the class.

   This theme changes only the LEFT SIDEBAR and the PAGE-HEADER
   from their default blue gradients to a clean white / light-grey
   palette with dark typography.
   ================================================================= */

/* -----------------------------------------------------------------
   SIDEBAR — Light Override
   ----------------------------------------------------------------- */
html.light-mode .sidebar {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    color: #1e293b !important;
    border-right: 1px solid #cbd5e1;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
}

html.light-mode .sidebar .nav-link {
    color: #475569 !important;
}

html.light-mode .sidebar .nav-link:hover,
html.light-mode .sidebar .nav-link.active {
    color: #1e293b !important;
    background-color: rgba(59, 130, 246, 0.10) !important;
}

html.light-mode .sidebar .nav-link.active {
    font-weight: 600;
    border-left: 3px solid #3b82f6;
}

/* Sidebar logo — remove white inversion so original colours show */
html.light-mode .sidebar .sidebar-logo {
    filter: none !important;
}

/* Sidebar bottom utilities / user section */
html.light-mode .sidebar .text-white,
html.light-mode .sidebar .text-light {
    color: #334155 !important;
}

html.light-mode .sidebar hr {
    border-color: #cbd5e1 !important;
}


/* -----------------------------------------------------------------
   PAGE-HEADER — Light Override
   ----------------------------------------------------------------- */
html.light-mode .page-header {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .page-header h1,
html.light-mode .page-header h2,
html.light-mode .page-header h3,
html.light-mode .page-header .page-title {
    color: #1e293b !important;
    text-shadow: none !important;
}

html.light-mode .page-header .text-muted,
html.light-mode .page-header p,
html.light-mode .page-subtitle {
    color: #64748b !important;
}

html.light-mode .page-header .btn-light {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

html.light-mode .page-header .btn-light:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
}

html.light-mode .page-header .btn-outline-light {
    color: #475569 !important;
    border-color: #94a3b8 !important;
}

html.light-mode .page-header .btn-outline-light:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

html.light-mode .page-header .btn-secondary {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

html.light-mode .page-header .btn-secondary:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

/* Icons inside page-header */
html.light-mode .page-header i,
html.light-mode .page-header .fas,
html.light-mode .page-header .far,
html.light-mode .page-header .fab {
    color: #3b82f6 !important;
}

/* -----------------------------------------------------------------
   TOP NAVBAR — Light Override
   ----------------------------------------------------------------- */
html.light-mode .navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}