/* MOSAIC IPE — Theme CSS
   Extracted from design-12.html blueprint theme.
   White-label ready: swap this file to change the look. */

[x-cloak] { display: none !important; }

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg-deep: #0A1628;
  --bg-panel: #0E1E36;
  --grid-line: rgba(126, 200, 227, 0.08);
  --primary: #7EC8E3;
  --primary-dim: rgba(126, 200, 227, 0.15);
  --primary-faint: rgba(126, 200, 227, 0.08);
  --text: #D4E8F1;
  --text-secondary: #9BB6CE;
  --text-tertiary: #4A6A80;
  --accent: #FF6B35;
  --accent-dim: rgba(255, 107, 53, 0.12);
  --success: #45B69C;
  --warning: #F4C95D;
  --danger: #E05252;
  --sidebar-bg: #071020;
  --border: rgba(126, 200, 227, 0.3);
  --border-solid: rgba(126, 200, 227, 0.4);
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Outfit', sans-serif;
}

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

body {
  font-family: var(--font-body);
  background-color: var(--bg-deep);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0px, var(--grid-line) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, var(--grid-line) 0px, var(--grid-line) 1px, transparent 1px, transparent 40px);
  background-size: 40px 40px;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--accent); }

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 220px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.sidebar-header {
  padding: 24px 20px 16px;
  border-bottom: 1px dashed var(--border);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-logo {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: block;
}

.sidebar-title {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 3px;
}

.sidebar-title::before {
  content: '+  ';
  color: var(--primary);
  font-weight: 400;
}

.sidebar-subtitle {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 3px;
  margin-top: 6px;
  text-transform: uppercase;
}

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

.nav-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  user-select: none;
  text-decoration: none;
}

.nav-item:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

.nav-item.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-dim);
}

.nav-prefix {
  color: var(--text-tertiary);
  margin-right: 10px;
  font-size: 11px;
  min-width: 24px;
}

.nav-item.active .nav-prefix {
  color: var(--accent);
}

/* Sidebar nested sections */
.nav-separator {
  padding: 8px 20px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 2px;
  /* This was already a dashed rule, but --primary-faint is cyan at 8% opacity,
     which is invisible on the sidebar — so in practice there was no line above
     "Sections" and "System". --border is the same cyan at 30%, which reads as a
     hairline while staying in this theme's dashed idiom. */
  border-top: 1px dashed var(--border);
  margin-top: 10px;
}

.nav-group-label {
  /* flex since it holds the expand icon plus the label text -- matching the
     light theme, whose +/- boxes replaced this theme's triangles. */
  display: flex;
  align-items: center;
  padding: 8px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  /* Uppercased like the light theme's group labels, and like this theme's own
     .nav-separator headings right above them — the group name was the only
     mixed-case label in the sidebar. */
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.nav-group-label:hover {
  color: var(--text-secondary);
}

.nav-group-children .nav-item {
  padding-left: 34px;
  font-size: 12px;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.8;
  letter-spacing: 1px;
}

/* ── Main Content ──────────────────────────────────────────── */
.main {
  margin-left: 220px;
  height: 100vh;
  overflow-y: auto;
  position: relative;
}

/* ── Collapsible sidebar (hide / show) ───────────────────────── */
.sidebar,
.main { transition: transform 0.2s ease, margin-left 0.2s ease; }
html.sidebar-collapsed .sidebar { transform: translateX(-100%); }
html.sidebar-collapsed .main { margin-left: 0; }
.sidebar-toggle {
  position: fixed; top: 8px; left: 186px; z-index: 101;
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--sidebar-bg); color: var(--primary);
  border: 1px solid var(--border); border-radius: 3px;
  font-family: var(--font-mono); font-size: 15px; line-height: 1;
  cursor: pointer;
  transition: left 0.2s ease, color 0.15s, border-color 0.15s;
}
.sidebar-toggle:hover { color: var(--text); border-color: var(--primary); }
html.sidebar-collapsed .sidebar-toggle { left: 8px; }

.ruler {
  height: 24px;
  border-bottom: 1px solid var(--border);
  background: var(--sidebar-bg);
  display: flex;
  align-items: flex-end;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.ruler-tick {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-tertiary);
  min-width: 80px;
  border-left: 1px solid var(--border);
  padding-left: 4px;
  padding-bottom: 2px;
}

.content {
  padding: 32px;
}

/* ── Section Headers ───────────────────────────────────────── */
.section-header { margin-bottom: 28px; }

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.section-title {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 3px;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--primary-dim);
}

