:root{--navy:#172554;--blue:#4361ee;--blue-dark:#3451d1;--bg:#f4f7fb;--text:#182230;--muted:#778197;--border:#e8edf5}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);font-size:14px}
.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,#172554,#111c42);padding:25px 16px;display:flex;flex-direction:column;z-index:1030;color:#fff}
.brand{display:flex;align-items:center;gap:11px;color:white;text-decoration:none;font-weight:800;font-size:18px;padding:0 10px 34px}.brand-icon{display:grid;place-items:center;width:37px;height:37px;background:#4361ee;border-radius:12px;font-size:18px}.brand-light{font-weight:400;color:#b8c7f5;margin-left:4px}
.nav-caption{font-size:10px;letter-spacing:1.6px;color:#8292bd;font-weight:700;padding:0 12px 10px}.side-link{display:flex;align-items:center;gap:13px;color:#c2cce5;text-decoration:none;padding:12px 13px;border-radius:10px;margin:3px 0;transition:.2s}.side-link i{font-size:18px;width:20px;text-align:center}.side-link:hover,.side-link.active{background:#30447e;color:white}.side-link.active{box-shadow:inset 3px 0 #8ba3ff}.sidebar-bottom{margin-top:auto}.user-mini{display:flex;align-items:center;gap:10px;border-top:1px solid #33416b;padding:18px 7px 12px}.avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#dbeafe;color:#1d4ed8;font-weight:800}.user-mini-text{display:flex;flex-direction:column;min-width:0}.user-mini-text strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-mini-text small{color:#aab8da;font-size:11px;text-transform:capitalize}.logout-link{margin-top:0}
.main-area{margin-left:250px;min-height:100vh;display:flex;flex-direction:column}.topbar{min-height:105px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:22px 32px;gap:15px}.topbar-eyebrow{font-size:10px;letter-spacing:1.4px;color:var(--muted);font-weight:700;margin-bottom:4px}.topbar h1{font-size:24px;font-weight:750;letter-spacing:-.6px;margin:0}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:9px;color:#596579}.status-dot{width:8px;height:8px;border-radius:50%;background:#16a34a}.topbar-user{font-weight:600}.menu-toggle{display:none}.page-content{padding:28px 32px;flex:1}.page-footer{display:flex;justify-content:space-between;padding:17px 32px;color:#929caf;font-size:11px;border-top:1px solid var(--border);background:#fff}
.welcome-card{background:linear-gradient(120deg,#263d89,#4361ee);border-radius:18px;padding:28px;color:#fff;position:relative;overflow:hidden}.welcome-card:after{content:"";position:absolute;width:230px;height:230px;border:35px solid #ffffff15;border-radius:50%;right:-45px;top:-90px}.welcome-card h2{font-size:23px;font-weight:750}.welcome-card p{color:#e0e7ff;margin:8px 0 0;max-width:520px}.section-label{font-size:11px;letter-spacing:1.2px;color:#8993a7;font-weight:800;margin:28px 0 13px}.stat-card,.panel-card{background:#fff;border:1px solid var(--border);border-radius:15px;box-shadow:0 5px 20px #23365d05}.stat-card{padding:20px;height:100%}.stat-top{display:flex;align-items:center;justify-content:space-between}.stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px}.stat-value{font-size:29px;font-weight:800;letter-spacing:-1px;margin-top:16px}.stat-label{color:var(--muted);font-size:12px;margin-top:3px}.panel-card{padding:22px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}.panel-heading h2{font-size:16px;font-weight:750;margin:0}.btn-primary{background:var(--blue);border-color:var(--blue)}.btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}.btn{border-radius:9px;font-weight:600;padding:9px 14px}.form-control,.form-select{border-color:#dfe5ef;border-radius:9px;padding:10px 12px;font-size:13px}.form-control:focus,.form-select:focus{border-color:#8ea2ff;box-shadow:0 0 0 .2rem #4361ee15}.form-label{font-size:12px;font-weight:700;color:#45516a;margin-bottom:7px}.form-text{font-size:11px;color:#8791a5}.table{font-size:12px;vertical-align:middle}.table thead th{background:#f7f9fc;color:#758097;font-size:10px;text-transform:uppercase;letter-spacing:.6px;padding:13px 12px;border-bottom:1px solid var(--border);white-space:nowrap}.table tbody td{padding:13px 12px;border-color:#edf0f6}.table tbody tr:hover{background:#fafbff}.badge-soft{display:inline-flex;padding:5px 9px;border-radius:7px;font-size:10px;font-weight:700}.badge-green{background:#e5f8ee;color:#16804a}.badge-amber{background:#fff3d9;color:#a16207}.badge-red{background:#fee9e7;color:#b42318}.badge-blue{background:#e8edff;color:#3451c7}.search-box{max-width:300px;position:relative}.search-box i{position:absolute;left:12px;top:11px;color:#8c96a9}.search-box input{padding-left:35px}.table-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:#8993a7;font-size:12px;padding-top:15px}.form-section-title{font-size:13px;font-weight:800;margin:5px 0 17px;padding-bottom:10px;border-bottom:1px solid var(--border)}.required-mark{color:#dc2626}.alert{border-radius:10px;font-size:13px}
@media(max-width:900px){.sidebar{width:220px}.main-area{margin-left:220px}.page-content{padding:22px 18px}.topbar{padding:20px 18px}}
@media(max-width:700px){.sidebar{transform:translateX(-100%);width:250px;transition:transform .25s}.sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vmax #0f172a66}.main-area{margin-left:0}.menu-toggle{display:inline-flex}.topbar{min-height:85px;padding:16px}.topbar h1{font-size:20px}.topbar-right{display:none}.page-content{padding:17px 12px}.page-footer{padding:14px;gap:10px;flex-wrap:wrap}.welcome-card{padding:22px}.stat-card{padding:15px}.stat-value{font-size:25px}}