.ui-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.side-bottom form {
    margin: 0;
}

.side-bottom .side-user {
    color: var(--text);
    text-decoration: none;
}

.banner[hidden] {
    display: none;
}

.banner button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--red);
    color: #fff;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

.validation-message,
.text-danger {
    color: var(--red) !important;
}

.account-panel {
    max-width: 520px;
    margin: 32px auto;
}

.account-panel .form-control,
.account-panel .form-check-input {
    background: var(--steel);
    border-color: var(--steel);
    color: var(--text);
}

.account-panel .form-floating > label {
    color: var(--muted);
}

.project-tabs {
    height: 34px;
    background: var(--panel);
    border-bottom: 1px solid var(--steel);
    display: flex;
    padding-left: 16px;
}

.project-tabs a {
    border-bottom: 2px solid transparent;
    color: var(--muted);
    padding: 8px 15px 0;
    font-size: 12px;
}

.project-tabs a.active {
    border-color: var(--brass);
    color: var(--brass);
}

.metric-list {
    display: grid;
    gap: 8px;
}

.empty-state {
    padding: 28px;
    text-align: center;
    color: var(--muted);
}

/* Restore the original FlashFix compact sidebar nav. Bootstrap also defines .nav, so keep this scoped. */
.sidebar .nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 8px 4px;
    margin: 0;
    flex: 1 1 auto;
    overflow: auto;
}

.sidebar .nav a {
    width: 100%;
    height: 33px;
    min-height: 33px;
    flex: 0 0 33px;
    margin: 0;
}

.sidebar .nav a + a {
    margin-top: 0;
}

.sidebar .nav .count {
    margin-left: auto;
}

.sidebar.collapsed .nav a,
.sidebar.collapsed .side-action {
    width: auto;
}

.sidebar .side-bottom {
    flex: none;
}

.sidebar .side-action,
.sidebar .side-user {
    width: 100%;
    margin: 0;
}

/* Unified FlashFix theme layer: one token system for Blazor pages and Bootstrap-backed forms. */
:root {
    color-scheme: dark;
    /* Make Bootstrap components (e.g. .card sets color:var(--bs-body-color)) follow the FlashFix
       theme instead of Bootstrap's default near-black #212529, which was invisible in dark mode. */
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --surface-page: var(--bg);
    --surface-panel: var(--panel);
    --surface-raised: rgba(30, 42, 56, .35);
    --surface-control: var(--steel);
    --surface-hover: color-mix(in srgb, var(--steel), var(--blue) 14%);
    --border: var(--steel);
    --border-soft: color-mix(in srgb, var(--steel), transparent 35%);
    --accent: var(--brass);
    --accent-ink: #10151c;
    --chart-grid: color-mix(in srgb, var(--steel), transparent 8%);
    --chart-primary: var(--blue);
    --score-good: var(--green);
    --score-danger: var(--red);
    --focus-ring: color-mix(in srgb, var(--brass), transparent 82%);
}

:root.light {
    --surface-page: #f4f6f8;
    --surface-panel: #ffffff;
    --surface-raised: #ffffff;
    --surface-control: #f0f4f7;
    --surface-hover: #e9eff4;
    --border: #d6dfe7;
    --border-soft: #e5ebf0;
    --accent-ink: color-mix(in srgb, var(--brass), #000 34%);
    --chart-grid: #dce4eb;
    --chart-primary: #496b8c;
    --focus-ring: color-mix(in srgb, var(--brass), #ffffff 86%);
    /* The accent colours are tuned for the dark theme; darken them for legible text on white. */
    --green: #15803d;
    --orange: #b45309;
    --purple: #7c3aed;
}

/* Light-theme contrast: status badge / accent text on white was too pale. */
.light .status-quoted { color: #0369a1; }
.light .status-progress { color: #a86a12; }
.light .status-survey { color: #6d28d9; }
.light .status-ordered { color: #047857; }
.light .status-lead { color: #1d4ed8; }
.light .status-pending { color: #b45309; }
.light .gold { color: #8a6212; }
.light .tabs button.active,
.light .settings-tabs button.active { color: #8a6212; }
.light .link-button { color: #8a6212; }

/* The TopBar subtitle badge inherited white (invisible on a light background) — make it theme-aware. */
.topbar .sub .badge { color: var(--muted); }

/* Secondary <small> text inside table cells must drop to its own line, not run into the value
   before it (e.g. Reminders "14 Jun 2026" + "14 days overdue" were joining on one line). */
.data-table td small { display: block; margin-top: 2px; }
/* Keep dense action columns from being clipped at the panel edge — let buttons wrap if needed. */
.data-table td.row-actions { flex-wrap: wrap; justify-content: flex-start; gap: 6px; }

html,
body,
#app {
    background: var(--surface-page);
    color: var(--text);
}

body,
.shell,
.main,
.sidebar,
.topbar,
.body,
.card,
.panel,
.rail,
.quote-main,
.quote-side,
.project-list,
.customer-head,
.tabs,
.project-tabs,
.field,
.btn,
.side-action,
.side-user,
.unit-row,
.toggle-row,
.choice,
.finance-option,
.data-table tr,
.account-panel .form-control,
.account-panel .form-check-input {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.main,
.body,
.quote-main,
.preview,
.tab-body {
    background: var(--surface-page);
}

.card,
.chart-card,
.table-wrap,
.lead-card,
.task {
    background: var(--surface-panel);
    border-color: var(--border);
}

.panel {
    background: var(--surface-raised);
    border-color: var(--border);
}

.field,
.account-panel .form-control,
.account-panel .form-check-input {
    background: var(--surface-control);
    border-color: var(--border);
    color: var(--text);
}

.field:focus,
.account-panel .form-control:focus {
    border-color: var(--brass);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.account-panel .form-floating > label,
.account-panel .form-check-label,
.account-panel .form-text {
    color: var(--muted);
}

.account-panel .form-floating > .form-control:focus ~ label,
.account-panel .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--muted);
}

.light .account-panel .form-floating > label::after {
    background: transparent;
}

.theme-icon-moon {
    display: none;
}

.light .theme-icon-sun {
    display: none;
}

.light .theme-icon-moon {
    display: block;
}

.theme-action[data-theme="light"] {
    color: var(--accent-ink);
}

.accent-preset.active {
    border-color: var(--brass);
    background: color-mix(in srgb, var(--brass), transparent 92%);
}

.light .accent-preset.active {
    background: color-mix(in srgb, var(--brass), #fff 90%);
}

.data-table td,
.data-table th,
.quote-line,
.spec-line,
.timeline-item,
.comm-row {
    border-color: var(--border-soft);
}

.opportunity,
.unit-row,
.toggle-row,
.choice,
.finance-option,
.attachment-row,
.lead-meta > span:last-child,
.comm-badge {
    background: var(--surface-control);
    border-color: var(--border);
}

.opportunity:hover,
.unit-row:hover,
.choice:hover,
.finance-option:hover,
.attachment-row:hover {
    background: var(--surface-hover);
}

.score-bar {
    background: var(--surface-control);
}

.chart text {
    fill: var(--muted);
}

::selection {
    background: color-mix(in srgb, var(--brass), transparent 62%);
    color: var(--text);
}

/* FlashFix Pro authentication template - direct match for the supplied v5 login screen. */
.auth-page-shell {
    min-height: 100vh;
    background: #0f1b3d;
    overflow: hidden;
}

.ff-auth-root {
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background: #0f1b3d;
    color: #0f1b3d;
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
}

.ff-auth-left {
    position: relative;
    z-index: 10;
    width: 40%;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.ff-auth-utility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.ff-auth-support-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ff-auth-link {
    color: #3b6fa0;
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    letter-spacing: .03em;
    text-decoration: none;
    transition: color .15s ease;
}

.ff-auth-link:hover {
    color: #0f1b3d;
    text-decoration: underline;
}

.ff-auth-support {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ff-auth-support i {
    font-size: .65rem;
}

.ff-auth-form-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 56px;
    overflow-y: auto;
    scrollbar-width: none;
}

.ff-auth-form-wrapper::-webkit-scrollbar,
.ff-auth-root::-webkit-scrollbar {
    display: none;
}

.ff-auth-logo-block {
    margin-bottom: 32px;
}

.ff-auth-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ff-auth-logo-mark {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ff-auth-logo-mark i {
    font-size: 1.1rem;
}

.ff-auth-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The brand mark is the real logo image — kill the letter-block chrome behind it. */
img.logo,
.presentation-brand img.logo {
    background: none;
    border-radius: 0;
    object-fit: contain;
    padding: 1px;
}

.ff-auth-product {
    color: #0f1b3d;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
}

.ff-auth-version {
    margin-top: 2px;
    color: #3b6fa0;
    font-family: 'DM Sans', sans-serif;
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ff-auth-rhythm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.ff-auth-rhythm span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: #3b6fa0;
}

.ff-auth-rhythm span:first-child {
    width: 32px;
    background: #1e3a5f;
}

.ff-auth-rhythm span:nth-child(2) {
    width: 12px;
    opacity: .5;
}

.ff-auth-rhythm span:nth-child(3) {
    width: 6px;
    opacity: .25;
}

.ff-auth-form {
    display: grid;
    gap: 16px;
}

.ff-auth-field-group {
    display: grid;
    gap: 6px;
}

.ff-auth-label {
    display: block;
    margin: 0;
    color: #4a5f7a;
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ff-auth-label span {
    margin-left: 4px;
    color: #94a3b8;
    font-family: 'DM Sans', sans-serif;
    font-size: .65rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.ff-auth-password-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.ff-auth-forgot {
    font-size: .68rem;
}

.ff-auth-input-wrap {
    position: relative;
}

.ff-auth-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    color: #94a3b8;
    font-size: .75rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.ff-auth-input {
    width: 100%;
    min-height: 41px;
    padding: 10px 12px 10px 32px;
    border: 1.5px solid #c5cfe0;
    border-radius: 4px;
    outline: 0;
    background: #f5f7fb;
    color: #0f1b3d;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    line-height: 1.25;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ff-auth-input::placeholder {
    color: #94a3b8;
}

.ff-auth-input:focus {
    border-color: #1e3a5f;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .10);
}

.ff-auth-password-input {
    padding-right: 36px;
}

.ff-auth-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    padding: 0;
    border: 0;
    background: none;
    color: #8a99b0;
    font-size: .75rem;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .15s ease;
}

.ff-auth-password-toggle:hover {
    color: #1e3a5f;
}

.ff-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}

.ff-auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #475569;
    font-family: 'DM Sans', sans-serif;
    font-size: .75rem;
    cursor: pointer;
}

.ff-auth-checkbox {
    width: 14px;
    height: 14px;
    margin: 0;
    border-radius: 2px;
    accent-color: #1e3a5f;
}

.ff-auth-submit {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 16px;
    border: 0;
    border-radius: 4px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f1b3d 100%);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}

.ff-auth-submit:hover {
    background: linear-gradient(135deg, #3b6fa0 0%, #1e3a5f 100%);
    box-shadow: 0 4px 18px rgba(30, 58, 95, .28);
    transform: translateY(-1px);
}

.ff-auth-submit:active {
    transform: translateY(0);
}

.ff-auth-validation {
    margin: 0;
    color: #dc2626;
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
}

.ff-auth-compliance {
    padding: 16px 32px 20px;
    border-top: 1px solid #f1f5f9;
    background: #fff;
}

.ff-auth-compliance-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ff-auth-compliance-icon {
    flex: none;
    margin-top: 2px;
    color: #1e3a5f;
    font-size: .85rem;
}

.ff-auth-compliance-title {
    margin-bottom: 2px;
    color: #0f1b3d;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ff-auth-compliance p {
    margin: 0;
    color: #8a99b0;
    font-family: 'DM Sans', sans-serif;
    font-size: .68rem;
    line-height: 1.55;
    letter-spacing: .01em;
}

.ff-auth-right {
    position: relative;
    flex: 1;
    width: 60%;
    overflow: hidden;
}

.ff-auth-bg-zoom {
    position: absolute;
    inset: 0;
    animation: ff-auth-zoom-in 8s ease-out forwards;
    will-change: transform;
}

.ff-auth-bg-zoom img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ff-auth-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15, 27, 61, .62) 0%, rgba(30, 58, 95, .38) 50%, rgba(10, 18, 40, .72) 100%);
}

.ff-auth-right-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 56px;
}

@keyframes ff-auth-zoom-in {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

@media (max-width: 1280px) {
    .ff-auth-form-wrapper {
        padding-right: 40px;
        padding-left: 40px;
    }
}

@media (max-width: 768px) {
    .ff-auth-right {
        display: none;
    }

    .ff-auth-left {
        width: 100%;
        min-width: 0;
    }

    .ff-auth-root {
        min-height: 100vh;
        overflow-y: auto;
    }

    .ff-auth-form-wrapper {
        padding: 32px 28px;
    }

    .ff-auth-utility,
    .ff-auth-compliance {
        padding-right: 28px;
        padding-left: 28px;
    }
}

/* Working CRM, Projects, Calendar and Settings refinements. */
.crm-register-grid { grid-template-columns: 1.2fr .8fr; }
.small-copy { font-size: 9px; }
.calendar-booking-panel { margin-bottom: 12px; }
.calendar-header-row { min-height: 40px; }
.schedule-title { border: 0; }
.calendar-day-number { text-align: right; }
.calendar-appt-meta { margin-top: 5px; }
.calendar-appt-foot { margin-top: 10px; border-top: 1px solid var(--steel); padding-top: 5px; display: flex; justify-content: space-between; gap: 10px; }
.calendar-appt-actions { margin-top: 8px; gap: 6px; }
.appt-compact { width: auto; margin-top: 8px; padding: 6px; border-left-width: 2px; }
.project-item-status, .project-item-activity { float: right; }
.project-product-card, .project-edit-panel { margin-top: 12px; }
.project-next-action { border-color: color-mix(in srgb, var(--brass), transparent 65%); background: color-mix(in srgb, var(--brass), transparent 90%); }
.project-action-row { margin-top: 8px; }
.proj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; margin-top: 5px; }
.proj-meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 400; min-width: 0; }
.proj-meta-item .ui-icon { width: 13px; height: 13px; color: var(--brass); }
.proj-meta-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-meta-link { text-decoration: none; }
.proj-meta-link:hover { color: var(--text); }
.proj-postcode { margin-left: 2px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); border: 1px solid color-mix(in srgb, var(--brass), transparent 65%); border-radius: 5px; padding: 1px 6px; }.settings-locked { max-width: 620px; }
.settings-tabs button.active { border-color: var(--brass); color: var(--brass); }
@media(max-width:720px){.crm-register-grid{grid-template-columns:1fr}.calendar-head{gap:8px;flex-wrap:wrap}.calendar-grid{overflow:auto}.project-layout{display:block}.project-list{display:block;width:auto;max-height:260px}.customer-stats{display:grid;grid-template-columns:repeat(2,1fr)}}

/* CRUD drawers, confirmation modals and operational page refinements. */
.drawer-backdrop,
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, #000, transparent 42%);
    backdrop-filter: blur(8px);
    z-index: 80;
}

.app-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, calc(100vw - 18px));
    z-index: 90;
    background: var(--surface-panel);
    border-left: 1px solid var(--border);
    box-shadow: -22px 0 48px rgba(0,0,0,.28);
    padding: 20px;
    overflow: auto;
}

.drawer-head,
.drawer-actions,
.row-actions,
.inline-actions,
.calendar-toolbar,
.lead-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-head,
.drawer-actions {
    justify-content: space-between;
}

.drawer-head {
    margin-bottom: 18px;
}

.drawer-head small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.drawer-actions {
    margin-top: 18px;
    justify-content: flex-end;
}

.icon-button,
.link-button {
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.icon-button {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.link-button {
    color: var(--brass);
    font-weight: 700;
}

.form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-wide {
    grid-column: 1 / -1;
}

/* The page's animated .main creates a stacking context, trapping any drawer/modal z-index
   beneath the floating mobile nav toggle (z-index 75). While an overlay is open the toggle is
   pointless — the backdrop already covers the sidebar — so hide it to stop it painting over the
   overlay header on mobile. Fixes every drawer/modal on the page. */
body:has(.drawer-backdrop, .modal-backdrop) .mobile-nav-toggle {
    display: none;
}

.lead-head-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lead-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color .18s, border-color .18s, background-color .18s;
}

.lead-view-btn:hover {
    color: var(--brass);
    border-color: var(--brass);
    background: color-mix(in srgb, var(--brass), transparent 92%);
}

.lead-view-btn .ui-icon {
    width: 13px;
    height: 13px;
}

.detail-drawer {
    width: min(560px, calc(100vw - 18px));
    display: flex;
    flex-direction: column;
}

.detail-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.detail-tabs button {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.detail-tabs button.active {
    color: var(--brass);
    border-bottom-color: var(--brass);
}

.detail-readonly {
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    display: grid;
    gap: 8px;
}

.detail-timeline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 4px;
}

.dt-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 12px;
    position: relative;
    padding-bottom: 16px;
}

.dt-row:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 14px;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.dt-dot {
    width: 11px;
    height: 11px;
    margin-top: 3px;
    border-radius: 50%;
    border: 2px solid var(--brass);
    background: var(--surface-panel);
    z-index: 1;
}

.dt-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.dt-detail {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.dt-when {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brass);
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
}

.detail-appointments {
    margin-top: 14px;
}

.detail-drawer .form-section + .form-section,
.detail-drawer .detail-readonly {
    margin-top: 18px;
}

.detail-lead-meta {
    margin-top: 14px;
}

.detail-recorded-interest {
    margin: 10px 0 0;
}

.detail-recorded-interest span {
    opacity: .7;
}

.detail-appointments .unit-row > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-appointments .unit-row small {
    color: var(--muted);
}

.confirm-modal {
    width: min(420px, calc(100vw - 28px));
    margin: 16vh auto 0;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 18px 45px rgba(0,0,0,.32);
}

.btn.danger {
    border-color: color-mix(in srgb, #ef4444, transparent 45%);
    background: #ef4444;
    color: #fff;
}

.support-ticket-button {
    width: 100%;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.calendar-toolbar {
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-right: 8px;
    border-right: 1px solid var(--border);
}

.calendar-current-date {
    min-width: 92px;
    text-align: center;
}

.lead-footer-actions {
    justify-content: space-between;
}

.lead-footer-actions .btn {
    min-height: 32px;
}

.tenant-admin-grid,
.inventory-admin-grid {
    grid-template-columns: 1.25fr .75fr;
}

@media(max-width: 820px) {
    .tenant-admin-grid,
    .inventory-admin-grid,
    .form-grid.two {
        grid-template-columns: 1fr;
    }

    .calendar-toolbar {
        width: 100%;
        justify-content: flex-start;
        border-right: 0;
        padding-right: 0;
    }

    .lead-footer-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Dark table readability and loading states. */
.data-table,
.data-table td,
.data-table th {
    color: var(--text);
}

.data-table tbody tr {
    background: color-mix(in srgb, var(--surface-panel), transparent 6%);
}

.data-table tbody tr:hover {
    background: color-mix(in srgb, var(--brass), transparent 90%);
}

.light .data-table,
.light .data-table td,
.light .data-table th {
    color: var(--ink);
}

button:disabled,
.btn:disabled {
    opacity: .62;
    cursor: not-allowed;
}

.loading-dot {
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: -2px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.service-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.service-item-card {
    overflow: hidden;
    padding: 0;
}

.service-photo {
    height: 150px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--border);
}

.service-card-body {
    padding: 14px;
}

.service-taxonomy-grid {
    grid-template-columns: 1fr 1fr;
}

.status-panel {
    margin-bottom: 12px;
    border-color: color-mix(in srgb, var(--brass), transparent 64%);
}

@media(max-width: 820px) {
    .service-taxonomy-grid { grid-template-columns: 1fr; }
}

/* Service Catalogue drill-down: Category › Subcategory › Items */
.catalogue-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 12px;
    margin-bottom: 16px;
    align-items: start;
}

.catalogue-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 68vh;
    overflow: hidden;
}

.catalogue-col-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.catalogue-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, padding .18s ease;
}

.catalogue-row:hover { background: var(--surface-hover); }

.catalogue-row.active {
    background: var(--surface-control);
    border-left: 3px solid var(--brass);
    padding-left: 10px;
}

.catalogue-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.catalogue-row-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalogue-row-main small { font-size: 9px; }

.catalogue-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 6px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .2s ease, opacity .18s ease;
}

.catalogue-row:hover .catalogue-row-actions,
.catalogue-row.active .catalogue-row-actions {
    max-height: 40px;
    opacity: 1;
}

.btn-mini { height: 24px; padding: 0 9px; font-size: 11px; }

.tenant-console-columns {
    grid-template-columns: minmax(300px, .85fr) minmax(0, 1.65fr);
}

.tenant-list-col,
.tenant-workspace-col {
    max-height: calc(100vh - 150px);
}

.tenant-filters,
.tenant-panel-toolbar {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--border-soft);
}

.tenant-panel-toolbar {
    grid-template-columns: minmax(180px, 1fr) auto;
    align-items: center;
}

.tenant-user-toolbar {
    grid-template-columns: minmax(180px, 1fr) minmax(130px, .55fr) minmax(130px, .55fr) auto;
}

.tenant-subscription-toolbar {
    grid-template-columns: minmax(130px, .35fr) minmax(160px, .55fr) auto;
}

.tenant-row-actions {
    flex-wrap: wrap;
}

.tenant-workspace-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}