/* ── Blueprint Panel ───────────────────────────────────────── */
.bp-panel {
  border: 1px dashed var(--border);
  background: rgba(14, 30, 54, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(126, 200, 227, 0.1), 0 2px 12px rgba(0, 0, 0, 0.2);
  padding: 20px;
  position: relative;
  transition: border-color 0.2s ease, border-style 0.2s ease;
}

.bp-panel:hover {
  border-color: var(--accent);
  border-style: solid;
}

.bp-panel::before, .bp-panel::after {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  position: absolute;
}

.bp-panel::before { content: attr(data-corner-tl); top: -8px; left: 6px; }
.bp-panel::after { content: attr(data-corner-br); bottom: -8px; right: 6px; }

/* Corner brackets */
.corner-panel { position: relative; }

.corner-panel::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 10px; height: 10px;
  border-top: 2px solid var(--primary);
  border-left: 2px solid var(--primary);
  pointer-events: none;
}

.corner-panel::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border-bottom: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
  pointer-events: none;
}

/* ── Panel Title ───────────────────────────────────────────── */
.panel-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

/* ── Grid Layouts ──────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
.four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.six-col { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 28px; }

/* ── Data Tables ───────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--primary); text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 10px; text-align: left;
  border-bottom: 1px dashed var(--primary-faint);
  background: rgba(126,200,227,0.03);
}
.data-table tbody td {
  padding: 8px 10px; font-size: 12px; color: var(--text-secondary);
  border-bottom: 1px dashed rgba(126,200,227,0.06);
}
.data-table tbody tr { transition: background 0.1s; }
.data-table tbody tr:hover { background: rgba(126,200,227,0.04); }

/* ── Case Tabs ─────────────────────────────────────────────── */
.case-tabs {
  display: flex; gap: 0; margin-bottom: 16px;
  border-bottom: 1px dashed var(--border);
}
.case-tab {
  padding: 8px 18px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px dashed transparent;
  border-bottom: none;
  margin-bottom: -1px;
  transition: color 0.15s, background 0.15s;
}
.case-tab:hover { color: var(--text-secondary); background: rgba(126,200,227,0.03); }
.case-tab.active {
  color: var(--primary);
  border-color: var(--border);
  background: rgba(14,30,54,0.6);
  border-bottom: 1px solid var(--bg);
}

/* ── User Links (clickable for DM) ─────────────────────────── */
[data-dm-user] { cursor: pointer; }

/* ── Widget Bucket Button ──────────────────────────────────── */
.widget-bucket-btn {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  cursor: pointer; color: rgba(126,200,227,0.2);
  transition: color 0.15s;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
}
.widget-bucket-btn:hover { color: var(--primary); }

/* ── KPI Blocks ────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 28px; }

.kpi-block {
  border: 1px dashed var(--border);
  padding: 18px 14px;
  text-align: center;
  position: relative;
  background: rgba(14, 30, 54, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(126, 200, 227, 0.1), 0 2px 12px rgba(0, 0, 0, 0.2);
}

.kpi-block:hover { border-color: var(--accent); border-style: solid; }

.kpi-block::before { content: '+'; position: absolute; top: 2px; left: 4px; font-family: var(--font-mono); font-size: 8px; color: var(--text-tertiary); }
.kpi-block::after { content: '+'; position: absolute; bottom: 2px; right: 4px; font-family: var(--font-mono); font-size: 8px; color: var(--text-tertiary); }

.kpi-value { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: var(--primary); line-height: 1; }
.kpi-label { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 8px; }
.kpi-delta { font-family: var(--font-mono); font-size: 12px; margin-top: 6px; }
.kpi-delta.up { color: var(--accent); }
.kpi-delta.down { color: var(--success); }

/* ── Stat Boxes ────────────────────────────────────────────── */
.stats-row { display: flex; gap: 16px; margin-bottom: 24px; }

.stat-box {
  border: 1px dashed var(--border);
  padding: 12px 20px;
  text-align: center;
  flex: 1;
  background: rgba(14, 30, 54, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(126, 200, 227, 0.1), 0 2px 12px rgba(0, 0, 0, 0.2);
}

.stat-value { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* ── Tables ────────────────────────────────────────────────── */
.bp-table { width: 100%; border-collapse: collapse; font-size: 13px; background: rgba(14, 30, 54, 0.4); }
.bp-table th { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); background: rgba(126, 200, 227, 0.06); }
.bp-table td { padding: 8px 10px; border-bottom: 1px dashed var(--primary-faint); color: var(--text); font-size: 13px; vertical-align: middle; }
.bp-table tr:hover td { background: var(--primary-faint); }

/* ── Badges ────────────────────────────────────────────────── */
.badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 2px; letter-spacing: 1px; text-transform: uppercase; }
.badge-critical { color: var(--accent); border: 1px solid var(--accent); background: rgba(255,107,53,0.1); }
.badge-high { color: var(--warning); border: 1px solid var(--warning); background: rgba(244,201,93,0.1); }
.badge-medium { color: var(--primary); border: 1px solid var(--primary); background: var(--primary-faint); }
.badge-low { color: var(--success); border: 1px solid var(--success); background: rgba(69,182,156,0.1); }
.badge-info { color: var(--primary); border: 1px solid var(--primary); background: var(--primary-faint); }

