/* Colors live in variables so light/dark mode (and later, Website Settings) can change them. */
:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1c2430;
  --muted: #5d6b7a;
  --border: #d5dce3;
  --primary: #2563eb;
  --primary-text: #ffffff;
  --primary-hover: #1d4ed8;
  --error: #b42318;
  --error-bg: #fdecea;
  --success-bg: #e7f6ee;
  --info-bg: #e8f1fb;
  --sidebar: #ffffff;
  --active: #e8effd;
  --danger: #ef4444;
  --warn: #d97706;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --warn-bg: #fff4d6;
  --banner: #7a3ff2;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #12161c;
  --surface: #1c222b;
  --text: #e6eaef;
  --muted: #9aa7b5;
  --border: #323b47;
  --primary: #3b82f6;
  --primary-text: #ffffff;
  --primary-hover: #60a5fa;
  --error: #ff8a80;
  --error-bg: #3a1d1b;
  --success-bg: #17301f;
  --info-bg: #182a3d;
  --sidebar: #171c23;
  --active: #1e2a44;
  --danger: #e5484d;
  --warn: #f59e0b;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --warn-bg: #3a2f12;
  --banner: #6a35d6;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Elements with the hidden attribute stay hidden, even if a class gives them a display style. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--primary); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  background: none;
  color: var(--text);
}
.btn-primary { background: var(--primary); color: var(--primary-text); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { border-color: var(--border); background: var(--surface); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-block { width: 100%; margin-top: 0.5rem; }

/* Forms */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.field input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.field .help { font-size: 0.85rem; color: var(--muted); margin-top: 0.25rem; }
.field .help ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.field .error { color: var(--error); font-size: 0.9rem; margin-top: 0.25rem; }
.has-error input { border-color: var(--error); }

/* Messages */
.alert { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.alert p { margin: 0; }
.alert-error { background: var(--error-bg); color: var(--error); }
.alert-success { background: var(--success-bg); }
.alert-info { background: var(--info-bg); }
.alert-warn { background: var(--warn-bg); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}
.card.narrow { max-width: 480px; }

/* Login / setup pages */
.auth-top { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem; }
.auth-card {
  max-width: 440px;
  margin: 1rem auto 3rem;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.auth-card .brand { color: var(--primary); font-weight: 700; margin-bottom: 0.5rem; }

/* Admin portal */
.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { font-weight: 700; color: var(--primary); text-decoration: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.topbar-right form { margin: 0; }
.user-name { color: var(--muted); }
.menu-button { display: none; }

.layout { display: flex; min-height: calc(100vh - 60px); }
.sidebar {
  width: 230px;
  flex-shrink: 0;
  padding: 1rem 0.5rem;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}
.sidebar a {
  display: block;
  padding: 0.55rem 0.9rem;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
}
.sidebar a:hover { background: var(--bg); }
.sidebar a.active { background: var(--active); color: var(--primary); font-weight: 600; }
.content { flex: 1; padding: 1.5rem; min-width: 0; }

/* Page building blocks */
h2 { font-size: 1.2rem; margin: 0 0 0.75rem; }
.small { font-size: 0.85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1, .page-head h2 { margin: 0; }
.section { margin-top: 2rem; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-light { background: #fff; color: #222; }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
         background: var(--active); color: var(--primary); vertical-align: middle; }
.badge-warn { background: var(--warn-bg); color: var(--text); }
.empty { text-align: center; padding: 2rem; }
.field input[type="checkbox"] { width: auto; margin-right: 0.4rem; }
.search-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.search-row input, .search-row select { flex: 1; min-width: 12rem; max-width: 28rem; padding: 0.55rem 0.7rem; font: inherit;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }

/* Impersonation banner */
.impersonation-banner { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.6rem 1rem; background: var(--banner); color: #fff; text-align: center; }
.impersonation-banner form { margin: 0; }
.org-name { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); }
.org-name img { height: 28px; width: auto; border-radius: 4px; }

/* Organization list */
.org-list { display: grid; gap: 0.75rem; }
.org-card { display: flex; gap: 1rem; align-items: flex-start; color: var(--text); text-decoration: none; padding: 1rem 1.25rem; }
.org-card:hover { border-color: var(--primary); }
.org-card.inactive { opacity: 0.6; }
.org-logo { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; background: var(--active); display: flex;
  align-items: center; justify-content: center; overflow: hidden; font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.org-logo img { width: 100%; height: 100%; object-fit: contain; }
.org-title { font-weight: 700; font-size: 1.1rem; }
.logo-preview { max-height: 80px; }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 0.65rem 0.9rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table th { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.inactive td { color: var(--muted); }
.icons { display: flex; gap: 0.25rem; align-items: center; }
.icons form { margin: 0; }
.icon-btn { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 6px;
  border: 1px solid transparent; background: none; color: var(--primary); cursor: pointer; padding: 0; }
.icon-btn:hover { border-color: var(--border); background: var(--bg); }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
/* 2FA icon: grey = not set up / disabled, colored = enabled */
.icon-2fa.off { color: var(--muted); filter: grayscale(1); }
span.icon-2fa { cursor: help; }
.icon-2fa.on { color: #1d8fe1; }

/* Public home */
.hero { text-align: center; padding: 3rem 1rem; }
.site-logo { font-size: 2.2rem; font-weight: 800; color: var(--primary); }

/* Phones and small tablets */
@media (max-width: 760px) {
  .menu-button { display: inline-block; }
  .layout { display: block; }
  .sidebar { display: none; width: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar.open { display: block; }
  .content { padding: 1rem; }
  .auth-card { margin: 0 1rem 2rem; padding: 1.5rem; }
}

/* ---- Inventory, dashboard, and disc pages (modeled on the original site) ---- */
.req { color: var(--danger); }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.9rem; }
.btn-square { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.btn-square svg { width: 18px; height: 18px; }
.btn-dashed { border-style: dashed; }
.btn.disabled { opacity: 0.4; pointer-events: none; }
.btn svg { width: 16px; height: 16px; vertical-align: -3px; }
.card { box-shadow: var(--shadow); }
.card-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.25rem; }
.card-sub { margin: 0 0 1rem; }
.card + .card { margin-bottom: 1.5rem; }

.dash-title { font-size: 1.75rem; font-weight: 800; background: linear-gradient(90deg, #3b82f6, #a855f7 60%, #be185d);
  -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.stat-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-row .card { margin: 0; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 1.5rem; align-items: start; margin-bottom: 1.5rem; }
.dash-grid-single { grid-template-columns: minmax(0, 1fr); }
.dash-grid > *, .content > section { min-width: 0; }
.stat { padding: 0.85rem 1rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 6.25rem; }
.stat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; line-height: 1.3; }
.stat-head svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.stat-value { font-size: 1.6rem; font-weight: 700; margin-top: 0.5rem; }
.action-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.6rem 0;
  border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.action-row:hover { color: var(--primary); }

/* Quick Add Disc */
.qa-card form { margin-top: 0.75rem; }
.qa-row { display: grid; gap: 0 1rem; }
.qa-2 { grid-template-columns: 1fr 1fr; }
.qa-3 { grid-template-columns: 1fr 1fr 1fr; }
.qa-color-mold { grid-template-columns: calc(15ch + 1.6rem) minmax(0, 1.6fr) minmax(0, 1fr); }
.phone-group { display: flex; gap: 0.5rem; }
.field .phone-group select { width: auto; flex: 0 0 auto; }
.mold-group { display: flex; gap: 0.5rem; align-items: flex-start; }
.mold-group .combobox, .mold-group select { flex: 1; min-width: 0; }
.text-toggle { border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 0.75rem; }
.text-toggle-head { display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; }
.text-toggle p { margin: 0.5rem 0 0; }
.warn-text { color: var(--warn); }
.qa-actions { display: flex; justify-content: space-between; gap: 0.5rem; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background 0.2s; }
.switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::before { transform: translateX(20px); }
.switch input:disabled + span { opacity: 0.5; cursor: not-allowed; }

/* Searchable mold dropdown */
.combobox { position: relative; }
.field .combobox-input { padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.combobox-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 280px; overflow-y: auto;
  margin: 0; padding: 0.25rem; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }
.combobox-list li { padding: 0.45rem 0.6rem; border-radius: 6px; cursor: pointer; }
.combobox-list li.active, .combobox-list li:hover { background: var(--active); }
.combobox-list li[aria-selected="true"] { font-weight: 600; }
.combobox-empty { color: var(--muted); cursor: default; }

/* Photo pickers */
.photo-input { position: relative; }
.upload-menu { position: relative; }
.upload-btn { list-style: none; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); cursor: pointer; }
.upload-btn::-webkit-details-marker { display: none; }
.upload-btn svg { width: 18px; height: 18px; fill: currentColor; }
.upload-btn .chev { margin-left: auto; }
.upload-options { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.25rem; box-shadow: var(--shadow); }
.upload-options button { display: block; width: 100%; text-align: left; padding: 0.55rem 0.7rem; background: none; border: 0; border-radius: 6px; font: inherit; color: var(--text); cursor: pointer; }
.upload-options button:hover { background: var(--active); }
.js .photo-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html:not(.js) .upload-menu { display: none; }
.photo-preview { display: block; max-height: 120px; margin-top: 0.5rem; border-radius: 6px; border: 1px solid var(--border); }

/* Dropdown menus (Status filter, View, row actions) */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 200px; padding: 0.5rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.15); }
.dropdown-right { left: auto; right: 0; }
.dropdown-menu p { margin: 0.25rem 0.4rem; }
.dropdown-menu hr { border: 0; border-top: 1px solid var(--border); margin: 0.4rem 0; }
.dropdown-menu a, .dropdown-menu form button { display: block; width: 100%; text-align: left; padding: 0.45rem 0.6rem; border-radius: 6px;
  color: var(--text); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.dropdown-menu a:hover, .dropdown-menu form button:hover { background: var(--active); }
.dropdown-menu form { margin: 0; }
.check { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; white-space: nowrap; cursor: pointer; }
.dropdown-menu .actions { margin-top: 0.5rem; }

/* Inventory table */
.inv-toolbar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.inv-search { flex: 0 1 260px; }
.inv-search input { width: 100%; padding: 0.55rem 0.75rem; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.view-menu { margin-left: auto; }
.bulk-bar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; padding: 0.6rem 0.8rem; margin-bottom: 0.75rem; background: var(--active); border-radius: 8px; }
.bulk-bar select { padding: 0.35rem 0.5rem; font: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.inv-table th, .inv-table td { padding-left: 0.6rem; padding-right: 0.6rem; }
.inv-table td { padding-top: 1rem; padding-bottom: 1rem; }
.check-col { width: 40px; }
.check-col input { width: 16px; height: 16px; accent-color: var(--primary); }
.menu-col { width: 48px; }
.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.sort-link svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.6; }
.table td.empty { text-align: center; color: var(--muted); padding: 2rem; }
.row-menu .icon-btn { font-size: 1.3rem; color: var(--text); }
.status { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--primary); white-space: nowrap; }
.status-claimed { background: #7c3aed; }
.status-awaiting_pickup { background: #0891b2; }
.status-picked_up, .status-shipped { background: #16a34a; }
.status-surrendered { background: #6b7280; }
.status-overdue { background: #dc2626; }
.inv-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.pager { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.per-page { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.per-page select { padding: 0.4rem 0.5rem; font: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.page-btns { display: flex; gap: 0.35rem; }
.page-btns .btn-square { width: 34px; height: 34px; }

/* Pop-up dialog */
.dialog { border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; width: min(440px, calc(100vw - 2rem)); background: var(--surface); color: var(--text); }
.dialog::backdrop { background: rgba(15, 23, 42, 0.5); }
.dialog h2 { margin-top: 0; }

/* Disc detail */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; align-items: start; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.photo-pair figure { margin: 0; text-align: center; }
.photo-pair img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.no-photo { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

@media (max-width: 1100px) {
  .dash-grid, .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .qa-2, .qa-3, .qa-color-mold { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .card { padding: 1rem; }
}

/* Delete actions */
.dropdown-menu form button.danger-item { color: var(--danger); }
.delete-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.delete-zone h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.bulk-delete { margin-left: auto; }

/* In-page camera (camera.js) */
.camera-dialog { width: min(520px, calc(100vw - 1rem)); padding: 1rem; }
.camera-dialog h2 { margin: 0 0 0.25rem; }
.camera-frame { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #000; margin: 0.75rem 0; }
.camera-frame video, .camera-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-guide { position: absolute; inset: 7%; border: 3px dashed rgba(255, 255, 255, 0.85); border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25); pointer-events: none; }
.camera-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.camera-actions [data-cam="switch"] { margin-right: auto; }
.photo-preview { aspect-ratio: 1; object-fit: cover; }

/* Audit trail */
.nowrap { white-space: nowrap; }
.audit-table td { vertical-align: top; white-space: normal; }
.audit-table td.nowrap { white-space: nowrap; }
.audit-details { min-width: 16rem; font-size: 0.9rem; }
.audit-details .old { text-decoration: line-through; color: var(--muted); }
.audit-action { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--active); color: var(--text); white-space: nowrap; }
.audit-create { background: #dcfce7; color: #166534; }
.audit-delete, .audit-login_failed { background: #fee2e2; color: #991b1b; }
.audit-impersonate { background: #ede9fe; color: #5b21b6; }
[data-theme="dark"] .audit-create { background: #14361f; color: #86efac; }
[data-theme="dark"] .audit-delete, [data-theme="dark"] .audit-login_failed { background: #3b1414; color: #fca5a5; }
[data-theme="dark"] .audit-impersonate { background: #2e1f52; color: #c4b5fd; }

/* ---- Super admin dashboard ---------------------------------------------------------------
   Chart colors are from the validated data-viz palette (blue = Added, orange = Returned),
   checked for color-blind separation and contrast against our light and dark card colors.
   Status colors (good / warning / critical) always come with an icon and a word. */
:root {
  --viz-1: #2a78d6; --viz-2: #eb6834;
  --viz-grid: #ebeef2; --viz-axis: #c3c2b7; --viz-tick: #6b7280; --viz-spark: #9aa3ae;
  --status-good: #0ca30c; --status-warning: #fab219; --status-critical: #d03b3b;
  --status-good-text: #006300; --status-warning-text: #8a5a00; --status-critical-text: #b42318;
}
[data-theme="dark"] {
  --viz-1: #3987e5; --viz-2: #d95926;
  --viz-grid: #2a313c; --viz-axis: #3c4552; --viz-tick: #9aa7b5; --viz-spark: #5d6b7a;
  --status-good-text: #4ade80; --status-warning-text: #fbbf24; --status-critical-text: #f87171;
}
.sa-dash { display: grid; gap: 1.25rem; }
.sa-head h1 { margin-bottom: 0.25rem; }
.sa-head p { margin: 0; }
.tile-label { font-size: 0.9rem; color: var(--muted); margin: 0; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.card-title-sm { font-size: 1.1rem; font-weight: 700; margin: 0; }
.card-head p { margin: 0.15rem 0 0; }
.sa-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.25rem; }
.sa-hero { display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(135deg, var(--surface) 55%, var(--active)); }
.hero-value { font-size: 3.5rem; font-weight: 700; line-height: 1.1; margin: 0.25rem 0 0.5rem; }
.sa-hero p.muted { margin: 0; }
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.kpi { display: flex; flex-direction: column; gap: 0.2rem; color: var(--text); text-decoration: none; position: relative; }
a.kpi:hover { border-color: var(--primary); }
.kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.2; }
.kpi-sub { font-size: 0.85rem; color: var(--muted); }
.delta-up { color: var(--status-good-text); font-weight: 600; }
.delta-down { color: var(--muted); font-weight: 600; }
.sparkline { position: absolute; right: 1rem; bottom: 1rem; width: 120px; height: 32px; }
.spark-line { fill: none; stroke: var(--viz-spark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--viz-1); stroke: var(--surface); stroke-width: 2; }
.sa-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Legend + line chart */
.legend { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.legend li { display: flex; align-items: center; gap: 0.4rem; }
.key-line { display: inline-block; width: 16px; height: 2px; border-radius: 2px; vertical-align: middle; }
.key-line.viz-1 { background: var(--viz-1); }
.key-line.viz-2 { background: var(--viz-2); }
.linechart { position: relative; width: 100%; min-height: 240px; border-radius: 6px; }
.linechart:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.linechart svg { display: block; overflow: visible; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-axis { stroke: var(--viz-axis); stroke-width: 1; }
.viz-tick { fill: var(--viz-tick); font-size: 12px; font-variant-numeric: tabular-nums; }
.viz-empty { fill: var(--muted); font-size: 14px; }
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-line.viz-1 { stroke: var(--viz-1); }
.viz-line.viz-2 { stroke: var(--viz-2); }
.viz-dot { stroke: var(--surface); stroke-width: 2; }
.viz-dot.viz-1 { fill: var(--viz-1); }
.viz-dot.viz-2 { fill: var(--viz-2); }
.viz-endlabel { fill: var(--text); font-size: 12px; }
.viz-cross { stroke: var(--viz-axis); stroke-width: 1; }
.viz-tip { position: absolute; pointer-events: none; min-width: 9rem; padding: 0.5rem 0.7rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.15); font-size: 0.85rem; }
.viz-tip-title { color: var(--muted); margin-bottom: 0.25rem; }
.viz-tip-row { display: flex; align-items: center; gap: 0.45rem; }
.viz-tip-row strong { min-width: 1.5rem; }
.table-view { margin-top: 0.5rem; font-size: 0.9rem; }
.table-view summary { cursor: pointer; color: var(--muted); }
.table-view .table-wrap { margin-top: 0.5rem; }

/* Pipeline bars (one hue: these are amounts, the badge names the status) */
.hbars { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.hbars li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 0.6rem; }
.hbar-track { height: 14px; }
.hbar { display: block; height: 14px; width: var(--w); min-width: 2px; background: var(--viz-1); border-radius: 0 4px 4px 0; }
.hbar-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Organizations table, security list, feed */
.sa-orgs td, .sa-orgs th { white-space: nowrap; }
.sa-orgs td.org-cell { white-space: normal; min-width: 11rem; }
.status-inline { font-weight: 600; text-decoration: none; }
.status-inline-critical { color: var(--status-critical-text); }
.status-inline-warning { color: var(--status-warning-text); }
.sec-list { margin: 0; display: grid; gap: 0; }
.sec-list div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--border); }
.sec-list div:first-child { border-top: 0; }
.sec-list dt { color: var(--muted); }
.sec-list dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; font-size: 0.92rem; }
.feed li { display: flex; gap: 0.6rem; align-items: baseline; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--viz-spark); transform: translateY(-1px); }
.feed-dot.audit-create { background: var(--status-good); }
.feed-dot.audit-delete, .feed-dot.audit-login_failed { background: var(--status-critical); }
.feed-dot.audit-impersonate { background: #7c3aed; }
.feed-dot.audit-status, .feed-dot.audit-update { background: var(--viz-1); }

/* Server health */
.meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.meter-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.meter-name { color: var(--muted); font-size: 0.9rem; }
.meter-value { font-size: 1.6rem; font-weight: 700; margin: 0.15rem 0 0.4rem; }
.meter-track { height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--meter) 18%, transparent); }
.meter-fill { height: 100%; border-radius: 4px; background: var(--meter); transition: width 0.4s ease; }
.meter-detail { margin-top: 0.35rem; }
.health-good { --meter: var(--status-good); }
.health-warning { --meter: var(--status-warning); }
.health-critical { --meter: var(--status-critical); }
.health-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.health-status.health-good { color: var(--status-good-text); }
.health-status.health-warning { color: var(--status-warning-text); }
.health-status.health-critical { color: var(--status-critical-text); }
.health-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--meter); color: #fff; font-size: 0.7rem; font-weight: 800; }
.health-warning .health-icon { color: #1c1c1c; }
.health-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--border); }
.checks li:first-child { border-top: 0; }
.health-facts { grid-template-columns: 1fr; gap: 0; }
.health-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--border); }
.health-facts div:first-child { border-top: 0; }
.health-facts dd { text-align: right; }

@media (max-width: 1100px) {
  .sa-top, .sa-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .kpi-grid, .meters, .health-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-value { font-size: 3rem; }
  .sparkline { position: static; margin-top: 0.5rem; }
}

/* ---- Public website (DiscBack home) ------------------------------------------------------ */
/* Anton: free condensed headline font (SIL Open Font License, see static/fonts/Anton-OFL.txt). */
@font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
:root { --brand-blue: #1d5fb4; --brand-red: #ef4444; --tile-bg: #f4f5f7; --heading-ink: #2b2b2b; }
[data-theme="dark"] { --brand-blue: #3b82f6; --brand-red: #f05252; --tile-bg: #1f2630; --heading-ink: #e6eaef; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-logo { width: 28px; height: 28px; object-fit: contain; }
.auth-brand { text-decoration: none; }
.auth-brand .brand-logo { width: 40px; height: 40px; }

body.public { background: var(--surface); }
.public-main { max-width: 520px; margin: 0 auto; padding: 2rem 1.25rem calc(6.5rem + env(safe-area-inset-bottom)); text-align: center; }
.hero-logo { display: flex; justify-content: center; margin: 0.5rem 0 1.5rem; }
.public-logo { width: 200px; height: 200px; object-fit: contain; }
.logo-badge-name { font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif; font-size: 26px; letter-spacing: 1px; }
.hero-logo.small .public-logo { width: 96px; height: 96px; }
.help-title { margin: 0 0 2.5rem; line-height: 0.95; text-transform: uppercase;
  font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif; font-weight: 400; letter-spacing: 0.01em; }
.help-small { display: block; font-size: 2.6rem; color: var(--heading-ink); }
.help-big { display: block; font-size: 5.2rem; color: var(--brand-red); }
/* Home headline: "What DISC can I help you find?" with a flying disc and a hand-drawn underline. */
.find-title { margin: 0 0 2.5rem; line-height: 0.95; text-transform: uppercase; color: var(--heading-ink);
  font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif; font-weight: 400; letter-spacing: 0.02em; }
.find-top { display: block; font-size: 1.9rem; letter-spacing: 0.35em; padding-left: 0.35em; }
.find-big { position: relative; display: inline-block; font-size: 5.4rem; color: var(--brand-blue); }
.find-disc { position: absolute; left: calc(100% + 0.08em); top: 0.02em; width: 0.95em; height: auto; }
.find-disc .find-rim { fill: var(--brand-red); }
.find-disc .find-dome { fill: color-mix(in srgb, #fff 35%, var(--brand-red)); }
.find-disc .find-trail { fill: none; stroke: var(--brand-red); stroke-width: 2.5; stroke-linecap: round; opacity: 0.45; }
.find-bottom { display: block; font-size: 2.1rem; margin-top: 0.2rem; }
.find-word { position: relative; display: inline-block; color: var(--brand-red); }
.find-word svg { position: absolute; left: -2%; bottom: -0.32em; width: 104%; height: 0.32em; overflow: visible; }
.find-word path { fill: none; stroke: var(--brand-red); stroke-width: 4; stroke-linecap: round; }
@media (max-width: 400px) { .find-big { font-size: 4.4rem; } .find-bottom { font-size: 1.75rem; } }
.page-title-public { font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif; text-transform: uppercase;
  font-size: 2.2rem; font-weight: 400; color: var(--heading-ink); }

.search-box { display: flex; align-items: center; gap: 0.6rem; max-width: 460px; margin: 0 auto; padding: 0.35rem 0.6rem 0.35rem 1rem;
  background: var(--tile-bg); border: 1px solid var(--border); border-radius: 8px; }
.search-box:focus-within { border-color: var(--brand-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 20%, transparent); }
.search-box svg { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.search-box input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.05rem;
  color: var(--text); padding: 0.6rem 0; outline: none; }
.search-box input::placeholder { color: var(--muted); }
.mic-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--brand-blue); background: transparent; cursor: pointer; padding: 0; flex-shrink: 0; }
.mic-btn svg { stroke: var(--brand-blue); width: 20px; height: 20px; }
.mic-btn.listening { background: var(--brand-red); border-color: var(--brand-red); animation: pulse 1.2s infinite; }
.mic-btn.listening svg { stroke: #fff; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-red) 25%, transparent); } }
.voice-status { margin: 0.5rem 0 0; }

.help-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; max-width: 460px; margin: 5.5rem auto 0; }
.help-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; aspect-ratio: 0.85;
  padding: 1rem 0.5rem; background: var(--tile-bg); border-radius: 8px; color: var(--heading-ink); text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease; }
.help-tile:hover, .help-tile:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; }
.tile-icon svg { width: 64px; height: 64px; fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.tile-play { border-radius: 50%; background: var(--brand-blue); }
.tile-play svg { width: 30px; height: 30px; fill: var(--brand-blue); stroke: none; background: #fff; border-radius: 50%; padding: 7px 5px 7px 9px; }
.tile-pin svg { stroke: var(--brand-red); }
.tile-help { border-radius: 50%; background: var(--brand-blue); }
.tile-help svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 1.9; }
.tile-receipt svg { stroke: var(--brand-blue); }
.tile-text { font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif; font-weight: 400; font-size: 0.85rem;
  line-height: 1.15; letter-spacing: 0.01em; }
.coming-soon { text-align: left; margin: 1rem 0 1.5rem; }

/* Bottom navigation */
.bottom-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(560px, 100%); display: flex;
  justify-content: space-around; align-items: center; gap: 0.25rem;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--surface); z-index: 40; }
.bnav-item { display: inline-flex; align-items: center; gap: 0.5rem; height: 50px; min-width: 50px; justify-content: center;
  padding: 0 0.75rem; border-radius: 8px; border: 2px solid transparent; color: var(--text); text-decoration: none; cursor: pointer; }
.bnav-item svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.bnav-label { display: none; font-size: 1rem; }
.bnav-item.current { border-color: var(--text); padding: 0 1.2rem; }
.bnav-item.current .bnav-label { display: inline; }
.bnav-item:hover { background: var(--tile-bg); }
.bnav-menu { position: relative; }
.bnav-menu > summary { list-style: none; }
.bnav-menu > summary::-webkit-details-marker { display: none; }
.bnav-menu-btn { background: var(--brand-blue); color: #fff; }
.bnav-menu-btn:hover { background: var(--brand-blue); filter: brightness(1.1); }
.bnav-sheet { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 230px; padding: 0.5rem; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18); }
.bnav-sheet a, .bnav-sheet button { display: block; width: 100%; padding: 0.65rem 0.75rem; border-radius: 6px; border: 0; background: none;
  font: inherit; text-align: left; color: var(--text); text-decoration: none; cursor: pointer; }
.bnav-sheet a:hover, .bnav-sheet button:hover { background: var(--active); }
.bnav-sheet form { margin: 0; }

/* Website Settings */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 1rem; }
.logo-preview-box { text-align: center; padding: 1rem 0; }
.logo-preview-big { width: 140px; height: 140px; object-fit: contain; }
.preview-name { font-size: 1.4rem; font-weight: 700; margin: 0.5rem 0 0.25rem; }

@media (max-width: 760px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .search-box input { font-size: 0.95rem; }
  .search-box input::placeholder { font-size: 0.9rem; }
  .public-logo { width: 160px; height: 160px; }
  .help-small { font-size: 2.1rem; }
  .help-big { font-size: 4.3rem; }
  .help-tiles { gap: 0.8rem; margin-top: 3.5rem; }
  .tile-icon { width: 64px; height: 64px; }
  .tile-icon svg { width: 52px; height: 52px; }
  .bnav-item.current { padding: 0 0.8rem; }
}

/* Public search results */
.public-main:has(.result-list), .public-main:has(.results-head) { max-width: 760px; text-align: left; }
.results-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.results-head .search-box { flex: 1; margin: 0; max-width: none; }
.results-head .voice-status { flex-basis: 100%; }
.results-logo .public-logo { width: 56px; height: 56px; }
.results-title.title-center { text-align: center; }
.results-title { font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif; font-weight: 400; font-size: 1.7rem;
  text-transform: uppercase; color: var(--heading-ink); margin: 0.5rem 0 0.1rem; }
.results-sub { margin: 0 0 1rem; }
.result-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.75rem; }
.result { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.75rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.result-photo { width: 96px; height: 96px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in;
  background: var(--tile-bg); }
.result-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.no-photo-sm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; cursor: default;
  color: var(--muted); font-size: 0.75rem; }
.no-photo-sm svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.result-info p { margin: 0; }
.result-disc { font-weight: 700; font-size: 1.1rem; }
.result-meta { font-size: 0.92rem; }
.result-where { display: flex; gap: 0.35rem; align-items: flex-start; margin-top: 0.35rem !important; font-size: 0.95rem; }
.result-where svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--brand-red); stroke-width: 2; margin-top: 2px; }
.result-hints { margin-top: 0.35rem !important; }
.claim-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.1rem; border-radius: 8px;
  background: var(--brand-red); color: #fff; text-decoration: none; white-space: nowrap; text-transform: uppercase;
  font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif; font-size: 1.05rem; letter-spacing: 0.03em; }
.claim-btn:hover, .claim-btn:focus-visible { filter: brightness(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-red) 25%, transparent); }
.results-note { text-align: left; }
.results-note p { margin: 0.25rem 0; }
.results-links { margin-top: 0.5rem !important; }

/* Photo pop-up */
.lightbox { max-width: min(92vw, 900px); max-height: 92vh; padding: 0.75rem; border: 0; border-radius: 12px; background: var(--surface); color: var(--text); }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.8); }
.lightbox img { display: block; max-width: 100%; max-height: calc(92vh - 5rem); margin: 0 auto; border-radius: 8px; }
.lightbox-caption { text-align: center; margin: 0.5rem 0 0; }
.lightbox form { position: absolute; top: 0.4rem; right: 0.4rem; margin: 0; }
.lightbox-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.6rem; cursor: pointer; }

@media (max-width: 520px) {
  .result { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 0.6rem; padding: 0.6rem; }
  .result-photo { width: 72px; height: 72px; }
  .claim-btn { padding: 0.6rem 0.7rem; font-size: 0.95rem; }
  .result-disc { font-size: 1rem; }
}

/* Find your disc (filters) */
.public-main:has(.browse-filters) { max-width: 760px; text-align: left; }
.browse-title { margin-top: 0; }
.browse-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; padding: 1rem 1rem 0.25rem;
  background: var(--tile-bg); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1.25rem; }
.browse-filters .field { margin-bottom: 0.85rem; }
.browse-filters select, .browse-filters input[type="date"] { width: 100%; padding: 0.55rem 0.6rem; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.range-label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.range-inputs { display: flex; align-items: center; gap: 0.5rem; }
.range-inputs input { min-width: 0; }
.date-range { grid-column: 1 / -1; }
.browse-actions { grid-column: 1 / -1; display: flex; gap: 0.5rem; margin-bottom: 0.85rem; }
.browse-empty { display: flex; gap: 0.75rem; align-items: center; }
.browse-empty svg { width: 32px; height: 32px; flex-shrink: 0; fill: none; stroke: var(--brand-blue); stroke-width: 1.8; stroke-linejoin: round; }
.results-count { margin: 0 0 0.75rem; }
.browse-pager { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
@media (max-width: 520px) {
  .browse-filters { grid-template-columns: minmax(0, 1fr); }
}

/* Courses, shops & clubs directory */
.public-main:has(.org-tiles), .public-main:has(.org-detail) { max-width: 860px; text-align: left; }
.org-tiles { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.org-tile { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.1rem 1.1rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.org-tile-top { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.4rem; }
.org-tile-logo { width: 84px; height: 64px; object-fit: contain; flex-shrink: 0; border-radius: 4px; }
.org-tile-initial { display: flex; align-items: center; justify-content: center; background: var(--brand-blue); color: #fff;
  font-family: "Anton", Impact, sans-serif; font-size: 2rem; }
.org-tile-info { flex: 1; min-width: 0; }
.org-tile-name { margin: 0.2rem 0 0.4rem; font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif; font-weight: 400;
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--heading-ink); }
.org-tile-place { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--text); }
.org-tile-place svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.org-active { display: inline-flex; align-items: center; gap: 0.35rem; color: #16a34a; font-size: 0.95rem; white-space: nowrap; }
[data-theme="dark"] .org-active { color: #4ade80; }
.org-active .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.org-btn { display: block; text-align: center; padding: 0.7rem 1rem; border-radius: 6px; text-decoration: none; font-weight: 600; }
.org-btn-primary { background: var(--brand-blue); color: #fff; font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  font-weight: 400; letter-spacing: 0.02em; }
.org-btn-primary:hover { filter: brightness(1.1); }
.org-btn-outline { border: 1px solid var(--border); color: var(--text); font-weight: 400; }
.org-btn-outline:hover { background: var(--tile-bg); }
.back-link { margin: 0 0 1rem; }
.org-detail { text-align: center; margin-bottom: 1rem; }
.org-detail .org-tile-logo { width: 160px; height: 120px; margin: 0 auto 0.5rem; }
.org-detail .org-tile-initial { width: 120px; height: 120px; border-radius: 50%; font-size: 3.5rem; }
.org-facts p { margin: 0 0 0.8rem; }
.org-facts p:last-child { margin-bottom: 0; }
.org-discs-btn { margin: 1rem 0; }

/* Maintenance */
.section-title { font-size: 1.3rem; margin: 2rem 0 1rem; }
.restore-card .alert { margin: 0.5rem 0 1rem; }
.btn-primary svg, .btn-danger svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 0.25rem; }
.nightly-card { margin-top: 1.5rem; }
.keep-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.keep-form label { font-weight: 600; font-size: 0.9rem; }
.keep-form input { width: 5rem; padding: 0.35rem 0.5rem; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; }
.keep-form .error { flex-basis: 100%; color: var(--error); font-size: 0.85rem; }
.nightly-table td { vertical-align: middle; }
.nightly-dl { text-align: right; }
.nightly-dl svg { width: 15px; height: 15px; vertical-align: -2px; }
.nightly-error { max-width: 28rem; white-space: normal; }

/* Pickup Times editor (modeled on the original site) */
.pk-head { text-align: center; margin-bottom: 1rem; }
.pk-title { font-size: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 0.25rem; }
.pk-card { max-width: 900px; margin: 0 auto; }
.pk-card-title { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1.25rem; margin: 0.25rem 0 0.5rem; }
.pk-card-title svg, .pk-tz svg, .pk-tip svg, .pk-save svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pk-tz { display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-bottom: 1.5rem; }
.pk-tz svg { width: 14px; height: 14px; }
.pk-days { display: grid; gap: 0.9rem; }
.pk-day { border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; background: var(--surface); }
.pk-day.on { box-shadow: var(--shadow); }
.pk-day.has-error { border-color: var(--error); }
.pk-day-head { display: flex; align-items: center; gap: 0.9rem; }
.pk-day-name { font-size: 1.05rem; }
.pk-chevron { margin-left: auto; font-size: 1.1rem; color: var(--text); }
.pk-errors { margin: 0.75rem 0 0; }
.pk-panel { margin-top: 0.85rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; }
.pk-recurring { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.pk-one_time { background: color-mix(in srgb, #16a34a 5%, var(--surface)); }
.pk-panel-head { display: flex; align-items: center; gap: 0.75rem; }
.pk-panel-title { font-size: 0.95rem; }
.pk-badge { margin-left: auto; padding: 0.15rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.75rem;
  font-weight: 600; background: var(--surface); white-space: nowrap; }
.pk-panel-body { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.pk-freq { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: fit-content; }
.pk-freq-opt { display: flex; align-items: center; padding: 0.4rem 0.85rem; cursor: pointer; font-size: 0.9rem; background: var(--surface); }
.pk-freq-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pk-freq-opt.active { background: var(--primary); color: var(--primary-text); }
.pk-freq-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
.pk-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pk-row-label { font-size: 0.9rem; font-weight: 600; }
.pk-input { padding: 0.4rem 0.5rem; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.pk-remove { color: var(--danger); font-size: 1.3rem; }
.pk-add { width: fit-content; }
.pk-tip { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1.25rem 0; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 10px; font-size: 0.92rem; }
.pk-tip p { margin: 0; }
.pk-tip svg { flex-shrink: 0; margin-top: 2px; }
.pk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pk-actions .btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem; }
.pk-save:disabled { opacity: 0.45; cursor: not-allowed; }
.pickup-summary { margin: 0; padding-left: 1.1rem; }
.pickup-summary li { margin: 0.2rem 0; }
@media (max-width: 520px) {
  .pk-badge { display: none; }
  .pk-actions { grid-template-columns: 1fr; }
}
.narrow-wide { max-width: 760px; }

/* Social media section */
.social-card { max-width: none; }
.social-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin-top: 0.75rem; }
.social-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.5rem; margin: 0.75rem 0 0; }
.social-list dt { font-weight: 600; font-size: 0.9rem; }
.social-list dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .social-grid, .social-list { grid-template-columns: minmax(0, 1fr); } }

/* FAQ (org page and public) */
.faq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.faq-title { font-size: 2rem; font-weight: 800; margin-bottom: 0.25rem; display: inline-block;
  background: linear-gradient(90deg, #3b82f6, #e11d48 55%, #be185d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faq-head p { margin: 0; }
.faq-count { font-size: 0.9rem; padding: 0.3rem 0.8rem; }
.faq-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; margin: 1rem 0; background: var(--active); border-radius: 8px; }
.faq-tabs button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1.4rem; border: 0; border-radius: 6px;
  background: transparent; font: inherit; color: var(--muted); cursor: pointer; }
.catalog-tabs { margin-top: 0.25rem; }
.catalog-tabs a { padding: 0.45rem 1.4rem; border-radius: 6px; color: var(--muted); text-decoration: none; font-weight: 600; }
.catalog-tabs a:hover { color: var(--text); }
.catalog-tabs a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.faq-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.faq-tabs svg, .faq-card-title svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.faq-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
.faq-grid-single { grid-template-columns: minmax(0, 1fr); }
.faq-card-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; margin: 0 0 0.25rem; }
.faq-form-card .faq-card-title svg { stroke: #16a34a; }
.faq-form-card .btn-block { margin-top: 0.5rem; }
.faq-form-card .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.faq-drag-hint { font-weight: 600; }
.faq-manage-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.faq-row { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.9rem 1rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); }
.faq-row[draggable="true"] { cursor: grab; }
.faq-row.dragging { opacity: 0.5; border-style: dashed; }
.faq-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%; background: var(--active); color: var(--primary); font-size: 0.8rem; font-weight: 700; margin-top: 2px; }
.faq-text { flex: 1; min-width: 0; }
.faq-q { margin: 0 0 0.35rem; font-weight: 600; }
.faq-a { margin: 0; color: var(--muted); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.faq-actions { display: flex; align-items: center; gap: 0.1rem; flex-shrink: 0; }
.faq-actions form { display: flex; margin: 0; }
.faq-actions .icon-btn { color: var(--muted); font-size: 1rem; }
.faq-actions .icon-btn:hover:not(:disabled) { color: var(--primary); }
.faq-actions .faq-del:hover { color: var(--danger); }
.faq-actions svg { width: 18px; height: 18px; fill: currentColor; }
.faq-actions .faq-del svg { fill: none; stroke: currentColor; stroke-width: 2; }
.faq-preview { max-width: 820px; }
.faq-list { display: grid; gap: 0.5rem; margin-top: 0.75rem; text-align: left; }
.faq-item { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.faq-item summary { padding: 0.8rem 1rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.2rem; line-height: 1; color: var(--muted); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 1rem 0.9rem; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.mail-help { margin-top: 1.5rem; }
.mail-help ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.mail-help li { margin-bottom: 0.4rem; }
.field-check .check-row { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; cursor: pointer; }
.field-check .check-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }

/* Claim steps */
.public-main:has(.claim-wrap) { max-width: 640px; text-align: left; }
.claim-wrap .card { margin-bottom: 1rem; }
.claim-steps { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0.5rem 0 1rem; counter-reset: step; }
.claim-steps li { flex: 1; text-align: center; font-size: 0.85rem; color: var(--muted); padding-top: 0.4rem;
  border-top: 4px solid var(--border); counter-increment: step; }
.claim-steps li::before { content: counter(step) ". "; }
.claim-steps li.on { border-color: var(--brand-blue); color: var(--text); }
.claim-steps li[aria-current="step"] { font-weight: 700; }
.claim-disc { display: flex; gap: 0.85rem; align-items: center; margin-bottom: 1rem; }
.claim-disc img, .claim-disc-none { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--tile-bg); }
.claim-disc p { margin: 0; }
.claim-disc-name { font-weight: 700; }
.claim-btn-block { width: 100%; margin-top: 0.25rem; border: 0; cursor: pointer; }
.code-input { font-size: 1.6rem !important; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.resend { margin-top: 0.75rem; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.link-btn:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.claim-result { text-align: center; padding: 1.25rem 1rem; border-radius: 12px; margin-bottom: 1rem; }
.claim-result h1 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.8rem; margin: 0.4rem 0; }
.claim-result p { margin: 0; }
.claim-result-good { background: color-mix(in srgb, #16a34a 12%, var(--surface)); }
.claim-result-bad { background: color-mix(in srgb, var(--brand-red) 12%, var(--surface)); }
.claim-result-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%;
  color: #fff; font-size: 1.5rem; font-weight: 800; }
.claim-result-good .claim-result-icon { background: #16a34a; }
.claim-result-bad .claim-result-icon { background: var(--brand-red); }
.claim-choose { font-size: 1.15rem; margin: 0.5rem 0 0.75rem; }
.claim-option h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; font-size: 1.1rem; }
.opt-num { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--brand-blue); color: #fff; font-size: 0.85rem; }
.claim-option details > summary { list-style: none; display: inline-block; }
.claim-option details > summary::-webkit-details-marker { display: none; }
.ship-form { margin-top: 0.85rem; }
.org-contact { padding-left: 1.1rem; margin: 0.5rem 0; }
.sms-table td.sms-body { white-space: normal; min-width: 18rem; }
.claim-number { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; padding: 0.85rem;
  margin-bottom: 1rem; border: 2px dashed var(--brand-blue); border-radius: 10px; }
.claim-number strong { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.8rem; letter-spacing: 0.05em; }
.countdown-card { text-align: center; border-color: var(--brand-blue); }
.countdown-card.expired { border-color: var(--brand-red); background: color-mix(in srgb, var(--brand-red) 8%, var(--surface)); text-align: left; }
.countdown-label { font-weight: 700; margin: 0 0 0.25rem; }
.countdown { font-family: "Anton", Impact, sans-serif; font-size: 2rem; margin: 0.25rem 0; color: var(--brand-blue); }
.countdown [data-cd-rest] { display: block; font-size: 1.1rem; color: var(--text); }

/* Notifications */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem;
  margin-left: 0.35rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.75rem; font-weight: 700; }
.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; max-width: 860px; }
.notif { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.85rem 1rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; }
.notif.unread { border-left: 4px solid var(--primary); }
.notif-icon { display: inline-flex; width: 32px; height: 32px; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 800; }
.notif-claimed { background: #16a34a; }
.notif-choice { background: var(--primary); }
.notif-text { flex: 1; min-width: 0; }
.notif-text p { margin: 0; }
.notif-title { font-weight: 600; }
.notif time { white-space: nowrap; }

/* Disc activity log */
.activity-card { margin-top: 1.5rem; }
.activity { list-style: none; margin: 0.75rem 0 0; padding: 0; position: relative; }
.activity::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.activity-item { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.55rem 0; }
.act-dot { width: 16px; height: 16px; border-radius: 50%; margin-top: 3px; background: var(--muted); border: 3px solid var(--surface); z-index: 1; }
.act-added .act-dot { background: #16a34a; }
.act-edited .act-dot, .act-status .act-dot { background: var(--primary); }
.act-claim .act-dot { background: #7c3aed; }
.act-text .act-dot, .act-email .act-dot { background: #0891b2; }
.act-code .act-dot { background: var(--warn); }
.act-body p { margin: 0; }
.act-title { font-weight: 600; }
.act-label { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.05rem 0.45rem; margin-right: 0.3rem; border-radius: 4px; background: var(--active); color: var(--text); vertical-align: 1px; }
.act-quote { margin-top: 0.2rem !important; padding-left: 0.6rem; border-left: 3px solid var(--border); color: var(--muted); }
.act-meta { text-align: right; white-space: nowrap; }
@media (max-width: 600px) { .activity-item { grid-template-columns: 16px minmax(0, 1fr); } .act-meta { grid-column: 2; text-align: left; } }

/* Organization details: full width, fields in two columns on wide screens */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.form-grid .field:has(textarea), .form-grid .alert { grid-column: 1 / -1; }
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; margin: 0.5rem 0 1rem; }
.details-grid dt { font-weight: 600; font-size: 0.9rem; }
.details-grid dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .form-grid, .details-grid { grid-template-columns: minmax(0, 1fr); } }
/* Days fields: only as wide as the help text under them */
.form-grid .field:has(.days-input) { width: fit-content; max-width: 100%; }
/* Org details: Address | City | State | ZIP share one row; other fields are two per row. */
.org-form-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.org-form-grid > .field, .org-form-grid > .alert { grid-column: span 6; }
.org-form-grid > .alert { grid-column: 1 / -1; }
.org-form-grid > .field:has([name=address]) { grid-column: 1 / span 4; }
.org-form-grid > .field:has([name=city]) { grid-column: span 3; }
.org-form-grid > .field:has([name=state]) { grid-column: span 3; }
.org-form-grid > .field:has([name=zip_code]) { grid-column: span 2; }
@media (max-width: 760px) { .org-form-grid > .field, .org-form-grid > .field:has([name]) { grid-column: 1 / -1; } }

/* Logo upload box */
.logo-input { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.logo-input-preview { width: 160px; height: 110px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border); border-radius: 8px; background: var(--tile-bg); padding: 6px; }
.logo-input-preview img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.logo-input-preview img.removing { opacity: 0.25; }
.logo-input-controls { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
.logo-choose { position: relative; cursor: pointer; }
.logo-choose .logo-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.check-row.small { font-weight: 400; display: inline-flex; gap: 0.4rem; align-items: center; cursor: pointer; }
.notif-wrong_number { background: var(--warn); }

/* Organization stats and texting usage (super admin) */
.org-stats { display: grid; grid-template-columns: repeat(6, auto); gap: 0.25rem 1.25rem; margin: 0.6rem 0 0; width: fit-content; }
.org-stats dt { font-size: 0.75rem; color: var(--muted); }
.org-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.org-sms { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-top: 0.6rem; padding-top: 0.5rem;
  border-top: 1px solid var(--border); font-size: 0.85rem; }
.org-sms-title { font-weight: 600; }
.org-card .org-info { flex: 1; min-width: 0; }
.org-stat-row { margin: 1rem 0 0; }
.stat-small { font-size: 1.05rem; }
.usage-table tr.current-month td { font-weight: 600; }
@media (max-width: 900px) { .org-stats { grid-template-columns: repeat(3, auto); } }
.sa-stack { display: grid; gap: 1.25rem; align-content: start; }

/* Visitors */
.visit-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0 0 0.75rem; }
.visit-totals dt { font-size: 0.8rem; color: var(--muted); }
.visit-totals dd { margin: 0; font-size: 1.3rem; font-weight: 700; }
.visit-totals dd .small { font-size: 0.75rem; font-weight: 400; }
.visit-note { margin: 0.5rem 0 0; }
.online-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.online-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-good); }
.top-pages { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.top-pages li { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; }
.top-pages code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-pages span { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .visit-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Two-factor authentication */
.tfa-other { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--border); display: grid; gap: 0.4rem; }
.tfa-other p { margin: 0; }
.tfa-other form { margin: 0; }
.tfa-steps { display: grid; gap: 1rem; max-width: 640px; }
.tfa-qr { display: flex; justify-content: center; padding: 0.5rem; background: #fff; border-radius: 8px; width: fit-content; margin: 0.5rem auto; }
.tfa-qr svg { width: 220px; height: 220px; }
.tfa-key { font-size: 1.05rem; letter-spacing: 0.08em; word-break: break-all; }
.recovery-codes { columns: 2; margin: 1rem 0; padding-left: 1.5rem; font-size: 1.1rem; }
.recovery-codes li { margin: 0.25rem 0; }
.tfa-sub { margin-top: 1.25rem !important; }
.inline-form { display: flex; gap: 0.5rem; align-items: center; }
.code-input-sm { width: 8rem; padding: 0.4rem 0.6rem; font: inherit; letter-spacing: 0.2em; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
@media print { .sidebar, .topbar, .actions { display: none !important; } }

/* Privacy Policy and SMS Terms */
.public-main:has(.policy) { max-width: 760px; text-align: left; }
.policy h2 { font-size: 1.2rem; margin: 1.75rem 0 0.5rem; }
.policy h3 { font-size: 1rem; margin: 1rem 0 0.35rem; }
.policy ul { padding-left: 1.25rem; }
.policy li { margin: 0.35rem 0; }
.policy hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0 1rem; }
.public-footer { margin-top: 3rem; text-align: center; color: var(--muted); }
.public-footer a { color: var(--muted); }

/* ---- Help Center tickets ---- */
.ticket-form .field:has([name="website"]) { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ticket-subject { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.25rem; }
.ticket-status { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  vertical-align: middle; color: #fff; }
.ticket-open { background: #2a78d6; }
.ticket-closed { background: #6b7280; }
.thread { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
.msg { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; margin-right: 2.5rem; }
.msg-staff { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  margin: 0 0 0 2.5rem; }
.msg-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.35rem; }
.msg-body { overflow-wrap: anywhere; }
.copy-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.copy-row input { flex: 1; min-width: 0; padding: 0.5rem 0.6rem; font: inherit; font-size: 0.9rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text); }
.ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .ticket-layout { grid-template-columns: minmax(0, 1fr); } .msg, .msg-staff { margin: 0; } }
.ticket-summary { margin-bottom: 0.75rem; }
.ticket-contact .facts { grid-template-columns: minmax(0, 1fr); }

/* ---- Organization sign-up ---- */
.signup-form .field:has([name="me-website2"]) { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup-form .card { margin-bottom: 1rem; }
.pending-signups { margin-bottom: 1.5rem; }
.pending-signups h2 { font-size: 1.15rem; }
.org-card.pending { border-color: var(--warn-bg); box-shadow: inset 4px 0 0 #d97706; }
.approval-card { border-left: 4px solid #d97706; margin-bottom: 1.25rem; }
.approval-card h2 { margin-top: 0; }
.approval-actions { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }
.reject-box summary { list-style: none; cursor: pointer; }
.reject-box summary::-webkit-details-marker { display: none; }
.reject-box form { display: grid; gap: 0.5rem; margin-top: 0.75rem; min-width: min(360px, 80vw); }
.reject-box textarea { font: inherit; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }

/* ---- Shipping ---- */
.ship-dialog { max-width: 520px; width: calc(100% - 2rem); padding: 1.5rem 1.75rem; border: 0; border-radius: 14px; text-align: left; }
.ship-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.dialog-x { position: absolute; top: 0.75rem; right: 0.9rem; border: 0; background: none; font-size: 1.6rem; line-height: 1;
  color: var(--muted); cursor: pointer; }
.ship-title { font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--brand-blue); text-align: center; font-size: 1.5rem; margin: 0 0 1rem; }
.ship-steps { padding-left: 1.4rem; }
.ship-steps li { margin: 0.3rem 0; }
.ship-id { color: var(--brand-red); }
.ship-important { background: var(--warn-bg); border: 1px solid color-mix(in srgb, #d97706 35%, transparent); border-radius: 8px;
  padding: 0.75rem 0.9rem; font-size: 0.92rem; }
.ship-important strong { color: #b45309; }
.ship-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
.ship-actions .claim-btn, .ship-actions .btn { width: 100%; justify-content: center; }
.ship-card { margin-bottom: 1rem; }
.ship-stage-tabs { flex-wrap: wrap; }
.ship-row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.ship-row-actions select, .ship-row-actions input { padding: 0.4rem 0.5rem; font: inherit; font-size: 0.9rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text); }
.ship-row-actions input { width: 11rem; }
.rate-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.rate-list label { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; background: var(--surface); }
.rate-list label:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.rate-price { margin-left: auto; font-weight: 700; }
.ship-method-choices { list-style: none; padding: 0; }
.field label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; margin: 0.3rem 0; cursor: pointer; }
.field input[type="radio"] { width: auto; margin: 0; accent-color: var(--primary); }
.ship-settings-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1rem; }
.ship-settings-grid > .field, .ship-settings-grid > .alert { grid-column: 1 / -1; }
.ship-settings-grid > .field:has([name^="ship-parcel_"]) { grid-column: span 1; }
@media (max-width: 760px) { .ship-settings-grid > .field:has([name^="ship-parcel_"]) { grid-column: span 2; } }