.tenant-active-subscription {
    min-width: 180px;
    display: grid;
    gap: 2px;
    text-align: right;
}

.tenant-workspace-actions {
    display: flex;
    gap: 8px;
    flex: none;
}

.tenant-row-end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.tenant-row-chevron {
    display: inline-flex;
    color: var(--muted);
    opacity: .45;
    transition: transform .16s ease, opacity .16s ease, color .16s ease;
}

.tenant-row-chevron svg {
    width: 16px;
    height: 16px;
}

.tenant-row:hover .tenant-row-chevron,
.tenant-row.active .tenant-row-chevron {
    opacity: 1;
    color: var(--brass);
    transform: translateX(2px);
}

.tenant-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}

.usage-metric {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised);
}

.usage-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.usage-metric-head span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
}

.usage-metric-head span svg {
    width: 13px;
    height: 13px;
}

.usage-metric-head b {
    font-size: 15px;
    font-family: 'JetBrains Mono', monospace;
}

.usage-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--surface-control);
    overflow: hidden;
}

.usage-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--brass);
    transition: width .3s ease;
}

.usage-foot {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.usage-metric.over {
    border-color: var(--red);
}

.usage-metric.over .usage-bar span {
    background: var(--red);
}

.usage-metric.over .usage-foot {
    color: var(--red);
}

.tenant-panel-tabs {
    margin: 0;
    height: auto;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-soft);
}

.tenant-panel-tabs button {
    padding: 11px 13px;
}

.tenant-detail-list {
    display: grid;
    gap: 0;
    max-height: calc(100vh - 330px);
    overflow: auto;
}

.tenant-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-soft);
}

.tenant-detail-row:hover {
    background: var(--surface-hover);
}

.tenant-detail-row small {
    display: block;
    margin-top: 3px;
}

.tenant-subscription-summary {
    padding: 12px;
    border-bottom: 1px solid var(--border-soft);
}

.tenant-history-title {
    padding: 12px 16px;
    margin: 0;
}

.catalogue-item-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 12px 13px;
    border-bottom: 1px solid var(--border-soft);
}

.catalogue-item-photo {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
}

.catalogue-item-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.catalogue-item-desc { margin: 2px 0; font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catalogue-item-meta { font-size: 9px; }
.catalogue-item-body .row-actions { margin-top: 4px; gap: 6px; }

.catalogue-empty { padding: 18px 14px; font-size: 12px; line-height: 1.5; }

.tenant-picker { display: inline-flex; align-items: center; gap: 8px; }
.tenant-picker .label { margin-bottom: 0; white-space: nowrap; }
.tenant-picker .field { min-width: 180px; }
.settings-tenant-picker { margin-bottom: 14px; }

@media(max-width: 980px) {
    .catalogue-columns { grid-template-columns: 1fr; }
    .catalogue-col { max-height: none; }
    .catalogue-col-list { max-height: 340px; }
    .tenant-console-columns { grid-template-columns: 1fr; }
    .tenant-list-col,
    .tenant-workspace-col,
    .tenant-detail-list { max-height: none; }
    .tenant-panel-toolbar,
    .tenant-user-toolbar,
    .tenant-subscription-toolbar { grid-template-columns: 1fr; }
    .tenant-workspace-head { flex-direction: column; }
    .tenant-active-subscription { text-align: left; }
    .tenant-detail-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Customer Service & Operations Desk (Support module)
   ============================================================ */

/* Shared atoms */
.ta-right { text-align: right; }
.red-text { color: var(--red); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: middle; background: var(--muted); }
.status-dot.dot-open { background: var(--orange); }
.status-dot.dot-customer { background: var(--blue); }
.status-dot.dot-internal { background: var(--purple); }
.status-dot.dot-resolved { background: var(--green); }
.status-dot.dot-closed { background: var(--muted); }

.badge.prio-urgent { color: var(--red); background: color-mix(in srgb, var(--red), transparent 88%); }
.badge.prio-high { color: var(--orange); background: color-mix(in srgb, var(--orange), transparent 88%); }
.badge.prio-normal { color: var(--blue); background: color-mix(in srgb, var(--blue), transparent 86%); }
.badge.prio-low { color: var(--muted); background: color-mix(in srgb, var(--muted), transparent 88%); }

.case-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-control); color: var(--text); font: 700 10px 'JetBrains Mono', monospace; margin-right: 7px; flex: none; }
.case-avatar.lg { width: 32px; height: 32px; font-size: 13px; margin: 0; }
.case-avatar.xl { width: 44px; height: 44px; font-size: 16px; margin: 0; border-radius: 12px; }

/* Main queue: KPI + filter tray + table */
.support-kpi { margin-bottom: 14px; }
.support-filter-tray { display: flex; align-items: center; gap: 12px; padding: 8px; margin-bottom: 14px; }
.support-filter-tray .support-search { flex: 1; }
.support-filter-tray .support-search .field { width: 100%; }
.support-filter-controls { display: flex; align-items: center; gap: 8px; }
.support-filter-controls .field { height: 30px; }
.support-toggle-stagnant { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.support-table td { vertical-align: middle; }
.support-stagnant { border-left: 3px solid var(--red); animation: support-pulse 2s infinite; }
@keyframes support-pulse { 0%,100% { border-left-color: var(--red); } 50% { border-left-color: color-mix(in srgb, var(--red), transparent 60%); } }

/* Generate Ticket modal */
.form-modal {
    position: fixed;
    left: 50%; top: 8vh;
    transform: translateX(-50%);
    width: min(680px, calc(100vw - 28px));
    max-height: 84vh;
    overflow: auto;
    z-index: 90;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,.34);
}

/* ---------- Case details workspace ---------- */
.case-header { height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; background: var(--surface-panel); border-bottom: 1px solid var(--border); }
.case-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.case-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.case-title-row h1 { margin: 0; font-size: calc(16px * var(--text-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-id-badge { font-size: 12px; font-weight: 700; color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 86%); padding: 2px 8px; border-radius: 4px; }
.case-breadcrumb { display: flex; align-items: center; gap: 7px; margin-top: 4px; font: 700 9px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.case-breadcrumb i { font-style: normal; opacity: .5; }
.case-header-right { display: flex; align-items: center; gap: 14px; }
.case-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 9999px; font-size: 11px; font-weight: 700; border: 1px solid currentColor; }
.case-status-pill.pill-amber { color: var(--orange); background: color-mix(in srgb, var(--orange), transparent 90%); }
.case-status-pill.pill-green { color: var(--green); background: color-mix(in srgb, var(--green), transparent 90%); }
.case-status-pill.pill-purple { color: var(--purple); background: color-mix(in srgb, var(--purple), transparent 90%); }
.case-status-pill.pill-blue { color: var(--blue); background: color-mix(in srgb, var(--blue), transparent 88%); }
.case-status-pill.pill-grey { color: var(--muted); background: color-mix(in srgb, var(--muted), transparent 90%); }

.case-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; overflow: hidden; }
.case-dossier, .case-controls { background: var(--surface-panel); overflow-y: auto; }
.case-dossier { border-right: 1px solid var(--border); }
.case-controls { border-left: 1px solid var(--border); }
.case-section { padding: 18px; border-bottom: 1px solid var(--border-soft); }
.dossier-customer { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; }
.dossier-customer b { display: block; font-size: 14px; }
.dossier-contact { display: flex; flex-direction: column; gap: 9px; }
.dossier-contact > div { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.dossier-contact svg { width: 14px; height: 14px; flex: none; }
.dossier-head { display: flex; align-items: center; justify-content: space-between; }
.dossier-record { display: flex; align-items: center; gap: 8px; padding: 10px; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; transition: border-color .18s ease, background-color .18s ease; }
.dossier-record:hover { border-color: var(--brass); background: var(--surface-hover); }
.dossier-record > div { flex: 1; min-width: 0; }
.dossier-record b { display: block; font-size: 12px; }
.dossier-record small { display: block; }
.dossier-record svg { width: 14px; height: 14px; color: var(--muted); flex: none; }

/* Center thread */
.case-thread { display: flex; flex-direction: column; min-height: 0; background: var(--surface-page); }
.case-thread-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 28px; }
.thread-empty { padding: 40px; text-align: center; }
.thread-system { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto 22px; width: fit-content; max-width: 90%; text-align: center; font-size: 11px; color: var(--muted); background: var(--surface-control); border-radius: 9999px; padding: 5px 14px; }
.thread-system svg { width: 13px; height: 13px; flex: none; }
.thread-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.thread-row.mine { flex-direction: row-reverse; }
.thread-row .case-avatar { margin: 0; }
.message-bubble { max-width: 78%; border-radius: 12px; padding: 12px 14px; transition: transform .2s ease; }
.message-bubble:hover { transform: translateY(-1px); }
.message-bubble p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.bubble-head { display: flex; align-items: center; gap: 8px; }
.bubble-author { font-size: 12px; font-weight: 700; }
.bubble-time { margin-left: auto; font-size: 10px; }
.message-bubble.customer-msg { background: var(--surface-panel); border: 1px solid var(--border); }
.message-bubble.agent-reply { background: linear-gradient(135deg, var(--brass), color-mix(in srgb, var(--brass), #000 22%)); color: var(--accent-ink); }
.message-bubble.agent-reply .bubble-time { color: color-mix(in srgb, var(--accent-ink), transparent 30%); }
.message-bubble.internal-note { background: color-mix(in srgb, var(--orange), transparent 86%); border: 1px dashed color-mix(in srgb, var(--orange), transparent 40%); }
.badge.internal-tag { color: var(--orange); border-color: currentColor; font-size: 8px; padding: 1px 5px; }

/* Reply zone */
.case-reply { flex: none; padding: 16px 28px; background: var(--surface-panel); border-top: 1px solid var(--border); }
.reply-toggle-row { display: flex; gap: 16px; margin-bottom: 10px; }
.reply-toggle { border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; padding: 0 0 5px; border-bottom: 2px solid transparent; }
.reply-toggle.active { color: var(--brass); border-color: var(--brass); }
.reply-input { width: 100%; resize: vertical; }
.reply-input.internal { background: color-mix(in srgb, var(--orange), transparent 90%); border-color: color-mix(in srgb, var(--orange), transparent 55%); }
.reply-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 12px; }

/* Right controls */
.control-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.control-card { padding: 12px; }
.control-card b { display: block; font: 700 14px 'JetBrains Mono', monospace; margin-top: 4px; }
.sla-bar { width: 100%; height: 4px; border-radius: 4px; background: var(--surface-control); margin-top: 8px; overflow: hidden; }
.sla-bar i { display: block; height: 100%; border-radius: 4px; }
.sla-bar i.bar-green { background: var(--green); }
.sla-bar i.bar-red { background: var(--red); }
.control-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0; font-size: 12px; }
.control-row > span { color: var(--muted); }
.field.compact { height: 28px; padding: 0 8px; max-width: 160px; }
.case-actions { display: flex; flex-direction: column; gap: 10px; border-bottom: 0; }
.case-actions .btn { width: 100%; }

/* File attachments */
.attachments { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.attachment-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; transition: border-color .18s ease, background-color .18s ease; }
.attachment-row:hover { border-color: var(--brass); background: var(--surface-hover); }
.attachment-thumb { width: 38px; height: 38px; flex: none; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid var(--border); }
.attachment-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--surface-control); color: var(--muted); }
.attachment-icon svg { width: 16px; height: 16px; }
.attachment-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.attachment-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-name:hover { color: var(--brass); }
.attachment-delete { width: 26px; height: 26px; flex: none; border-radius: 6px; }
.attachment-upload { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px dashed var(--border); border-radius: 8px; color: var(--brass); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.attachment-upload:hover { border-color: var(--brass); background: var(--surface-hover); }
.attachment-upload.busy { opacity: .7; cursor: progress; }
.attachment-upload input[type="file"] { display: none; }
.attachment-error { font-size: 11px; color: var(--red); }
.project-files-panel { max-width: 560px; }

/* Beautified "Add New Lead" form: branded hero image panel beside a sectioned form */
.lead-form-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; max-width: 1060px; margin: 0 auto; align-items: stretch; }
.lead-form-hero { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); min-height: 100%; }
.lead-form-hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); }
.lead-form-hero-overlay { position: absolute; inset: 0; background: linear-gradient(165deg, rgba(10,14,20,.82), rgba(10,14,20,.5) 45%, color-mix(in srgb, var(--brass) 60%, rgba(10,14,20,.72))); }
.lead-form-hero-content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 22px; }
.lead-form-hero-content h2 { margin: 0; font-size: 22px; color: #fff; }
.lead-form-hero-content p { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.82); }
.lead-form-hero-content .hero-chip { align-self: flex-start; color: var(--brass); border-color: color-mix(in srgb, var(--brass), transparent 45%); background: color-mix(in srgb, var(--brass), transparent 84%); }
.lead-form-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.lead-form-points li { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,.9); }
.lead-form-points svg { width: 14px; height: 14px; color: var(--brass); flex: none; }
.lead-form-panel { padding: 22px; }
.lead-form-hint { margin: 0 0 16px; }
.form-section + .form-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.form-section .section-title { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.form-section .section-title svg { width: 13px; height: 13px; }
.lead-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.lead-owner-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-raised); border: 1px solid var(--border-soft); line-height: 1.5; }
.lead-owner-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--brass); }

/* Products Required picker: icon tiles with a check on the selected ones */
.product-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.product-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); transition: border-color .18s ease, background-color .18s ease, transform .16s ease; }
.product-tile:hover { border-color: var(--brass); transform: translateY(-1px); }
.product-tile.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); }
.product-tile-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); }
.product-tile-icon svg { width: 22px; height: 22px; }
.product-tile-label { font-size: 11px; font-weight: 600; }
.product-tile.active .product-tile-label { color: var(--brass); }
.product-tile-check { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--brass); color: var(--accent-ink); }
.product-tile-check svg { width: 10px; height: 10px; }
@media (max-width: 860px) {
    .lead-form-layout { grid-template-columns: 1fr; max-width: 640px; }
    .lead-form-hero { min-height: 168px; }
}

