:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --ink: #181d27;
  --ink-soft: #535862;
  --ink-faint: #a4a7ae;
  --line: #e9eaeb;
  --line-soft: #f5f5f5;
  --accent: #ef6c00;
  --accent-hover: #d85f00;
  --accent-soft: #fff1e3;
  --accent-ink: #c25100;         /* the accent when it is used as text on a light surface */
  --brand: #ff8201;              /* the SearchLocal orange (wordmark, highlights) */
  --amber: #f9a825;
  --accent-fg: #ffffff;
  --good: #047857;
  --good-soft: #e3f6ee;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --warn: #b54708;
  --warn-soft: #fef0c7;
  --info: #0277bd;
  --info-soft: #e1f1fb;
  --sidebar-bg: #181d27;
  --sidebar-bg-2: #1f2430;
  --sidebar-fg: #f5f5f5;
  --sidebar-fg-soft: #a4a7ae;
  --sidebar-line: rgba(255,255,255,.07);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px -8px rgba(15,23,42,.10);
  --radius: 12px;
  --radius-sm: 8px;
  --ring: 0 0 0 3px rgba(239,108,0,.26);
  --mod: var(--accent);           /* per-module accent, overridden by .mod-* */
  --mod-soft: var(--accent-soft);
}
.mod-coupons { --mod: #ef6c00; --mod-soft: #fff1e3; }
.mod-events  { --mod: #0277bd; --mod-soft: #e1f1fb; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12141a;
    --surface: #1b1e26;
    --surface-2: #20242d;
    --ink: #f5f5f5;
    --ink-soft: #a4a7ae;
    --ink-faint: #717680;
    --line: #2e323c;
    --line-soft: #252932;
    --accent: #ff9a3d;
    --accent-hover: #ffb067;
    --accent-soft: #33200f;
    --accent-ink: #ffb067;
    --accent-fg: #1a1206;
    --good: #4ade9b;
    --good-soft: #10281f;
    --danger: #f87871;
    --danger-soft: #2b1614;
    --warn: #f0b95a;
    --warn-soft: #2a2010;
    --info: #5bb6ee;
    --info-soft: #0f2a3a;
    --sidebar-bg: #0f1115;
    --sidebar-bg-2: #161920;
    --shadow-sm: none;
    --shadow-md: 0 8px 24px -8px rgba(0,0,0,.5);
    --ring: 0 0 0 3px rgba(255,154,61,.32);
  }
  .mod-coupons { --mod: #ff9a3d; --mod-soft: #33200f; }
  .mod-events  { --mod: #5bb6ee; --mod-soft: #0f2a3a; }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .brand-name { font-family: "Poppins", "Inter", system-ui, sans-serif; }
h1, h2, h3 { letter-spacing: -.02em; }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.icon { flex-shrink: 0; }
code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; background: var(--line-soft); padding: 2px 6px; border-radius: 5px; }

/* ---------- Buttons & inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13.5px;
  border: 1px solid transparent; transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: 0 1px 2px rgba(239,108,0,.4), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.btn-block { width: 100%; }
.muted { color: var(--ink-soft); }

input, select {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--ink-faint); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); padding: 0; }
.search-input {
  min-width: 260px; padding-left: 36px;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 12px 50%;
}
.error-text { color: var(--danger); font-size: 13px; }

/* ---------- Login ---------- */
.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 5fr) 6fr; }
.login-brand {
  background: radial-gradient(1000px 560px at 0% 0%, rgba(255,130,1,.30) 0%, transparent 62%), radial-gradient(700px 420px at 100% 100%, rgba(249,168,37,.14) 0%, transparent 60%), linear-gradient(160deg, #14171f, #20242f);
  color: #e8ecf5; padding: 44px 52px; display: flex; flex-direction: column; justify-content: space-between;
}
.login-brand h2 { font-size: 2rem; font-weight: 700; line-height: 1.2; margin-bottom: 16px; }
.login-brand p { color: #a9b4cf; max-width: 380px; font-size: 15px; }
.login-brand .login-foot { font-size: 12.5px; color: #6c789a; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 32px; }
.login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.login-card h1 { font-size: 1.6rem; font-weight: 700; }
.login-sub { color: var(--ink-soft); margin-top: -8px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
@media (max-width: 860px) { .login-screen { grid-template-columns: 1fr; } .login-brand { display: none; } }

/* ---------- Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 264px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  color: var(--sidebar-fg); display: flex; flex-direction: column; padding: 20px 14px 14px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 22px; }
.brand-mark {
  display: block; width: 38px; height: 38px; flex-shrink: 0; object-fit: cover;
  border-radius: 11px; background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 4px 14px -3px rgba(0,0,0,.55);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.brand-name .b-search { color: var(--brand); }
.login-brand .brand-name { font-size: 20px; }
.login-brand h2 .hl { color: var(--brand); }
.brand-sub { font-size: 11.5px; color: var(--sidebar-fg-soft); }

.nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--sidebar-fg-soft); opacity: .7; padding: 18px 12px 6px; }
.nav-label:first-child { padding-top: 4px; }
.nav-link, .nav-module-head {
  width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
  background: none; border: none; color: var(--sidebar-fg-soft);
  padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; transition: background .12s, color .12s;
}
.nav-link:hover, .nav-module-head:hover { background: rgba(255,255,255,.055); color: var(--sidebar-fg); }
.nav-link:focus-visible, .nav-module-head:focus-visible { outline: 2px solid #ff8201; outline-offset: -2px; }
.nav-link.active { background: rgba(255,130,1,.17); color: #fff; }
.nav-link.active .icon { color: #ffb067; }

.nav-module { border-radius: 10px; }
.nav-module-head { color: var(--sidebar-fg); font-weight: 600; }
.nav-module-head .mod-icon {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--mod-soft); color: var(--mod);
}
.nav-module-head .caret { margin-left: auto; opacity: .55; transition: transform .18s; }
.nav-module.open .caret { transform: rotate(180deg); }
.nav-module-src { font-size: 10.5px; font-weight: 500; color: var(--sidebar-fg-soft); background: rgba(255,255,255,.06); padding: 1px 7px; border-radius: 99px; }
.nav-sub { display: none; flex-direction: column; gap: 1px; margin: 2px 0 6px 24px; padding-left: 12px; border-left: 1px solid var(--sidebar-line); }
.nav-module.open .nav-sub { display: flex; }
.nav-sub .nav-link { padding: 7px 10px; font-size: 13px; }
.nav-sub .nav-link .icon { width: 16px; height: 16px; }

.sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 14px 8px 2px; margin-top: 10px; border-top: 1px solid var(--sidebar-line); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #334155, #1e293b); display: grid; place-items: center; font-weight: 600; font-size: 13px; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.user-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; font-size: 13px; font-weight: 500; }
.user-role { font-size: 11.5px; color: var(--sidebar-fg-soft); font-weight: 400; }
.icon-btn { background: none; border: none; color: var(--sidebar-fg-soft); padding: 7px; border-radius: 8px; display: grid; place-items: center; }
.icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 5; height: 60px; padding: 0 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.crumbs .sep { color: var(--ink-faint); }
.crumbs strong { color: var(--ink); font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 500; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.pill.live { color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, var(--line)); background: var(--good-soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.pill.live .dot { background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.content { padding: 30px 36px 48px; max-width: 1600px; width: 100%; }
.view-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.view-header h1 { font-size: 1.65rem; font-weight: 700; }
.view-sub { color: var(--ink-soft); margin-top: 4px; }
.source-chip { font-size: 12px; font-weight: 500; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); padding: 5px 12px; border-radius: 99px; white-space: nowrap; box-shadow: var(--shadow-sm); }

/* ---------- Dashboard modules ---------- */
.module-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); margin-bottom: 20px; overflow: hidden; }
.module-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
.module-head .mod-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--mod-soft); color: var(--mod); }
.module-head h2 { font-size: 1.05rem; font-weight: 650; }
.module-meta { color: var(--ink-soft); font-size: 12.5px; }
.module-head .pill { margin-left: auto; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat-card { padding: 20px 22px; border-right: 1px solid var(--line-soft); }
.stat-card:last-child { border-right: none; }
.stat-card .l { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.stat-card .n { font-size: 1.85rem; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.stat-card .n small { font-size: .95rem; color: var(--ink-faint); font-weight: 500; letter-spacing: 0; }
.module-job { padding: 14px 22px 18px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }

/* ---------- Panels / forms ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 22px; margin-bottom: 20px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { font-size: 1rem; font-weight: 650; }
.panel-hint { font-size: 12.5px; color: var(--ink-faint); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid label { min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink); font-weight: 500; }
.form-grid input, .form-grid select { width: 100%; min-width: 0; }
.form-grid .opt { color: var(--ink-faint); font-weight: 400; font-size: 12px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-faint); }
.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 4px; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.form-msg { margin-top: 14px; font-size: 13px; padding: 10px 14px; border-radius: var(--radius-sm); }
.form-msg.error { color: var(--danger); background: var(--danger-soft); }
.form-msg.ok { color: var(--good); background: var(--good-soft); }

/* ---------- Tables ---------- */
.table-scroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md);
  /* soft edge shadows appear only on the side that still has hidden columns */
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) 0 0 / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0 / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .2), transparent) 0 0 / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .2), transparent) 100% 0 / 14px 100% no-repeat scroll,
    var(--surface);
}
.table-scroll.flush { border: none; box-shadow: none; border-radius: 0; margin: 0 -22px -22px; border-top: 1px solid var(--line-soft); }
table { border-collapse: collapse; width: 100%; min-width: 620px; }
thead th {
  text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }
td.strong { font-weight: 550; }
td.muted { color: var(--ink-soft); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 550; text-transform: capitalize; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.badge.unchecked { background: var(--warn-soft); color: var(--warn); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.plain::before { display: none; }
.badge.plain { background: var(--line-soft); color: var(--ink-soft); text-transform: none; }

.row-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px; font-size: 12.5px; font-weight: 500; text-decoration: none; margin-right: 4px; transition: border-color .12s, color .12s, background .12s; }
.row-btn:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.row-btn:disabled { opacity: .5; cursor: wait; }
.slug-input { padding: 5px 9px; width: 160px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }

/* ---------- Toolbar / tabs / pagination ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.tabs { display: inline-flex; gap: 2px; background: var(--line-soft); padding: 3px; border-radius: 10px; }
.tab { background: none; border: none; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 550; color: var(--ink-soft); }
.tab:hover { color: var(--ink); }
.tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.pagination { display: flex; gap: 12px; margin-top: 16px; align-items: center; font-size: 13px; color: var(--ink-soft); }
.pagination button { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px; font-weight: 500; }
.pagination button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Activity / progress ---------- */
.activity-log { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; font-size: 13px; }
.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.activity-item:last-child { border-bottom: none; }
.activity-item > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.activity-dot.ok { background: var(--good); }
.activity-dot.fail { background: var(--danger); }
.activity-dot.skip { background: var(--warn); }
.activity-dot.info { background: var(--ink-faint); }
.activity-time { color: var(--ink-faint); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; white-space: nowrap; padding-top: 1px; }
.empty { color: var(--ink-faint); font-size: 13px; padding: 6px 0; }

.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.progress-head strong { font-weight: 600; }
.progress-label { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.progress-bar-track { height: 8px; background: var(--line-soft); border-radius: 99px; overflow: hidden; margin: 10px 0 14px; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #ef6c00, #f9a825); border-radius: 99px; transition: width .4s ease; }

.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.check .opt { color: var(--ink-faint); font-size: 12px; }

.inline-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.inline-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar-right select { padding: 8px 12px; }
.table-scroll td .check { white-space: nowrap; }
.row-btn { white-space: nowrap; }

/* ==========================================================================
   Responsive layer
   >1024  fixed sidebar            <=1024  off-canvas drawer + hamburger
   <=720  phone: stacked toolbars/forms, tables become cards
   <=420  small phones: tighter spacing, 2-up stats
   ========================================================================== */
.menu-btn { display: none; background: var(--surface); border: 1px solid var(--line); color: var(--ink); width: 40px; height: 40px; border-radius: 10px; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.menu-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.menu-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crumbs { min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs > * { flex-shrink: 0; }
.crumbs strong { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.topbar-right .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(6, 10, 20, .55); backdrop-filter: blur(2px); opacity: 0; transition: opacity .2s; }
.scrim.show { opacity: 1; }
.view-header > div:first-child { min-width: 0; }
.view-sub { overflow-wrap: anywhere; }
.tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; }
.stat-card { min-width: 0; }
.module-head > div { min-width: 0; flex: 1 1 0; }
td code { white-space: nowrap; }
.panel code { overflow-wrap: anywhere; }
/* editable admin tables carry many inputs: tighter cells keep them on screen longer before they scroll */
#tma-table th, #tma-table td, #flc-table th, #flc-table td { padding-left: 10px; padding-right: 10px; }
/* fluid inputs: they take the width the column gets instead of forcing the table wider */
#tma-table .slug-input, #flc-table .slug-input { width: 100%; min-width: 92px !important; max-width: 240px; }
#tma-table td:last-child, #flc-table td:last-child { white-space: nowrap; }

/* Progressive columns: the wide admin tables drop their least important columns as the window narrows, so
   they fit without sideways scrolling (a 22" monitor at 1920, 1600, 1440 or 1366 CSS px, laptops, small
   windows). Everything stays available on phones/tablets, where rows become cards. */
@media (min-width: 941px) { #tma-table td:first-child, #flc-table td:first-child { min-width: 136px; } }
@media (min-width: 1521px) { #tma-table td:first-child, #flc-table td:first-child { min-width: 190px; } }   /* room for "West Virginia (WV)" */
@media (min-width: 941px) and (max-width: 1700px) {
  #tma-table :is(th, td):is(:nth-child(5), :nth-child(8)) { display: none; }     /* Key, Fetched */
  #flc-table :is(th, td):is(:nth-child(5), :nth-child(7)) { display: none; }     /* On site, Last read */
  #events-table :is(th, td):nth-child(2) { display: none; }                       /* Category */
}
@media (min-width: 941px) and (max-width: 1520px) {
  #tma-table :is(th, td):is(:nth-child(3), :nth-child(7)) { display: none; }     /* Type, Last run */
  #flc-table :is(th, td):nth-child(4) { display: none; }                          /* Stored */
  #events-table :is(th, td):nth-child(6) { display: none; }                       /* Price */
}
@media (min-width: 941px) and (max-width: 1200px) {
  #tma-table :is(th, td):nth-child(6) { display: none; }                          /* Stored events */
  #events-table :is(th, td):nth-child(3) { display: none; }                       /* Venue */
  #tma-table th, #tma-table td, #flc-table th, #flc-table td { padding-left: 8px; padding-right: 8px; }
}
.login-mobile-brand { display: none; }
.drawer-close { display: none; margin-left: auto; }

.slug-cell { display: flex; align-items: center; gap: 6px; }
@media (max-width: 1024px) {
  .drawer-close { display: grid; }
  .sidebar {
    position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; height: 100%; width: min(86vw, 304px);
    transform: translateX(-102%); transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility .24s; visibility: hidden;
    box-shadow: 12px 0 40px -12px rgba(0, 0, 0, .55); padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .sidebar.open { transform: none; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .menu-btn { display: grid; }
  .topbar { padding: 0 20px; }
  .content { padding: 24px 20px 44px; }
  .nav-link, .nav-module-head { min-height: 42px; }
}
@media (min-width: 1025px) { .scrim { display: none !important; } }

@media (max-width: 860px) {
  .login-panel { padding: 24px 20px; align-items: flex-start; padding-top: 12vh; }
  .login-mobile-brand { display: flex; padding: 0 0 6px; }
  .login-mobile-brand .brand-name { color: var(--ink); }
}

@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .topbar { height: 56px; padding: 0 12px; gap: 10px; }
  .content { padding: 18px 14px 40px; }
  .view-header { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 18px; }
  .view-header h1 { font-size: 1.4rem; }
  .source-chip { align-self: flex-start; }
  .panel { padding: 16px; margin-bottom: 16px; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 12px; }
  .table-scroll.flush { margin: 0 -16px -16px; }

  /* touch-friendly, and 16px text so iOS doesn't zoom on focus */
  input, select, .tab, .slug-input { font-size: 16px; }
  input:not([type="checkbox"]), select { min-height: 44px; }
  .btn { min-height: 44px; }
  .row-btn { min-height: 38px; padding: 6px 14px; }
  .pagination button { min-height: 40px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
  .check { min-height: 32px; align-items: flex-start; }

  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .tabs .tab { flex: 1 0 auto; }
  .search-input, .toolbar-right, .toolbar-right select { width: 100%; min-width: 0; }
  .toolbar-right { flex-direction: column; align-items: stretch; }

  .inline-form { flex-direction: column; align-items: stretch; gap: 12px; }
  .inline-form label { width: 100%; }
  .inline-form input, .inline-form select { width: 100% !important; }
  .inline-form .btn { width: 100%; }
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; }

  .module-head { padding: 14px 16px; gap: 12px; }
  .module-head .mod-icon { width: 36px; height: 36px; flex-shrink: 0; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: 14px 16px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .stat-card:nth-child(2n) { border-right: none; }
  .stat-card .n { font-size: 1.5rem; }
  .module-job { padding: 12px 16px 16px; }
  .pagination { flex-wrap: wrap; justify-content: space-between; }
  .pagination span { order: -1; width: 100%; }

  /* Tables become cards. Cells get their data-label from the header row (ui.js labelTables). */
  .table-scroll { overflow-x: visible; background: transparent; border: none; box-shadow: none; border-radius: 0; }
  .table-scroll table, .table-scroll tbody { display: block; min-width: 0; width: 100%; }
  .table-scroll thead { display: none; }
  .table-scroll tbody tr {
    display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 6px 14px; margin-bottom: 12px;
  }
  .table-scroll.flush tbody tr { box-shadow: none; }
  .table-scroll tbody tr:hover td { background: transparent; }
  .table-scroll tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: right;
    padding: 9px 0; border-bottom: 1px solid var(--line-soft); min-width: 0; overflow-wrap: anywhere;
  }
  .table-scroll tbody td:last-child { border-bottom: none; }
  .table-scroll tbody td::before {
    content: attr(data-label); flex: 0 0 34%; max-width: 34%; text-align: left; overflow-wrap: normal;
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
  }
  .table-scroll tbody td[data-label=""]::before { display: none; }
  .table-scroll tbody td[colspan] { display: block; text-align: center; border: none; }
  .table-scroll tbody td[colspan]::before { display: none; }
  .table-scroll tbody td > .slug-input, .table-scroll tbody td > input:not([type="checkbox"]) { flex: 1 1 0; width: 100% !important; min-width: 0 !important; text-align: left; }
  .table-scroll tbody td > .slug-cell { flex: 1 1 0; min-width: 0; }
  .table-scroll tbody td .slug-cell .slug-input { flex: 1 1 0; width: auto !important; min-width: 0 !important; text-align: left; }
  .table-scroll tbody td:has(> .slug-input) { align-items: center; }
  .table-scroll tbody td .row-btn { margin: 0; }
  .table-scroll tbody td:last-child:has(.row-btn) { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .table-scroll tbody td:last-child:has(.row-btn)::before { display: none; }

  td code { white-space: normal; overflow-wrap: anywhere; }
  #tma-table, #flc-table { min-width: 0; }
  #tma-table .slug-input, #flc-table .slug-input { max-width: none; }
  #tma-table td:last-child, #flc-table td:last-child { white-space: normal; }
  #tma-table th, #tma-table td, #flc-table th, #flc-table td { padding-left: 0; padding-right: 0; }
  .activity-log { max-height: 280px; }
  .activity-item { flex-wrap: wrap; row-gap: 2px; }
  .activity-time { flex-basis: 100%; padding-left: 18px; }
}

@media (min-width: 721px) and (max-width: 940px) {
  /* Wide tables (8+ columns, marked .wide by ui.js) become cards on tablets too. */
  .table-scroll.wide { overflow-x: visible; background: transparent; border: none; box-shadow: none; border-radius: 0; }
  .table-scroll.wide table, .table-scroll.wide tbody { display: block; min-width: 0; width: 100%; }
  #tma-table, #flc-table { min-width: 0; }
  #tma-table .slug-input, #flc-table .slug-input { max-width: none; }
  #tma-table td:last-child, #flc-table td:last-child { white-space: normal; }
  .table-scroll.wide thead { display: none; }
  .table-scroll.wide tbody tr {
    display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 6px 14px; margin-bottom: 12px;
  }
  .table-scroll.wide.flush tbody tr { box-shadow: none; }
  .table-scroll.wide tbody tr:hover td { background: transparent; }
  .table-scroll.wide tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: right;
    padding: 9px 0; border-bottom: 1px solid var(--line-soft); min-width: 0; overflow-wrap: anywhere;
  }
  .table-scroll.wide tbody td:last-child { border-bottom: none; }
  .table-scroll.wide tbody td::before {
    content: attr(data-label); flex: 0 0 34%; max-width: 34%; text-align: left; overflow-wrap: normal;
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
  }
  .table-scroll.wide tbody td[data-label=""]::before { display: none; }
  .table-scroll.wide tbody td[colspan] { display: block; text-align: center; border: none; }
  .table-scroll.wide tbody td[colspan]::before { display: none; }
  .table-scroll.wide tbody td > .slug-input, .table-scroll.wide tbody td > input:not([type="checkbox"]) { flex: 1 1 0; width: 100% !important; min-width: 0 !important; text-align: left; }
  .table-scroll.wide tbody td:has(> .slug-input) { align-items: center; }
  .table-scroll.wide tbody td .row-btn { margin: 0; }
  .table-scroll.wide tbody td:last-child:has(.row-btn) { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .table-scroll.wide tbody td:last-child:has(.row-btn)::before { display: none; }
  .table-scroll.wide tbody td > .slug-cell { flex: 1 1 0; min-width: 0; }
  .table-scroll.wide tbody td .slug-cell .slug-input { flex: 1 1 0; width: auto !important; min-width: 0 !important; text-align: left; }
}

@media (max-width: 420px) {
  .content { padding: 14px 12px 36px; }
  .view-header h1 { font-size: 1.28rem; }
  .topbar-right .pill { padding: 4px 10px; font-size: 12px; }
  .crumbs > :not(strong) { display: none; }
  .stat-card .l { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .scrim, .progress-bar-fill, .btn { transition: none; }
  .pill.live .dot { animation: none; }
}

.login-brand .brand { gap: 14px; padding-bottom: 0; }
.login-brand .brand-mark { width: 52px; height: 52px; border-radius: 14px; }
.login-mobile-brand .brand-mark { width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -6px rgba(0,0,0,.35); }
@media (max-width: 420px) { .sidebar .brand-mark { width: 34px; height: 34px; border-radius: 10px; } }
.topbar-logo { display: none; width: 32px; height: 32px; border-radius: 9px; object-fit: cover; background: #000; flex-shrink: 0; box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 1024px) { .topbar-logo { display: block; } }