/* DDS-CMIS — visual system modelled on docs/dashboard-coop.jpg */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.73aaa95eab31.woff2") format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.0bf7eadca131.woff2") format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.2a4c97ec45ef.woff2") format('woff2'); }
@font-face { font-family: 'Noto Sans Ethiopic'; font-weight: 400; font-display: swap; src: url("../fonts/ethiopic-400.2146c059c63a.woff2") format('woff2'); }
@font-face { font-family: 'Noto Sans Ethiopic'; font-weight: 700; font-display: swap; src: url("../fonts/ethiopic-700.511620d4e10e.woff2") format('woff2'); }

:root {
  --navy-900: #0a1f44;
  --navy-800: #0f2b5b;
  --navy-700: #14376f;
  --navy-600: #1b4a8f;
  --green: #22a447;
  --green-600: #1a8a3b;
  --green-50: #eaf7ee;
  --blue: #1e6fe0;
  --blue-50: #e9f1fe;
  --orange: #f07c1b;
  --amber: #f4b400;
  --purple: #7b3fd6;
  --purple-50: #f2ebfd;
  --teal: #0f9aa1;
  --red: #d93b3b;
  --bg: #eef3f9;
  --card: #ffffff;
  --text: #13213a;
  --muted: #5b6b85;
  --line: #e1e8f2;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 38, 77, .06), 0 4px 14px rgba(16, 38, 77, .06);
  --sidebar: 272px;
  --header: 84px;
  font-family: Inter, 'Noto Sans Ethiopic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html[lang="am"] { --font-local: 'Noto Sans Ethiopic'; }
html[lang="am"] body { font-family: 'Noto Sans Ethiopic', Inter, system-ui, sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
.ico { flex: none; vertical-align: middle; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Header ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--header);
  display: flex; align-items: stretch; color: #fff;
  background: linear-gradient(90deg, var(--navy-800) 0%, var(--navy-700) 45%, #164a7d 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.brand { min-width: var(--sidebar); flex: none; padding-right: 24px !important; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  border-right: 1px solid rgba(255,255,255,.14); color: #fff; }
.brand:hover { text-decoration: none; }
.brand img { width: 62px; height: 60px; object-fit: contain; }
.brand .t1 { font-weight: 700; font-size: 16px; line-height: 1.25; white-space: nowrap; }
.brand .t2 { font-weight: 600; font-size: 15px; opacity: .95; white-space: nowrap; }
.system { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 24px; position: relative; overflow: hidden; }
.system .banner { position: absolute; inset: 0 0 0 auto; width: 62%; background: url("../img/header-banner.2610b62edb8d.jpg") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%); }
.system .name { position: relative; }
.system .name b { display: block; font-size: 34px; letter-spacing: .5px; font-weight: 700; line-height: 1; }
.system .name span { display: block; font-size: 15px; margin-top: 4px; opacity: .95; }
.top-actions { display: flex; align-items: center; gap: 6px; padding: 0 16px; background: rgba(6, 40, 30, .55); }
.menu-toggle { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }

.dd { position: relative; }
.dd > button, .dd > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; color: #fff;
  background: transparent; border: 0; padding: 8px 10px; border-radius: 10px; font: inherit; font-weight: 600; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary:hover { background: rgba(255,255,255,.1); }
.lang > summary { border: 2px solid var(--green); padding: 7px 12px; }
.dd-menu { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; color: var(--text); border-radius: 10px; min-width: 190px;
  box-shadow: 0 10px 30px rgba(10,31,68,.25); padding: 6px; z-index: 60; }
.dd-menu a, .dd-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--text);
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.dd-menu a:hover, .dd-menu button:hover { background: var(--bg); text-decoration: none; }
.dd-menu button.on { font-weight: 700; background: var(--green-50); }
.dd-menu .head { padding: 8px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.flag { width: 22px; height: 15px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.bell { position: relative; }
.bell .badge { position: absolute; top: 2px; right: 2px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.notif-menu { width: 320px; }
.notif-menu a { align-items: flex-start; }
.notif-menu .unread { font-weight: 600; }
.user-menu .who { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Layout ─────────────────────────────────────────────── */
.shell { display: flex; min-height: calc(100vh - var(--header)); }
.sidebar { width: var(--sidebar); flex: none; background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  color: #dbe6f7; display: flex; flex-direction: column; position: sticky; top: var(--header); height: calc(100vh - var(--header)); }
.nav { flex: 1; overflow-y: auto; padding: 12px 0; scrollbar-width: thin; }
.nav details > summary { list-style: none; }
.nav details > summary::-webkit-details-marker { display: none; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 20px; color: #e3ebf8; font-size: 14.5px; white-space: nowrap; font-weight: 500;
  cursor: pointer; border-radius: 0 10px 10px 0; margin-right: 10px; }
.nav-item:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.nav-item .chev { margin-left: auto; opacity: .75; transition: transform .15s; }
.nav details[open] > summary .chev { transform: rotate(180deg); }
.nav-item.active { background: var(--green); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(34,164,71,.35); }
.nav-sub { padding: 2px 0 6px 58px; display: grid; gap: 1px; }
.nav-sub a { color: #b9c9e3; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; margin-right: 10px; }
.nav-sub a:hover, .nav-sub a.on { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.side-art { height: 200px; flex: none; position: relative; background: url("../img/sidebar-art.c81af3e39e19.jpg") center bottom / cover no-repeat; }
.side-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy-900) 0%, transparent 35%, rgba(10,31,68,.15) 60%, rgba(10,31,68,.9) 100%); }
.side-art div { position: absolute; left: 22px; bottom: 16px; color: #fff; }
.side-art b { font-size: 20px; font-weight: 600; display: block; }
.side-art span { font-size: 13.5px; opacity: .95; }

.main { flex: 1; min-width: 0; padding: 20px 22px 32px; }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .pico { color: var(--blue); }
.page-head h1 { font-size: 26px; font-weight: 700; color: var(--navy-900); }
.page-head p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.page-head .spacer { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; box-shadow: var(--shadow); font-size: 14px; }

/* ── KPI cards ──────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { border-radius: var(--radius); color: #fff; padding: 16px 16px 14px; display: flex; gap: 14px; align-items: center; min-height: 96px;
  box-shadow: var(--shadow); position: relative; overflow: hidden; text-decoration: none !important; }
.kpi::after { content: ''; position: absolute; right: -30px; bottom: -50px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.1); }
.kpi .ico { width: 44px; height: 44px; opacity: .95; }
.kpi .lbl { font-size: 14px; font-weight: 600; line-height: 1.15; }
.kpi .lbl small { display: block; font-weight: 500; opacity: .9; font-size: 12.5px; }
.kpi .val { font-size: 30px; font-weight: 700; line-height: 1.1; margin-top: 4px; white-space: nowrap; }
.kpi .delta { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; opacity: .95; }
.kpi .body { min-width: 0; flex: 1; text-align: right; position: relative; z-index: 1; }
.kpi.blue { background: linear-gradient(135deg, #1d6fe0, #0f4fb3); }
.kpi.green { background: linear-gradient(135deg, #27ae4f, #138a36); }
.kpi.orange { background: linear-gradient(135deg, #f7931e, #e8650f); }
.kpi.purple { background: linear-gradient(135deg, #8a4be0, #6a2fc4); }
.kpi.teal { background: linear-gradient(135deg, #16a5a8, #0d7f89); }

/* ── Cards / panels ─────────────────────────────────────── */
.grid { display: grid; gap: 16px; margin-bottom: 16px; }
.grid.row2 { grid-template-columns: 1.25fr 1.2fr .78fr; }
.grid.row3 { grid-template-columns: 1fr 1.2fr 1.07fr; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 16px 18px; min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-h h2 { font-size: 18px; font-weight: 700; color: var(--navy-900); }
.card-h .ico { color: var(--navy-600); }
.card-h .more { margin-left: auto; font-size: 13.5px; font-weight: 600; }

/* Sector donut */
.donut-wrap { display: flex; gap: 18px; align-items: center; }
.donut { position: relative; width: 190px; height: 190px; flex: none; }
.donut .center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut .center b { font-size: 26px; color: var(--navy-900); }
.donut .center span { max-width: 112px; margin: 0 auto; font-size: 12.5px; line-height: 1.2; }
.legend { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 8px; font-size: 13px; min-width: 0; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.legend .n { margin-left: auto; font-weight: 700; padding-left: 8px; }
.legend a { color: var(--text); }

/* Zone map */
.map-wrap { display: flex; gap: 10px; align-items: flex-start; }
.map-wrap svg { flex: 1; min-width: 0; max-height: 320px; overflow: visible; }
.zone path { stroke: #fff; stroke-width: 1.4; cursor: pointer; transition: filter .15s; }
.zone:hover path { filter: brightness(.92) saturate(1.2); }
.zone text { font-size: 17px; font-weight: 700; fill: #10331b; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 3.5px; }
.zone text.n { font-weight: 600; font-size: 15px; }
.zone.dark text { fill: #fff; stroke: rgba(0,60,10,.45); }
.zone circle { stroke: #2f7d3a; stroke-width: 2; }
.zone.marker text { text-anchor: start; }
.zone.out path { opacity: .35; }
.map-legend { font-size: 12.5px; flex: none; }
.map-legend b { display: block; margin-bottom: 8px; font-size: 12.5px; }
.map-legend div { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.map-legend i { width: 18px; height: 16px; border-radius: 3px; display: inline-block; }
.map-note { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* Quick actions */
.qa { display: grid; gap: 10px; }
.qa a { display: flex; align-items: center; gap: 12px; border: 1px solid #cbd8ea; border-radius: 9px; padding: 9px 14px; color: var(--text);
  background: linear-gradient(#fff, #f7faff); font-weight: 500; }
.qa a:hover { border-color: var(--blue); text-decoration: none; background: var(--blue-50); }
.qa .ico { color: var(--blue); }
.qa a:first-child .ico { color: var(--green); }

/* KPI bars */
.bars { display: grid; gap: 4px; }
.bar-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.bar-row:last-child { border-bottom: 0; }
.bar-row .top { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.bar-row .top b { margin-left: auto; font-size: 15px; }
.track { height: 10px; border-radius: 6px; background: #e8edf4; overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 6px; }
.track .green { background: linear-gradient(90deg, #2bb655, #1a9a40); }
.track .blue { background: linear-gradient(90deg, #2f80ed, #1660d0); }
.track .amber { background: linear-gradient(90deg, #f6c445, #f0a800); }
.track .purple { background: linear-gradient(90deg, #9a5cf0, #7330d4); }

/* Finance */
.fin-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.fin-tile { border-radius: 9px; padding: 9px 12px; color: #fff; }
.fin-tile span { font-size: 13px; display: block; opacity: .95; }
.fin-tile b { font-size: 16px; white-space: nowrap; }
.fin-tile { min-width: 0; overflow: hidden; }
.fin-tile.green { background: linear-gradient(135deg, #27ae4f, #148a37); }
.fin-tile.blue { background: linear-gradient(135deg, #2179e8, #1158c4); }
.fin-tile.purple { background: linear-gradient(135deg, #8a4be0, #6a2fc4); }
.chart-h { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.chart-h .lg { margin-left: auto; display: flex; gap: 14px; font-weight: 500; font-size: 13px; }
.chart-h .lg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.chart-box { position: relative; height: 170px; }

/* Activities */
.acts { list-style: none; margin: 0; padding: 0; }
.acts li { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.acts li:last-child { border-bottom: 0; }
.acts .ai { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.acts .ai.green { background: var(--green); }
.acts .ai.blue { background: var(--blue-50); color: var(--blue); }
.acts .ai.purple { background: var(--purple-50); color: var(--purple); }
.acts .ai.orange { background: #fff1e4; color: var(--orange); }
.acts .t { font-weight: 500; }
.acts .d { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.empty { color: var(--muted); padding: 18px 0; text-align: center; }

/* ── Tables, filters, forms ─────────────────────────────── */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; }
.input, select.input, textarea.input { font: inherit; color: var(--text); border: 1px solid #c9d5e6; border-radius: 9px; padding: 9px 11px; background: #fff;
  width: 100%; min-width: 0; }
.input:focus { outline: 2px solid rgba(30,111,224,.25); border-color: var(--blue); }
.toolbar .input { width: auto; min-width: 150px; }
.toolbar .search { min-width: 240px; flex: 1; max-width: 360px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; border-radius: 9px; padding: 9px 15px; border: 1px solid transparent;
  cursor: pointer; background: var(--blue); color: #fff; white-space: nowrap; }
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn.green { background: var(--green); }
.btn.ghost { background: #fff; color: var(--text); border-color: #c9d5e6; }
.btn.danger { background: var(--red); }
.btn.sm { padding: 6px 10px; font-size: 13px; }
.table-card { padding: 0; overflow: hidden; }
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.t th { text-align: left; font-weight: 600; color: var(--muted); background: #f6f9fd; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.t td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr:hover { background: #f8fbff; }
.t .num, .t th.num { text-align: right; }
.t tfoot td { font-weight: 700; background: #f6f9fd; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: var(--bg); color: var(--muted); white-space: nowrap; }
.tag.green, .tag.active, .tag.valid, .tag.approved, .tag.resolved { background: var(--green-50); color: var(--green-600); }
.tag.blue, .tag.submitted, .tag.in_progress, .tag.open { background: var(--blue-50); color: var(--blue); }
.tag.orange, .tag.pending, .tag.under_review, .tag.returned, .tag.high { background: #fff1e4; color: #c05f0c; }
.tag.red, .tag.suspended, .tag.rejected, .tag.expired, .tag.revoked, .tag.dissolved, .tag.urgent, .tag.withdrawn, .tag.deceased { background: #fdeaea; color: var(--red); }
.tag.purple { background: var(--purple-50); color: var(--purple); }
.pager { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pager .pg { display: flex; gap: 6px; }

.form-card { max-width: 980px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 13.5px; }
.field .help { font-size: 12px; color: var(--muted); }
.field .err { font-size: 12.5px; color: var(--red); }
.field.has-err .input { border-color: var(--red); }
.field ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.field.check { flex-direction: row; align-items: center; gap: 10px; }
.form-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.alert { padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; font-weight: 500; border: 1px solid; }
.alert.success { background: var(--green-50); border-color: #bfe6cb; color: #145f2b; }
.alert.error { background: #fdeaea; border-color: #f4c2c2; color: #8c1d1d; }
.alert.info, .alert.warning { background: #fff7e6; border-color: #f6dca3; color: #7a5200; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--navy-900); border-color: var(--green); }
.tabs a:hover { text-decoration: none; color: var(--text); }
dl.facts { display: grid; grid-template-columns: 180px 1fr; gap: 9px 14px; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; font-weight: 500; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat span { color: var(--muted); font-size: 13px; display: block; }
.stat b { font-size: 22px; color: var(--navy-900); }

/* Login */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--bg); }
.login-hero { background: linear-gradient(160deg, rgba(10,31,68,.92), rgba(20,55,111,.78)), url("../img/header-banner.2610b62edb8d.jpg") center / cover; color: #fff;
  padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.login-hero img { width: 92px; }
.login-hero h1 { font-size: 44px; margin: 22px 0 8px; }
.login-hero p { font-size: 18px; opacity: .92; max-width: 460px; }
.login-box { display: grid; place-items: center; padding: 32px 16px; }
.login-box .card { width: 100%; max-width: 400px; padding: 28px; }
.login-box h2 { font-size: 22px; margin-bottom: 4px; }
.login-langs { display: flex; gap: 6px; margin-bottom: 18px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1400px) {
  .grid.row2 { grid-template-columns: 1fr 1fr; }
  .grid.row2 > .quick { grid-column: 1 / -1; }
  .grid.row2 .qa { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .grid.row3 { grid-template-columns: 1fr 1fr; }
  .grid.row3 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .system .name b { font-size: 26px; }
  .system .banner { width: 50%; }
}
@media (max-width: 960px) {
  :root { --header: 64px; }
  .menu-toggle { display: block; }
  .brand { width: auto; border: 0; padding: 0 8px; }
  .brand img { width: 44px; height: 42px; }
  .brand .txt { display: none; }
  .system { padding: 0 8px; }
  .system .name span, .system .banner { display: none; }
  .system .name b { font-size: 22px; }
  .top-actions { padding: 0 6px; background: transparent; gap: 2px; }
  .user-menu .who { display: none; }
  .sidebar { position: fixed; left: 0; top: var(--header); z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; box-shadow: 10px 0 30px rgba(0,0,0,.3); }
  .main { padding: 16px; }
  .grid.row2, .grid.row3, .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .login-page { grid-template-columns: 1fr; }
  .login-hero { padding: 28px; }
  .login-hero h1 { font-size: 30px; }
}
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .val { font-size: 24px; }
  .kpi .ico { width: 32px; height: 32px; }
  .donut-wrap, .map-wrap { flex-direction: column; align-items: stretch; }
  .donut { margin: 0 auto; }
  .fin-tiles { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 22px; }
  dl.facts { grid-template-columns: 1fr; }
  .toolbar .search { min-width: 0; max-width: none; }
  .notif-menu { width: 280px; right: -60px; }
}
@media print {
  .topbar, .sidebar, .toolbar, .form-actions, .pager { display: none !important; }
  .main { padding: 0; }
  body { background: #fff; }
}