/*
 * Admin panel theme layer — maps the Visit Umeå brand tokens (tokens.css)
 * onto Pico's CSS variables, then adds the shell layout. Load order:
 * pico.min.css → tokens.css → admin.css.
 */

:root,
:root:not([data-theme="dark"]),
[data-theme="light"] {
  --pico-font-family: var(--font-body);
  --pico-font-family-sans-serif: var(--font-body);
  --pico-border-radius: var(--radius);

  /* Pico scales the root font up to 125–131% on wide screens, which makes the
     whole UI feel oversized. Pin it down for a denser admin density. */
  --pico-font-size: 90%;

  --pico-background-color: var(--vu-cream);
  --pico-color: var(--vu-ink);

  --pico-card-background-color: var(--vu-white);
  --pico-card-border-color: var(--border-subtle);
  --pico-card-sectioning-background-color: var(--vu-white);

  --pico-muted-color: var(--vu-gray-700);
  --pico-muted-border-color: var(--border-subtle);

  /* Links / active accents → brand violet. */
  --pico-primary: var(--vu-violet);
  --pico-primary-hover: var(--vu-violet-strong);
  --pico-primary-focus: rgba(116, 89, 255, 0.35);
  --pico-primary-underline: transparent;

  /* Primary CTA → lavender fill, black text (the site's CTA style). */
  --pico-primary-background: var(--vu-lavender);
  --pico-primary-hover-background: var(--vu-lavender-2);
  --pico-primary-border: var(--vu-lavender);
  --pico-primary-hover-border: var(--vu-lavender-2);
  --pico-primary-inverse: var(--vu-black);

  /* Secondary → navy fill, white text. */
  --pico-secondary: var(--vu-navy);
  --pico-secondary-background: var(--vu-navy);
  --pico-secondary-hover-background: #00284a;
  --pico-secondary-border: var(--vu-navy);
  --pico-secondary-hover-border: #00284a;
  --pico-secondary-inverse: var(--vu-white);

  --pico-form-element-border-color: var(--border-strong);
  --pico-form-element-focus-color: var(--accent);

  --pico-del-color: var(--vu-danger);
}

/* ── Shell ─────────────────────────────────────────────────────────── */
.admin-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--vu-navy);
  color: var(--vu-white);
}
.admin-masthead a { color: var(--vu-white); }
.admin-brand {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: 400;
  font-size: calc(var(--fs-xl) - 2px);
}
/* Official Visit Umeå wordmark, rendered white to read on the navy masthead. */
.admin-brand .brand-logo {
  height: 38px;
  width: auto;
  flex: none;
  filter: brightness(0) invert(1);
}
.admin-user { display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-sm); }
.admin-site-link { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.admin-site-link:hover { opacity: 0.8; }
.admin-user-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
}
.admin-user-name .user-icon { opacity: 0.85; }
.admin-user form { margin: 0; }
.admin-user button {
  width: auto;
  margin: 0;
  padding: 0.4rem 1rem;
  font-size: var(--fs-sm);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--vu-white);
}

.admin-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}
@media (max-width: 720px) {
  .admin-layout { grid-template-columns: 1fr; }
}

/* Override Pico's `nav { display:flex }` so the links stack vertically
   instead of stretching to full column height as a row of flex items. */
.admin-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-1);
}
.admin-nav a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: none;
}
.admin-nav a.active { background: var(--vu-lavender); color: var(--vu-black); }
.admin-nav a:hover:not(.active) { background: var(--vu-cream-2); text-decoration: none; }

.admin-main { min-width: 0; }
.admin-main > article { margin-bottom: var(--space-5); }
/* Cards: use the calm brand shadow + a crisp border instead of Pico's heavy,
   blue-tinted multi-layer default (which read as odd directional shadows). */
.admin-main article { box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle); }

.admin-footer {
  text-align: left;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  padding: var(--space-5) var(--space-6) 20px;
}

/* Calmer heading scale for a dense admin UI (the 2.5rem hero size is
   reserved for the public site). */
.admin-main h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-5); }
.admin-main article h2 { font-size: var(--fs-lg); }

/* Don't let single-line form controls stretch the full card width. */
.admin-main select,
.admin-main input[type="text"],
.admin-main input[type="password"] { max-width: 32rem; }
.admin-main textarea { max-width: 44rem; }

.field-counter { font-size: var(--fs-xs); color: var(--text-muted); text-align: right; max-width: 44rem; }
.field-help { display: block; max-width: 44rem; }
.field-counter.over { color: var(--vu-danger); font-weight: 700; }

.status-msg { font-size: var(--fs-sm); margin-left: var(--space-3); }
.status-msg.ok { color: var(--vu-navy); }
.status-msg.err { color: var(--vu-danger); }

