/*
 * The back office, in dotpano's own design language.
 *
 * Same tokens as `app/globals.css`, so the two surfaces cannot drift apart on
 * colour or type. What differs is density: this is an operational tool read in
 * columns, so rows are tighter, the type scale is smaller, and cards are used
 * only where something genuinely is a separate object.
 *
 * The identity is light-first: fog page, paper cards, ink text, one lime
 * accent. The dark block below is the same roles on the guide's ink and
 * charcoal grounds, ready for a toggle; nothing sets it yet.
 */

/* Manrope, self-hosted under the SIL Open Font License (fonts/OFL.txt). The
   back office's Content-Security-Policy allows fonts from this origin only, so
   the API serves the file rather than linking a font host. One file per script
   covers every weight: it is a variable font with a 200-800 axis. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('./fonts/Manrope-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('./fonts/Manrope-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg-0: #f3f3f1; /* fog */
  --bg-1: #ededea;
  --bg-2: #ffffff; /* paper */
  --surface-1: #ffffff;
  --surface-2: #f3f3f1;
  --surface-3: #e6e6e6;
  --text: #0b0b0b; /* ink */
  --text-2: #5b5b5b;
  --text-3: #8a8a8a; /* stone */
  --on-text: #ffffff;
  --line-soft: #e6e6e6; /* divider */
  --line-medium: #dadada; /* border */
  --line-hover: #c2c2c2;
  --lime: #d4ff3b;
  --lime-ink: #4a5a10;
  --lilac: #d7d3ff;
  --info: #2f6fb5;
  --success: #4a5a10;
  --warning: #8a5c00;
  --error: #c0392b;
  --scrim: rgba(11, 11, 11, 0.35);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  --sans: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --rail: 232px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg-0: #0b0b0b; /* ink */
  --bg-1: #141414;
  --bg-2: #1a1a1a; /* charcoal */
  --surface-1: #1a1a1a;
  --surface-2: #202020;
  --surface-3: #2a2a2a;
  --text: #ffffff;
  --text-2: #b4b4b4;
  --text-3: #8a8a8a;
  --on-text: #0b0b0b;
  --line-soft: rgba(255, 255, 255, 0.09);
  --line-medium: #333333;
  --line-hover: rgba(255, 255, 255, 0.24);
  --lime-ink: #d4ff3b;
  --info: #a7c8f7;
  --success: #b9e84a;
  --warning: #e8b84b;
  --error: #e8695a;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible { outline: 2px solid var(--lime-ink); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- layout */

.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }

/* The rail is ink beside a fog page, the way the customer app's sidebar is. It
   redefines the tokens its own children read rather than restating colours, so
   it is one dark region in a light tool and identical in both appearances. */
.rail {
  background: var(--bg-1);
  padding: 18px 12px 40px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  --bg-1: #0b0b0b; --bg-2: #1a1a1a;
  --surface-1: #1a1a1a; --surface-2: #202020; --surface-3: #2a2a2a;
  --text: #ffffff; --text-2: #b4b4b4; --text-3: #8a8a8a;
  --line-soft: rgba(255, 255, 255, 0.09); --line-medium: #333333;
  color: var(--text);
}
/* On fog the ink rail is its own edge. On ink the page is the same colour, so
   it needs a hairline or the tool looks unbounded. */
:root[data-theme="dark"] .rail { border-right: 1px solid var(--line-medium); }

.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
/* The lockup is a brand asset, not type: the wordmark is Uber Move, licensed
   for the logo only, so it is never set as UI text. Black and white are the two
   approved colourways and the surface behind it picks one. */
.brand .logo { display: block; width: 85px; height: 24px; flex: none;
  background: url('./brand/logo-black.png') left center / contain no-repeat; }
.rail .brand .logo, :root[data-theme="dark"] .brand .logo { background-image: url('./brand/logo-white.png'); }
/* The mark alone, masked so it takes the text colour, for the sign-in card. */
.brand .mark {
  width: 19px; height: 22px; flex: none;
  background: var(--text);
  -webkit-mask: url('./mark.svg') center / contain no-repeat;
  mask: url('./mark.svg') center / contain no-repeat;
}
.brand .tag {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  border: 1px solid var(--line-medium); border-radius: 5px; padding: 1px 5px;
}

