/*
 * 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:
 *   Bg page:      #f1f5f9 / #f0f4ff
 *   Card bg:      #ffffff
 *   Card shadow:  0 1px 4px rgba(0,0,0,.06)
 *   Card radius:  12px
 *   Text primary: #1e293b
 *   Text muted:   #6b7280 / #9ca3af
 *   Border/line:  #e2e8f0 / #f1f5f9
 *   Accents:      #3b82f6 (blue)  #22c55e (green)  #f59e0b (amber)
 *                 #8b5cf6 (violet) #f43f5e (rose)   #06b6d4 (cyan)
 *                 #ec4899 (pink)
 */

/* ==== Container base (light only) ==================================== */
.dashboard-container.light {
    background: #f1f5f9 !important;
    background-image: none !important;
    color: #1e293b !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: #1e293b !important;
    font-weight: 800 !important;
}
.dashboard-container.light h2,
.dashboard-container.light h3 {
    color: #1e293b !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-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    color: #1e293b !important;
    transition: box-shadow .2s, transform .2s !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: #cbd5e1 !important;
}
.dashboard-container.light .stat-value,
.dashboard-container.light .kpi-value,
.dashboard-container.light .metric-value {
    color: #1e293b !important;
    font-weight: 700 !important;
}
.dashboard-container.light .stat-label,
.dashboard-container.light .kpi-label,
.dashboard-container.light .metric-label {
    color: #64748b !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: #1e293b !important;
}
.dashboard-container.light .card-title,
.dashboard-container.light .panel-title,
.dashboard-container.light .section-title {
    color: #1e293b !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: #2563eb !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: #1e293b !important;
    border-color: #cbd5e1 !important;
}
.dashboard-container.light .theme-btn.active {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !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: #3b82f6 !important;
    color: #fff !important;
    border: none !important;
}
.dashboard-container.light .btn-primary:hover { background: #2563eb !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; }