/* ── Theme variables ─────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  --bg-base:      #09090b;
  --bg-card:      #18181b;
  --bg-input:     #0f0f11;
  --bg-hover:     #1f1f23;
  --border:       #2e2e34;
  --border-soft:  #1f1f23;
  --text-1:       #fafafa;
  --text-2:       #a1a1aa;
  --text-3:       #80808a;
  --accent:       #3b82f6;
  --accent-hover: #2563eb;
  --accent-dim:   rgba(59,130,246,0.12);
  --green:        #4ade80;
  --green-dim:    rgba(74,222,128,0.1);
  --blue:         #60a5fa;
  --blue-dim:     rgba(96,165,250,0.1);
  --red:          #f87171;
  --red-dim:      rgba(248,113,113,0.1);
  --amber:        #fbbf24;
  --amber-dim:    rgba(251,191,36,0.1);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.6);
  --sidebar-w:    248px;
  --sidebar-w-collapsed: 70px;
}

[data-theme="light"] {
  --bg-base:      #f4f4f5;
  --bg-card:      #ffffff;
  --bg-input:     #f9f9fb;
  --bg-hover:     #f4f4f5;
  --border:       #e4e4e7;
  --border-soft:  #f4f4f5;
  --text-1:       #09090b;
  --text-2:       #52525b;
  --text-3:       #71717a;
  --accent:       #2563eb;
  --accent-hover: #1d4ed8;
  --accent-dim:   rgba(37,99,235,0.08);
  --green:        #16a34a;
  --green-dim:    rgba(22,163,74,0.08);
  --blue:         #2563eb;
  --blue-dim:     rgba(37,99,235,0.08);
  --red:          #dc2626;
  --red-dim:      rgba(220,38,38,0.08);
  --amber:        #d97706;
  --amber-dim:    rgba(217,119,6,0.08);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.1);
}

/* Light-mode contrast overrides for brand-colored chips/badges that hardcode
   their dark-theme color (no theme variable exists for pink/purple). */
[data-theme="light"] .chip-Instagram,
[data-theme="light"] .chan-btn.active-Instagram { color: #c026a8; }
[data-theme="light"] .cc-badge-video { color: #7c3aed; }

/* ── Reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  background: var(--bg-base);
  color: var(--text-1);
  min-height: 100vh;
  display: flex;
  transition: background 0.2s, color 0.2s;
  -webkit-font-smoothing: antialiased;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: width 0.22s ease;
  overflow: visible;
}

/* Collapsed icon-rail */
body.nav-collapsed .sidebar { width: var(--sidebar-w-collapsed); }

.sidebar-header {
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.nav-collapsed .sidebar-header {
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
}

.nav-toggle {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 5px;
  border-radius: 7px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.nav-toggle:hover { color: var(--text-1); background: var(--bg-hover); }
.nav-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
body.nav-collapsed .nav-toggle svg { transform: rotate(180deg); }

.sidebar-brand {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.nav-collapsed .sidebar-brand { display: none; }

.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.nav-section-label {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  padding: 15px 16px 5px;
}

/* "+" button inside the Dashboards section label */
.nav-new-dash-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.nav-new-dash-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.nav-new-dash-btn:hover { color: var(--accent); background: var(--accent-dim); }
body.nav-collapsed .nav-new-dash-btn { display: none; }

/* Rename / Delete buttons on each dashboard link */
.nav-dash-actions {
  margin-left: auto;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  transition: opacity 0.12s;
}
.nav-link-dash:hover .nav-dash-actions {
  opacity: 1;
  pointer-events: auto;
}
.nav-dash-btn {
  background: none;
  border: none;
  color: var(--text-3);  /* always neutral — never inherits active accent */
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.nav-dash-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-dash-btn:hover { color: var(--text-1); background: var(--bg-hover); }
.nav-dash-delete:hover { color: var(--red); background: rgba(248,113,113,0.1); }
/* Active dashboard link — keep buttons neutral, never inherit accent */
.nav-link-dash.active .nav-dash-btn { color: var(--text-3); }
body.nav-collapsed .nav-dash-actions { display: none; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-radius: 0;
  font-family: inherit;
}

.nav-link:hover { background: var(--bg-hover); color: var(--text-1); }
.nav-link.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
  border-right: 2px solid var(--accent);
}

.nav-link .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-link .icon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link .badge-soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Collapsed icon-rail state ─────────────────────────────────────────────── */

body.nav-collapsed .sidebar-logo-text { display: none; }
body.nav-collapsed .nav-text          { display: none; }
body.nav-collapsed .nav-link .badge-soon { display: none; }

body.nav-collapsed .nav-link {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
}
body.nav-collapsed .nav-link .icon svg { width: 23px; height: 23px; }
body.nav-collapsed .nav-link.active { border-right: none; }

/* Section labels become thin dividers when collapsed */
body.nav-collapsed .nav-section-label {
  font-size: 0;
  padding: 0;
  height: 1px;
  margin: 8px 16px;
  background: var(--border);
  overflow: hidden;
}

body.nav-collapsed .theme-switcher,
body.nav-collapsed .custom-colors { display: none; }

/* Floating tooltip for the collapsed icon rail (appended to <body> in nav.js
   so the sidebar's scroll container can't clip it). */
.nav-tooltip {
  position: fixed;
  transform: translateY(-50%);
  background: var(--bg-card);
  color: var(--text-1);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
  transition: opacity 0.12s ease;
}
.nav-tooltip.show { opacity: 1; }

/* ── Collapsible nav group (e.g. Create Content) ─────────────────────────── */
.nav-group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
}
.nav-group.open .nav-group-items { max-height: 240px; }

.nav-sub {
  padding: 7px 16px 7px 52px;
  font-size: 13px;
}

.nav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.55;
  transition: transform 0.2s;
}
.nav-chevron svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-group.open .nav-chevron { transform: rotate(180deg); opacity: 0.9; }

body.nav-collapsed .nav-group-items { max-height: 0 !important; }
body.nav-collapsed .nav-chevron     { display: none; }
body.nav-collapsed .nav-sub         { display: none; }

body.nav-collapsed .sidebar-footer { padding: 12px 0; }

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.signout-form { margin: 0 6px; }

.sidebar-signout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px;
  font-size: 15px;
  font-weight: 600;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.sidebar-signout:hover { color: var(--red); border-color: var(--red); }
.sidebar-signout .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-signout .icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Theme switcher ──────────────────────────────────────────────────────── */

.theme-switcher {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.theme-btn {
  flex: 1;
  padding: 5px 4px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: var(--bg-input);
  color: var(--text-2);
  transition: all 0.15s;
  text-align: center;
}

.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.custom-colors { margin-top: 8px; display: none; }
.custom-colors.open { display: block; }

.color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 11px;
  color: var(--text-2);
}

.color-row input[type="color"] {
  width: 28px; height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: none;
  padding: 1px;
}

.custom-reset {
  width: 100%;
  margin-top: 6px;
  padding: 4px;
  font-size: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.custom-reset:hover { color: var(--text-1); border-color: var(--text-2); }

/* ── Page transitions ────────────────────────────────────────────────────── */

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Page layout ─────────────────────────────────────────────────────────── */

.page-wrap {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.22s ease, opacity 0.15s ease;
  animation: page-in 0.22s ease both;
}
.page-wrap.page-leaving { opacity: 0; transform: translateY(3px); transition: opacity 0.18s ease, transform 0.18s ease; animation: none; }

body.nav-collapsed .page-wrap { margin-left: var(--sidebar-w-collapsed); }

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 18px;
  padding: 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
.hamburger:hover { color: var(--text-1); background: var(--bg-hover); }

.topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-block { text-align: right; }
.stat-block .num { font-size: 20px; font-weight: 700; line-height: 1; }
.stat-block .lbl { font-size: 10px; color: var(--text-3); margin-top: 2px; }

.runner-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.runner-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.runner-online  { background: var(--green-dim); color: var(--green); }
.runner-online .dot  { background: var(--green); animation: pulse 2s infinite; }
.runner-offline { background: var(--bg-input); color: var(--text-3); }
.runner-offline .dot { background: var(--text-3); }

.logout-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.logout-btn:hover { border-color: var(--text-2); color: var(--text-1); }

/* ── Settings (gear) button + widget panel ───────────────────────────────── */

.settings-wrap { position: relative; }

.settings-panel {
  position: absolute;
  bottom: 0;
  left: calc(100% + 10px);
  width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.settings-panel.open { opacity: 1; visibility: visible; transform: translateX(0); }

.settings-panel { max-height: 70vh; overflow-y: auto; }

.settings-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  padding: 8px 10px 6px;
}

.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 6px;
}

/* Theme switcher sits inside the settings flyout */
.settings-panel .theme-switcher { margin: 0 6px 0; }
.settings-panel .custom-colors  { padding: 0 6px; }

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.settings-item:hover { background: var(--bg-hover); }

.settings-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}

/* Toggle switch */
.toggle { position: relative; flex-shrink: 0; width: 34px; height: 20px; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 20px;
  transition: background 0.2s;
  pointer-events: none;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(14px); }

/* ── Overlay (mobile sidebar backdrop) ───────────────────────────────────── */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 199;
}
.sidebar-overlay.open { display: block; }

/* ── Main content area ───────────────────────────────────────────────────── */

main {
  padding: 24px;
  flex: 1;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  /* When the window is narrower than the grid's min-width, scroll
     horizontally instead of letting the widgets clip off-screen. */
  overflow-x: auto;
}

/* ── Page header (inside content, replaces top bar) ──────────────────────── */

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

/* "+ Image / + Note" buttons shown on dynamic pages */
.cw-add-btns { display: flex; gap: 8px; align-items: center; }
.cw-add-btn {
  font-family: inherit; font-size: 12px; font-weight: 700; padding: 7px 13px;
  border-radius: 7px; cursor: pointer; white-space: nowrap; transition: all .15s;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-3);
}
.cw-add-btn:hover { color: var(--text-1); border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1);
}

