:root {
  --primary: #1E3A8A;
  --primary-dark: #172554;
  --primary-mid: #24409c;
  --secondary: #FBBF24;
  --secondary-soft: #FDE68A;
  --accent-teal: #0D9488;
  --accent-violet: #7C3AED;
  --accent-rose: #E11D48;
  --accent-sky: #0284C7;
  --neutral-dark: #334155;
  --bg-light: #F7F8FC;
  --ease: cubic-bezier(.22,.9,.35,1);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg-light);
  color: var(--neutral-dark);
}
a { text-decoration: none; color: inherit; }

@keyframes fadeInUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes softPulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }

/* ===== Layout ===== */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 264px; flex-shrink: 0; color: #fff;
  background: linear-gradient(165deg, #1E3A8A 0%, #1a3372 45%, #101f4a 100%);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  box-shadow: 4px 0 24px rgba(15,26,66,.18);
}
.sidebar::-webkit-scrollbar, .sidebar nav::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb, .sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 10px; }

.sidebar-brand {
  padding: 20px 18px; display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.5px;
  position: relative; border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand .brand-icon {
  width: 34px; height: 34px; border-radius: 11px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(251,191,36,.28), rgba(251,191,36,.08));
  box-shadow: 0 0 0 1px rgba(251,191,36,.25) inset;
}
.sidebar-brand .brand-icon img { width:20px; height:20px; object-fit:contain; }

.sidebar-user { padding: 14px 16px; margin: 10px 12px 4px; border-radius: 14px; background: rgba(255,255,255,.05); }
.sidebar-user .avatar-ring {
  width:40px; height:40px; border-radius:99px; padding:2px; flex-shrink:0;
  background: linear-gradient(135deg, var(--secondary), rgba(251,191,36,.25));
  display:flex; align-items:center; justify-content:center;
}
.sidebar-user .avatar-inner {
  width:100%; height:100%; border-radius:99px; background:#172554; color:#FBBF24;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
}
.sidebar-user .role-badge { background: var(--secondary); color: var(--primary-dark); font-weight:800; font-size:9.5px; padding:2px 8px; border-radius:99px; text-transform:uppercase; letter-spacing:.4px; }

.sidebar nav { flex:1; padding: 12px 10px; overflow-y:auto; }
.sidebar .group-title {
  font-size:10px; font-weight:700; color:#93c5fd; text-transform:uppercase; letter-spacing:1.2px;
  padding: 16px 10px 6px; opacity:.75;
}
.sidebar .menu-item {
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:12px; font-size:13.5px; font-weight:600;
  color:#dbe4fb; margin-bottom:3px; position:relative; transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.sidebar .menu-item .menu-icon {
  width:28px; height:28px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06); transition: background .18s var(--ease), color .18s var(--ease);
  font-size: 12.5px;
}
.sidebar .menu-item:hover { background: rgba(255,255,255,.08); color:#fff; transform: translateX(3px); }
.sidebar .menu-item:hover .menu-icon { background: rgba(255,255,255,.14); }
.sidebar .menu-item.active {
  background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(251,191,36,.04));
  color: var(--secondary); font-weight:700;
}
.sidebar .menu-item.active .menu-icon { background: rgba(251,191,36,.22); color: var(--secondary); }
.sidebar .menu-item.active::before {
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:4px; height:20px; border-radius:99px; background: var(--secondary);
  box-shadow: 0 0 10px rgba(251,191,36,.7);
}

.sidebar-footer { padding: 14px 16px 18px; }
.btn-logout {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background: linear-gradient(135deg, #dc2626, #b91c1c); color:#fff; padding:10px; border-radius:12px;
  font-weight:700; font-size:12.5px; border:none; cursor:pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-logout:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(220,38,38,.35); }

.main-content { flex:1; padding: 24px; max-width: 100%; overflow-x:hidden; }
.topbar-mobile { display:none; }

/* ===== Cards & UI atoms ===== */
.page-title { font-size: 23px; font-weight: 800; color: var(--primary); margin: 0 0 4px; letter-spacing:-.2px; }
.page-subtitle { color:#64748b; font-size:13px; margin:0 0 20px; }
.card {
  background:#fff; border-radius:16px; box-shadow:0 2px 10px rgba(30,41,59,.06); border:1px solid #f1f5f9; padding:20px;
  transition: box-shadow .2s var(--ease);
  animation: fadeInUp .35s var(--ease) both;
}
.card:hover { box-shadow: 0 8px 24px rgba(30,41,59,.09); }
.card + .card { margin-top: 16px; }

.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:20px; }
.kpi-card {
  background:#fff; border-radius:18px; box-shadow:0 2px 10px rgba(30,41,59,.06); border:1px solid #f1f5f9;
  padding:18px; position:relative; overflow:hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  animation: fadeInUp .4s var(--ease) both;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30,58,138,.14); }