.rail-group { margin-top: 16px; }
.rail-group > h3 {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  font-weight: 600; margin: 0 0 5px; padding: 0 8px;
}
.rail a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 8px; color: var(--text-2); font-size: 13px;
}
.rail a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.rail a[aria-current="page"] { position: relative; background: var(--surface-1); color: var(--text); font-weight: 600; }
.rail a[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 0 2px 2px 0; background: var(--lime); }
.rail a .count {
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-3);
  background: var(--surface-3); border-radius: 999px; padding: 0 6px;
}
.rail a[aria-current="page"] .count { background: var(--bg-1); }
.rail a .count.alert { color: var(--error); }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; min-height: 56px;
  background: color-mix(in srgb, var(--bg-0) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-3); }

.content { padding: 22px 20px 72px; max-width: 1400px; width: 100%; }

.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.page-head h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.page-head p { margin: 3px 0 0; color: var(--text-3); font-size: 13px; max-width: 68ch; }
.page-head .spacer { margin-left: auto; }

h2.section {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  font-weight: 600; margin: 28px 0 8px;
}

/* ---------------------------------------------------------------- controls */

button, .btn {
  font: inherit; font-size: 13px; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--line-medium);
  background: var(--surface-2); color: var(--text);
  padding: 6px 11px; white-space: nowrap;
  transition: border-color 0.12s ease, background 0.12s ease;
}
button:hover:not(:disabled) { border-color: var(--line-hover); }
button.primary { background: var(--text); color: var(--on-text); border-color: var(--text); font-weight: 600; }
button.primary:hover:not(:disabled) { opacity: 0.9; }
button.danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); }
button.quiet { background: none; border-color: transparent; color: var(--text-2); padding: 4px 7px; }
button.quiet:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; }
button:disabled { opacity: 0.45; cursor: default; }
button.small { font-size: 12px; padding: 4px 8px; }

input, select, textarea {
  font: inherit; font-size: 13px;
  background: var(--surface-1); color: var(--text);
  border: 1px solid var(--line-medium); border-radius: 8px; padding: 7px 10px;
  width: 100%;
}
input::placeholder { color: var(--text-3); }
select { padding-right: 26px; }
textarea { min-height: 74px; resize: vertical; }
label.field { display: block; }
label.field > span { display: block; font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
label.check input { width: auto; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 10px; }
.toolbar .grow { flex: 1; min-width: 200px; }
.toolbar select { width: auto; min-width: 132px; }

/* ---------------------------------------------------------------- data */

.card {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.table-wrap { overflow-x: auto; }
/* A table with many columns gets its natural width and scrolls inside the card,
   rather than squeezing every column until the words break one per line. */
.table-wrap.wide table { min-width: 1020px; }
td .sub.wrap { white-space: normal; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; white-space: nowrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2);
}
th:first-child { border-top-left-radius: 11px; }
th:last-child { border-top-right-radius: 11px; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .sub { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.mono { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.nowrap { white-space: nowrap; }

.pager { display: flex; align-items: center; gap: 10px; padding: 10px 4px 0; font-size: 12px; color: var(--text-3); }
.pager .spacer { margin-left: auto; }

/* ---------------------------------------------------------------- status */

.pill {
  display: inline-block; font-size: 11px; line-height: 1.5; padding: 1px 8px;
  border-radius: 999px; border: 1px solid var(--line-medium); color: var(--text-2);
  white-space: nowrap;
}
.pill.good { color: var(--success); border-color: color-mix(in srgb, var(--success) 38%, transparent); }
.pill.warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 38%, transparent); }
.pill.bad { color: var(--error); border-color: color-mix(in srgb, var(--error) 42%, transparent); }
.pill.info { color: var(--info); border-color: color-mix(in srgb, var(--info) 38%, transparent); }
.pill.accent { color: var(--lime-ink); border-color: color-mix(in srgb, var(--lime) 38%, transparent); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; }
.kpi { background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: 12px; padding: 13px 14px; }
.kpi .label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.kpi .value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.kpi .delta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.kpi .delta.up { color: var(--success); }
.kpi .delta.down { color: var(--error); }
.kpi.unavailable .value { font-size: 15px; font-weight: 500; color: var(--text-3); }

.alerts { display: grid; gap: 6px; }
.alert-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-1);
}
.alert-row .n { font-size: 17px; font-weight: 600; min-width: 34px; font-variant-numeric: tabular-nums; }
.alert-row.hit { border-color: color-mix(in srgb, var(--warning) 32%, transparent); }
.alert-row.hit .n { color: var(--warning); }
.alert-row.quiet .n { color: var(--text-3); }
.alert-row .why { font-size: 11px; color: var(--text-3); margin-left: auto; text-align: right; max-width: 46ch; }