/* ── Progress Bars ─────────────────────────────────────────── */
.bar-track { height: 6px; border: 1px dashed var(--border); position: relative; margin-top: 4px; background: transparent; }
.bar-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--primary); transition: width 0.6s ease; }
.bar-fill.orange { background: var(--accent); }
.bar-fill.yellow { background: var(--warning); }
.bar-fill.green { background: var(--success); }

/* ── Status Indicators ─────────────────────────────────────── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.status-dot.active { background: var(--success); animation: pulse-dot 2s infinite; }
.status-dot.warning { background: var(--warning); }
.status-dot.error { background: var(--accent); }
.status-dot.offline { background: var(--text-tertiary); }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(69,182,156,0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(69,182,156,0); }
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }

.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  background: rgba(14, 30, 54, 0.8);
  border: 1px dashed var(--border);
  outline: none;
  transition: border-color 0.2s, border-style 0.2s;
}

.form-input:focus {
  border-color: var(--primary);
  border-style: solid;
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

textarea.form-input {
  resize: vertical;
  min-height: 60px;
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%237EC8E3' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
  transition: border-color 0.15s;
}
select.form-input:hover { border-color: var(--primary); }

select.form-input option {
  background: #0A1628;
  color: var(--text);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
}
select.form-input option:hover,
select.form-input option:focus {
  background: rgba(126,200,227,0.12);
}
select.form-input option:checked {
  background: rgba(126,200,227,0.18);
  color: var(--primary);
}
@-moz-document url-prefix() {
  select.form-input { color-scheme: dark; }
}
select.form-input { color-scheme: dark; }

/* ── Styled Select Replacement ────────────────────────────── */
.styled-select { position: relative; display: block; width: 100%; z-index: 10; }
.styled-select-display {
  border: 1px dashed var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-family: var(--font-mono);
  padding: 4px 28px 4px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: border-color 0.15s;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.styled-select-display:hover { border-color: var(--primary); }
.styled-select-display::after {
  content: '';
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--primary);
}
.styled-select-display.placeholder { color: var(--text-tertiary); }
.styled-select-panel {
  position: fixed; z-index: 9999;
  max-height: 200px; overflow-y: auto;
  background: #0A1628;
  border: 1px dashed var(--primary-faint);
  border-top: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.styled-select-item {
  padding: 7px 10px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-secondary);
  transition: background 0.1s, color 0.1s;
  border-bottom: 1px dashed rgba(126,200,227,0.04);
  white-space: nowrap;
}
.styled-select-item:hover { background: rgba(126,200,227,0.08); color: var(--text); }
.styled-select-item.active { background: rgba(126,200,227,0.12); color: var(--primary); }

/* ── Custom Dropdown ───────────────────────────────────────── */
.custom-dropdown {
  position: relative;
  width: 100%;
}

.custom-dropdown-trigger {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  background: rgba(14, 30, 54, 0.8);
  border: 1px dashed var(--border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.2s, border-style 0.2s;
  user-select: none;
}

.custom-dropdown-trigger:hover,
.custom-dropdown.open .custom-dropdown-trigger {
  border-color: var(--primary);
  border-style: solid;
}

.custom-dropdown-arrow {
  font-size: 8px;
  color: var(--text-tertiary);
  transition: transform 0.2s;
}

.custom-dropdown.open .custom-dropdown-arrow {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  z-index: 200;
  max-height: 200px;
  overflow-y: auto;
}

.custom-dropdown-item {
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 1px dashed var(--primary-faint);
}

.custom-dropdown-item:last-child {
  border-bottom: none;
}

.custom-dropdown-item:hover {
  background: var(--primary-faint);
  color: var(--text);
}

.custom-dropdown-item.selected {
  color: var(--primary);
  background: var(--primary-faint);
}

/* ── Toggle Switch ─────────────────────────────────────────── */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.toggle input {
  display: none;
}

.toggle-track {
  width: 36px;
  height: 18px;
  border: 1px dashed var(--border);
  background: rgba(14, 30, 54, 0.8);
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}

.toggle-knob {
  width: 12px;
  height: 12px;
  background: var(--text-tertiary);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all 0.2s;
}

.toggle input:checked ~ .toggle-track {
  border-color: var(--primary);
  border-style: solid;
  background: var(--primary-faint);
}

.toggle input:checked ~ .toggle-track .toggle-knob {
  left: 20px;
  background: var(--primary);
}

.toggle-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

.toggle input:checked ~ .toggle-label {
  color: var(--primary);
}

/* ── Custom Checkbox ───────────────────────────────────────── */
.custom-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.custom-check input {
  display: none;
}

.custom-check-box {
  width: 16px;
  height: 16px;
  border: 1px dashed var(--border);
  background: rgba(14, 30, 54, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.custom-check-box::after {
  content: '';
  width: 8px;
  height: 8px;
  background: transparent;
  transition: background 0.2s;
}

.custom-check input:checked ~ .custom-check-box {
  border-color: var(--primary);
  border-style: solid;
}

.custom-check input:checked ~ .custom-check-box::after {
  background: var(--primary);
}

.custom-check-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

.custom-check input:checked ~ .custom-check-label {
  color: var(--text);
}

/* ── Segmented Control (Radio replacement) ─────────────────── */
.segmented {
  display: inline-flex;
  border: 1px dashed var(--border);
}

.segmented-option {
  display: block;
}

.segmented-option input {
  display: none;
}

.segmented-btn {
  padding: 8px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px dashed var(--border);
  user-select: none;
}

.segmented-option:last-child .segmented-btn {
  border-right: none;
}

.segmented-option input:checked + .segmented-btn {
  background: var(--primary-faint);
  color: var(--primary);
  border-color: var(--primary);
}

.segmented-btn:hover {
  background: var(--primary-faint);
  color: var(--text-secondary);
}

/* ── Data Preview ──────────────────────────────────────────── */
.data-preview {
  border: 1px dashed var(--border);
  background: rgba(7, 16, 32, 0.6);
  padding: 12px;
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-all;
}

.data-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px dashed var(--primary-faint);
  background: rgba(126, 200, 227, 0.04);
  transition: border-color 0.2s;
}

.data-preview-header:hover {
  border-color: var(--primary);
  border-style: solid;
}

.path-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px dashed var(--primary-faint);
  background: rgba(7, 16, 32, 0.4);
  margin-top: 8px;
}

.path-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  border-bottom: 1px dashed var(--primary-faint);
  transition: background 0.15s;
}

