/* Setmore Watcher UI.
 *
 * Plain CSS, no build step and no framework: this is a handful of server
 * rendered pages, and a toolchain would be more moving parts than the styling
 * it produces. Respects the system colour scheme.
 */

:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e2e5ea;
  --text: #14181f;
  --muted: #667085;
  --accent: #0b6bcb;
  --ok: #16794c;
  --ok-bg: #e7f6ee;
  --warn: #92400e;
  --warn-bg: #fdf4e3;
  --bad: #b42318;
  --bad-bg: #fdeceb;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151a;
    --surface: #1a1f27;
    --border: #2a3039;
    --text: #e8ecf2;
    --muted: #98a2b3;
    --accent: #5aa8f0;
    --ok: #6ee7b7; --ok-bg: #10281f;
    --warn: #fcd34d; --warn-bg: #2b2109;
    --bad: #fca5a5; --bad-bg: #2a1414;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- chrome ------------------------------------------------------------ */

.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 650; text-decoration: none; color: var(--text); }
.topbar nav { display: flex; gap: 18px; margin-left: auto; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.topbar nav a:hover, .topbar nav a.active { color: var(--accent); }

/* Sign-out is a POST (a GET would be CSRF-able), but should still read as a
   nav link rather than a button. */
.signout { display: inline; margin: 0; }
button.linklike {
  background: none; border: none; padding: 0;
  font: inherit; font-size: 14px; color: var(--muted); cursor: pointer;
}
button.linklike:hover { color: var(--accent); filter: none; }

main { max-width: 940px; margin: 0 auto; padding: 28px 24px 64px; }
footer {
  max-width: 940px; margin: 0 auto; padding: 0 24px 40px;
  color: var(--muted); font-size: 13px;
}

h1 { font-size: 21px; margin: 0 0 6px; }
h2 { font-size: 16px; margin: 0 0 12px; }
a { color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
pre { background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
      padding: 12px; overflow-x: auto; }

/* --- surfaces ---------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.narrow { max-width: 380px; width: 100%; }
.centred { display: flex; justify-content: center; padding-top: 40px; }

.banner { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px;
          border: 1px solid transparent; }
.banner p { margin: 4px 0 0; }
.banner-ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.banner-stale { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.banner-bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }

.flash { border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.flash-error { background: var(--bad-bg); color: var(--bad); }
.flash-ok { background: var(--ok-bg); color: var(--ok); }

.hint { color: var(--muted); font-size: 13px; margin: 6px 0; }
.muted { color: var(--muted); }
.empty { text-align: center; padding: 48px 0; color: var(--muted); }
.empty-inline { color: var(--muted); font-size: 14px; }

/* --- slots ------------------------------------------------------------- */

.watch { margin-bottom: 32px; }
.meta { color: var(--muted); font-size: 13px; margin: 0 0 16px; }

.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.day h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
          color: var(--muted); margin: 0 0 10px; }
.times { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.times li {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
/* Padding sits on the anchor rather than the li so the whole chip is the click
   target, not just the four digits. The li keeps its own padding for the
   plain-text case, where a watch has no booking URL and renders no anchor. */
.times li { padding: 4px 9px; }
.times li:has(> a) { padding: 0; }
.times li > a {
  display: block; padding: 4px 9px; border-radius: 6px;
  color: inherit; text-decoration: none;
}
.times li > a:hover, .times li > a:focus-visible {
  background: var(--ok-bg); color: var(--accent);
}

/* --- tables ------------------------------------------------------------ */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 550; font-size: 12px;
     text-transform: uppercase; letter-spacing: .04em; }
tr.selected { background: var(--ok-bg); }
td.wrap { max-width: 320px; word-break: break-word; color: var(--muted); font-size: 13px; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.tag-on { background: var(--ok-bg); color: var(--ok); }
.tag-off { background: var(--bad-bg); color: var(--bad); }
.tag-new { background: var(--warn-bg); color: var(--warn); }

.stats { display: flex; gap: 40px; }
.stats .stat { display: block; font-size: 22px; font-weight: 600; }
.stats .label { color: var(--muted); font-size: 13px; }

/* --- forms ------------------------------------------------------------- */

form.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
form.grid .span, form.grid fieldset.span { grid-column: 1 / -1; }
form.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 240px; }

label { display: block; font-size: 13px; color: var(--muted); }
label.inline { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; color: var(--text); }

input, select {
  width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: 14px;
}
input[type="checkbox"] { width: auto; margin: 0; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
legend { color: var(--muted); font-size: 12px; padding: 0 6px; }

button {
  padding: 8px 16px; border-radius: 7px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font-size: 14px; cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.danger { background: transparent; color: var(--bad); border-color: var(--border); padding: 4px 10px; }

details { margin-top: 16px; }
summary { cursor: pointer; color: var(--accent); font-size: 14px; margin-bottom: 12px; }
.discovered { margin-top: 16px; }

/* --- inline editors ----------------------------------------------------- */
/* An edit form lives in a row of the table it edits, so the fields sit
   directly under the values they change. Hidden rows use the `hidden`
   attribute, which the toggle script flips. */
tr.editor > td { background: var(--card-alt, rgba(127, 127, 127, 0.06)); }
tr.editor form.grid { margin: 4px 0; }
td.actions { display: flex; gap: 10px; align-items: center; white-space: nowrap; }