/* Upload progress */
.upload-progress { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-raised); }
.upload-progress-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin-bottom: 7px; }
.upload-progress-head .mono:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.upload-bar { height: 6px; border-radius: 6px; background: var(--surface-control); overflow: hidden; }
.upload-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brass), color-mix(in srgb, var(--brass), #fff 20%)); transition: width .15s ease; }
.upload-progress-foot { font-size: 9px; margin-top: 6px; }

/* CRM grid/list toggle */
.crm-view-toggle { margin-left: auto; }
.crm-view-toggle button { display: inline-flex; align-items: center; gap: 6px; }
.crm-view-toggle svg { width: 14px; height: 14px; }
.crm-entity-select { max-width: 200px; }
.crm-stacked-table { margin-top: 14px; }

/* Required-field marker, inline validation and form error banner */
.req { color: var(--red); font-weight: 700; }
.form-group .validation-message { display: block; margin-top: 4px; font-size: 10px; color: var(--red); }
.form-error-banner { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: 8px; font-size: 12px; color: var(--red); background: color-mix(in srgb, var(--red), transparent 90%); border: 1px solid color-mix(in srgb, var(--red), transparent 60%); }
.form-error-banner svg { width: 16px; height: 16px; flex: none; }
.field.input-validation-error, .input-validation-error .field { border-color: var(--red); }

/* Loading skeletons */
.skeleton-wrap { display: flex; flex-direction: column; gap: 12px; }
.sk { display: block; border-radius: 4px; background: linear-gradient(90deg, var(--surface-control) 25%, color-mix(in srgb, var(--surface-control), var(--text) 8%) 37%, var(--surface-control) 63%); background-size: 400% 100%; animation: sk-shimmer 1.3s ease-in-out infinite; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk-line { height: 10px; margin: 5px 0; }
.sk-line.lg { height: 16px; }
.sk-line.w20 { width: 20%; } .sk-line.w30 { width: 30%; } .sk-line.w40 { width: 40%; } .sk-line.w50 { width: 50%; } .sk-line.w60 { width: 60%; } .sk-line.w70 { width: 70%; } .sk-line.w80 { width: 80%; }
.sk-circle { width: 38px; height: 38px; border-radius: 8px; flex: none; }
.sk-block { height: 70px; margin-top: 8px; border-radius: 6px; }
.sk-pill { display: inline-block; width: 96px; height: 26px; border-radius: 4px; margin-right: 8px; }
.sk-kpi { padding: 14px; display: flex; gap: 12px; align-items: center; }
.sk-kpi > div { flex: 1; }
.sk-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sk-card { padding: 16px; }
.sk-card.sm { padding: 12px; margin-bottom: 11px; }
.sk-table { padding: 0; }
.sk-table-head { display: flex; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.sk-table-head .sk-line { flex: 1; }
.sk-table-row { display: flex; gap: 16px; padding: 13px 14px; border-bottom: 1px solid var(--border-soft); }
.sk-table-row .sk-line { flex: 1; margin: 0; }
.sk-board { display: flex; gap: 24px; }
.sk-board .sk-col { width: 300px; }
.sk-split { display: flex; gap: 0; height: 100%; }
.sk-split .sk-side { width: 256px; flex: none; border-right: 1px solid var(--border); padding: 12px; }
.sk-split .sk-side-row { padding: 11px 4px; border-bottom: 1px solid var(--border-soft); }
.sk-split .sk-main { flex: 1; padding: 16px; }
.sk-calendar { padding: 0; }
.sk-cal-row { display: flex; gap: 14px; align-items: center; padding: 16px 14px; border-bottom: 1px solid var(--border); }
.sk-cal-row .sk-line { flex: none; }
.sk-cal-slots { display: flex; flex: 1; }

/* Reminders / Compliance: header filters + spacing, theme-consistent and responsive */
.reminder-kpis { margin-bottom: 14px; }
.kpi-icon svg { width: 18px; height: 18px; }
.reminder-queue { margin-top: 4px; }
/* Inline label+field pairs placed in the TopBar actions (Compliance From/To window) */
.hdr-field { display: inline-flex; align-items: center; gap: 6px; }
.hdr-field .label { margin-bottom: 0; white-space: nowrap; }
.hdr-field .field { width: auto; }
.topbar .actions .segmented { flex: none; }
@media (max-width: 720px) {
    .topbar .actions .segmented { width: 100%; }
    .topbar .actions .segmented button { flex: 1; }
    .hdr-field { flex: 1; }
    .hdr-field .field { flex: 1; min-width: 0; }
}

/* Indeterminate progress bar shown during filter reloads (data already on screen) */
.reload-bar { height: 3px; border-radius: 3px; margin-bottom: 10px; overflow: hidden; background: var(--surface-control); position: relative; }
.reload-bar::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--brass), transparent); animation: reload-slide 1s ease-in-out infinite; }
@keyframes reload-slide { 0% { left: -40%; } 100% { left: 100%; } }

/* CRM workflow */
.product-picker { justify-content: flex-start; flex-wrap: wrap; gap: 8px; background: transparent; border: 0; padding: 0; }
.product-picker button { flex: 0 1 auto; min-height: 34px; border: 1px solid var(--border); background: var(--surface-control); }
.product-picker button.active { border-color: var(--brass); color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); }
.lead-tools { margin-top: 14px; }
.lead-card .lead-meta { gap: 8px; flex-wrap: wrap; }
.lead-footer-actions { gap: 8px; }
@media(max-width: 720px) {
    .product-picker button { flex: 1 1 calc(50% - 8px); }
    .lead-tools { align-items: stretch; }
    .crm-entity-select { max-width: none; width: 100%; }
}

/* Connection / error screen (ErrorBoundary fallback) */
.conn-error { height: 100%; display: grid; place-items: center; padding: 28px; overflow: auto; }
.conn-error-card { width: min(520px, 100%); text-align: center; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 12px; padding: 32px 28px; box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.conn-error-icon { width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center; font-size: 26px; border-radius: 50%; color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 86%); }
.conn-error-card h2 { margin: 0 0 8px; font-size: calc(19px * var(--text-scale, 1)); }
.conn-error-card p { margin: 0 auto 20px; max-width: 42ch; line-height: 1.55; }
.conn-error-actions { display: flex; gap: 10px; justify-content: center; }
.conn-error-detail { margin-top: 18px; text-align: left; }
.conn-error-detail summary { cursor: pointer; font-size: 11px; color: var(--muted); }
.conn-error-detail pre { margin-top: 8px; padding: 10px; border-radius: 6px; background: var(--surface-control); font-size: 10px; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; }

@media(max-width: 1100px) {
    .case-workspace { grid-template-columns: 1fr; overflow-y: auto; }
    .case-dossier, .case-controls { border: 0; border-bottom: 1px solid var(--border); }
    .case-thread { min-height: 70vh; }
}
@media(max-width: 820px) {
    .support-filter-tray { flex-direction: column; align-items: stretch; }
    .support-filter-controls { flex-wrap: wrap; }
    .case-header { height: auto; padding: 12px 16px 12px 54px; }
    .case-title-row h1 { white-space: normal; }
}

/* ============================================================
   On-site sales presentation (full-screen, customer-facing)
   ============================================================ */
.lead-present-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin: 0 17px 12px; width: calc(100% - 34px); height: 36px; }
.lead-present-btn svg { width: 15px; height: 15px; }
.row-actions .btn-mini.primary svg { width: 12px; height: 12px; }

.presentation-root { position: fixed; inset: 0; z-index: 200; background: var(--surface-page); color: var(--text); overflow: auto; }

/* --- Gate screens (arrival + declaration) --- */
.presentation-gate { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; background:
    radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--brass), transparent 88%), transparent),
    var(--surface-page); }
.presentation-gate-card { width: min(560px, 100%); background: var(--surface-panel); border: 1px solid var(--border); border-radius: 16px; padding: 30px; box-shadow: 0 30px 70px rgba(0,0,0,.35); animation: rise-in .4s cubic-bezier(.22,1,.36,1) both; }
.presentation-gate-card.wide { width: min(760px, 100%); }
.presentation-gate-card.center { text-align: center; }
.presentation-gate-card h2 { margin: 14px 0 8px; font-size: 22px; }
.presentation-gate-card p { color: var(--muted); line-height: 1.5; }
.gate-customer { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); }
.gate-avatar { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brass), transparent 84%); color: var(--brass); font-weight: 700; }
.gate-customer b { display: block; }
.gate-customer small { display: block; color: var(--muted); margin-top: 2px; }
.gate-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.gate-note { display: flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 11px; }
.gate-note svg { width: 14px; height: 14px; flex: none; }
.declaration-mission { margin: 16px 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; font-size: 13px; }
.declaration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.declaration-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--surface-raised); }
.declaration-card h3 { margin: 0 0 8px; font-size: 14px; }
.declaration-card p { font-size: 12.5px; line-height: 1.5; }
.declaration-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-weight: 600; font-size: 13px; }

/* --- Presentation shell --- */
.presentation-page { height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.presentation-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface-panel); }
.presentation-brand { display: flex; align-items: center; gap: 12px; }
.presentation-brand .logo { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--brass); color: #10151c; font-weight: 800; }
.presentation-brand b { display: block; font-size: 15px; }
.presentation-brand small { display: block; color: var(--muted); font-size: 11px; }
.presentation-progress { flex: 1; max-width: 460px; }
.presentation-progress > div { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.presentation-progress b { color: var(--text); }
.p-progress { height: 6px; border-radius: 4px; background: var(--surface-control); overflow: hidden; }
.p-progress i { display: block; height: 100%; background: var(--brass); border-radius: 4px; transition: width .35s cubic-bezier(.22,1,.36,1); }
.presentation-controls { display: flex; align-items: center; gap: 8px; }
.presentation-controls .btn.icon { width: 34px; padding: 0; justify-content: center; }

.presentation-main { display: grid; grid-template-columns: 248px 1fr; min-height: 0; overflow: hidden; }
.presentation-page.customer-view .presentation-main { grid-template-columns: 1fr; }
.presentation-journey { border-right: 1px solid var(--border); padding: 16px 12px; background: var(--surface-panel); overflow: auto; }
.journey-block { margin-bottom: 4px; }
.journey-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; }
.journey-head span { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--surface-control); font-size: 12px; font-weight: 700; }
.journey-head.active { color: var(--text); }
.journey-head.active span { background: var(--brass); color: #10151c; }
.journey-steps { display: grid; gap: 2px; margin: 2px 0 8px 34px; }
.journey-steps button { text-align: left; border: 0; background: transparent; color: var(--muted); font-size: 12px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.journey-steps button:hover { background: var(--surface-hover); color: var(--text); }
.journey-steps button.active { color: var(--brass); font-weight: 600; }

.presentation-canvas { padding: 32px; overflow-y: auto; min-height: 0; }
.presentation-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-panel); }
.chapter-dots { display: flex; gap: 8px; }
.chapter-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-control); transition: background-color .2s ease; }
.chapter-dots i.active { background: var(--brass); }

/* --- Stages / chapter content --- */
.presentation-stage { max-width: 980px; margin: 0 auto; animation: rise-in .4s cubic-bezier(.22,1,.36,1) both; }
.presentation-stage.narrow { max-width: 680px; }
.presentation-stage.center { text-align: center; display: grid; place-items: center; gap: 8px; min-height: 50vh; }
.presentation-stage.split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.presentation-heading { margin-bottom: 22px; }
.presentation-heading.left { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.presentation-heading h2 { font-size: 26px; margin: 0 0 6px; }
.presentation-heading p { color: var(--muted); margin: 0; }
.presentation-stage h2 { font-size: 26px; }
.lead-copy { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 12px 0 18px; }
.tick-list { display: grid; gap: 10px; padding: 0; list-style: none; }
.tick-list li { position: relative; padding-left: 28px; color: var(--text); }
.tick-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--green), transparent 82%); color: var(--green); font-size: 11px; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 20px; color: var(--muted); font-size: 13px; }
.hero-photo { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/3; background: var(--surface-control); }
.hero-photo.tall { aspect-ratio: 3/4; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.presentation-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.presentation-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.presentation-card { border: 1px solid var(--border); border-radius: 14px; padding: 20px; background: var(--surface-panel); }
.presentation-card-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.presentation-card p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.presentation-note { margin-top: 18px; padding: 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--brass), transparent 70%); background: color-mix(in srgb, var(--brass), transparent 92%); }
.presentation-note b { color: var(--brass); }
.presentation-note p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.p-info { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
.p-info span { color: var(--muted); font-size: 12px; }
.p-info b { text-align: right; }
.big-symbol { font-size: 46px; color: var(--brass); }
.big-symbol.small { font-size: 26px; }

.concern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.concern { display: grid; place-items: center; gap: 10px; padding: 22px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-panel); color: var(--text); cursor: pointer; transition: border-color .18s ease, transform .16s ease, background-color .18s ease; }
.concern:hover { transform: translateY(-2px); border-color: var(--brass); }
.concern.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); }
.concern span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); }
.concern span svg { width: 20px; height: 20px; }
.tag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 8px 0 18px; }
.check-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-panel); font-size: 13px; cursor: pointer; }
.check-card input { accent-color: var(--brass); flex: none; width: 17px; height: 17px; }
.check-card.confirm { margin-top: 16px; border-color: color-mix(in srgb, var(--brass), transparent 55%); background: color-mix(in srgb, var(--brass), transparent 92%); font-weight: 600; }

/* ===== Chapter 4 (Build Value) + Chapter 5 (Decide & Complete) ===== */
.pres-saving-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; }
.pres-saving-line span { color: var(--muted); }
.pres-saving-line b { font-size: 18px; color: var(--brass); }
.pres-saving-line.green b { color: var(--green); }
.pres-mini-progress { height: 6px; border-radius: 999px; background: var(--surface-control); margin-top: 10px; overflow: hidden; }
.pres-mini-progress i { display: block; height: 100%; background: var(--brass); }
.pres-inc-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); margin-bottom: 12px; }
.pres-inc-icon svg { width: 21px; height: 21px; }

/* promotions (multi-select) */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.promo-card { position: relative; text-align: left; border: 1px solid var(--border); border-radius: 14px; padding: 18px; background: var(--surface-panel); color: var(--text); cursor: pointer; transition: border-color .18s ease, transform .16s ease, background-color .18s ease; }
.promo-card:hover { transform: translateY(-2px); border-color: var(--brass); }
.promo-card.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 90%); }
.promo-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.promo-card-head b { font-size: 15px; }
.promo-value { flex: none; font-weight: 700; color: var(--green); font-family: var(--mono, monospace); }
.promo-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.promo-check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; display: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--brass); color: #1a1a1a; }
.promo-check svg { width: 13px; height: 13px; }
.promo-card.active .promo-check { display: flex; }
.promo-card.active .promo-card-head { padding-right: 26px; }

/* funding options */
.finance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.finance-card { text-align: left; border: 1px solid var(--border); border-radius: 14px; padding: 20px; background: var(--surface-panel); color: var(--text); cursor: pointer; transition: border-color .18s ease, transform .16s ease; }
.finance-card:hover { transform: translateY(-2px); border-color: var(--brass); }
.finance-card.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 90%); }
.finance-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); margin-bottom: 12px; }
.finance-icon svg { width: 19px; height: 19px; }
.finance-card b { display: block; font-size: 15px; }
.finance-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.finance-detail { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.finance-detail strong { font-size: 22px; color: var(--brass); }
.finance-detail strong small { font-size: 12px; color: var(--muted); }

/* proposal summary */
.proposal { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface-panel); }
.proposal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; background: color-mix(in srgb, var(--brass), transparent 92%); border-bottom: 1px solid var(--border); }
.proposal > header span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; display: block; }
.proposal > header b { font-size: 16px; }
.proposal-total { text-align: right; }
.proposal-total strong { display: block; font-size: 26px; color: var(--brass); }
.proposal-total small { color: var(--muted); font-size: 11px; }
.proposal-total.big { margin: 18px auto; }
.proposal-total.big strong { font-size: 34px; }
.proposal-lines { padding: 8px 20px 18px; }
.proposal-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 40%); font-size: 14px; }
.proposal-line:last-child { border-bottom: 0; }
.proposal-line small { display: block; color: var(--muted); font-size: 12px; }
.proposal-line.green b { color: var(--green); }
.proposal-line.vat span { color: var(--muted); }

/* compliance + finish */
.compliance-list { display: flex; flex-direction: column; gap: 10px; }
.done-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin: 20px 0; }
.done-grid > div { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface-panel); }
.done-grid span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.done-grid b { font-size: 17px; }
.success-mark { width: 76px; height: 76px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--green), transparent 84%); color: var(--green); }
.success-mark svg { width: 38px; height: 38px; }
.presentation-stage.center { text-align: center; }
.presentation-heading.center { text-align: center; }
.btn.btn-lg { height: 46px; padding: 0 26px; font-size: 15px; margin-top: 8px; }
.footer-spacer { width: 120px; }
.promo-value-edit { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 13px; }

.product-category { margin-bottom: 26px; }
.product-category-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brass); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.product-category-title svg { width: 17px; height: 17px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.product-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface-panel); transition: border-color .18s ease, transform .16s ease; }
.product-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.product-card > div { aspect-ratio: 16/10; background: var(--surface-control); }
.product-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card h3 { margin: 14px 14px 4px; font-size: 15px; }
.product-card p { margin: 0 14px; color: var(--muted); font-size: 12px; flex: 1; }
.product-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; }
.product-card footer b { color: var(--brass); }

.presentation-config { display: grid; grid-template-columns: 280px 1fr 280px; gap: 18px; align-items: start; }
.presentation-config aside h3, .presentation-config main h3 { font-size: 14px; margin: 0 0 12px; }
.swatch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.swatch-grid .choice { display: flex; align-items: center; gap: 8px; }
.swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; }
.swatch.white { background: #e8ecf0; } .swatch.anthracite { background: #3d4147; } .swatch.black { background: #1a1d22; }
.swatch.oak { background: #b5854b; } .swatch.cream { background: #e8dcc8; } .swatch.green { background: #5a9c72; }
.technical-preview { position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: var(--surface-control); }
.technical-preview img { width: 100%; height: 100%; object-fit: cover; }
.technical-preview span { position: absolute; top: 12px; left: 12px; font-size: 10px; letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; }

.review-list { display: grid; gap: 14px; }
.review-item { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--surface-panel); }
.review-item h3 { margin: 0; font-size: 17px; }
.review-item-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; align-self: start; padding-top: 6px; }
.review-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.review-spec { font-size: 12px; color: var(--muted); border: 1px solid var(--border); background: var(--surface-control); border-radius: 999px; padding: 4px 10px; }
.review-spec.loc { display: inline-flex; align-items: center; gap: 5px; color: var(--brass); border-color: color-mix(in srgb, var(--brass), transparent 60%); }
.review-spec.loc svg, .review-spec.loc .ui-icon { width: 12px; height: 12px; }
.review-item-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; align-self: start; padding-top: 6px; }
.review-item-price span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.review-item-price strong { font-size: 20px; color: var(--brass); }
@media(max-width: 900px) {
    .review-item { grid-template-columns: 1fr; }
    .review-item-price { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; }
}
.package-total { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px; border-radius: 14px; background: color-mix(in srgb, var(--brass), transparent 90%); border: 1px solid color-mix(in srgb, var(--brass), transparent 70%); }
.package-total span { color: var(--muted); }
.package-total b { font-size: 24px; color: var(--brass); margin-left: auto; }

/* confirm order from a finalised quote */
.order-action-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.order-action-row .muted svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--brass); }
.order-confirmed { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; border-radius: 4px; font-size: 13px; color: var(--text); background: color-mix(in srgb, var(--green), transparent 90%); border: 1px solid color-mix(in srgb, var(--green), transparent 72%); }
.order-confirmed svg { width: 15px; height: 15px; color: var(--green); }
.confirm-order-modal { width: min(480px, calc(100vw - 28px)); margin: 12vh auto 0; max-height: 80vh; overflow: auto; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 18px 45px rgba(0,0,0,.32); }
.confirm-order-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.co-total { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 4px; background: color-mix(in srgb, var(--brass), transparent 90%); border: 1px solid color-mix(in srgb, var(--brass), transparent 72%); }
.co-total b { font-size: 20px; }
.co-seg { display: flex; gap: 8px; }
.co-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-control); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; }
.co-seg button svg { width: 15px; height: 15px; }
.co-seg button.on { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); }
.co-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.co-quick .small-copy { margin-left: auto; }

.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface-control); border-top-color: var(--brass); animation: spin .8s linear infinite; margin: 0 auto 4px; }
.presentation-fatal { min-height: 100vh; display: grid; place-items: center; text-align: center; gap: 10px; padding: 30px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Rep/Customer mode switch (header) */
.pres-mode-switch { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); }
.pres-mode-switch span { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pres-mode-switch span.on { color: var(--brass); }

/* Review edit button */
.pres-edit-btn { float: right; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--brass); font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.pres-edit-btn:hover { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 92%); }
.pres-edit-btn svg { width: 12px; height: 12px; }
.presentation-card .form-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.presentation-card .form-group { margin-bottom: 10px; }

