/* Cockpit — the design system for the operator's control room.

   Loaded on EVERY page after style.css, so it must not restyle anything that
   does not opt in: every token is `--ck-*` and every class is `ck-*`. The old
   pages use bare names (.card, .badge, .pill, .ok, .warn, .btn, .empty, .muted)
   and would change under our feet if we reused them.

   A page opts into the calm white canvas with `{% block body_class %}ck{% endblock %}`.

   Colour rule: ONE accent (indigo) for controls, focus and neutral data
   (bars, progress). Green / orange / red appear ONLY as status — a green bar
   means "healthy", never "this is a button". That keeps a glance at the page
   honest: if something is red, something is wrong. */

:root {
  /* Surfaces */
  --ck-bg: #ffffff;
  --ck-surface: #ffffff;
  --ck-surface-2: #f7f8fa;          /* table head, bar track, quiet hover */
  --ck-border: #e7e9ef;
  --ck-border-strong: #d6dae3;

  /* Text — navy family, so it still reads as the Sitedish product */
  --ck-text: #14143c;
  --ck-text-2: #474e6b;
  --ck-muted: #7b8199;

  /* The one accent */
  --ck-accent: #4150c8;
  --ck-accent-hover: #333fa6;
  --ck-accent-wash: #eef0fb;

  /* Status only */
  --ck-ok: #16825d;   --ck-ok-wash: #e6f4ee;
  --ck-warn: #b45d0a; --ck-warn-wash: #fdf1e2;
  --ck-bad: #c0352b;  --ck-bad-wash: #fbeaea;
  --ck-neutral: #6b7188; --ck-neutral-wash: #f0f1f5;

  /* Rhythm — dense on purpose: one person, a big screen, lots of numbers */
  --ck-s1: 4px; --ck-s2: 8px; --ck-s3: 12px; --ck-s4: 16px; --ck-s5: 24px; --ck-s6: 32px;
  --ck-radius: 6px;
  --ck-radius-sm: 4px;
  --ck-fs-xs: 11px;
  --ck-fs-sm: 12.5px;
  --ck-fs: 13.5px;
  --ck-fs-md: 15px;
  --ck-fs-lg: 18px;
  --ck-fs-xl: 26px;
  --ck-shadow: 0 1px 2px rgba(20, 20, 60, .04);
  --ck-focus: 0 0 0 3px rgba(65, 80, 200, .22);
}

/* ---- Canvas ------------------------------------------------------------- */

body.ck { background: var(--ck-bg); color: var(--ck-text); font-size: var(--ck-fs); }
body.ck main { max-width: 1240px; padding: var(--ck-s5) var(--ck-s5) var(--ck-s6); }

.ck-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ck-muted { color: var(--ck-muted); }
.ck-none { color: var(--ck-muted); }                 /* a missing value: render "—" */
.ck-row { display: flex; align-items: center; gap: var(--ck-s2); flex-wrap: wrap; }
.ck-grow { flex: 1 1 auto; min-width: 0; }
.ck-stack > * + * { margin-top: var(--ck-s4); }
/* Links that DO something (an action slot) carry the accent; a venue name in a
   table stays navy text, or a list of 50 names turns into a wall of colour. */
.ck-link, .ck-cov-action a, .ck-alert-action, a.ck-alert-action { color: var(--ck-accent); }

/* ---- Page header -------------------------------------------------------- */

.ck-pagehead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--ck-s4); flex-wrap: wrap;
  margin: 0 0 var(--ck-s5); padding-bottom: var(--ck-s4);
  border-bottom: 1px solid var(--ck-border);
}
.ck-pagehead-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.ck-pagehead-sub { margin: 2px 0 0; color: var(--ck-muted); font-size: var(--ck-fs-sm); }
.ck-pagehead-actions { display: flex; align-items: center; gap: var(--ck-s2); flex-wrap: wrap; }

/* ---- Sections & grids --------------------------------------------------- */

.ck-section { margin: 0 0 var(--ck-s6); }
.ck-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--ck-s3);
  margin: 0 0 var(--ck-s3);
}
.ck-section-title {
  margin: 0; font-size: var(--ck-fs-sm); font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ck-text-2);
}
.ck-section-link { font-size: var(--ck-fs-sm); color: var(--ck-accent); }

