/* =============================================================================
   one.isurus.com — single-page app additions (modals, toasts, forms, tables).
   Uses the design tokens from app.css only.
   ============================================================================= */

body.spa-booting .app-shell { visibility: hidden; }

/* Views ------------------------------------------------------------------- */
.spa-view { display: flex; flex-direction: column; gap: var(--s-6); }
.spa-view > .page-header { margin-bottom: 0; }
.spa-loading { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) 0; }
.spa-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.spa-grid > .span-12 { grid-column: span 12; }
.spa-grid > .span-8  { grid-column: span 8; }
.spa-grid > .span-6  { grid-column: span 6; }
.spa-grid > .span-4  { grid-column: span 4; }
.spa-grid > .span-3  { grid-column: span 3; }
@media (max-width: 1100px) { .spa-grid > .span-8, .spa-grid > .span-6, .spa-grid > .span-4 { grid-column: span 12; } .spa-grid > .span-3 { grid-column: span 6; } }
@media (max-width: 640px)  { .spa-grid > .span-3 { grid-column: span 12; } }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.card-header .card-actions:empty { display: none; }
.detail-side { display: flex; flex-direction: column; gap: var(--s-4); }
.detail-main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.tab-panel { padding-top: var(--s-4); }
.tab-panel > * + * { margin-top: var(--s-4); }

/* Alerts ------------------------------------------------------------------ */
.spa-alert {
  padding: var(--s-3) var(--s-4); border-radius: var(--r); font-size: .875rem;
  background: var(--c-blue-bg); color: var(--c-blue); border: 1px solid rgba(2,132,199,.2);
}
.spa-alert.is-info    { background: var(--c-blue-bg); color: var(--c-blue); }
.spa-alert.is-error   { background: var(--c-red-bg);   color: var(--c-red);   border-color: rgba(220,38,38,.2); }
.spa-alert.is-success { background: var(--c-green-bg); color: var(--c-green); border-color: rgba(22,163,74,.2); }
.spa-alert.is-warning { background: var(--c-amber-bg); color: var(--c-amber); border-color: rgba(217,119,6,.2); }

/* Tables ------------------------------------------------------------------ */
.spa-table .filters-bar { margin-bottom: var(--s-3); }
.table tr.is-clickable { cursor: pointer; }
.table tr.is-clickable:hover td { background: var(--c-brand-light); }
.table td.row-actions { text-align: right; width: 48px; }
.table-footer[hidden] { display: none; }
.table .num, .num { text-align: right; font-variant-numeric: tabular-nums; }
.dropdown-menu .dropdown-item { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
.dropdown-menu.is-floating { position: fixed; top: auto; right: auto; }

/* Forms ------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form-grid > .full, .form-grid > .form-section-title, .form-grid > .form-static { grid-column: 1 / -1; }
.modal-sm .form-grid { grid-template-columns: 1fr; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-2); margin-top: var(--s-2); font-weight: 600; }
.form-group[hidden] { display: none; }
.form-error[hidden] { display: none; }
.form-error { color: var(--c-red); font-size: .8rem; }
.input.is-invalid { border-color: var(--c-red); }
textarea.input { resize: vertical; min-height: 72px; }
select.input[multiple] { min-height: 120px; }
.font-mono { font-family: var(--font-mono); font-size: .85rem; }
.checkbox-label { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: .875rem; }
.checkbox-label input { accent-color: var(--c-brand); width: 16px; height: 16px; }
.inline-form { display: flex; gap: var(--s-2); align-items: flex-end; flex-wrap: wrap; }

/* Modal ------------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(15, 23, 42, .45);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh var(--s-4) var(--s-4);
  overflow-y: auto; animation: spa-fade var(--t) ease;
}
.modal {
  background: var(--c-card); border-radius: var(--r-xl); box-shadow: var(--sh-xl);
  width: 100%; max-width: 560px; display: flex; flex-direction: column; max-height: 88vh;
  animation: spa-rise var(--t) ease;
}
.modal-sm { max-width: 420px; }
.modal-lg { max-width: 820px; }
.modal-xl { max-width: 1100px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-6) var(--s-3); }
.modal-title { font-size: 1.05rem; font-weight: 600; }
.modal-body { padding: var(--s-2) var(--s-6) var(--s-5); overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-6); border-top: 1px solid var(--c-border); }
@keyframes spa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spa-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.secret-box { margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--r); background: var(--c-page-bg); border: 1px dashed var(--c-border-2); word-break: break-all; }
.secret-box code { font-family: var(--font-mono); font-size: .85rem; }

/* Toasts ------------------------------------------------------------------ */
.toast-host { position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: 1100; display: flex; flex-direction: column; gap: var(--s-2); max-width: 420px; }
.toast {
  background: var(--c-sidebar-bg); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r);
  box-shadow: var(--sh-lg); font-size: .875rem; border-left: 4px solid var(--c-green);
  animation: spa-rise var(--t) ease; transition: opacity var(--t), transform var(--t);
}
.toast.is-error { border-left-color: var(--c-red); }
.toast.is-info  { border-left-color: var(--c-blue); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }

/* Support banner ---------------------------------------------------------- */
.support-banner {
  position: sticky; top: 0; z-index: 900; display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  background: var(--c-amber-bg); color: #92400e; border-bottom: 1px solid rgba(217,119,6,.35);
  padding: var(--s-2) var(--s-4); font-size: .875rem;
}
.support-banner[hidden] { display: none; }

/* Misc -------------------------------------------------------------------- */
.fav-btn.is-active { color: var(--c-amber); }
.fav-btn.is-active svg { fill: currentColor; }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.perm-group { border: 1px solid var(--c-border); border-radius: var(--r); padding: var(--s-3); }
.perm-group h4 { font-size: .85rem; margin-bottom: var(--s-2); }
.money-total { font-size: 1.1rem; font-weight: 700; }
.muted-box { background: var(--c-page-bg); border-radius: var(--r); padding: var(--s-4); }
.nav-item[data-route] .nav-icon:not(:has(svg)) { font-size: 15px; }
.kanban-card { cursor: pointer; }
pre.code { font-family: var(--font-mono); font-size: .8rem; background: var(--c-page-bg); border-radius: var(--r); padding: var(--s-3); overflow: auto; max-height: 360px; white-space: pre-wrap; word-break: break-word; }

/* ── Invoicing (views/invoices.js) ─────────────────────────────────────────── */
.invoice-totals { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-6); flex-wrap: wrap; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-border); }
.invoice-vat-summary { flex: 1 1 260px; max-width: 420px; }
.invoice-vat-summary .table td, .invoice-vat-summary .table th { padding: var(--s-1) var(--s-2); font-size: .8rem; }
.invoice-totals-list { flex: 0 0 300px; margin: 0; }
.invoice-totals-list .kv-val { text-align: right; }
.invoice-pdf-frame { width: 100%; height: 70vh; border: 1px solid var(--c-border); border-radius: var(--r); background: #fff; }
.spa-view > * { min-width: 0; } /* wide content (e.g. many settings tabs) scrolls inside its box instead of widening the page */
.main-area { min-width: 0; } /* a flex item: without this, wide content (the settings tab bar) widens the whole page */

/* Companies House search results (CRM "Look up") ------------------------- */
.company-pick-list { display: flex; flex-direction: column; gap: var(--s-2); max-height: 55vh; overflow-y: auto; }
.company-pick {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; cursor: pointer;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border-2); border-radius: var(--r); background: var(--c-card); font: inherit; color: inherit;
}
.company-pick:hover, .company-pick:focus-visible { border-color: var(--c-brand); background: var(--c-brand-light); }
.company-pick-name { font-weight: 600; }
.company-pick-meta { font-size: .8rem; color: var(--c-text-2); }

