/* ==========================================================================
   Theme tokens, base resets, and global helpers
   ========================================================================== */

:root {
  /* Colors */
  --c-bg: #ffffff;
  --c-bg-soft: #F9FAFB;
  --c-card: #ffffff;
  --c-border: #E5E7EB;
  --c-text: #111827;
  --c-muted: #6b7280;
  --c-note: #374151;
  --c-tableHeader: #f9fafb;

  /* Buttons */
  --c-btn: #F3F4F6;
  --c-btnText: #374151;
  --c-btnPrimary: #3092D0;
  --c-btnPrimaryText: #ffffff;

  /* Icon buttons */
  --c-iconBtnBg: #ffffff;
  --c-iconBtnBorder: #E5E7EB;

  /* Hover */
  --c-hover: #F3F4F6;

  /* News status colors */
  --st-published: #16a34a; /* green-600 */
  --st-concept:    #eab308; /* amber-500 */
  --st-declined:   #dc2626; /* red-600 */

  /* Layout + typography */
  --font-ui: Gilroy, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
             Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --sidebar-w: 260px;

  /* Misc utilities */
  --radius: 8px;
  --shadow: 0 2px 6px rgba(0,0,0,.08);

  color-scheme: light dark; /* better native controls in both modes */
}

/* Dark theme variables (overrides) */
[data-theme="dark"] {
  --c-bg: #0f172a;          /* slate-900-ish */
  --c-bg-soft: #0b1220;
  --c-card: #0b1220;
  --c-border: #1f2937;      /* slate-800 */
  --c-text: #e5e7eb;        /* slate-200 */
  --c-muted: #9ca3af;       /* slate-400 */
  --c-note: #cbd5e1;        /* slate-300 */
  --c-tableHeader: #111827; /* slate-900 */
  --c-btn: #111827;
  --c-btnText: #e5e7eb;
  --c-btnPrimary: #1d4ed8;  /* blue-700 */
  --c-btnPrimaryText: #ffffff;
  --c-iconBtnBg: #111827;
  --c-iconBtnBorder: #374151;
  --c-hover: #1f2937;

  /* Keep strong, readable hues in dark mode too */
  --st-published: #16a34a;
  --st-concept:   #eab308;
  --st-declined:  #ef4444; /* a touch brighter red in dark */
}

/* Respect system preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --c-bg: #0f172a;
    --c-bg-soft: #0b1220;
    --c-card: #0b1220;
    --c-border: #1f2937;
    --c-text: #e5e7eb;
    --c-muted: #9ca3af;
    --c-note: #cbd5e1;
    --c-tableHeader: #111827;
    --c-btn: #111827;
    --c-btnText: #e5e7eb;
    --c-btnPrimary: #1d4ed8;
    --c-btnPrimaryText: #ffffff;
    --c-iconBtnBg: #111827;
    --c-iconBtnBorder: #374151;
    --c-hover: #1f2937;
  }
}

/* Box-sizing reset and base text rendering */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

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

body {
  font-family: var(--font-ui) !important;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* prevent page scroll; content scrolls */
}

/* Inherit UI font for common elements */
button, input, select, textarea,
label, table, th, td, code,
.tm-note, .login-card, .navigation, .content {
  font-family: inherit;
}

/* A11y: focus styles only when keyboard focusing */
:focus-visible {
  outline: 2px solid rgba(48,146,208,.35);
  outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utility */
.hidden { display: none !important; }
.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover, .plain-link:focus-visible { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* Screen-reader only */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   App layout
   ========================================================================== */

.main {
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  background: var(--c-bg);
}

/* Left navigation: sticky, scrolls internally */
.navigation {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  height: 100dvh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-bg-soft);
  border-right: 1px solid var(--c-border);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Right content: independent scroll container */
.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px;
  height: 100dvh;
  overflow: auto;
}

/* Mobile app bar (hidden on desktop) */
.appbar { display: none; }

/* Uploads */
.uploads-tab {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.upload-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.upload-card__head {
  padding: 16px;
  border-bottom: 1px solid var(--c-border);
}

.upload-card__head h3 {
  margin: 0;
  font-size: 1.125rem;
}

.upload-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.upload-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.upload-field {
  display: flex;
  flex-direction: column;
}

.upload-field--full {
  grid-column: 1 / -1;
}

.upload-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--c-muted);
}

.upload-file-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.upload-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.upload-status {
  min-height: 1.5em;
  color: var(--c-muted);
}

.upload-rules {
  border: 1px dashed var(--c-border);
  border-radius: 10px;
  background: var(--c-bg-soft);
  padding: 16px;
}

.upload-rules h4 {
  margin: 0;
  font-size: 1rem;
}

.upload-rules__list {
  margin: 8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}

.upload-rules__list li {
  color: var(--c-muted);
}

@media (max-width: 600px) {
  .upload-card__body {
    padding: 14px;
  }

  .upload-grid {
    grid-template-columns: 1fr;
  }

  .upload-file-btn {
    justify-content: center;
  }
}

