/* server-backup dashboard. One stylesheet, no framework, light and dark. */

:root {
  color-scheme: light dark;
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1d2433;
  --muted: #5f6b7d;
  --faint: #8a94a5;
  --line: #e3e6eb;
  --soft: #f1f3f6;
  --brand: #2f6fde;
  --brand-ink: #ffffff;
  --ok: #17803d;
  --ok-bg: #eaf7ee;
  --ok-line: #bfe5cb;
  --warn: #9a5b00;
  --warn-bg: #fff6e5;
  --warn-line: #f3d9a4;
  --bad: #c62828;
  --bad-bg: #fdeeee;
  --bad-line: #f3c4c4;
  --idle: #4b5565;
  --idle-bg: #eef0f3;
  --idle-line: #dde1e7;
  --bar: #3d7be6;
  --bar-warn: #e0a020;
  --bar-fail: #d64545;
  --code-bg: #141a24;
  --code-ink: #dbe3ee;
  --focus: #2f6fde;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f131a;
    --card: #171c25;
    --ink: #e6eaf0;
    --muted: #a0aabb;
    --faint: #7a8597;
    --line: #29303c;
    --soft: #1e2430;
    --brand: #5b93f0;
    --brand-ink: #0b1220;
    --ok: #5ccf85;
    --ok-bg: #12261b;
    --ok-line: #24533a;
    --warn: #f0b555;
    --warn-bg: #2a2112;
    --warn-line: #5a4520;
    --bad: #f07a7a;
    --bad-bg: #2c1618;
    --bad-line: #5e2a2e;
    --idle: #b3bccb;
    --idle-bg: #1e2430;
    --idle-line: #333b49;
    --bar: #5b93f0;
    --bar-warn: #e8b04a;
    --bar-fail: #f07a7a;
    --code-bg: #0b0f15;
    --code-ink: #cfd8e3;
    --focus: #7aa8f5;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--brand); }

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 17px; font-weight: 650; }
h2 { font-size: 20px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
p { margin: 0; }

.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.bad-text { color: var(--bad); }
.warn-text { color: var(--warn); }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- the frame ------------------------------------------------------------------------ */

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.top .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top .brand svg { width: 22px; height: 22px; color: var(--brand); flex: none; }
.top .brand .host { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.top .who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.top form { margin: 0; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  min-width: 0;
}

.section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 12px;
}

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 32px;
  font-size: 12px;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
}

/* --- messages ------------------------------------------------------------------------- */

.msg { border-radius: 10px; padding: 10px 14px; border: 1px solid; font-size: 14px; }
.msg.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.msg.error { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.msg.info { background: var(--idle-bg); border-color: var(--idle-line); color: var(--idle); }

/* --- buttons and forms ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  list-style: none;
  user-select: none;
}
.btn:hover { background: var(--soft); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--muted); padding: 6px 10px; min-height: 32px; font-weight: 500; }
.btn.quiet:hover { background: var(--soft); color: var(--ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex: none; }
summary.btn::-webkit-details-marker { display: none; }
summary.btn::marker { content: ""; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.field { margin-bottom: 12px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

input[type=text], input[type=password], input[type=date], textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
}
input:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
textarea { resize: vertical; min-height: 64px; }

/* --- the state ------------------------------------------------------------------------ */

.hero-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.hero-text { display: flex; gap: 12px; flex: 1 1 300px; min-width: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.hero-actions form { margin: 0; }
.hero .state-icon { width: 34px; height: 34px; flex: none; margin-top: 1px; }
.hero h2 { margin-bottom: 2px; }
.hero .hint-text { font-size: 14px; color: var(--muted); }
.hero.healthy { background: var(--ok-bg); border-color: var(--ok-line); }
.hero.healthy h2, .hero.healthy .state-icon { color: var(--ok); }
.hero.paused { background: var(--warn-bg); border-color: var(--warn-line); }
.hero.paused h2, .hero.paused .state-icon { color: var(--warn); }
.hero.failing { background: var(--bad-bg); border-color: var(--bad-line); }
.hero.failing h2, .hero.failing .state-icon { color: var(--bad); }
.hero.not_set_up { background: var(--idle-bg); border-color: var(--idle-line); }
.hero.not_set_up h2, .hero.not_set_up .state-icon { color: var(--idle); }

details.action > summary { list-style: none; }
details.action[open] > summary { background: var(--soft); }
/* A panel shows while its button's <details> is open: by :has() where the
   browser has it (no script needed), else by the class app.js sets. Two rules,
   because a browser that does not know :has() drops the whole rule it is in. */
.action-panel { display: none; }
.action-panel.is-open { display: block; }
.hero:has(details[data-for="pause"][open]) .action-panel[data-panel="pause"] { display: block; }
.hero:has(details[data-for="resume"][open]) .action-panel[data-panel="resume"] { display: block; }
.action-panel {
  margin-top: 14px;
  padding: 16px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  max-width: 560px;
}
.action-panel h3 { margin-bottom: 10px; }
.action-panel .buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.panel-note { border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }

.inset {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 13px;
}
.inset p + p { margin-top: 2px; }

.facts { display: grid; gap: 12px 24px; margin: 16px 0 0; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts div { min-width: 0; }
.facts dt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; }
.facts dd .sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.facts dd .sub.bad-text { color: var(--bad); }
.facts dd .sub.warn-text { color: var(--warn); }

.notes { margin-top: 12px; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.notes p { display: flex; gap: 6px; align-items: center; }
.notes svg { width: 15px; height: 15px; flex: none; }
.spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

details.plain { margin-top: 10px; font-size: 13px; }
details.plain > summary { cursor: pointer; color: var(--warn); }
details.plain ul { margin: 6px 0 0; padding-left: 20px; color: var(--muted); }

/* --- tables and lists ----------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { padding: 6px 0; text-align: left; vertical-align: top; }
tr.row td { border-top: 1px solid var(--line); }
td.size { text-align: right; padding-left: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
th.group { padding-top: 14px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
tr.total td { font-weight: 700; border-top: 2px solid var(--line); }
td .hint-inline { color: var(--muted); font-size: 12px; margin-left: 6px; font-weight: 400; }

.sets { display: grid; gap: 16px; }
.sets h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sets ul { list-style: none; margin: 0; padding: 0; }
.sets li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sets li:first-child { border-top: 0; }
.sets li .grow { flex: 1; min-width: 0; }
.sets li .size { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sets svg { width: 16px; height: 16px; flex: none; }
.ok-icon { color: var(--ok); }
.warn-icon { color: var(--warn); }

/* --- space and upload ----------------------------------------------------------------- */

.meters { display: grid; gap: 18px; }
@media (min-width: 760px) { .meters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.meter-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.meter-head b { font-weight: 600; }
.meter { margin-top: 6px; height: 10px; border-radius: 999px; background: var(--soft); overflow: hidden; border: 1px solid var(--line); }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--bar); }
.meter > span.warn { background: var(--bar-warn); }
.meter > span.bad { background: var(--bar-fail); }

.stats { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--soft); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.stat .label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.stat .value { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat .hint { margin-top: 0; }

/* --- the 30-night charts: plain boxes; heights come from classes, never inline styles
       (the Content-Security-Policy allows no inline styles) ------------------------------ */

.chart { margin: 0; }
.chart + .chart { margin-top: 18px; }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 12px; margin-bottom: 4px; }
.chart-head b { font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 96px; border-bottom: 1px solid var(--line); }
.bars .col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.bars .bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--bar); }
.bars .bar.fail { background: var(--bar-fail); }
.bars .col:hover .bar { opacity: .75; }
.axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 12px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--bar-fail); }

/* --- the log and commands ------------------------------------------------------------- */

pre.log {
  margin: 12px 0 0;
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  border-radius: 10px;
  background: var(--code-bg);
  color: var(--code-ink);
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}
code.cmd {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--code-bg);
  color: var(--code-ink);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: auto;
  white-space: pre;
}
details.card > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }

/* --- the audit log -------------------------------------------------------------------- */

.audit td { font-size: 13px; padding: 7px 12px 7px 0; border-top: 1px solid var(--line); }
.audit th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 12px 6px 0; }
@media (max-width: 640px) {
  .audit thead { display: none; }
  .audit tr { display: block; border-top: 1px solid var(--line); padding: 8px 0; }
  .audit td { display: block; border: 0; padding: 0; }
  .audit td.when { font-weight: 600; }
}

/* --- sign-in -------------------------------------------------------------------------- */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login { width: 100%; max-width: 380px; }
.login .mark { width: 40px; height: 40px; color: var(--brand); margin-bottom: 10px; }
.login h1 { font-size: 20px; margin-bottom: 4px; }
.login .lead { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.login .btn.primary { width: 100%; justify-content: center; margin-top: 6px; }
.login .msg { margin-bottom: 14px; }
.login .foot { margin-top: 14px; font-size: 12px; color: var(--faint); text-align: center; }

/* --- widths and heights in whole percent, for the meters and the chart bars ------------ */

.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }
.h-0 { height: 0%; }
.h-1 { height: 1%; }
.h-2 { height: 2%; }
.h-3 { height: 3%; }
.h-4 { height: 4%; }
.h-5 { height: 5%; }
.h-6 { height: 6%; }
.h-7 { height: 7%; }
.h-8 { height: 8%; }
.h-9 { height: 9%; }
.h-10 { height: 10%; }
.h-11 { height: 11%; }
.h-12 { height: 12%; }
.h-13 { height: 13%; }
.h-14 { height: 14%; }
.h-15 { height: 15%; }
.h-16 { height: 16%; }
.h-17 { height: 17%; }
.h-18 { height: 18%; }
.h-19 { height: 19%; }
.h-20 { height: 20%; }
.h-21 { height: 21%; }
.h-22 { height: 22%; }
.h-23 { height: 23%; }
.h-24 { height: 24%; }
.h-25 { height: 25%; }
.h-26 { height: 26%; }
.h-27 { height: 27%; }
.h-28 { height: 28%; }
.h-29 { height: 29%; }
.h-30 { height: 30%; }
.h-31 { height: 31%; }
.h-32 { height: 32%; }
.h-33 { height: 33%; }
.h-34 { height: 34%; }
.h-35 { height: 35%; }
.h-36 { height: 36%; }
.h-37 { height: 37%; }
.h-38 { height: 38%; }
.h-39 { height: 39%; }
.h-40 { height: 40%; }
.h-41 { height: 41%; }
.h-42 { height: 42%; }
.h-43 { height: 43%; }
.h-44 { height: 44%; }
.h-45 { height: 45%; }
.h-46 { height: 46%; }
.h-47 { height: 47%; }
.h-48 { height: 48%; }
.h-49 { height: 49%; }
.h-50 { height: 50%; }
.h-51 { height: 51%; }
.h-52 { height: 52%; }
.h-53 { height: 53%; }
.h-54 { height: 54%; }
.h-55 { height: 55%; }
.h-56 { height: 56%; }
.h-57 { height: 57%; }
.h-58 { height: 58%; }
.h-59 { height: 59%; }
.h-60 { height: 60%; }
.h-61 { height: 61%; }
.h-62 { height: 62%; }
.h-63 { height: 63%; }
.h-64 { height: 64%; }
.h-65 { height: 65%; }
.h-66 { height: 66%; }
.h-67 { height: 67%; }
.h-68 { height: 68%; }
.h-69 { height: 69%; }
.h-70 { height: 70%; }
.h-71 { height: 71%; }
.h-72 { height: 72%; }
.h-73 { height: 73%; }
.h-74 { height: 74%; }
.h-75 { height: 75%; }
.h-76 { height: 76%; }
.h-77 { height: 77%; }
.h-78 { height: 78%; }
.h-79 { height: 79%; }
.h-80 { height: 80%; }
.h-81 { height: 81%; }
.h-82 { height: 82%; }
.h-83 { height: 83%; }
.h-84 { height: 84%; }
.h-85 { height: 85%; }
.h-86 { height: 86%; }
.h-87 { height: 87%; }
.h-88 { height: 88%; }
.h-89 { height: 89%; }
.h-90 { height: 90%; }
.h-91 { height: 91%; }
.h-92 { height: 92%; }
.h-93 { height: 93%; }
.h-94 { height: 94%; }
.h-95 { height: 95%; }
.h-96 { height: 96%; }
.h-97 { height: 97%; }
.h-98 { height: 98%; }
.h-99 { height: 99%; }
.h-100 { height: 100%; }