/* ============================================================
   Dealer Dashboard — styles
   Mirrors the design tokens used on template.dealerwebsites.co.uk
   ============================================================ */

/* ---- UK number plate font ---- */
@font-face {
  font-family: 'UK Number Plate';
  src: url('fonts/UKNumberPlate.eot');
  src: url('fonts/UKNumberPlate.eot?#iefix') format('embedded-opentype'),
       url('fonts/UKNumberPlate.woff') format('woff'),
       url('fonts/UKNumberPlate.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* UK-style registration plate: yellow ground, plate font. */
.dw-plate {
  font-family: 'UK Number Plate', ui-sans-serif, sans-serif;
  background: #f2cf53;
  color: #111;
  display: inline-block;
  font-weight: 500;
  font-size: .85rem;
  padding: .25rem .6rem;
  border-radius: .25rem;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ---- Design tokens ---- */
:root, [data-theme="light"] {
  --bg:#f5f7f9; --bg-elevated:#ffffff; --bg-subtle:#fafafb;
  --text:#171717; --text-muted:#737373; --border:#e5e5e5;
  --primary:#0a1120; --primary-hover:#16233d; --primary-soft:#eeeeec; --primary-contrast:#ffffff;
  --cta:#213b55; --cta-hover:#2c4d6e; --cta-contrast:#ffffff;      /* Premcloud brand blue */
  --accent:#bed836; --accent-contrast:#213b55;                     /* Premcloud brand green */
  --sidebar-bg:#1c2536; --nav-highlight:rgba(255,255,255,.06); --nav-active:rgba(255,255,255,.10);
  --success:#16a34a; --warning:#d97706; --info:#2563eb; --danger:#dc2626;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.06);
  --dw-btn-radius:.5rem;
}
[data-theme="dark"] {
  --bg:#0a0a0a; --bg-elevated:#171717; --bg-subtle:#1f1f1f;
  --text:#fafafa; --text-muted:#a3a3a3; --border:#262626;
  --primary:#fafafa; --primary-hover:#d4d4d4; --primary-soft:#262626; --primary-contrast:#0a0a0a;
  --cta:#2f5479; --cta-hover:#3a628c; --cta-contrast:#ffffff;      /* lightened brand blue for dark mode */
  --accent:#bed836; --accent-contrast:#16283a;                     /* Premcloud brand green */
  --sidebar-bg:#16283a; --nav-highlight:rgba(255,255,255,.06); --nav-active:rgba(255,255,255,.08);
  --success:#22c55e; --warning:#f59e0b; --info:#3b82f6; --danger:#ef4444;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
}

* { -webkit-font-smoothing:antialiased; }

/* No animation on initial load / refresh — transitions are enabled only after
   app.js has applied the saved sidebar + theme state and added .dw-ready. */
body:not(.dw-ready) * { transition:none !important; }
body {
  background:var(--bg); color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}


/* ---- Tailwind CDN FOUC guards ----
   Tailwind's utilities (w-*/h-*, hidden, …) are generated at runtime by the
   Play CDN (cdn.tailwindcss.com). Until that JS runs, viewBox-only <svg>s have
   no intrinsic size and balloon to fill their container, and elements toggled
   with `hidden` (the user dropdown, hidden theme icon, mobile overlay) render
   visible. These base rules apply before Tailwind loads; its class selectors
   have higher specificity (and, for `.hidden`, responsive variants come later
   in the cascade), so the utilities still win once Tailwind is ready. */
svg { width:1.25rem; height:1.25rem; }
.hidden { display:none; }

/* ---- Utility bridges to CSS vars ---- */
.dw-surface { background:var(--bg-elevated); border-color:var(--border); box-shadow:var(--shadow); }
.dw-subtle  { background:var(--bg-subtle); }
.dw-muted   { color:var(--text-muted); }
.dw-border  { border-color:var(--border); }

/* ---- Sidebar ---- */
/* Dark navy surface — scope light foreground tokens so contents stay legible
   on the dark background in both light and dark themes. */
#sidebar {
  background:var(--sidebar-bg); width:16rem; transition:transform .22s ease;
  color:var(--text);
  --bg-elevated:rgba(255,255,255,.045);
  --text:#f1f5f9;
  --text-muted:#94a3b8;
  --border:rgba(255,255,255,.08);
  --nav-highlight:rgba(255,255,255,.06);
  --nav-active:rgba(255,255,255,.10);
  border-color:var(--border);
}

/* Top-level Home link */
.nav-home { display:block; padding:.55rem .65rem; font-size:.9375rem; font-weight:600; color:var(--text-muted); text-decoration:none; border-radius:var(--dw-btn-radius); transition:background .15s ease,color .15s ease; }
.nav-home:hover { background:var(--nav-highlight); color:var(--text); }
.nav-home.active { background:var(--nav-active); color:var(--text); }

/* Grouped, expandable nav blocks */
.nav-block { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--dw-btn-radius); overflow:hidden; }
.nav-block + .nav-block { margin-top:.75rem; }
.nav-block__head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.55rem .65rem; font-size:.9375rem; font-weight:600;
  color:var(--text-muted); background:transparent; border:0; cursor:pointer; }