/* A bar per day, drawn from the numbers rather than a chart library. */
.bars { display: flex; align-items: flex-end; gap: 2px; height: 68px; border-bottom: 1px solid var(--line-soft); }
.bars i { flex: 1; min-height: 2px; background: var(--lime); border-radius: 2px 2px 0 0; }
.bars i.zero { background: var(--line-medium); }
.bars-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); padding-top: 5px; }

.split { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.split i { display: block; height: 100%; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-top: 8px; }
.legend b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

.meter { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; min-width: 74px; }
.meter i { display: block; height: 100%; background: var(--lime); }
.meter.warn i { background: var(--warning); }
.meter.over i { background: var(--error); }

/* ---------------------------------------------------------------- states */

.state { padding: 34px 22px; text-align: center; color: var(--text-3); }
.state b { display: block; color: var(--text); font-weight: 500; font-size: 14px; margin-bottom: 4px; }
.state p { margin: 0 auto; max-width: 52ch; font-size: 13px; }
.state.error b { color: var(--error); }

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line-medium); border-radius: 10px;
  padding: 11px 13px; font-size: 13px; color: var(--text-2); background: var(--surface-1);
}
.notice.warn { border-color: color-mix(in srgb, var(--warning) 34%, transparent); }
.notice b { color: var(--text); font-weight: 500; }

.skeleton { background: var(--surface-2); border-radius: 8px; height: 13px; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------------------------------------------------------------- overlays */

dialog {
  background: var(--surface-1); color: var(--text);
  border: 1px solid var(--line-medium); border-radius: 14px;
  padding: 20px; width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow);
}
dialog::backdrop { background: var(--scrim); }
dialog h2 { font-size: 16px; font-weight: 600; margin: 0 0 2px; letter-spacing: -0.01em; }
dialog .dialog-sub { color: var(--text-3); font-size: 12px; margin: 0 0 14px; }
dialog .rows { display: grid; gap: 12px; }
dialog .foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
dialog .foot .left { margin-right: auto; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; }
.facts dt { color: var(--text-3); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }

.results { position: absolute; top: 46px; left: 0; right: 0; z-index: 30; }
.results .card { padding: 4px; box-shadow: var(--shadow); }
.results button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 7px 10px; border-radius: 7px;
}
.results button:hover { background: var(--surface-2); }
.search-wrap { position: relative; flex: 1; max-width: 420px; }

.notes { display: grid; gap: 8px; }
.note { border: 1px solid var(--line-soft); border-radius: 9px; padding: 9px 11px; font-size: 13px; background: var(--surface-2); }
.note .meta { font-size: 11px; color: var(--text-3); margin-bottom: 3px; }

.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--surface-3); border: 1px solid var(--line-medium); color: var(--text);
  border-radius: 10px; padding: 9px 15px; font-size: 13px; z-index: 60; box-shadow: var(--shadow);
}
.toast.bad { border-color: color-mix(in srgb, var(--error) 45%, transparent); color: var(--error); }

/* ---------------------------------------------------------------- responsive */

.rail-toggle { display: none; }

@media (max-width: 1000px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 50;
    transform: translateX(-100%); transition: transform 0.16s ease;
  }
  .shell.open .rail { transform: none; }
  .shell.open::after {
    content: ""; position: fixed; inset: 0; background: var(--scrim); z-index: 40;
  }
  .rail-toggle { display: inline-flex; }
  .content { padding: 16px 14px 64px; }
}

@media (max-width: 640px) {
  .topbar { padding: 8px 12px; }
  .search-wrap { max-width: none; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .alert-row .why { display: none; }
  dialog { padding: 16px; }
}