:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --line: #e3e6ea;
  --text: #12161c;
  --muted: #66707c;
  --accent: #1f6feb;
  --ok-bg: #e6f6ec;
  --ok-fg: #10693a;
  --off-bg: #fdecec;
  --off-fg: #a3231f;
  --radius: 10px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 1rem 1rem 6rem;  /* bottom padding clears the floating nav */
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wrap { max-width: 900px; margin: 0 auto; }

header {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
}
header form { display: none; }
h1 { font-size: 1.25rem; margin: 0 0 .25rem; }
.sub { color: var(--muted); font-size: .875rem; margin: 0; }

.tabs { display: none; gap: .5rem; margin-bottom: .75rem; }
.tabs a {
  flex: 1;
  text-align: center;
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  font-size: .875rem;
}
.tabs a[aria-current="page"] { color: var(--accent); border-color: var(--accent); font-weight: 600; }

.search-field { position: relative; margin-bottom: .75rem; }
.search-field > svg {
  position: absolute;
  left: .75rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -.5rem;
  color: var(--muted);
  pointer-events: none;
}

.search {
  width: 100%;
  padding: .625rem .75rem .625rem 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 1rem;
}
.search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .625rem .75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
}
.stat .n { font-size: 1.375rem; font-weight: 600; line-height: 1.1; }
.stat .k { font-size: .75rem; color: var(--muted); }
.stat.active { border-left-color: var(--ok-fg); }
.stat.active .n { color: var(--ok-fg); }
.stat.off { border-left-color: var(--off-fg); }
.stat.off .n { color: var(--off-fg); }
.stat.none { border-left-color: var(--line); }
.stat.none .n { color: var(--muted); }

/* Header, tabs, filter and cards travel together while the list scrolls under them.
   Negative margins let the background span the body padding. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: -1rem -1rem .5rem;
  padding: 1rem 1rem .5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

#stats:empty { display: none; }

.list { display: flex; flex-direction: column; gap: .5rem; }

.row {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.row .name { font-weight: 600; word-break: break-all; }
.row .name a { color: inherit; text-decoration: none; }
.row .name a:hover { text-decoration: underline; }
.row .meta { color: var(--muted); font-size: .8125rem; }

.badge {
  align-self: flex-start;
  padding: .125rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.badge.ACTIVE { background: var(--ok-bg); color: var(--ok-fg); }
.badge.DEACTIVE { background: var(--off-bg); color: var(--off-fg); }
.badge.NONE { background: #eef0f3; color: var(--muted); }

.actions { display: flex; gap: .5rem; }
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  flex: 1;
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button[disabled] { opacity: .4; cursor: default; }
button[disabled]:hover { border-color: var(--line); color: var(--text); }
button > svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

.pager {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
  padding: .5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pager span {
  flex: 1;
  text-align: center;
  color: var(--muted);
  font-size: .8125rem;
}
.pager button { flex: 0 0 auto; min-width: 5rem; }

.empty, .error {
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}
.error { color: var(--off-fg); border-color: var(--off-fg); background: var(--off-bg); }

/* Floating pill nav: bottom .75rem + 4rem tall stays under 5rem, so body only needs 6rem of padding to clear it. */
.bottom-nav {
  position: fixed;
  inset-inline: .75rem;
  bottom: max(.75rem, env(safe-area-inset-bottom));
  z-index: 1000;
  margin: 0 auto;
  max-width: 28rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  background: color-mix(in srgb, var(--card) 95%, transparent);
  box-shadow: 0 10px 25px rgb(0 0 0 / .15);
  backdrop-filter: blur(12px);
}
.bottom-nav form { display: flex; }
.bottom-nav a,
.bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .125rem;
  min-height: 2.75rem;
  min-width: 0;
  flex: 0 0 auto;
  padding: 0 .5rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  text-decoration: none;
}
.bottom-nav a:hover,
.bottom-nav button:hover { color: var(--text); }
.bottom-nav a:focus-visible,
.bottom-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bottom-nav .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  width: 2.5rem;
  border-radius: 999px;
}
.bottom-nav svg { width: 1.25rem; height: 1.25rem; }
.bottom-nav .lbl {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bottom-nav [aria-current="page"] { color: var(--accent); }
.bottom-nav [aria-current="page"] .ico { background: color-mix(in srgb, var(--accent) 15%, transparent); }

/* SweetAlert2 follows the page theme instead of its own light palette. */
.swal2-popup {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.swal2-title, .swal2-html-container { color: var(--text); }
.swal2-styled.swal2-confirm { background: var(--accent); }
.swal2-styled.swal2-cancel { background: var(--muted); }
.swal2-toast .swal2-title { color: var(--text); font-size: .875rem; }

.htmx-request .actions { opacity: .5; pointer-events: none; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }

body.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.login h1 { margin: 0; }
.login .sub { margin: 0 0 .75rem; }
.login .error { margin: 0 0 .75rem; text-align: left; }
.login label { font-size: .8125rem; color: var(--muted); }
.login input {
  padding: .625rem .75rem;
  margin-bottom: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}
.login input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button.primary {
  margin-top: .5rem;
  padding: .625rem;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
button.primary:hover { color: #fff; opacity: .9; }

@media (min-width: 640px) {
  body { padding: 2rem 1rem; }
  .bottom-nav { display: none; }
  .tabs { display: flex; }
  .topbar {
    position: static;
    margin: 0 0 .75rem;
    padding: 0;
    border-bottom: 0;
  }
  header form { display: flex; }
  header { flex-direction: row; align-items: center; justify-content: space-between; }
  h1 { font-size: 1.5rem; }
  .row {
    flex-direction: row;
    align-items: center;
    gap: .75rem;
  }
  .row .info { flex: 1; min-width: 0; }
  .badge { align-self: center; }
  .actions { flex: 0 0 auto; }
  button { flex: 0 0 auto; min-width: 6rem; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --card: #171b21;
    --line: #262c34;
    --text: #e6e9ee;
    --muted: #8b95a2;
    --accent: #4c93ff;
    --ok-bg: #10291b;
    --ok-fg: #4ad07f;
    --off-bg: #2a1414;
    --off-fg: #ff7b72;
  }
  .badge.NONE { background: #1e232a; }
}