/* === API Management split layout (stacked vertically) === */
.api-split {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.api-pane { display: flex; flex-direction: column; gap: 8px; }
.api-pane .pane-body { display: block; }
.api-pane .pane-selected {
  display: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-card);
  padding: 10px 12px;
  cursor: pointer;
}
.api-pane .pane-selected:focus-visible { outline: 2px solid #2563eb33; }
.api-pane .sel-row {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.api-pane .sel-chip {
  font-size: 12px;
  color: var(--c-muted);
  background: var(--c-hover);
  border: 1px solid var(--c-border);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.api-pane .sel-value {
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Expand affordance on collapsed pane headers */
.api-pane .sel-expand {
  margin-left: auto; opacity: .7; font-size: 18px; line-height: 1; pointer-events: none;
}
/* Collapsed state: hide tools/table, show compact selection */
.api-pane.collapsed .pane-body { display: none; }
.api-pane.collapsed .pane-selected { display: block; }


/* ==========================================================================
   Navigation visuals
   ========================================================================== */

.menu_logo {
  height: 70px;
  width: auto;
  margin: 2px 12px;
  padding-left: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.logo { width: 200px; border: 0; }

.menu_font { font-family: inherit; }

.menu_item {
  height: 40px;
  margin: 2px 12px;
  padding-left: 10px;
  line-height: 40px;
  border-radius: 5px;
  color: var(--c-text);
  cursor: pointer;
}
.menu_item:hover { background-color: #3092D0; color: #FFFFFF; }

.menu_bottom { margin-top: auto; padding-bottom: 10px; }
.menu_icon { vertical-align: middle; }

/* Submenus (animated open/close via max-height; JS toggles) */
.submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 32px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.submenu_item {
  height: 30px; line-height: 30px;
  color: var(--c-muted);
  border-radius: 3px;
  padding-left: 10px;
  cursor: pointer;
}
.submenu_item:hover { background-color: var(--c-hover); }

.row-selected { background: var(--c-hover); }

/* ==========================================================================
   Tables & data containers
   ========================================================================== */

.tm-table-wrap {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-card);
  overflow: auto;
  max-height: 60vh;
  -webkit-overflow-scrolling: touch; /* smoother iOS */
}

/* Smart-scroll variant: overflow only when needed (JS toggles .has-overflow) */
.tm-table-wrap.smart-scroll { overflow: visible; max-height: none; }
.tm-table-wrap.smart-scroll.has-overflow {
  overflow: auto;
  max-height: 60vh;
  padding-bottom: 10px;       /* keep last row readable above bar */
  scrollbar-gutter: stable both-edges;
  margin-bottom: 6px;
}

/* --- Teams page: let outer .content handle scrolling; never trap scroll in the list --- */
/* Force ALL table wraps on the Teams page to be non-scrolling containers.            */
.page--teams .tm-table-wrap {
  overflow: visible !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Teams table: fit within screen without horizontal scroll */
.page--teams #tmTbl {
  min-width: 0 !important;        /* override base 780px */
  table-layout: fixed;            /* make widths predictable */
}

/* Always hide teamcode (first) column, even on desktop */
.page--teams #tmTbl th:first-child,
.page--teams #tmTbl td:first-child {
  display: none;
}

/* Truncate long team names so actions stay visible */
.page--teams #tmTbl td:nth-child(2) {
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slim actions column on all viewports */
.page--teams #tmTbl .td-actions {
  width: 96px;
  min-width: 96px;
  white-space: nowrap;
}
.page--teams #tmTbl .td-actions .icon-btn {
  width: 32px; height: 32px;
  min-width: 32px; min-height: 32px;
}

.tm-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;           /* allow horizontal scroll on narrow screens */
}
.tm-table th, .tm-table td {
  border-bottom: 1px solid var(--c-border);
  padding: 8px;
}
.tm-table th {
  position: sticky;
  top: 0;
  background: var(--c-tableHeader);
  text-align: left;
  z-index: 1;
}

.tm-table th.nw-select-head {
  text-align: center;
  padding: 0;
  width: 42px;
}

/* Sortable header affordance */
.tm-table th.sortable { cursor: pointer; user-select: none; }
.tm-table th.sortable .sort-ind { opacity: 0.75; margin-left: 6px; font-size: 0.85em; }

/* Key–value tables (mobile-friendly) */
.tm-table.tm-kv { 
  min-width: 0; 
  table-layout: fixed;
}
.tm-table.tm-kv td:last-child,
.tm-table.tm-kv code {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.settings-kv thead { display: none; }

.tm-kv.kv-wide tbody td:first-child {
  width: 18ch;
  white-space: nowrap;
  vertical-align: top;
}
.tm-kv.kv-wide tbody td:last-child { width: auto; }
@media (max-width: 700px) {
  .tm-kv.kv-wide tbody td:first-child { width: 32vw; }
}

/* Action cell alignment */
.td-actions { text-align: right; white-space: nowrap; }
/* Ensure the header label is right-aligned too */
.tm-table th.td-actions { text-align: right; }

/* Inline editor for Sports rows */
.sp-edit-row td { background: var(--c-bg-soft); }
.sp-edit-grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 701px) {
  .sp-edit-grid { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
}
.sp-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ==========================================================================
   Toolbars, inputs & buttons
   ========================================================================== */

/* --- Teams editor: optical distinction for API-synced vs editable --- */
.tm-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 8px 0;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  border: 1px solid var(--c-border);
  background: var(--c-bg-soft);
  color: var(--c-muted);
}
.pill .material-icons { font-size: 16px; line-height: 1; }
.pill-edit   { border-color: #86efac; background: #ecfdf5; color: #065f46; }
.pill-locked { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
[data-theme="dark"] .pill-edit   { border-color: #14532d; background: #052e1a; color: #86efac; }
[data-theme="dark"] .pill-locked { border-color: #7f1d1d; background: #220909; color: #fca5a5; }

/* Section header inside key–value tables */
.tm-table.tm-kv tr.kv-section td { padding-top: 10px; }
.kv-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;           /* make section headers stand out more */
  color: var(--c-muted);
  border-top: 1px dashed var(--c-border);
  padding-top: 6px;
}
.kv-head .material-icons { font-size: 18px; }

/* Tiny, safe preview block under textarea rows */
.tiny-preview {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-card);
  margin-top: 6px;
  overflow: hidden;
}
.tiny-preview__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-muted);
  font-weight: 600;
}
.tiny-preview__frame {
  display: block;
  width: 100%;
  height: 140px;            /* compact/tiny */
  border: 0;
  background: transparent;
}

/* Make Footer HTML middle textareas double width on desktop */
.tm-table.tm-kv tr[data-key^="footer_html_mid_"] textarea.tm-input.mid-html {
  width: 200%;
  max-width: none;  /* allow actual doubling beyond the cell */
}
@media (max-width: 900px) {
  .tm-table.tm-kv tr[data-key^="footer_html_mid_"] textarea.tm-input.mid-html {
    width: 100%;
    max-width: 100%; /* keep mobile friendly */
  }
}

/* Mini layout preview for footer columns */
.layout-mini { 
  margin-top: 6px; 
  border: 1px dashed var(--c-border);
  border-radius: 8px;
  background: var(--c-card);
}
.layout-mini__head{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-bottom:1px dashed var(--c-border);
  color: var(--c-muted); font-weight:600;
}
.layout-mini__head .material-icons { font-size:18px; }
.layout-mini__stage{
  --left: 44px;
  --right: 44px;
  display: grid;
  grid-template-columns: var(--left) 1fr var(--right);
  align-items: stretch;
  gap: 6px;
  padding: 8px;
}
.layout-mini .l-left, .layout-mini .l-right{
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  height: 40px;
}
.layout-mini .l-mid{
  display: grid; gap: 6px;
  grid-template-columns: 1fr 1fr 1fr; /* base: 1-3-1 shows 3 mids */
}
.layout-mini .mid{
  background: var(--c-hover);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  height: 40px;
}
/* 1-2-1 → hide the 3rd mid */
.layout-mini__stage[data-layout="1-2-1"] .mid-3 { display: none; }
/* 1-1-1 → hide the 2nd and 3rd mids */
.layout-mini__stage[data-layout="1-1-1"] .mid-2,
.layout-mini__stage[data-layout="1-1-1"] .mid-3 { display: none; }

/* Locked rows get a subtle background; inputs show dashed border + disabled cursor */
.tm-table.tm-kv tr.kv-locked td { background: var(--c-bg-soft); }
.tm-input.api-locked[disabled] { background: var(--c-bg-soft); color: var(--c-muted); border-style: dashed; cursor: not-allowed; opacity: 1; }
.tm-input.user-editable { box-shadow: inset 0 0 0 2px rgba(48,146,208,.15); }

.tm-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 6px 0;
}

