:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e3e6eb;
  --border-strong: #cbd1da;
  --text: #1d2330;
  --text-muted: #5a6473;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --success: #16a34a;
  --warning: #d97706;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
}

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

/* ---------- top nav ---------- */
.app-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.app-nav .brand {
  font-weight: 600;
  font-size: 16px;
  margin-right: 12px;
}
.app-nav a {
  color: var(--text);
  padding: 6px 10px;
  border-radius: var(--radius);
}
.app-nav a:hover { background: var(--bg); text-decoration: none; }
.app-nav a.active { background: var(--primary); color: #fff; }
.app-nav .spacer { flex: 1; }

/* ---------- page ---------- */
.page {
  max-width: 1800px;
  margin: 24px auto;
  padding: 0 32px;
}
.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.page-header h1 {
  font-size: 22px;
  margin: 0;
  flex: 1;
}
.page-header .actions { display: flex; gap: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover { background: var(--bg); }
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger {
  background: var(--surface);
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- cards / panels ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.panel-pad { padding: 18px; }

/* ---------- toolbar above table ---------- */
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.toolbar input[type="search"],
.toolbar input[type="text"] {
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 14px;
  min-width: 220px;
}
.col-toggle {
  position: relative;
}
.col-toggle-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 12px;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 20;
}
.col-toggle-menu label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 13px;
  cursor: pointer;
}

/* ---------- data table ---------- */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.data-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 12px;
  background: #fafbfc;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }
/* Zebra striping for every list table. Uses --row-tint custom property so a
   per-row inline tint (e.g. HCBS status color from Table.vue rowStyle) cleanly
   overrides via cascade — inline style wins over selector rules of the same
   property. Non-colored rows fall back to --surface-alt on even rows and
   transparent on odd; hover defaults to the existing light-blue. */
.data-table tbody tr {
  background: var(--row-tint, transparent);
  transition: background 0.1s;
}
.data-table tbody tr:nth-child(even) {
  --row-tint: var(--surface-alt, #f7f8fa);
}
.data-table tbody tr:hover {
  background: var(--row-tint-hover, rgba(59,130,246,0.08));
}
.data-table td.actions {
  white-space: nowrap;
  text-align: right;
}
.data-table .empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

/* ---------- form ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 18px;
}
.form-section {
  border-top: 1px solid var(--border);
  margin-top: 18px;
  padding-top: 14px;
}
.form-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.form-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="password"],
.field input[type="date"],
.field input[type="time"],
.field input[type="tel"],
.field input[type="datetime-local"],
.field textarea,
.field select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.field textarea { min-height: 80px; resize: vertical; }
.field select[multiple] { min-height: 110px; }
.field .help { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.field .ref-link { font-size: 12px; margin-left: 6px; }

/* ---------- read-only view fields ---------- */
.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 22px;
}
.view-field .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.view-field .value {
  font-size: 14px;
  word-break: break-word;
}
.view-field .value.muted { color: var(--text-muted); font-style: italic; }
.view-field .value .pill {
  display: inline-block;
  padding: 2px 8px;
  background: #eef2ff;
  color: var(--primary);
  border-radius: 999px;
  font-size: 12px;
  margin: 2px 4px 2px 0;
}
/* Opt-in per column (comb_separator = \n): stack each multiselect pill on its
   own row in the view instead of flowing inline. The selector scope matches the
   default `.view-field .value .pill` / `.summary-stat-value .pill` rules so it
   wins on specificity; columns without the \n flag keep their inline pills. */
.view-field .value .pill.pill-block,
.summary-stat-value .pill.pill-block { display: block; width: fit-content; margin: 2px 0; }

/* ---------- badges / status ---------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 999px;
}
.badge-on  { background: #dcfce7; color: #14532d; }
.badge-off { background: #fee2e2; color: #7f1d1d; }

/* ---------- forms layout ---------- */
.form-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.form-footer .left { margin-right: auto; }

/* ---------- alerts ---------- */
.alert {
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 14px;
}
.alert-error   { background: #fee2e2; color: #7f1d1d; }
.alert-success { background: #dcfce7; color: #14532d; }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #f6f7f9 100%);
}
.login-card {
  background: var(--surface);
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 360px;
}
.login-card h1 { margin: 0 0 18px; font-size: 22px; }

/* ---------- table horizontal scroll wrapper ---------- */
/* The data-table can be wider than the viewport. Constraining the wrapper
   height keeps the horizontal scrollbar visible without scrolling the whole
   page to the bottom of the table. The thead stays pinned while scrolling.
   Use !important so the generic .panel { overflow: hidden } doesn't win via
   selector specificity. */
.panel.table-scroll {
  overflow: auto !important;
  max-height: calc(100vh - 230px);
}
.panel.table-scroll .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fafbfc; /* repeat from data-table thead — sticky elements lose their inherited background */
}

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  body { font-size: 14px; }

  /* iOS zooms on focus when input font-size < 16px. Keep inputs at 16px on mobile. */
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="number"],
  .field input[type="password"],
  .field input[type="date"],
  .field input[type="time"],
  .field input[type="tel"],
  .field input[type="datetime-local"],
  .field textarea,
  .field select,
  .toolbar input[type="search"],
  .toolbar input[type="text"] {
    font-size: 16px;
  }

  /* Bigger tap targets on mobile (Apple HIG: 44pt; we go 40px). */
  .btn { padding: 10px 14px; min-height: 40px; }
  .btn-sm { padding: 7px 10px; min-height: 32px; }

  .app-nav {
    padding: 8px 12px;
    gap: 4px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .app-nav .brand { font-size: 15px; margin-right: 4px; }
  .app-nav a { padding: 5px 8px; font-size: 13px; white-space: nowrap; }
  .app-nav .spacer { flex: 0 0 auto; min-width: 4px; }

  .page { margin: 12px auto; padding: 0 12px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-header h1 { font-size: 18px; width: 100%; }
  .page-header .actions { width: 100%; flex-wrap: wrap; }
  .page-header .actions .btn { flex: 1; min-width: 0; justify-content: center; }

  .toolbar { gap: 6px; }
  .toolbar input[type="search"],
  .toolbar input[type="text"] { min-width: 0; flex: 1; }

  .panel-pad { padding: 12px; }

  .form-grid { grid-template-columns: 1fr; gap: 10px; }
  .view-grid { grid-template-columns: 1fr; gap: 10px; }

  .form-footer { flex-wrap: wrap; }
  .form-footer .btn { flex: 1; min-width: 0; justify-content: center; }
  .form-footer .left { flex-basis: 100%; margin-right: 0; order: -1; margin-bottom: 6px; }

  /* Data table → headers stay; rows scroll horizontally. */
  .table-scroll { max-height: calc(100vh - 200px); }
  .data-table { min-width: 600px; }
  .data-table thead th,
  .data-table td { padding: 8px 10px; font-size: 13px; }

  .col-toggle-menu { right: -12px; min-width: 220px; }

  .login-card { padding: 22px; border-radius: var(--radius); }
}

@media (max-width: 420px) {
  .page-header h1 { font-size: 16px; }
  .app-nav .brand { display: none; }
  .btn { padding: 6px 10px; font-size: 13px; }
  .btn-sm { padding: 4px 8px; font-size: 12px; }
}

/* combbr column type — stacked lines with dividers. The icon sits on the left
   and is vertically centered against the line's text (flex + center align). */
.combbr-cell { display: block; }
.combbr-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  min-height: 22px;
}
.combbr-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  font-size: 14px;
  line-height: 1;
}
.combbr-label {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
/* Default: no wrap → the table cell grows horizontally and the table-scroll
   wrapper takes over with its scrollbar. Add the `wrap` class (or inline
   `--combbr-lines`) to allow wrapping up to N lines on word boundaries. */
.combbr-value {
  flex: 1 1 auto;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
.combbr-value.wrap {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--combbr-lines, 2);
  line-clamp: var(--combbr-lines, 2);
  overflow: hidden;
}
.combbr-rule { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

/* comb column type with multi-line separator (comb_separator = "\n" or "<br>").
   Each part renders as an inline span with <br> tags between them; this style
   just keeps the parts from wrapping mid-value so the cell grows vertically
   line-by-line rather than mid-text. */
.comb-line { display: inline; white-space: nowrap; }

/* ---------- dashboard widgets ---------- */
.widget-grid {
  display: grid;
  /* grid-template-columns is set inline based on user/admin preference */
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 16px;
}
.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .widget-grid { grid-template-columns: 1fr !important; }
  .widget { grid-column: 1 / -1 !important; }
}
.widget-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.widget-count {
  font-size: 36px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  line-height: 1.1;
}
a.widget-count:hover { color: var(--primary); }
.widget-empty { color: var(--text-muted); font-style: italic; font-size: 13px; }
.widget-list { display: flex; flex-direction: column; }
.widget-list-row {
  display: flex; gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
.widget-list-row:last-of-type { border-bottom: 0; }
.widget-list-row:hover { color: var(--primary); }
.widget-list-cell { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-list-more { font-size: 13px; color: var(--primary); margin-top: 8px; text-decoration: none; }
.widget-list-more:hover { text-decoration: underline; }
.widget-links { display: flex; gap: 8px; flex-wrap: wrap; }
.widget-open { font-size: 16px; color: var(--primary); margin-top: 8px; }
.widget-error { color: var(--danger); font-size: 12px; margin-top: 8px; }

/* ---------- Detail page layouts ---------- */
.view-mode, .edit-mode { display: flex; flex-direction: column; gap: 14px; }
.view-mode .form-section, .edit-mode .form-section { margin: 0; padding-top: 18px; border-top: none; }

/* ---- card layout ----
   Sections become independent panels arranged in a responsive 2+-column grid.
   Each card gets a tinted header strip so it reads as a discrete unit instead
   of a slab in a stack. Sticky form footer (edit mode) is excluded from the
   grid so the Save/Cancel row spans full width at the bottom. */
.view-layout-card, .edit-layout-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-auto-flow: row dense;
  gap: 16px;
  align-items: start;
}
.view-layout-card > .form-section,
.edit-layout-card > .form-section {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.view-layout-card > .form-section:hover,
.edit-layout-card > .form-section:hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 20px rgba(15, 23, 42, 0.09);
}
.view-layout-card > .form-section > h3,
.edit-layout-card > .form-section > h3 {
  margin: 0;
  padding: 10px 16px;
  background: linear-gradient(180deg, #f5f7fb 0%, #eef1f7 100%);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.view-layout-card > .form-section > .view-grid,
.view-layout-card > .form-section > .form-grid,
.edit-layout-card > .form-section > .view-grid,
.edit-layout-card > .form-section > .form-grid {
  padding: 14px 16px 16px;
  grid-template-columns: 1fr;  /* fields stack inside a card */
}
/* Edit-mode sticky footer panel: span the full row so Save/Cancel isn't
   trapped in a single column. */
.edit-layout-card > .form-section:last-child {
  grid-column: 1 / -1;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.edit-layout-card > .form-section:last-child:hover {
  box-shadow: none;
}
@media (max-width: 720px) {
  .view-layout-card, .edit-layout-card {
    grid-template-columns: 1fr;
  }
}

.widget-icon { margin-right: 6px; font-size: 14px; }

/* Print runner for paper-friendly questionnaire layout */
.print-runner .q-block { padding: 12px 0; }
@media print {
  .print-runner .form-footer { display: none; }
  .print-runner input, .print-runner textarea, .print-runner select { border: 1px solid #999; }
}

/* ---------- permissions matrix ---------- */
.perm-matrix th, .perm-matrix td { white-space: nowrap; }
.perm-matrix .sticky-left {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 2;
  border-right: 1px solid var(--border);
}
.perm-matrix thead .sticky-left { z-index: 3; background: #fafbfc; }
.perm-matrix .perm-group-head {
  text-align: center;
  max-width: 140px;
  white-space: normal;
  vertical-align: bottom;
  font-size: 11px;
}
.perm-matrix .perm-section td {
  background: #eef2ff !important;
  color: var(--primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  padding: 8px 12px;
}
.perm-matrix .perm-cell { text-align: center; }
.perm-matrix .perm-cell input { width: 18px; height: 18px; cursor: pointer; }
.perm-matrix .perm-name { min-width: 240px; }

/* ---------- questionnaire builder ---------- */
.qb-row { padding: 6px 0; border-left: 2px solid transparent; }
.qb-row:hover { border-left-color: var(--primary); }
.qb-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.qb-path {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  color: var(--text-muted);
  min-width: 38px;
}
.qb-text { flex: 1 1 auto; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); font: inherit; }
.qb-type, .qb-cond { padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); font: inherit; }
.qb-detail { padding: 8px 12px; background: #fafbfc; border-left: 2px solid var(--border-strong); margin: 4px 0 4px 32px; }
.qb-label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.qb-children { margin-top: 4px; }

/* Summary hero block (view_layout='summary') */
.summary-hero {
  background: linear-gradient(135deg, #eef2ff 0%, var(--surface) 100%);
  border: 1px solid var(--border);
}
.summary-title { font-size: 24px; font-weight: 700; margin-bottom: 14px; }
.summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.summary-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 2px; }
.summary-stat-value { font-size: 15px; font-weight: 500; }

/* Loading state — dim and disable interactions on table during refetch. */
.table-scroll.is-fetching { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease-out; }

.field-err { color: var(--danger); font-size: 11px; margin-left: 6px; font-weight: 500; }
.field input.has-err, .field select.has-err, .field textarea.has-err { border-color: var(--danger); }

/* Questionnaire response readout (Detail page past-responses panel) */
.response-readout { padding: 10px 4px; }
.response-qa {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.response-qa:last-child { border-bottom: 0; }
.response-q { color: var(--text-muted); font-size: 12px; }
.response-a { font-size: 13px; font-weight: 500; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 640px) {
  .response-qa { grid-template-columns: 1fr; gap: 2px; }
}

/* Chart widget */
.chart-bars { display: flex; flex-direction: column; gap: 6px; }
.chart-bar { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.chart-bar-label { flex: 0 0 35%; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-bar-track { flex: 1; background: var(--bg); border-radius: 4px; height: 18px; overflow: hidden; }
.chart-bar-fill { background: var(--primary); height: 100%; border-radius: 4px; display: flex; align-items: center; padding: 0 6px; min-width: 22px; }
.chart-bar-value { color: #fff; font-weight: 600; font-size: 11px; }

/* Chip-style multi-select picker (replaces native multiple) */
.chip-select { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 6px; background: var(--surface); }
.chip-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; min-height: 6px; }
.chip-list:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 9px;
  background: #eef2ff;
  color: var(--primary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.chip-x { background: transparent; border: 0; color: var(--primary); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 6px; }
.chip-x:hover { color: var(--danger); }
.chip-select select { border: 0 !important; padding: 4px 8px !important; font-size: 13px !important; background: transparent !important; width: auto !important; }
.chip-select select:focus { box-shadow: none !important; }

/* Nominatim address autocomplete dropdown */
.address-suggestions {
  position: absolute;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 2px;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
}
.address-suggestion {
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.address-suggestion:last-child { border-bottom: 0; }
.address-suggestion:hover { background: #eef2ff; color: var(--primary); }

/* Sticky top + sticky bottom action bars on detail / form pages. */
.page-header.sticky-top {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg);
  padding-top: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.form-footer.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 15;
  background: var(--surface);
  margin: 0 -18px -18px;
  padding: 16px 18px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Typeahead select widget — hybrid: looks like a dropdown, supports filter-as-you-type */
.ts-select { position: relative; display: block; }
.ts-select input { width: 100%; padding: 7px 28px 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 14px; background: var(--surface); cursor: pointer; }
.ts-select input:focus { cursor: text; outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.ts-select.open input { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.ts-chevron {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; font-size: 11px; line-height: 1;
  transition: transform 0.12s ease;
}
.ts-select.open .ts-chevron { transform: translateY(-50%) rotate(180deg); }
.ts-menu {
  position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 260px; overflow-y: auto;
}
.ts-opt { padding: 6px 10px; cursor: pointer; font-size: 13px; border-left: 3px solid transparent; }
.ts-opt:hover { background: #c7d7f9; }
.ts-opt.selected { color: var(--primary); font-weight: 600; border-left-color: var(--primary); background: rgba(59,130,246,0.08); }
.ts-opt.selected:hover { background: #93b3f5; }

/* Contact cards on the entity detail view */
.contact-card { background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.contact-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.contact-role { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.contact-name { font-size: 16px; font-weight: 600; margin-top: 2px; }
.contact-notes { font-size: 12px; color: var(--text-muted); margin: 4px 0 8px; font-style: italic; }
.contact-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }

.ts-opt.hilight { background: #dbeafe; }

/* Reload-options affordance: small ↻ button between the input and the chevron
   on every select/multiselect that points at a ref_table. Click re-fetches
   that column's options from /<table> {method:'options'} without a page reload. */
.ts-refresh {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  user-select: none;
  z-index: 1;
  transition: color 0.12s ease, background 0.12s ease, transform 0.4s ease;
}
.ts-refresh:hover { background: var(--bg); color: var(--primary); }
.ts-refresh.spinning { transform: translateY(-50%) rotate(360deg); color: var(--primary); }
.ts-select input { padding-right: 50px; }  /* room for refresh ↻ + chevron ▾ */

/* Inline-editable child-panel table on the detail page (contacts → phones/emails/addresses). */
.child-inline-table td input[type="text"],
.child-inline-table td input[type="email"],
.child-inline-table td input[type="tel"],
.child-inline-table td textarea,
.child-inline-table td select {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 13px;
  background: var(--surface);
}
.child-inline-table td textarea { min-height: 32px; resize: vertical; }
.child-inline-table td input[type="checkbox"] { width: 18px; height: 18px; }
.child-inline-table td.actions .btn { margin-left: 4px; }
/* The inline table has no border/rounded corners, so it doesn't need the
   .data-table overflow:hidden — and that clip was hiding the address-lookup
   suggestions dropdown when the panel was short. Let it overflow. */
.child-inline-table { overflow: visible; }
.child-inline-table td { overflow: visible; }
/* Make sure the suggestions float above sibling rows/panels. */
.address-suggestions { z-index: 60; }

@media (max-width: 700px) {
  .child-inline-table { display: block; }
  .child-inline-table thead { display: none; }
  .child-inline-table tbody, .child-inline-table tr { display: block; }
  .child-inline-table tr { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px; padding: 8px; }
  .child-inline-table td { display: flex; align-items: center; gap: 8px; padding: 4px 0; border: none; }
  .child-inline-table td::before { content: attr(data-label); flex: 0 0 80px; color: var(--text-muted); font-size: 12px; }
  .child-inline-table td.actions { justify-content: flex-end; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px; }
}

/* Inline "+ Add new contact" modal launched from a dropdown that points to contacts. */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-panel { background: var(--surface); padding: 22px; border-radius: 10px; max-width: 560px; width: calc(100% - 32px); max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.ts-opt-add { border-bottom: 1px solid var(--border); background: var(--surface-alt); position: sticky; top: 0; z-index: 1; }
.ts-opt-add:hover { background: rgba(59,130,246,0.12); }

/* Color picker field (col_type='color') on the Detail edit form, plus the inline
   swatch+hex display on the view page. */
.color-input-wrap { display: flex; align-items: center; gap: 8px; }
.color-input-wrap input[type="color"] {
  width: 42px; height: 32px; padding: 0; border: 1px solid var(--border-strong);
  border-radius: 4px; cursor: pointer; background: transparent;
}
.color-swatch {
  display: inline-block; width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid var(--border-strong); vertical-align: middle;
}
.color-swatch-inline { display: inline-flex; align-items: center; gap: 8px; }

/* §19 Alerts — per-row pills surfaced in Table.vue's alerts column. The row
   background stays under rowStyle()'s control (status color tint); only the
   pill itself is colored. */
.alerts-cell { white-space: normal; max-width: 240px; }
.alert-pill {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.alert-warning { background: #fef3c7; color: #92400e; }
.alert-danger  { background: #fee2e2; color: #991b1b; }
.alert-info    { background: #dbeafe; color: #1e40af; }

/* Bug 1: "Linked to" back-references panel on a contact's detail page. */
.muted { color: var(--text-muted); }
.contact-links-back .contact-line { padding: 3px 0; }
.contact-links-back .contact-line a { font-weight: 500; }


/* ===== Roles / Links panel (RolesLinksPanel.vue) ===== */
.roles-links-panel .rl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.roles-links-panel .rl-head h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.rl-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg); color: var(--text-muted); font-size: 12px; font-weight: 600; }

.rl-list { list-style: none; margin: 0; padding: 0; }
.rl-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; }
.rl-item:hover { background: var(--bg); }
.rl-item + .rl-item { border-top: 1px solid var(--border); }

.rl-badge { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.rl-cat-family   { background: #e0f2fe; color: #075985; }
.rl-cat-org      { background: #fef3c7; color: #92400e; }
.rl-cat-identity { background: #ede9fe; color: #5b21b6; }

.rl-name { flex: 1 1 auto; font-weight: 600; color: var(--text); }
.rl-name:hover { color: var(--primary); text-decoration: underline; }
.rl-table { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.rl-x { flex: 0 0 auto; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; width: 26px; height: 26px; border-radius: 6px; }
.rl-x:hover { background: var(--danger); color: #fff; }

.rl-empty { color: var(--text-muted); font-style: italic; font-size: 13px; padding: 4px 2px; }

.rl-add { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.rl-add-row { margin-bottom: 10px; }
.rl-add-row > label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.rl-add-row select, .rl-target-search input { width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 14px; background: var(--surface); }
.rl-target-list { list-style: none; margin: 6px 0 0; padding: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.rl-target-opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; background: transparent; border: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; }
.rl-target-opt:hover { background: var(--bg); }
.rl-target-opt.sel { background: var(--primary); color: #fff; }
.rl-check { font-weight: 700; }
.rl-add-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ===== Role sections on the unified contact view (RoleSection.vue) ===== */
.role-section-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.role-section-badge { background: #ede9fe; color: #5b21b6; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.role-section-sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.role-section { border-left: 3px solid #8b5cf6; }
.rs-multi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rs-multi-add { min-width: 110px; }
.rs-clients { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.rs-clients-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px; }
.rs-clients-list { display: flex; flex-wrap: wrap; gap: 6px; }
/* #6: 12-hour time picker (edit mode) */
.time12-edit { display: flex; align-items: center; gap: 6px; }
.time12-edit select { width: auto; min-width: 64px; padding: 7px 8px; }
.time12-colon { font-weight: 600; color: var(--text-muted); }