/* styles.css — single consolidated stylesheet for OS Search.
   Contains tokens, layout, tabs, filters, forms, results, admin, login
   wall, responsive rules, and small utilities. Historically this was
   split across search_ui.css, responsive_tabs.css, topic_styles.css and
   ui_polish.css; those have all been merged here. */

/* ---------------- Utilities (kept from search_ui.css) ---------------- */
.hidden { display: none !important; }
.block-label { display: block; }
.inline-flex-nowrap { display: inline-flex; align-items: center; white-space: nowrap; }
.mr-5 { margin-right: 5px; }

/* Topic chips base (color variants are injected dynamically by tabs.js). */
.topic-chip {
  display: inline-block;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 12px;
  margin-right: 7px;
  margin-bottom: 4px;
  font-size: 0.98em;
  vertical-align: baseline;
  background: #e6f6ea;
  color: #007a3d;
  border: 1px solid #b6e2cc;
  transition: background 0.2s, color 0.2s;
}
.topic-chip:last-child { margin-right: 0; }

:root {
  --brand: #007a3d;
  --brand-dark: #005a2c;
  --brand-50: #e8f4ec;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --border: #e4e7eb;
  --border-strong: #cfd4da;
  --text: #1f2933;
  --text-muted: #52606d;
  --text-subtle: #7b8794;
  --danger: #c0392b;
  --danger-bg: #fdecea;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
  --shadow: 0 4px 12px rgba(16,24,40,0.06), 0 2px 4px rgba(16,24,40,0.04);
  --ring: 0 0 0 3px rgba(0,122,61,0.18);
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------ */
/* Top meta: version label + auth controls                             */
/* ------------------------------------------------------------------ */
body > div[style*="position:absolute"][style*="top:8px;left"] {
  font-size: 0.78em !important;
  color: var(--text-subtle) !important;
  top: 14px !important;
  left: 18px !important;
}

#auth-controls {
  top: 10px !important;
  right: 18px !important;
  gap: 10px !important;
}
#auth-controls #auth-status {
  color: var(--text-muted) !important;
  font-size: 0.88em !important;
}
#auth-controls button {
  margin: 0 !important;
  padding: 6px 12px !important;
  font-size: 0.85em !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm);
}
#auth-controls button:hover {
  background: var(--brand-50) !important;
  border-color: var(--brand) !important;
  color: var(--brand-dark) !important;
}

/* ------------------------------------------------------------------ */
/* Tab bar                                                             */
/* ------------------------------------------------------------------ */
.tabs {
  width: 70vw;
  max-width: none;
  min-width: 720px;
  margin: 0 auto !important;
  padding: 48px 24px 0 !important;
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border) !important;
  align-items: flex-end;
}
.tabs .tab {
  padding: 12px 20px !important;
  font-size: 0.98em !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: color .15s, background .15s, border-color .15s;
  cursor: pointer;
}
.tabs .tab:hover {
  background: rgba(0,122,61,0.06) !important;
  color: var(--brand-dark) !important;
}
.tabs .tab.active {
  color: var(--brand-dark) !important;
  border-bottom-color: var(--brand) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */
#main-flex {
  width: 70vw;
  max-width: none;
  min-width: 720px;
  margin: 24px auto 56px !important;
  padding: 0 24px;
  gap: 24px !important;
  align-items: flex-start !important;
}
/* Fixed-width sidebar so the main container width is purely a function of
   the viewport, not of sidebar content. */
#main-flex > div:first-child {
  flex: 0 0 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  min-height: 0;
}

#main-flex.no-sidebar > div:first-child {
  display: none !important;
}
#main-flex.no-sidebar .container {
  flex: 1 1 100%;
}

.container {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  padding: 32px !important;
  display: block !important;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Filter panels                                                       */
/* ------------------------------------------------------------------ */
.filter-panel,
#bulletin-filter-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius) !important;
  padding: 18px !important;
  min-width: 0 !important;
  max-width: none !important;
  position: sticky;
  top: 16px;
}
.filter-panel + .filter-panel,
#search-filter-panel + #bulletin-filter-panel {
  margin-top: 16px !important;
}
.filter-panel h3 {
  margin: 0 0 12px !important;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.filter-panel .block-label {
  display: block;
  margin: 4px 0;
  font-size: 0.94em;
  color: var(--text);
  cursor: pointer;
}
.filter-panel .block-label:hover { color: var(--brand-dark); }
.filter-panel input[type="checkbox"] {
  width: auto !important;
  margin: 0 8px 0 0 !important;
  accent-color: var(--brand);
}
.filter-panel label[for="date_from"],
.filter-panel label[for="date_to"],
#topic-threshold-container label {
  margin-top: 14px;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

#sources-list,
#topics-list {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin-top: 8px !important;
  max-height: 320px;
  overflow-y: auto;
}