/* Right-side action slot in the page header (lock, add-widget, badges, etc.) */
.page-head-actions { display: flex; align-items: center; gap: 8px; }

/* Lock / unlock layout button (shared by every grid page) */
.lock-layout-btn {
  font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px;
  border-radius: 8px; cursor: pointer; white-space: nowrap; transition: all .15s;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-3);
}
.lock-layout-btn:hover { color: var(--text-1); border-color: var(--text-2); }
.lock-layout-btn.editing { border-color: var(--amber); color: var(--amber); background: rgba(251,191,36,.08); }

/* Add Widget button */
.add-widget-btn {
  font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px;
  border-radius: 8px; cursor: pointer; border: 1px solid var(--accent);
  background: var(--accent-dim); color: var(--accent);
  transition: background .15s, color .15s; white-space: nowrap;
}
.add-widget-btn:hover { background: var(--accent); color: #fff; }

/* Per-widget delete button — only visible while a layout is unlocked */
.widget-delete-btn {
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; margin-left: 6px;
  background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.35);
  color: var(--red); border-radius: 5px; font-size: 16px; line-height: 1;
  cursor: pointer; transition: background .15s; font-family: inherit; padding: 0;
}
.widget-delete-btn:hover { background: rgba(248,113,113,.3); }
body.layout-editing .widget-delete-btn { display: flex; }

/* Catalog widgets fill their gridstack cell on any page */
.grid-stack [data-catalog-iid] { height: 100%; }
.grid-stack [data-catalog-iid] > .widget { height: 100%; display: flex; flex-direction: column; }
.grid-stack [data-catalog-iid] > .widget > .widget-body { flex: 1; min-height: 0; }

/* Per-widget font-size setting scales the WHOLE widget body via zoom, uniformly
   across built-in, catalog, and niche-page widgets. The gear sets --w-zoom; the
   older calc(--w-fs) usages are now inert (default to 1) so nothing double-scales. */
.grid-stack-item-content .widget-body { zoom: var(--w-zoom, 1.5); }

/* Highlight widget borders while editing a layout */
body.layout-editing .grid-stack-item > .grid-stack-item-content > .widget { border-color: rgba(251,191,36,.3); }

/* ── Add-Widget catalog drawer (shared, injected by grid-system.js) ───────── */
.catalog-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px;
  background: var(--bg-card); border-left: 1px solid var(--border);
  z-index: 300; transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.catalog-drawer.open { transform: translateX(0); }
.catalog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 299; display: none; }
.catalog-backdrop.open { display: block; }
.catalog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.catalog-head-title { font-size: 15px; font-weight: 700; color: var(--text-1); }
.catalog-close-btn {
  background: none; border: none; color: var(--text-3); font-size: 22px;
  cursor: pointer; padding: 2px 6px; border-radius: 5px; line-height: 1;
}
.catalog-close-btn:hover { color: var(--text-1); background: var(--bg-hover); }
.catalog-body { flex: 1; overflow-y: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.catalog-category { margin-bottom: 20px; }
.catalog-category-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); margin-bottom: 8px; padding: 0 2px;
}
.catalog-widget-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; margin-bottom: 6px; transition: border-color .15s;
}
.catalog-widget-card:hover { border-color: var(--text-3); }
.catalog-widget-info { flex: 1; min-width: 0; }
.catalog-widget-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.catalog-widget-desc { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.catalog-widget-size { font-size: 10px; color: var(--text-3); margin-top: 3px; }
.catalog-add-btn {
  font-family: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px;
  border-radius: 7px; cursor: pointer; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); white-space: nowrap; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.catalog-add-btn:hover { background: var(--accent); color: #fff; }
.catalog-add-btn:disabled { border-color: var(--border); color: var(--text-3); cursor: default; background: transparent; }
.catalog-add-btn.added  { border-color: var(--green); color: var(--green); }

/* ── Gridstack widget styles ──────────────────────────────────────────────── */

/* The grid never compresses below this width. Gridstack measures the
   container to size its 12 columns; holding a floor here keeps each column
   (and therefore every widget) from shrinking when the window narrows.
   main scrolls horizontally past this point instead of clipping widgets. */
.grid-stack { padding: 0; min-width: 960px; }

/* The outer gridstack item needs padding for the gap between widgets */
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  padding: 6px;
}

.widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.widget:hover { border-color: #3e3e46; box-shadow: var(--shadow-md); }

/* Widget header — drag handle + navigation target */
.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-soft);
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
}
.widget-header:active { cursor: grabbing; }

/* Clickable widget headers navigate to the full page */
.widget-header.widget-nav {
  cursor: pointer;
  transition: background 0.15s;
}
.widget-header.widget-nav:hover { background: var(--bg-hover); }