/* Marketing assessment — private rep-only panel */
.marketing-stage { max-width: 920px; }
.marketing-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; margin-bottom: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brass), transparent 90%), color-mix(in srgb, var(--brass), transparent 96%));
    border: 1px solid color-mix(in srgb, var(--brass), transparent 72%); }
.marketing-lock { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brass), transparent 82%); color: var(--brass); }
.marketing-lock svg { width: 22px; height: 22px; }
.marketing-head-copy { flex: 1; }
.marketing-head-copy h2 { margin: 0 0 3px; font-size: 21px; }
.marketing-head-copy p { margin: 0; color: var(--muted); font-size: 12.5px; }
.marketing-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: 999px; background: var(--brass); color: #10151c; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.marketing-pill svg { width: 13px; height: 13px; }
.marketing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.marketing-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); transition: border-color .16s ease, transform .14s ease; cursor: pointer; }
.marketing-card:hover, .marketing-card:focus-within { border-color: var(--brass); transform: translateY(-1px); }
.mk-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); }
.mk-icon svg { width: 18px; height: 18px; }
.mk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mk-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.marketing-card .field { height: 30px; }
.marketing-notes-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); padding: 14px; }
.mk-notes-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mk-notes-head .mk-icon { width: 32px; height: 32px; }
.marketing-notes-card .field { width: 100%; }

/* ---- Redesigned declaration ---- */
.presentation-gate.declaration { padding: 24px; }
.declaration-shell { width: min(960px, 100%); display: grid; grid-template-columns: 0.85fr 1.15fr; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 70px rgba(0,0,0,.4); animation: rise-in .4s cubic-bezier(.22,1,.36,1) both; }
.declaration-hero { padding: 32px; color: #fff; background:
    linear-gradient(160deg, color-mix(in srgb, var(--brass), #000 8%), color-mix(in srgb, var(--brass), #000 45%)); }
.declaration-hero .badge { background: rgba(255,255,255,.18); color: #fff; }
.declaration-hero h2 { font-size: 26px; margin: 14px 0 10px; color: #fff; }
.declaration-hero > p { color: rgba(255,255,255,.85); line-height: 1.5; }
.declaration-mission { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 14px; }
.declaration-mission li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,.95); }
.declaration-mission li span { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.16); }
.declaration-mission li span svg { width: 16px; height: 16px; }
.declaration-progress { display: flex; gap: 10px; margin-top: 26px; }
.declaration-progress span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.7); }
.declaration-progress span svg { width: 13px; height: 13px; }
.declaration-progress span.done { background: #fff; color: color-mix(in srgb, var(--brass), #000 30%); }
.declaration-body { padding: 28px; background: var(--surface-panel); display: flex; flex-direction: column; gap: 16px; }
.declaration-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px; background: var(--surface-raised); transition: border-color .18s ease, background-color .18s ease; }
.declaration-card.confirmed { border-color: color-mix(in srgb, var(--green), transparent 50%); background: color-mix(in srgb, var(--green), transparent 92%); }
.declaration-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.declaration-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--brass), transparent 84%); color: var(--brass); }
.declaration-icon svg { width: 19px; height: 19px; }
.declaration-card-head h3 { margin: 0; font-size: 15px; }
.declaration-card p { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }
.declaration-toggle { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s ease; }
.declaration-toggle-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); display: inline-grid; place-items: center; transition: all .18s ease; }
.declaration-toggle.on { border-color: var(--green); background: color-mix(in srgb, var(--green), transparent 86%); color: var(--green); }
.declaration-toggle.on .declaration-toggle-dot { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px var(--surface-panel); }