#search-filter-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#search-filter-panel #sources-list {
  flex: 1 1 auto;
  min-height: 140px;
  max-height: none;
}

/* Range slider accent */
input[type="range"] { accent-color: var(--brand); }

/* ------------------------------------------------------------------ */
/* Typography / headings                                               */
/* ------------------------------------------------------------------ */
.container h1 {
  font-size: 1.6em;
  text-align: left !important;
  margin: 0 0 20px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ------------------------------------------------------------------ */
/* Inputs & buttons                                                    */
/* ------------------------------------------------------------------ */
.container label,
#view-admin label {
  display: block;
  margin-top: 12px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="search"],
textarea,
select {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--surface);
  font-size: 0.98em;
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: var(--ring);
}

button {
  margin-top: 14px;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 0.95em !important;
  background: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  color: #fff !important;
  cursor: pointer;
  transition: background .12s, transform .05s, box-shadow .12s;
}
button:hover:not(:disabled) {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled {
  background: #cbd2d9 !important;
  border-color: #cbd2d9 !important;
  color: #fff !important;
  cursor: not-allowed;
}

/* Search form — pinned at the top of the Search card while results scroll
   beneath it. Rendered visually as part of the container, separated by a
   subtle 95%-wide grey fold line. */
#search-form {
  display: grid;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  padding: 0 0 20px;
  margin: 0 0 20px;
}
#search-form::after {
  content: '';
  position: absolute;
  left: 2.5%;
  right: 2.5%;
  bottom: 0;
  height: 1px;
  background: var(--border);
}
#search-form button[type="submit"] {
  justify-self: start;
  margin-top: 14px;
}

/* ------------------------------------------------------------------ */
/* Results                                                             */
/* ------------------------------------------------------------------ */
.results { margin-top: 20px; }

/* Initial intro paragraphs inside #results */
#results > p {
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
  padding: 10px 14px;
  border-radius: 6px;
  margin: 0 0 8px;
  font-size: 0.92em;
  color: var(--text-muted);
}
#results > p i { font-style: normal; }

.article {
  padding: 18px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 12px !important;
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.article:last-child {
  border: 1px solid var(--border) !important;
}
.article:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-sm);
}
.headline {
  font-size: 1.08em !important;
  line-height: 1.35 !important;
  margin-bottom: 6px;
  font-weight: 600 !important;
}
.headline a {
  color: var(--text) !important;
  text-decoration: none;
}
.headline a:hover { color: var(--brand-dark); text-decoration: underline; }
.meta { color: var(--text-subtle) !important; font-size: 0.88em !important; }
.summary { margin: 8px 0 !important; color: var(--text); }
.labels { color: var(--brand-dark) !important; }

.article a[href^="http"] { color: var(--brand-dark); word-break: break-word; }
.article img[alt=""] {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin-right: 8px !important;
}

/* Flag button & icon */
.flag-article-btn {
  margin-top: 0 !important;
  padding: 2px 6px !important;
  background: transparent !important;
  border: none !important;
  color: #b8b8b8 !important;
  font-weight: 400;
  box-shadow: none !important;
}
.flag-article-btn:hover:not(:disabled) {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

/* Topic chips — refine base; color variants still injected by tabs.js */
.topic-chip {
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 0.72em !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Admin tab                                                           */
/* ------------------------------------------------------------------ */

/* Sub-tab nav inside the Admin tab */
#view-admin .subtabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin: 0 0 20px;
  padding: 0;
}
#view-admin .subtab {
  padding: 8px 14px !important;
  margin: 0 !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 6px 6px 0 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
#view-admin .subtab:hover:not(:disabled) {
  background: rgba(0,122,61,0.05) !important;
  color: var(--brand-dark) !important;
}
#view-admin .subtab.active {
  color: var(--brand-dark) !important;
  border-bottom-color: var(--brand) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