.widget-title {
  font-size: calc(11px * var(--w-fs, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: auto;   /* push win-tabs + gear to the right edge */
}

.widget-title-arrow {
  font-size: calc(10px * var(--w-fs, 1));
  color: var(--text-3);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.widget-header.widget-nav:hover .widget-title-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.widget-body {
  flex: 1;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
}

/* Coming soon overlay */
.widget-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 12px;
  height: 100%;
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

.widget-lock {
  font-size: 22px;
  opacity: 0.4;
}

.widget-lock-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Gridstack drag/resize visual feedback */
.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content .widget {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  opacity: 0.9;
}
.grid-stack-item.ui-resizable-resizing > .grid-stack-item-content .widget {
  border-color: var(--accent);
}
.grid-stack-placeholder > .placeholder-content {
  background: var(--accent-dim) !important;
  border: 2px dashed var(--accent) !important;
  border-radius: 12px !important;
  opacity: 1 !important;
}

/* ── Cards (shared) ──────────────────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 12px;
}

/* ── Status badges ───────────────────────────────────────────────────────── */

.status-badge {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.badge-ready   { background: var(--green-dim); color: var(--green); }
.badge-running { background: var(--blue-dim);  color: var(--blue);  animation: pulse-text 1.5s infinite; }
.badge-pending { background: var(--amber-dim); color: var(--amber); animation: pulse-text 1.5s infinite; }
.badge-error   { background: var(--red-dim);   color: var(--red); }
.badge-never   { background: var(--bg-card);   color: var(--text-3); border: 1px solid var(--border); }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { background: var(--bg-input); }
th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-3);
}
th.r, td.r { text-align: right; }
tbody tr { border-top: 1px solid var(--border-soft); transition: background 0.1s; }
tbody tr:hover { background: var(--bg-hover); }
td { padding: 10px 16px; color: var(--text-2); }
td.county-name { font-weight: 600; color: var(--text-1); text-transform: capitalize; }
.empty-row td { text-align: center; color: var(--text-3); padding: 40px; font-size: 13px; }

.run-status { font-size: 11px; font-weight: 600; text-transform: capitalize; }
.run-status.done      { color: var(--green); }
.run-status.error     { color: var(--red); }
.run-status.running   { color: var(--blue); }
.run-status.pending   { color: var(--amber); }
.run-status.cancelled { color: var(--amber); }
.btn-reset-run { margin-left: 6px; font-size: 10px; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.btn-reset-run:hover { background: var(--surface-3); color: var(--text-1); }

/* ── Partner Network jump nav ────────────────────────────────────────────── */
.pn-jumpnav {
  display: flex; flex-wrap: wrap; gap: 6px;
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); padding: 10px 0 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pn-jump {
  font-size: 12px; font-weight: 600; padding: 5px 12px;
  border-radius: 20px; text-decoration: none;
  border: 1px solid var(--border);
  color: var(--text-2); background: var(--surface-2);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.pn-jump:hover, .pn-jump.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  flex: 1; border: none; border-radius: 8px;
  padding: 9px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-live { background: var(--accent); color: #fff; }
.btn-live:not(:disabled):hover { background: var(--accent-hover); }
.btn-dry  { background: var(--bg-input); color: var(--text-2); border: 1px solid var(--border); }
.btn-dry:not(:disabled):hover  { background: var(--bg-hover); color: var(--text-1); border-color: var(--text-3); }

.btn-push {
  background: var(--accent); border: none; color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 5px;
  cursor: pointer; transition: background 0.15s; white-space: nowrap;
}
.btn-push:hover:not(:disabled) { background: var(--accent-hover); }
.btn-push:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-viewlog {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-2); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 5px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.btn-viewlog:hover { color: var(--text-1); border-color: var(--accent); }

.btn-delete {
  background: transparent; border: none;
  color: var(--text-3); font-size: 14px;
  cursor: pointer; padding: 2px 6px;
  border-radius: 4px; line-height: 1; transition: color 0.15s;
}
.btn-delete:hover { color: var(--red); }

/* ── Log panel ───────────────────────────────────────────────────────────── */

.log-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.log-panel.hidden { display: none; }
.log-header {
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  padding: 11px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.log-title-row { display: flex; align-items: center; gap: 10px; }
.log-actions { display: flex; align-items: center; gap: 8px; }

.log-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.5s infinite; }
.log-dot.done      { background: var(--green);  animation: none; }
.log-dot.error     { background: var(--red);    animation: none; }
.log-dot.cancelled { background: var(--amber);  animation: none; }

.log-title { font-size: 13px; font-weight: 600; color: var(--text-1); }

.log-status {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; font-size: 12px; color: var(--text-2);
  background: var(--bg-input); border-bottom: 1px solid var(--border-soft);
  min-height: 34px;
}
.log-status:empty { display: none; }
.log-status .spin {
  width: 13px; height: 13px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0;
}

#log-output {
  font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
  font-size: 12px; line-height: 1.6;
  padding: 16px 18px; height: 280px;
  overflow-y: auto; color: var(--green);
  background: #050505; white-space: pre-wrap; word-break: break-all;
}
[data-theme="light"] #log-output { background: #1a1a1a; }

#log-output::-webkit-scrollbar { width: 5px; }
#log-output::-webkit-scrollbar-track { background: #050505; }
#log-output::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.log-footer { padding: 11px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 20px; font-size: 13px; }
.log-footer.hidden { display: none; }

.log-close {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-3); font-size: 12px; padding: 4px 10px;
  border-radius: 6px; cursor: pointer; transition: all 0.15s; font-weight: 500;
}
.log-close:hover { color: var(--text-1); border-color: var(--text-2); }

.log-cancel {
  background: var(--red-dim); border: 1px solid var(--red);
  color: var(--red); font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.log-cancel:hover { background: var(--red); color: #fff; }
.log-cancel:disabled { opacity: 0.5; cursor: not-allowed; }
.log-cancel.hidden { display: none; }

/* ── Totals row ──────────────────────────────────────────────────────────── */

.totals-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.total-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}
.total-card:hover { box-shadow: var(--shadow-md); }

.total-num {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.total-lbl {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
  font-weight: 500;
}

/* ── FUB page ────────────────────────────────────────────────────────────── */

.totals-inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.totals-inline .total-card {
  flex: 1;
  min-width: 130px;
  box-shadow: none;
}

/* --w-fs is the per-widget font multiplier set by widget-settings.js
   (1 = Normal, 1.5 = Large, 2 = XL). All scalable widget text uses it. */
.widget-table { width: 100%; font-size: calc(13px * var(--w-fs, 1)); }
.widget-table thead tr { background: transparent; }
.widget-table th { padding: 6px 8px; white-space: nowrap; }
.widget-table td { padding: 8px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.widget-table td:last-child { white-space: nowrap; max-width: none; width: 1%; }

.section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

/* FUB inline stat row — never wraps, evenly distributed */
.fub-totals-body {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  padding: 0 16px 14px !important;
  overflow: hidden;
}

.fub-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}
.fub-stat-num {
  font-size: calc(32px * var(--w-fs, 1));
  font-weight: 700;
  line-height: 1;
}
.fub-stat-lbl {
  font-size: calc(13px * var(--w-fs, 1));
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
}
.fub-stat-sep {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

/* FUB widget hard pixel floors so header never clips regardless of viewport */
/* Pixel floors kept just under each widget's grid-column minimum
   (see gs-min-w in fub.html) so they never overflow their own cell. */
.grid-stack-item[gs-id="fub-totals"]  > .grid-stack-item-content > .widget { min-width: 440px; }
.grid-stack-item[gs-id="fub-sources"] > .grid-stack-item-content > .widget { min-width: 280px; }
.grid-stack-item[gs-id="fub-calls"]   > .grid-stack-item-content > .widget { min-width: 280px; }

/* Window tab buttons (replace dropdowns) */
.win-tabs {
  display: flex;
  gap: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}
.win-tab {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.win-tab:hover { color: var(--text-1); }
.win-tab-active { background: var(--bg-card); color: var(--text-1); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

th.col-active { color: var(--accent); }

/* ── County cards ────────────────────────────────────────────────────────── */

.county-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.county-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-sm);
}
.county-card:hover { box-shadow: var(--shadow-md); }
.county-card.is-running { border-color: var(--accent); }
.county-card.is-pending { border-color: var(--amber); }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-top h3 { font-size: 15px; font-weight: 600; color: var(--text-1); }

.last-run { font-size: 11px; color: var(--text-3); }

.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.stat-box {
  background: var(--bg-input);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.stat-box .n { font-size: 22px; font-weight: 700; line-height: 1; }
.stat-box .l { font-size: 10px; color: var(--text-3); margin-top: 3px; }
.n-green { color: var(--green); }
.n-blue  { color: var(--blue); }
.n-amber { color: var(--amber); }

.card-actions { display: flex; gap: 8px; }

/* ── Custom Widgets (image + text) — raw, no card chrome ─────────────────── */

.cw-widget { width: 100%; height: 100%; display: flex; flex-direction: column; background: transparent; border: none; overflow: hidden; margin: 0; padding: 0; }

.cw-image-widget { border-radius: 12px; overflow: hidden; position: relative; height: 100%; }
/* Hover bar OVERLAYS the image (absolute) so it never adds height */
.cw-img-hover-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 3px 8px; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); cursor: grab; opacity: 0; transition: opacity .2s; min-height: 26px; margin: 0; border: none; }
.cw-image-widget:hover .cw-img-hover-bar { opacity: 1; }
/* Image body fills the ENTIRE widget — no gaps top or bottom */
.cw-img-body { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-base); }
.cw-img { display: block; border-radius: 12px; }
/* Cover: image fills the whole widget */
.cw-img-body.cw-fit-cover .cw-img { width: 100%; height: 100%; object-fit: cover; }
/* Contain: image element shrinks to its displayed size so rounded corners land on real edges */
.cw-img-body.cw-fit-contain .cw-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cw-upload-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; width: calc(100% - 16px); height: calc(100% - 16px); border: 2px dashed var(--border); border-radius: 8px; transition: all .2s; }
.cw-upload-area:hover, .cw-img-body.cw-drag-over .cw-upload-area { border-color: var(--accent); background: var(--accent-dim); }
.cw-img-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.cw-img-body:hover .cw-img-overlay { opacity: 1; }
.cw-replace { padding: 8px 16px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 8px; cursor: pointer; font-weight: 700; }
.cw-replace:hover { background: rgba(255,255,255,.25); }

/* Text widget — display only; editing happens in a modal */
.cw-text-widget { position: relative; height: 100%; border-radius: 12px; overflow: hidden; }
.cw-disp { position: absolute; inset: 0; overflow: hidden; font-size: 13px; line-height: 1.65; color: var(--text-1); box-sizing: border-box; }
/* Grip/control bar OVERLAYS the top, appears on hover */
.cw-text-grip { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 3px 8px; min-height: 26px; cursor: grab; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); border: none; opacity: 0; transition: opacity .2s; }
.cw-text-widget:hover .cw-text-grip { opacity: 1; }
.cw-grip { font-size: 14px; color: rgba(255,255,255,.6); cursor: grab; flex-shrink: 0; }
.cw-label { background: transparent; border: none; border-bottom: 1px solid transparent; color: rgba(255,255,255,.75); font-family: inherit; font-size: 11px; font-weight: 600; outline: none; flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; transition: border-color .15s, color .15s; }
.cw-label:focus { border-bottom-color: rgba(255,255,255,.3); color: #fff; }
.cw-edit { white-space: nowrap; }

/* Modal text editor */
.cw-modal-back { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); padding: 24px; }
.cw-modal-back.open { display: flex; }
.cw-modal { width: min(820px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.55); overflow: hidden; }
.cw-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--text-1); }
.cw-modal-x { background: none; border: none; color: var(--text-3); font-size: 24px; cursor: pointer; line-height: 1; }
.cw-modal-x:hover { color: var(--text-1); }