.ck-grid { display: grid; gap: var(--ck-s4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ck-grid-2 { display: grid; gap: var(--ck-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-grid-3 { display: grid; gap: var(--ck-s4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck-grid-4 { display: grid; gap: var(--ck-s4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .ck-grid-2, .ck-grid-3, .ck-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Card --------------------------------------------------------------- */

.ck-card {
  background: var(--ck-surface); border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius); box-shadow: var(--ck-shadow);
  padding: var(--ck-s4); min-width: 0;
}
.ck-card-flush { padding: 0; overflow: hidden; }      /* a table or list edge to edge */
.ck-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ck-s3);
  margin: 0 0 var(--ck-s3);
}
.ck-card-flush > .ck-card-head { margin: 0; padding: var(--ck-s3) var(--ck-s4);
  border-bottom: 1px solid var(--ck-border); }
.ck-card-title { margin: 0; font-size: var(--ck-fs-md); font-weight: 600; }
.ck-card-foot {
  margin: var(--ck-s3) calc(-1 * var(--ck-s4)) calc(-1 * var(--ck-s4));
  padding: var(--ck-s2) var(--ck-s4); border-top: 1px solid var(--ck-border);
  font-size: var(--ck-fs-sm); color: var(--ck-muted);
}
.ck-card-flush > .ck-card-foot { margin: 0; }

/* ---- Stat tiles --------------------------------------------------------- */

.ck-stats { display: grid; gap: var(--ck-s3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ck-stat {
  background: var(--ck-surface); border: 1px solid var(--ck-border); border-radius: var(--ck-radius);
  padding: var(--ck-s3) var(--ck-s4); min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
a.ck-stat { color: inherit; }
a.ck-stat:hover { border-color: var(--ck-border-strong); text-decoration: none; }
.ck-stat-label { font-size: var(--ck-fs-sm); color: var(--ck-muted); }
.ck-stat-value {
  font-size: var(--ck-fs-xl); font-weight: 600; line-height: 1.15; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.ck-stat-delta { font-size: var(--ck-fs-xs); color: var(--ck-muted); font-variant-numeric: tabular-nums; }
/* A delta is good or bad for the BUSINESS, not up or down: "3 minder kapotte sites" is good. */
.ck-delta-good { color: var(--ck-ok); }
.ck-delta-bad { color: var(--ck-bad); }

/* ---- Coverage bars ------------------------------------------------------
   One row per field: label | bar | % | count | action. Every row is its own
   grid with the SAME fixed columns so rows line up without a table. */

.ck-covlist { display: flex; flex-direction: column; }
.ck-cov {
  display: grid; align-items: center; gap: var(--ck-s3);
  grid-template-columns: minmax(8rem, 1.1fr) minmax(6rem, 2fr) 3.2rem 5.5rem var(--ck-cov-action-w, 6.5rem);
  padding: 7px 0; border-bottom: 1px solid var(--ck-border);
}
.ck-cov:last-child { border-bottom: none; }
.ck-cov-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-cov-bar, .ck-progress {
  position: relative; height: 6px; border-radius: 999px;
  background: var(--ck-surface-2); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ck-border);
}
.ck-cov-fill, .ck-progress-fill {
  display: block; height: 100%; border-radius: inherit;
  background: var(--ck-accent); min-width: 2px; max-width: 100%;
}
.ck-cov-pct { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.ck-cov-count { font-variant-numeric: tabular-nums; text-align: right; color: var(--ck-muted);
  font-size: var(--ck-fs-sm); white-space: nowrap; }
.ck-cov-action { text-align: right; font-size: var(--ck-fs-sm); white-space: nowrap; }

/* Status tint for a bar or progress: put it on the row (.ck-cov) or on .ck-progress. */
.is-ok > .ck-cov-bar > .ck-cov-fill, .ck-progress.is-ok > .ck-progress-fill { background: var(--ck-ok); }
.is-warn > .ck-cov-bar > .ck-cov-fill, .ck-progress.is-warn > .ck-progress-fill { background: var(--ck-warn); }
.is-bad > .ck-cov-bar > .ck-cov-fill, .ck-progress.is-bad > .ck-progress-fill { background: var(--ck-bad); }

@media (max-width: 700px) {
  .ck-cov { grid-template-columns: 1fr 3rem; }
  .ck-cov-bar { grid-column: 1 / -1; order: 3; }
  .ck-cov-count, .ck-cov-action { display: none; }
}

/* ---- Progress ----------------------------------------------------------- */

.ck-progress-wrap { display: flex; flex-direction: column; gap: 4px; }
.ck-progress-meta {
  display: flex; justify-content: space-between; gap: var(--ck-s2);
  font-size: var(--ck-fs-sm); color: var(--ck-muted); font-variant-numeric: tabular-nums;
}
/* A running job moves; a finished one sits still. */
.ck-progress.is-running > .ck-progress-fill {
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: ck-shimmer 1.6s linear infinite;
}
@keyframes ck-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ck-progress.is-running > .ck-progress-fill { animation: none; }
}

/* ---- Status badges and dots --------------------------------------------- */

.ck-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: 999px; border: 1px solid transparent;
  font-size: var(--ck-fs-xs); font-weight: 600; line-height: 1.6; white-space: nowrap;
  background: var(--ck-neutral-wash); color: var(--ck-neutral);
}
.ck-badge-ok { background: var(--ck-ok-wash); color: var(--ck-ok); }
.ck-badge-warn { background: var(--ck-warn-wash); color: var(--ck-warn); }
.ck-badge-bad { background: var(--ck-bad-wash); color: var(--ck-bad); }
.ck-badge-neutral { background: var(--ck-neutral-wash); color: var(--ck-neutral); }

.ck-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ck-neutral); flex: 0 0 auto; vertical-align: middle; }
.ck-dot-ok { background: var(--ck-ok); }
.ck-dot-warn { background: var(--ck-warn); }
.ck-dot-bad { background: var(--ck-bad); }
.ck-dot-neutral { background: var(--ck-neutral); }

/* ---- Chips (active filters) --------------------------------------------- */

.ck-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ck-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--ck-accent-wash); color: var(--ck-accent);
  border: 1px solid transparent; font-size: var(--ck-fs-sm); font-weight: 500; white-space: nowrap;
}
.ck-chip-key { color: var(--ck-text-2); font-weight: 400; }
.ck-chip-remove {
  display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0;
  margin-right: -6px; border: none; border-radius: 50%; background: transparent; color: inherit;
  font-size: 14px; line-height: 1; cursor: pointer; text-decoration: none;
}
.ck-chip-remove:hover { background: rgba(65, 80, 200, .14); border: none; text-decoration: none; }
.ck-chip-add {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px dashed var(--ck-border-strong); background: transparent; color: var(--ck-muted);
  font-size: var(--ck-fs-sm); cursor: pointer;
}
.ck-chip-add:hover { border-color: var(--ck-accent); color: var(--ck-accent); background: transparent;
  text-decoration: none; }

/* ---- Source label: "bron · datum" next to a value ------------------------
   Every value on the venue card says where it came from and when. Tiny and
   muted, so the value stays the thing you read. */

.ck-src {
  display: inline-block; margin-left: 6px; vertical-align: baseline;
  font-size: var(--ck-fs-xs); color: var(--ck-muted); font-weight: 400; white-space: nowrap;
}
.ck-src.is-stale { color: var(--ck-warn); }          /* older than the freshness window */
.ck-src.is-conflict { color: var(--ck-bad); }        /* sources disagree */

/* ---- Key-value grid (venue card) ---------------------------------------- */

.ck-kv {
  display: grid; grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
  column-gap: var(--ck-s4); row-gap: 0; margin: 0;
}
.ck-kv > dt, .ck-kv > dd {
  padding: 6px 0; border-bottom: 1px solid var(--ck-border); margin: 0; min-width: 0;
}
.ck-kv > dt { color: var(--ck-muted); font-size: var(--ck-fs-sm); padding-top: 7px; }
.ck-kv > dd { overflow-wrap: anywhere; }
.ck-kv > dt:nth-last-of-type(1), .ck-kv > dd:last-of-type { border-bottom: none; }
/* Two pairs per line on a wide card. */
.ck-kv-2 { grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr) minmax(7.5rem, max-content) minmax(0, 1fr); }
@media (max-width: 900px) { .ck-kv-2 { grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr); } }

/* ---- Dense table -------------------------------------------------------- */

.ck-table-wrap { overflow-x: auto; }
table.ck-table {
  width: 100%; margin: 0; border-collapse: collapse; border: none; border-radius: 0;
  background: var(--ck-surface); font-size: var(--ck-fs-sm);
}
.ck-table th, .ck-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--ck-border); text-align: left; vertical-align: middle;
}
.ck-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ck-surface-2); color: var(--ck-muted);
  font-size: var(--ck-fs-xs); font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.ck-table th.ck-num, .ck-table td.ck-num { text-align: right; }