/* Organisation settings → Branding ---------------------------------------- */
.brand-preview { display: flex; margin-top: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r); overflow: hidden; max-width: 460px; font-size: .8rem; }
.brand-preview-side { background: var(--s); color: var(--st); opacity: .97; display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-2); width: 150px; }
.brand-preview-nav { padding: 4px var(--s-2); border-radius: var(--r-sm); opacity: .75; }
.brand-preview-nav.is-active { opacity: 1; font-weight: 600; background: color-mix(in srgb, var(--p) 25%, transparent); border-left: 3px solid var(--p); }
.brand-preview-main { flex: 1; background: var(--c-page-bg); padding: var(--s-4); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.brand-preview-link { color: var(--p); font-weight: 500; }
.brand-preview-btn { background: var(--p); color: #fff; padding: 6px 12px; border-radius: var(--r); font-weight: 600; }
.brand-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.brand-logo-preview { height: 96px; border: 1px solid var(--c-border); border-radius: var(--r); display: flex; align-items: center; justify-content: center; padding: var(--s-3); }
.brand-logo-preview img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* Tenant list: isolation mode icon (hover text) */
.iso-icon { display: inline-flex; align-items: center; gap: 2px; cursor: help; }
.iso-icon svg { display: block; }
.iso-moving { font-size: 11px; color: var(--c-amber, #b45309); }

/* Payment milestones */
.ms-progress { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--c-border); }
.ms-progress > span { display: block; height: 100%; }
.ms-progress .is-paid { background: var(--c-green, #16a34a); }
.ms-progress .is-invoiced { background: var(--c-brand); }
.ms-progress .is-reached { background: var(--c-amber, #d97706); }
.ms-progress .is-pending { background: transparent; }
.ms-rows .form-grid { grid-template-columns: 2fr 0.9fr 1fr 1fr auto; align-items: end; }
.ms-row { display: grid; grid-template-columns: minmax(0, 2fr) 120px 130px 150px 36px; gap: var(--s-2); align-items: center; margin-bottom: var(--s-2); }
.ms-row .input { width: 100%; }
@media (max-width: 720px) { .ms-row { grid-template-columns: 1fr 1fr; } }

/* API documentation */
.api-doc-op { border: 1px solid var(--c-border); border-radius: var(--r); margin-bottom: var(--s-2); }
.api-doc-op > summary { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); cursor: pointer; list-style: none; }
.api-doc-op > summary::-webkit-details-marker { display: none; }
.api-doc-op[open] > summary { border-bottom: 1px solid var(--c-border); }
.api-doc-body { padding: var(--s-3); }
.api-method { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; border-radius: 4px; padding: 2px 6px; min-width: 56px; text-align: center; color: #fff; }
.api-method.get { background: #2563eb; } .api-method.post { background: #16a34a; } .api-method.put { background: #b45309; }
.api-method.patch { background: #7c3aed; } .api-method.delete { background: #dc2626; }
.api-path { font-family: var(--font-mono, monospace); font-size: 13px; word-break: break-all; }
.api-schema { font-family: var(--font-mono, monospace); font-size: 12px; background: var(--c-bg-subtle, #f8fafc); border-radius: var(--r); padding: var(--s-2) var(--s-3); overflow-x: auto; white-space: pre; max-height: 360px; }
.api-doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.api-doc-tags { position: sticky; top: var(--s-4); max-height: calc(100vh - 140px); overflow-y: auto; }
.api-doc-tags a { display: block; padding: 4px 8px; border-radius: 6px; font-size: 13px; color: inherit; text-decoration: none; }
.api-doc-tags a:hover, .api-doc-tags a.is-active { background: var(--c-brand-light); color: var(--c-brand); }
@media (max-width: 900px) { .api-doc-layout { grid-template-columns: 1fr; } .api-doc-tags { position: static; max-height: none; } }
.api-doc-intro { white-space: pre-wrap; }

/* ── Support tickets ─────────────────────────────────────────────────────── */
.support-btn {
  position: relative; display: flex; align-items: center; gap: var(--s-2); padding: 7px var(--s-3);
  border: 1px solid var(--c-border); border-radius: var(--r); background: var(--c-card); color: var(--c-text-2);
  font-size: .8125rem; font-weight: 500; transition: background var(--t-fast), color var(--t-fast);
}
.support-btn:hover { background: var(--c-page-bg); color: var(--c-text); }
.support-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--c-red); color: #fff;
  font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center;
}
@media (max-width: 768px) { .support-btn .btn-label { display: none; } }

.ticket-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); border-bottom: 1px solid var(--c-border); }
.ticket-tab { padding: var(--s-2) var(--s-3); border-bottom: 2px solid transparent; color: var(--c-text-2); font-size: .875rem; font-weight: 500; text-decoration: none; margin-bottom: -1px; }
.ticket-tab:hover { color: var(--c-text); }
.ticket-tab.is-active { color: var(--c-brand); border-bottom-color: var(--c-brand); }
.ticket-overdue { margin-top: 2px; display: inline-block; }
.ticket-list .filters-bar { flex-wrap: wrap; }
.ticket-list .filters-bar > .input-group { min-width: 220px; }
.ticket-verify { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

.ticket-thread { display: flex; flex-direction: column; gap: var(--s-3); }
.ticket-comment { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); background: var(--c-card); }
.ticket-comment.is-support { border-left: 3px solid var(--c-brand); }
.ticket-comment.is-private { background: var(--c-amber-bg); border-color: rgba(217,119,6,.35); }
.ticket-comment-head { display: flex; gap: var(--s-2); align-items: flex-start; margin-bottom: var(--s-2); }
.ticket-comment-head .badge { margin-left: 2px; }
.ticket-comment-files { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ticket-comment-files:empty { display: none; }
.ticket-event { font-size: .8125rem; color: var(--c-text-2); padding: 0 var(--s-2); }
.ticket-event.is-private { color: var(--c-amber); }
.ticket-composer { display: flex; flex-direction: column; gap: var(--s-3); border-top: 1px solid var(--c-border); padding-top: var(--s-4); margin-top: var(--s-2); }
.ticket-composer-actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ticket-composer-actions > .btn-primary { margin-left: auto; }
.ticket-files { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ticket-file-btn { cursor: pointer; }
.ticket-file { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; }
.ticket-file.is-block { display: flex; justify-content: space-between; border-bottom: 1px solid var(--c-border); padding: var(--s-1) 0; }
.ticket-file.is-block:last-child { border-bottom: 0; }
.ticket-file.is-private .ticket-file-open { color: var(--c-amber); }
.ticket-file-open { max-width: 220px; overflow: hidden; }
.ticket-controls { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-border); }
.ticket-controls .form-group { margin: 0; }
.ticket-share-row { padding: var(--s-1) 0; }
.ticket-draft { display: flex; flex-direction: column; gap: var(--s-2); }
.ticket-draft-text { white-space: pre-wrap; background: var(--c-page-bg); border: 1px solid var(--c-border); border-radius: var(--r); padding: var(--s-3); font-size: .875rem; }
.ticket-draft.is-private .ticket-draft-text { background: var(--c-amber-bg); }
.ticket-draft-why { margin: 0; }
.ticket-email-address { font-size: .875rem; user-select: all; word-break: break-all; }
.plain-list { margin: 0; padding-left: 1.1rem; }
.break-all { word-break: break-all; }

/* Markdown (ticket descriptions and comments) */
.markdown-body { font-size: .875rem; line-height: 1.6; color: var(--c-text); overflow-wrap: anywhere; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body pre, .markdown-body blockquote { margin: 0 0 var(--s-3); }
.markdown-body ul, .markdown-body ol { padding-left: 1.4rem; }
.markdown-body ul { list-style: disc; } .markdown-body ol { list-style: decimal; }
.markdown-body li { display: list-item; }
.plain-list { list-style: disc; }
.markdown-body h3, .markdown-body h4, .markdown-body h5 { margin: var(--s-3) 0 var(--s-2); font-weight: 600; }
.markdown-body h3 { font-size: 1.05rem; } .markdown-body h4 { font-size: .975rem; } .markdown-body h5 { font-size: .9rem; }
.markdown-body code { font-family: var(--font-mono); font-size: .8125rem; background: var(--c-page-bg); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 0 4px; }
.markdown-body pre { background: var(--c-page-bg); border: 1px solid var(--c-border); border-radius: var(--r); padding: var(--s-3); overflow-x: auto; }
.markdown-body pre code { border: 0; padding: 0; background: none; }
.markdown-body blockquote { border-left: 3px solid var(--c-border-2); padding-left: var(--s-3); color: var(--c-text-2); }
.markdown-body hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-3) 0; }
.markdown-body a { color: var(--c-brand); text-decoration: underline; }

.md-editor { border: 1px solid var(--c-border); border-radius: var(--r); background: var(--c-card); }
.md-editor:focus-within { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb), .12); }
.md-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--c-border); flex-wrap: wrap; }
.md-tool { min-width: 28px; height: 26px; padding: 0 6px; border-radius: var(--r-sm); color: var(--c-text-2); font-size: .8125rem; }
.md-tool:hover:not(:disabled) { background: var(--c-page-bg); color: var(--c-text); }
.md-tool:disabled { opacity: .4; }
.md-spacer { flex: 1; }
.md-tabs { display: flex; gap: 2px; }
.md-tab { padding: 2px 10px; border-radius: var(--r-sm); font-size: .75rem; color: var(--c-text-2); }
.md-tab.is-active { background: var(--c-page-bg); color: var(--c-text); font-weight: 600; }
.md-editor .md-input { border: 0; box-shadow: none; border-radius: 0 0 var(--r) var(--r); resize: vertical; min-height: 90px; }
.md-editor .md-input:focus { box-shadow: none; }
.md-preview { padding: var(--s-3); min-height: 90px; }

/* Vehicles: file chips on history records */
.btn-link { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; }
.btn-link:hover, .btn-link:focus-visible { text-decoration: underline; }

/* Multi-select list filters (core.js multiFilter / filterBar) and the "filter on" line. */
.ms-filter { position: relative; }
.ms-filter-btn { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ms-filter-btn.is-filtered, .filters-bar select.is-filtered { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.filters-bar .checkbox-label.is-filtered { color: var(--c-brand); font-weight: 600; }
.ms-caret { margin-left: 6px; font-size: .75em; }
.ms-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(300px, calc(100vw - 32px)); background: var(--c-card); border: 1px solid var(--c-border-2); border-radius: var(--r); box-shadow: var(--sh-lg); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.ms-list { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.ms-list .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: .8125rem; padding: 3px 0; }
.ms-foot { display: flex; justify-content: space-between; }
.filter-active-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--s-3); }
.filter-active-title { font-weight: 600; }
.gantt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border: 1px solid var(--c-border-2); border-radius: 999px; background: var(--c-card); font-size: .75rem; }
.gantt-chip-x { border: 0; background: none; cursor: pointer; color: var(--c-text-2); padding: 0 4px; font-size: .75rem; line-height: 1; }
.gantt-chip-x:hover, .gantt-chip-x:focus-visible { color: var(--c-red); }