.path-item:hover { background: var(--primary-faint); }
.path-item:last-child { border-bottom: none; }

.path-name { flex: 1; color: var(--text); }
.path-type { color: var(--text-tertiary); font-size: 10px; min-width: 60px; }
.path-sample { color: var(--text-tertiary); font-size: 10px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.field-preview {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 2px 6px;
  background: rgba(14, 30, 54, 0.6);
  border: 1px dashed var(--primary-faint);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  color: var(--bg-deep);
  background: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover {
  background: transparent;
  color: var(--primary);
}

.btn-accent {
  color: var(--bg-deep);
  background: var(--accent);
  border-color: var(--accent);
}

.btn-accent:hover {
  background: transparent;
  color: var(--accent);
}

.btn-outline {
  color: var(--primary);
  background: transparent;
  border-color: var(--border);
  border-style: dashed;
}

.btn-outline:hover {
  border-color: var(--primary);
  border-style: solid;
  background: var(--primary-faint);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 1px;
}

/* ── Alerts / Messages ─────────────────────────────────────── */
.alert {
  padding: 14px 18px;
  border: 1px dashed;
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: 20px;
}

.alert-error { color: var(--danger); border-color: var(--danger); background: rgba(224,82,82,0.08); }
.alert-success { color: var(--success); border-color: var(--success); background: rgba(69,182,156,0.08); }
.alert-warning { color: var(--warning); border-color: var(--warning); background: rgba(244,201,93,0.08); }
.alert-info { color: var(--primary); border-color: var(--primary); background: var(--primary-faint); }

/* ── Utility Classes ───────────────────────────────────────── */
.mono { font-family: var(--font-mono); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.text-muted { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-cyan { color: var(--primary); }
.text-orange { color: var(--accent); }
.text-yellow { color: var(--warning); }
.text-green { color: var(--success); }
.text-red { color: var(--danger); }
.text-white { color: var(--text); }
.fw-600 { font-weight: 600; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }

/* ── Confirm Modal ─────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(7, 16, 32, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box-wrap {
  position: relative;
  max-width: 90vw;
  display: inline-block;
}
.modal-box-wrap::before {
  content: '';
  position: absolute; z-index: 2; pointer-events: none;
  top: -1px; left: -1px;
  width: 12px; height: 12px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}
.modal-box-wrap::after {
  content: '';
  position: absolute; z-index: 2; pointer-events: none;
  bottom: -1px; right: -1px;
  width: 12px; height: 12px;
  border-bottom: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}

.modal-box {
  width: 400px;
  max-width: 90vw;
  border: 1px dashed var(--border);
  background: var(--bg-panel);
  padding: 28px;
  overflow-y: auto;
  max-height: 85vh;
  word-break: break-word;
}

.modal-title {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.modal-message {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

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

/* ── HTMX Transitions ─────────────────────────────────────── */
#main-content {
  transition: opacity 0.2s ease;
}

#main-content.htmx-swapping {
  opacity: 0;
}

#main-content.htmx-settling {
  opacity: 1;
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: block;
}

.htmx-request.htmx-indicator {
  display: block;
}

/* ── Login Page ────────────────────────────────────────────── */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin-left: 0;
}

.login-box {
  width: 380px;
  border: 1px dashed var(--border);
  background: rgba(14, 30, 54, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 40px;
  position: relative;
}

.login-box::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--primary);
  border-left: 2px solid var(--primary);
}

.login-box::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 14px; height: 14px;
  border-bottom: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
}

.login-logo {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
}

.login-title {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 8px;
}