.nav-block__head:hover { color:var(--text); }
.nav-block__chevron { flex:none; width:.875rem; height:.875rem; transition:transform .18s ease; opacity:.7; }
.nav-block.open .nav-block__chevron { transform:rotate(90deg); }
.nav-block__body { display:none; padding:.15rem .3rem .35rem; }
.nav-block.open .nav-block__body { display:block; }

.nav-sub { display:block; padding:.3rem .55rem; margin:.06rem 0; font-size:.9375rem; line-height:1.2rem;
  color:var(--text-muted); text-decoration:none; border-radius:calc(var(--dw-btn-radius) - .15rem);
  transition:background .15s,color .15s; }
.nav-sub:hover { background:var(--nav-highlight); color:var(--text); }
.nav-sub.active { background:var(--nav-active); color:var(--text); font-weight:600; }

/* Unread-count pill shown against a nav item (e.g. Leads › Enquiries) */
.nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.15rem; height:1.15rem;
  padding:0 .35rem; border-radius:999px; background:var(--cta); color:#fff; font-size:.7rem; font-weight:600; line-height:1; }
/* Muted variant — plain totals (e.g. Stock counts) rather than attention alerts. */
.nav-badge--muted { background:rgba(255,255,255,.12); color:rgba(255,255,255,.75); }

/* Invoice step bar (Customer › Vehicle › Part Exchange › Invoice) */
.inv-step { display:flex; align-items:center; gap:.6rem; width:100%; padding:.7rem .85rem;
  border:1px solid var(--border); border-radius:var(--dw-btn-radius); background:var(--bg-elevated);
  color:var(--text-muted); font-size:.875rem; font-weight:600; text-align:left; cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease; }
.inv-step:hover { color:var(--text); border-color:var(--cta); box-shadow:0 0 0 1px var(--cta) inset; }
.inv-step__num { display:flex; align-items:center; justify-content:center; width:1.65rem; height:1.65rem; flex:0 0 auto;
  border-radius:999px; background:var(--nav-active); color:var(--text-muted); font-size:.8rem; font-weight:700;
  transition:background .15s ease,color .15s ease; }
.inv-step__label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-step__chevron { color:var(--text-muted); opacity:.5; flex:0 0 auto; }
.inv-step--active { color:var(--text); border-color:var(--cta); background:var(--bg-elevated);
  box-shadow:0 0 0 1px var(--cta) inset; }
.inv-step--active .inv-step__num { background:var(--primary); color:var(--primary-contrast); }
.inv-step--active .inv-step__chevron { color:var(--primary); opacity:1; }

/* ---- "Generating…" shimmer (AI description button) ---- */
@keyframes dw-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.dw-generating {
  color:#fff !important;
  border-color:transparent !important;
  background:linear-gradient(90deg, var(--cta), #a78bfa, #38bdf8, var(--cta)) !important;
  background-size:200% 100% !important;
  animation:dw-shimmer 1.2s linear infinite;
  cursor:progress;
}

/* ---- Sticky / fixed save & action bar ----
   Desktop: sticky at the bottom of the (flex) form column via margin-top:auto.
   Mobile (<640px): fixed to the viewport bottom — iOS Safari's sticky is unreliable
   inside flex-stretched containers, so we pin it explicitly and pad the content. */
.dw-savebar { position:sticky; bottom:1rem; margin:auto 0rem 0rem; z-index:30; }
@media (max-width:639.98px) {
  .dw-savebar { position:fixed; left:.75rem; right:.75rem; bottom:0; margin-top:0; }
  main:has(.dw-savebar) { padding-bottom:5.5rem; }
}

/* ---- Feature selector chips (vehicle.php Features tab) ---- */
.dw-feature { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; user-select:none;
  border:1px solid var(--border); border-radius:999px; padding:.4rem .8rem; font-size:.85rem; font-weight:500;
  color:var(--text-muted); background:var(--bg-elevated);
  transition:color .15s ease,background .15s ease,border-color .15s ease; }
.dw-feature:hover { color:var(--text); border-color:var(--cta); }
.dw-feature.is-selected { color:var(--primary-contrast); background:var(--cta); border-color:var(--cta); }
.dw-feature.is-selected::before { content:"\2713"; font-weight:700; } /* check mark */

/* ---- Vehicle media upload dropzone ---- */
.dw-dropzone { transition:border-color .15s ease, background .15s ease; }
.dw-dropzone.is-drag { border-color:var(--cta); background:var(--nav-active); }

/* ---- Vehicle media gallery (vehicle.php Media tab) ---- */
.dw-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.75rem; }
.dw-photo { position:relative; border:1px solid var(--border); border-radius:.5rem; overflow:hidden;
  background:var(--bg-elevated); aspect-ratio:4 / 3; }
