/* =========================================================
   Run Counter — iframe widget
   Colors match the Yard Door Board. Sizes scale with the
   iframe itself (vw/vh = the iframe's box, not the screen).
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --bg:        #071116;
  --panel:     #0c1a20;
  --panel-2:   #10242c;
  --line:      #203741;
  --text:      #eef7f6;
  --muted:     #94aaa8;

  --c-target:     #eef7f6;
  --c-completed:  #4aa3ff;
  --c-pooled:     #19b59f;
  --c-dispatched: #31c36b;
  --c-warn:       #f0b541;
  --c-bad:        #f16d6d;

  --radius: 12px;
  --gap: clamp(6px, 1.6vw, 12px);
  --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

button, input { font: inherit; color: inherit; }

/* ---------- Layout ---------- */
.widget {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: 100%;
  padding: var(--gap);
}

/* ---------- Top bar ---------- */
.bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.bar__title {
  margin: 0;
  font-size: clamp(.9rem, 2.4vw, 1.1rem);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bar__date {
  color: var(--muted);
  font-size: .8rem;
}

.status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: .75rem;
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-warn);
}

.status.is-live .status__dot { background: var(--c-dispatched); }
.status.is-down .status__dot { background: var(--c-bad); }
.status.is-down              { color: var(--c-bad); }

/* ---------- Tiles ---------- */
.tiles {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* one row by default */
  gap: var(--gap);
  min-height: 0;
}

/* Narrow but tall iframe: 2 x 2 */
@media (max-width: 520px) and (min-height: 260px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(8px, 2vw, 16px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--accent, var(--line));
  border-radius: var(--radius);
  text-align: left;
}

.tile__label {
  color: var(--muted);
  font-size: clamp(.65rem, 1.8vw, .8rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tile__value {
  color: var(--accent, var(--text));
  font-size: clamp(1.8rem, min(9vw, 18vh), 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.tile__hint {
  color: var(--muted);
  font-size: .72rem;
}

.tile--target     { --accent: var(--c-target); }
.tile--completed  { --accent: var(--c-completed); }
.tile--pooled     { --accent: var(--c-pooled); }
.tile--dispatched { --accent: var(--c-dispatched); }

/* Runs Today is tappable to edit */
button.tile {
  cursor: pointer;
  transition: background .15s;
}
button.tile:hover         { background: var(--panel-2); }
button.tile:focus-visible { outline: 3px solid rgba(74, 163, 255, .55); outline-offset: 2px; }

.tile--target.is-unset .tile__value { color: var(--c-warn); }
.tile--target.is-unset .tile__hint  { color: var(--c-warn); font-weight: 700; }

/* ---------- Progress ---------- */
.progress__track {
  height: 8px;
  overflow: hidden;
  background: var(--panel-2);
  border-radius: 999px;
}

.progress__fill {
  width: 0;
  height: 100%;
  background: var(--c-completed);
  border-radius: inherit;
  transition: width .4s ease;
}

.progress.is-done .progress__fill { background: var(--c-dispatched); }

.progress__text {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .75rem;
}

/* ---------- Prompt dialog ---------- */
.prompt {
  width: min(320px, calc(100vw - 24px));
  padding: 0;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.prompt::backdrop { background: rgba(0, 0, 0, .6); }

.prompt__form {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.prompt__title { margin: 0; font-size: 1.1rem; }
.prompt__date  { margin: 0; color: var(--muted); font-size: .85rem; }

.prompt__input {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  background: #08171d;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
}
.prompt__input:focus-visible { outline: 3px solid rgba(74, 163, 255, .55); outline-offset: 2px; }

.prompt__error {
  min-height: 1em;
  margin: 0;
  color: var(--c-bad);
  font-size: .8rem;
}

.prompt__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Buttons ---------- */
.btn {
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  font-weight: 800;
  cursor: pointer;
}

.btn--primary { background: var(--c-pooled); color: #04110f; border-color: transparent; }
.btn--ghost   { background: transparent; }

/* ---------- Short iframes: drop the extras ---------- */
@media (max-height: 170px) {
  .tile__hint, .progress__text { display: none; }
}

/* Tight width in a single row: smaller labels so they don't clip */
@media (max-width: 520px) and (max-height: 259px) {
  .tile       { padding: 6px 8px; }
  .tile__label { font-size: .6rem; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}