.login-subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 32px;
}

/* ── Error Page ────────────────────────────────────────────── */
.error-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin-left: 0;
}

.error-box {
  text-align: center;
}

.error-code {
  font-family: var(--font-mono);
  font-size: 80px;
  font-weight: 700;
  color: var(--primary-dim);
  line-height: 1;
}

.error-message {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-secondary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 12px;
}

.error-link {
  margin-top: 24px;
}

/* ── Tabulator Theme Override ─────────────────────────────── */
.tabulator {
  background-color: transparent !important;
  border: 1px dashed var(--border) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--text) !important;
}

.tabulator .tabulator-header {
  background-color: rgba(126, 200, 227, 0.06) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}

.tabulator .tabulator-header .tabulator-col {
  background-color: transparent !important;
  border-right: 1px dashed var(--primary-faint) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
  background-color: var(--primary-faint) !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 8px 10px !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
  background: rgba(14, 30, 54, 0.8) !important;
  border: 1px dashed var(--border) !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  outline: none !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus {
  border-color: var(--primary) !important;
  border-style: solid !important;
}

.tabulator .tabulator-tableholder {
  background-color: transparent !important;
}

.tabulator .tabulator-row {
  background-color: transparent !important;
  border-bottom: 1px dashed var(--primary-faint) !important;
  color: var(--text) !important;
  min-height: 40px !important;
  cursor: pointer !important;
}

.tabulator .tabulator-row:hover {
  background-color: var(--primary-faint) !important;
}

.tabulator .tabulator-row .tabulator-cell {
  border-right: 1px dashed var(--primary-faint) !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.tabulator .tabulator-row.tabulator-row-even {
  background-color: rgba(14, 30, 54, 0.3) !important;
}

.tabulator .tabulator-footer {
  background-color: rgba(126, 200, 227, 0.04) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  padding: 6px 10px !important;
}

.tabulator .tabulator-footer .tabulator-page {
  background: transparent !important;
  border: 1px dashed var(--border) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
  cursor: pointer !important;
}

.tabulator .tabulator-footer .tabulator-page:hover {
  background: var(--primary-faint) !important;
  border-color: var(--primary) !important;
  color: var(--text) !important;
}

.tabulator .tabulator-footer .tabulator-page.active {
  background: var(--primary-faint) !important;
  border-color: var(--primary) !important;
  border-style: solid !important;
  color: var(--primary) !important;
}

.tabulator .tabulator-footer .tabulator-page[disabled] {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

.tabulator .tabulator-footer .tabulator-paginator label,
.tabulator .tabulator-footer .tabulator-page-counter {
  color: var(--text-tertiary) !important;
  font-family: var(--font-mono) !important;
}

.tabulator .tabulator-col-resize-handle {
  width: 4px !important;
}

.tabulator .tabulator-row .tabulator-responsive-collapse {
  border: none !important;
}

.tabulator .tabulator-alert {
  background: rgba(14, 30, 54, 0.9) !important;
  color: var(--text-secondary) !important;
}

/* Loading skeleton */
@keyframes skel-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.loading-skeleton { padding: 0; }
.skel-header {
  height: 18px; width: 200px; margin-bottom: 20px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(126,200,227,0.04) 25%, rgba(126,200,227,0.1) 50%, rgba(126,200,227,0.04) 75%);
  background-size: 800px 100%;
  animation: skel-shimmer 1.5s infinite linear;
}
.skel-row { display: flex; gap: 16px; margin-bottom: 16px; }
.skel-block {
  height: 90px; flex: 1; border-radius: 2px;
  border: 1px dashed rgba(126,200,227,0.08);
  background: linear-gradient(90deg, rgba(126,200,227,0.03) 25%, rgba(126,200,227,0.07) 50%, rgba(126,200,227,0.03) 75%);
  background-size: 800px 100%;
  animation: skel-shimmer 1.5s infinite linear;
}
.skel-block.skel-wide { height: 160px; flex: none; width: 100%; }
.skel-msg {
  text-align: center; padding: 16px 0; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 2px; color: rgba(126,200,227,0.3);
  text-transform: uppercase;
  animation: skel-shimmer 1.5s infinite linear;
  background: linear-gradient(90deg, rgba(126,200,227,0.15) 25%, rgba(126,200,227,0.4) 50%, rgba(126,200,227,0.15) 75%);
  background-size: 800px 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Clickable username (user_link filter) — dark accent */
.user-link { cursor: pointer; color: #7EC8E3; border-bottom: 1px dashed rgba(126,200,227,0.3); }
.user-link:hover { border-bottom-color: #7EC8E3; }

/* Theme switch in the top ruler (right side, after the active-bucket tick) */
.ruler-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  background: none; border: 1px dashed transparent;
  color: var(--text-tertiary); cursor: pointer; padding: 0; line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}
.ruler-theme-btn:hover { color: var(--primary); border-color: var(--primary-faint); }
.ruler-theme-btn .material-symbols-outlined { font-size: 14px; }
.ruler-theme-btn.is-busy { opacity: 0.5; pointer-events: none; }

/* Filter toggle in the records header (blueprint idiom: dashed, square) */
.filter-toggle-btn { display: inline-flex; align-items: center; gap: 6px; }
.filter-toggle-btn .material-symbols-outlined { font-size: 14px; }
.filter-toggle-btn.is-open { border-color: var(--primary); color: var(--primary); background: var(--primary-faint); }
.filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--primary); color: var(--bg);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; line-height: 1;
}

/* ── Click-to-change pills + inline editing (record detail) ─────
   Blueprint idiom: dashed borders, mono type, square corners. */
.pill-picker { position: relative; display: inline-flex; align-items: center; }
.pill-clickable { cursor: pointer; user-select: none; }
.pill-clickable:hover { border-style: solid; }
.pill-caret { font-size: 13px; vertical-align: middle; margin-left: 2px; opacity: 0.7; }
.pill-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  min-width: 150px; padding: 4px;
  background: var(--sidebar-bg); border: 1px dashed var(--primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.pill-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 5px 9px; background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pill-menu-item:hover { background: var(--primary-faint); color: var(--primary); }
.pill-menu-item.active { color: var(--primary); }
.pill-menu-item.active::before { content: '> '; }
.pill-spinner {
  width: 11px; height: 11px; margin-left: 5px; flex-shrink: 0;
  border: 1px solid var(--primary-faint); border-top-color: var(--primary);
  border-radius: 50%; animation: pill-spin 0.7s linear infinite; display: none;
}
.htmx-request .pill-spinner, .pill-spinner.htmx-request { display: inline-block; }
@keyframes pill-spin { to { transform: rotate(360deg); } }

.inline-edit { position: relative; }
.inline-edit-view { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.inline-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px dashed transparent; color: var(--text-tertiary);
  cursor: pointer; padding: 1px 3px; flex-shrink: 0;
}
.inline-edit-btn:hover { color: var(--primary); border-color: var(--primary-faint); }
.inline-edit-btn .material-symbols-outlined { font-size: 14px; }
.inline-edit-form { display: flex; align-items: center; gap: 6px; }
.inline-edit-form .form-input { flex: 1; min-width: 0; }
.inline-edit-cancel {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-tertiary); cursor: pointer;
  padding: 2px; flex-shrink: 0;
}
.inline-edit-cancel:hover { color: var(--accent); }
.inline-edit-cancel .material-symbols-outlined { font-size: 15px; }

/* ── Comment timeline (record detail) ──────────────────────────
   Same shape as the light theme's timeline, in the blueprint idiom. */
.tl-compose {
  display: flex; gap: 10px; align-items: flex-start;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px dashed var(--primary-faint);
}
.tl-feed { display: flex; flex-direction: column; gap: 12px; }
.tl-item { display: flex; gap: 10px; align-items: flex-start; }
.tl-content {
  flex: 1; min-width: 0;
  border: 1px dashed var(--primary-faint); border-left: 2px solid var(--primary);
  background: rgba(14, 30, 54, 0.5); padding: 8px 10px;
}
.tl-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.tl-action {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  color: var(--text-tertiary);
}
.tl-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.tl-text {
  font-size: 13px; color: var(--text-secondary); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.tl-avatar {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  border: 1px dashed var(--primary); color: var(--primary);
  background: rgba(126, 200, 227, 0.06);
}
.tl-av-0 { border-color: var(--primary); color: var(--primary); }
.tl-av-1 { border-color: var(--accent); color: var(--accent); }
.tl-av-2 { border-color: var(--success); color: var(--success); }
.tl-av-3 { border-color: var(--warning); color: var(--warning); }
.tl-av-4 { border-color: #A78BFA; color: #A78BFA; }

/* ── Data-source picker fields ─────────────────────────────────
   Each control gets a labelled grid cell. Not just cosmetic: initStyledSelects
   replaces every <select> with a .styled-select wrapper at width:100%, so a
   select sharing a plain flex row with an input consumed the whole row and
   squeezed its neighbour to ~30px. A grid cell bounds the wrapper. */
.ds-row { display: grid; gap: 10px 12px; margin-bottom: 12px; align-items: start; }
.ds-field { min-width: 0; }
.ds-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-secondary); margin-bottom: 4px;
}
.ds-hint { font-family: var(--font-body); font-size: 11px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.45; }
.ds-field .form-input { width: 100%; }
.ds-field .styled-select { width: 100%; }

/* ── Section Inputs (viewer) — blueprint idiom ──────────────────── */
.si-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; }
.si-field { min-width: 0; }
.si-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-secondary); margin-bottom: 4px;
}
.si-field .form-input, .si-field .styled-select { width: 100%; }
.si-error { font-family: var(--font-mono); font-size: 10px; color: var(--accent); margin-top: 4px; }
.si-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--primary-faint);
}
.si-dirty-note { font-family: var(--font-mono); font-size: 10px; color: var(--warning); margin-right: auto; }
.si-wait {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 60px; padding: 14px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); text-align: center;
}
.si-wait .material-symbols-outlined { font-size: 14px; }

