/* LRIMS — Custom Styles */
:root {
    --sidebar-width: 250px;
    --sidebar-bg: #1a2942;
    --sidebar-hover: #253b5e;
    --sidebar-active: #2d6a4f;
    --accent: #0d6efd;
    --topbar-h: 56px;
}

body { background: #f0f4f8; font-family: 'Segoe UI', sans-serif; }

/* ── Sidebar ── */
#sidebar {
    position: fixed; top: 0; left: 0;
    width: var(--sidebar-width); height: 100vh;
    background: var(--sidebar-bg); overflow-y: auto;
    z-index: 1000; display: flex; flex-direction: column;
}
#sidebar .brand {
    padding: 16px 20px; background: #111e32;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
#sidebar .brand .hosp-name { font-size:.72rem; color:#8fa8c8; text-transform:uppercase; letter-spacing:.6px; }
#sidebar .brand .sys-name  { font-size:.95rem; color:#e2e8f0; font-weight:600; line-height:1.3; }
#sidebar .nav-section-label { font-size:.68rem; text-transform:uppercase; letter-spacing:1px; color:#6b87a8; padding:14px 20px 6px; }
#sidebar .nav-link {
    color: #c8d8ea; padding: 10px 20px; display:flex; align-items:center; gap:10px;
    font-size:.88rem; transition:background .15s,color .15s; border-left:3px solid transparent;
}
#sidebar .nav-link i { font-size:1rem; width:18px; text-align:center; }
#sidebar .nav-link:hover { background: var(--sidebar-hover); color:#fff; }
#sidebar .nav-link.active { background: var(--sidebar-active); color:#fff; border-left-color:#52b788; }
#sidebar .alert-badge { background:#dc3545; color:#fff; font-size:.7rem; padding:2px 6px; border-radius:10px; }
#sidebar .nav-user {
    margin-top:auto; padding:12px 16px; background:#111e32;
    border-top:1px solid rgba(255,255,255,.08); font-size:.82rem; color:#8fa8c8;
}

/* ── Main Content ── */
#main { margin-left: var(--sidebar-width); min-height:100vh; }
.top-bar {
    background:#fff; height:var(--topbar-h); padding:0 24px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid #e2e8f0; position:sticky; top:0; z-index:999;
}
.page-content { padding: 24px; }

/* ── KPI Cards ── */
.kpi-card { border:none; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:transform .15s; }
.kpi-card:hover { transform:translateY(-2px); }
.kpi-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.kpi-num  { font-size:2rem; font-weight:700; line-height:1; }
.kpi-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:#6c757d; }

/* ── Stock Level Bar ── */
.stock-bar-wrap { height:6px; background:#e9ecef; border-radius:3px; overflow:hidden; }
.stock-bar { height:100%; border-radius:3px; transition:width .3s; }

/* ── Status Badges ── */
.badge-adequate { background:#d1fae5; color:#065f46; }
.badge-low      { background:#fef9c3; color:#713f12; }
.badge-critical { background:#fee2e2; color:#991b1b; }
.badge-stockout { background:#dc3545; color:#fff; }

/* ── Tables ── */
.table-card { border:none; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden; }
.table-card .table { margin-bottom:0; }
.table th { background:#f8fafc; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; color:#475569; }
.table td { vertical-align:middle; font-size:.88rem; }

/* ── Alerts ── */
.alert-item { border-left:4px solid; padding:12px 16px; border-radius:0 8px 8px 0; margin-bottom:8px; }
.alert-danger  { border-color:#dc3545; background:#fff5f5; }
.alert-warning { border-color:#fd7e14; background:#fffbf0; }

/* ── Charts ── */
.chart-card { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); padding:20px; }

/* ── Login Page ── */
.login-wrap { min-height:100vh; background:linear-gradient(135deg,#1a2942 0%,#0d6efd 100%); display:flex; align-items:center; justify-content:center; }
.login-card { width:420px; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.3); }

/* ── Expiry Indicator ── */
.expiry-ok      { color:#198754; }
.expiry-warn    { color:#fd7e14; font-weight:600; }
.expiry-danger  { color:#dc3545; font-weight:700; }

/* ── Responsive ── */
@media (max-width:768px) {
    #sidebar { transform:translateX(-100%); }
    #main    { margin-left:0; }
}