/* Extra inner padding for Staff “add new …” rows */
.page--staff .tm-toolbar {
  padding-left: 12px;
  padding-right: 12px;
}

.tm-toolbar .tm-input,
.tm-toolbar .tm-select {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  min-width: 180px;
}

#newsToolbar .tm-btn {
  padding-top: 6px;
  padding-bottom: 6px;
}

.content.is-editing-news #newsToolbar,
.content.is-editing-news #newsArchiveSelected,
.content.is-editing-news #newsManageCats {
  display: none !important;
}

.tm-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.tm-actions .btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tm-note { font-size: 0.9em; color: var(--c-muted); margin-top: 8px; }

.tm-backups {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Badge (used for backup chips) */
.tm-badge {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.tm-badge:hover { background-color: #3092D0; border-color: #3092D0; color: #FFFFFF; }

/* Buttons */
.tm-btn {
  border: 0;
  border-radius: 5px;
  padding: 8px 12px;
  line-height: 1;
  color: var(--c-btnText);
  background: var(--c-btn);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .02s ease;
}
.tm-btn .material-icons {
  font-size: 18px;
  line-height: 1;
}
.tm-btn.small {
  padding: 6px 10px;
}
.tm-btn.small .material-icons {
  font-size: 16px;
}
.tm-btn:hover { background-color: #3092D0; color: #FFFFFF; }
.tm-btn:active { transform: translateY(1px); }
.tm-btn.primary { background-color: var(--c-btnPrimary); color: var(--c-btnPrimaryText); }
.tm-btn.primary:hover { background-color: #2883BA; }
.tm-btn.is-loading { pointer-events: none; opacity: .7; }

/* Inputs & selects */
.tm-input, .tm-select {
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  min-width: 180px;
  background: var(--c-card);
  color: var(--c-text);
  transition: border-color .2s ease, box-shadow .2s ease;
  max-width: 100%;
}
.nw-editor-grid .tm-table.tm-kv input.tm-input {
  width: 100%;
}
.nw-editor-grid .tm-table.tm-kv .nw-publication-input {
  width: 100%;
  max-width: 240px;
}
.tm-input:focus, .tm-select:focus {
  outline: none;
  border-color: #3092D0;
  box-shadow: 0 0 0 3px rgba(48,146,208,0.15);
}

/* Bigger, bar-like color input for clearer preview */
input[type="color"].tm-input.color-wide {
  padding: 0;
  width: 180px;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
}
input[type="color"].tm-input.color-wide::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"].tm-input.color-wide::-webkit-color-swatch {
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
input[type="color"].tm-input.color-wide::-moz-color-swatch {
  border: 1px solid var(--c-border);
  border-radius: 6px;
}

/* Icon-only buttons (touch friendly) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 36px; height: 36px;
  min-width: 36px; min-height: 36px;
  border: 1px solid var(--c-iconBtnBorder);
  border-radius: var(--radius);
  background: var(--c-iconBtnBg);
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease, transform .02s ease, border-color .2s ease;
}
.icon-btn .material-icons { font-size: 20px; line-height: 1; }
.icon-btn:hover { background: var(--c-hover); border-color:#D1D5DB; }
.icon-btn:active { transform: translateY(1px); }
.icon-btn.edit { color:#1f2937; }
.icon-btn.del  { color:#991b1b; }
.icon-btn.save { color:#065f46; }

/* Denser inside action cells */
.td-actions .icon-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }

/* Better icon contrast in dark theme */
[data-theme="dark"] .icon-btn.edit { color:#93c5fd; }  /* blue-300 */
[data-theme="dark"] .icon-btn.del  { color:#fca5a5; }  /* red-300 */
[data-theme="dark"] .icon-btn.save { color:#86efac; }  /* green-300 */

/* ===== Website → Design: Settings layout ===== */
.settings-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-layout__inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.settings-layout__sidebar {
  flex: 0 0 230px;
  max-width: 260px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 12px;
  max-height: 70vh;
  overflow-y: auto;
}

.settings-layout__content {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-layout__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

.settings-layout__toggle .material-icons {
  font-size: 20px;
}

.settings-layout__toggleCurrent {
  font-weight: 600;
  color: var(--c-muted);
  margin-left: 4px;
}

.settings-layout__toggleIcon {
  margin-left: auto;
  transition: transform .2s ease;
}

.settings-layout[data-open="true"] .settings-layout__toggleIcon {
  transform: rotate(180deg);
}

.settings-layout--empty .settings-layout__sidebar {
  display: none;
}

.settings-layout--empty .settings-layout__inner {
  flex-direction: column;
}

.settings-layout--empty .settings-layout__toggle {
  display: none !important;
}

.settings-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-categories li { margin: 0; }

.settings-category {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  padding: 8px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.settings-category:hover,
.settings-category:focus-visible {
  background: var(--c-hover);
  border-color: rgba(48,146,208,0.25);
}

.settings-category.is-active {
  background: var(--c-btnPrimary);
  color: var(--c-btnPrimaryText);
  border-color: var(--c-btnPrimary);
  font-weight: 600;
}

.settings-category:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(48,146,208,0.25);
}

.settings-layout__sidebar .settings-category .material-icons {
  font-size: 18px;
}

@media (min-width: 1025px) {
  .settings-layout__toggle {
    display: none !important;
  }
  .settings-layout__sidebar {
    display: block;
  }
}

@media (max-width: 1024px) {
  .settings-layout__inner {
    flex-direction: column;
    gap: 12px;
  }
  .settings-layout__sidebar {
    display: none;
    width: 100%;
    max-width: none;
    max-height: 60vh;
  }
  .settings-layout[data-open="true"] .settings-layout__sidebar {
    display: block;
  }
  .settings-layout__toggle {
    display: inline-flex;
  }
}

/* ===== Website → Design: Socials list editor ===== */
.socials-ed { display: flex; flex-direction: column; gap: 8px; }
.socials-ed__list { display: flex; flex-direction: column; gap: 8px; }
.soc-row {
  display: grid;
  grid-template-columns: 140px 1fr 1.2fr auto; /* icon | name | url | del */
  gap: 8px;
  align-items: center;
}
.soc-row .tm-select,
.soc-row .tm-input { width: 100%; min-width: 0; }
.soc-row .icon-btn { justify-self: end; }
@media (max-width: 700px){
  .soc-row {
    grid-template-columns: 1fr; /* stack nicely on phones */
  }
  .soc-row .icon-btn { justify-self: end; }
}

/* Website → Design: Site icon picker */
.site-icon-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}
.site-icon-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.site-icon-preview__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-bg-soft);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}
[data-theme="dark"] .site-icon-preview__tab {
  background: rgba(15, 23, 42, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.site-icon-preview__icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--c-border);
  background: var(--c-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.site-icon-preview__icon img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}
.site-icon-preview__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.site-icon-preview__caption {
  font-size: 0.85rem;
  color: var(--c-muted);
}
.site-icon-field__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.site-icon-field__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.site-icon-field__buttons .tm-btn {
  flex: 0 1 auto;
}
.site-icon-note {
  font-size: 0.85rem;
  color: var(--c-muted);
  min-height: 1.2em;
}
.site-icon-note.is-success { color: var(--st-published); }
.site-icon-note.is-warning { color: var(--st-declined); }
.site-icon-note.is-info    { color: var(--c-muted); }

@media (max-width: 700px) {
  .site-icon-field { max-width: none; }
  .site-icon-field__buttons { width: 100%; }
  .site-icon-field__buttons .tm-btn {
    flex: 1 1 160px;
  }
}

/* Toggle switch (notifications) */
.switch {
  position: relative;
  display: inline-block;
  width: 44px; height: 24px;
  vertical-align: middle;
}
.switch input { display: none; }
.switch .slider {
  position: absolute; inset: 0;
  background: var(--c-border);
  border-radius: 999px;
  transition: background .2s ease;
}
.switch .slider::before {
  content: "";
  position: absolute; left: 2px; top: 2px;
  width: 20px; height: 20px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform .2s ease;
}
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(48,146,208,0.35); }
[data-theme="dark"] .switch .slider { background: #374151; }
.switch input:checked + .slider { background: #3092D0; }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ==========================================================================
   Uploads & gallery
   ========================================================================== */

#filesWrap .preview-btn {
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  display: inline-flex;
  cursor: zoom-in;
  border-radius: 8px;
  line-height: 0;
}

#filesWrap .preview-btn img {
  pointer-events: none;
  border-radius: inherit;
}

#filesWrap > .gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.gal-card { width: 100% !important; }

.image-lightbox[hidden] { display: none !important; }

.image-lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(2px);
  z-index: 1300;
  overflow: auto;
}

.image-lightbox__content {
  position: relative;
  max-width: min(90vw, 960px);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-lightbox__image {
  width: auto;
  height: auto;
  max-width: min(90vw, 960px);
  max-height: calc(90vh - 40px);
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.3);
  object-fit: contain;
  background: var(--c-card);
}

.image-lightbox__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.image-lightbox__close:hover,
.image-lightbox__close:focus-visible {
  background: rgba(15, 23, 42, 0.9);
}

[data-theme="dark"] .image-lightbox {
  background: rgba(3, 7, 18, 0.82);
}

[data-theme="dark"] .image-lightbox__close {
  background: rgba(255, 255, 255, 0.25);
  color: var(--c-text);
}

[data-theme="dark"] .image-lightbox__close:hover,
[data-theme="dark"] .image-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.35);
}

/* Inline editor spacing responsiveness */
.__inlineEditor .tm-input,
.__inlineEditor .tm-select {
  width: 100%;
  min-width: 0;           /* allow shrinking on narrow phones */
}
@media (min-width: 720px) {
  .__inlineEditor .tm-input,
  .__inlineEditor .tm-select { width: auto; }
}

.inline-meta-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inline-meta-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.inline-meta-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 220px;
  min-width: 180px;
}

.inline-meta-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
}

