:root {
  /* "Aurora": white background, violet/teal accents. */
  --pg:#faf9fc; --card:#ffffff; --bd:#e8e4f0; --bd-strong:#d4cce3;
  --t1:#211c31; --t2:#655d78; --tm:#9891a8;
  --nav-bg:#1a1329; --nav-bg2:#2a1f42;

  --primary:#7c3aed; --primary-dark:#6d28d9; --primary-soft:rgba(124,58,237,.09);

  --success:#0d9488; --success-dark:#0f766e;
  --warning:#d97706; --warning-dark:#b45309;
  --danger:#dc2626;  --danger-dark:#b91c1c;

  --r:10px; --r-sm:6px;
  --sh:0 1px 3px rgba(33,28,49,.07), 0 1px 2px rgba(33,28,49,.04);
  --sh-md:0 8px 20px rgba(33,28,49,.10);
}
/* Deliberately no `prefers-color-scheme: dark` override — the background must look
   identical for every viewer regardless of their own OS/browser dark-mode setting,
   so the light "Aurora" palette above is the only palette, full stop. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--pg); color: var(--t1); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); }

/* ── Top nav ─────────────────────────────────────────────────────────── */
.topnav {
  background: linear-gradient(180deg, var(--nav-bg2), var(--nav-bg)); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 56px; box-shadow: var(--sh);
}
.topnav-left { display: flex; align-items: center; gap: 26px; height: 100%; }
.topnav .brand { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; color: #fff; text-decoration: none; }
.topnav .navtab {
  color: #cbd5e1; text-decoration: none; font-size: .87rem; font-weight: 500;
  height: 100%; display: flex; align-items: center; padding: 0 4px; transition: color .15s;
}
.topnav .navtab:hover { color: #fff; }
.topnav .navtab.active {
  color: #fff; font-weight: 600; background: var(--primary);
  border-radius: 6px; padding: 7px 16px; height: auto;
}
.topnav-right { display: flex; align-items: center; gap: 16px; }
.global-search { position: relative; }
.global-search input {
  border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-sm); padding: 7px 12px; font-size: .85rem;
  width: 280px; background: rgba(255,255,255,.08); color: #fff;
}
.global-search input::placeholder { color: #94a3b8; }
.global-search input:focus { outline: none; background: rgba(255,255,255,.14); }
.global-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--r-sm);
  box-shadow: var(--sh); max-height: 480px; overflow-y: auto;
  /* ~15 rows visible before scrolling, at the item height set below */
}
.global-search-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 12px; text-decoration: none; color: var(--t1); font-size: .85rem;
  border-bottom: 1px solid var(--bd);
}
.global-search-item:last-child { border-bottom: none; }
.global-search-item:hover { background: var(--pg); }
.global-search-item .gsi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-item .gsi-meta { color: var(--t2); font-size: .75rem; white-space: nowrap; flex-shrink: 0; }
.global-search-empty { padding: 10px 12px; font-size: .82rem; color: var(--t2); }
.followup-bell { position: relative; }
.followup-bell-btn {
  position: relative; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm); width: 34px; height: 34px; font-size: 1rem; cursor: pointer; color: #fff;
}
.followup-bell-btn:hover { background: rgba(255,255,255,.14); }
.followup-bell-count {
  position: absolute; top: -6px; right: -6px; background: #ef4444; color: #fff;
  font-size: .65rem; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 20px;
  min-width: 16px; text-align: center;
}
.followup-bell-results {
  position: absolute; top: calc(100% + 6px); right: 0; width: 340px; z-index: 50;
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--r-sm);
  box-shadow: var(--sh); max-height: 420px; overflow-y: auto;
}
.followup-bell-results .gsi-name em { color: var(--t2); font-style: normal; font-size: .78rem; }
.fbell-overdue { color: #ef4444; font-weight: 600; }
.fbell-today { color: #d97706; font-weight: 600; }
.topnav-user { font-size: .85rem; color: #cbd5e1; }
.topnav-logout { color: #cbd5e1; text-decoration: none; font-size: .85rem; }
.topnav-logout:hover { color: #fff; }
.role-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; line-height: 1.4;
}
.role-badge.role-admin { background: rgba(255,255,255,.16); color: #fff; }
.role-badge.role-user { background: rgba(255,255,255,.08); color: #cbd5e1; }

/* Below this width the single-row nav (brand + 5 tabs + search + user info) no
   longer fits and was overflowing/clipping — let it wrap onto its own rows
   instead, and drop the 56px fixed height that was clipping wrapped content. */
@media (max-width: 860px) {
  .topnav { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px 0; }
  .topnav-left { height: auto; flex-wrap: wrap; gap: 4px 14px; }
  .topnav .navtab.active { padding: 6px 12px; }
  .topnav-right { flex-wrap: wrap; width: 100%; gap: 10px; }
  .global-search { width: 100%; }
  .global-search input { width: 100%; }
}

/* Fluid width so a big monitor isn't left with a small, letterboxed table in the
   middle of the screen — content grows with the viewport, capped only so lines of
   text on an ultrawide don't get absurdly long. */
main { padding: 24px; max-width: 1800px; margin: 0 auto; }
@media (max-width: 768px) {
  main { padding: 12px; }
}

.card {
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--r);
  box-shadow: var(--sh); padding: 22px; margin-bottom: 20px;
}
h1 { font-size: 1.4rem; margin-bottom: 16px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: .92rem; margin: 14px 0 8px; font-weight: 600; color: var(--t1); }
h2:first-child { margin-top: 0; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--bd); white-space: nowrap; }
th { color: var(--t2); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; background: var(--pg); font-weight: 600; }
tbody tr:hover { background: var(--primary-soft); }
a.row-link { color: var(--t1); text-decoration: none; font-weight: 600; }
a.row-link:hover { color: var(--primary); text-decoration: underline; }
tbody tr:last-child td { border-bottom: none; }
.table-card { padding: 0; overflow-x: auto; margin-bottom: 20px; }
.table-card table { margin: 0; }

/* ── Quick-filter tabs ───────────────────────────────────────────────── */
.quick-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.qf-tab {
  display: inline-block; padding: 8px 16px; border-radius: 20px; font-size: .83rem; font-weight: 500;
  text-decoration: none; color: var(--t2); background: var(--card); border: 1px solid var(--bd); transition: all .15s;
}
.qf-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.qf-tab:hover:not(.active) { border-color: var(--primary); color: var(--primary); }

/* ── Toolbar (pagination / page size / total / filter) ──────────────── */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pagination { display: flex; gap: 4px; align-items: center; font-size: .85rem; }
.page-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; border-radius: var(--r-sm); text-decoration: none;
  color: var(--t2); border: 1px solid var(--bd); background: var(--card); font-size: .84rem; transition: all .15s;
}
.page-num.current { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.page-num.ellipsis { border: none; background: none; color: var(--tm); }
.page-num:hover:not(.current) { border-color: var(--primary); color: var(--primary); }
.pagination-footer { display: flex; justify-content: center; margin-top: 16px; }
.page-size-form select {
  border: 1px solid var(--bd); border-radius: var(--r-sm); padding: 6px 8px;
  font-size: .85rem; background: var(--card); color: var(--t1);
}
.badge.total-badge {
  background: var(--primary-soft); color: var(--primary); border: none; font-weight: 600;
  padding: 6px 14px; border-radius: 20px; font-size: .8rem;
}
.toolbar-right { position: relative; display: flex; align-items: center; gap: 10px; }
.filter-toggle summary {
  list-style: none; cursor: pointer; font-size: .85rem; padding: 7px 14px;
  border: 1px solid var(--bd); border-radius: var(--r-sm); background: var(--card); color: var(--t1);
}
.filter-toggle summary::-webkit-details-marker { display: none; }
.filter-panel {
  position: fixed; z-index: 10; width: 260px;
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--r);
  box-shadow: var(--sh-md); padding: 16px; display: flex; flex-direction: column;
  /* position: fixed (not absolute) + top/max-height set by JS when the panel opens
     (see base.html) -- a plain CSS vh-based cap still overflowed the actual visible
     window whenever the toolbar itself sat partway down a long page, forcing a full
     page scroll to reach Apply/Clear. Fixed positioning anchored to the real
     viewport guarantees the whole panel, scrollable fields included, always fits
     on screen without ever needing to scroll the page itself. */
  overflow: hidden;
}
.filter-panel-fields { overflow-y: auto; padding-right: 2px; min-height: 0; }
.filter-panel .fg { margin-bottom: 12px; }
.filter-panel label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--t2); margin-bottom: 4px; }
.filter-panel input, .filter-panel select {
  width: 100%; border: 1px solid var(--bd); border-radius: var(--r-sm); padding: 7px 9px;
  font-size: .85rem; background: var(--pg); color: var(--t1);
}
.filter-panel-actions {
  display: flex; gap: 8px; flex-shrink: 0;
  margin: 12px -16px -16px; padding: 12px 16px; background: var(--card);
  border-top: 1px solid var(--bd); border-radius: 0 0 var(--r) var(--r);
}
.filter-panel button, .filter-panel-clear {
  border: none; border-radius: var(--r-sm); padding: 8px 16px; font-size: .85rem;
  cursor: pointer; font-weight: 600; text-align: center; text-decoration: none; flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.filter-panel button { background: var(--primary); color: #fff; }
.filter-panel button:hover { background: var(--primary-dark); }
.filter-panel-clear { background: var(--pg); color: var(--t2); border: 1px solid var(--bd); }
.filter-panel-clear:hover { background: var(--bd); color: var(--t1); }

/* ── Buttons (semantic, not arbitrary) ──────────────────────────────── */
.btn {
  display: inline-block; text-decoration: none; font-size: .8rem; font-weight: 600;
  padding: 7px 15px; border-radius: var(--r-sm); color: #fff; border: none; cursor: pointer;
  transition: filter .15s, box-shadow .15s;
}
.btn-primary { background: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); }
.btn-success:hover { background: var(--success-dark); }
.btn-warning { background: var(--warning); }
.btn-warning:hover { background: var(--warning-dark); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: var(--danger-dark); }
.btn-save-lead {
  background: var(--success); color: #fff; border: none; font-size: .88rem; font-weight: 600;
  padding: 10px 30px; border-radius: var(--r-sm); cursor: pointer; display: block; margin: 14px auto 0;
}
.btn-save-lead:hover { background: var(--success-dark); }

.meta { color: var(--t2); font-size: .85rem; margin-bottom: 4px; }
.badge {
  display: inline-block; background: var(--pg); border: 1px solid var(--bd);
  border-radius: 20px; padding: 3px 11px; font-size: .75rem; color: var(--t2); font-weight: 500;
}
.offer-badge {
  background: var(--warning); border-color: var(--warning); color: #fff;
  font-size: .68rem; padding: 2px 9px; margin-left: 6px; vertical-align: middle;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
/* Same min-width:0 gotcha as .lead-layout: a grid item's own min-content width
   (e.g. a <select>'s longest option) otherwise overrides the 1fr share and makes
   columns uneven/overflow instead of collapsing cleanly on narrow screens. */
.grid-2 > *, .grid-3 > * { min-width: 0; }
@media (max-width: 720px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ── Lead detail: info panel + pipeline + tabs ──────────────────────── */
/* min-width: 0 on the grid children is load-bearing: without it, a `1fr` track still
   won't shrink below its content's natural width (a classic grid gotcha), so a wide
   table inside would keep the whole layout overflowing even in a single column. */
.lead-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.lead-layout > * { min-width: 0; }
@media (max-width: 768px) {
  /* Fixed 300px sidebar + 1fr next to it doesn't fit a phone width at all -- stack
     the info card above the pipeline/tabs/content instead of squeezing both columns. */
  .lead-layout { grid-template-columns: 1fr; }
}
.info-card .avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  margin-bottom: 14px;
}
.info-card h3 { font-size: 1.15rem; margin-bottom: 4px; font-weight: 700; }
.info-card .associate { color: var(--t2); font-size: .83rem; margin-bottom: 10px; }
.status-badge {
  display: inline-block; background: var(--success); color: #fff; font-size: .72rem;
  font-weight: 600; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px;
}
.info-card .info-row { font-size: .86rem; margin-bottom: 12px; }
.info-card .info-row .label { color: var(--tm); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }

.pipeline { display: flex; margin-bottom: 18px; flex-wrap: wrap; gap: 6px; }
.pipeline-step {
  padding: 8px 18px; font-size: .8rem; font-weight: 500; background: var(--card); border: 1px solid var(--bd);
  color: var(--t2); border-radius: 20px;
}
.pipeline-step.done { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.pipeline-step.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }

.quick-actions { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }

.detail-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bd); margin-bottom: 20px; flex-wrap: wrap; }
.detail-tabs a {
  padding: 10px 16px; font-size: .85rem; font-weight: 500; text-decoration: none; color: var(--t2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s;
}
.detail-tabs a:hover { color: var(--primary); }
.detail-tabs a.active { color: var(--primary); border-color: var(--primary); font-weight: 600; }

/* table-layout: fixed is load-bearing on mobile: under the default `auto` layout, a
   <table> ignores `width: 100%` as a MINIMUM and grows to fit its content regardless
   of the container, which was overflowing the page on phones. Fixed layout makes the
   declared column widths authoritative and lets long cell text wrap instead. */
.info-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 20px; border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; }
.info-table th {
  width: 170px; text-align: left; background: var(--pg); color: var(--t2); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .04em; padding: 11px 14px; border-bottom: 1px solid var(--bd); font-weight: 600;
}
.info-table td { padding: 11px 14px; border-bottom: 1px solid var(--bd); font-size: .87rem; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .info-table th { width: 120px; }
}
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: none; }
.field-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bd); font-size: .87rem; }
.field-row .label { color: var(--t2); }
.empty { color: var(--tm); font-size: .85rem; padding: 16px 0; text-align: center; }
.back-link { display: inline-block; margin-bottom: 14px; font-size: .85rem; color: var(--primary); text-decoration: none; font-weight: 500; }
.back-link:hover { text-decoration: underline; }
.section-actions { float: right; }
.section-actions a { font-size: .8rem; }
.flash { background: var(--primary-soft); color: var(--primary); font-size: .85rem; padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 18px; font-weight: 500; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form .fg { margin-bottom: 10px; }
.form label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--t2); margin-bottom: 4px; }
.form input, .form select, .form textarea {
  width: 100%; background: var(--card); border: 1px solid var(--bd-strong); color: var(--t1);
  font-size: .87rem; padding: 7px 10px; border-radius: var(--r-sm); font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.form .checkbox-fg label { display: flex; align-items: center; gap: 8px; text-transform: none; font-weight: 400; font-size: .85rem; }
.form .checkbox-fg input { width: auto; }
.form button {
  background: var(--success); border: none; color: #fff; font-size: .85rem; font-weight: 600;
  padding: 9px 22px; border-radius: var(--r-sm); cursor: pointer; transition: background .15s; margin-top: 4px;
}
.form button:hover { background: var(--primary-dark); }
.row-actions { display: flex; gap: 6px; align-items: center; }
.row-actions form { display: inline; margin: 0; }

/* Icon action buttons (view/edit/delete) - compact, so list tables stop needing a
   wide text column just for actions and contribute less to horizontal scroll. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--bd);
  background: var(--card); cursor: pointer; padding: 0; transition: all .15s;
}
.icon-btn svg { width: 15px; height: 15px; stroke: var(--t2); fill: none; stroke-width: 2; }
.icon-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.icon-btn:hover svg { stroke: var(--primary); }
.icon-btn.icon-danger:hover { border-color: var(--danger); background: rgba(220,38,38,.08); }
.icon-btn.icon-danger:hover svg { stroke: var(--danger); }

/* Truncate long free-text table cells with an ellipsis; the full value is still on
   the title attribute (hover tooltip), so nothing is actually lost. */
td.truncate { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-name-cell { display: flex; align-items: center; gap: 6px; max-width: 220px; }
.lead-name-cell .truncate-inline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex-shrink: 1; }
.lead-name-cell .offer-badge { flex-shrink: 0; margin-left: 0; }
td.truncate-lg { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Choices.js tag-multiselect skin (Part C) ───────────────────────── */
.choices { font-size: .9rem; }
.choices__inner {
  background: var(--card) !important; border: 1px solid var(--bd-strong) !important;
  border-radius: var(--r-sm) !important; min-height: 42px; padding: 6px 8px !important;
}
.choices__list--multiple .choices__item {
  background: var(--primary) !important; border: none !important; border-radius: 20px !important;
  padding: 4px 10px !important; font-size: .82rem !important; color: #fff !important;
}
/* The remove-item "×" button's visibility/size/icon depend on Choices' own CSS load
   order and custom-property defaults, which made it invisible in practice. Force an
   explicit, guaranteed-visible white "×" regardless of library internals. */
.choices__list--multiple .choices__item .choices__button {
  display: inline-block !important;
  position: relative !important;
  width: 12px !important; height: 12px !important;
  margin: 0 0 0 8px !important; padding: 0 !important;
  opacity: .85 !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23fff' fill-rule='evenodd'%3E%3Cpath d='M2.592.044l18.364 18.364-2.548 2.548L.044 2.592z'/%3E%3Cpath d='M0 18.364L18.364 0l2.548 2.548L2.548 20.912z'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
  border: none !important;
  border-inline-start: none !important;
  text-indent: -9999px !important;
  cursor: pointer !important;
}
.choices__list--multiple .choices__item .choices__button:hover { opacity: 1 !important; }
.choices__list--dropdown, .choices__list[aria-expanded] {
  background: var(--card) !important; border-color: var(--bd) !important; color: var(--t1) !important;
}
.choices__list--dropdown .choices__item--selectable { color: var(--t1) !important; }
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--primary-soft) !important; color: var(--t1) !important;
}
.choices__input { background: var(--card) !important; color: var(--t1) !important; }
.choices__input::placeholder { color: var(--tm) !important; }
.choices__placeholder { color: var(--tm) !important; opacity: 1 !important; }
/* Default theme draws the dropdown caret as a CSS border-triangle in a fixed dark
   color — invisible against a dark .choices__inner. */
