/* ============ Login ============ */
.login-wrap { min-height:100vh; display:flex; }
.login-side { flex: 1.1; background: linear-gradient(160deg, var(--navy-900), var(--navy-800) 60%, var(--blue-600) 140%); color:#fff; padding: 60px; display:flex; flex-direction:column; justify-content:center; position:relative; }
.login-side img.logo { height:40px; margin-bottom:34px; }
.login-side h2 { font-size:28px; max-width:420px; }
.login-side p { color:rgba(255,255,255,.78); max-width:420px; }
.login-side .feat { display:flex; gap:12px; margin-top:10px; align-items:flex-start; }
.login-side .feat .dot { width:8px; height:8px; border-radius:50%; background: var(--blue-400); margin-top:8px; flex-shrink:0; }
.login-form-side { flex:1; display:flex; align-items:center; justify-content:center; padding: 40px; background:#fff; }
.login-box { width:100%; max-width: 380px; }
.login-box h3 { font-size:21px; }
.login-box .field { margin-bottom:16px; }
.login-box label { display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color: var(--gray-700); }
.login-box input { width:100%; border:1px solid var(--gray-300); border-radius: var(--radius-sm); padding: 11px 13px; font-size:14.5px; font-family:inherit; }
.login-error { background:#fbebe9; color:var(--red-600); border-radius: var(--radius-sm); padding:10px 12px; font-size:13px; margin-bottom:14px; display:none; }
.login-back { display:inline-block; margin-top:22px; font-size:13px; color: var(--blue-600); font-weight:600; }

/* ============ App shell ============ */
.app-shell { display:flex; min-height:100vh; }
.sidebar { width: 246px; background: var(--navy-900); color: rgba(255,255,255,.82); flex-shrink:0; display:flex; flex-direction:column; }
.sidebar .brand { padding: 18px 20px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar .brand img { height:28px; }
.sidebar nav { flex:1; overflow-y:auto; padding: 12px 10px; }
.sidebar .group-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.35); padding: 14px 12px 6px; }
.sidebar a.nav-link { display:flex; align-items:center; gap:10px; padding: 9px 12px; border-radius: 8px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,.75); margin-bottom:2px; }
.sidebar a.nav-link:hover { background: rgba(255,255,255,.06); color:#fff; }
.sidebar a.nav-link.active { background: var(--blue-500); color:#fff; font-weight:600; }
.sidebar .ico { width:18px; text-align:center; font-size:14px; }
.sidebar .foot { padding: 14px 18px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:rgba(255,255,255,.5); }

.main-col { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { height: 62px; background:#fff; border-bottom:1px solid var(--gray-300); display:flex; align-items:center; justify-content:space-between; padding: 0 24px; }
.topbar .who { display:flex; align-items:center; gap:10px; }
.topbar .avatar { width:34px; height:34px; border-radius:50%; background:var(--blue-500); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.topbar .who-name { font-size:13.5px; font-weight:600; }
.topbar .who-role { font-size:11.5px; color:var(--gray-500); }
.topbar .scope-chip { background: var(--blue-50); color: var(--blue-600); font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; }

.view-wrap { flex:1; padding: 26px 28px 60px; overflow-y:auto; }
.view-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 22px; flex-wrap:wrap; gap:12px; }
.view-head h1 { font-size: 22px; margin-bottom:2px; }
.view-head .sub { color: var(--gray-500); font-size:13.5px; }
.breadcrumb { font-size:12px; color: var(--gray-500); margin-bottom:6px; }

.kpi-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.kpi-card { padding: 18px 18px; }
.kpi-card .lbl { font-size:12px; color:var(--gray-500); text-transform:uppercase; letter-spacing:.03em; }
.kpi-card .val { font-size: 26px; font-weight:800; margin-top:6px; color: var(--navy-800); }
.kpi-card .delta { font-size:12px; color:var(--green-600); margin-top:4px; font-weight:600; }

.grid-2 { display:grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom:20px; }
.panel { padding: 18px 20px; }
.panel h3 { font-size:15px; margin-bottom:14px; }

.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.toolbar input[type=text], .toolbar select { border:1px solid var(--gray-300); border-radius: var(--radius-sm); padding: 8px 12px; font-size:13.5px; font-family:inherit; }
.toolbar .spacer { flex:1; }

table.data-table { width:100%; border-collapse: collapse; font-size:13.5px; }
table.data-table th { text-align:left; padding: 10px 14px; background: var(--gray-100); color: var(--gray-700); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--gray-300); }
table.data-table td { padding: 10px 14px; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
table.data-table tr:hover td { background: var(--blue-50); }
table.data-table .row-name { font-weight:600; }
table.data-table .row-sub { font-size:11.5px; color:var(--gray-500); }

.pagination { display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:12.5px; color:var(--gray-500); }
.pagination .pg-btns { display:flex; gap:6px; }
.pagination button { border:1px solid var(--gray-300); background:#fff; border-radius:6px; padding:5px 10px; font-size:12.5px; }
.pagination button[disabled] { opacity:.4; }

.drawer-overlay { position:fixed; inset:0; background:rgba(13,25,48,.45); display:none; align-items:stretch; justify-content:flex-end; z-index:100; }
.drawer-overlay.open { display:flex; }
.drawer { width: 480px; max-width:92vw; background:#fff; height:100%; overflow-y:auto; padding: 26px; box-shadow: var(--shadow-lg); }
.drawer .close-x { float:right; border:none; background:none; font-size:20px; color:var(--gray-500); }

.wizard-steps { display:flex; gap:6px; margin-bottom:24px; flex-wrap:wrap; }
.wizard-steps .ws { flex:1; min-width:90px; text-align:center; padding:8px 4px; border-radius:8px; background: var(--gray-100); font-size:11.5px; font-weight:600; color:var(--gray-500); }
.wizard-steps .ws.active { background: var(--blue-500); color:#fff; }
.wizard-steps .ws.done { background: #e6f6ee; color: var(--green-600); }

.chip-list span { display:inline-block; background:var(--gray-100); border:1px solid var(--gray-300); padding:3px 10px; border-radius:999px; font-size:11.5px; margin:2px 4px 0 0; }

.empty-state { text-align:center; padding: 50px 20px; color: var(--gray-500); }

.bar-chart { display:flex; align-items:flex-end; gap:10px; height:180px; padding-top:10px; }
.bar-chart .bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar-chart .bar { width:70%; background: linear-gradient(180deg, var(--blue-400), var(--blue-600)); border-radius: 6px 6px 0 0; }
.bar-chart .bar-lbl { font-size:10.5px; color:var(--gray-500); margin-top:6px; text-align:center; }
.bar-chart .bar-val { font-size:11px; font-weight:700; color:var(--navy-800); margin-bottom:4px; }

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}