:root{
  --navy-dark:#0b2447;
  --navy:#12345c;
  --navy-light:#19456b;
  --gold:#f2b705;
  --bg:#f4f6fa;
  --card-radius:14px;
}
*{box-sizing:border-box}
body{
  background:var(--bg);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  color:#1f2937;
}
a{text-decoration:none}

/* ---------- Sidebar ---------- */
.sidebar{
  min-height:100vh;
  width:260px;
  background:linear-gradient(180deg,var(--navy-dark) 0%, var(--navy) 100%);
  position:fixed;
  left:0;top:0;bottom:0;
  padding:28px 18px;
  display:flex;
  flex-direction:column;
  z-index:1000;
}
.sidebar .brand{
  text-align:center;
  margin-bottom:30px;
  color:#fff;
}
.sidebar .brand img{width:56px;height:56px;object-fit:contain;margin-bottom:8px}
.sidebar .brand .role-name{
  font-weight:700;font-size:1.15rem;color:var(--gold);
}
.sidebar .brand .role-sub{font-size:.8rem;color:#c9d6e3}
.sidebar-nav{flex:1}
.sidebar-nav a{
  display:flex;align-items:center;gap:10px;
  color:#dbe4f0;
  padding:12px 14px;
  border-radius:10px;
  margin-bottom:6px;
  font-size:.95rem;
  font-weight:500;
  transition:.15s;
}
.sidebar-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-nav a.active{background:var(--gold);color:#12294a;font-weight:700}
.sidebar-nav a.logout{color:#ff8a8a;margin-top:10px}
.sidebar-nav a.logout:hover{background:rgba(255,60,60,.12)}

/* ---------- Main content ---------- */
.main-content{margin-left:260px;padding:34px 40px;min-height:100vh}
.page-title{font-weight:800;color:var(--navy-dark);margin-bottom:2px}
.page-sub{color:#6b7280;margin-bottom:26px}

/* ---------- Dashboard cards ---------- */
.dash-card{
  background:#fff;border-radius:var(--card-radius);
  padding:24px;box-shadow:0 2px 10px rgba(20,40,80,.06);
  height:100%;
  border:1px solid #edf1f6;
}
.dash-card h5{font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dash-card p{color:#6b7280;font-size:.9rem;min-height:40px}
.dash-card .btn{width:100%;font-weight:600;border-radius:9px;padding:10px}

/* ---------- Cards / tables general ---------- */
.card{border-radius:var(--card-radius);border:1px solid #edf1f6;box-shadow:0 2px 10px rgba(20,40,80,.05)}
.table thead{background:var(--navy-dark);color:#fff}
.table thead th{border:none;font-weight:600;white-space:nowrap}
.table td{vertical-align:middle}
.btn-navy{background:var(--navy-dark);color:#fff;font-weight:600;border-radius:9px}
.btn-navy:hover{background:var(--navy);color:#fff}
.btn-gold{background:var(--gold);color:#12294a;font-weight:700;border-radius:9px}
.btn-gold:hover{background:#d9a300;color:#12294a}

.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy-dark),var(--navy-light));
}
.login-card{width:420px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.login-card .login-head{background:var(--navy-dark);color:#fff;padding:20px 26px;font-weight:700;font-size:1.15rem}
.login-card .login-body{padding:30px 26px}
.login-card .form-label{font-weight:600;font-size:.9rem}
.login-card .btn-submit{width:100%;background:var(--navy-dark);color:#fff;font-weight:700;padding:11px;border-radius:9px}
.login-card .btn-submit:hover{background:var(--navy)}
.login-card .switch-link{text-align:center;margin-top:14px;font-size:.88rem}

.badge{padding:6px 12px;font-weight:600;border-radius:20px;font-size:.78rem}

@media (max-width:900px){
  .sidebar{width:100%;position:relative;min-height:auto}
  .main-content{margin-left:0;padding:20px}
}