:root {
  --navy: #0f2744;
  --navy-2: #173456;
  --accent: #1d6b8a;
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;
  --shadow: 0 10px 30px rgba(15, 39, 68, 0.08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 270px; background: var(--navy); color: #dbeafe; padding: 1.1rem .8rem; position: sticky; top: 0; height: 100vh; overflow: auto; transition: margin .2s ease; }
.sidebar .brand { display: flex; gap: .7rem; align-items: center; padding: .4rem .5rem 1rem; }
.logo { width: 42px; height: 42px; border-radius: 12px; background: #1d6b8a; display: grid; place-items: center; color: #fff; font-weight: 800; }
.brand small { display: block; color: #94a3b8; }
.nav-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #7dd3fc; margin: 1rem .5rem .3rem; }
.sidebar nav a { display: flex; gap: .6rem; align-items: center; color: #dbeafe; text-decoration: none; padding: .55rem .7rem; border-radius: 10px; }
.sidebar nav a:hover, .sidebar nav a.active { background: var(--navy-2); color: #fff; }
.main { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.2rem; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.crumbs { color: var(--muted); }
.userbox { margin-left: auto; display: flex; gap: .8rem; align-items: center; }
.content { padding: 1.2rem; }
.page-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.55rem; margin: 0; }
.page-head p { margin: .2rem 0 0; color: var(--muted); }
.card-soft { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; box-shadow: var(--shadow); }
.card-soft h3 { font-size: 1rem; margin-bottom: .8rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .9rem; display: flex; gap: .7rem; align-items: center; box-shadow: var(--shadow); }
.kpi i { font-size: 1.4rem; color: var(--accent); }
.kpi span { display: block; color: var(--muted); font-size: .8rem; }
.kpi strong { font-size: 1.2rem; }
.kpi.success i { color: #15803d; }
.kpi.warning i { color: #b45309; }
.kpi.danger i { color: #b91c1c; }
.mini-stat { background: #fff; border-radius: 16px; padding: 1rem; border: 1px solid var(--line); }
.badge-status { display: inline-block; border-radius: 999px; padding: .2rem .55rem; font-size: .75rem; font-weight: 600; }
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-secondary { background: #e2e8f0; color: #334155; }
.actions a, .actions .linkish { border: 0; background: transparent; color: var(--accent); margin-right: .4rem; cursor: pointer; }
.toolbar { display: flex; gap: .4rem; flex-wrap: wrap; }
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filter-bar .form-control, .filter-bar .form-select { width: auto; min-width: 160px; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.click-row { cursor: pointer; }
.report-tile { display: flex; gap: .7rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem; text-decoration: none; color: var(--text); box-shadow: var(--shadow); }
.auth-body { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, #0f2744, #1d6b8a); }
.auth-card { width: min(420px, 92vw); background: #fff; border-radius: 18px; padding: 1.5rem; }
.auth-brand { text-align: center; margin-bottom: 1rem; }
.auth-brand .logo { margin: 0 auto .6rem; }
.hint { margin-top: .8rem; color: var(--muted); font-size: .85rem; }
body.collapsed .sidebar { margin-left: -270px; }
@media (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 768px) {
  .sidebar { position: fixed; z-index: 30; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .page-head { flex-direction: column; }
}