.dw-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.dw-gallery.is-reorder .dw-photo { cursor:grab; }
.dw-gallery.is-reorder .dw-photo:active { cursor:grabbing; }
.dw-gallery.is-delete .dw-photo { cursor:pointer; }
.dw-gallery.is-delete .dw-photo:hover { outline:2px solid var(--danger); outline-offset:-2px; }
.dw-gallery.is-delete .dw-photo::after { content:"\00d7"; position:absolute; top:.25rem; right:.4rem;
  width:1.3rem; height:1.3rem; border-radius:999px; display:flex; align-items:center; justify-content:center;
  color:#fff; background:var(--danger); font-weight:700; font-size:1rem; line-height:1; }
.sortable-ghost { opacity:.4; }
.btn-ghost.is-active { border-color:var(--cta); color:var(--cta); }

/* Dropdown items (user menu) reuse .nav-item */
.nav-item { color:var(--text-muted); border-radius:var(--dw-btn-radius); transition:background .15s,color .15s; }
.nav-item:hover { background:var(--nav-highlight); color:var(--text); }
.nav-item.active { background:var(--nav-active); color:var(--text); font-weight:600; }

/* ---- Links ---- */
.dw-link { color:var(--cta); text-decoration:underline; text-underline-offset:2px; transition:color .15s ease; }
.dw-link:hover { color:var(--cta-hover); }

/* ---- Buttons ---- */
.btn-primary { background:var(--cta); color:var(--cta-contrast); border-radius:var(--dw-btn-radius); }
.btn-primary:hover { background:var(--cta-hover); }
.btn-ghost { color:var(--text-muted); border-radius:var(--dw-btn-radius); }
.btn-ghost:hover { background:var(--nav-highlight); color:var(--text); }

/* ---- Badges ---- */
.badge { border-radius:999px; font-size:.72rem; font-weight:600; padding:.15rem .55rem; display:inline-block; }
.badge-success { background:color-mix(in srgb,var(--success) 15%,transparent); color:var(--success); }
.badge-warning { background:color-mix(in srgb,var(--warning) 15%,transparent); color:var(--warning); }
.badge-info    { background:color-mix(in srgb,var(--info) 15%,transparent); color:var(--info); }
.badge-muted   { background:var(--primary-soft); color:var(--text-muted); }

/* ---- Alerts (success / danger / info banners; form error box) ---- */
.dw-alert-success { border-color:var(--success); transition:opacity .5s ease; }
.dw-alert-success.dw-alert-fade { opacity:0; }
.dw-alert-danger  { border-color:var(--danger); }
.dw-alert-warning { border-color:var(--warning); }
.dw-alert-info    { border-color:var(--info); }
.dw-form-error    { border-color:var(--danger); color:var(--danger); }

/* ---- Tables ---- */
table.dw-table { width:100%; border-collapse:collapse; }
.dw-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:600; padding:.75rem 1rem; border-bottom:1px solid var(--border); white-space:nowrap; }
.dw-table td { padding:.85rem 1rem; border-bottom:1px solid var(--border); font-size:.9rem; }
.dw-table tbody tr:hover { background:var(--nav-highlight); }
.dw-table tbody tr:last-child td { border-bottom:0; }