.ck-table tbody tr:nth-child(even) { background: transparent; }    /* no zebra: borders are enough */
.ck-table tbody tr:hover { background: var(--ck-surface-2); }
.ck-table tbody tr:last-child td { border-bottom: none; }

/* ---- Buttons -------------------------------------------------------------
   Use <button> or <a>. style.css styles bare `button` and `input[type=submit]`
   globally; `.ck-btn` overrides the former, not the latter. */

.ck-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: var(--ck-radius-sm);
  border: 1px solid var(--ck-border-strong); background: var(--ck-surface); color: var(--ck-text);
  font: inherit; font-size: var(--ck-fs-sm); font-weight: 500; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.ck-btn:hover { background: var(--ck-surface-2); border-color: var(--ck-border-strong);
  color: var(--ck-text); text-decoration: none; }
.ck-btn:focus-visible { outline: none; box-shadow: var(--ck-focus); }
.ck-btn:disabled, .ck-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.ck-btn-primary { background: var(--ck-accent); border-color: var(--ck-accent); color: #fff; }
.ck-btn-primary:hover { background: var(--ck-accent-hover); border-color: var(--ck-accent-hover); color: #fff; }

.ck-btn-quiet { background: transparent; border-color: transparent; color: var(--ck-accent); }
.ck-btn-quiet:hover { background: var(--ck-accent-wash); border-color: transparent; color: var(--ck-accent); }

.ck-btn-danger { background: var(--ck-surface); border-color: var(--ck-border-strong); color: var(--ck-bad); }
.ck-btn-danger:hover { background: var(--ck-bad-wash); border-color: var(--ck-bad); color: var(--ck-bad); }

.ck-btn-sm { height: 24px; padding: 0 8px; font-size: var(--ck-fs-xs); }

/* ---- Alert list ----------------------------------------------------------
   "What needs me?" — one line per problem, worst first, with the fix one click away. */

.ck-alerts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius); background: var(--ck-surface); overflow: hidden; }
.ck-alert {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center;
  gap: var(--ck-s3); padding: 9px var(--ck-s4); border-bottom: 1px solid var(--ck-border);
}
.ck-alert:last-child { border-bottom: none; }
.ck-alert::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ck-neutral); }
.ck-alert-ok::before { background: var(--ck-ok); }
.ck-alert-warn::before { background: var(--ck-warn); }
.ck-alert-bad::before { background: var(--ck-bad); }
.ck-alert-bad { background: linear-gradient(90deg, var(--ck-bad-wash), transparent 40%); }
.ck-alert-text { min-width: 0; }
.ck-alert-title { font-weight: 600; }
.ck-alert-body { color: var(--ck-text-2); font-size: var(--ck-fs-sm); }
.ck-alert-action { white-space: nowrap; font-size: var(--ck-fs-sm); }

/* ---- Empty state -------------------------------------------------------- */

.ck-empty {
  text-align: center; padding: var(--ck-s6) var(--ck-s4);
  border: 1px dashed var(--ck-border-strong); border-radius: var(--ck-radius);
  color: var(--ck-muted);
}
.ck-empty-title { margin: 0 0 4px; font-size: var(--ck-fs-md); font-weight: 600; color: var(--ck-text); }
.ck-empty-body { margin: 0 0 var(--ck-s3); font-size: var(--ck-fs-sm); }
.ck-empty > :last-child { margin-bottom: 0; }