/* ── SMS Messages widget (portable; styles shared so it works on any page) ─── */
.widget-header:has(.win-tabs) .widget-title { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sms-stats-body { display: flex; flex-direction: column; height: 100%; }
.sms-stats-row { display: flex; align-items: center; justify-content: center; gap: 0; flex-shrink: 0; padding: 8px 0 16px; }
.sms-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
.sms-stat-num { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.sms-stat-lbl { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.sms-stat-sep { width: 1px; height: 60px; background: var(--border); flex-shrink: 0; }
.sms-loading { color: var(--text-3); font-size: 13px; text-align: center; padding: 30px 0; }
.sms-stat-clickable { cursor: pointer; border-radius: 10px; padding: 6px 4px; transition: background 0.15s; position: relative; }
.sms-stat-clickable:hover { background: var(--bg-hover); }
.sms-stat-hint { font-size: 9px; color: var(--accent); margin-top: 4px; opacity: 0; transition: opacity 0.15s; text-transform: uppercase; letter-spacing: 0.06em; }
.sms-stat-clickable:hover .sms-stat-hint { opacity: 1; }
.sms-replied-list { flex: 1; overflow-y: auto; min-height: 0; border-top: 1px solid var(--border-soft); scrollbar-width: thin; scrollbar-color: var(--border) transparent; display: none; }
.sms-replied-list.open { display: block; }
.sms-replied-list::-webkit-scrollbar { width: 4px; }
.sms-replied-list::-webkit-scrollbar-track { background: transparent; }
.sms-replied-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sms-replied-list::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.sms-reply-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; cursor: pointer; border-bottom: 1px solid var(--border-soft); transition: background 0.15s, box-shadow 0.15s; }
.sms-reply-row:hover { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.sms-reply-name { font-size: 13px; color: var(--text-1); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-reply-phone { font-size: 11px; color: var(--text-3); }
.sms-reply-meta { display: flex; flex-direction: column; }
.sms-reply-time { font-size: 11px; color: var(--text-2); white-space: nowrap; flex-shrink: 0; }
.sms-reply-empty { color: var(--text-3); font-size: 13px; text-align: center; padding: 24px 0; }
/* On-hover SMS thread popup (appended to <body>); zoom-scales with the widget's gear setting */
.sms-thread-pop { position: fixed; z-index: 9999; width: 320px; max-height: 420px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; display: none; flex-direction: column; zoom: var(--w-zoom, 1); }
.sms-thread-pop.open { display: flex; }
.sms-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.sms-thread-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-thread-close { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 20px; line-height: 1; padding: 0 2px; flex-shrink: 0; transition: color 0.15s; }
.sms-thread-close:hover { color: var(--text-1); }
.sms-reply-box { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.sms-reply-input { flex: 1; resize: none; font-family: inherit; font-size: 12.5px; background: var(--bg-input); color: var(--text-1); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; outline: none; transition: border-color 0.15s; line-height: 1.35; }
.sms-reply-input:focus { border-color: var(--accent); }
.sms-reply-send { font-family: inherit; font-size: 12px; font-weight: 700; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 9px 14px; cursor: pointer; flex-shrink: 0; transition: opacity 0.15s; }
.sms-reply-send:hover { opacity: 0.9; }
.sms-reply-send:disabled { opacity: 0.5; cursor: default; }
.sms-reply-status { font-size: 10.5px; color: var(--text-3); flex-shrink: 0; margin-top: 6px; min-height: 13px; text-align: right; }
.sms-reply-status.ok  { color: var(--green); }
.sms-reply-status.err { color: var(--red); }
.sms-crm-btns { display: flex; gap: 8px; margin-bottom: 10px; flex-shrink: 0; }
.sms-crm-btn { flex: 1; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 8px; border-radius: 7px; cursor: pointer; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-1); transition: background 0.15s, border-color 0.15s, color 0.15s; }
.sms-crm-btn.ghl:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.sms-crm-btn.fub:hover { background: var(--green); border-color: var(--green); color: #fff; }
.sms-crm-btn.disabled { opacity: 0.4; cursor: default; }
.sms-crm-btn.disabled:hover { background: var(--bg-input); border-color: var(--border); color: var(--text-1); }
.sms-thread-msgs { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.sms-thread-msgs::-webkit-scrollbar { width: 4px; }
.sms-thread-msgs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sms-bubble { max-width: 80%; padding: 7px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; margin-bottom: 7px; word-wrap: break-word; white-space: pre-wrap; }
.sms-bubble-out { background: var(--accent); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.sms-bubble-in { background: var(--bg-input); color: var(--text-1); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.sms-bubble-time { display: block; font-size: 9.5px; margin-top: 3px; opacity: 0.7; }
.sms-thread-loading { color: var(--text-3); font-size: 12px; text-align: center; padding: 20px 0; }

/* ── Follow Up Boss widgets (portable; shared so they work on any page) ────── */
.fub-feed-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.fub-feed-body::-webkit-scrollbar { width: 4px; }
.fub-feed-body::-webkit-scrollbar-track { background: transparent; }
.fub-feed-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.fub-feed-body::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.feed-row { cursor: pointer; transition: background 0.15s, box-shadow 0.15s; }
.feed-row:hover { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.feed-row:hover td { color: var(--text-1); }
.ttc-none { color: var(--amber); font-weight: 600; }
.ttc-fast { color: var(--green); }
.ttc-val  { color: var(--text-2); }
.funnel-agent-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.funnel-agent-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-3); font-size: 11px; font-weight: 700; padding: 5px 13px; border-radius: 6px; cursor: pointer; font-family: inherit; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.funnel-agent-btn:hover { color: var(--text-1); border-color: var(--text-2); }
.funnel-agent-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.funnel-bars { display: flex; flex-direction: column; gap: 10px; }
.funnel-row  { display: grid; grid-template-columns: 74px 1fr 46px; align-items: center; gap: 10px; }
.funnel-lbl  { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-align: right; white-space: nowrap; }
.funnel-bar-cell { display: flex; justify-content: center; }
.funnel-bar { border: 2px solid; border-radius: 8px; min-width: 48px; height: 36px; display: flex; align-items: center; justify-content: center; transition: width 0.45s cubic-bezier(.4,0,.2,1); }
.funnel-bar-count { font-size: 15px; font-weight: 700; line-height: 1; }
.funnel-pct { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.funnel-total { text-align: center; font-size: 11px; color: var(--text-3); margin-top: 14px; letter-spacing: 0.05em; }

/* ── Skip Trace widgets (portable; shared so they work on any page) ────────── */
.widget-body:has(.trace-form) { display: flex; flex-direction: column; }
/* Form fills the widget body so the action button pins to the bottom:
   inputs on top, results grow in the middle, .trace-go last. */
.trace-form { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.trace-inputs { display: flex; flex-direction: column; gap: 10px; }
.trace-fields { display: grid; gap: 8px; }
.trace-fields.cols-2 { grid-template-columns: 1fr 1fr; }
.trace-fields.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.trace-input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 9px 11px; border-radius: 7px; width: 100%; transition: border-color 0.15s; box-sizing: border-box; }
.trace-input::placeholder { color: var(--text-3); }
.trace-input:focus { outline: none; border-color: var(--accent); }
/* Match the primary action button on other pages (e.g. Create Content's
   full-width generator button): standard .btn height, full width, no stretch. */
.trace-go { flex: 0 0 auto; width: 100%; }
.trace-go .spin { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; margin-right: 7px; }
.trace-status { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.trace-status.err { color: var(--red); }
.trace-cards { display: flex; flex-direction: column; gap: 9px; }
.pcard { background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.pcard:hover { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.pcard-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pcard-name { font-size: 15px; font-weight: 700; color: var(--text-1); }
.pcard-age { font-size: 12px; color: var(--text-3); }
.pcard-rows { margin-top: 8px; display: grid; gap: 4px; }
.pcard-row { display: flex; gap: 8px; font-size: 12.5px; align-items: baseline; }
.pcard-row .lbl { color: var(--text-3); flex-shrink: 0; width: 56px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; padding-top: 1px; }
.pcard-row .val { color: var(--text-1); word-break: break-word; }
.pcard-row .val.phone { color: var(--green); font-weight: 600; }
.pcard-row .val.email { color: var(--blue); }
.pcard-more { margin-top: 8px; font-size: 11px; color: var(--accent); font-weight: 600; }
.pbadge { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.pbadge.owner   { background: var(--green-dim); color: var(--green); }
.pbadge.flag    { background: var(--amber-dim); color: var(--amber); }
.pbadge.dead    { background: var(--red-dim);   color: var(--red); }
.pbadge.live    { background: var(--green-dim); color: var(--green); }
.pbadge.optout  { background: var(--red-dim);   color: var(--red); }
.trace-results { overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.trace-results::-webkit-scrollbar { width: 5px; }
.trace-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.trace-results::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: flex-start; justify-content: center; z-index: 2000; padding: 40px 16px; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 720px; box-shadow: var(--shadow-md); overflow: hidden; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-name { font-size: 21px; font-weight: 800; color: var(--text-1); }
.modal-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.modal-close { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-2); width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 17px; flex-shrink: 0; line-height: 1; transition: color 0.15s, border-color 0.15s; }
.modal-close:hover { color: var(--red); border-color: var(--red); }
.modal-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#push-fub-btn { white-space: nowrap; }
#push-fub-btn:disabled { opacity: 0.55; cursor: default; }
.push-status { padding: 0 22px; font-size: 13px; min-height: 0; transition: min-height 0.1s; }
.push-status:not(:empty) { padding-top: 12px; }
.push-status .ok  { color: var(--green); font-weight: 600; }
.push-status .err { color: var(--red); }
.push-status a { color: var(--accent); font-weight: 600; text-decoration: none; }
.push-status a:hover { text-decoration: underline; }
.modal-body { padding: 6px 22px 22px; max-height: 70vh; overflow-y: auto; }
.msec { margin-top: 18px; }
.msec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.mitem { font-size: 13.5px; color: var(--text-1); padding: 5px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.mitem .meta { font-size: 11.5px; color: var(--text-3); }
.mitem .phone { color: var(--green); font-weight: 600; }
.mitem .email { color: var(--blue); }
.mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mempty { font-size: 12.5px; color: var(--text-3); padding: 4px 0; }

/* ── Social Posts widgets (portable; modal/buttons namespaced `smodal`/`sbtn`) ── */
.soc-scrollbody { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.soc-scrollbody::-webkit-scrollbar { width: 4px; }
.soc-scrollbody::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.row-click { cursor: pointer; transition: background .15s, box-shadow .15s; }
.row-click:hover { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.row-click:hover td { color: var(--text-1); }
.chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip { font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 5px; white-space: nowrap; border: 1px solid var(--border); color: var(--text-2); }
.chip-Facebook  { color: var(--blue); border-color: rgba(96,165,250,.5); background: rgba(96,165,250,.10); }
.chip-Instagram { color: #e879c9; border-color: rgba(232,121,201,.5); background: rgba(232,121,201,.10); }
.when-cell { white-space: nowrap; color: var(--text-2); font-size: 12px; }
.mini-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-3); font-family: inherit; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; cursor: pointer; transition: color .15s, border-color .15s; }
.mini-btn:hover { color: var(--text-1); border-color: var(--text-2); }
.banner { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.4); color: var(--amber); }
.banner.hidden { display: none; }
.banner-error { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.4); color: var(--red); }
.banner-warn  { background: rgba(251,191,36,.10);  border-color: rgba(251,191,36,.4);  color: var(--amber); }
/* Review / schedule modal (namespaced so it never clashes with the Skip Trace modal) */
.smodal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.smodal-overlay.open { display: flex; }
.smodal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; width: min(760px, 100%); max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.5); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.smodal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.smodal-title { font-size: 17px; font-weight: 700; color: var(--text-1); line-height: 1.3; }
.smodal-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.smodal-close { background: none; border: none; color: var(--text-3); font-size: 26px; cursor: pointer; line-height: 1; padding: 0 4px; }
.smodal-close:hover { color: var(--text-1); }
.smodal-body { padding: 18px 20px 22px; }
.smodal-media { width: 100%; border-radius: 10px; border: 1px solid var(--border); max-height: 340px; object-fit: contain; background: #000; margin-bottom: 16px; }
.smodal-msg { font-size: 12px; margin-top: 12px; min-height: 16px; }
.smodal-msg.ok { color: var(--green); }
.smodal-msg.err { color: var(--red); }
.copy-block { margin-bottom: 16px; }
.copy-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.copy-text { font-size: 13px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.copy-textarea { width: 100%; font-size: 13px; line-height: 1.55; color: var(--text-1); background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; resize: vertical; font-family: inherit; field-sizing: content; min-height: 120px; }
.copy-textarea:focus { outline: none; border-color: var(--accent); }
.copy-edit-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.copy-saved-msg { font-size: 12px; color: var(--text-3); }
.copy-saved-msg.ok { color: var(--green); }
.copy-saved-msg.err { color: var(--red); }
.sched-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.sched-row input[type="datetime-local"] { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; color-scheme: dark; }
body[data-theme="light"] .sched-row input[type="datetime-local"] { color-scheme: light; }
.sbtn { font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: opacity .15s, background .15s; }
.sbtn-primary { background: var(--accent); color: #fff; }
.sbtn-primary:hover { opacity: .9; }
.sbtn-ghost { background: var(--bg-input); border-color: var(--border); color: var(--text-2); text-decoration: none; display: inline-block; }
.sbtn-ghost:hover { color: var(--text-1); border-color: var(--text-2); }
.sbtn-danger { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.4); color: var(--red); }
.sbtn:disabled { opacity: .45; cursor: not-allowed; }
.img-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; margin-bottom: 10px; }
.img-thumb { position: relative; aspect-ratio: 1; border-radius: 7px; overflow: hidden; cursor: zoom-in; border: 2px solid transparent; transition: border-color .15s, opacity .15s; background: #000; }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.img-thumb.unselected { opacity: .4; }
.img-thumb.unselected img { filter: grayscale(.4); }
.img-thumb.selected { border-color: var(--accent); }
.img-thumb .thumb-num { position: absolute; top: 4px; left: 4px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.img-thumb .thumb-check { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 5px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.img-thumb:hover .thumb-check { opacity: 1; }
.img-gallery-footer { font-size: 11px; color: var(--text-3); margin-bottom: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.img-gallery-footer strong { color: var(--text-2); }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.93); z-index: 2000; display: none; flex-direction: column; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox-img-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; min-height: 0; padding: 20px 64px; box-sizing: border-box; }
.lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; display: block; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15); color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background .15s; flex-shrink: 0; }
.lightbox-nav:hover { background: rgba(255,255,255,.25); }
.lightbox-nav.lb-prev { left: 12px; }
.lightbox-nav.lb-next { right: 12px; }
.lightbox-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15); color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 1; }
.lightbox-close:hover { background: rgba(255,255,255,.25); }
.lightbox-footer { display: flex; gap: 12px; align-items: center; padding: 14px 20px 20px; flex-shrink: 0; width: 100%; max-width: 700px; box-sizing: border-box; justify-content: center; }
.lightbox-counter { font-size: 13px; color: rgba(255,255,255,.5); min-width: 50px; text-align: center; }
.lightbox-toggle { font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 22px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: all .15s; min-width: 150px; text-align: center; }
.lightbox-toggle.is-selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.lightbox-toggle.is-selected:hover { opacity: .85; }
.lightbox-toggle.not-selected { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.2); }
.lightbox-toggle.not-selected:hover { background: rgba(255,255,255,.15); color: #fff; }
.lightbox-hint { font-size: 11px; color: rgba(255,255,255,.3); text-align: center; padding-bottom: 8px; }
.chan-select { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chan-select-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; }
.chan-btn { font-family: inherit; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 99px; cursor: pointer; transition: all .15s; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.chan-btn.active-Facebook  { color: var(--blue); border-color: rgba(96,165,250,.6); background: rgba(96,165,250,.15); }
.chan-btn.active-Instagram { color: #e879c9; border-color: rgba(232,121,201,.6); background: rgba(232,121,201,.15); }
.chan-btn:not([class*="active"]) { opacity: .5; }
.chan-btn:hover { opacity: 1; }
.chan-btn.has-error { border-color: rgba(248,113,113,.7) !important; }
.chan-btn.has-warn  { border-color: rgba(251,191,36,.6) !important; }
.chan-issues { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.chan-issue { font-size: 12px; padding: 7px 11px; border-radius: 7px; line-height: 1.4; display: flex; align-items: flex-start; gap: 7px; }
.chan-issue-error { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.3); color: var(--red); }
.chan-issue-warn  { background: rgba(251,191,36,.09); border: 1px solid rgba(251,191,36,.3); color: var(--amber); }
.chan-issue-ok    { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); color: var(--green); font-size: 11px; }
.sched-status { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.sched-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.sched-dot.stale { background: var(--amber); }
.sched-dot.dead  { background: #f87171; }
.post-error-box { margin-bottom: 14px; padding: 9px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.3); color: var(--red); }
.post-error-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; opacity: .7; }
select.dash-select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
input.dash-num { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; width: 80px; }
.bulk-preview-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.bulk-preview-list li { font-size: 12px; color: var(--text-2); display: flex; gap: 8px; }
.bulk-preview-list li .bpl-time { color: var(--text-3); white-space: nowrap; flex-shrink: 0; }

/* ── Create Content generators (portable; buttons namespaced `cc-btn`) ──────── */
.cc-form-body { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.cc-form-body::-webkit-scrollbar { width: 8px; }
.cc-form-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.cc-form-body::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.cc-icon { width: 26px; height: 26px; flex-shrink: 0; background: var(--accent-dim); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); margin-right: 4px; }
.cc-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.cc-badge-image { background: rgba(96,165,250,.12); color: var(--blue); }
.cc-badge-video { background: rgba(167,139,250,.12); color: #a78bfa; }
.fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.fld.hidden { display: none; }
.pp-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.pp-input, .pp-select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; width: 100%; box-sizing: border-box; color-scheme: dark; }
body[data-theme="light"] .pp-input, body[data-theme="light"] .pp-select { color-scheme: light; }
.pp-input:focus, .pp-select:focus { outline: none; border-color: var(--accent); }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg { display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.seg button { font-family: inherit; font-size: 12px; font-weight: 700; padding: 8px 12px; flex: 1; background: transparent; color: var(--text-3); border: none; cursor: pointer; }
.seg button.on { background: var(--accent); color: #fff; }
.cc-btn { font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: opacity .15s; white-space: nowrap; }
.cc-btn-primary { background: var(--accent); color: #fff; width: 100%; }
.cc-btn-primary:hover { opacity: .88; }
.cc-btn:disabled { opacity: .4; cursor: not-allowed; }
.cc-btn-sm { font-size: 12px; padding: 6px 12px; }
.cc-btn-ghost { background: var(--bg-input); border-color: var(--border); color: var(--text-2); text-decoration: none; display: inline-block; }
.cc-btn-ghost:hover { color: var(--text-1); border-color: var(--text-2); }
.pp-hint { font-size: 11px; color: var(--text-3); margin-top: 5px; margin-bottom: 10px; }
.pp-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.drop { border: 2px dashed var(--border); border-radius: 9px; padding: 14px; text-align: center; color: var(--text-3); font-size: 12px; cursor: pointer; transition: border-color .15s, background .15s; margin-bottom: 10px; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-dim); }
.drop.has-file { border-style: solid; color: var(--text-2); }
.drop img { max-height: 100px; border-radius: 7px; margin-top: 7px; display: block; margin-left: auto; margin-right: auto; }
.pp-status { display: none; padding-top: 10px; } .pp-status.show { display: block; }
.pp-steps { list-style: none; margin: 0; padding: 0; }
.pp-step { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-3); padding: 5px 0; }
.pp-step .dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; }
.pp-step.active { color: var(--text-1); } .pp-step.active .dot { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.pp-step.done { color: var(--text-2); } .pp-step.done .dot { border-color: var(--green); background: var(--green); color: #fff; }
.pp-result { display: none; padding-top: 10px; } .pp-result.show { display: block; }
.pp-divider { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.pp-result-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pp-result-title { font-size: 13px; font-weight: 700; color: var(--text-1); }
.pp-badge-green { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(74,222,128,.12); color: var(--green); }
.pp-preview { font-size: 11px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
.pp-meta { font-size: 11px; color: var(--text-3); margin-bottom: 8px; }
.pp-error { display: none; margin-top: 8px; padding: 9px 11px; border-radius: 8px; font-size: 12px; background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.35); color: var(--red); }
.pp-error.show { display: block; }
.result-img { width: 100%; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 10px; }

/* Infographic widget — article picker list */
.ig-list { max-height: 230px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.ig-list::-webkit-scrollbar { width: 6px; }
.ig-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.ig-hint { font-size: 12px; color: var(--text-3); padding: 14px 12px; text-align: center; }
.ig-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text-2); font-family: inherit; cursor: pointer; padding: 9px 11px; transition: background .12s; }
.ig-item:last-child { border-bottom: none; }
.ig-item:hover { background: var(--bg-hover); }
.ig-item.sel { background: var(--accent-dim); }
.ig-item.sel .ig-item-title { color: var(--accent); font-weight: 600; }
.ig-item-title { flex: 1; font-size: 12.5px; line-height: 1.4; color: var(--text-1); }
.ig-item-cat { flex-shrink: 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); background: var(--bg-card); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }

/* Lead Finder widget — results table */
.lf-table-wrap { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.lf-table-wrap::-webkit-scrollbar { width: 6px; }
.lf-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.lf-table { width: 100%; border-collapse: collapse; font-size: calc(11.5px * var(--w-fs, 1)); }
.lf-table th { position: sticky; top: 0; background: var(--bg-card); text-align: left; font-size: calc(10px * var(--w-fs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.lf-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
.lf-table tr:last-child td { border-bottom: none; }
.lf-table a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.lf-name { color: var(--text-1); font-weight: 600; }
.lf-email { color: var(--blue); word-break: break-all; }
.lf-noemail { color: var(--text-3); }
.lf-empty { text-align: center; color: var(--text-3); padding: 18px 8px; }

/* ── Lead Finder page (fixed layout) ───────────────────────────────────────── */
.finder-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 22px; }
.finder-sub { font-size: 13px; color: var(--text-3); line-height: 1.5; margin-bottom: 14px; max-width: 760px; }
.finder-counties { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cty-chk { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; transition: border-color .15s, color .15s; }
.cty-chk:hover { border-color: var(--text-3); color: var(--text-1); }
.cty-chk input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; margin: 0; }
.cty-chk.cty-all { font-weight: 600; color: var(--text-1); }
.finder-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.finder-run { flex: 0 0 auto; padding: 9px 18px; }
.finder-lastrun { font-size: 12.5px; color: var(--text-3); }
.finder-error { display: none; margin-top: 12px; padding: 9px 12px; border-radius: 8px; font-size: 13px; background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.35); color: var(--red); }
.finder-error.show { display: block; }
.finder-status { margin-top: 14px; }
.finder-status.hidden { display: none; }   /* steps + log box only show while a search runs */
.fc-toggle-wrap { position:relative; display:inline-flex; align-items:center; cursor:pointer; }
.fc-toggle-wrap input { opacity:0; width:0; height:0; position:absolute; }
.fc-toggle-track { width:40px; height:22px; background:var(--border); border-radius:11px; transition:background .2s; display:flex; align-items:center; padding:2px; }
.fc-toggle-wrap input:checked + .fc-toggle-track { background:var(--accent); }
.fc-toggle-thumb { width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.fc-toggle-wrap input:checked + .fc-toggle-track .fc-toggle-thumb { transform:translateX(18px); }
.finder-logbox { margin-top: 10px; background: var(--bg-2, #111); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; max-height: 180px; overflow-y: auto; font-size: 11.5px; font-family: monospace; color: var(--text-3); line-height: 1.6; }
.log-line { white-space: pre-wrap; }
.log-line.log-ok { color: var(--green, #4ade80); }
.step-spinner { display: inline-block; width: 8px; height: 8px; border: 2px solid var(--accent); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.finder-runs-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 18px 0 8px; }

/* ── Transaction Coordinator widget (portable; seg namespaced `tc-seg`) ─────── */
.tc-body { overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 18px; padding: 16px 18px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.tc-body::-webkit-scrollbar { width: 8px; }
.tc-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.tc-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.tc-card h2 { font-size: 15px; margin: 0 0 4px; color: var(--text-1); }
.tc-card .sub { font-size: 13px; color: var(--text-3); margin: 0 0 18px; }
.tc-seg { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; padding: 3px; margin-bottom: 18px; }
.tc-seg button { border: none; background: transparent; color: var(--text-3); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 7px 22px; border-radius: 7px; transition: background .15s, color .15s; }
.tc-seg button.active { background: var(--accent); color: #fff; }
.dropzone { border: 1.5px dashed var(--border); border-radius: 12px; padding: 34px 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; color: var(--text-3); }
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--accent-dim); color: var(--text-2); }
.dropzone svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.6; margin-bottom: 8px; }
.dropzone .dz-main { font-size: 14px; font-weight: 600; color: var(--text-2); }
.dropzone .dz-sub  { font-size: 12px; margin-top: 4px; }
.dz-file { margin-top: 14px; font-size: 13px; color: var(--text-1); display: none; }
.dz-file.show { display: block; }
.dz-file strong { color: var(--accent); }
.tc-upload-actions { margin-top: 18px; display: flex; gap: 10px; align-items: center; }
#review-panel { display: none; }
#review-panel.show { display: block; }
.form-section { margin-top: 6px; }
.form-section + .form-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-soft); }
.form-section h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 0 0 14px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 12px; color: var(--text-3); font-weight: 600; }
.field input, .field select { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--text-1); font-family: inherit; font-size: 13px; width: 100%; box-sizing: border-box; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.party-row { border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.party-row .party-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.party-row .party-head span { font-size: 12px; font-weight: 700; color: var(--text-2); }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; font-family: inherit; padding: 0; }
.chk-row { display: flex; flex-wrap: wrap; gap: 18px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.toggle-line { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; color: var(--text-2); }
.review-actions { margin-top: 24px; display: flex; gap: 10px; }
.insp-types { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-chk { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 6px 13px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.pill-chk input { accent-color: var(--accent); }
.muted { color: var(--text-3); font-size: 12px; }
.review-banner { font-size: 13px; color: var(--text-2); background: var(--accent-dim); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 18px; }
.btn-ghost { background: var(--bg-input); color: var(--text-2); border: 1px solid var(--border); }
.tc-result { font-size: 13px; line-height: 1.7; color: var(--text-2); }
.tc-result .ok { color: var(--green); }
.tc-result .warn { color: var(--amber); }
.cw-modal-tb { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--bg-base); }
.cw-modal-tb select, .cw-modal-tb button, .cw-modal-tb input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-2); font-family: inherit; font-size: 12px; padding: 4px 7px; border-radius: 6px; cursor: pointer; }
.cw-modal-tb button[data-cmd] { font-weight: 700; color: var(--text-3); min-width: 30px; }
.cw-modal-tb button:hover { color: var(--text-1); background: var(--bg-hover); }
.cw-modal-tb label { font-size: 11px; color: var(--text-3); margin-left: 4px; }
.cw-modal-tb .cw-modal-pad { width: 52px; text-align: center; cursor: text; }
.cw-modal-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.cw-color { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border); padding: 0; cursor: pointer; }
.cw-modal-editor { flex: 1; min-height: 240px; overflow-y: auto; padding: 18px; font-size: 14px; line-height: 1.7; color: var(--text-1); outline: none; box-sizing: border-box; }
.cw-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); }
.cw-modal-cancel { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 8px; cursor: pointer; }
.cw-modal-cancel:hover { color: var(--text-1); border-color: var(--text-2); }
.cw-modal-save { background: var(--accent); border: 1px solid var(--accent); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 8px; cursor: pointer; }
.cw-modal-save:hover { opacity: .9; }
.cw-modal-link { padding: 10px 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
.cw-modal-link label { font-size: 11px; color: var(--text-3); }
.cw-modal-link small { color: var(--text-3); font-size: 10px; }
.cw-link-input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: 7px; width: 100%; box-sizing: border-box; }
.cw-link-input:focus { outline: none; border-color: var(--accent); }
.cw-link-indicator { font-size: 13px; opacity: .7; }
/* Shared heading styles for both the widget display and the modal editor */
.cw-disp h1, .cw-modal-editor h1 { font-size: 24px; font-weight: 700; margin: 8px 0 6px; }
.cw-disp h2, .cw-modal-editor h2 { font-size: 19px; font-weight: 700; margin: 6px 0 4px; }
.cw-disp h3, .cw-modal-editor h3 { font-size: 15px; font-weight: 700; margin: 4px 0 2px; }
.cw-disp p, .cw-modal-editor p { margin: 0 0 6px; }
.cw-disp ul, .cw-modal-editor ul { padding-left: 20px; margin: 0 0 6px; }
.cw-disp li, .cw-modal-editor li { margin: 0 0 3px; }
/* Kill trailing margin so the text sits flush at the bottom like other widgets */
.cw-disp > *:last-child, .cw-modal-editor > *:last-child { margin-bottom: 0; }
.cw-disp > *:first-child, .cw-modal-editor > *:first-child { margin-top: 0; }

.cw-del { padding: 2px 6px; background: rgba(248,113,113,.15); border: 1px solid rgba(248,113,113,.35); color: var(--red); border-radius: 4px; font-size: 16px; cursor: pointer; }
.cw-del:hover { background: rgba(248,113,113,.35); }

.mini-btn { padding: 3px 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.8); border-radius: 4px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; }
.mini-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.mini-btn.active { background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.5); color: #fff; }

/* ── Shared cross-page classes (used by catalog widgets on home) ─────────── */

/* Clickable table rows (FUB feed, etc.) */
.feed-row { cursor: pointer; transition: background .15s, box-shadow .15s; }
.feed-row:hover { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.feed-row:hover td { color: var(--text-1); }

/* Status pills */
.pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.pill-needs     { color: var(--amber); background: rgba(251,191,36,.12); }
.pill-approved  { color: var(--green); background: rgba(74,222,128,.12); }
.pill-scheduled { color: var(--blue); background: rgba(96,165,250,.12); }
.pill-posted    { color: var(--text-3); background: var(--bg-input); }
.pill-failed    { color: var(--red); background: rgba(248,113,113,.14); }

/* Widget header action link (small button in widget header) */
.widget-header-action {
  font-size: 11px; font-weight: 700; color: var(--text-3); text-decoration: none;
  padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-input); white-space: nowrap; transition: color .15s, border-color .15s;
}
.widget-header-action:hover { color: var(--text-1); border-color: var(--text-2); }

/* ── Animations ──────────────────────────────────────────────────────────── */

@keyframes pulse      { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes pulse-text { 0%,100%{opacity:1} 50%{opacity:0.7} }
@keyframes spin       { to{transform:rotate(360deg)} }

/* ── Mobile ──────────────────────────────────────────────────────────────── */

/* ── Responsive grid (tablet + phone): let the widget grid shrink below its
   desktop min-width so the columns can collapse. gridstack sets the actual
   2-column / 1-column widths in JS (grid-system.js); this just removes the
   fixed-width floors that would otherwise force horizontal scrolling. ── */
@media (max-width: 1024px) {
  .grid-stack { min-width: 0; }
  .grid-stack-item[gs-id="fub-totals"]  > .grid-stack-item-content > .widget,
  .grid-stack-item[gs-id="fub-sources"] > .grid-stack-item-content > .widget,
  .grid-stack-item[gs-id="fub-calls"]   > .grid-stack-item-content > .widget { min-width: 0; }
}

@media (max-width: 768px) {
  /* Content never shifts on mobile — sidebar overlays it */
  .page-wrap { margin-left: var(--sidebar-w-collapsed) !important; }

  /* When expanded on mobile, the sidebar floats over the content */
  body.nav-mobile-open .sidebar { width: var(--sidebar-w); box-shadow: var(--shadow-lg); }

  .sidebar-overlay { display: none; }
  .sidebar-overlay.open { display: block; }

  main { padding: 14px; }

  /* ── Layer 1 mobile polish (content only — no gridstack layout changes) ── */

  /* Page header + its action buttons wrap instead of overflowing off-screen */
  .page-head { flex-wrap: wrap; row-gap: 10px; }
  .page-head-actions { flex-wrap: wrap; }

  /* Two-column form rows (Create Content, detail forms) stack so fields aren't cramped */
  .form-2col { grid-template-columns: 1fr; }

  /* Modals use more of the small screen + a bit less padding */
  .smodal { width: 100%; max-height: 92vh; }
  .smodal-body { padding: 16px 16px 20px; }
  .modal { max-width: 100%; }
  .cw-modal { width: 100%; max-height: 92vh; }

  /* Thumb-friendly tap targets on the main action buttons (not tiny in-table btns) */
  .sbtn, .cc-btn, .chan-btn, .cc-btn-primary { min-height: 40px; }

  /* Slightly smaller in-widget table text so more fits before sideways scroll */
  .widget-table { font-size: calc(12px * var(--w-fs, 1)); }
}

/* ── Per-widget settings: gear button + popover ──────────────────────────── */

.widget-gear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.widget-gear:hover { color: var(--text-1); background: var(--bg-hover); }
.widget-gear svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Shared popover — appended to <body>, positioned by widget-settings.js */
.widget-settings-pop {
  position: fixed;
  z-index: 300;
  width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 14px;
  display: none;
}
.widget-settings-pop.open { display: block; }
.wsp-head {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-3); margin-bottom: 12px;
}
.wsp-label {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  margin: 14px 0 6px;
}
.wsp-fs, .wsp-theme { display: flex; gap: 4px; }
.wsp-fs button, .wsp-theme button {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 11px; font-weight: 600;
  padding: 6px 4px; border-radius: 7px;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wsp-fs button:hover, .wsp-theme button:hover { color: var(--text-1); }
.wsp-fs button.active, .wsp-theme button.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.wsp-color-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.wsp-color-row + .wsp-color-row { margin-top: 8px; }
.wsp-color-row span { font-size: 12px; color: var(--text-2); }
.wsp-color-row input[type="color"] {
  width: 40px; height: 24px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: none; cursor: pointer;
}
.wsp-reset {
  width: 100%; margin-top: 14px;
  background: none; border: 1px solid var(--border);
  color: var(--text-3); font-size: 11px; font-weight: 600;
  padding: 7px; border-radius: 7px; cursor: pointer;
  font-family: inherit; transition: color 0.15s, border-color 0.15s;
}
.wsp-reset:hover { color: var(--red); border-color: var(--red); }