/* ── Confirm dialog ────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(33, 37, 41, 0.55);
}
.modal {
  width: 100%;
  max-width: 26rem;
  padding: var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
}
.modal-title { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--space-3); }
.modal-body { font-size: var(--fs-sm); margin: 0 0 var(--space-5); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-3); }
.modal-actions button {
  width: auto;
  margin: 0;
  padding: 0.5rem 1.1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.modal-actions .ghost { background: transparent; border-color: var(--border-strong); color: var(--text-primary); }
.modal-actions .ghost:hover { background: var(--vu-cream-2); }
.modal-actions .navy { background: var(--vu-navy); color: var(--vu-white); }
.modal-actions .navy:hover { background: #00284a; }
.modal-actions .danger { background: var(--vu-danger); color: var(--vu-white); }
.modal-actions .danger:hover { background: #8f201d; }

/* ── File gallery ──────────────────────────────────────────────────── */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.file-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.file-card.disabled { opacity: 0.55; }
.file-name { font-weight: 700; word-break: break-word; }
.file-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.file-actions { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); }
.file-actions button { width: auto; padding: 0.3rem 0.9rem; font-size: var(--fs-xs); margin: 0; }
.btn-delete { background: transparent; border: 1px solid var(--vu-danger); color: var(--vu-danger); }
.btn-delete:hover { background: var(--vu-danger); color: var(--vu-white); }

.badge { font-size: var(--fs-xs); padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); }
.badge.on { background: var(--vu-lavender); color: var(--vu-black); }
.badge.off { background: var(--vu-gray-200); color: var(--vu-gray-700); }

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
}
.dropzone.drag { border-color: var(--accent); background: var(--vu-cream-2); }
/* Estimated daily cost shown directly under the model-class dropdown. */
.cost-estimate { font-size: var(--fs-sm); color: var(--vu-violet-strong); font-weight: 600; margin: var(--space-2) 0 0; }

/* Cleanup switch sits above the dropzone — switch + label on one row. The label
   can wrap to two lines, so align to the top and optically center the switch on
   the first line rather than floating it in the middle of the paragraph. */
.cleanup-toggle { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.cleanup-toggle input[role="switch"] { margin: 0; flex: 0 0 auto; }
.cleanup-toggle small { color: var(--text-muted); line-height: 1.4; }

/* ── Stats ─────────────────────────────────────────────────────────── */
.stat-totals { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
.stat-total { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: var(--space-3) var(--space-4); min-width: 130px; }
.stat-total .n { font-size: var(--fs-2xl); font-weight: 700; }
.stat-total .l { font-size: var(--fs-xs); color: var(--text-muted); }
/* Two clean rows: quick presets on top, custom range + exports below. */
.range-bar { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); margin-bottom: var(--space-5); }
.range-custom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.range-custom .downloads { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.range-bar label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); margin: 0; }
.presets { flex-wrap: wrap; }
/* One clean line: every control shares the same compact height. */
.range-bar .preset,
.range-bar [role="button"],
.range-bar input[type="date"] {
  height: 2.25rem;
  margin: 0;
  padding: 0 var(--space-3);
  font-size: var(--fs-sm);
}
.range-bar .preset,
.range-bar [role="button"] { display: inline-flex; align-items: center; }
.range-bar input[type="date"] { width: auto; }
.stat-table { font-size: var(--fs-sm); width: 100%; border-collapse: collapse; }
.stat-table th, .stat-table td { text-align: right; padding: 0.5rem 0.75rem; }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; }
.stat-table thead th {
  background: var(--vu-navy);
  color: var(--vu-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-table thead th:first-child { border-top-left-radius: var(--radius); }
.stat-table thead th:last-child { border-top-right-radius: var(--radius); }
.stat-table tbody tr:nth-child(even) { background: var(--vu-cream); }
.stat-table tbody tr:hover { background: var(--vu-lavender); }
.stat-table tbody td { border-bottom: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; }

/* Daily-table pagination */
.table-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.table-toolbar label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); margin: 0; }
.table-toolbar select { width: auto; height: 2.25rem; margin: 0; padding: 0 1.8rem 0 var(--space-3); font-size: var(--fs-sm); }
.table-count { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); font-size: var(--fs-sm); }
.pager button { width: auto; height: 2.25rem; margin: 0; padding: 0 var(--space-4); font-size: var(--fs-sm); display: inline-flex; align-items: center; }
.pager span { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart-wrap { position: relative; height: 340px; }
.chart-wrap.sm { height: 260px; }

/* Preset buttons */
.presets { display: flex; gap: var(--space-2); }
.preset {
  width: auto; margin: 0; padding: 0.4rem 0.9rem;
  font-size: var(--fs-sm); background: var(--surface-card);
  color: var(--text-primary); border: 1px solid var(--border-strong);
}
.preset.active { background: var(--vu-navy); color: var(--vu-white); border-color: var(--vu-navy); }

/* Month-to-date callout */
.mtd {
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  background: var(--vu-navy); color: var(--vu-white);
}
.mtd .mtd-label { font-size: var(--fs-sm); opacity: 0.85; }
.mtd .mtd-value { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.mtd .mtd-value.muted { color: var(--vu-lavender); }

/* KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.kpi {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: var(--space-4);
}
.kpi .n { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .l { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }

/* Two-up chart grid */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);   /* the grid is a <div>, so it needs its own gap to the next panel */
}
.chart-grid > article { margin-bottom: 0; }

/* ── Data tab ──────────────────────────────────────────────────────── */
.muted { color: var(--text-muted); }