.inline-meta-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ==========================================================================
   Login page
   ========================================================================== */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--c-bg-soft);
}
.login-wrapper { width: 100%; max-width: 380px; padding: 20px; }
.login-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-logo { display: block; max-width: 200px; margin: 0 auto 10px auto; }
.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form .form-group { display: flex; flex-direction: column; gap: 6px; }
.login-form .remember-line { flex-direction: row; align-items: center; gap: 8px; }
.login-form .remember-line label { margin: 0; }
.login-form #loginBtn { align-self: flex-end; margin-top: 10px; }

/* Enroll step label/fields vertical */
#enrollBox .form-group { display: flex; flex-direction: column; gap: 6px; }

/* Two-factor step */
#twofaStep { display: flex; flex-direction: column; gap: 6px; }
#twofaStep label { margin-bottom: 2px; }

/* MFA enroll modal tweaks */
.login-card:has(#enrollBox) { gap: 14px; }
.login-card:has(#enrollBox) .login-form { display: none; }
#enrollBox #qrWrap { margin-top: 12px; }
#enrollBox #qrWrap + .form-group { margin-top: 12px; }
#enrollBox .form-group > label[data-i18n="login.2fa"] { display: block; margin-top: 14px; }
#enrollBox #btnConfirmEnroll { display: block; margin-top: 14px; margin-left: auto; }

/* ==========================================================================
   Notifications
   ========================================================================== */

.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { border-bottom: 1px solid var(--c-border); cursor: pointer; outline: none; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:focus-visible { box-shadow: inset 0 0 0 2px #2563eb33; }

.notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}

.notif-title {
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-item.unread .notif-title { font-weight: 700; }

.notif-meta { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.notif-meta small { color: var(--c-muted); }
.notif-content { color: var(--c-note); }

.notif-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.notif-ic { width: 18px; text-align: center; flex: 0 0 18px; }

.notif-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
  background: var(--c-bg-soft);
  border-top: 1px solid var(--c-border);
}
.notif-content-inner {
  padding: 12px 16px;
  color: var(--c-note);
  line-height: 1.45;
  white-space: pre-wrap;
}
.notif-item.open .notif-content { max-height: 800px; }

/* Notification badge bubble (generic) */
.notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #EF4444;
  color: #fff;
  font-size: 12px; line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* =========================
   Staff module
   ========================= */
.page--staff .staff-grid {
  display: grid;
  /* Stack panes vertically below each other */
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.page--staff .staff-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.page--staff .staff-card > header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  font-weight: 600; color: var(--c-text);
}

/* Use API admin “pane” behaviours */
.page--staff .api-pane .pane-body { display:block; }
.page--staff .api-pane .pane-selected { 
  display:none;
  border-top: 1px solid var(--c-border);
  padding: 10px 12px;
  cursor: pointer;
}
.page--staff .api-pane.collapsed .pane-body { display:none; }
.page--staff .api-pane.collapsed .pane-selected { display:block; }

/* Sticky action columns for Staff tables on phones */
@media (max-width: 700px) {
  #tblCat, #tblRole, #tblMem { min-width: 0; table-layout: fixed; }
  #tblCat td.td-actions, #tblCat th.td-actions,
  #tblRole td.td-actions, #tblRole th.td-actions,
  #tblMem  td.td-actions, #tblMem  th.td-actions {
    position: sticky; right: 0; z-index: 2; background: var(--c-card);
  }
  #tblCat .td-actions, #tblRole .td-actions, #tblMem .td-actions { min-width: 92px; }
  /* Reserve space so sticky actions don't overlap first text cell */
  #tblRole td:first-child, #tblCat td:first-child, #tblMem td:first-child {
    padding-right: 100px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* Anchor badge to sidebar bottom Notifications item */
.menu_bottom .menu_item[data-i18n="menu.notifications"] { position: relative; }
.menu_bottom .menu_item[data-i18n="menu.notifications"] .notif-badge { top: -4px; right: -4px; }

/* ==========================================================================
   News editor split view
   ========================================================================== */

.tm-toolbar--wrap {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tm-toolbar--wrap .toolbar-block {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.nw-editor-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .nw-editor-grid { grid-template-columns: 1fr; }
}

.nw-photo-picker {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.nw-photo-thumb {
  width: 140px;
  height: 96px;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  background-size: cover;
  background-position: center;
  background-color: var(--c-bg-soft);
  position: relative;
  flex: 0 0 auto;
}
.nw-photo-thumb.is-placeholder {
  background-image: none !important;
  border-style: dashed;
}
.nw-photo-thumb.is-placeholder::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--c-muted);
  padding: 0 12px;
  text-align: center;
}
.nw-photo-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nw-preview {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 12px;
}
.nw-preview-card {
  background: var(--c-card);
  border-radius: 16px;
  border: 1px solid var(--c-border);
  box-shadow: 0 8px 18px rgba(2, 6, 23, .06);
  overflow: hidden;
  transition: transform .15s ease;
}
.nw-preview-card:hover {
  transform: translateY(-3px);
}
.nw-preview-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--c-bg-soft);
}
.nw-preview-img.is-placeholder::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  font-size: .9rem;
  background-image: linear-gradient(135deg, rgba(148,163,184,.12) 25%, transparent 25%, transparent 50%, rgba(148,163,184,.12) 50%, rgba(148,163,184,.12) 75%, transparent 75%, transparent);
  background-size: 20px 20px;
}
.nw-preview-head { font-weight: 600; margin-bottom: 6px; }
.nw-preview-meta {
  padding: 10px 14px 0;
  color: var(--c-muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nw-preview-title {
  margin: 0;
  padding: 4px 14px 16px;
  font-size: 18px;
  color: var(--c-text);
}
.nw-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nw-preview-tags.empty {
  color: var(--c-muted);
}
.nw-preview-body {
  line-height: 1.5;
  word-wrap: break-word;
  padding: 0 12px 12px;
}

.nw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.nw-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nw-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, .12);
  color: var(--c-text);
  font-size: .85rem;
}
.nw-tag-chip .material-icons {
  font-size: 16px;
}
.nw-tag-remove {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.nw-tag-placeholder {
  color: var(--c-muted);
  font-size: .85rem;
}
.nw-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.nw-cat-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-card);
}
.nw-cat-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .15);
  color: #047857;
  font-size: .75rem;
}
.nw-cat-pill {
  color: var(--c-muted);
}