/* Searchable combo for the `dropdown` and `multiselect` field types — same
   role as .custom-dropdown-menu/.styled-select-panel elsewhere in this
   theme, hand-built because neither of those has a search box, themed to
   match them (dashed border, mono type, square corners, same floating-panel
   shadow as .pill-menu). Positioned absolutely under its own wrapper — the
   Inputs panel has no overflow:hidden ancestor to escape, unlike
   .styled-select-panel's fixed positioning, which exists only for contexts
   that do. `multiselect` is the same component with a row of removable tags
   (`.si-combo-tags`) above the search box instead of a single hidden value. */
/* `#section-inputs` needs an explicit z-index of its own, not just the
   z-index:50 on .si-combo-panel below: .bp-panel's own `backdrop-filter`
   makes every .bp-panel (this one included) establish its own stacking
   context, which traps a z-index'd descendant inside it — it cannot
   outrank a later sibling .bp-panel (a widget card) that has no explicit
   z-index of its own, because unpositioned/non-isolated siblings paint
   before same-level positioned ones regardless of DOM order. Confirmed live:
   without this, a combo panel tall enough to overflow past the Inputs box's
   own bottom edge (e.g. Vendors' option list) is visually and functionally
   covered by the widget row underneath — clicks land on the widget, not the
   option. */