.kpi-card .kpi-icon {
  width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:17px; margin-bottom:10px; color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-mid));
  box-shadow: 0 6px 14px rgba(30,58,138,.28);
}
.kpi-card.accent-teal .kpi-icon { background: linear-gradient(135deg, var(--accent-teal), #14b8a6); box-shadow:0 6px 14px rgba(13,148,136,.28); }
.kpi-card.accent-gold .kpi-icon { background: linear-gradient(135deg, #f59e0b, var(--secondary)); box-shadow:0 6px 14px rgba(245,158,11,.28); }
.kpi-card.accent-violet .kpi-icon { background: linear-gradient(135deg, var(--accent-violet), #a78bfa); box-shadow:0 6px 14px rgba(124,58,237,.28); }
.kpi-card.accent-rose .kpi-icon { background: linear-gradient(135deg, var(--accent-rose), #fb7185); box-shadow:0 6px 14px rgba(225,29,72,.28); }
.kpi-card.accent-sky .kpi-icon { background: linear-gradient(135deg, var(--accent-sky), #38bdf8); box-shadow:0 6px 14px rgba(2,132,199,.28); }
.kpi-card .label { font-size:11px; text-transform:uppercase; color:#64748b; font-weight:700; letter-spacing:.3px; }
.kpi-card .value { font-size:23px; font-weight:800; color: var(--primary); margin-top:3px; letter-spacing:-.3px; }

.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px; font-weight:700; font-size:12.5px; border:none; cursor:pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-mid)); color:#fff; box-shadow:0 4px 12px rgba(30,58,138,.22); }
.btn-primary:hover { box-shadow:0 8px 18px rgba(30,58,138,.32); transform: translateY(-1px); }
.btn-secondary { background: linear-gradient(135deg, var(--secondary), #f59e0b); color: var(--primary-dark); box-shadow:0 4px 12px rgba(245,158,11,.22); }
.btn-secondary:hover { box-shadow:0 8px 18px rgba(245,158,11,.32); transform: translateY(-1px); }
.btn-gray { background:#f1f5f9; color:#334155; }
.btn-gray:hover { background:#e2e8f0; }
.btn-danger { background: linear-gradient(135deg, #dc2626, #b91c1c); color:#fff; }
.btn-danger:hover { box-shadow:0 8px 18px rgba(220,38,38,.28); transform: translateY(-1px); }
.btn-sm { padding:5px 10px; font-size:11.5px; border-radius:8px; }

table { width:100%; border-collapse: collapse; font-size:13px; }
table th { background:#f8fafc; text-align:left; padding:10px 12px; font-size:11px; text-transform:uppercase; color:#64748b; border-bottom:2px solid #e2e8f0; }
table td { padding:10px 12px; border-bottom:1px solid #f1f5f9; }
table tr { transition: background .15s var(--ease); }
table tr:hover td { background:#f8fafc; }

.form-group { margin-bottom: 14px; }
.form-group label { display:block; font-weight:700; font-size:12.5px; margin-bottom:5px; color:#334155; }
.form-control {
  width:100%; padding:9px 12px; border:1px solid #cbd5e1; border-radius:10px; font-size:13px; font-family:inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-control:focus { outline:none; border-color: var(--primary); box-shadow:0 0 0 3px rgba(30,58,138,.12); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:10.5px; font-weight:700; text-transform:uppercase; }
.badge::before { content:''; width:6px; height:6px; border-radius:99px; background:currentColor; opacity:.85; }
.badge-green { background:#dcfce7; color:#15803d; }
.badge-yellow { background:#fef9c3; color:#a16207; }
.badge-red { background:#fee2e2; color:#b91c1c; }
.badge-blue { background:#dbeafe; color:#1d4ed8; }
.badge-gray { background:#f1f5f9; color:#475569; }

.alert { padding:12px 16px; border-radius:12px; font-size:13px; margin-bottom:16px; font-weight:600; animation: fadeInUp .3s var(--ease) both; }
.alert-success { background:#dcfce7; color:#15803d; }
.alert-error { background:#fee2e2; color:#b91c1c; }
.alert-info { background:#dbeafe; color:#1d4ed8; }

.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.6); backdrop-filter: blur(2px); z-index:100; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.show { display:flex; }
.modal-box { background:#fff; border-radius:18px; max-width:560px; width:100%; padding:22px; max-height:90vh; overflow-y:auto; animation: fadeInUp .25s var(--ease) both; }
.modal-box h3 { margin-top:0; color:var(--primary); }

@media (max-width: 860px) {
  .sidebar { position: fixed; z-index: 50; transform: translateX(-100%); transition: transform .3s var(--ease); }
  .sidebar.open { transform: translateX(0); }
  .topbar-mobile { display:flex; align-items:center; justify-content:space-between; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; padding:12px 16px; position: sticky; top:0; z-index:40; }
  .form-row { grid-template-columns: 1fr; }
}

@media print {
  .sidebar, .topbar-mobile, .no-print { display:none !important; }
  .main-content { padding:0; }
}