/* ---- Accreditations (Why Choose Us) ---- */
.accreditation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.accreditation-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-panel); color: var(--text); cursor: pointer; text-align: left; transition: border-color .18s ease, transform .16s ease, box-shadow .18s ease; }
.accreditation-card:hover { border-color: var(--brass); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.accreditation-card b { font-size: 13px; line-height: 1.3; }
.accreditation-badge { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: .02em; overflow: hidden; text-align: center; line-height: 1.1; padding: 4px; }
.accreditation-badge.has-logo { background: #fff; padding: 7px; }
.accreditation-badge img { width: 100%; height: 100%; object-fit: contain; }
.accreditation-badge.lg { width: 64px; height: 64px; font-size: 14px; }

/* Presentation modal (accreditation detail) */
.pres-modal-backdrop { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, #000, transparent 40%); backdrop-filter: blur(6px); }
.pres-modal { width: min(520px, 100%); background: var(--surface-panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: 0 30px 70px rgba(0,0,0,.4); animation: rise-in .3s cubic-bezier(.22,1,.36,1) both; }
.pres-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pres-modal-head h3 { margin: 0; flex: 1; font-size: 17px; }
.pres-modal-head .icon-button { width: 32px; height: 32px; }
.pres-modal p { color: var(--muted); line-height: 1.6; font-size: 13.5px; }
.pres-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

@media(max-width: 900px) {
    .presentation-main { grid-template-columns: 1fr; }
    .presentation-journey { display: none; }
    .presentation-stage.split { grid-template-columns: 1fr; }
    .presentation-config { grid-template-columns: 1fr; }
    .presentation-two, .presentation-three, .feature-grid, .marketing-grid, .declaration-shell { grid-template-columns: 1fr; }
    .presentation-top { flex-wrap: wrap; }
    .presentation-canvas { padding: 20px; }
}

/* ============================================================
   Window Designer — studio interface shell around the imported
   FFPuk drawing engine (wwwroot/js/WinDesignScript.js).
   Icon sidebar + slide-in panels + price pill/drawer + toasts,
   themed with FlashFix tokens and set in Inter.
   ============================================================ */
.wd2d-overlay { position: fixed; inset: 0; z-index: 260; background: var(--surface-page); }
.wd2d-shell {
    --wd-accent: var(--brass);
    --wd-accent-soft: color-mix(in srgb, var(--brass), transparent 88%);
    --wd-panel-w: 320px;
    --wd-side-w: 84px;
    --wd-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    position: absolute; inset: 0; display: flex; flex-direction: column;
    background: var(--surface-page); color: var(--text);
    font-family: 'Inter', 'DM Sans', sans-serif;
}
.wd2d-shell .btn, .wd2d-shell .field, .wd2d-shell input, .wd2d-shell select, .wd2d-shell button { font-family: inherit; }

/* ── Titlebar ── */
.wd2d-titlebar { position: relative; z-index: 90; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--surface-panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); flex: none; }
.wd2d-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wd2d-logo { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg, var(--brass), color-mix(in srgb, var(--brass), #000 25%)); color: #10151c; }
.wd2d-logo svg { width: 18px; height: 18px; }
.wd2d-brand-text { min-width: 0; line-height: 1.2; }
.wd2d-brand-text b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd2d-brand-text small { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.wd2d-brand-text small.ready { color: color-mix(in srgb, var(--muted), var(--green) 35%); }
.wd2d-tb-spacer { flex: 1; }

/* Price pill — centred in the titlebar */
.wd2d-price-pill {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; height: 42px;
    background: var(--surface-panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 5px 14px 5px 6px; cursor: pointer; user-select: none;
    transition: all .2s cubic-bezier(.4, 0, .2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
}
.wd2d-price-pill:hover { border-color: var(--brass); transform: translateX(-50%) translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.wd2d-price-eye { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: none; border-radius: 8px; background: var(--surface-control); color: var(--muted); cursor: pointer; transition: all .2s ease; }
.wd2d-price-eye:hover { background: var(--surface-hover); color: var(--text); }
.wd2d-price-eye svg { width: 14px; height: 14px; }
.wd2d-price-main { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; min-width: 84px; }
.wd2d-price-label { font-size: 8.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.wd2d-price-value { font-size: 17px; font-weight: 800; color: var(--green); letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: filter .2s ease, opacity .2s ease; }
.wd2d-price-value.hidden-price { filter: blur(5px); opacity: .5; }
.wd2d-price-chev { display: grid; place-items: center; color: var(--muted); transition: transform .2s ease; }
.wd2d-price-chev svg { width: 13px; height: 13px; }
.wd2d-price-pill.open .wd2d-price-chev { transform: rotate(180deg); }

/* Location input */
.wd2d-location-wrap { display: flex; align-items: center; gap: 8px; height: 32px; padding-right: 14px; border-right: 1px solid var(--border); }
.wd2d-location-label { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.wd2d-location-input { width: 150px; font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface-control); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; outline: none; transition: all .2s ease; }
.wd2d-location-input:focus { border-color: var(--brass); background: var(--surface-panel); box-shadow: 0 0 0 3px var(--wd-accent-soft); }

/* Titlebar actions */
.wd2d-tb-actions { display: flex; align-items: center; gap: 8px; }
.wd2d-tb-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 10px; cursor: pointer; transition: all .2s ease; }
.wd2d-tb-icon svg { width: 15px; height: 15px; }
.wd2d-tb-close:hover { background: color-mix(in srgb, var(--red), transparent 88%); border-color: color-mix(in srgb, var(--red), transparent 55%); color: var(--red); }
.wd2d-commit svg { width: 14px; height: 14px; }

/* ── Main area ── */
.wd2d-main { position: relative; flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* Icon sidebar */
.wd2d-side { width: var(--wd-side-w); flex: none; display: flex; flex-direction: column; padding: 12px 0; background: var(--surface-panel); border-right: 1px solid var(--border); z-index: 60; overflow-y: auto; }
.wd2d-side-tools { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 auto; min-height: 0; }
.wd2d-side-tools .wd2d-tool-btn { flex: 1 1 0; min-height: 54px; max-height: 88px; }
.wd2d-side-divider { width: 40px; height: 1px; background: var(--border); margin: 8px auto; flex: none; }
.wd2d-side-utils { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }

.wd2d-tool-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 68px; padding: 8px 4px; border: 2px solid transparent; border-radius: 14px; background: transparent; color: var(--muted); cursor: pointer; user-select: none; transition: all .2s ease; }
.wd2d-tool-btn:hover { background: var(--surface-hover); color: var(--text); }
.wd2d-tool-btn.active { background: var(--wd-accent-soft); border-color: var(--wd-accent-soft); color: var(--brass); }
.wd2d-tool-btn.on { color: var(--green); }
.wd2d-tool-icon { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-control); transition: all .2s ease; }
.wd2d-tool-btn.active .wd2d-tool-icon { background: var(--surface-panel); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.wd2d-tool-btn.on .wd2d-tool-icon { background: color-mix(in srgb, var(--green), transparent 86%); }
.wd2d-tool-icon svg { width: 17px; height: 17px; }
.wd2d-tool-label { font-size: 10px; font-weight: 700; line-height: 1.15; letter-spacing: .01em; text-align: center; }

/* Section status dot, docked on the icon tile's corner */
.wd2d-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface-panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.wd2d-dot.pending { background: var(--orange); }
.wd2d-dot.done { background: var(--green); }

/* Sidebar colour-split icon: outside | inside on top, sash below */
.wd2d-colour-split { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
.wd2d-cs-top { height: 50%; display: flex; }
.wd2d-cs-outside { width: 50%; height: 100%; border-right: .5px solid rgba(0, 0, 0, .12); }
.wd2d-cs-inside { width: 50%; height: 100%; }
.wd2d-cs-sash { height: 50%; width: 100%; border-top: .5px solid rgba(0, 0, 0, .12); }
/* Door variant: frame band on the left, leaf outside/inside stacked on the right */
.wd2d-colour-split.door { flex-direction: row; }
.wd2d-colour-split.door .wd2d-cs-frame { width: 40%; height: 100%; border-right: .5px solid rgba(0, 0, 0, .12); }
.wd2d-colour-split.door .wd2d-cs-leafwrap { width: 60%; height: 100%; display: flex; flex-direction: column; }
.wd2d-colour-split.door .wd2d-cs-leafout { height: 50%; }
.wd2d-colour-split.door .wd2d-cs-leafin { height: 50%; border-top: .5px solid rgba(0, 0, 0, .12); }

/* 3D door designers: the engine mounts its WebGL canvas into this host (inset below the
   toolbar via .wd2d-canvas-frame, same as the 2D drawing) */
.wd2d-door-host { width: 100%; height: 100%; }
.wd2d-door-host canvas { display: block; width: 100%; height: 100%; border-radius: 12px; }
.wd2d-door-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 12px; background: color-mix(in srgb, var(--surface-panel), transparent 8%); border: 1px solid var(--border); color: var(--muted); font-size: 13px; z-index: 5; }

/* Solidor style cards: the manufacturer's own door thumbnails inside a wd2d swatch tile */
.wd2d-style-thumb { display: block; width: 100%; aspect-ratio: 64 / 99; object-fit: contain; border-radius: 6px; background: var(--surface-control); }

/* Product picker — shown before a designer opens so the rep chooses the product first */
/* Reuses the presentation's .product-card / .product-grid so the rep picks from the same
   photographed catalogue the customer sees.
   display:block is explicit — a broader rule in this sheet otherwise makes modal children a
   grid, which lays the heading, group titles and card grids out as side-by-side columns.
   Centring follows .confirm-modal's margin pattern (.modal-backdrop does no centring itself). */
.product-picker { display: block; width: min(920px, calc(100vw - 40px)); max-height: 84vh; margin: 6vh auto 0; overflow-y: auto; padding: 20px 24px 24px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-panel); box-shadow: 0 30px 70px rgba(0, 0, 0, .4); }
.product-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.product-picker-head b { display: block; font-size: 16px; }
.product-picker-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.product-picker-head .icon-button svg { width: 15px; height: 15px; }
.product-picker .product-card { background: var(--surface-control); }
.product-picker .product-card footer { min-height: 52px; }
/* products whose designer hasn't shipped (or whose pricing isn't set up) stay visible for
   context but read as clearly not-yet-choosable */
.product-card.unavailable { opacity: .55; }
.product-card.unavailable:hover { border-color: var(--border); transform: none; }
.product-card.unavailable img { filter: grayscale(1); }
.product-card-note { font-size: 11px; color: var(--muted); font-style: italic; }

/* Designer Configuration page (option catalogue + per-designer visibility).
   .catalogue-row is a two-column grid (main | badge) with the action strip on a collapsed
   second row — option rows keep that contract by wrapping swatch + text in ONE cell. */
.dcfg-columns { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.dcfg-option-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dcfg-option-main .catalogue-row-main { flex: 1 1 auto; min-width: 0; }
.dcfg-preview { width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1px solid var(--border); }
/* status badges sit centred in a fixed-width column regardless of Active/Off label length */
.dcfg-columns .catalogue-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.dcfg-columns .catalogue-row .badge { width: 54px; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding-left: 0; padding-right: 0; }
/* one tidy meta line under the name — long codes truncate instead of wrapping ragged */
.dcfg-columns .catalogue-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* visibility column: checkbox rows with the default buttons in an aligned right-hand column */
.dcfg-designer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; }
.dcfg-designer-row:hover { background: var(--surface-hover); }
.dcfg-designer-name { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; min-width: 0; }
.dcfg-designer-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcfg-designer-name input { width: 15px; height: 15px; flex: none; accent-color: var(--brass); }
.dcfg-designer-row .btn-mini { flex: none; min-width: 96px; justify-content: center; }
.dcfg-columns .section-title { margin: 10px 6px 4px; }
.dcfg-columns .section-title:first-child { margin-top: 4px; }

/* Backdrop behind panels/drawer */
.wd2d-backdrop { position: absolute; inset: 0; z-index: 40; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .26s ease; }
.wd2d-backdrop.visible { opacity: 1; pointer-events: all; }

/* ── Canvas area ── */
.wd2d-canvas-area { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.wd2d-canvas-area.bg-grid { background-color: #f6f8fa; background-image: radial-gradient(rgba(20, 26, 36, .10) 1px, transparent 1px); background-size: 28px 28px; }
.wd2d-canvas-area.bg-clouds { background: url('/img/designer/clouds.jpg') center/cover; }
.wd2d-canvas-area.bg-plain { background: #eef1f4; }
/* The engine sizes the drawing canvas to #preview-area (this frame) — inset below the floating
   toolbar so the window drawing can never paint underneath it. */
.wd2d-canvas-frame { position: absolute; inset: 74px 12px 12px; }
.wd2d-canvas {
    width: 100%; height: 100%; display: block;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M3 21l1.2-4.2L16.5 4.5a2.12 2.12 0 0 1 3 3L7.2 19.8z" fill="white" stroke="%23222831" stroke-width="1.7" stroke-linejoin="round"/><path d="M14.5 6.5l3 3" stroke="%23222831" stroke-width="1.4"/></svg>') 2 20, crosshair;
}

/* Floating canvas toolbar */
.wd2d-canvas-toolbar { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-panel), transparent 8%); backdrop-filter: blur(8px); box-shadow: 0 4px 20px rgba(0, 0, 0, .08); }
.wd2d-view-seg { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-control); }
.wd2d-view-seg button { padding: 5px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.wd2d-view-seg button.active { background: var(--surface-panel); color: var(--brass); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
.wd2d-ct-divider { width: 1px; height: 20px; background: var(--border); }
.wd2d-ct-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: all .2s ease; }
.wd2d-ct-icon:hover { background: var(--surface-hover); color: var(--text); }
.wd2d-ct-icon.active { color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-ct-icon svg { width: 15px; height: 15px; }

/* Adjust dropdown (opens downward from the canvas toolbar) */
.wd2d-adjust-wrap { position: relative; }
.wd2d-adjust-dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); width: 250px; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 8px; display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; transition: all .2s cubic-bezier(.4, 0, .2, 1); }
.wd2d-adjust-dropdown.open { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
.wd2d-adjust-cap { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 7px 10px 3px; }
.wd2d-adjust-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; transition: all .2s ease; }
.wd2d-adjust-item:hover { background: var(--surface-hover); color: var(--brass); }
.wd2d-adjust-item svg { width: 14px; height: 14px; flex: none; opacity: .6; }

/* Pane quick-options popover */
.wd2d-quickpane { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 35; width: min(420px, calc(100% - 28px)); background: var(--surface-panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 22px 50px rgba(0, 0, 0, .28); padding: 14px; animation: wd2d-slide-up .3s ease; }
.wd2d-quickpane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wd2d-quickpane-head small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wd2d-quickpane-head b { font-size: 13px; }
.wd2d-quickpane-section { margin-bottom: 12px; }
.wd2d-quickpane-section:last-child { margin-bottom: 0; }
.wd2d-quickpane-row { display: flex; gap: 8px; margin-bottom: 12px; }
.wd2d-quickpane-row .btn-mini { flex: 1; justify-content: center; }
.wd2d-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wd2d-chip { min-width: 38px; height: 34px; padding: 0 12px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-control); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.wd2d-chip:hover { border-color: var(--brass); }
.wd2d-chip.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); }
.wd2d-texture-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wd2d-texture { width: 52px; height: 52px; flex: none; padding: 0; overflow: hidden; border: 2px solid var(--border); border-radius: 8px; background: var(--surface-control); cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.wd2d-texture:hover { border-color: var(--brass); transform: scale(1.06); }
.wd2d-texture.active { border-color: var(--brass); }
.wd2d-texture img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hydrated thumbnails are the engine's rendered frosted-glass previews (white frost with alpha):
   a dark glass backing + a contrast lift makes each pattern read like the real obscure glass. */
.wd2d-texture img[data-glass-hydrated] { background: linear-gradient(160deg, #3b567f 0%, #16233a 100%); filter: contrast(1.6) brightness(1.04) saturate(.9); }
.wd2d-texture-clear { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #fff 0%, #e6edf2 100%); }

@keyframes wd2d-slide-up { from { transform: translateX(-50%) translateY(16px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* ── Slide-in option panels ── */
.wd2d-panel {
    position: absolute; left: calc(var(--wd-side-w) + 8px); top: 16px; bottom: 16px;
    width: var(--wd-panel-w); z-index: 50;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface-panel); border: 1px solid var(--border); border-radius: 20px;
    box-shadow: var(--wd-shadow);
    transform: translateX(-120%) scale(.95); opacity: 0; pointer-events: none;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.wd2d-panel.open { transform: translateX(0) scale(1); opacity: 1; pointer-events: all; }

/* Sub-panels attach to the parent panel's right edge */
.wd2d-subpanel {
    position: absolute; left: calc(var(--wd-side-w) + 8px + var(--wd-panel-w) + 8px); top: 16px; bottom: 16px;
    width: 280px; z-index: 51;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface-panel); border: 1px solid var(--border); border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    transform: translateX(-12px) scale(.97); opacity: 0; pointer-events: none;
    transition: all .24s cubic-bezier(.4, 0, .2, 1);
}
.wd2d-subpanel.open { transform: translateX(0) scale(1); opacity: 1; pointer-events: all; }

.wd2d-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 16px 16px 22px; border-bottom: 1px solid var(--border); flex: none; transition: padding .2s ease; }
.wd2d-panel-head.has-submenu { padding-right: 12px; }
.wd2d-panel-head.has-submenu .wd2d-panel-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wd2d-panel-title { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; }
.wd2d-panel-title svg { width: 16px; height: 16px; color: var(--brass); flex: none; }
.wd2d-panel-close { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--surface-control); color: var(--muted); cursor: pointer; transition: all .2s ease; }
.wd2d-panel-close:hover { background: color-mix(in srgb, var(--red), transparent 86%); color: var(--red); }
.wd2d-panel-close svg { width: 13px; height: 13px; }
.wd2d-panel-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 22px; scroll-behavior: smooth; }
.wd2d-panel-body::-webkit-scrollbar { width: 4px; }
.wd2d-panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.wd2d-panel-apply { margin: 0 14px 14px; padding: 11px; flex: none; display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--brass); color: var(--accent-ink); border: 0; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .18s ease; }
.wd2d-panel-apply:hover { background: color-mix(in srgb, var(--brass), #fff 14%); transform: translateY(-1px); }
.wd2d-panel-apply svg { width: 14px; height: 14px; }

.wd2d-section-label { display: block; font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 2px 0 8px; }
.wd2d-hint { font-size: 11px; color: var(--muted); line-height: 1.55; margin: 10px 0 0; display: flex; align-items: flex-start; gap: 6px; }
.wd2d-hint svg { width: 13px; height: 13px; color: var(--brass); flex: none; margin-top: 1px; }

/* Style cards (frame type) */
.wd2d-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wd2d-style-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-control); color: var(--text); cursor: pointer; transition: all .2s ease; }
.wd2d-style-card:hover { border-color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-style-card.selected { border-color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-style-card svg { width: 46px; height: 46px; color: color-mix(in srgb, var(--text), var(--muted) 30%); }
.wd2d-style-card.selected svg { color: var(--brass); }
.wd2d-style-card span { font-size: 11px; font-weight: 700; }

/* Option rows (glass / glazing / hardware / extras) */
.wd2d-option-list { display: flex; flex-direction: column; gap: 6px; }
.wd2d-option-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 2px solid transparent; border-radius: 10px; background: var(--surface-control); color: var(--text); text-align: left; cursor: pointer; transition: all .18s ease; }
.wd2d-option-row:hover { border-color: var(--brass); background: var(--surface-hover); }
.wd2d-option-row.selected { border-color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-or-icon { width: 30px; flex: none; display: grid; place-items: center; color: var(--muted); }
.wd2d-or-icon svg { width: 17px; height: 17px; }
.wd2d-option-row.selected .wd2d-or-icon { color: var(--brass); }
.wd2d-or-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wd2d-or-label { font-size: 12px; font-weight: 700; }
.wd2d-or-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
.wd2d-or-price { flex: none; font-size: 11px; font-weight: 700; color: var(--brass); white-space: nowrap; }

/* Colour swatch grid */
.wd2d-swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wd2d-swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; min-width: 0; }
.wd2d-swatch-chip { display: block; width: 100%; aspect-ratio: 1; border-radius: 9px; border: 3px solid transparent; box-shadow: inset 0 0 0 1px var(--border); transition: all .15s ease; }
.wd2d-swatch:hover .wd2d-swatch-chip { transform: scale(1.07); }
.wd2d-swatch.selected .wd2d-swatch-chip { border-color: var(--surface-panel); box-shadow: 0 0 0 2px var(--brass); }
.wd2d-swatch small { font-size: 9px; color: var(--muted); font-weight: 600; line-height: 1.15; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wd2d-swatch-pct { font-size: 8.5px; font-style: normal; color: var(--brass); background: var(--wd-accent-soft); border-radius: 5px; padding: 1px 4px; }

/* Inside / sash sub-panel launch rows */
.wd2d-subrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.wd2d-subrow .wd2d-section-label { margin: 0; }
.wd2d-sub-open { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-control); color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.wd2d-sub-open:hover, .wd2d-sub-open.active { border-color: var(--brass); color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-sub-open svg { width: 11px; height: 11px; }

/* Dimensions panel */
.wd2d-size-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.wd2d-size-label { font-size: 10.5px; font-weight: 700; color: color-mix(in srgb, var(--text), var(--muted) 35%); text-transform: uppercase; letter-spacing: .05em; }
.wd2d-size-input-wrap { display: flex; align-items: stretch; }
.wd2d-size-input { flex: 1; min-width: 0; background: var(--surface-control); border: 1.5px solid var(--border); border-right: 0; color: var(--text); padding: 9px 13px; font-size: 16px; font-weight: 600; border-radius: 8px 0 0 8px; outline: none; transition: border-color .15s ease; }
.wd2d-size-input:focus { border-color: var(--brass); }
.wd2d-size-unit { display: grid; place-items: center; background: var(--surface-hover); border: 1.5px solid var(--border); color: var(--muted); padding: 0 12px; font-size: 12px; font-weight: 600; border-radius: 0 8px 8px 0; }
.wd2d-size-steps { display: flex; gap: 6px; }
.wd2d-size-steps button { flex: 1; background: var(--surface-control); border: 1.5px solid var(--border); color: var(--muted); padding: 6px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all .15s ease; }
.wd2d-size-steps button:hover { background: var(--surface-hover); color: var(--text); }
.wd2d-size-steps button:active { background: var(--wd-accent-soft); color: var(--brass); }

/* Toggle + misc rows */
.wd2d-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 40%); font-size: 12px; font-weight: 600; }
.wd2d-field-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.wd2d-field-static { display: flex; align-items: center; opacity: .75; cursor: default; }
.wd2d-inline-actions { display: flex; gap: 8px; margin-top: 12px; }
.wd2d-inline-actions .btn { flex: 1; justify-content: center; }
.wd2d-bar-swatches { display: flex; gap: 8px; }
.wd2d-bar-swatch { width: 30px; height: 30px; border-radius: 7px; border: 2px solid var(--border); cursor: pointer; transition: all .15s ease; padding: 0; }
.wd2d-bar-swatch:hover { transform: scale(1.08); }
.wd2d-bar-swatch.active { border-color: var(--brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass), transparent 70%); }

/* ── Price breakdown drawer (slides in from the right) ── */
.wd2d-drawer { position: absolute; right: 0; top: 0; bottom: 0; width: 320px; z-index: 55; display: flex; flex-direction: column; background: var(--surface-panel); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); }
.wd2d-drawer.open { transform: translateX(0); }
.wd2d-drawer-head { padding: 20px 20px 14px; border-bottom: 1px solid var(--border); flex: none; }
.wd2d-drawer-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.wd2d-drawer-title svg { width: 16px; height: 16px; color: var(--green); }
.wd2d-drawer-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.wd2d-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.wd2d-breakdown-meta { font-size: 10px; margin-bottom: 8px; }
.wd2d-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 40%); }
.wd2d-breakdown-row span:first-child { color: var(--muted); font-weight: 600; }
.wd2d-breakdown-row.subtotal { border-bottom: 0; margin-top: 4px; border-top: 2px solid var(--brass); padding-top: 10px; font-weight: 700; }
.wd2d-breakdown-row.subtotal span:first-child { color: var(--text); }
/* building-work rows in the drawer carry their own remove button */
.wd2d-breakdown-row.removable { justify-content: flex-start; }
.wd2d-breakdown-row.removable span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd2d-breakdown-row.removable .wd2d-panel-close { width: 22px; height: 22px; flex: none; }
.wd2d-breakdown-row.removable .wd2d-panel-close svg { width: 10px; height: 10px; }
.wd2d-total-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: var(--surface-control); }
.wd2d-total-card span { font-size: 13px; font-weight: 700; }
.wd2d-total-card b { font-size: 21px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.wd2d-drawer-close { margin: 0 20px 20px; padding: 11px; flex: none; display: flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 1.5px solid var(--border); color: var(--muted); border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all .15s ease; }
.wd2d-drawer-close:hover { border-color: var(--red); color: var(--red); }
.wd2d-drawer-close svg { width: 13px; height: 13px; }

/* Building work (extras panel add row — the added lines live in the price drawer) */
.wd2d-bwork-add { display: flex; gap: 6px; align-items: center; }
.wd2d-bwork-add .field { padding: 7px 8px; font-size: 12px; min-width: 0; }
.wd2d-bwork-qty { width: 52px; flex: none; text-align: center; }
.wd2d-bwork-add .btn { flex: none; padding: 8px 12px; }

/* ── Toasts ── */
.wd2d-toast-stack { position: fixed; bottom: 56px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.wd2d-toast { display: flex; align-items: center; gap: 10px; max-width: 380px; padding: 11px 17px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-panel); color: var(--text); font-size: 12px; font-weight: 500; box-shadow: 0 8px 32px rgba(0, 0, 0, .3); backdrop-filter: blur(12px); animation: wd2d-toast-in .3s ease both; transition: opacity .3s ease; }
.wd2d-toast svg { width: 15px; height: 15px; flex: none; }
.wd2d-toast.success { border-color: color-mix(in srgb, var(--green), transparent 40%); }
.wd2d-toast.success svg { color: var(--green); }
.wd2d-toast.info { border-color: color-mix(in srgb, var(--brass), transparent 40%); }
.wd2d-toast.info svg { color: var(--brass); }
@keyframes wd2d-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── 3D preview overlay — covers just the canvas area; the sidebar stays live and the same
      "3D view" button (now reading "2D view") toggles back. Sits under the backdrop/panels so
      option panels still slide over it and the live-rebuild watcher shows changes in 3D. ── */
.wd2d-3d-overlay { position: absolute; inset: 0; z-index: 38; display: flex; flex-direction: column; background:
    radial-gradient(1200px 600px at 50% 20%, color-mix(in srgb, var(--brass), transparent 94%), transparent 60%),
    linear-gradient(180deg, var(--surface-page) 0%, color-mix(in srgb, var(--surface-page), #46648c 14%) 100%); }
.wd2d-3d-badge { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--brass), transparent 10%), color-mix(in srgb, var(--brass), #000 25%)); color: #10151c; font-size: 11px; font-weight: 700; z-index: 2; }
.wd2d-3d-badge svg { width: 13px; height: 13px; }
.wd2d-3d-host { flex: 1; min-height: 0; }
.wd2d-3d-host canvas { display: block; width: 100%; height: 100%; }
.wd2d-3d-loading { display: flex; align-items: center; gap: 9px; justify-content: center; padding: 12px; color: var(--muted); font-size: 13px; }
.wd2d-3d-error { margin: 12px 16px; }

/* Opening amount card (casement/tilt-turn only — flush leaves are fixed-built) */
.wd2d-3d-controls { position: absolute; bottom: 20px; right: 20px; z-index: 2; width: 220px; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); animation: wd2d-rise-up .3s ease both; }
.wd2d-3d-controls-row { display: flex; align-items: center; justify-content: space-between; }
.wd2d-3d-controls-row span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.wd2d-3d-controls-row b { font-size: 11px; font-weight: 700; color: var(--brass); font-variant-numeric: tabular-nums; }
.wd2d-3d-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--surface-control); border-radius: 3px; outline: none; cursor: pointer; }
.wd2d-3d-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--brass); border: 3px solid var(--surface-panel); border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .1s ease; }
.wd2d-3d-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.wd2d-3d-slider::-moz-range-thumb { width: 15px; height: 15px; background: var(--brass); border: 3px solid var(--surface-panel); border-radius: 50%; }
.wd2d-3d-controls-btns { display: flex; gap: 8px; }
.wd2d-3d-controls-btns button { flex: 1; padding: 6px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-control); color: var(--muted); cursor: pointer; transition: all .15s ease; }
.wd2d-3d-controls-btns button:hover { background: var(--surface-hover); color: var(--text); }
@keyframes wd2d-rise-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Setup modal ── */
.wd2d-setup-backdrop { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, #000, transparent 45%); backdrop-filter: blur(6px); }
.wd2d-setup { width: min(440px, 100%); background: var(--surface-panel); border: 1px solid var(--border); border-radius: 20px; padding: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); animation: rise-in .3s cubic-bezier(.22, 1, .36, 1) both; }
.wd2d-setup h3 { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.wd2d-setup > p { margin: 0 0 16px; }
.wd2d-setup-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ── Responsive ── */
@media (max-width: 1300px) {
    /* Keep the centred price pill clear of the location input on narrower screens */
    .wd2d-location-label { display: none; }
    .wd2d-location-input { width: 120px; }
}
@media (max-width: 900px) {
    .wd2d-shell { --wd-side-w: 60px; --wd-panel-w: 270px; }
    .wd2d-tool-btn { width: 50px; }
    .wd2d-tool-label { font-size: 8px; }
    .wd2d-subpanel { width: 230px; }
    .wd2d-drawer { width: 270px; }
    .wd2d-location-wrap { display: none; }
    .wd2d-brand-text small { max-width: 130px; }
}

/* ============================================================
   Interactive dashboard charts (bar / line / donut)
   ============================================================ */
.dashboard-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.dashboard-charts .chart-wide { grid-column: 1 / -1; }

.chart-bars-svg, .chart-line-svg { width: 100%; height: auto; display: block; margin-top: 12px; }
.chart-bar { transition: filter .14s ease, opacity .14s ease; cursor: default; }
.chart-bar.hot { filter: brightness(1.18); }
.chart-bar-label, .chart-line-label { font-size: 11px; fill: var(--muted); }
.chart-bar-value, .chart-line-value { font-size: 11px; font-weight: 700; fill: var(--text); font-family: 'JetBrains Mono', monospace; }
.chart-line-dot { transition: r .12s ease; cursor: default; }
.chart-line-dot.hot { filter: brightness(1.15); }

.chart-donut { display: flex; align-items: center; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.chart-donut-svg { width: 158px; height: 158px; flex: none; }
.chart-donut-seg { transition: stroke-width .14s ease, opacity .14s ease; cursor: default; }
.chart-donut-seg.hot { stroke-width: 32; }
.chart-donut-total { font-size: 30px; font-weight: 700; fill: var(--text); text-anchor: middle; font-family: 'JetBrains Mono', monospace; }
.chart-donut-cap { font-size: 11px; fill: var(--muted); text-anchor: middle; text-transform: uppercase; letter-spacing: .04em; }
.chart-donut-legend { flex: 1; min-width: 150px; display: grid; gap: 4px; }
.chart-legend-row { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 7px; font-size: 12px; cursor: default; transition: background-color .14s ease; }
.chart-legend-row.hot { background: var(--surface-hover); }
.chart-legend-row i { width: 11px; height: 11px; flex: none; border-radius: 3px; }
.chart-legend-row span { flex: 1; color: var(--muted); }
.chart-legend-row b { font-family: 'JetBrains Mono', monospace; }

/* Funnel */
.chart-funnel-svg { width: 100%; height: auto; display: block; margin-top: 12px; }
.chart-funnel-bar { transition: filter .14s ease; cursor: default; }
.chart-funnel-bar.hot { filter: brightness(1.15); }
.chart-funnel-label { font-size: 12px; font-weight: 600; fill: #fff; font-family: 'JetBrains Mono', monospace; }
.chart-funnel-step { font-size: 11px; font-weight: 700; fill: var(--muted); font-family: 'JetBrains Mono', monospace; }

/* Heatmap */
.heatmap-wrap { overflow-x: auto; margin-top: 12px; }
.heatmap { border-collapse: separate; border-spacing: 3px; width: 100%; }
.heatmap th { font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 6px; }
.heatmap .heatmap-col { text-align: center; }
.heatmap .heatmap-row { text-align: right; white-space: nowrap; }
.heatmap .heatmap-corner { text-align: left; }
.heatmap-cell { text-align: center; min-width: 44px; height: 32px; border-radius: 6px; font: 700 11px 'JetBrains Mono', monospace; transition: transform .12s ease; }
.heatmap-cell:hover { transform: scale(1.06); }

/* Report filter presets + small buttons */
.filter-presets { display: inline-flex; gap: 6px; align-items: center; }
.filter-presets .chip { min-width: 40px; height: 32px; padding: 0 10px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-control); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.filter-presets .chip:hover:not(:disabled) { border-color: var(--brass); color: var(--brass); }
.btn.xs { height: 28px; padding: 0 10px; font-size: 11px; }

/* Attainment / KPI progress */
.attain-bar { height: 7px; border-radius: 999px; background: var(--surface-control); overflow: hidden; margin-top: 6px; }
.attain-bar > i { display: block; height: 100%; border-radius: 999px; }
.lead-rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 11px 'JetBrains Mono', monospace; background: var(--surface-control); color: var(--muted); }
.lead-rank.gold { background: #f2c14e; color: #4a3800; }
.lead-rank.silver { background: #c9d1d9; color: #333; }
.lead-rank.bronze { background: #d8a06a; color: #3a1e00; }
.trend-up { color: var(--good, #2e9e5b); } .trend-down { color: var(--bad, #d05b5b); }

@media(max-width: 900px) {
    .dashboard-charts { grid-template-columns: 1fr; }
}

/* ============================================================
   Product Visualizer (Konva — place products on a home photo)
   ============================================================ */
.viz-status { font-size: 11px; font-weight: 600; color: var(--muted); padding: 5px 11px; border-radius: 999px; background: var(--surface-control); }
.viz-status.ready { color: var(--green); background: color-mix(in srgb, var(--green), transparent 88%); }
.viz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: stretch; }
.viz-stage-card { position: relative; padding: 0; overflow: hidden; min-height: calc(100vh - 170px); display: grid; }
.viz-stage { width: 100%; height: 100%; min-height: calc(100vh - 170px);
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--brass), transparent 94%), transparent),
        repeating-conic-gradient(var(--surface-control) 0% 25%, var(--surface-raised) 0% 50%) 0 0 / 28px 28px; }
.viz-stage-hint { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 30px; pointer-events: none; }
.viz-stage-hint svg { width: 42px; height: 42px; color: var(--brass); opacity: .8; }
.viz-stage-hint p { max-width: 320px; color: var(--muted); font-size: 13px; }

.viz-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: calc(100vh - 170px); }
.viz-tabs { padding: 0 10px; }
.viz-panel-body { padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.viz-upload { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 1px dashed var(--border); border-radius: 10px; color: var(--brass); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.viz-upload:hover { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 92%); }
.viz-upload svg { width: 15px; height: 15px; }
.viz-hint { font-size: 11.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.viz-prod-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brass); margin-top: 6px; }
.viz-thumb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.viz-thumb { display: flex; flex-direction: column; gap: 5px; padding: 5px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); cursor: pointer; transition: border-color .16s ease, transform .14s ease; }
.viz-thumb:hover { border-color: var(--brass); transform: translateY(-1px); }
.viz-thumb:disabled { opacity: .5; cursor: not-allowed; }
.viz-thumb.active { border-color: var(--brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass), transparent 70%); }
.viz-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; }
.viz-thumb span { font-size: 10px; color: var(--muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media(max-width: 900px) {
    .viz-layout { grid-template-columns: 1fr; }
    .viz-stage-card, .viz-stage, .viz-panel { min-height: 60vh; }
}

/* ===== Window Pricing page ===== */
.pricing-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.pricing-tab { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); color:var(--muted); cursor:pointer; font-size:12px; font-weight:600; transition:all .15s ease; }
.pricing-tab:hover { color:var(--text); border-color:color-mix(in srgb, var(--brass), transparent 50%); }
.pricing-tab.active { color:var(--brass); border-color:var(--brass); background:color-mix(in srgb, var(--brass), transparent 92%); }
.pricing-tab .count { font-size:10px; padding:1px 6px; border-radius:999px; background:var(--surface-control); color:var(--muted); }
.pricing-tab.active .count { background:color-mix(in srgb, var(--brass), transparent 80%); color:var(--brass); }
.pricing-tab svg { width:14px; height:14px; }

.save-flash { position:fixed; bottom:18px; right:18px; z-index:60; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px; background:color-mix(in srgb, var(--green), #000 10%); color:#fff; font-size:12px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.3); animation:fadein .15s ease; }
.save-flash svg { width:14px; height:14px; }
@keyframes fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.matrix-controls { display:flex; align-items:center; gap:14px; margin-left:auto; flex-wrap:wrap; }
.seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.seg-btn { padding:5px 12px; background:var(--surface-raised); color:var(--muted); border:0; cursor:pointer; font-size:11px; font-weight:600; }
.seg-btn.active { background:var(--brass); color:#1a1206; }
.small { font-size:11px; }

.price-matrix-wrap { overflow:auto; max-height:64vh; border:1px solid var(--border); border-radius:10px; }
.price-matrix { border-collapse:separate; border-spacing:0; font-size:11px; }
.price-matrix th, .price-matrix td { padding:5px 8px; text-align:right; white-space:nowrap; border-bottom:1px solid color-mix(in srgb, var(--border), transparent 40%); border-right:1px solid color-mix(in srgb, var(--border), transparent 40%); }
.price-matrix thead th { position:sticky; top:0; z-index:2; background:var(--surface-control); color:var(--muted); font-weight:600; }
.price-matrix th.row-head { position:sticky; left:0; z-index:1; background:var(--surface-control); color:var(--muted); text-align:right; }
.price-matrix th.corner { position:sticky; left:0; top:0; z-index:3; background:var(--surface-control); color:var(--brass); text-align:center; }
.price-matrix tbody td { color:var(--text); cursor:pointer; font-variant-numeric:tabular-nums; }
.price-matrix tbody td:hover { background:color-mix(in srgb, var(--brass), transparent 86%); color:var(--brass); }
.price-matrix tbody td.empty { color:var(--muted); cursor:default; }
.price-matrix tbody td.editing { padding:1px; }
.price-matrix .cell-edit { width:64px; padding:3px 5px; text-align:right; border:1px solid var(--brass); border-radius:5px; background:var(--surface-panel); color:var(--text); font-size:11px; }

.price-list td, .price-list th { vertical-align:middle; }
.price-list th.num, .price-list td.num { text-align:right; }
.price-list th.status-col, .price-list td.status-col { text-align:center; width:64px; }
.price-list tr.row-off td { opacity:.5; }
.field.inline { padding:5px 8px; font-size:12px; min-width:120px; }
.field.inline.num { min-width:90px; max-width:120px; text-align:right; font-variant-numeric:tabular-nums; }
.field.inline.narrow { min-width:90px; max-width:130px; }

.pricing-settings .form-grid { max-width:760px; }
.pricing-calc { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:14px; align-items:start; }
@media (max-width:900px){ .pricing-calc { grid-template-columns:1fr; } }
.check-row { display:flex; align-items:center; gap:10px; }
.extras-pick { display:flex; flex-wrap:wrap; gap:8px; }
.extra-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--surface-raised); cursor:pointer; font-size:11px; }
.extra-chip.on { border-color:var(--brass); background:color-mix(in srgb, var(--brass), transparent 90%); color:var(--brass); }
.extra-chip input { accent-color:var(--brass); }
.calc-result .breakdown td { padding:7px 8px; }
.calc-result .breakdown tfoot tr.unit td { border-top:2px solid var(--brass); font-size:14px; }
.calc-result .breakdown tfoot tr.total td { color:var(--muted); }
.breakdown td.num { text-align:right; }

/* breakdown table fit + gold amounts */
.calc-result { overflow:hidden; }
.calc-result .breakdown { width:100%; table-layout:fixed; }
.calc-result .breakdown td { white-space:normal; word-break:break-word; }
.calc-result .breakdown td.num { width:96px; white-space:nowrap; color:var(--brass); }

.calc-result .breakdown { min-width:0; }

.price-list { min-width:0; width:100%; }
.price-list .field.inline { min-width:90px; }

/* presentation: save-as-quote */
.quote-save-row { display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.quote-saved { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; background:color-mix(in srgb, var(--green), #000 8%); color:#fff; font-size:14px; }
.quote-saved svg { width:16px; height:16px; }
.form-error-inline { display:inline-flex; align-items:center; gap:6px; color:var(--red); font-size:12px; }
.form-error-inline svg { width:14px; height:14px; }

/* presentation review — outside/inside elevations */
.review-elevations { display: flex; gap: 12px; }
.review-elevations .review-thumb { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0; }
.review-elevations .review-thumb img { width: 150px; height: 150px; object-fit: contain; background: #f4f6f8; border-radius: 12px; border: 1px solid var(--border); }
.review-elevations figcaption { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media(max-width: 640px) {
    .review-elevations .review-thumb img { width: 116px; height: 116px; }
}

/* quote view document */
.quote-doc { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.quote-doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.quote-doc-head h2 { margin: 0 0 4px; }
.quote-doc-status { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.quote-doc-total { display: flex; flex-direction: column; }
.quote-doc-total span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.quote-doc-total b { font-size: 20px; }
.quote-lines { display: flex; flex-direction: column; gap: 10px; }
.quote-line { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; }
.quote-line-imgs { display: flex; gap: 8px; }
.quote-line-imgs figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.quote-line-imgs img { width: 96px; height: 96px; object-fit: contain; background: #f4f6f8; border: 1px solid var(--border); border-radius: 8px; }
.quote-line-imgs figcaption { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.quote-line-noimg { width: 96px; height: 96px; display: grid; place-items: center; background: var(--surface-raised); border-radius: 8px; }
.quote-line-noimg svg { width: 28px; height: 28px; }
.quote-line-body h3 { margin: 0 0 8px; font-size: 15px; }
.quote-line-specs { display: flex; flex-wrap: wrap; gap: 14px; }
.quote-line-specs span { display: flex; flex-direction: column; }
.quote-line-specs small { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.quote-line-price { text-align: right; }
.quote-line-price b { font-size: 16px; display: block; }
.quote-line-works { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.quote-line-works-cap { display: flex; align-items: center; gap: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.quote-line-works-cap svg { width: 12px; height: 12px; color: var(--brass); }
.quote-line-work-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; padding: 2px 0; color: var(--text); }
.quote-doc-totals { padding: 14px 20px; display: flex; flex-direction: column; gap: 6px; }
.quote-total-row { display: flex; justify-content: space-between; font-size: 13px; }
.quote-total-row.grand { border-top: 2px solid var(--brass); margin-top: 6px; padding-top: 8px; font-size: 16px; font-weight: 700; }
.quote-saved-link { margin-left: 10px; color: #fff; text-decoration: underline; font-size: 12px; }

/* project spec — designed products gallery */
.project-designs-panel { margin-top: 14px; }
.project-design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.project-design-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface-raised); }
.project-design-imgs { display: flex; gap: 6px; margin-bottom: 8px; }
.project-design-imgs figure { margin: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.project-design-imgs img { width: 100%; height: 78px; object-fit: contain; background: #f4f6f8; border: 1px solid var(--border); border-radius: 6px; }
.project-design-imgs figcaption { font-size: 8px; text-transform: uppercase; color: var(--muted); }
.project-design-info { display: flex; flex-direction: column; gap: 2px; }
.project-design-info small { font-size: 10px; }
.btn.danger-text { color: var(--red); }
.btn.danger-text:hover { border-color: var(--red); color: var(--red); }

/* ===== Specifications tab (redesigned): version bar + product cards ===== */
.spec2 { display: flex; flex-direction: column; gap: 12px; max-width: 1080px; }

/* version bar */
.spec2-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.spec2-bar-actions { display: flex; align-items: center; gap: 8px; }
.spec2-verpick { display: flex; align-items: center; gap: 10px; }
.spec2-verlabel { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
/* The base .field fixes height at 30px with no vertical padding; adding 8px padding inside that
   fixed box cropped the text, so this select sizes to its own content instead. */
.spec2-verselect { width: auto; min-width: 220px; height: auto; padding: 8px 30px 8px 10px; font-size: 13px; }

/* draft / history status bars */
.spec2-draftbar, .spec2-histbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-radius: 3px; padding: 10px 14px; }
.spec2-draftbar { background: color-mix(in srgb, var(--orange), transparent 88%); border: 1px solid color-mix(in srgb, var(--orange), transparent 62%); }
.spec2-draftmsg, .spec2-histmsg { display: flex; align-items: center; gap: 10px; }
.spec2-draftmsg svg { width: 18px; height: 18px; color: var(--orange); flex: none; }
.spec2-draftmsg b, .spec2-histmsg b { display: block; font-size: 13px; }
.spec2-draftmsg small, .spec2-histmsg small { display: block; font-size: 11px; }
.spec2-draftacts { display: flex; align-items: center; gap: 8px; }
/* saved = quiet inline line, not a loud banner */
.spec2-savedbar { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); padding: 2px 2px; }
.spec2-savedbar svg { width: 14px; height: 14px; color: var(--green); }
.spec2-histbar { background: var(--surface-raised); border: 1px solid var(--border); }
.spec2-histmsg svg { width: 16px; height: 16px; color: var(--brass); flex: none; }
.spec2-histmeta { display: flex; align-items: center; gap: 12px; }

/* product cards — media | body, one price rail */
.spec2-list { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.spec-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-raised); }
.spec-card-media { display: flex; gap: 8px; align-self: start; }
.spec-card-media figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.spec-card-media img { width: 94px; height: 94px; object-fit: contain; background: #f4f6f8; border: 1px solid var(--border); border-radius: 3px; }
.spec-card-media figcaption { font-size: 8px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.spec-card-noimg { width: 94px; height: 94px; display: flex; align-items: center; justify-content: center; background: var(--surface-control); border: 1px solid var(--border); border-radius: 3px; }
.spec-card-noimg svg { width: 28px; height: 28px; color: var(--muted); }
.spec-card-body { min-width: 0; display: flex; flex-direction: column; }
.spec-card-head { display: flex; align-items: center; gap: 9px; }
.spec-card-idx { flex: none; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--surface-control); border: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--muted); }
.spec-card-head h4 { margin: 0; font-size: 15px; }
/* quantity stepper */
.spec-qty-wrap { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; }
.spec-qty-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.spec-qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.spec-qty-btn { width: 30px; height: 28px; border: 0; background: var(--surface-control); color: var(--text); cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.spec-qty-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--brass); }
.spec-qty-btn:disabled { opacity: .35; cursor: default; }
.spec-qty-val { min-width: 34px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; border-left: 1px solid var(--border); border-right: 1px solid var(--border); align-self: stretch; display: flex; align-items: center; justify-content: center; }
.spec-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.spec-chip { font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-control); color: var(--muted); }
/* single itemised price rail */
.spec-lines { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; max-width: 460px; }
.spec-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 13px; padding: 3px 0; }
.spec-line > span:first-child { color: var(--muted); }
.spec-line.product > span:first-child { color: var(--text); }
.spec-line.work { font-size: 12px; }
.spec-line.work > span:first-child { color: var(--text); padding-left: 14px; }
.spec-lines-cap { display: flex; align-items: center; gap: 5px; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 6px 0 2px; }
.spec-lines-cap svg { width: 12px; height: 12px; color: var(--brass); }
.spec-line.total { margin-top: 6px; border-top: 2px solid var(--brass); padding-top: 8px; font-size: 15px; }
.spec-line.total > span:first-child { color: var(--text); font-weight: 700; }
/* actions — own row, natural width (no cramming/overlap) */
.spec-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.spec-card-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--red), transparent 55%); border-radius: 3px; background: color-mix(in srgb, var(--red), transparent 92%); }
.spec-card-confirm > span { font-size: 12px; color: var(--text); }
.spec-card-confirm .spec-card-acts { margin: 0 0 0 auto; }
@container (max-width: 520px) {
  .spec-card { grid-template-columns: 1fr; }
}

@media print {
  .sidebar, .topbar .btn, #customer-mode-banner { display: none !important; }
}

/* presentation review header actions */
.review-head-actions { display: flex; gap: 8px; align-items: center; }

/* projects rework — designed product cards, revisions, embedded designer */
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-status-chip { font-size: 10px; vertical-align: middle; margin-left: 8px; }
.project-design-card .project-design-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; }
.project-design-noimg { width: 100%; height: 78px; display: grid; place-items: center; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; }
.project-design-noimg svg { width: 26px; height: 26px; color: var(--muted); }
.revision-list { display: flex; flex-direction: column; gap: 10px; }
.revision-row { display: flex; gap: 10px; align-items: flex-start; }
.revision-badge { flex: none; min-width: 30px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); font-size: 11px; font-weight: 700; }
.revision-body { font-size: 12px; }
.revision-body small { display: block; margin-top: 2px; }
.designer-overlay { position: fixed; inset: 0; z-index: 300; background: var(--surface-page); }

.section-title .btn { white-space: nowrap; flex: none; }

/* settings — lead scoring tab */
.scoring-intro { max-width: 760px; margin: 0 0 14px; }
.scoring-grid { align-items: start; }
.scoring-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.scoring-tiers .tier { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.scoring-tiers .tier.hot { background: color-mix(in srgb, var(--score-good), transparent 82%); color: var(--score-good); }
.scoring-tiers .tier.warm { background: color-mix(in srgb, var(--brass), transparent 82%); color: var(--brass); }
.scoring-tiers .tier.cold { background: color-mix(in srgb, var(--score-danger), transparent 82%); color: var(--score-danger); }
.scoring-grid .setting-card .form-group { margin-bottom: 8px; }
.scoring-grid .field { max-width: 120px; }

/* settings — lead scoring live preview */
.scoring-preview { display: flex; gap: 22px; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; }
.scoring-preview-inputs { flex: 1; min-width: 320px; }
.scoring-preview-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip-toggle { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 600; }
.chip-toggle.on { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); color: var(--brass); }
.scoring-preview-score { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 140px; }
.score-ring { width: 96px; height: 96px; border-radius: 50%; border: 4px solid; display: grid; place-items: center; font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; transition: color .15s ease, border-color .15s ease; }

/* ===== CRM grid cards — uniform, touch-friendly ===== */
.lead-grid { grid-auto-rows: 1fr; gap: 16px; }
.lead-card { display: flex; flex-direction: column; }
.lead-card-spacer { flex: 1 1 auto; min-height: 4px; }
.lead-contact > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lead-contact-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lead-assigned { color: var(--text); font-weight: 600; }
.lead-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lead-score-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
.lead-score-pill svg { width: 12px; height: 12px; }
.lead-score-pill.tier-hot { background: color-mix(in srgb, var(--score-good), transparent 84%); color: var(--score-good); }
.lead-score-pill.tier-warm { background: color-mix(in srgb, var(--brass), transparent 84%); color: var(--brass); }
.lead-score-pill.tier-cold { background: color-mix(in srgb, var(--score-danger), transparent 84%); color: var(--score-danger); }
/* bigger tap targets for tablet/touch */
.lead-footer-actions .btn, .lead-footer-actions > button { min-height: 44px; }
.lead-view-btn { min-height: 38px; padding: 0 12px; }
.lead-card-actions button { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.lead-present-btn { min-height: 44px; }

/* ===== Settings — needs / why-choose-us / currencies ===== */
.catalogue-edit td, .catalogue-edit th { vertical-align: middle; }
.catalogue-edit .field.inline { padding: 6px 9px; font-size: 12px; min-width: 120px; }
.catalogue-edit .field.inline.narrow { min-width: 70px; max-width: 90px; }
.catalogue-edit .status-col { text-align: center; width: 64px; }
.catalogue-edit tr.row-off td { opacity: .5; }
.icon-edit { display: flex; align-items: center; gap: 8px; }
.icon-edit svg { width: 18px; height: 18px; color: var(--brass); flex: none; }
tr.row-selected td { background: color-mix(in srgb, var(--brass), transparent 92%); }

/* settings catalogue-edit tables fit + nowrap add button */
.catalogue-edit { min-width: 0; width: 100%; }
.table-title .btn { white-space: nowrap; flex: none; }
.table-title { flex-wrap: wrap; }

/* ============================================================
   CRM lead/customer cards — redesigned (token-based, touch)
   ============================================================ */
.crm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-auto-rows: 1fr; gap: 16px; }

.crm-card { display: flex; flex-direction: column; gap: 14px; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.crm-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brass), transparent 55%); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.crm-card.is-dnc { border-color: color-mix(in srgb, var(--score-danger), transparent 55%); }

.crm-card-top { display: flex; align-items: flex-start; gap: 12px; }
.crm-avatar { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); font-weight: 800; font-size: 16px; border: 1px solid color-mix(in srgb, var(--brass), transparent 70%); }
.crm-id { flex: 1; min-width: 0; }
.crm-id h3 { margin: 0 0 5px; font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crm-sub .mono { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crm-score { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid; line-height: 1; }
.crm-score b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.crm-score small { font-size: 8px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; margin-top: 2px; }
.crm-score.tier-hot { border-color: var(--score-good); color: var(--score-good); background: color-mix(in srgb, var(--score-good), transparent 92%); }
.crm-score.tier-warm { border-color: var(--brass); color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 92%); }
.crm-score.tier-cold { border-color: var(--score-danger); color: var(--score-danger); background: color-mix(in srgb, var(--score-danger), transparent 92%); }

.crm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-control); color: var(--muted); border: 1px solid var(--border-soft); }
.crm-chip svg { width: 12px; height: 12px; }
.crm-chip.type { background: color-mix(in srgb, var(--brass), transparent 88%); color: var(--brass); border-color: transparent; }
.crm-chip.stage { background: color-mix(in srgb, var(--chart-primary), transparent 84%); color: var(--chart-primary); border-color: transparent; }
.crm-chip.outcome { background: color-mix(in srgb, var(--purple), transparent 85%); color: var(--purple); border-color: transparent; }
.crm-chip.warn { background: color-mix(in srgb, var(--score-danger), transparent 88%); color: var(--score-danger); border-color: transparent; }

.crm-details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.crm-details li { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; min-width: 0; }
.crm-details li svg { width: 15px; height: 15px; color: var(--brass); flex: none; }
.crm-details li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crm-assigned span { color: var(--text); font-weight: 600; }

.crm-transfer { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.crm-transfer-title { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.crm-transfer-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.crm-transfer-list button { padding: 8px 12px; min-height: 40px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-control); color: var(--text); cursor: pointer; font-size: 12px; }
.crm-transfer-list button:hover { border-color: var(--brass); color: var(--brass); }

.crm-spacer { flex: 1 1 auto; min-height: 2px; }

.crm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 16px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.crm-btn svg { width: 16px; height: 16px; }
.crm-btn.primary { background: var(--brass); color: var(--accent-ink); border-color: var(--brass); }
.crm-btn.primary:hover { background: color-mix(in srgb, var(--brass), #fff 12%); }
.crm-btn.ghost { background: var(--surface-control); color: var(--text); }
.crm-btn.ghost:hover { border-color: var(--brass); color: var(--brass); }
.crm-btn.cta { width: 100%; background: color-mix(in srgb, var(--brass), transparent 88%); color: var(--brass); border-color: color-mix(in srgb, var(--brass), transparent 55%); }
.crm-btn.cta:hover { background: color-mix(in srgb, var(--brass), transparent 80%); }
.crm-btn:disabled { opacity: .55; cursor: default; }

.crm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-actions .crm-btn { width: 100%; }

.crm-tools { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.crm-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; flex: 1; padding: 0 12px; border-radius: 11px; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 600; transition: border-color .15s ease, color .15s ease; }
.crm-tool svg { width: 16px; height: 16px; }
.crm-tool:hover { border-color: var(--brass); color: var(--brass); }
.crm-tool.icon { flex: none; width: 44px; padding: 0; }
.crm-tool.active { color: var(--score-danger); border-color: color-mix(in srgb, var(--score-danger), transparent 55%); }

@media (max-width: 480px) { .crm-grid { grid-template-columns: 1fr; } }

/* ---- align CRM cards to the sharp (2px) design standard ---- */
.crm-card { border-radius: 4px; }
.crm-card:hover { transform: none; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.crm-avatar { border-radius: 4px; }
/* score: sharp rectangular badge, not a circle */
.crm-score { width: auto; min-width: 44px; height: auto; border-radius: 3px; border-width: 1px; padding: 5px 9px; gap: 0; }
.crm-score b { font-size: 17px; }
.crm-score small { font-size: 7.5px; margin-top: 1px; }
/* chips: small, sharp, uppercase badges */
.crm-chip { border-radius: 3px; padding: 3px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.crm-chip svg { width: 11px; height: 11px; }
.crm-btn { border-radius: 3px; }
.crm-tool, .crm-tool.icon { border-radius: 3px; }

/* ---- transfer modal (searchable, scrolls, no card expansion) ---- */
.transfer-modal { width: min(440px, 92vw); max-height: 78vh; display: flex; flex-direction: column; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,.4); overflow: hidden; }
.transfer-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border-soft); }
.transfer-modal-head b { display: block; font-size: 15px; }
.transfer-modal-head small { display: block; margin-top: 2px; font-size: 12px; }
.transfer-search { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border-soft); }
.transfer-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.transfer-search .field { flex: 1; min-height: 42px; }
.transfer-users { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.transfer-user { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 56px; padding: 8px 12px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--text); cursor: pointer; transition: background-color .12s ease, border-color .12s ease; }
.transfer-user:hover { background: var(--surface-hover); border-color: color-mix(in srgb, var(--brass), transparent 60%); }
.transfer-user:disabled { opacity: .55; cursor: default; }
.transfer-user-avatar { flex: none; width: 38px; height: 38px; border-radius: 3px; display: grid; place-items: center; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); font-weight: 800; font-size: 13px; }
.transfer-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.transfer-user-info b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-user-info small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-user > svg:last-child { width: 16px; height: 16px; color: var(--muted); flex: none; }
.transfer-empty { padding: 24px 12px; text-align: center; }
.transfer-foot { padding: 10px 18px; border-top: 1px solid var(--border-soft); font-size: 11px; }

/* designer rail — product popover menu */

/* designer surface selector + pricing colour cell */
.colour-cell { display: flex; align-items: center; gap: 8px; }
.colour-swatch { width: 34px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 3px; background: none; cursor: pointer; flex: none; }
span.colour-swatch { display: inline-block; cursor: default; }

/* ============================================================
   Approved unification pass (Aug 2026)
   Scope: type-scale tokens, global focus ring, buttons w/ icons,
   form labels & touch targets, data tables, single empty-state,
   status badges with dot+text semantics.
   Loads after app.css so the #app-scoped rules below win over the
   legacy text-zoom calc() block (app.css:128-141).
   ============================================================ */
:root {
    --text-xs: 11px;
    --text-sm: 12.5px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 26px;
    --good: var(--green);
    --bad: var(--red);
}

/* Global visible keyboard focus. .field/.select-trigger keep their
   own border+ring treatment, so suppress the outline there. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--focus-ring);
}

.field:focus-visible,
.select-trigger:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Buttons: one system, icon-friendly. */
.btn { height: 32px; gap: 6px; }
.btn.danger { font-weight: 600; }

/* Type scale application — mirrors the zoom block so text zoom keeps working. */
#app .nav a, #app .side-action, #app .btn { font-size: calc(var(--text-sm) * var(--text-scale)); }
/* The page title now carries the header alone, so it steps up to --text-xl.
   16px left it level with card titles; 20px is the next rung on the scale and
   still clears the 50px bar comfortably on one line. */
#app .topbar h1 { font-size: calc(var(--text-xl) * var(--text-scale)); line-height: 1.25; }
#app .sub { font-size: calc(var(--text-xs) * var(--text-scale)); }
#app .label, #app .data-table th { font-size: calc(var(--text-xs) * var(--text-scale)); }
#app .data-table td, #app .opportunity { font-size: calc(var(--text-sm) * var(--text-scale)); }
#app .field, #app .select-trigger, #app .select-option { font-size: calc(var(--text-sm) * var(--text-scale)); }
#app .kpi small, #app .chart-sub { font-size: calc(var(--text-xs) * var(--text-scale)); }
#app .tabs button, #app .project-tabs a { font-size: calc(var(--text-sm) * var(--text-scale)); }
/* Status badges stay at 9px mono by explicit decision. */
#app .badge { font-size: calc(9px * var(--text-scale)); }

/* Status badges: dot + text so colour is never the only signal.
   Visual stays 9px JetBrains Mono, 1px currentColor border, 2px radius. */
.badge.status-survey::before, .badge.status-quoted::before,
.badge.status-progress::before, .badge.status-ordered::before,
.badge.status-lead::before, .badge.status-pending::before,
.badge.prio-urgent::before, .badge.prio-high::before,
.badge.prio-normal::before, .badge.prio-low::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* Touch targets: switch grows from 30x16 to 38x22 (WCAG 2.5.8). */
.switch { width: 38px; height: 22px; }
.switch:after { width: 16px; height: 16px; top: 3px; left: 19px; }
.switch.off:after { left: 3px; }

/* Single empty-state pattern: icon + sentence + optional action. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 16px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: var(--text-sm);
}

.empty-state .ui-icon { width: 22px; height: 22px; color: var(--blue); }
.empty-state b { color: var(--text); font-size: var(--text-md); font-weight: 600; }
.empty-state .btn { margin-top: 8px; }
td .empty-state, .data-table .empty-state, .card .empty-state { border: 0; border-radius: 0; }

/* Badge status variants needed to consolidate ad-hoc pills (won/lost, support states). */
.status-won { color: var(--green); background: color-mix(in srgb, var(--green), transparent 92%); }
.status-lost { color: var(--red); background: color-mix(in srgb, var(--red), transparent 92%); }
.status-open { color: var(--orange); background: color-mix(in srgb, var(--orange), transparent 92%); }
.status-resolved { color: var(--green); background: color-mix(in srgb, var(--green), transparent 92%); }
.status-closed { color: var(--muted); background: color-mix(in srgb, var(--muted), transparent 92%); }
.badge.status-won::before, .badge.status-lost::before, .badge.status-open::before,
.badge.status-resolved::before, .badge.status-closed::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.light .status-won { color: #047857; }
.light .status-lost { color: #b91c1c; }
.light .status-open { color: #b45309; }
.light .status-resolved { color: #047857; }

/* ============================================================
   KPI card — Option A "stacked stat" (Aug 2026)
   Reading order is label -> value -> context. The icon drops from a
   38px decorative tile to a quiet 15px corner mark, the value moves to
   --text-2xl, and the supporting line is neutral grey: colour on a KPI
   is earned by a real delta, not applied by default.
   ============================================================ */
.kpi {
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.kpi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.kpi-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Reset the old icon tile. The first selector matches the specificity of
   app.css's `.kpi:first-child .kpi-icon` brass wash and wins on order,
   removing the arbitrary highlight on card one. */
.kpi:first-child .kpi-icon,
.kpi .kpi-icon,
.light .kpi .kpi-icon {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
    opacity: .55;
    flex: none;
    display: block;
    font-size: 12px;
}

.kpi .kpi-icon svg { width: 15px; height: 15px; }

.kpi .kpi-value {
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.kpi .kpi-context {
    display: block;
    margin-top: 1px;
    color: var(--muted);
}

/* Type scale + text-zoom. Specificity must clear app.css's
   `#app .kpi strong` / `#app .kpi small` (1,1,1). */
#app .kpi .kpi-value { font-size: calc(var(--text-2xl) * var(--text-scale)); }
#app .kpi .kpi-label { font-size: calc(10px * var(--text-scale)); }
#app .kpi .kpi-context { font-size: calc(var(--text-xs) * var(--text-scale)); }

/* Loading skeleton mirrors the stacked layout instead of the old row. */
.sk-kpi {
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
}

.sk-kpi > div { flex: none; }

/* The KPI row had no bottom margin on Home and Reports (Compliance, Reminders
   and Support each carried their own modifier), so the cards butted straight
   into the chart row below. 14px matches the modifiers already in use. */
.grid4 { margin-bottom: 14px; }

/* ============================================================================
   Orders board
   ----------------------------------------------------------------------------
   The order workflow has 20 stages. A kanban stays readable at 5-7 columns, so
   the board renders one phase at a time (see OrderStateLabels.Phases), lets any
   column collapse to a rail, and can hide stages that hold nothing. Column
   headers are pinned and only the card lists scroll, so stage names and their
   count/value totals never scroll out of view.
   ========================================================================== */

.orders-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    padding-bottom: 12px;
}

.orders-body > .reload-bar { margin-bottom: 0; }

.orders-body > .grid4,
.orders-body > .orders-phasebar,
.orders-body > .orders-filter-tray,
.orders-body > .reload-bar { flex: none; }

.orders-kpis { margin-bottom: 0; }

/* ---- phase switcher ---- */

/* Underline tabs: no boxes, no fills. The only active signal is a brass rule under the label,
   so the bar reads as navigation rather than a row of buttons competing with the board. */
.orders-phasebar {
    display: flex;
    gap: 2px;
    padding: 0 2px;
    /* Inset shadow rather than border-bottom, so the active underline can sit at bottom:0 and
       overlap the rule exactly instead of hanging 1px outside the scroll box. */
    box-shadow: inset 0 -1px 0 var(--border);
    overflow-x: auto;
    /* Must be explicit: leaving this `visible` makes it compute to `auto` (because overflow-x
       isn't visible), and any sub-pixel overflow then raises a stray vertical scrollbar. */
    overflow-y: hidden;
    scrollbar-width: thin;
}

.phase-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 1 auto;
    justify-content: center;
    white-space: nowrap;
    padding: 9px 16px 10px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color .16s ease;
}

/* The rule is painted by a pseudo-element so it can sit flush on the bar's own bottom rule.
   Keep `bottom: 0` — a negative offset overflows the scrolling container and adds a scrollbar. */
.phase-tab::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
    transition: background-color .16s ease;
}

.phase-tab:hover { color: var(--text); }
.phase-tab:hover::after { background: color-mix(in srgb, var(--brass), transparent 62%); }

.phase-tab:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -3px;
    border-radius: 6px;
}

.phase-tab.active { color: var(--text); }
.phase-tab.active::after { background: var(--brass); }

.phase-tab .ui-icon { width: 14px; height: 14px; }
.phase-tab.active .ui-icon { color: var(--brass); }

.phase-count {
    min-width: 20px;
    padding: 1px 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--steel), transparent 25%);
    color: var(--muted);
    font-size: 10px;
    text-align: center;
}

.phase-tab.active .phase-count { background: color-mix(in srgb, var(--brass), transparent 80%); color: var(--brass); }

.phase-alert {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red), transparent 82%);
}

/* ---- filter tray ---- */

.orders-filter-tray {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 0;
}

.orders-filter-tray .orders-search { flex: 1 1 260px; min-width: 180px; }
.orders-filter-tray .orders-search .field { width: 100%; }

.orders-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.orders-filter-controls .field { min-width: 150px; }

.orders-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--surface-control);
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.orders-toggle:hover { color: var(--text); border-color: var(--blue); }
.orders-toggle input { accent-color: var(--brass); margin: 0; }