.choices[data-type*="select-multiple"] .choices__inner:after,
.choices[data-type*="select-one"] .choices__inner:after {
  border-color: var(--t2) transparent transparent !important;
}

/* ── Theme customizer ────────────────────────────────────────────────── */
.theme-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary); color: #fff; font-size: 1.2rem;
  box-shadow: var(--sh-md); display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.theme-fab:hover { transform: scale(1.07); }
.theme-panel {
  position: fixed; right: 22px; bottom: 82px; z-index: 200;
  width: 260px; background: var(--card); border: 1px solid var(--bd);
  border-radius: var(--r); box-shadow: var(--sh-md); padding: 16px;
  display: none;
}
.theme-panel.open { display: block; }
.theme-panel h3 { font-size: .95rem; margin-bottom: 10px; color: var(--t1); }
.theme-panel .swatch-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.theme-panel .swatch-row label { font-size: .84rem; color: var(--t2); }
.theme-panel .swatch-row input[type="color"] {
  width: 40px; height: 28px; border: 1px solid var(--bd-strong); border-radius: 6px;
  padding: 0; cursor: pointer; background: none;
}
.theme-panel .theme-actions {
  display: flex; gap: 8px; margin-top: 12px;
}
.theme-panel .theme-actions button {
  flex: 1; padding: 7px 0; border-radius: var(--r-sm); border: 1px solid var(--bd-strong);
  background: var(--pg); color: var(--t1); font-size: .82rem; cursor: pointer;
}
.theme-panel .theme-actions button:hover { border-color: var(--primary); }
.theme-panel .theme-presets { display: flex; gap: 6px; margin-bottom: 12px; }
.theme-panel .preset-dot {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bd);
  cursor: pointer; padding: 0;
}
.theme-panel .preset-dot:hover { border-color: var(--t2); }

