/*
 * dashboards-hr-theme.css
 * HR-dashboard-style LIGHT theme override for Outpatient, Inpatient,
 * Laboratory and Pharmacy dashboards.
 *
 * IMPORTANT: every rule is scoped to `.dashboard-container.light ...` so
 * the existing dark themes (`.lab-dark`, `.original-dark`) are left
 * completely untouched — they still look exactly like they did before.
 * Users can still switch to dark via the theme-switcher buttons and their
 * choice persists in localStorage.
 *
 * Light-theme palette - aligned with the login screen (resources/css/login.css)
 * and the system theme (resources/css/chmis-theme.css):
 *   Bg page:      #F1F5F9 / #EEF3FA
 *   Card bg:      #ffffff
 *   Card shadow:  0 1px 4px rgba(0,0,0,.06)
 *   Card radius:  12px
 *   Text primary: #12325F  (CHMIS navy)
 *   Text muted:   #6b7280 / #9ca3af
 *   Border/line:  #E2E8F0 / #F1F5F9
 *   Accent:       #1E63B8  (CHMIS blue)
 *
 * Status colours are deliberately NOT remapped: #22c55e / #16a34a (normal),
 * #dc2626 / #f43f5e (critical), #f59e0b / #d97706 (pending) and the badge
 * tints signal state and must stay distinguishable from the brand colour.
 */