.orders-result-count { flex: none; font-size: 11px; white-space: nowrap; }

/* ---- board shell ---- */

.orders-board-wrap {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.kanban.orders-board {
    display: flex;
    gap: 14px;
    height: 100%;
    min-width: max-content;
    align-items: stretch;
}

.orders-empty { padding: 40px; }

/* ---- column ---- */

.orders-column {
    width: 300px;
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-panel), transparent 35%);
    overflow: hidden;
    transition: width .18s cubic-bezier(.22, 1, .36, 1);
}

.orders-column::before {
    content: "";
    display: block;
    height: 3px;
    flex: none;
    background: var(--blue);
}

.orders-column.tone-exception::before { background: var(--orange); }
.orders-column.tone-done::before { background: var(--green); }

.orders-column .column-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-raised);
}

.orders-column .column-heading { flex: 1; min-width: 0; }

.orders-column .column-heading b {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-column .column-metrics {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: var(--muted);
}

.orders-column .column-collapse {
    flex: none;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.orders-column .column-collapse:hover { color: var(--text); background: var(--surface-hover); border-color: var(--border); }
.orders-column .column-collapse .ui-icon { width: 13px; height: 13px; }

.orders-column .column-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    scrollbar-width: thin;
}

.orders-column .column-empty {
    padding: 22px 12px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
}

/* ---- collapsed rail ---- */

.orders-column.is-collapsed { width: 46px; }

.orders-column .column-rail {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border: 0;
    background: var(--surface-raised);
    color: var(--muted);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.orders-column .column-rail:hover { color: var(--text); background: var(--surface-hover); }

.orders-column .rail-count {
    flex: none;
    min-width: 22px;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--surface-control);
    color: var(--text);
    font-size: 10px;
    text-align: center;
}

.orders-column .rail-label {
    writing-mode: vertical-rl;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- card ---- */

.order-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: none;
    padding: 12px 13px;
    border-radius: 10px;
    border-left: 3px solid transparent;
    background: var(--surface-panel);
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), border-color .18s ease, box-shadow .18s ease;
}