.nw-select-head {
  text-align: center;
  width: 42px;
  padding: 0;
}
.nw-select-cell {
  text-align: center;
  width: 42px;
}
.nw-title-cell {
  display: flex;
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}
.nw-title-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  justify-content: center;
}
.nw-title-body .linklike,
.nw-title-body > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nw-audit {
  margin-top: 16px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-card);
  padding: 12px;
}
.nw-audit-head {
  font-weight: 600;
  margin-bottom: 10px;
}
.nw-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nw-audit-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  font-size: .9rem;
}
.nw-audit-action { font-weight: 600; }
.nw-audit-meta { color: var(--c-muted); }
.nw-audit-detail {
  font-size: .85rem;
  color: var(--c-text);
  background: var(--c-bg-soft);
  border-radius: 6px;
  padding: 6px 8px;
}

/* TinyMCE chrome theming to match cards/borders */
.tox-tinymce { border-radius: var(--radius) !important; border: 1px solid var(--c-border) !important; }
[data-theme="dark"] .tox .tox-toolbar,
[data-theme="dark"] .tox .tox-menubar,
[data-theme="dark"] .tox .tox-statusbar { background: var(--c-card); }

/* ==========================================================================
   Modals (theme-aware)
   ========================================================================== */

.modal-shell {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17,24,39,.45);
  z-index: 9999; padding: 16px;
}
[data-theme="dark"] .modal-shell { background: rgba(0,0,0,.6); }

