:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1f232c;
  --border: #2a2f3a;
  --text: #e6e8ec;
  --muted: #9aa3b2;
  --accent: #4f8cff;
  --accent-2: #3a6fd8;
  --ok: #22c55e;
  --warn: #f59e0b;
  --err: #ef4444;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

/* The HTML `hidden` attribute is defined as `display: none` via the
   user-agent stylesheet (lowest specificity). Several rules in this
   file set display:flex/grid on classes (e.g. .tab-panel), which would
   otherwise win and keep "hidden" elements visible. Force the
   semantically-correct behaviour. */
[hidden] { display: none !important; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--muted); }
.error { color: var(--err); margin: 0.5rem 0 0 0; }
.good { color: var(--ok); }
.bad { color: var(--err); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.small { font-size: 0.85em; }
.right { justify-content: flex-end; }

/* ---------- topbar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.topbar-left { display: flex; gap: 1.5rem; align-items: center; }
.topbar-right { display: flex; gap: 0.75rem; align-items: center; }
.brand { font-weight: 600; color: var(--text); }
.brand:hover { text-decoration: none; color: var(--accent); }
.nav-links { display: flex; gap: 0.5rem; }
.nav-link {
  color: var(--muted);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
}
.nav-link:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav-link.active { color: var(--text); background: var(--panel-2); }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  background: transparent;
  border: 1px solid transparent;
  font: inherit;
  cursor: pointer;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 220px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  z-index: 50;
}
.dropdown-menu li { margin: 0; }
.dropdown-item {
  display: block;
  padding: 0.5rem 0.9rem;
  color: var(--text);
}
.dropdown-item:hover {
  background: var(--panel-2);
  text-decoration: none;
}

/* ---------- pages ---------- */
.page {
  padding: 1.25rem 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}
.page.narrow { max-width: 720px; }
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}
.page-head h1 { margin: 0; font-size: 1.2rem; }
.back-link { display: block; color: var(--muted); margin-bottom: 0.2rem; font-size: 0.85rem; }

.centered {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

/* ---------- cards / split layout ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}
.card h2 { margin: 0 0 0.75rem 0; font-size: 1rem; }
.card.narrow { width: 100%; max-width: 360px; }
.card.wide { grid-column: 1 / -1; }

.split {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}
.split .sidebar { position: sticky; top: 1rem; }

/* ---------- forms ---------- */
form { display: flex; flex-direction: column; gap: 0.7rem; }
label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}
label.inline { flex-direction: row; align-items: center; gap: 0.5rem; }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], textarea, select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: transparent;
}

button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
button.primary { background: var(--accent); border-color: var(--accent); color: white; }
button.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
button.ghost { background: transparent; }
button.small, a.small { padding: 0.25rem 0.55rem; font-size: 0.85em; }
button.danger { color: #ffb4b4; border-color: #5a2a2a; }
button.danger:hover { background: #3a1f1f; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
a.ghost {
  display: inline-block;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
}

.row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.input-with-action { display: flex; gap: 0.4rem; align-items: stretch; min-width: 0; }
.input-with-action input { flex: 1 1 auto; min-width: 4ch; width: auto; }
.input-with-action button { flex: 0 0 auto; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.actions { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.sticky-actions {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--panel) 70%, transparent);
  padding-top: 0.6rem;
  align-items: center;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem 0.9rem;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
fieldset legend { padding: 0 0.4rem; color: var(--muted); font-size: 0.85rem; }

/* ---------- key-value list ---------- */
.kv {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.35rem 0.8rem;
  margin: 0 0 0.6rem 0;
}
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }

/* ---------- tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
thead th {
  text-align: left;
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0.55rem;
  color: var(--muted);
  font-weight: 500;
}
tbody td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:hover { background: rgba(255,255,255,0.02); }

table.filesystem .name-link { font-weight: 600; }
table.filesystem td.actions { white-space: nowrap; }

#logs tbody tr { cursor: pointer; }
#logs .row-ok td:nth-child(4) { color: var(--ok); }
#logs .row-fail td:nth-child(4) { color: var(--err); }

pre {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
}

details summary { cursor: pointer; color: var(--muted); margin-top: 0.6rem; }

code {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 0.25rem;
  font-size: 0.85em;
}

.notice {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  margin: 0.5rem 0;
  font-size: 0.85rem;
}
.notice.warn { background: #3a2b15; border-color: #5a4521; color: #f3d8a8; }

/* ---------- tabs ---------- */
.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin: 0.6rem 0 0;
}
.tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 0.5rem 0.95rem;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
  font: inherit;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--text);
  background: var(--panel-2);
  border-color: var(--border);
  border-bottom-color: var(--panel-2);
}
.tab-panel {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 8px 8px 8px;
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ---------- badges ---------- */
.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
}
.badge.on  { color: #d6f0d9; background: #1a3527; border-color: #2a5039; }
.badge.off { color: var(--muted); }

/* ---------- modal ---------- */
.modal {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  min-width: 320px;
  max-width: 90vw;
}
.modal::backdrop { background: rgba(0,0,0,0.6); }
.modal h2 { margin-top: 0; }

/* ---------- stat grid ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
}
.stat {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
}
.stat-label { color: var(--muted); font-size: 0.8rem; }
.stat-value { font-size: 1.4rem; font-weight: 600; margin-top: 0.2rem; }

/* ------------------------------------------------------------------ */
/* Mobile / narrow-viewport tuning. Two breakpoints:                   */
/*   <= 900px  collapse the per-app sidebar+main split (already        */
/*             handled above) and any 2-column form rows.              */
/*   <= 720px  full mobile mode: smaller padding, stacked kv lists,    */
/*             horizontally-scrollable tabs and generic tables, plus a */
/*             card-style layout for the apps landing table.           */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  /* When the split collapses to a single column the sticky sidebar
     would float over the main settings panel as you scroll, eating
     taps that look like they should land on form inputs. Drop it
     back to static flow. */
  .split { grid-template-columns: 1fr; }
  .split .sidebar { position: static; top: auto; }
}