.order-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--blue), transparent 40%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.order-card.risk-blocked { border-left-color: var(--red); }
.order-card.risk-stale { border-left-color: var(--orange); }
.order-card.risk-watch { border-left-color: color-mix(in srgb, var(--brass), transparent 40%); }

.order-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.order-card .order-ref { font-size: 10px; color: var(--muted); letter-spacing: .04em; }

.stage-age {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--surface-control);
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    white-space: nowrap;
}

.stage-age .ui-icon { width: 10px; height: 10px; }
.stage-age.age-watch { color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); }
.stage-age.age-stale { color: var(--orange); background: color-mix(in srgb, var(--orange), transparent 86%); }
.stage-age.age-blocked { color: color-mix(in srgb, var(--red), #ffffff 18%); background: color-mix(in srgb, var(--red), transparent 86%); }

.order-card .order-customer {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

.order-card .order-address {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.order-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.order-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    white-space: nowrap;
}

.order-chip.chip-ok { color: var(--green); background: color-mix(in srgb, var(--green), transparent 90%); }
.order-chip.chip-warn { color: var(--orange); background: color-mix(in srgb, var(--orange), transparent 90%); }
/* Plain --red on its own 10% tint measures 4.47:1 — a hair under the 4.5:1 these 9px chips need. */
.order-chip.chip-danger { color: color-mix(in srgb, var(--red), #ffffff 18%); background: color-mix(in srgb, var(--red), transparent 90%); }
.order-chip.chip-muted { color: var(--muted); background: transparent; }

.order-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--border-soft);
}

.order-card .order-value { font-size: 13px; font-weight: 700; }

.order-meta { display: inline-flex; align-items: center; gap: 7px; }

.order-meta .branch-tag {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface-control);
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .05em;
}

.order-avatar {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--blue), transparent 55%);
    color: var(--text);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 700;
}

