/* ═══════════════════════════════════════════════════════════════
   Dashboard styles.

   Structure-first: this is a functional base. The look (Mike's moodboard:
   black, 1px off-white rules, ruled cells, mono uppercase labels, inverted
   highlight rows, meters + rulers) gets layered on later by changing the
   tokens and component rules here, without touching the markup.

   Component vocabulary (the markup's hooks):
     .bar / .bar-title / .bar-crumb / .sync[data-state]
     .tiles > .tile (.is-soon) > .tile-head(.tile-code .tile-title) + .tile-body > .tile-line
     .panel > .panel-head(.panel-code .panel-title .panel-meta) + .panel-body
     .kv > .kv-row > dt + dd
     .grid-table (th.num, td.num, .unverified, .is-hit)
     .meter-row > .meter-label + .meter[data-state ok|full|over|unknown](--fill)  (dotted / solid / accent) + .meter-value
     .ruler(--total) > .ruler-seg(--w)
     .btn (.is-danger), .field, .fld, .grp, .toolbar, .actions, .tag, .note (.is-warn)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #000;
  --surface: #0b0b0b;
  --fg: #e9e8e3;
  --dim: #8b8a86;
  --line: rgba(233, 232, 227, 0.28);
  --line-strong: rgba(233, 232, 227, 0.7);
  --accent: #ff6a2b;          /* the one rare accent: warnings, over-limit */
  --ok: var(--fg);
  --font: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --fs: 14px;
  --fs-small: 11px;
  --gap: 12px;
  --pad: 12px;
  --track: 0.08em;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: var(--fs)/1.45 var(--font);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a { color: inherit; }
code { font-family: var(--font); }
.dim, .help { color: var(--dim); }
.pre { white-space: pre-wrap; }

/* ── top bar ── */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line-strong);
  text-transform: uppercase; letter-spacing: var(--track); font-size: var(--fs-small);
}
.bar-title { text-decoration: none; font-weight: 700; }
.bar-crumb { color: var(--dim); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync { border: 1px solid var(--line); padding: 2px 8px; white-space: nowrap; }
.sync[data-state="ok"] { color: var(--dim); }
.sync[data-state="pending"], .sync[data-state="syncing"] { color: var(--fg); }
.sync[data-state="offline"], .sync[data-state="error"] { color: var(--accent); border-color: var(--accent); }

.view { padding: var(--pad); max-width: 1100px; margin: 0 auto; display: grid; gap: var(--gap); }
.foot { text-align: right; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--track); }

/* ── home tiles ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.tile {
  display: flex; flex-direction: column; min-height: 120px;
  border: 1px solid var(--line-strong); text-decoration: none;
}
.tile:hover, .tile:focus-visible { background: var(--surface); }
.tile.is-soon { border-color: var(--line); color: var(--dim); }
.tile-head, .panel-head {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 10px; border-bottom: 1px solid var(--line);
  text-transform: uppercase; letter-spacing: var(--track); font-size: var(--fs-small);
}
.tile-code, .panel-code { color: var(--dim); }
.tile-code::after, .panel-code::after { content: ' //'; }
.tile-title, .panel-title { font-weight: 700; flex: 1; }
.tile-body { padding: 10px; display: grid; gap: 4px; }
.tile-line { font-size: 13px; }

/* ── panels ── */
.panel { border: 1px solid var(--line-strong); min-width: 0; }
.panel-meta { color: var(--dim); }
.panel-body { padding: var(--pad); display: grid; gap: var(--gap); overflow-x: auto; }
.panel-body > p { margin: 0; }

/* ── key/value rows ── */
.kv { margin: 0; display: grid; }
.kv-row { display: flex; gap: 12px; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.kv-row dt { color: var(--dim); text-transform: uppercase; letter-spacing: var(--track); font-size: var(--fs-small); white-space: nowrap; }
.kv-row dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ── tables ── */
.grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid-table th { text-align: left; color: var(--dim); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track); font-size: var(--fs-small); }
.grid-table th, .grid-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid-table .num { text-align: right; white-space: nowrap; }
.grid-table tbody tr[data-href] { cursor: pointer; }
.grid-table tbody tr[data-href]:hover { background: var(--fg); color: var(--bg); }
.grid-table tbody tr[data-href]:hover .dim, .grid-table tbody tr[data-href]:hover .unverified { color: var(--bg); }
.unverified { color: var(--dim); font-style: italic; }
.is-hit { color: var(--accent); }