.modal-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  width: min(560px, 96vw);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
  font-family: var(--font-ui);
}

.modal-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-body { padding: 16px; }

/* Theme fix for legacy inline-styled modals (IDs used elsewhere) */
#clubFormModal,
#teamModal,
#apiProviderModal,
#apEpModal,
#apParModal,
#userFormModal,
#notificationsModal { background: rgba(17,24,39,.45); }
[data-theme="dark"] #clubFormModal,
[data-theme="dark"] #teamModal,
[data-theme="dark"] #apiProviderModal,
[data-theme="dark"] #apEpModal,
[data-theme="dark"] #apParModal,
[data-theme="dark"] #userFormModal,
[data-theme="dark"] #notificationsModal { background: rgba(0,0,0,.6); }

#clubFormModal > [role="dialog"],
#teamModal > [role="dialog"],
#apiProviderModal > [role="dialog"],
#apEpModal > [role="dialog"],
#apParModal > [role="dialog"],
#userFormModal > [role="dialog"],
#notificationsModal > [role="dialog"] {
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text);
}
#clubFormModal > [role="dialog"] > div:first-child,
#teamModal > [role="dialog"] > div:first-child,
#apiProviderModal > [role="dialog"] > div:first-child,
#apEpModal > [role="dialog"] > div:first-child,
#apParModal > [role="dialog"] > div:first-child,
#userFormModal > [role="dialog"] > div:first-child,
#notificationsModal > [role="dialog"] > div:first-child {
  border-bottom: 1px solid var(--c-border) !important;
  background: var(--c-card);
  color: var(--c-text);
}

/* ==========================================================================
   Scrollbar styling (table wraps & modals)
   ========================================================================== */

.tm-table-wrap,
.modal-card {
  scrollbar-color: var(--c-border) transparent; /* Firefox */
}
.tm-table-wrap::-webkit-scrollbar,
.modal-card::-webkit-scrollbar { width: 10px; height: 10px; }
.tm-table-wrap::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track { background: transparent; }
.tm-table-wrap::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb {
  background-color: var(--c-border);
  border-radius: 999px;
  border: 2px solid var(--c-card);
}

/* ==========================================================================
   Badges & small utilities
   ========================================================================== */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e5f6ed;
  color: #065f46;
  font-size: 12px;
  line-height: 1.4;
}
.badge.warn { background: #fee2e2; color: #991b1b; }

/* Club Users — stacked name/email on mobile */
.us-name-cell .us-nm { font-weight: 600; color: var(--c-text); }
.us-name-cell .us-email-sm { font-size: 12px; color: var(--c-muted); margin-top: 2px; }

.nw-title-cell {
  /* Let the status dot sit next to a truncating text block */
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;            /* allow children to shrink */
  white-space: nowrap;
  overflow: hidden;
}
/* The colored bar should not shrink */
.nw-title-cell .nw-status-bar { flex: 0 0 auto; }
/* The actual title text/link should truncate with an ellipsis */
.nw-title-cell .linklike,
.nw-title-cell > span:not(.nw-status-bar) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nw-status-bar {
  display: block;
  width: 4px;
  border-radius: 2px;
  align-self: stretch;
  margin-block: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.nw-status--published { background: var(--st-published); }
.nw-status--concept   { background: var(--st-concept); }
.nw-status--declined  { background: var(--st-declined); }
.nw-status--archived  { background: var(--c-muted); }
.nw-status--unknown   { background: #9ca3af; }

.show-sm { display: none; }

/* Button that looks like a link for row titles */
.linklike {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.linklike:focus-visible { outline: 2px solid var(--c-btnPrimary); outline-offset: 2px; }

/* Rights UI: each right on its own row under the module */
#uf_rights_body .right-row td:first-child { width: 24px; }
#uf_rights_body .right-row td { background: var(--c-bg-soft); }
#uf_rights_body .right-label { font-weight: 600; }
#uf_rights_body .right-desc { margin-top: 2px; }

/* ===== User Edit → Userrights table (no horizontal scroll on mobiles) ===== */
/* Base: allow the table to shrink within the modal */
#uf_rights_tbl { 
  min-width: 0;                 /* override global 780px */
  table-layout: fixed;          /* predictable widths on small screens */
}
#uf_rights_tbl td, #uf_rights_tbl th {
  white-space: normal;          /* allow wrapping */
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Ensure header stays above any sticky body cells and has an opaque bg */
#uf_rights_tbl thead th {
  position: sticky;             /* reaffirm sticky and layering for this table */
  top: 0;
  z-index: 8;                   /* higher than body cells */
  background: var(--c-tableHeader);
  box-shadow: 0 1px 0 0 var(--c-border); /* subtle divider below header */
}
/* Keep the toggle column narrow and aligned right */
#uf_rights_tbl .td-actions {
  text-align: right;
  width: 64px;
  min-width: 64px;
  white-space: nowrap;          /* switches don't wrap */
}
/* Body right column should never overdraw the header */
#uf_rights_tbl td.td-actions { z-index: 3; }
#uf_rights_tbl th.td-actions { z-index: 9; }  /* header cell above body cells */

@media (max-width: 700px) {
  /* Pin the toggle column so sliders remain visible while content scrolls vertically */
  #uf_rights_tbl td.td-actions,
  #uf_rights_tbl th.td-actions {
    position: sticky;
    right: 0;
    background: var(--c-card);
  }
  /* Header already has higher z-index globally; keep separation on mobile too */
  #uf_rights_tbl thead th { z-index: 10; }  /* ensure it wins on small screens */

  /* Prevent sticky toggles from overlapping text in the previous column */
  #uf_rights_tbl td:nth-child(2) {
    padding-right: 72px;        /* ≈ toggle col + small gap */
  }

  /* Module name cell: allow wrapping, but keep it readable */
  #uf_rights_tbl td:first-child {
    max-width: none;
    width: auto;
    min-width: 0;
  }
}