/* ── Info dialog (full Feedback/Comment popup for truncated table cells) ─── */
.info-dialog {
  border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--sh-md);
  padding: 20px; width: 90%; max-width: 480px; background: var(--card); color: var(--t1);
  /* The global `* { margin: 0 }` reset strips the UA stylesheet's default
     `dialog:modal { margin: auto }`, which is what centers it - restore it. */
  position: fixed; inset: 0; margin: auto;
}
.info-dialog::backdrop { background: rgba(0,0,0,.45); }
.info-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.info-dialog-head h3 { font-size: 1rem; font-weight: 700; }
.info-dialog-field { margin-bottom: 14px; }
.info-dialog-field:last-child { margin-bottom: 0; }
.info-dialog-field .label {
  display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--t2); margin-bottom: 4px;
}
.info-dialog-field p { font-size: .9rem; white-space: pre-wrap; word-break: break-word; }

/* ── Confirm dialog (replaces the native browser confirm() for deletes) ──── */
.confirm-dialog-message { font-size: .9rem; line-height: 1.5; color: var(--t1); margin-bottom: 18px; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }


/* Cells that open the info dialog on click */
td.cell-popup { cursor: pointer; }
td.cell-popup:hover { color: var(--primary); text-decoration: underline; text-decoration-style: dotted; }