/* ── meters + rulers ── */
.case-row, .case-power { display: grid; gap: 6px; }
.meter-row { display: grid; grid-template-columns: 7em 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.meter-label { text-transform: uppercase; letter-spacing: var(--track); font-size: var(--fs-small); color: var(--dim); }
.meter { position: relative; height: 10px; border: 1px solid var(--line-strong); }
/* Dotted while there's room left; solid when exactly full; accent when over. */
.meter-bar { position: absolute; inset: 0 auto 0 0; width: calc(var(--fill, 0) * 100%); background: repeating-linear-gradient(90deg, var(--fg) 0 3px, transparent 3px 5px); }
.meter[data-state="full"] .meter-bar { background: var(--fg); }
.meter[data-state="over"] { border-color: var(--accent); }
.meter[data-state="over"] .meter-bar { background: var(--accent); }
.meter[data-state="unknown"] { border-style: dashed; }
.meter-value { white-space: nowrap; }
.ruler { display: flex; border: 1px solid var(--line); min-height: 28px; overflow: hidden; }
.ruler-seg {
  flex: 0 0 calc(var(--w) / var(--total) * 100%);
  border-right: 1px solid var(--line-strong);
  font-size: 10px; padding: 2px 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  text-decoration: none; text-transform: uppercase;
}
.ruler-seg:hover { background: var(--fg); color: var(--bg); }

/* ── drag to rearrange (racks) ── */
.rack-rows { position: relative; display: grid; gap: var(--gap); }
.ruler { position: relative; }
.ruler-seg, .row-handle { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.row-handle { display: flex; gap: 6px; align-items: center; }
.row-handle::before { content: '⠿'; color: var(--dim); font-size: 14px; line-height: 1; }
.row-handle .meter-row { flex: 1; }
.is-dragging { opacity: 0.3; }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; cursor: grabbing;
  background: var(--fg); color: var(--bg); opacity: 0.9; overflow: hidden;
}
.case-row.drag-ghost { background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); padding: 4px; }
.drop-marker { position: absolute; background: var(--accent); pointer-events: none; z-index: 2; }
.drop-marker.is-v { width: 2px; }
.drop-marker.is-h { height: 2px; }
.ruler-seg.unverified { border-right-style: dashed; }
.note { margin: 0; font-size: 12px; color: var(--dim); }
.note.is-warn, .tag.is-warn { color: var(--accent); }
.tag { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--track); }

/* ── controls ── */
.toolbar, .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn {
  appearance: none; background: none; color: var(--fg); font: inherit; font-size: 12px;
  text-transform: uppercase; letter-spacing: var(--track); text-decoration: none;
  border: 1px solid var(--line-strong); padding: 8px 12px; cursor: pointer; min-height: 36px;
  display: inline-flex; align-items: center;
}
.btn:hover, .btn:focus-visible { background: var(--fg); color: var(--bg); }
.btn.is-danger { border-color: var(--accent); color: var(--accent); }
.btn.is-danger:hover { background: var(--accent); color: var(--bg); }
.filter { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--track); color: var(--dim); }
.field, .filter select {
  width: 100%; background: var(--bg); color: var(--fg); font: inherit; font-size: 16px; /* 16px stops iOS zoom */
  border: 1px solid var(--line-strong); border-radius: 0; padding: 7px 8px;
}
.filter select { width: auto; font-size: 14px; }
textarea.field { resize: vertical; }
.fld { display: grid; gap: 4px; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--track); color: var(--dim); }
.fld .field { text-transform: none; letter-spacing: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gear-form { display: grid; gap: var(--gap); }
.grp { border: 1px solid var(--line); margin: 0; padding: 10px; display: grid; gap: 10px; }
.grp legend { padding: 0 6px; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--track); color: var(--dim); }
.row-edit { display: grid; grid-template-columns: 1fr 6em auto; gap: 8px; }
.price-form { display: grid; gap: 10px; }
.price-form label { display: grid; gap: 4px; font-size: var(--fs-small); text-transform: uppercase; color: var(--dim); }
.block-link { display: grid; gap: 6px; text-decoration: none; }
.block-link:hover .meter-label { color: var(--fg); }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.check input { width: 18px; height: 18px; accent-color: var(--fg); }
.quick-add { flex-wrap: nowrap; }
.quick-add .field { flex: 1; }
[hidden] { display: none !important; }

@media (max-width: 600px) {
  .hide-sm { display: none; }
  .meter-row { grid-template-columns: 5.5em 1fr; }
  .meter-value { grid-column: 2; font-size: 12px; }
  .tiles { grid-template-columns: 1fr; }
}