.data-freshness { font-size: var(--fs-sm); margin: 0 0 var(--space-4); }
.run-badge {
  font-size: var(--fs-xs); font-weight: 700; padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.03em;
}
.run-badge.run-success { background: var(--vu-lavender); color: var(--vu-black); }
.run-badge.run-running { background: var(--vu-gray-200); color: var(--vu-gray-700); }
.run-badge.run-failed  { background: var(--vu-danger); color: var(--vu-white); }

/* Flashy "what we know" cards */
.data-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.data-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.data-card .n { font-size: calc(var(--fs-2xl) + 0.4rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.data-card .l { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; }
.data-card .s { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }
/* The headline card leads with the violet; the "new this week" card is the one warm note. */
.data-card.accent { border-left: 4px solid var(--vu-violet); }
.data-card.accent .n { color: var(--vu-violet-strong); }
.data-card.highlight { background: var(--vu-navy); border-color: var(--vu-navy); }
.data-card.highlight .n, .data-card.highlight .l { color: var(--vu-white); }

.data-note { font-size: var(--fs-sm); margin-top: var(--space-3); }

/* Filters */
.data-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.data-filters label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-sm); margin: 0; }
.data-filters label.grow { flex: 1 1 16rem; }
.data-filters label.check { flex-direction: row; align-items: center; gap: var(--space-2); white-space: nowrap; }
/* min-height (not a fixed height) so the control + its focus ring aren't
   clipped — a hard height cropped the focused select's outline. */
.data-filters input, .data-filters select { margin: 0; min-height: 2.5rem; }
.data-filters label.check input { min-height: 0; height: auto; width: auto; }

/* Small count under the search heading. */
.data-subcount { font-size: var(--fs-sm); margin: calc(-1 * var(--space-2)) 0 var(--space-4); }

/* Clickable result rows */
.data-table .row-link { cursor: pointer; }
.data-table .row-link:focus-visible { outline: 2px solid var(--vu-violet); outline-offset: -2px; }
/* Source (Källa) cell keeps its label + tier badge on one line. */
.data-table td.src { white-space: nowrap; }
/* Title that links out to the event's own source page (opens in a new tab). */
.data-table .source-link { color: var(--accent); text-decoration: none; }
.data-table .source-link:hover { text-decoration: underline; }
.data-table .source-link::after { content: " ↗"; font-size: 0.85em; opacity: 0.7; }

/* Tier + status pills (shared by list + detail) */
.tier-badge {
  font-size: var(--fs-xs); font-weight: 700; padding: 0.05rem 0.4rem;
  border-radius: var(--radius-pill); color: var(--vu-white); margin-left: var(--space-2);
}
.tier-badge.t1 { background: var(--vu-violet); }
.tier-badge.t2 { background: var(--vu-navy); }
.tier-badge.t3 { background: var(--vu-blue); }
.tier-badge.t4 { background: var(--vu-coral); color: var(--vu-black); }

.status-pill { font-size: var(--fs-xs); font-weight: 600; padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); }
.status-pill.current { background: var(--vu-lavender); color: var(--vu-black); }
.status-pill.archived { background: var(--vu-gray-200); color: var(--vu-gray-700); }

/* ── Data detail page ──────────────────────────────────────────────── */
.back-link { font-size: var(--fs-sm); text-decoration: none; }
.back-link:hover { text-decoration: underline; }

.detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.detail-head h1 { margin: 0; font-size: var(--fs-2xl); }
.kind-tag { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--vu-navy); color: var(--vu-white); padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); }

.detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.detail-meta .k { display: block; font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.detail-meta .v { font-size: var(--fs-sm); word-break: break-word; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.chip { font-size: var(--fs-xs); background: var(--vu-cream-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 0.15rem 0.6rem; text-transform: capitalize; }

.occasions { margin-bottom: var(--space-4); }
.occasions .k { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.occasions ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.detail-body { font-size: var(--fs-sm); white-space: pre-wrap; }
.detail-dates { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-xs); margin-top: var(--space-4); }

/* Ingest-history timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--fs-sm); }
.timeline .tl-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--vu-gray-400); }
.timeline .tl-insert .tl-dot { background: var(--vu-violet); }
.timeline .tl-update .tl-dot { background: var(--vu-blue); }
.timeline .tl-disappeared .tl-dot { background: var(--vu-coral); }
.timeline .tl-action { font-weight: 600; min-width: 6rem; text-transform: capitalize; }
.timeline .tl-hash { font-size: var(--fs-xs); color: var(--text-muted); }

/* Raw-JSON block */
.json-block summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.json-view {
  margin-top: var(--space-3); padding: var(--space-4);
  background: #1e1b2e; color: #e8e3ff; border-radius: var(--radius);
  font-size: var(--fs-xs); line-height: 1.5; overflow-x: auto;
  white-space: pre; tab-size: 2;
}
.json-view .j-key { color: #b4a6ff; }
.json-view .j-str { color: #9be3a4; }
.json-view .j-num { color: #ffb27a; }
.json-view .j-bool { color: #7ac7ff; font-weight: 600; }
.json-view .j-null { color: #c0b9d6; font-style: italic; }