:root{
  --primary:#0747a6;
  --primary-light:#1565d8;
  --bg:#f4f6f9;
  --sidebar-w:230px;
  --topbar-h:58px;
  --radius:12px;
}
*{box-sizing:border-box}
body{font-family:'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);margin:0;color:#1f2430}

/* ===== Login ===== */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0747a6,#1565d8);padding:20px}
.login-box{max-width:420px;width:100%}
.login-logo{text-align:center;color:#fff;margin-bottom:18px}
.login-logo i{font-size:42px;color:#ffc400}
.login-logo h4{margin:8px 0 2px;font-weight:700}
.login-logo p{margin:0;opacity:.85;font-size:13px}
.login-card{border:none;border-radius:var(--radius);box-shadow:0 16px 40px rgba(0,0,0,.25)}
.login-box-msg{text-align:center;color:#666;margin-bottom:18px;font-size:14px}

/* ===== Topbar ===== */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);background:var(--primary);z-index:1030;display:flex;align-items:center;padding:0 16px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.topbar-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16px;margin-left:8px}
.topbar-brand i{color:#ffc400;font-size:20px}

/* ===== Sidebar ===== */
.sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:var(--sidebar-w);background:#0b2e63;overflow-y:auto;z-index:1020;transition:transform .25s}
.sidebar-menu{list-style:none;margin:0;padding:14px 0}
.sidebar-menu li a{display:flex;align-items:center;gap:10px;padding:12px 22px;color:#c7d4ea;text-decoration:none;font-size:14px;border-left:3px solid transparent;transition:.15s}
.sidebar-menu li a i{width:18px;text-align:center}
.sidebar-menu li a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar-menu li a.active{background:rgba(255,196,0,.12);border-left-color:#ffc400;color:#ffc400;font-weight:600}

@media(max-width:991px){
  .sidebar{transform:translateX(-100%)}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .content-wrapper,.app-footer{margin-left:0!important}
}

/* ===== Content ===== */
.content-wrapper{margin-left:var(--sidebar-w);margin-top:var(--topbar-h);min-height:calc(100vh - var(--topbar-h));padding-bottom:30px}
.app-footer{margin-left:var(--sidebar-w);text-align:center;padding:14px;font-size:12px;color:#888;border-top:1px solid #e3e6ee}

/* ===== Cards ===== */
.card{border:none;border-radius:var(--radius);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.card-header{background:#fff;border-bottom:1px solid #eef0f4;border-radius:var(--radius) var(--radius) 0 0!important;font-weight:600}

.stat-card{border:none;border-radius:var(--radius);padding:20px;color:#fff;position:relative;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.stat-card i.bg-icon{position:absolute;right:14px;top:14px;font-size:38px;opacity:.25}
.stat-card .stat-value{font-size:28px;font-weight:700}
.stat-card .stat-label{font-size:13px;opacity:.9}

.status-badge{font-weight:600;font-size:12px;padding:6px 10px}
.required:after{content:' *';color:#dc3545}