#section-inputs { z-index: 5; }
.si-combo { position: relative; }
.si-combo-input { width: 100%; }
.si-combo-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  max-height: 200px; overflow-y: auto; display: none;
  background: var(--bg-deep); border: 1px dashed var(--primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); padding: 4px;
}
.si-combo-item {
  padding: 7px 10px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  transition: background 0.1s, color 0.1s;
}
.si-combo-item:hover, .si-combo-item.active { background: var(--primary-faint); color: var(--primary); }
.si-combo-empty { padding: 7px 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }

.si-combo-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.si-combo-tags:not(:empty) { margin-bottom: 6px; }
.si-combo-tag {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 3px 6px 3px 9px; border: 1px dashed var(--primary);
  background: var(--primary-faint); color: var(--primary);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  overflow-wrap: anywhere;
}
.si-combo-tag-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; padding: 0; margin: 0; flex-shrink: 0;
  background: none; border: none; border-radius: 50%;
  color: inherit; opacity: 0.6; cursor: pointer; font-size: 13px; line-height: 1;
}
.si-combo-tag-x:hover { opacity: 1; background: var(--primary-dim); }

/* ── Section Inputs authoring panel (section editor) ────────────
   .lb-row is the display-layout builder's dashed blueprint row card — that
   builder has only ever used it inline (see section_form.html's Display
   Layout rows), so this is its first class form. .ds-row/.ds-field/.ds-label/
   .ds-hint already exist (the data-source picker's one-control-per-grid-cell
   layout); this panel reuses them rather than inventing a parallel one. */
.lb-row {
  border: 1px dashed var(--primary-faint); border-left: 3px solid var(--primary);
  padding: 12px; background: rgba(14, 30, 54, 0.3);
}
.sib-token {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--accent); background: var(--accent-dim);
  border: 1px dashed var(--accent); padding: 2px 8px;
}

/* ── Select height inside labelled field grids ───────────────────────
   initStyledSelects swaps every <select class="form-input"> for a
   .styled-select whose display box is padded 4px/12px, while a sibling
   .form-input text box is 10px/13px. In a grid of fields that puts a list or
   type <select> visibly shorter than the text and dropdown fields beside it
   — reported on both the Section Inputs viewer box and the section editor.
   Match them here rather than changing .styled-select-display globally, which
   every other select in this theme is already sized against. */
.si-field .styled-select-display,
.ds-field .styled-select-display {
  padding: 10px 28px 10px 14px;
  font-size: 13px;
}

/* ── Section Inputs: the "specific lists" checkbox box ────────────────
   Replaced a <select multiple> (see the comment in section_form.html): a plain
   click there always selected exactly one option, so an author could never get
   back to "none", which is what offers every list. Scrolls, because an org can
   have many lists. */
.sib-checks {
  max-height: 168px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px;
  border: 1px dashed var(--primary-faint);
  background: var(--bg-deep);
}
.sib-checks .custom-check { margin: 0; }

/* The filter row above .sib-checks: an org with many lists is unusable as a
   plain scroll, so the author narrows by name. "N selected" and Clear sit here
   because a selection can be scrolled out of sight or filtered away. */
.sib-checks-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sib-filter { flex: 1; min-width: 0; }
.sib-count {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-tertiary); white-space: nowrap;
}
.sib-clear {
  background: none; border: none; padding: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--accent);
}
.sib-clear:hover { text-decoration: underline; }

/* Sidebar group expand control: the same add_box / indeterminate_check_box
   pair the light theme uses, so the two sidebars read the same way. Sized and
   coloured for this theme rather than ported. */