/* ---- Leads page: filter tabs + Grid.js table (moved from page-leads.php) ---- */
.lead-tab { color:var(--text); text-decoration:none; padding:.1rem .15rem; transition:color .15s ease; }
.lead-tab:hover { color:var(--info); }
.lead-tab__count { color:var(--text-muted); }
.lead-tab--active { color:var(--info); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.lead-tab--active .lead-tab__count { color:var(--info); }

/* Lead detail: status badge (read = muted, unread = highlighted). */
.lead-status-badge {
  display:inline-block; padding:.15rem .55rem; border-radius:9999px;
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  background:var(--bg-subtle); color:var(--text-muted); border:1px solid var(--border);
}
.lead-status-badge--unread { background:var(--info); color:var(--primary-contrast); border-color:var(--info); }

/* ---- Data tables (Grid.js) ----
   Shared styling for every dashboard data table. Add class "dw-datatable" to the
   Grid.js container div; clickable tables also add "dw-datatable--clickable".
   Per-table specifics (which columns are hidden) stay scoped by id below. */

/* Hide the Lead ID (index 0) and Unread flag (index 1) columns — both kept in
   the DOM: Lead ID for the row-click handler, Unread to bold unread rows. */
#leadsTable th.gridjs-th:first-child,
#leadsTable td.gridjs-td:first-child,
#leadsTable th.gridjs-th:nth-child(2),
#leadsTable td.gridjs-td:nth-child(2) { display:none; }

/* Hide the Review ID (index 0) column — kept in the DOM for the row-click. */
#reviewsTable th.gridjs-th:first-child,
#reviewsTable td.gridjs-td:first-child { display:none; }

/* Hide the Valuation ID (index 0) and Unread flag (index 1) columns — both kept
   in the DOM: Valuation ID for the row-click, Unread to bold unread rows. */
#valuationsTable th.gridjs-th:first-child,
#valuationsTable td.gridjs-td:first-child,
#valuationsTable th.gridjs-th:nth-child(2),
#valuationsTable td.gridjs-td:nth-child(2) { display:none; }

/* Hide the Stock ID (index 0) column — kept in the DOM for the row-click. */
#logsTable th.gridjs-th:first-child,
#logsTable td.gridjs-td:first-child { display:none; }

/* Hide the Account No. (index 0) column — kept in the DOM for the row-click. */
#supportAccountsTable th.gridjs-th:first-child,
#supportAccountsTable td.gridjs-td:first-child { display:none; }

/* Centre the Total / Forecourt / Sold count columns (cells 8–10). */
#supportAccountsTable th.gridjs-th:nth-child(8),
#supportAccountsTable td.gridjs-td:nth-child(8),
#supportAccountsTable th.gridjs-th:nth-child(9),
#supportAccountsTable td.gridjs-td:nth-child(9),
#supportAccountsTable th.gridjs-th:nth-child(10),
#supportAccountsTable td.gridjs-td:nth-child(10) { text-align:center; }

/* Logs: centre the Registration column (index 4, 5th cell). */
#logsTable th.gridjs-th:nth-child(5),
#logsTable td.gridjs-td:nth-child(5) { text-align:center; }

/* Logs: let the Description column (index 3, 4th cell) wrap and cap its width,
   so long descriptions don't overflow their single-line cell and overlap the
   Registration/Type columns. Overrides the global nowrap rule for this cell. */
#logsTable td.gridjs-td:nth-child(4) {
  white-space:normal; overflow-wrap:anywhere; max-width:360px;
}

/* Bold the whole row for unread enquiries / pending reviews. */
.dw-datatable tbody tr.lead-unread td.gridjs-td { font-weight:700; }

/* Follow the dashboard light/dark theme. */
.dw-datatable .gridjs-wrapper,
.dw-datatable .gridjs-footer,
.dw-datatable .gridjs-head { background:transparent; border:0; box-shadow:none; }
.dw-datatable .gridjs-wrapper { overflow-x:auto; } /* scroll instead of wrap when narrow */
/* Clear Grid.js's default white table/tbody backgrounds so the theme surface
   shows through transparent (odd) rows — otherwise dark mode shows white rows.
   The mermaid theme sets `.gridjs-tbody, td.gridjs-td { background:#fff }`. */
.dw-datatable table.gridjs-table,
.dw-datatable .gridjs-tbody { color:var(--text); background:transparent; font-size:.875rem; } /* match body text */

/* Collapse borders so every cell draws a clean, consistent 1px grid — don't rely
   on the mermaid theme's :first-child/:last-child edge rules, which break when
   columns are hidden (e.g. the leads table's hidden ID/Unread columns). */
.dw-datatable table.gridjs-table { border-collapse:collapse; }