/* ==== Container base (light only) ==================================== */
.dashboard-container.light {
    background: #F1F5F9 !important;
    background-image: none !important;
    color: #12325F !important;
    font-family: 'Inter','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}

/* ==== Header ========================================================= */
.dashboard-container.light .header {
    border-bottom: 1px solid #E2E8F0 !important;
    padding-bottom: 16px !important;
    background: transparent !important;
}
.dashboard-container.light h1,
.dashboard-container.light .header h1 {
    color: #12325F !important;
    font-weight: 800 !important;
}
.dashboard-container.light h2,
.dashboard-container.light h3 {
    color: #12325F !important;
}
.dashboard-container.light .header p,
.dashboard-container.light .header .subtitle,
.dashboard-container.light .subtitle {
    color: #64748b !important;
}

/* ==== KPI / stat cards =============================================== */
.dashboard-container.light .stat-card,
.dashboard-container.light .kpi-card,
.dashboard-container.light .metric-card {
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-left-width: 4px !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    color: #12325F !important;
    transition: box-shadow .2s, transform .2s !important;
}

/*
 * Solid coloured left rail per card, rotating through the palette - the same
 * device the HR dashboard uses (.hrd-kpi-card:nth-child(n)). Without it the
 * cards were white-on-white with only a hairline border and read as washed out.
 *
 * This lives here rather than in the individual dashboard views because
 * `.dashboard-container.light .stat-card` (three classes, !important) outranks
 * any `.stat-card.<variant>` rule a view can declare - accents set there were
 * silently ignored in light mode.
 */
.dashboard-container.light .stat-card:nth-child(5n+1),
.dashboard-container.light .kpi-card:nth-child(5n+1),
.dashboard-container.light .metric-card:nth-child(5n+1) { border-left-color: #1E63B8 !important; }

.dashboard-container.light .stat-card:nth-child(5n+2),
.dashboard-container.light .kpi-card:nth-child(5n+2),
.dashboard-container.light .metric-card:nth-child(5n+2) { border-left-color: #16a34a !important; }

.dashboard-container.light .stat-card:nth-child(5n+3),
.dashboard-container.light .kpi-card:nth-child(5n+3),
.dashboard-container.light .metric-card:nth-child(5n+3) { border-left-color: #d97706 !important; }

.dashboard-container.light .stat-card:nth-child(5n+4),
.dashboard-container.light .kpi-card:nth-child(5n+4),
.dashboard-container.light .metric-card:nth-child(5n+4) { border-left-color: #7C3AED !important; }

.dashboard-container.light .stat-card:nth-child(5n+5),
.dashboard-container.light .kpi-card:nth-child(5n+5),
.dashboard-container.light .metric-card:nth-child(5n+5) { border-left-color: #E11D48 !important; }

.dashboard-container.light .stat-card:hover,
.dashboard-container.light .kpi-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
    transform: translateY(-1px) !important;
    /* border-color would reset the accent rail - only the other three edges. */
    border-top-color: #cbd5e1 !important;
    border-right-color: #cbd5e1 !important;
    border-bottom-color: #cbd5e1 !important;
}
.dashboard-container.light .stat-value,
.dashboard-container.light .kpi-value,
.dashboard-container.light .metric-value {
    color: #12325F !important;
    font-weight: 700 !important;
}
.dashboard-container.light .stat-label,
.dashboard-container.light .kpi-label,
.dashboard-container.light .metric-label {
    /* #64748b read as washed out next to the solid card accents; #334155 is
     * the same value HR's .hrd-kpi-label uses. */
    color: #334155 !important;
    font-weight: 500 !important;
}
.dashboard-container.light .stat-change,
.dashboard-container.light .kpi-change {
    color: #64748b !important;
}
.dashboard-container.light .stat-change.up,
.dashboard-container.light .kpi-change.up { color: #16a34a !important; }
.dashboard-container.light .stat-change.down,
.dashboard-container.light .kpi-change.down { color: #dc2626 !important; }

/* ==== Panels / chart cards =========================================== */
.dashboard-container.light .card,
.dashboard-container.light .panel,
.dashboard-container.light .chart-card,
.dashboard-container.light .dashboard-card {
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    color: #12325F !important;
}
.dashboard-container.light .card-title,
.dashboard-container.light .panel-title,
.dashboard-container.light .section-title {
    color: #12325F !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

/* ==== Tables ========================================================= */
.dashboard-container.light table,
.dashboard-container.light .data-table {
    background: transparent !important;
    color: #374151 !important;
    border-collapse: collapse !important;
}
.dashboard-container.light table th,
.dashboard-container.light .data-table th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    text-align: left !important;
}
.dashboard-container.light table td,
.dashboard-container.light .data-table td {
    color: #374151 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: transparent !important;
}
.dashboard-container.light table tbody tr:hover td {
    background: #f8fafc !important;
}
.dashboard-container.light table tr:last-child td {
    border-bottom: none !important;
}

/* ==== List items / rows ============================================= */
.dashboard-container.light .list-item,
.dashboard-container.light .pending-item,
.dashboard-container.light .recent-item {
    background: transparent !important;
    border-bottom: 1px solid #F1F5F9 !important;
    color: #374151 !important;
}
.dashboard-container.light .list-item:hover {
    background: #f8fafc !important;
}

/* ==== Badges / chips ================================================ */
.dashboard-container.light .badge,
.dashboard-container.light .chip,
.dashboard-container.light .status-badge,
.dashboard-container.light .tag {
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 9px !important;
    border: none !important;
}
.dashboard-container.light .badge.green,  .dashboard-container.light .badge-green,
.dashboard-container.light .status-normal, .dashboard-container.light .status-completed,
.dashboard-container.light .status-approved {
    background: #dcfce7 !important; color: #16a34a !important;
}
.dashboard-container.light .badge.red,    .dashboard-container.light .badge-red,
.dashboard-container.light .status-critical, .dashboard-container.light .status-abnormal,
.dashboard-container.light .status-rejected {
    background: #fee2e2 !important; color: #dc2626 !important;
}
.dashboard-container.light .badge.orange, .dashboard-container.light .badge-orange,
.dashboard-container.light .status-pending, .dashboard-container.light .status-warning {
    background: #fef3c7 !important; color: #d97706 !important;
}
.dashboard-container.light .badge.blue,   .dashboard-container.light .badge-blue,
.dashboard-container.light .status-info {
    background: #dbeafe !important; color: #12325F !important;
}
.dashboard-container.light .badge.gray,   .dashboard-container.light .badge-gray {
    background: #F1F5F9 !important; color: #64748b !important;
}

/* ==== Theme switcher buttons (light) ================================ */
.dashboard-container.light .theme-btn {
    background: #ffffff !important;
    color: #64748b !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
}
.dashboard-container.light .theme-btn:hover {
    background: #f8fafc !important;
    color: #12325F !important;
    border-color: #cbd5e1 !important;
}
.dashboard-container.light .theme-btn.active {
    background: #1E63B8 !important;
    color: #ffffff !important;
    border-color: #1E63B8 !important;
}

/* ==== Buttons ======================================================== */
.dashboard-container.light .btn,
.dashboard-container.light .action-btn,
.dashboard-container.light button.primary {
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.dashboard-container.light .btn-primary,
.dashboard-container.light button.primary {
    background: #1E63B8 !important;
    color: #fff !important;
    border: none !important;
}
.dashboard-container.light .btn-primary:hover { background: #12325F !important; }

/* ==== Progress bars ================================================== */
.dashboard-container.light .progress,
.dashboard-container.light .progress-bar-outer,
.dashboard-container.light .bar-outer {
    background: #F1F5F9 !important;
    border-radius: 4px !important;
    height: 6px !important;
    overflow: hidden !important;
}
.dashboard-container.light .progress-fill,
.dashboard-container.light .bar-fill {
    height: 100% !important;
    border-radius: 4px !important;
    transition: width .4s ease !important;
}

/* ==== Scrollbars (light only) ======================================== */
.dashboard-container.light ::-webkit-scrollbar { width: 8px; height: 8px; }
.dashboard-container.light ::-webkit-scrollbar-track { background: transparent; }
.dashboard-container.light ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dashboard-container.light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }