/* Backup server interface - mydawa.
   Palette taken from the mydawa logo: a near-neutral warm paper ground, the
   brand magenta as the colour of authority (primary actions, focus, selection,
   active states) and the leaf green as the colour of the file system itself
   (folder glyphs). Hairline rules and tabular figures carry the structure;
   nothing is decorated for its own sake.

   Everything is painted from the tokens below, so the dark theme is one
   override block and no rule has to know which theme is on. theme.js resolves
   the operator's choice (system / light / dark) and writes it to
   <html data-theme>; the tokens here are the light set. */

:root {
  color-scheme: light;
  --ground: #faf9f9;
  --surface: #f2f0f1;
  --sunken: #e9e7e8;
  --line: #ddd9da;
  --line-strong: #b6b1b3;
  --ink: #211c1e;
  --muted: #625b5e;
  --accent: #e61c77;        /* brand magenta: marks, focus, active state */
  --accent-ink: #c2145f;    /* the same magenta, dark enough for text (5.6:1) */
  --accent-soft: #fdecf4;
  --accent-line: #f2b9d3;   /* hairline around accent surfaces */
  --accent-text: #a10d4e;   /* accent on --accent-soft (6.9:1) */
  --ok: #4e9b2f;            /* leaf green: folder glyphs, the file system */
  --action: #c1145e;        /* solid primary button; white text clears 5.9:1 */
  --action-ink: #ffffff;
  --action-hover: #a90f52;
  --action-active: #8f0c45;
  --scrim: rgba(33, 28, 30, 0.35);
  --radius: 4px;
  --gap: 8px;
  --row-h: 30px;

  /* Three roles, deliberately distinct. Nunito's rounded terminals answer the
     logo's warm, care-led wordmark and carry the display voice; IBM Plex Sans
     is the disciplined UI face for dense listings and has true tabular
     figures; IBM Plex Mono holds paths, sizes and times so columns line up. */
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Nunito", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark theme. The neutrals keep the warm cast, inverted; the magenta is
   lightened for a dark ground and the primary button flips to dark ink on a
   bright fill (6.2:1), because white on the bright magenta does not carry. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #191418;
  --surface: #211b1f;
  --sunken: #2a2328;
  --line: #352d32;
  --line-strong: #80747b;   /* 4.0:1 on ground: control edges must read on dark */
  --ink: #f2eef0;
  --muted: #ab9fa5;
  --accent: #ff5ba0;
  --accent-ink: #ff8fbd;
  --accent-soft: #3a1f2c;
  --accent-line: #6e2f4b;
  --accent-text: #ffa9cb;
  --ok: #8ed36a;
  --action: #ff5ba0;
  --action-ink: #2b0a1c;
  --action-hover: #ff77b2;
  --action-active: #ff94c2;
  --scrim: rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  font: 500 13px/1 var(--font-body);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 7px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 90ms linear, border-color 90ms linear;
}

.btn:hover:not(:disabled) { background: var(--surface); }
.btn:active:not(:disabled) { background: var(--sunken); }
.btn:disabled { color: var(--line-strong); cursor: not-allowed; }

.btn--primary {
  background: var(--action);
  color: var(--action-ink);
  border-color: var(--action);
}
.btn--primary:hover:not(:disabled) { background: var(--action-hover); border-color: var(--action-hover); }
.btn--primary:active:not(:disabled) { background: var(--action-active); border-color: var(--action-active); }
.btn--primary:disabled { background: var(--sunken); border-color: var(--line-strong); color: var(--line-strong); }

.btn--danger { color: var(--accent-ink); border-color: var(--accent-line); }
.btn--danger:hover:not(:disabled) { background: var(--accent-soft); }

.btn--quiet { border-color: transparent; background: transparent; }
.btn--quiet:hover:not(:disabled) { background: var(--surface); border-color: var(--line); }

.btn--small { padding: 4px 8px; font-size: 12px; }
.btn--wide { width: 100%; padding: 9px 12px; }

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

.gate {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--ground);
}

.gate__panel {
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 24px;
}

.gate__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* The logo is the one loud element: brand magenta and leaf green, on a
   transparent ground so it sits on either theme without a plate behind it. */
.brandmark {
  display: block;
  height: 34px;
  width: auto;
}

.brandmark--bar {
  height: 22px;
}

/* The theme toggle rides the brand row, opposite the logo. */
.gate__brand [data-theme-toggle] { margin-left: auto; }

.gate__host, .commandbar__volume {
  font-size: 12px;
  color: var(--muted);
}

.gate__host { margin: 0 0 20px; }

.gate__title { font-size: 26px; margin-bottom: 8px; }

.gate__note {
  margin: 0 0 24px;
  color: var(--muted);
  max-width: 46ch;
}

.field { margin-bottom: 16px; }

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

.field input {
  width: 100%;
  font: 400 14px/1.3 var(--font-body);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 9px 10px;
}

.field input:focus { border-color: var(--ink); }

.alert {
  margin: 0 0 16px;
  padding: 9px 10px;
  border: 1px solid var(--accent-line);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 13px;
}

/* ----------------------------------------------------------------- shell */

.shell {
  height: 100%;
  display: grid;
  grid-template-rows: 48px 44px minmax(0, 1fr) 30px;
}

.commandbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}

.commandbar__brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.commandbar__volume {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.crumbs {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  height: 100%;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.crumb {
  font: 500 13px/1 var(--font-body);
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 3px;
  padding: 5px 7px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumb:hover { background: var(--surface); color: var(--ink); }
.crumb[aria-current="page"] { color: var(--ink); font-weight: 600; }
.crumb__sep { color: var(--line-strong); user-select: none; }

.crumb--overflow { font-family: var(--font-mono); }

.commandbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.identity { font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------- toolbar */

.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.toolbar__group { display: flex; align-items: center; gap: 8px; }
.toolbar__group--grow { flex: 1 1 auto; justify-content: flex-end; }

.search { position: relative; flex: 0 1 260px; }

.search input {
  width: 100%;
  font: 400 13px/1 var(--font-body);
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--ink);
}

.search input::-webkit-search-cancel-button { cursor: pointer; }

.toggle, .select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.toggle input { accent-color: var(--accent); }

.select select {
  font: 400 12px/1 var(--font-body);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 6px 8px;
}

/* ------------------------------------------------------------- workspace */

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-height: 0;
  border-bottom: 1px solid var(--line);
}

.panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.panel--list { background: var(--ground); position: relative; }
.panel--detail {
  background: var(--surface);
  border-left: 1px solid var(--line);
  overflow: auto;
}

.tablewrap { flex: 1 1 auto; overflow: auto; }

table.files {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.files thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ground);
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  padding: 0;
  white-space: nowrap;
}

.files thead th.col-check { width: 34px; padding: 6px 8px 6px 12px; }

.sorter {
  font: 500 12px/1 var(--font-body);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.sorter:hover { color: var(--ink); }
.sorter[data-active="true"] { color: var(--ink); }
.sorter[data-active="true"]::after { content: attr(data-direction); font-size: 10px; margin-left: 4px; }

.files td {
  border-bottom: 1px solid var(--line);
  padding: 0 8px;
  height: var(--row-h);
  vertical-align: middle;
  white-space: nowrap;
}

.files tbody tr:hover { background: var(--surface); }
.files tbody tr.is-selected { background: var(--sunken); }
.files tbody tr.is-focused { box-shadow: inset 0 0 0 1px var(--ink); }

.col-check { width: 34px; }
.col-size { width: 110px; text-align: right; }
.col-time { width: 168px; }
.col-kind { width: 120px; }
.files td.col-size { text-align: right; font-family: var(--font-mono); font-size: 12px; }
.files td.col-time, .files td.col-kind { color: var(--muted); font-size: 12px; }

.files input[type="checkbox"] { accent-color: var(--accent); }

.entry {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.entry__open {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font: 500 13.5px/1 var(--font-body);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 3px;
  padding: 5px 6px;
  margin-left: -6px;
  cursor: pointer;
  text-align: left;
}

.entry__open:hover { background: var(--surface); text-decoration: underline; text-underline-offset: 2px; }
.entry__open .entry__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.entry__icon {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--ground);
}

.entry__icon--folder { background: var(--ok); border-color: var(--ok); }
.entry__icon--link { border-style: dashed; border-color: var(--accent); }
.entry__icon--file { background: var(--ground); }

.entry__badge {
  font: 500 10.5px/1 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  border: 1px solid var(--accent-line);
  border-radius: 2px;
  padding: 2px 4px;
}

.entry__badge--muted { color: var(--muted); border-color: var(--line-strong); }

.entry--missing .entry__name { color: var(--muted); text-decoration: line-through; }

.listing-empty { padding: 32px 16px; color: var(--muted); }
.listing-empty__head { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 4px; }
.listing-empty__note { margin: 0; }

.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  background: var(--ground);
}

.pager__label { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ detail rail */

.detail__empty { padding: 16px; }
.detail__hint { color: var(--muted); margin: 0 0 16px; }
.detail__body { display: flex; flex-direction: column; min-height: 0; }

.detail__head { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.detail__name { font-size: 17px; word-break: break-word; }
.detail__path { margin: 4px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--muted); word-break: break-all; }

.spec {
  margin: 0;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  border-bottom: 1px solid var(--line);
}
.spec:last-child { border-bottom: 0; }
.spec dt { color: var(--muted); font-size: 12px; }
.spec dd { margin: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; word-break: break-word; }

.detail__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }

.preview { border-top: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.preview__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--muted);
}
.preview__note { font-variant-numeric: tabular-nums; }
.preview__code {
  margin: 0;
  padding: 0 16px 16px;
  max-height: 320px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre;
}

/* ------------------------------------------------------------- status bar */

.statusbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.statusbar__cell--grow { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statusbar__cell--attention { color: var(--accent-ink); }

.job { display: flex; align-items: center; gap: 8px; }
.job__label { font-variant-numeric: tabular-nums; }

.meter {
  display: inline-block;
  width: 120px;
  height: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--ground);
  overflow: hidden;
}
.meter__fill { display: block; height: 100%; width: 0; background: var(--ink); }
.meter__fill--active { background: var(--accent); }

/* --------------------------------------------------------------- uploads */

.uploads {
  position: fixed;
  right: 16px;
  bottom: 42px;
  width: min(340px, calc(100vw - 32px));
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  max-height: 40vh;
  overflow: auto;
}

.uploads__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.upload {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.upload:last-child { border-bottom: 0; }
.upload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__state { color: var(--muted); font-variant-numeric: tabular-nums; }
.upload__state--failed { color: var(--accent-ink); }
.upload__meter { grid-column: 1 / -1; }
.upload__meter .meter { width: 100%; }

/* --------------------------------------------------------------- overlay */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  z-index: 20;
}

.dialog {
  width: min(720px, 100%);
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.dialog__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.dialog__title { font-size: 16px; flex: 0 0 auto; }
.dialog__tabs { display: flex; gap: 4px; flex: 1 1 auto; }

.tab {
  font: 500 13px/1 var(--font-body);
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 6px 8px;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }

.dialog__body { padding: 16px; overflow: auto; flex: 1 1 auto; }
.dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.dialog__foot:empty { display: none; }

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.row:last-child { border-bottom: 0; }
.row__main { flex: 1 1 auto; min-width: 0; display: block; }
.row__name { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.field--inline { display: flex; gap: 8px; align-items: center; margin: 0; }
.field--inline input {
  flex: 1 1 auto;
  font: 400 14px/1.3 var(--font-body);
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--ink);
}

.hint { color: var(--muted); margin: 0 0 12px; }

/* --------------------------------------------------------------- toasts */

.toasts {
  position: fixed;
  left: 16px;
  bottom: 42px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 30;
  max-width: min(420px, calc(100vw - 32px));
}

.toast {
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
}

.toast--error { border-left-color: var(--accent); color: var(--accent-text); }

/* ---------------------------------------------------------- narrow screens */

@media (max-width: 900px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .panel--detail { display: none; }
  .commandbar { gap: 8px; }
  .crumbs { padding-left: 8px; }
}

@media (max-width: 640px) {
  .toolbar { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; }
  .shell { grid-template-rows: 48px auto minmax(0, 1fr) 30px; }
  .col-kind, .col-time { display: none; }
  .identity { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* The Microsoft button sits under the password form, separated by a rule, so the
   two sign-in routes read as alternatives rather than as parts of one form. */
.gate__oauth {
  margin-top: 1.25rem;
}

.gate__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gate__divider::before,
.gate__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}