@media (max-width: 720px) {
  body { font-size: 14px; }

  /* Inputs at >= 16px font-size stop iOS Safari from zooming on focus.
     width:100% so they always fill their label/fieldset row instead
     of falling back to the browser's intrinsic ~150px default — that
     intrinsic width plus a flex parent was producing tiny inputs that
     looked unchangeable. */
  input[type="text"], input[type="password"], input[type="number"],
  input[type="email"], textarea, select {
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Fieldsets are flex containers in this stylesheet. Their default
     min-width: min-content can prevent children from shrinking on
     narrow screens, pushing form rows partially off-viewport. */
  fieldset { min-width: 0; }
  form { min-width: 0; }

  /* Topbar: wrap, smaller padding, drop the username pill on the tightest screens. */
  .topbar { padding: 0.55rem 0.75rem; flex-wrap: wrap; gap: 0.4rem 0.75rem; }
  .topbar-left { gap: 0.75rem; flex-wrap: wrap; }
  .topbar-right { gap: 0.5rem; }
  .topbar-right > .small { display: none; }
  .nav-links { gap: 0.15rem; flex-wrap: wrap; }
  .nav-link { padding: 0.4rem 0.55rem; }

  /* Dropdown stretches under the trigger so menu items are tap-target sized. */
  .dropdown-menu { left: 0; right: auto; min-width: 180px; }
  .dropdown-item { padding: 0.7rem 0.9rem; }

  /* Page chrome */
  .page { padding: 0.75rem; }
  .page-head { flex-wrap: wrap; gap: 0.5rem; }
  .card { padding: 0.85rem 0.9rem; }

  /* Sidebar's key/value list stacks (label above value) so long paths breathe. */
  .kv { grid-template-columns: 1fr; gap: 0 0.4rem; row-gap: 0.4rem; }
  .kv dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .kv dd { margin-bottom: 0.15rem; }

  /* Tabs: keep on one line, scroll horizontally if they overflow. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { white-space: nowrap; }

  /* Buttons: comfortable tap target. */
  button, a.ghost, a.small, button.small {
    min-height: 36px;
  }

  /* Generic tables get a horizontal scroll fallback. The apps list
     table has a richer card layout below. */
  table:not(.filesystem) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Apps landing table → card per row. Each <td> picks up its label
     from data-label set in index.js. */
  table.filesystem,
  table.filesystem tbody,
  table.filesystem tr,
  table.filesystem td {
    display: block;
  }
  table.filesystem thead { display: none; }
  table.filesystem tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 0 0 0.6rem 0;
    padding: 0.5rem 0.7rem;
    background: var(--panel-2);
  }
  table.filesystem tbody tr:hover { background: var(--panel-2); }
  table.filesystem td {
    border: none;
    padding: 0.25rem 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
  }
  table.filesystem td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  /* The name row should read large and not be label-prefixed. */
  table.filesystem td.name-cell { padding: 0.1rem 0 0.5rem; }
  table.filesystem td.name-cell::before { display: none; }
  table.filesystem td.name-cell .name-link { font-size: 1.05rem; }
  /* Action buttons fill the row neatly. */
  table.filesystem td.actions { padding-top: 0.5rem; }
  table.filesystem td.actions::before { display: none; }
  table.filesystem td.actions { justify-content: flex-end; }

  /* Modal: full-width-ish on small screens. */
  .modal { width: calc(100vw - 2rem); padding: 1rem; }

  /* Output panes shouldn't dominate the screen. */
  pre { max-height: 240px; font-size: 0.8rem; }

  /* Stat grid wraps tightly. */
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .stat-value { font-size: 1.15rem; }
}