/* The staff console (admin/index.html). Built on the app's own styles.css and workspace.css and the theme tokens
   from public/js/theme.js, following docs/UI_RULES.md; only the console's layout lives here. */

.ad { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100vh; }
.ad-nav { background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4) var(--s3) var(--s3); overflow-y: auto; }
.ad-brand { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2) var(--s4); }
.ad-brand b { font: 400 20px/1.1 var(--serif); letter-spacing: -.01em; }
.ad-brand .tag { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-bg); border-radius: var(--pill); padding: 2px 8px; }
.ad-nav .nav-item { height: var(--h-md); padding: 0 var(--s3); gap: var(--s3); }
.ad-nav .nav-item .ni { width: 18px; display: inline-grid; place-items: center; color: var(--text3); font-size: 14px; }
.ad-nav .nav-item.on .ni { color: var(--accent); }
.ad-foot { margin-top: auto; padding: var(--s3) var(--s2) 0; border-top: 1px solid var(--line); display: grid; gap: var(--s2); font-size: 12.5px; color: var(--text3); }
.ad-foot .who { color: var(--text2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-main { overflow-y: auto; padding: var(--s8) var(--s8) var(--s16); min-width: 0; }
.ad-main > .lv-head h1 { margin: 0; font: 700 26px/1.2 var(--font-display); letter-spacing: -.02em; }
.ad-main > .lv-head .grow { flex: 1; }
.ad-sub { margin: calc(-1 * var(--s5)) 0 var(--s6); color: var(--text3); font-size: 13.5px; }

/* KPI tiles */
.ad-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); margin-bottom: var(--s6); }
.ad-kpi { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: var(--s4); min-width: 0; }
.ad-kpi .k { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-kpi .v { font: 700 26px/1.2 var(--font-display); letter-spacing: -.03em; margin-top: var(--s1); font-variant-numeric: tabular-nums; }
.ad-kpi .s { font-size: 12px; color: var(--text3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-kpi.hot .v { color: var(--bad); }

.ad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.ad-grid .card-sec { margin-bottom: 0; }
.ad-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ad-stack { display: grid; gap: var(--s4); }
.card-sec { background: var(--panel); }
.card-sec-h { display: flex; align-items: center; gap: var(--s2); min-height: var(--h-md); }
.card-sec-h b { font-size: 13.5px; }
.card-sec-h .grow { flex: 1; }
.card-sec-h .muted { font-size: 12.5px; }
.card-sec.flush .card-sec-b { padding: 0; gap: 0; }

/* filters */
.ad-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.ad-filters .input, .ad-filters select { height: var(--h-md); }
.ad-filters .input { padding: 0 var(--s3); }
.ad-filters .search { width: 260px; max-width: 100%; }
.ad-filters .grow { flex: 1; }
.ad-filters .count { font-size: 12.5px; color: var(--text3); font-variant-numeric: tabular-nums; }

/* tables */
.ad-scroll { overflow-x: auto; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ad-table th { text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--panel2); }
.ad-table th.sort { cursor: pointer; user-select: none; }
.ad-table th.sort:hover { color: var(--text); }
.ad-table th.on { color: var(--text); }
.ad-table td { padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-table tr:last-child td { border-bottom: 0; }
.ad-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.ad-table tbody tr.click { cursor: pointer; }
.ad-table tbody tr.click:hover td { background: var(--hover); }
.ad-table .sub { display: block; font-size: 12px; color: var(--text3); }
.ad-table .wrap { white-space: normal; }
.ad-empty { padding: var(--s8) var(--s4); text-align: center; color: var(--text3); font-size: 13.5px; }
.ad-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); padding: var(--s2) var(--s4); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text3); }

.ad-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--pill); font-size: 11.5px; font-weight: 600; background: var(--panel2); color: var(--text2); border: 1px solid var(--line); white-space: nowrap; }
.ad-tag.good { color: var(--good); }
.ad-tag.bad { color: var(--bad); }
.ad-tag.warn { color: var(--warn); }
.ad-tag.accent { color: var(--accent); background: var(--accent-bg); border-color: transparent; }

/* charts */
.ad-chart { position: relative; height: 200px; }
.ad-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ad-chart .tip { position: absolute; pointer-events: none; background: var(--text); color: var(--bg); font-size: 12px; padding: 4px 8px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -120%); }
.ad-bars { display: grid; gap: var(--s2); }
.ad-bar { display: grid; grid-template-columns: minmax(80px, 140px) 1fr auto; gap: var(--s3); align-items: center; font-size: 13px; }
.ad-bar .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
.ad-bar .t { height: 8px; border-radius: var(--pill); background: var(--panel2); overflow: hidden; }
.ad-bar .t i { display: block; height: 100%; border-radius: var(--pill); background: var(--accent); }
.ad-bar .n { font-variant-numeric: tabular-nums; color: var(--text3); font-size: 12.5px; }

/* map */
.ad-map { height: 440px; background: var(--panel2); }
.ad-map svg { width: 100%; height: 100%; display: block; }

/* drawer details */
.ad-dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--s2) var(--s4); font-size: 13.5px; }
.ad-dl dt { color: var(--text3); }
.ad-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.drawer-form h3 { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin: var(--s6) 0 var(--s2); }

/* sign-in and dialogs */
.ad-login { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); }
.ad-login form { width: 100%; max-width: 380px; display: grid; gap: var(--s3); }
.ad-login h1 { margin: var(--s2) 0 0; font: 400 30px/1.15 var(--serif); letter-spacing: -.02em; }
.ad-login p { margin: 0 0 var(--s2); color: var(--text3); font-size: 14px; }
.ad-login .input { height: var(--h-lg); }
.ad-login .btn.primary { height: var(--h-lg); justify-content: center; border-radius: var(--pill); }
.ad-err { color: var(--bad); font-size: 13.5px; min-height: 20px; }
.ad-modal { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; z-index: 80; padding: var(--s4); }
.ad-modal .box { width: 100%; max-width: 400px; background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--s6); display: grid; gap: var(--s3); }
.ad-modal h2 { margin: 0; font-size: 17px; }
.ad-modal p { margin: 0; color: var(--text3); font-size: 13.5px; }
.ad-modal .row { display: flex; justify-content: flex-end; gap: var(--s2); }
.ad-modal textarea.input { min-height: 90px; resize: vertical; }

@media (max-width: 1100px) { .ad-grid, .ad-grid.three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .ad { grid-template-columns: 1fr; height: auto; }
  .ad-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
  .ad-brand { width: 100%; }
  .ad-foot { width: 100%; }
  .ad-main { padding: var(--s6) var(--s4) var(--s12); }
}