#view-admin .admin-pane {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.admin-pane-intro {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 0.92em;
  line-height: 1.5;
}
.admin-flagged-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 2px 0 10px;
  font-size: 0.88em;
}
.admin-flagged-live {
  color: var(--brand-dark);
  text-decoration: none;
  word-break: break-all;
}
.admin-flagged-live:hover { text-decoration: underline; }
.admin-flagged-cache {
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}
.admin-flagged-cache:hover {
  color: var(--brand-dark);
  border-color: var(--brand);
  background: var(--brand-50);
}
.admin-flagged-missing {
  color: var(--text-subtle);
  font-style: italic;
}
.admin-hidden-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #fdecea;
  color: var(--danger);
  border: 1px solid #f5c6cb;
  border-radius: 999px;
  vertical-align: middle;
}
#view-admin .admin-toggle-ignore {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
}
#view-admin .admin-toggle-ignore:hover:not(:disabled) {
  background: var(--surface-2) !important;
  border-color: var(--brand) !important;
  color: var(--brand-dark) !important;
}

/* Legacy section styling kept for any non-pane sections (e.g. none now). */
#view-admin section:not(.admin-pane) {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  margin-top: 28px !important;
  margin-bottom: 0 !important;
}
#view-admin section:not(.admin-pane):first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0 !important;
}
#view-admin h3 {
  font-size: 1em;
  margin: 0 0 14px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.005em;
}
#view-admin .article {
  background: var(--surface-2);
}
#view-admin .article input[type="text"],
#view-admin .article input[type="email"],
#view-admin .article textarea {
  margin-top: 0;
  background: var(--surface);
}
#view-admin button {
  margin-top: 0 !important;
  padding: 8px 14px !important;
  font-size: 0.88em !important;
}
#view-admin button[style*="background:#a33"],
#view-admin .admin-delete-source,
#view-admin .admin-clear-flag {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
}
#view-admin button[style*="background:#a33"]:hover,
#view-admin .admin-delete-source:hover,
#view-admin .admin-clear-flag:hover {
  background: #a93226 !important;
  border-color: #a93226 !important;
}

/* Admin: add-source grid */
#view-admin section > div[style*="grid"] {
  background: var(--surface-2);
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
#view-admin section > div[style*="grid"] label {
  margin: 0;
  font-size: 0.88em;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#view-admin section > div[style*="grid"] input[type="checkbox"] {
  width: auto;
  accent-color: var(--brand);
}

/* Admin users row: email + action */
#admin-users-list .article {
  padding: 12px 16px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
}
#admin-users-list .article > span { color: var(--text); font-weight: 500; }

/* Recent searches */
#admin-recent-searches .article {
  padding: 12px 16px !important;
}
#admin-recent-searches .article b { color: var(--text); }

/* ------------------------------------------------------------------ */
/* Status messages                                                     */
/* ------------------------------------------------------------------ */
#loading,
#bulletin-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--brand-50);
  color: var(--brand-dark);
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.92em;
}
#loading::before,
#bulletin-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  border-top-color: transparent;
  animation: os-spin 0.7s linear infinite;
}
@keyframes os-spin { to { transform: rotate(360deg); } }

.error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid #f5c6cb;
  padding: 10px 14px;
  border-radius: 8px;
  margin-top: 14px;
  font-size: 0.92em;
}
.error:empty {
  display: none;
  padding: 0;
  border: 0;
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Scrollbars                                                          */
/* ------------------------------------------------------------------ */
#sources-list::-webkit-scrollbar,
#topics-list::-webkit-scrollbar { width: 8px; }
#sources-list::-webkit-scrollbar-thumb,
#topics-list::-webkit-scrollbar-thumb {
  background: #cfd4da;
  border-radius: 4px;
}
#sources-list::-webkit-scrollbar-thumb:hover,
#topics-list::-webkit-scrollbar-thumb:hover { background: #a7b0ba; }

/* ------------------------------------------------------------------ */
/* Landing login wall (role = stranger)                                */
/* ------------------------------------------------------------------ */

/* Hide the whole app underneath when not authenticated. We keep it in
   the DOM so existing scripts don't crash on missing elements. */