/* ==========================================================================
   Responsiveness
   ========================================================================== */

/* <= 900px: mobile shell & drawer nav */
@media (max-width: 900px) {
  /* Mobile app bar */
  .appbar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--c-card);
    border-bottom: 1px solid var(--c-border);
  }
  .appbar-title { display: none; }

  .appbar .nav-toggle,
  .appbar .nav-bell {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 36px;
    border: 1px solid var(--c-iconBtnBorder);
    background: var(--c-iconBtnBg);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    line-height: 1;
    color: var(--c-text);
  }
  .appbar .nav-bell { margin-left: auto; }
  .appbar .nav-bell .material-icons { font-size: 20px; }
  .appbar .nav-toggle:hover,
  .appbar .nav-bell:hover {
    background: var(--c-hover);
    border-color: var(--c-iconBtnBorder);
  }

  /* Content no longer reserves sidebar space */
  .content { margin-left: 0; padding-left: 16px; padding-right: 16px; }

  /* Bottom actions: icon group */
  .menu_bottom {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }
  .menu_bottom .menu_item {
    width: auto; margin: 0; padding: 8px;
    height: auto; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    min-width: 44px; min-height: 44px;
  }
  .menu_bottom .menu_item span { display: none; }
  .menu_bottom .menu_icon { font-size: 24px; vertical-align: middle; }

  /* Sidebar becomes an overlay drawer */
  .navigation {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(82vw, 320px);
    transform: translateX(-100%);
    transition: transform .25s ease-in-out;
    z-index: 1001;
    background: var(--c-card);
    border-right: 1px solid var(--c-border);
    overflow-y: auto;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .navigation { transform: translateX(0); }

  /* Backdrop behind the nav */
  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;
    display: none;
  }
  body.nav-open .nav-backdrop { display: block; }
}

/* <= 900px: KV tables render as stacked "cards" */
@media (max-width: 900px) {
  .tm-table.tm-kv thead { display: none; }
  .tm-table.tm-kv tr {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-border);
  }
  .tm-table.tm-kv td {
    display: block;
    border: 0;
    padding: 2px 0;
  }
  .tm-table.tm-kv td:first-child {
    font-size: 12px;
    line-height: 1.2;
    color: var(--c-muted);
    letter-spacing: 0.02em;
  }
  .tm-table.tm-kv td:last-child {
    font-size: 16px;
    line-height: 1.35;
    color: var(--c-text);
    margin-top: 2px;
    text-align: left; /* values stack under labels on mobile */
  }
  .tm-table.tm-kv .td-actions { padding-top: 6px; }

  /* News editor: make the Title input span the full available width on mobile */
  #nwTitle { width: 100%; }
}