/* Keep every cell on a single line — no line or word breaks. */
.dw-datatable th.gridjs-th,
.dw-datatable td.gridjs-td { white-space:nowrap; word-break:normal; overflow-wrap:normal; }
.dw-datatable td.gridjs-td { border:1px solid var(--border); background:transparent; font-size:.875rem; padding:8px 16px; }
.dw-datatable th.gridjs-th {
  background:var(--bg-subtle); color:var(--text-muted);
  border:1px solid var(--border); font-size:.80rem;
  vertical-align:middle; line-height:2;
}
/* Show the full header label instead of truncating it to the column's data width. */
.dw-datatable .gridjs-th-content { overflow:visible; text-overflow:clip; width:auto; }
.dw-datatable--clickable tbody tr { cursor:pointer; }
/* Zebra striping — odd rows transparent, even rows a subtle tint. */
.dw-datatable tbody tr:nth-child(even) td.gridjs-td { background:var(--bg-subtle); }
/* Hover wins over the stripe (declared after so it takes precedence). */
.dw-datatable tbody tr:hover td.gridjs-td { background:var(--nav-highlight); }
/* Full-width search box. */
.dw-datatable .gridjs-search { float:none; width:100%; }
.dw-datatable .gridjs-search-input { width:100%; }
/* Logs page: our own search + date select sit inline above the table. */
.dw-logs-filterbar { display:flex; align-items:flex-end; gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem; }
.dw-logs-filtergroup { display:flex; flex-direction:column; gap:.25rem; }
.dw-logs-filtergroup--search { flex:1 1 220px; }
.dw-logs-filtergroup--search .dw-input { width:100%; box-sizing:border-box; }
.dw-datatable input.gridjs-input {
  background:var(--bg-elevated); color:var(--text); border-color:var(--border); font-size:.875rem;
  width:100%; box-sizing:border-box;
}
.dw-datatable .gridjs-pagination,
.dw-datatable .gridjs-pagination .gridjs-summary { color:var(--text-muted); font-size:.875rem; }
.dw-datatable .gridjs-pagination button {
  background:var(--bg-elevated); color:var(--text); border-color:var(--border); font-size:.875rem;
}
.dw-datatable .gridjs-pagination button:disabled { opacity:.5; }
.dw-datatable .gridjs-pagination button.gridjs-currentPage {
  background:var(--sidebar-bg); color:#fff;
}
/* Mobile: stack pagination, centre the summary + page buttons, add gap. */
@media (max-width:640px) {
  .dw-datatable .gridjs-pagination { display:flex; flex-direction:column; align-items:center; gap:1rem; }
  .dw-datatable .gridjs-pagination .gridjs-summary,
  .dw-datatable .gridjs-pagination .gridjs-pages { float:none; margin:0; text-align:center; }
}

/* ---- Invoice editor tabs (styled via .lead-tab; .invoice-tab is the JS hook) ---- */
.invoice-tab { cursor:pointer; background:none; border:0; border-radius:0;
  border-bottom:1px dotted currentColor; padding-bottom:2px; }
/* Active tab: info-coloured, bold, text-underlined (no border). */
.invoice-tab.lead-tab--active {
  border-bottom:0;
  color:var(--info);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---- Forms ---- */
.dw-input { background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); border-radius:var(--dw-btn-radius); }
.dw-input::placeholder { color:var(--text-muted); }
.dw-input:focus { outline:none; border-color:var(--cta); box-shadow:0 0 0 3px color-mix(in srgb,var(--cta) 20%,transparent); }
.dw-input:disabled { background:var(--bg-subtle); color:var(--text-muted); cursor:not-allowed; }
textarea.dw-input { resize:vertical; min-height:2.75rem; }

/* Themed dropdown chevron — the native arrow renders dark in dark mode, so
   replace it with a light/dark SVG that follows the theme. */