body.role-stranger .tabs,
body.role-stranger #main-flex,
body.role-stranger #auth-controls,
body.role-stranger > div[style*="position:absolute"][style*="top:8px;left"] {
  display: none !important;
}
body.role-stranger { overflow: hidden; }

#login-wall {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(
      1200px 600px at 15% 10%,
      rgba(0, 122, 61, 0.12),
      transparent 60%
    ),
    radial-gradient(
      1000px 500px at 90% 90%,
      rgba(0, 122, 61, 0.10),
      transparent 60%
    ),
    linear-gradient(180deg, #f7faf8 0%, #eef3ef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(16, 24, 40, 0.12),
    0 2px 6px rgba(16, 24, 40, 0.06);
  padding: 36px 32px 28px;
  text-align: left;
  position: relative;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.login-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.login-wordmark { line-height: 1.15; }
.login-title {
  font-size: 1.35em;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.login-subtitle {
  font-size: 0.9em;
  color: var(--text-muted);
  margin-top: 2px;
}

.login-intro {
  margin: 0 0 22px;
  font-size: 0.98em;
  color: var(--text);
  line-height: 1.55;
}

.login-primary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 !important;
  padding: 12px 18px !important;
  font-size: 1em !important;
  font-weight: 600;
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.login-primary:hover {
  background: var(--surface) !important;
  border-color: var(--brand) !important;
  box-shadow: var(--ring);
}
.login-primary .g-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(
    from -45deg,
    #ea4335 0deg 90deg,
    #fbbc05 90deg 180deg,
    #34a853 180deg 270deg,
    #4285f4 270deg 360deg
  );
  color: #fff;
  font-weight: 700;
  font-size: 0.8em;
  font-family: "Google Sans", Arial, sans-serif;
  flex-shrink: 0;
}

.login-footnote {
  margin: 22px 0 0;
  font-size: 0.82em;
  color: var(--text-subtle);
  line-height: 1.5;
}
.login-footnote strong { color: var(--text-muted); }

.login-version {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 0.72em;
  color: var(--text-subtle);
}

@media (max-width: 520px) {
  .login-card { padding: 28px 22px 24px; border-radius: 14px; }
  .login-title { font-size: 1.2em; }
}

/* ------------------------------------------------------------------ */
/* Desktop fixed-viewport shell: tabs + sidebar stay pinned; content   */
/* panels scroll independently. On Admin, the sub-tab nav also stays   */
/* pinned while the active pane scrolls.                               */
/* ------------------------------------------------------------------ */
@media (min-width: 901px) {
  html, body { height: 100%; margin: 0; }
  body[data-role]:not(.role-stranger) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .tabs {
    flex: 0 0 auto;
  }

  #main-flex {
    flex: 1 1 auto;
    min-height: 0;
    margin: 24px auto 0 !important;
    padding-bottom: 0;
    align-items: stretch !important;
  }

  /* Left column (filter panels) scrolls on its own if it gets tall. */
  #main-flex > div:first-child {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .filter-panel {
    position: static !important;
    top: auto !important;
  }

  /* Search + Bulletin: scroll the whole card. The sticky search form
     provides its own visual top edge, and the bulletin renders straight
     into its results; in both cases we don't want a 32px padded strip at
     the top of the scroll area. */
  .container {
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 0 !important;
  }

  /* Admin: card itself is the flex shell; the sub-tab bar is pinned and
     the active pane owns the scroll. #view-admin inherits display:flex
     from this rule once tabs.js clears its inline `display:none`. */
  #view-admin {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  #view-admin > .subtabs {
    flex: 0 0 auto;
  }
  #view-admin .admin-pane {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 0;
    /* keep a little breathing room below the last row when scrolled */
    padding-bottom: 4px;
  }
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .tabs { padding: 28px 16px 0 !important; overflow-x: auto; flex-wrap: nowrap; }
  .tabs .tab { white-space: nowrap; }
  #main-flex {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 16px;
    margin-top: 16px !important;
  }
  #main-flex > div:first-child {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100%;
  }
  .filter-panel,
  #bulletin-filter-panel {
    max-width: 100% !important;
    position: static;
  }
  .container { padding: 22px !important; }
  #view-admin section > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
  #auth-controls { right: 12px !important; }
}