/* <= 700px: compact toolbars & hide some table columns */
@media (max-width: 700px) {
  .tm-toolbar > * { flex: 1 1 180px; }
  .tm-table th.hide-sm, .tm-table td.hide-sm { display: none; }
  /* Title cell keeps the colored dot on mobile; status column is hidden */

  /* Users table: pinned actions on right */
  #usTbl { min-width: 520px; }
  #usTbl td.td-actions, #usTbl th.td-actions {
    position: sticky; right: 0; z-index: 2; background: var(--c-card);
  }
  #usTbl td.td-actions { box-shadow: -8px 0 8px rgba(0,0,0,.05); }
  #usTbl th.td-actions { z-index: 3; }

  .show-sm { display: block; }

  /* Clubs table: allow wrap + pinned actions */
  #clubsTable { min-width: 0; table-layout: auto; }
  #clubsTable td:not(.td-actions),
  #clubsTable th:not(.td-actions) {
    white-space: normal; word-break: break-word; overflow-wrap: anywhere;
  }
  #clubsTable td.td-actions, #clubsTable th.td-actions {
    position: sticky; right: 0; z-index: 2; background: var(--c-card);
  }
  #clubsTable td.td-actions { box-shadow: -8px 0 8px rgba(0,0,0,.05); }
  #clubsTable th.td-actions { z-index: 3; }
  #clubsTable .td-actions { min-width: 92px; }

  /* Teams table: keep actions visible on mobile */
  #tmTbl { min-width: 560px; table-layout: fixed; }
  #tmTbl td.td-actions, #tmTbl th.td-actions {
    position: sticky; right: 0; z-index: 2; background: var(--c-card);
  }
  #tmTbl td.td-actions { box-shadow: -8px 0 8px rgba(0,0,0,.05); }
  #tmTbl th.td-actions { z-index: 3; }
  /* Slimmer actions column so it doesn't eat content */
  #tmTbl .td-actions { min-width: 104px; }
  /* Slightly smaller icon buttons inside actions on mobile */
  #tmTbl .td-actions .icon-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }

  /* Prevent the sticky actions cell from covering the team name:
     reserve space on the name cell and truncate with ellipsis */
  #tmTbl td:nth-child(2) {
    /* Let some of the title be visible and cut off with … at the end */
    max-width: none;         /* allow the column to occupy remaining space */
    width: auto;
    min-width: 0;            /* enable shrinking within fixed-layout tables */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 110px; /* ≈ actions min-width + a tiny gap */
  }

  /* News table: keep actions visible on mobile */
  #newsTbl { min-width: 560px; table-layout: fixed; }
  #newsTbl td.td-actions, #newsTbl th.td-actions {
    position: sticky; right: 0; z-index: 2; background: var(--c-card);
  }
  #newsTbl td.td-actions { box-shadow: -8px 0 8px rgba(0,0,0,.05); }
  #newsTbl th.td-actions { z-index: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Allow up to 4 icon buttons (edit, delete, approve, decline) */
  #newsTbl .td-actions { width: 144px; min-width: 144px; }
  #newsTbl .td-actions .icon-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
  /* Reserve space on the title cell so the sticky actions don't overlap */
  #newsTbl td:first-child {
    /* Let the title column use all remaining space and then truncate at the end */
    max-width: none;
    width: auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 150px; /* ≈ actions min-width + a tiny gap */
  }

  /* Hide text labels in buttons on very small screens if needed */
  .btn-label { display: none; }

  /* Sports table (Club → Settings): mobile-friendly layout */
  #spTbl { min-width: 0; table-layout: fixed; } /* fit viewport */
  #spTbl td.td-actions, #spTbl th.td-actions {
    position: sticky; right: 0; z-index: 2; background: var(--c-card);
  }
  #spTbl td.td-actions { box-shadow: -8px 0 8px rgba(0,0,0,.05); }
  #spTbl th.td-actions { z-index: 3; }
  /* Make actions column exactly two icon buttons wide on phones */
  #spTbl .td-actions { width: 76px; min-width: 76px; } /* 2×32 + ~12 padding */
  #spTbl .td-actions .icon-btn {
    width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  }
  /* While editing on phones: hide the list so only the form is visible */
  #spTbl.has-editor thead,
  #spTbl.has-editor tbody tr:not(.sp-edit-row) { display: none; }
  /* (extra safety if has-editor isn't applied yet) hide the host row */
  #spTbl tr[aria-expanded="true"] { display: none; }

  /* Sport name: allow 2-line truncation (avoid single-letter + …) */
  #spTbl td:first-child,
  #spTbl .sp-sport {
    max-width: none; width: auto; min-width: 0;
    white-space: normal;                    /* wrap allowed */
    display: -webkit-box;                   /* multi-line clamp */
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;                  /* up to 2 lines */
    overflow: hidden;
    padding-right: 84px; /* keep clear of sticky actions */
  }

  /* ===== Licenses: LIST table ===== */
  #licTbl { min-width: 0; table-layout: fixed; }
  #licTbl td.td-actions,
  #licTbl th.td-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--c-card);
  }
  /* Exactly two icon buttons wide on phones */
  #licTbl .td-actions { width: 76px; min-width: 76px; }
  #licTbl .td-actions .icon-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
  /* Truncate long names; reserve space so sticky actions don't overlap */
  #licTbl td:first-child {
    max-width: none; width: auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-right: 84px; /* ≈ actions width + small gap */
  }

  /* ===== Licenses: EDIT view → Modules table ===== */
  #licModsTbl { min-width: 0; table-layout: fixed; }
  #licModsTbl td.td-actions,
  #licModsTbl th.td-actions {
    position: sticky;
    right: 0;
    background: var(--c-card);
  }
  /* Body cells (with sliders) should slide UNDER the sticky header */
  #licModsTbl td.td-actions { z-index: 2; }
  /* Header stays on top of the sticky right column */
  #licModsTbl thead th { z-index: 5; }
  /* Align the "Activated" column header to the right */
  #licModsTbl th.td-actions { text-align: right; }
  /* Keep the toggle column narrow; override inline min-width on <th> */
  #licModsTbl .td-actions { width: 64px !important; min-width: 64px !important; }
  #licModsTbl th.td-actions { width: 64px !important; min-width: 64px !important; }
  /* Let module names wrap to two lines and avoid hiding behind sticky toggle */
  #licModsTbl td:first-child {
    max-width: none; width: auto; min-width: 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-right: 72px;               /* ≈ toggle col + small gap */
  }
}

/* Sports editor helper title (shown on small screens) */
.sp-edit-title { font-weight: 600; color: var(--c-muted); line-height: 1.25; }

/* ==========================================================================
   Dashboard
   ========================================================================== */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6-track grid → 50% = span 3, 33% = span 2 */
  gap: 12px;
  align-items: start;
}
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: repeat(4, 1fr); }
  /* On 4 cols, both sizes collapse to span 2 for a tidy 2-column layout */
  .dash-grid .w-3 { grid-column: span 2; }
  .dash-grid .w-2 { grid-column: span 2; }
}
@media (max-width: 700px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-grid .w-3, .dash-grid .w-2 { grid-column: span 1; }
}
/* Base spans for ≥1100px (6 col) */
.dash-grid .w-3 { grid-column: span 3; } /* 50% */
.dash-grid .w-2 { grid-column: span 2; } /* 33% */

.dash-widget { min-width: 0; }
.dash-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dash-card-head {
  padding: 10px 12px;
  /* Make room for the top-right hide icon so it doesn't feel cramped
     against the header text/border. */
  padding-right: 56px;   /* ≈ icon 36px + gap */
  position: relative;    /* anchor for any absolute children if needed */
  border-bottom: 1px solid var(--c-border);
  font-weight: 600;
  color: var(--c-text);
}
.dash-card-body { padding: 12px; }

/* Drag affordances */
.dash-grid.editing .dash-card { cursor: move; }
.dash-widget.dragging .dash-card { opacity: .7; }

/* Per-card 'Hide' button shown only in edit mode (top-right overlay) */
.dash-hide-btn {
  position: absolute;
  /* Nudge slightly away from the header's bottom border and edges */
  top: 6px;
  right: 10px;
  z-index: 2;
}
.dash-grid:not(.editing) .dash-hide-btn { display: none !important; }
.dash-card { position: relative; } /* anchor the overlay */