.nav-group-toggle {
  font-size: 15px; margin-right: 7px; flex-shrink: 0;
  color: var(--text-tertiary); transition: color 0.2s;
}
.nav-group-label:hover .nav-group-toggle { color: var(--primary); }
.nav-group-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Action result popup ──────────────────────────────────────────── */
.aq-box { width: 760px; max-width: 92vw; }
.aq-note { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.aq-empty { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); padding: 12px 0; }
.aq-table-wrap { max-height: 420px; overflow: auto; border: 1px dashed var(--border); }
.aq-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.aq-table th {
  position: sticky; top: 0; background: var(--bg-deep);
  text-align: left; padding: 7px 10px; color: var(--primary);
  border-bottom: 1px dashed var(--border); white-space: nowrap;
  text-transform: uppercase; letter-spacing: 1px;
}
.aq-table td { padding: 6px 10px; border-bottom: 1px dashed var(--primary-faint); vertical-align: top; white-space: pre-wrap; word-break: break-word; }
/* Table-shaped action results are now rendered by Tabulator (see base.html's
   _aqMountTable), not the static .aq-table markup above. No max-height or
   overflow here -- Tabulator's own .tabulator-tableholder scrolls internally
   (capped via the maxHeight option), and stacking an outer scroll container
   on top of that produces two nested scrollbars. */
.aq-tabulator { width: 100%; }
.aq-pre, .aq-code {
  max-height: 420px; overflow: auto; margin: 0; padding: 10px;
  background: var(--bg-deep); border: 1px dashed var(--border);
  font-family: var(--font-mono); font-size: 11px;
}
.aq-pre { white-space: pre-wrap; word-break: break-word; }
.aq-code { white-space: pre; }
.aq-lang { font-family: var(--font-mono); font-size: 9px; color: var(--text-tertiary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 2px; }
.aq-rich { max-height: 420px; overflow: auto; font-size: 12px; line-height: 1.6; }

/* Rendered markdown/HTML, wherever it lands: an action's Markdown result, the
   assistant's answers, and a bucket item saved from either. One class rather
   than a selector list, because each of those turned up separately with the
   same complaint — the container was styled, nothing inside it was, and a
   markdown table arrived with browser defaults. Mirrors .data-table. */
.rich-md > :first-child { margin-top: 0; }
.rich-md > :last-child { margin-bottom: 0; }
.rich-md h1, .rich-md h2, .rich-md h3, .rich-md h4 {
  font-family: var(--font-mono); font-weight: 600; color: var(--primary);
  text-transform: uppercase; letter-spacing: 1px; margin: 14px 0 6px;
}
.rich-md h1 { font-size: 13px; }
.rich-md h2 { font-size: 12px; }
.rich-md h3, .rich-md h4 { font-size: 11px; }
.rich-md p { margin: 0 0 8px; }
.rich-md ul, .rich-md ol { margin: 0 0 8px; padding-left: 18px; }
.rich-md li { margin: 2px 0; }
.rich-md a {
  color: var(--primary); text-decoration: none;
  border-bottom: 1px dashed rgba(126,200,227,0.4);
}
.rich-md strong { color: var(--text); font-weight: 600; }
.rich-md hr { border: 0; border-top: 1px dashed var(--primary-faint); margin: 12px 0; }
.rich-md blockquote {
  margin: 8px 0; padding: 2px 0 2px 10px;
  border-left: 2px solid var(--primary-faint); color: var(--text-tertiary);
}
.rich-md code {
  font-family: var(--font-mono); font-size: 11px;
  background: rgba(126,200,227,0.08); padding: 1px 4px;
  border: 1px dashed rgba(126,200,227,0.15);
}
.rich-md pre {
  background: rgba(7,16,32,0.6); padding: 10px; margin: 0 0 8px;
  border: 1px dashed rgba(126,200,227,0.15); overflow-x: auto;
}
.rich-md pre code { background: none; border: 0; padding: 0; }
/* A real table box, so columns line up and every table fills the panel to the
   same width. display:block would size each one to its own content instead.
   Both containers scroll on their own, so a wide whois table scrolls there
   rather than stretching the modal past the viewport. */
.rich-md table {
  width: 100%; border-collapse: collapse; margin: 0 0 10px;
}
.rich-md { overflow-x: auto; }
.rich-md th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--primary); text-transform: uppercase; letter-spacing: 1px;
  padding: 6px 8px; text-align: left; white-space: nowrap;
  border-bottom: 1px dashed var(--primary-faint);
  background: rgba(126,200,227,0.03);
}
.rich-md td {
  padding: 6px 8px; font-size: 11px; color: var(--text-secondary);
  border-bottom: 1px dashed rgba(126,200,227,0.06);
  vertical-align: top; word-break: break-word;
}
.rich-md tbody tr:hover { background: rgba(126,200,227,0.04); }
.aq-actions { margin-top: 12px; }