.order-card-actions { display: flex; align-items: center; gap: 6px; }
/* Twenty cards each carrying a solid brass button turned the board into a wall of gold. The
   action rests as a brass outline and only fills in on hover/focus. */
.order-card-actions .btn-mini.primary {
    flex: 1;
    justify-content: center;
    background: color-mix(in srgb, var(--brass), transparent 88%);
    border: 1px solid color-mix(in srgb, var(--brass), transparent 62%);
    color: var(--brass);
    font-weight: 600;
}

.order-card-actions .btn-mini.primary:hover:not(:disabled),
.order-card-actions .btn-mini.primary:focus-visible:not(:disabled) {
    background: linear-gradient(135deg, #d9a441, #c4882a);
    border-color: transparent;
    color: #10151c;
}

.order-card-actions .btn-mini.primary:disabled { opacity: .55; }
.order-card-actions .order-raise-ticket { flex: none; width: 26px; padding: 0; justify-content: center; }
.order-card-actions .order-raise-ticket .ui-icon { width: 13px; height: 13px; }

/* ---- light theme ---- */

.light .orders-column { background: color-mix(in srgb, #ffffff, var(--surface-page) 55%); }
.light .orders-column .column-head,
.light .orders-column .column-rail { background: #ffffff; }
.light .order-card { background: #ffffff; box-shadow: 0 1px 2px rgba(30, 42, 56, .06); }
.light .order-card:hover { box-shadow: 0 8px 22px rgba(30, 42, 56, .12); }
/* The underline carries the active state in both themes, so light mode only needs a deeper
   brass to stay legible on white. */
.light .phase-tab.active::after { background: color-mix(in srgb, var(--brass), #000 22%); }

/* Brass-on-brass is legible on the dark board but washes out on white. */
.light .order-card-actions .btn-mini.primary {
    background: color-mix(in srgb, var(--brass), #ffffff 84%);
    border-color: color-mix(in srgb, var(--brass), #000 18%);
    /* --accent-ink (brass + 34% black) only reaches 4.3:1 on this tint; 11px text needs 4.5:1. */
    color: color-mix(in srgb, var(--brass), #000 46%);
}

.light .order-card-actions .btn-mini.primary:hover:not(:disabled),
.light .order-card-actions .btn-mini.primary:focus-visible:not(:disabled) { color: #10151c; }

/* The 9px chip and age-pill text sits on its own pale tint over white, which costs roughly a
   stop of contrast. Deepen the ink (the tints stay untouched) to clear 4.5:1. */
.light .order-chip.chip-ok { color: color-mix(in srgb, var(--green), #000 14%); }
.light .order-chip.chip-warn { color: color-mix(in srgb, var(--orange), #000 18%); }
.light .order-chip.chip-danger { color: color-mix(in srgb, var(--red), #000 34%); }
.light .stage-age.age-watch { color: color-mix(in srgb, var(--brass), #000 46%); }
.light .stage-age.age-stale { color: color-mix(in srgb, var(--orange), #000 18%); }
.light .stage-age.age-blocked { color: color-mix(in srgb, var(--red), #000 34%); }

/* ---- narrow screens: let the page scroll normally and snap between columns ---- */

@media (max-width: 900px) {
    .orders-body { overflow: auto; }
    .orders-board-wrap { flex: none; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; }
    /* Stretching columns to a common height leaves a screen of dead space under the short ones
       once the board is only one column wide, so let each size to its own cards instead. */
    .kanban.orders-board { height: auto; align-items: flex-start; }
    .orders-column { width: min(84vw, 300px); scroll-snap-align: start; max-height: 74vh; }
    .orders-column .column-body { overflow-y: auto; }
    .orders-filter-tray { flex-direction: column; align-items: stretch; }
    /* The tray turns into a column here, so the search's flex-basis would become a 260px HEIGHT. */
    .orders-filter-tray .orders-search { flex: none; }
    .orders-filter-controls .field { flex: 1 1 140px; min-width: 0; }
    .orders-result-count { text-align: right; }
    .phase-tab { flex: 0 0 auto; }
}


/* ---- KpiCard optional slots: sparkline, delta, severity rail, target bar ---- */
.kpi-mid {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.kpi-mid .kpi-value { margin-top: 4px; }

.kpi-spark {
    width: 64px;
    height: 24px;
    flex: none;
    margin-bottom: 3px;
}

.kpi-foot {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.kpi-foot .kpi-context { margin-top: 0; }

.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    white-space: nowrap;
}

/* Direction is carried by the glyph as well as the colour, so the chip still
   reads correctly without colour vision. */
.kpi-delta.delta-good { color: var(--green); background: color-mix(in srgb, var(--green), transparent 90%); }
.kpi-delta.delta-bad { color: var(--red); background: color-mix(in srgb, var(--red), transparent 90%); }
.kpi-delta.delta-flat { color: var(--muted); background: color-mix(in srgb, var(--muted), transparent 90%); }

/* Rail is an inset shadow so it never shifts layout or replaces the card border. */
.kpi-crit { box-shadow: inset 3px 0 0 var(--red); }
.kpi-warn { box-shadow: inset 3px 0 0 var(--orange); }
.kpi-ok { box-shadow: inset 3px 0 0 var(--green); }
.kpi-crit:hover { box-shadow: inset 3px 0 0 var(--red), 0 8px 24px #0002; }
.kpi-warn:hover { box-shadow: inset 3px 0 0 var(--orange), 0 8px 24px #0002; }
.kpi-ok:hover { box-shadow: inset 3px 0 0 var(--green), 0 8px 24px #0002; }
.kpi-crit .kpi-value { color: var(--red); }
.kpi-warn .kpi-value { color: var(--orange); }

.kpi-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--surface-control);
    margin-top: 10px;
    overflow: hidden;
}

.kpi-bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--brass);
    transition: width .35s cubic-bezier(.22,1,.36,1);
}

.kpi-bar i.bar-good { background: var(--green); }
.kpi-bar i.bar-bad { background: var(--red); }

#app .kpi .kpi-delta { font-size: calc(10.5px * var(--text-scale)); }

/* ---- Sidebar brand / topbar alignment ----
   The brand block was 53px (12px padding + 28px logo + 12px + 1px border) while the
   topbar was 50px, so the two horizontal rules missed each other by 3px across every
   page. Both now read one token, and the brand's vertical padding drops to 10px so the
   28px logo still fits inside the shorter box. The tablet and mobile rules re-assert
   `padding: 12px` at higher specificity, so they are matched selector-for-selector. */
:root { --header-h: 50px; }

.topbar { height: var(--header-h); }

.brand,
.sidebar .brand,
.sidebar:not(.collapsed) .brand {
    height: var(--header-h);
    padding-block: 10px;
}

/* ============================================================================
   Stage action buttons + stage notes
   ========================================================================== */

/* ---- transition picker ---- */
/* Replaces a dropdown of action names. Each option is a button carrying the icon of the stage it
   leads to, the action name, the destination stage, and the full description as its tooltip. */

.stage-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.stage-action {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, transform .14s ease;
}

.stage-action:hover { border-color: color-mix(in srgb, var(--blue), transparent 30%); background: var(--surface-hover); }
.stage-action:active { transform: scale(.995); }
.stage-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

.stage-action.active {
    border-color: var(--brass);
    background: color-mix(in srgb, var(--brass), transparent 90%);
}

.stage-action-icon {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--blue), transparent 60%);
    color: var(--text);
}

.stage-action-icon .ui-icon { width: 15px; height: 15px; }

.stage-action.tone-exception .stage-action-icon { background: color-mix(in srgb, var(--orange), transparent 76%); }
.stage-action.tone-done .stage-action-icon { background: color-mix(in srgb, var(--green), transparent 74%); }
.stage-action.active .stage-action-icon { background: var(--brass); color: #10151c; }

.stage-action-text { flex: 1; min-width: 0; }
.stage-action-text b { display: block; font-size: 12px; font-weight: 600; }
.stage-action-text small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }

.stage-action-req { flex: none; color: var(--orange); font-weight: 700; line-height: 1; }

/* ---- notes button on the card ---- */

.order-card-actions .order-note-button { flex: none; padding: 0 8px; gap: 5px; }
.order-card-actions .order-note-button .ui-icon { width: 13px; height: 13px; }
.order-card-actions .order-note-button span { font-size: 10px; }

.order-card-actions .order-note-button.has-notes {
    border-color: color-mix(in srgb, var(--brass), transparent 60%);
    color: var(--brass);
}

/* ---- notes drawer ---- */

.notes-drawer { display: flex; flex-direction: column; gap: 14px; }

.note-composer {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-raised);
}

.note-composer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.note-composer textarea.field { width: 100%; resize: vertical; }
.note-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.note-stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue), transparent 72%);
    color: var(--text);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.note-stage-badge .ui-icon { width: 11px; height: 11px; }
.note-stage-badge.tone-exception { background: color-mix(in srgb, var(--orange), transparent 82%); color: var(--orange); }
.note-stage-badge.tone-done { background: color-mix(in srgb, var(--green), transparent 82%); color: var(--green); }

/* ---- timeline ---- */

.note-timeline {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 2px;
    scrollbar-width: thin;
}

.note-empty { padding: 28px 16px; }

.note-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-left: 3px solid color-mix(in srgb, var(--blue), transparent 45%);
    border-radius: 10px;
    background: var(--surface-panel);
}

.note-item.is-editing { border-left-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 95%); }

.note-item-head { display: flex; align-items: center; gap: 9px; }
.note-item-meta { flex: 1; min-width: 0; }
.note-item-meta b { display: block; font-size: 12px; font-weight: 600; }
.note-item-meta small { display: block; margin-top: 1px; font-size: 10px; }

.note-origin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-control);
    color: var(--muted);
    font-size: 9px;
    font-family: 'JetBrains Mono', monospace;
}

.note-origin .ui-icon { width: 10px; height: 10px; }

.note-body {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.note-item textarea.field { width: 100%; resize: vertical; }

.note-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }

.note-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}

.note-edited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
}

.note-edited:hover { color: var(--brass); }
.note-edited .ui-icon { width: 11px; height: 11px; }

.note-edit-button { flex: none; }
.note-edit-button .ui-icon { width: 12px; height: 12px; }

.note-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 9px;
    background: var(--surface-control);
}

.note-revision {
    padding-left: 9px;
    border-left: 2px solid var(--border);
}

/* Plain --muted sits on --surface-control here and only reaches 4.07:1. Mixing toward --text
   lifts it in dark and deepens it in light, so one rule fixes both themes. */
.note-origin,
.note-revision .note-body { color: color-mix(in srgb, var(--muted), var(--text) 45%); }

.note-revision-head { margin-bottom: 3px; }

/* ---- light theme ---- */

.light .note-item { background: #ffffff; box-shadow: 0 1px 2px rgba(30, 42, 56, .06); }
.light .note-composer { background: #ffffff; }
.light .note-stage-badge { color: var(--text); }
.light .stage-action { background: #ffffff; }
.light .stage-action.active { background: color-mix(in srgb, var(--brass), #ffffff 86%); }

@media (max-width: 900px) {
    .note-composer-head { align-items: flex-start; flex-direction: column; gap: 6px; }
    .note-item-foot { flex-wrap: wrap; }
}


/* ---- Toggle / unit rows ----
   The description was a bare inline <small> inside the label <span>, so the two ran
   together as one string ("Company ActiveControls operational access for the business").
   Two pages had already worked around it locally — Design.razor with `display:block`
   on three toggles and a <br> on a unit row — so the fix belongs here instead.
   The text cell becomes a flex column: label over description. The row itself stays a
   single row with the switch (or value) pinned right and never squashed. */
.toggle-row,
.unit-row {
    gap: 14px;
    padding: 10px 12px;
    margin: 6px 0;
    border-radius: 2px;
    align-items: center;
}

.toggle-row > span,
.unit-row > span {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    /* Without this a long description forces the row wider than its drawer. */
    min-width: 0;
    font-weight: 600;
}

.toggle-row > span > small,
.unit-row > span > small {
    font-weight: 400;
    line-height: 1.45;
    color: var(--muted);
}

/* The switch / value column holds its size while the description wraps. */
.toggle-row > :not(span),
.unit-row > :not(span) {
    flex: none;
    text-align: right;
}

#app .toggle-row,
#app .unit-row { font-size: calc(var(--text-sm) * var(--text-scale)); }

#app .toggle-row > span > small,
#app .unit-row > span > small { font-size: calc(var(--text-xs) * var(--text-scale)); }

/* ============================================================================
   Clickable KPI tiles, focus chip and icon-only topbar buttons
   ========================================================================== */

/* A KPI card that carries an OnClick renders as a <button>, which resets the browser's
   default button styling — restore the card's own box model and left-align its contents. */
.kpi.kpi-clickable {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    transition: border-color .16s ease, transform .14s ease, box-shadow .16s ease;
}

.kpi.kpi-clickable:hover {
    border-color: color-mix(in srgb, var(--brass), transparent 45%);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.kpi.kpi-clickable:active { transform: translateY(0); }
.kpi.kpi-clickable:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.kpi.kpi-clickable.is-active {
    border-color: var(--brass);
    box-shadow: inset 3px 0 0 var(--brass);
}

.kpi.kpi-clickable.is-active .kpi-label { color: var(--brass); }

/* ---- focus chip in the filter tray ---- */

.focus-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 30px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--brass);
    border-radius: 999px;
    background: color-mix(in srgb, var(--brass), transparent 88%);
    color: var(--brass);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease;
}

.focus-chip:hover { background: color-mix(in srgb, var(--brass), transparent 78%); }
.focus-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.focus-chip .ui-icon { width: 12px; height: 12px; }

.focus-chip-x {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brass), transparent 72%);
    font-size: 12px;
    line-height: 1;
}

/* ---- icon-only buttons ---- */

.btn.btn-icon-only {
    width: 30px;
    padding: 0;
    justify-content: center;
    flex: none;
}

.btn.btn-icon-only .ui-icon { width: 15px; height: 15px; }
.btn.btn-icon-only:disabled { opacity: .45; cursor: not-allowed; }

/* While refreshing, the button is disabled but is *working* — the dimming that reads as
   "unavailable" would fight the spinner, so a busy button stays at full strength. */
.btn.btn-icon-only.is-busy:disabled { opacity: 1; cursor: progress; color: var(--brass); border-color: color-mix(in srgb, var(--brass), transparent 55%); }

@keyframes flash-spin { to { transform: rotate(360deg); } }

.ui-icon.is-spinning { transform-origin: 50% 50%; animation: flash-spin .8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    /* Keep the signal, drop the whirl. */
    .ui-icon.is-spinning { animation-duration: 2.4s; }
}

/* ---- light theme ---- */

.light .kpi.kpi-clickable:hover { box-shadow: 0 8px 22px rgba(30, 42, 56, .12); }
/* Brass on a pale brass wash is too weak on white; deepen the ink and the border. */
.light .focus-chip {
    background: color-mix(in srgb, var(--brass), #ffffff 84%);
    border-color: color-mix(in srgb, var(--brass), #000 18%);
    color: color-mix(in srgb, var(--brass), #000 46%);
}

.light .focus-chip-x { background: color-mix(in srgb, var(--brass), #ffffff 55%); }
.light .kpi.kpi-clickable.is-active .kpi-label { color: color-mix(in srgb, var(--brass), #000 40%); }

@media (max-width: 900px) {
    .focus-chip { align-self: flex-start; }
}

/* ============================================================================
   Presentation — Decide & Complete: deposit record, compliance, finish review
   ========================================================================== */

/* ---- deposit record (Payment slide) ---- */

.deposit-panel {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-panel);
}

.deposit-panel > p { margin: 4px 0 12px; font-size: 12px; }
.deposit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.deposit-summary {
    display: flex;
    gap: 24px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    flex-wrap: wrap;
}

.deposit-summary > div { display: flex; flex-direction: column; gap: 2px; }
.deposit-summary span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.deposit-summary b { font-size: 16px; }
.deposit-summary .deposit-balance b { color: var(--brass); font-size: 18px; }

/* ---- compliance blocks (eligibility → planning → declarations) ---- */

.compliance-block > .muted { margin: 0 0 10px; font-size: 12px; }
.compliance-block .check-card { margin-top: 12px; }

/* One sub-step (Eligibility / Planning / Declarations) shows at a time so nothing scrolls. */
.compliance-steps { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.compliance-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-panel);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.compliance-step span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface-control);
    font-size: 11px;
}

.compliance-step:hover { border-color: color-mix(in srgb, var(--brass), transparent 40%); color: var(--text); }
.compliance-step:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.compliance-step.active { border-color: var(--brass); color: var(--text); }
.compliance-step.active span { background: var(--brass); color: #10151c; }
.compliance-step.done:not(.active) { color: var(--green); }
.compliance-step.done span { background: color-mix(in srgb, var(--green), transparent 80%); color: var(--green); }

.eligibility-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-panel);
}

.eligibility-col b { display: block; margin-bottom: 8px; font-size: 13px; }
.eligibility-col ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Two columns halve the height of the ten-question list. */
.planning-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.planning-question {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-panel);
}

.planning-question > span { font-size: 12.5px; line-height: 1.4; }
.planning-answer { display: flex; gap: 6px; flex: none; }

.btn-yesno {
    min-width: 52px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-control);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.btn-yesno:hover { border-color: color-mix(in srgb, var(--brass), transparent 40%); color: var(--text); }
.btn-yesno:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.btn-yesno.yes.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 85%); color: var(--brass); }
.btn-yesno.no.active { border-color: color-mix(in srgb, var(--muted), transparent 20%); background: color-mix(in srgb, var(--muted), transparent 85%); color: var(--text); }

/* ---- finish review ---- */

.finish-review { display: grid; gap: 12px; margin: 0 auto 16px; max-width: 560px; text-align: left; }

.finish-review-card {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-panel);
}

.finish-review-title { margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

.finish-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    font-size: 13px;
}

.finish-line span { color: var(--muted); }
.finish-line b { text-align: right; }
.finish-line.green b { color: var(--green); }
.finish-line.total { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 9px; }
.finish-line.total b { color: var(--brass); font-size: 16px; }

/* ---- light theme + narrow screens ---- */

.light .deposit-panel,
.light .eligibility-card,
.light .planning-question,
.light .finish-review-card { background: #ffffff; }

@media (max-width: 900px) {
    .deposit-grid { grid-template-columns: 1fr; }
    .eligibility-card { grid-template-columns: 1fr; }
    .planning-list { grid-template-columns: 1fr; }
}