/* One stylesheet for the whole dashboard.
 *
 * Amit, 18 Sep 2026: "iss pure dashboard ka UI sahi ni hai, kahi kuch to kahi kuch type
 * dikh raha hai … try to use single css and layout template."
 *
 * He was right, and the cause was structural rather than cosmetic: 47 pages, each with
 * its own 1–7 KB <style> block, written at different times. Measured across them —
 * three background colours (#0d1117 on seven pages, #0f1115 on two, #0b1220 on one),
 * three body sizes (14/15/16px) and headings at 16, 20 and 22px. Nobody chose that; it
 * accumulated.
 *
 * So the values below are not a new design. They are the majority of what the dashboard
 * already was — the GitHub-dark palette seven or nine pages agreed on — written down once
 * so the next page inherits it instead of inventing it.
 *
 * ## The alias block matters
 *
 * Pages named the same ideas differently: --text and --ink, --border and --line, --panel
 * and --card and --surf. All of them are defined here, pointing at one value each, so a
 * page can have its own <style> removed without every rule in it going blank. That is
 * what makes the migration page-by-page and reversible rather than one large rewrite.
 */

:root {
  /* Surfaces, darkest first. */
  --bg: #0d1117;
  --panel: #161b22;
  --panel2: #1c232c;
  --border: #30363d;

  /* Ink. */
  --text: #e6edf3;
  --muted: #8b949e;

  /* Meaning. Only these five; a sixth accent is how a dashboard stops meaning anything. */
  --accent: #58a6ff;
  --up: #3fb950;
  --warn: #d29922;
  --down: #f85149;
  --purple: #bc8cff;

  /* Older names, same values. See the note above. */
  --ink: var(--text);
  --line: var(--border);
  --card-bg: var(--panel);
  --surf: var(--panel);
  --ok: var(--up);
  --bad: var(--down);

  /* Spacing and radius, so padding stops being guessed per page. */
  --gap: 12px;
  --pad: 24px;
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* One type scale. Every page used to pick its own heading size; these three are all
 * there is, and h1 is the page's name in the top bar. */
h1 { font-size: 17px; font-weight: 600; }
h2 { font-size: 15px; font-weight: 600; margin: 26px 0 10px; }
h3 { font-size: 13px; font-weight: 600; color: var(--muted);
     text-transform: uppercase; letter-spacing: .06em; margin: 20px 0 8px; }

/* Secondary text under a heading — the one-line explanation of what a page is. */
.sub, .hint, .small, .muted { color: var(--muted); font-size: 13px; }

/* ---- layout -------------------------------------------------------------------
 * The sidebar is injected by the server (`_with_nav`), so a page never writes it. These
 * rules only describe where the injected markup sits. */

.sidebar {
  width: 230px; background: var(--panel); border-right: 1px solid var(--border);
  position: fixed; top: 0; bottom: 0; left: 0; padding: 18px 0;
  overflow-y: auto; z-index: 20;
}
.brand { padding: 4px 20px 16px; font-weight: 700; font-size: 16px; }
.brand small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }

.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 20px;
         color: var(--muted); border-left: 2px solid transparent; }
.nav a:hover { background: var(--panel2); color: var(--text); text-decoration: none; }
.nav a.active { color: var(--text); border-left-color: var(--accent); background: var(--panel2); }
.nav .sec { padding: 14px 20px 6px; font-size: 10px; letter-spacing: .08em;
            text-transform: uppercase; color: var(--muted); opacity: .7; }

.main { margin-left: 230px; min-width: 0; }
.topbar {
  border-bottom: 1px solid var(--border); padding: 12px var(--pad);
  display: flex; gap: 12px; align-items: center; position: sticky; top: 0;
  background: rgba(13, 17, 23, .9); backdrop-filter: blur(6px); z-index: 10;
}
.who { color: var(--muted); font-size: 13px; margin-left: auto; }
.content { padding: var(--pad); max-width: 1100px; }

/* ---- pieces -------------------------------------------------------------------- */

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
}

/* A row of numbers. `.tiles` is the grid; `.tile` is one figure with its label. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
         gap: var(--gap); margin-bottom: 18px; }
.tile { background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 14px 16px; }
.tile b { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; }
.tile span { color: var(--muted); font-size: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--border);
         text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase;
     letter-spacing: .05em; font-weight: 600; white-space: nowrap; }
tbody tr:hover { background: var(--panel2); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.wrap { white-space: normal; word-break: break-word; }

.btn, button {
  background: var(--accent); color: #06121f; border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 7px 14px; font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn:hover, button:hover { filter: brightness(1.08); text-decoration: none; }
.btn.ghost, button.ghost {
  background: transparent; color: var(--muted); border-color: var(--border);
  font-weight: 500;
}
.btn.ghost:hover, button.ghost:hover { color: var(--text); border-color: var(--muted); }

.pill, .badge {
  display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 20px;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.pill.ok, .badge.ok { color: var(--up); border-color: rgba(63, 185, 80, .4); }
.pill.warn, .badge.warn { color: var(--warn); border-color: rgba(210, 153, 34, .4); }
.pill.bad, .badge.bad { color: var(--down); border-color: rgba(248, 81, 73, .4); }

/* Filter bars: a row of labelled inputs, wrapping on a narrow screen. */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
           gap: var(--gap); margin-bottom: var(--gap); }
.filters .field, .field { display: flex; flex-direction: column; gap: 4px; }
.filters label, .field label { font-size: 11px; color: var(--muted);
                               text-transform: uppercase; letter-spacing: .05em; }
select, input[type="text"], input[type="number"], input[type="search"], textarea {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px;
  font-family: inherit; width: 100%;
}
select:focus, input:focus, textarea:focus { outline: 1px solid var(--accent); }

.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
           margin-bottom: 14px; }
.hits { color: var(--muted); font-size: 12px; }

/* ---- narrow screens ------------------------------------------------------------
 * The dashboard is opened on a phone often enough that this is not optional. The
 * sidebar slides away; nothing else needs to change, because everything above is either
 * a grid that wraps or a table that scrolls. */
@media (max-width: 820px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .content { padding: 16px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}