:root {
  --surface-1: #1a1a19;
  --page: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --border: rgba(255, 255, 255, 0.10);
  --gridline: #2c2c2a;
  --brand: #3987e5;
  --brand-dark: #184f95;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
  line-height: 1.5;
}

header.site {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--brand-dark);
  color: #fff;
  padding: 14px 20px;
  min-height: 36px;
}

header.site .brand { min-width: 0; display: flex; align-items: center; gap: 12px; }
header.site .brand-logo { height: 44px; width: 44px; border-radius: 50%; flex-shrink: 0; }
header.site h1 { margin: 0; font-size: 1.5rem; }
header.site p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; }

/* ── Standard title-bar icon buttons (Home / Back / Settings / Profile) ──────
   Matches cwaJPODdash — reuse this exact icon set/markup everywhere instead
   of inventing new button styles per app. */
.title-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}

.title-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 2px;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.icon-btn:hover { background: rgba(0, 0, 0, 0.35); }
.icon-btn svg { width: 18px; height: 18px; fill: #ffffff; }

/* Profile icon turns green once signed in - a visible confirmation the PIN
   was accepted, distinct from the neutral dark circle every other icon uses. */
.icon-btn.signed-in { background: #2f9e52; }
.icon-btn.signed-in:hover { background: #29873f; }

.dropdown-menu-custom {
  display: none;
  position: absolute;
  top: 44px;
  right: 0;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  padding: 0.4rem;
  z-index: 30;
}

.dropdown-menu-custom.show { display: block; }

.dropdown-menu-custom .label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.4rem 0.7rem 0.2rem;
}

.dropdown-menu-custom .item {
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  font-size: 0.87rem;
  cursor: pointer;
}

.dropdown-menu-custom .item:hover { background: var(--page); }

.dropdown-menu-custom a.item {
  display: block;
  text-decoration: none;
  color: inherit;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.breadcrumb {
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.breadcrumb a { color: var(--brand-dark); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.site-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: -2px 0 18px;
}

/* ── Phone + PIN sign-in modal ───────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.open { display: flex; }

.modal-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90%;
  max-width: 380px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.modal-header {
  background: var(--brand-dark);
  color: #fff;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.modal-close:hover { opacity: 0.7; }
.modal-body { padding: 18px 20px 20px; }

.form-field { margin-bottom: 14px; }
.form-field:last-of-type { margin-bottom: 0; }

.form-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.text-input {
  width: 100%;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.text-input:focus { outline: none; border-color: var(--brand); }

.btn {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--brand-dark);
  color: #fff;
  margin-top: 16px;
}

.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.6; cursor: default; }

.btn-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -2px;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 0;
}

.btn-secondary:hover { background: var(--page); }

.form-error { margin-top: 10px; font-size: 0.78rem; color: #e5484d; }
.form-error:empty { display: none; }

/* ── New-IP verification info block (auth.js) ───────────────────────────── */
.verify-info { margin-bottom: 14px; font-size: 0.82rem; }
.verify-info__row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.verify-info__row:last-child { border-bottom: none; }
.verify-info__row span { color: var(--text-muted); }
.verify-info__row b { text-align: right; font-weight: 700; }

/* ── Users table ─────────────────────────────────────────────────────── */
.toolbar-actions {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* flex-end (a prior attempt) aligns box EDGES, which is thrown off by the button's own padding
   and the differing font-size/line-height between the button label and this text - the two boxes
   are different heights for reasons that have nothing to do with where the text itself sits.
   baseline (above) aligns the actual text baselines directly, which is what "make this line up
   with the button label" really means; .site-count's own -2px/18px margin (meant for its usual
   job as a standalone subtitle under a heading) is zeroed out here since it's not relevant to
   baseline alignment either and only adds unwanted vertical drift. */
.toolbar-actions .site-count {
  margin: 0;
}

/* ── Archive filter panel ─────────────────────────────────────────────────── */
.filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
}

.filter-panel .form-field { flex: 1 1 180px; min-width: 160px; }

.filter-panel__actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
}

.data-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }

.data-table th, .data-table td {
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}

.data-table th {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 800;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--page); }

.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--text-primary); }
.data-table th.sortable .sort-arrow { margin-left: 0.3em; display: inline-block; width: 0.7em; }
.data-table th.sortable.sort-active { color: var(--text-primary); }

.empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ── Pager (datatables.net-style: info + first/prev/page-numbers/next/last + page size) ──── */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.pager__controls { display: flex; align-items: center; gap: 4px; }

.pager__nav, .pager__page {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 30px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.pager__nav:hover, .pager__page:hover { background: var(--page); }
.pager__nav:disabled { opacity: 0.35; cursor: default; }
.pager__nav:disabled:hover { background: transparent; }

.pager__page.active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.pager__pages { display: flex; align-items: center; gap: 4px; }
.pager__ellipsis { padding: 0 4px; color: var(--text-muted); }

.pager__size { display: flex; align-items: center; gap: 6px; }
.pager__size select { width: auto; padding: 5px 8px; }

.row-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.row-action:hover { background: var(--page); }

/* ── Archive table links — default browser link-blue reads poorly on the dark
   surface here, so use the same teal accent as the log-list "ok" state instead. ── */
.archive-link, .archive-files-toggle {
  color: #5eead4;
  text-decoration: none;
}
.archive-link:visited, .archive-files-toggle:visited { color: #5eead4; }
.archive-link:hover, .archive-files-toggle:hover { text-decoration: underline; }

/* ── Oldest-month download/verify progress log ──────────────────────────────── */
.log-list {
  margin-top: 14px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--page);
  padding: 8px 12px;
}

.log-line {
  font-size: 0.82rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--gridline);
}

.log-line:last-child { border-bottom: none; }
.log-line.ok      { color: #2f9e52; }
.log-line.warn    { color: #d9a441; }
.log-line.fail    { color: #e5484d; }
.log-line.pending { color: var(--text-muted); }