/* Standby page: the dashboard's palette (public/app.css), on one simple page. */
@font-face { font-family: Outfit; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/outfit-latin.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-latin.woff2") format("woff2"); }

:root {
  --page: #F3F6F5; --card: #FFFFFF; --inset: #EAEFEE; --ink: #0B1F24; --muted: #4A5A5F; --hairline: #DCE3E2;
  --accent: #076A5B; --on-accent: #FFFFFF; --ok: #076A5B; --ok-soft: #E4F2EE; --warn: #7A5200; --warn-soft: #FFF6E3;
  --bad: #B42318; --bad-soft: #FDECEA; --off: #4A5A5F; --off-soft: #EAEFEE; --radius: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #08161B; --card: #122A31; --inset: #0D2228; --ink: #E9F1EF; --muted: #9FB3B0; --hairline: #24474E;
    --accent: #3ED8BC; --on-accent: #08161B; --ok: #4FD8BE; --ok-soft: #113A35; --warn: #F4C95D; --warn-soft: #3A3115;
    --bad: #FF8A7E; --bad-soft: #3E1C1A; --off: #9FB3B0; --off-soft: #1B3A41;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.5 Inter, system-ui, sans-serif; }
h1, h2 { font-family: Outfit, Inter, sans-serif; font-weight: 600; margin: 0 0 12px; }
h1 { font-size: 24px; } h2 { font-size: 18px; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.brand { display: flex; align-items: center; gap: 8px; font-family: Outfit, sans-serif; font-weight: 600; font-size: 17px; }
.brand .mark { width: 18px; height: 18px; border-radius: 4px; background: var(--accent); }
.brand .tag { font: 600 12px Inter, sans-serif; padding: 2px 8px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); }
.top { background: var(--card); border-bottom: 1px solid var(--hairline); }
.top-in { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 16px; }
.top-in .fresh { margin-left: auto; font-size: 13px; }
.fresh.ok { color: var(--ok); } .fresh.bad { color: var(--bad); }
.banner-in { max-width: 1200px; margin: 16px auto 0; padding: 12px 16px; border-radius: var(--radius); }
.banner { padding: 0 16px; }
.banner-in.warn { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.banner-in.info { background: var(--inset); color: var(--muted); }
.banner-in.bad { background: var(--bad-soft); color: var(--bad); }
.wrap { max-width: 1200px; margin: 16px auto 40px; padding: 0 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--hairline); }
.kv:first-of-type { border-top: 0; }
.kv .k { color: var(--muted); } .kv .v { text-align: right; }
.pill { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.off { background: var(--off-soft); color: var(--off); }
.actions { display: flex; flex-direction: column; gap: 8px; }
button { font: inherit; min-height: 40px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--card); color: var(--ink); cursor: pointer; text-align: left; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.danger { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
button.link { border: 0; background: none; color: var(--accent); min-height: 0; padding: 4px; }
button:disabled { opacity: .5; cursor: default; }
table { width: 100%; border-collapse: collapse; }
td { padding: 6px 4px; border-top: 1px solid var(--hairline); }
tr:first-child td { border-top: 0; }
td:last-child { text-align: right; }
.events { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.events li { padding: 4px 0; border-top: 1px solid var(--hairline); }
.events li.refused { color: var(--bad); }
label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 14px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
input:not([type=checkbox]) { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--page); color: var(--ink); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login { width: 100%; max-width: 400px; }
.login .brand { margin-bottom: 16px; }
.login button { margin-top: 16px; width: 100%; text-align: center; }
.error { color: var(--bad); } .warn { color: var(--warn); }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); display: grid; place-items: center; padding: 16px; }
.dialog { width: 100%; max-width: 440px; }
.dialog .buttons { display: flex; gap: 8px; margin-top: 16px; }
/* Rescue page (AWS): a button row per outlet, the answer of the last action, and nothing wider than a phone. */
.notice { margin: 0 0 12px; }
.notice:empty { display: none; }
td.btns { white-space: nowrap; }
td.btns button { min-height: 36px; padding: 4px 12px; margin-left: 6px; text-align: center; font-size: 14px; }
button.danger-ghost { color: var(--bad); }
.events li, .kv .v, .banner-in, td { overflow-wrap: anywhere; }
.grid > * { min-width: 0; }
@media (pointer: coarse) { td.btns button { min-height: 44px; } }
@media (max-width: 560px) {
  table.outlets tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--hairline); padding: 6px 0; }
  table.outlets tr:first-child { border-top: 0; }
  table.outlets td { border-top: 0; padding: 2px 4px; }
  table.outlets td.btns { grid-column: 1 / -1; text-align: left; white-space: normal; }
  table.outlets td.btns button { margin: 4px 6px 0 0; }
}
.pill { white-space: nowrap; overflow-wrap: normal; }