select.dw-input {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:1rem;
  padding-right:2rem;
}
[data-theme="dark"] select.dw-input {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e5e5e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select.dw-input::-ms-expand { display:none; }

/* Grid.js sort arrows ship as dark SVGs — invert them in dark mode so they show. */
[data-theme="dark"] .dw-datatable .gridjs-sort-neutral,
[data-theme="dark"] .dw-datatable .gridjs-sort-asc,
[data-theme="dark"] .dw-datatable .gridjs-sort-desc { filter:invert(1) brightness(1.8); }
/* Colour picker — show a large, visible swatch instead of a thin strip */
input[type="color"].dw-input { height:2.75rem; padding:.25rem; cursor:pointer; }
input[type="color"].dw-input::-webkit-color-swatch-wrapper { padding:0; }
input[type="color"].dw-input::-webkit-color-swatch { border:none; border-radius:calc(var(--dw-btn-radius) - 2px); }
input[type="color"].dw-input::-moz-color-swatch { border:none; border-radius:calc(var(--dw-btn-radius) - 2px); }
.dw-lock { color:var(--text-muted); cursor:help; display:inline-flex; }

/* Custom help tooltip */
.dw-hint { position:relative; color:var(--text-muted); cursor:help; display:inline-flex; outline:none; }
.dw-hint:hover, .dw-hint:focus-visible { color:var(--cta); }
/* Let hint tooltips escape the rounded section cards instead of being clipped. */
section.dw-surface { overflow:visible; }
.dw-hint__pop {
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  z-index:200; width:max-content; max-width:220px; padding:.5rem .65rem;
  background:var(--text); color:var(--bg-elevated);
  font-size:.75rem; line-height:1.15rem; font-weight:400; text-align:left;
  border-radius:.45rem; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .12s ease;
}
.dw-hint:hover .dw-hint__pop, .dw-hint:focus-visible .dw-hint__pop { opacity:1; visibility:visible; }
.dw-hint__pop::after { content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-bottom-color:var(--text); }

/* Segmented Yes/No radio control — matches .dw-input sizing */
.dw-seg { display:flex; width:100%; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--dw-btn-radius); overflow:hidden; }
.dw-seg__opt { flex:1; margin:0; }
.dw-seg__opt input { position:absolute; opacity:0; width:0; height:0; }
.dw-seg__opt span { display:block; text-align:center; padding:.5rem .75rem; font-size:.85rem; line-height:1.25rem; color:var(--text-muted); cursor:pointer; transition:background .15s ease,color .15s ease; }
.dw-seg__opt + .dw-seg__opt span { border-left:1px solid var(--border); }
.dw-seg__opt input:checked + span { background:var(--primary-soft); color:var(--text); font-weight:600; }
/* Enabled/"on" state (always the first segment) highlights with the CTA colour. */
.dw-seg__opt:first-child input:checked + span { background:var(--cta); color:var(--primary-contrast); }
.dw-seg__opt input:focus-visible + span { box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--cta) 40%,transparent); }
.dw-seg__opt input:disabled + span { opacity:.5; cursor:not-allowed; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:8px; }

/* ---- Trix rich-text editor ---- */
/* Match Trix editor to the dashboard input styling */
trix-editor { min-height:12rem; }
trix-editor.dw-input { padding:0.5rem 0.75rem; }
/* Restore list markers that Tailwind's base reset strips */
trix-editor ul { list-style:disc; padding-left:1.5rem; }
trix-editor ol { list-style:decimal; padding-left:1.5rem; }
trix-editor li { display:list-item; }
trix-toolbar .trix-button-group { border-color:var(--border); }
trix-toolbar .trix-button { border-bottom-color:var(--border); }
/* Only allow bold + lists — hide every other control */
trix-toolbar .trix-button--icon-italic,
trix-toolbar .trix-button--icon-strike,
trix-toolbar .trix-button--icon-link,
trix-toolbar .trix-button--icon-heading-1,
trix-toolbar .trix-button--icon-quote,
trix-toolbar .trix-button--icon-code,
trix-toolbar .trix-button--icon-decrease-nesting-level,
trix-toolbar .trix-button--icon-increase-nesting-level,
trix-toolbar .trix-button-group--file-tools { display:none; }

/* ---- Print ---- */
/* Hide the app chrome and any element marked .dw-print-hide when printing,
   so a printed lead shows only the lead detail. */
@media print {
  /* App chrome: sidebar and top bar */
  #sidebar,
  #main > header,
  #mobileToggle,
  .dw-print-hide { display:none !important; }

  /* Drop the sidebar offset so content uses the full page width */
  #main { margin-left:0 !important; }
  main { padding:0 !important; max-width:none !important; }

  /* Flatten surfaces for clean, ink-friendly output */
  html, body { background:#fff !important; color:#000 !important; }
  .dw-surface { background:#fff !important; box-shadow:none !important; }
  a { color:#000 !important; text-decoration:none !important; }
}

/* ---- Offline notice (toggled by the connection check in footer.php) ---- */
.pc-offline-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem; font-size:.8rem; font-weight:600;
  background:var(--warning); color:#fff;
  box-shadow:0 -1px 8px rgba(0,0,0,.18);
}
.pc-offline-banner[hidden] { display:none; }