/* ==========================================================================
   SCBAS brand overlay for the admin portal.

   Aligns the MaintenanceApplication (AppStack / Bootstrap 5.3 template) with the
   public scbas.com site: dark "ink" surfaces, the brand-red accent (#CA4445),
   and Saira Condensed / Roboto type. Loaded AFTER app.css + site.css so it wins
   the cascade — no SCSS rebuild required. Accent colors apply in both light and
   dark modes; the darker "ink" surfaces apply to the default dark theme.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap");

:root {
    /* Surface scale (matches scbas.com --scbas-ink-*) */
    --scbas-ink: #171818;
    --scbas-ink-2: #232728;
    --scbas-ink-3: #2B2D2E;
    --scbas-ink-4: #3A3D3E;
    --scbas-ink-sidebar: #1B1B1C;
    --scbas-ink-footer: #0B0C0D;
    --scbas-ink-line: rgba(255, 255, 255, 0.08);
    --scbas-ink-line-2: rgba(255, 255, 255, 0.14);

    /* Light-theme "paper" surface scale — a branded parallel to the ink scale
       above, not a fallback to stock Bootstrap white. Body sits a shade off
       pure white (warm, not clinical gray) so card/panel surfaces read as
       raised instead of vanishing into the page. */
    --scbas-paper: #F2EFEA;
    --scbas-paper-2: #FFFFFF;
    --scbas-paper-3: #F8F6F2;
    --scbas-paper-4: #ECE7E0;
    --scbas-paper-sidebar: var(--scbas-ink-sidebar);
    --scbas-paper-line: rgba(23, 24, 24, 0.08);
    --scbas-paper-line-2: rgba(23, 24, 24, 0.14);

    /* Single source of truth for every alternating/zebra row (tables AND the
       legacy .alternate-bg checklist rows). Theme-aware override below. */
    --scbas-stripe-bg: rgba(255, 255, 255, 0.03);

    /* Brand red accent */
    --scbas-red: #CA4445;
    --scbas-red-rgb: 202, 68, 69;
    --scbas-red-deep: #8E2D2E;
    --scbas-red-bright: #E25759;
    --scbas-ember: #FF6B2B;

    /* Support violet — the ONE non-brand accent, reserved for the beta feedback
       and support surface. Brand red means "primary action on this screen"; the
       floating Feedback control is not that, and rendering it red made it
       compete with every real primary button. This violet is deliberately
       mid-tone rather than neon: it reads as a distinct affordance against the
       graphite chrome without shouting, and carries >=4.5:1 contrast with white
       text in its base, hover, and active states. Do not reuse it for ordinary
       actions. */
    --scbas-violet: #6E56CF;
    --scbas-violet-rgb: 110, 86, 207;
    --scbas-violet-hover: #5F4BC0;
    --scbas-violet-deep: #4E3CA3;
    --scbas-violet-bright: #9C8AE4;

    --scbas-font-display: "Saira Condensed", "Oswald", system-ui, sans-serif;
    --scbas-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- Brand accent mapped onto Bootstrap (both themes) ------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary: var(--scbas-red);
    --bs-primary-rgb: var(--scbas-red-rgb);
    --bs-primary-text-emphasis: var(--scbas-red-bright);
    --bs-link-color: var(--scbas-red);
    --bs-link-color-rgb: var(--scbas-red-rgb);
    --bs-link-hover-color: var(--scbas-red-bright);
    --bs-link-hover-color-rgb: var(--scbas-red-rgb);
}

/* Light mode wants a dark stripe instead of a light one. */
[data-bs-theme="light"] {
    --scbas-stripe-bg: rgba(0, 0, 0, 0.035);
}

/* ---- Typography -------------------------------------------------------- */
body {
    font-family: var(--scbas-font-body);
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5,
.page-header, .card-title,
.sidebar-brand, .navbar-brand {
    font-family: var(--scbas-font-display);
    letter-spacing: 0.01em;
}

.page-header {
    font-weight: 700;
}

/* ---- Buttons (Bootstrap 5.3 uses --bs-btn-* custom props) --------------- */
.btn-primary {
    --bs-btn-bg: var(--scbas-red);
    --bs-btn-border-color: var(--scbas-red);
    --bs-btn-hover-bg: var(--scbas-red-bright);
    --bs-btn-hover-border-color: var(--scbas-red-bright);
    --bs-btn-active-bg: var(--scbas-red-deep);
    --bs-btn-active-border-color: var(--scbas-red-deep);
    --bs-btn-disabled-bg: var(--scbas-red);
    --bs-btn-disabled-border-color: var(--scbas-red);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--scbas-red);
    --bs-btn-border-color: var(--scbas-red);
    --bs-btn-hover-bg: var(--scbas-red);
    --bs-btn-hover-border-color: var(--scbas-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--scbas-red-deep);
    --bs-btn-active-border-color: var(--scbas-red-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--scbas-red-rgb);
}

/* The portal's neutral "default" buttons read better with a hairline + hover. */
.btn-default {
    --bs-btn-hover-border-color: rgba(var(--scbas-red-rgb), 0.6);
    --bs-btn-hover-color: var(--scbas-red-bright);
}

/* ---- Accent utilities -------------------------------------------------- */
.text-primary {
    color: var(--scbas-red) !important;
}

.bg-primary {
    background-color: var(--scbas-red) !important;
}

.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--scbas-red) !important;
    color: #fff !important;
}

.btn-link {
    --bs-btn-color: var(--scbas-red);
    --bs-btn-hover-color: var(--scbas-red-bright);
}

/* ---- Forms ------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--scbas-red);
    box-shadow: 0 0 0 0.2rem rgba(var(--scbas-red-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--scbas-red);
    border-color: var(--scbas-red);
}

.form-check-input:focus {
    border-color: var(--scbas-red);
    box-shadow: 0 0 0 0.2rem rgba(var(--scbas-red-rgb), 0.25);
}

/* ---- Nav / tabs / pagination accents ----------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--scbas-red);
    color: #fff;
}

.nav-tabs .nav-link.active {
    border-bottom-color: transparent;
    color: var(--scbas-red);
}

.page-link {
    --bs-pagination-active-bg: var(--scbas-red);
    --bs-pagination-active-border-color: var(--scbas-red);
    --bs-pagination-color: var(--scbas-red);
    --bs-pagination-hover-color: var(--scbas-red-bright);
    --bs-pagination-focus-color: var(--scbas-red-bright);
}

/* ==========================================================================
   Dark theme (default for the portal) — retint AppStack surfaces to "ink".
   ========================================================================== */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--scbas-ink);
    --bs-body-bg-rgb: 23, 24, 24;
    --bs-body-color: #C8CACB;
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-bg: var(--scbas-ink-2);
    --bs-tertiary-bg: var(--scbas-ink-3);
    --bs-border-color: var(--scbas-ink-line-2);
    --bs-card-bg: var(--scbas-ink-2);
    --bs-card-cap-bg: var(--scbas-ink-2);
    --bs-modal-bg: var(--scbas-ink-2);
    --bs-dropdown-bg: var(--scbas-ink-2);
    --bs-dropdown-link-hover-bg: var(--scbas-ink-3);
}

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .main {
    background-color: var(--scbas-ink);
}

/* ==========================================================================
   Light theme — a branded "paper" surface, not stock Bootstrap gray-on-white.
   Body sits a shade off pure white so cards/panels can read as raised
   surfaces instead of disappearing into a flat, contrast-less page.
   ========================================================================== */
[data-bs-theme="light"] {
    --bs-body-bg: var(--scbas-paper);
    --bs-body-color: #33383D;
    --bs-emphasis-color: #14171A;
    --bs-secondary-bg: var(--scbas-paper-3);
    --bs-tertiary-bg: var(--scbas-paper-4);
    --bs-border-color: var(--scbas-paper-line-2);
    --bs-card-bg: var(--scbas-paper-2);
    --bs-card-cap-bg: var(--scbas-paper-2);
    --bs-modal-bg: var(--scbas-paper-2);
    --bs-dropdown-bg: var(--scbas-paper-2);
    --bs-dropdown-link-hover-bg: var(--scbas-paper-3);
}

[data-bs-theme="light"] body,
[data-bs-theme="light"] .main {
    background-color: var(--scbas-paper);
}

/* ==========================================================================
   Sidebar chrome — brand, not content. The left nav always renders graphite,
   regardless of the operator's light/dark content theme choice (see
   wwwroot/js/theme.js, which pins data-sidebar-theme to "dark" unconditionally).
   These rules are intentionally NOT gated behind [data-bs-theme] so the
   sidebar never washes out to AppStack's stock white sidebar-theme styling.
   ========================================================================== */
.sidebar,
.sidebar-content {
    background: var(--scbas-ink-sidebar);
}

.sidebar-brand {
    border-bottom: 1px solid var(--scbas-ink-line);
}

/* ---- Pinned sidebar footer ---------------------------------------------
   Crossing between a tenant and the global control plane is a shell move, not
   a tenant setting, so it must not live inside a collapsed bucket. Both
   selectors are needed: the theme initializes SimpleBar on `.sidebar-content`,
   which relocates the real children into `.simplebar-content`. `margin-top:
   auto` then pushes the pinned block to the bottom when the nav is shorter
   than the viewport and simply does nothing when it is taller. */
.sidebar-content,
.sidebar .simplebar-content {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

/* `min-height: 100%` above only resolves once something in the SimpleBar chain
   has a definite height, which the theme supplies through
   `html[data-sidebar-behavior=sticky] .sidebar-content[data-simplebar]`. This
   viewport-relative floor keeps the pinned block at the bottom even if that
   attribute or SimpleBar itself is ever absent. */
.sidebar-content {
    min-height: 100vh;
}

/* SimpleBar ships clearfix pseudo-elements on its content node. Harmless in
   block layout, but under `display: flex` they become real flex items — an
   empty one would sit after the pinned footer. */
.sidebar .simplebar-content::before,
.sidebar .simplebar-content::after {
    display: none;
}

.sidebar-nav--pinned {
    margin: auto 0 0;
    padding: .5rem 0 .75rem;
    border-top: 1px solid var(--scbas-ink-line);
    list-style: none;
}

.sidebar-link--global {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.sidebar-link--global .sidebar-link__trailing {
    margin-left: auto;
    opacity: .5;
}

.sidebar-link--global:hover .sidebar-link__trailing {
    opacity: 1;
}

.sidebar-link--module-promo .sidebar-link__promo {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: #ffad7d;
    opacity: .9;
}

.sidebar-link--module-promo:hover .sidebar-link__promo,
.sidebar-link--module-promo:focus-visible .sidebar-link__promo {
    color: #ffd2b8;
    opacity: 1;
}

.sidebar-link--referral {
    color: #f2c3a8 !important;
}

.sidebar-link--referral svg {
    color: #e79a72 !important;
}

.sidebar-link--referral:hover,
.sidebar-link--referral:focus-visible,
.sidebar-item.active > .sidebar-link--referral {
    background: rgba(255, 173, 125, 0.1);
    color: #ffe0cf !important;
}

.sidebar-link--referral:hover svg,
.sidebar-link--referral:focus-visible svg,
.sidebar-item.active > .sidebar-link--referral svg {
    color: #ffc09b !important;
}

.tenant-sidebar-logo {
    display: block;
    width: 100%;
    max-width: 220px;
    height: 82px;
    margin: 0 auto;
    object-fit: contain;
}

.tenant-sidebar-brand-fallback {
    display: block;
    max-width: 220px;
    margin: 0 auto;
    color: #fff;
    font-family: var(--scbas-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Workspace switcher

   Moved out of the command bar and into the signed-in user menu. Changing
   workspace is a context choice, not a primary action, and two filled buttons
   in the toolbar competed with "New quote" and global search for attention.
   -------------------------------------------------------------------------- */
.scbas-user-dropdown {
    min-width: 20rem;
}

.workspace-switcher__label {
    padding-inline: 1rem;
    font-family: var(--scbas-font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.workspace-switcher__item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.55rem 1rem;
    white-space: normal;
}

.workspace-switcher__item.is-current {
    background: rgba(var(--scbas-red-rgb), 0.09);
    box-shadow: inset 3px 0 0 var(--scbas-red);
}

/* The technician's single workspace is stated, not offered as a destination.
   Bootstrap's .disabled would mute it into unreadability, so restore contrast. */
.workspace-switcher__item.disabled {
    color: var(--bs-body-color);
    opacity: 1;
    pointer-events: none;
}

.workspace-switcher__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
}

.workspace-switcher__icon svg {
    width: 18px;
    height: 18px;
}

.workspace-switcher__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}

.workspace-switcher__name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.workspace-switcher__hint {
    font-size: 0.74rem;
    line-height: 1.35;
    opacity: 0.68;
}

.sidebar-workspace-link {
    font-weight: 700;
}

/* Sidebar chrome — unconditional; see the "Sidebar chrome" block above. */
.sidebar-workspace-link {
    background: rgba(var(--scbas-red-rgb), 0.08);
    border-bottom: 1px solid var(--scbas-ink-line);
}

/* --------------------------------------------------------------------------
   Theme toggle

   The markup ships both a sun and a moon; exactly one is ever correct. Show
   the icon for the theme the click will switch *to* so the control reads as an
   action. Nothing styled these classes before, so both icons painted stacked.
   -------------------------------------------------------------------------- */
.scbas-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* 44×44 minimum: technicians and coordinators use this on tablets. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    transition: background 140ms ease, border-color 140ms ease;
}

.scbas-theme-toggle:hover {
    background: rgba(127, 132, 145, 0.12);
    border-color: rgba(127, 132, 145, 0.22);
}

/* A background change alone is not a focus indicator. Keyboard users need a
   ring that survives both themes. */
.scbas-theme-toggle:focus-visible {
    background: rgba(127, 132, 145, 0.12);
    border-color: rgba(var(--scbas-red-rgb), 0.55);
    outline: 2px solid var(--scbas-red-bright);
    outline-offset: 2px;
}

.scbas-theme-toggle__icon {
    display: none;
    line-height: 0;
}

.scbas-theme-toggle__icon svg {
    width: 19px;
    height: 19px;
}

/* Dark theme applied → offer the sun. Light theme applied → offer the moon. */
[data-bs-theme="dark"] .scbas-theme-toggle__icon--light,
[data-bs-theme="light"] .scbas-theme-toggle__icon--dark {
    display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
    .scbas-theme-toggle {
        transition: none;
    }
}

.spec-page__visual {
    display: block;
    width: 100%;
    aspect-ratio: 8.5 / 11;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .15);
    border-radius: .35rem;
    background: #fff;
}
.spec-page__visual iframe {
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
    background: #fff;
}

[data-bs-theme="dark"] .navbar.navbar-bg {
    background: var(--scbas-ink) !important;
    border-bottom: 1px solid var(--scbas-ink-line);
}

[data-bs-theme="light"] .navbar.navbar-bg {
    background: var(--scbas-paper-2) !important;
    border-bottom: 1px solid var(--scbas-paper-line);
}

/* ==========================================================================
   Application command bar — shared by Administration and Service.

   The old toolbar was a row of unrelated controls. This shell gives the app a
   single search/action/context hierarchy similar to a modern Metronic
   workspace while retaining tenant and workspace boundaries.
   ========================================================================== */
.scbas-topbar {
    min-height: 76px;
    padding: 0.75rem 1.35rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 8px 28px rgba(18, 18, 18, 0.08);
}

.scbas-topbar .sidebar-toggle {
    flex: 0 0 auto;
}

.scbas-global-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 32rem;
    max-width: 42rem;
    min-width: 15rem;
    height: 46px;
    padding: 0 0.85rem;
    border: 1px solid rgba(100, 105, 115, 0.16);
    border-radius: 12px;
    background: rgba(246, 248, 251, 0.9);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.scbas-global-search:focus-within {
    border-color: rgba(var(--scbas-red-rgb), 0.55);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--scbas-red-rgb), 0.1);
}

.scbas-global-search > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: #7e8299;
}

.scbas-global-search__input {
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0 0.75rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: #181c32;
    font-size: 0.93rem;
    font-weight: 500;
}

.scbas-global-search__input::placeholder {
    color: #a1a5b7;
}

.scbas-global-search kbd {
    padding: 0.2rem 0.45rem;
    border: 1px solid rgba(100, 105, 115, 0.18);
    border-radius: 6px;
    background: #fff;
    color: #7e8299;
    box-shadow: none;
    font-family: var(--scbas-font-body);
    font-size: 0.72rem;
    white-space: nowrap;
}

.scbas-global-search__results {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 50%;
    width: min(70rem, calc(100vw - 2rem));
    max-height: min(42rem, calc(100vh - 7rem));
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(100, 105, 115, 0.15);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(28, 32, 46, 0.24);
    transform: translateX(-50%);
}

.scbas-global-search__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem 0.85rem;
    border-bottom: 1px solid rgba(100, 105, 115, 0.12);
}

.scbas-global-search__heading > div {
    display: grid;
    gap: 0.12rem;
}

.scbas-global-search__heading small {
    color: var(--scbas-red);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.scbas-global-search__heading strong {
    color: #181c32;
    font-family: var(--scbas-font-display);
    font-size: 1.08rem;
}

.scbas-global-search__heading > span {
    color: #7e8299;
    font-size: 0.78rem;
    white-space: nowrap;
}

.scbas-global-search__tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.65rem 1rem 0;
    overflow-x: auto;
}

.scbas-global-search__tabs button {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 42px;
    padding: 0.55rem 0.8rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #7e8299;
    font-weight: 700;
    white-space: nowrap;
}

.scbas-global-search__tabs button[aria-selected="true"] {
    border-bottom-color: var(--scbas-red);
    color: #181c32;
}

.scbas-global-search__tabs button:focus-visible {
    border-radius: 8px 8px 0 0;
    outline: 3px solid rgba(var(--scbas-red-rgb), 0.24);
    outline-offset: -2px;
}

.scbas-global-search__tabs svg {
    width: 17px;
    height: 17px;
}

.scbas-global-search__tabs em {
    min-width: 1.45rem;
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    background: #eef1f5;
    color: #5e6278;
    font-size: 0.68rem;
    font-style: normal;
    text-align: center;
}

.scbas-global-search__panels {
    max-height: min(32rem, calc(100vh - 15rem));
    overflow: auto;
    padding: 0.85rem 1rem 1rem;
}

.scbas-global-search__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.scbas-global-search__result {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 92px;
    padding: 0.65rem;
    border: 1px solid rgba(100, 105, 115, 0.12);
    border-radius: 12px;
    color: #3f4254;
    text-decoration: none;
}

.scbas-global-search__result:hover,
.scbas-global-search__result:focus {
    border-color: rgba(var(--scbas-red-rgb), 0.25);
    background: #f5f8fa;
    color: #181c32;
}

.scbas-global-search__result:focus-visible {
    outline: 3px solid rgba(var(--scbas-red-rgb), 0.24);
    outline-offset: 1px;
}

.scbas-global-search__result-media {
    position: relative;
    display: grid;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    overflow: hidden;
    place-items: center;
    border-radius: 11px;
    background: rgba(var(--scbas-red-rgb), 0.08);
}

.scbas-global-search__result-media img {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #fff;
    object-fit: contain;
}

.scbas-global-search__result-icon {
    display: grid;
    place-items: center;
    color: var(--scbas-red);
}

.scbas-global-search__result-icon svg,
.scbas-global-search__arrow {
    width: 18px;
    height: 18px;
}

.scbas-global-search__result-copy {
    display: grid;
    min-width: 0;
    flex: 1;
}

.scbas-global-search__result-copy small {
    color: var(--scbas-red);
    font-family: var(--scbas-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.scbas-global-search__result-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scbas-global-search__result-copy span {
    color: #7e8299;
    font-size: 0.79rem;
}

.scbas-global-search__result-copy > span:not(.scbas-global-search__badges) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
    white-space: normal;
}

.scbas-global-search__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.32rem;
    overflow: visible !important;
    white-space: normal !important;
}

.scbas-global-search__badges em {
    padding: 0.14rem 0.42rem;
    border-radius: 999px;
    background: rgba(var(--scbas-red-rgb), 0.08);
    color: var(--scbas-red);
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 700;
}

.scbas-global-search__arrow {
    color: #b5b5c3;
}

.scbas-global-search__loading,
.scbas-global-search__empty {
    padding: 1.25rem;
    color: #7e8299;
    text-align: center;
}

.scbas-global-search__empty {
    display: grid;
    gap: 0.25rem;
}

.scbas-global-search__empty strong {
    color: #3f4254;
}

.scbas-topbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-left: auto;
}

.scbas-create-quote {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding-inline: 1rem;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(var(--scbas-red-rgb), 0.22);
    white-space: nowrap;
}

.scbas-create-quote svg {
    width: 18px;
    height: 18px;
}

.scbas-tenant-context {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
    max-width: 13rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(100, 105, 115, 0.15);
    border-radius: 999px;
    color: #7e8299;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.scbas-tenant-context > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.scbas-tenant-context__dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #50cd89;
    box-shadow: 0 0 0 3px rgba(80, 205, 137, 0.13);
}

.scbas-user-menu {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem !important;
}

.scbas-user-avatar {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.scbas-user-menu__name {
    max-width: 9rem;
    overflow: hidden;
    color: var(--bs-body-color);
    font-size: 0.84rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-bs-theme="dark"] .scbas-global-search {
    border-color: rgba(255, 255, 255, 0.09);
    background: #202224;
}

[data-bs-theme="dark"] .scbas-global-search:focus-within {
    border-color: rgba(var(--scbas-red-rgb), 0.7);
    background: #25282a;
}

[data-bs-theme="dark"] .scbas-global-search__input {
    color: #fff;
}

[data-bs-theme="dark"] .scbas-global-search kbd,
[data-bs-theme="dark"] .scbas-global-search__results {
    border-color: rgba(255, 255, 255, 0.1);
    background: var(--scbas-ink-2);
    color: #c8cacb;
}

[data-bs-theme="dark"] .scbas-global-search__result {
    border-color: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

[data-bs-theme="dark"] .scbas-global-search__result:hover,
[data-bs-theme="dark"] .scbas-global-search__result:focus {
    background: var(--scbas-ink-3);
    color: #fff;
}

[data-bs-theme="dark"] .scbas-global-search__result-copy span,
[data-bs-theme="dark"] .scbas-global-search__loading,
[data-bs-theme="dark"] .scbas-global-search__empty {
    color: #9ca3af;
}

[data-bs-theme="dark"] .scbas-global-search__heading,
[data-bs-theme="dark"] .scbas-global-search__tabs {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .scbas-global-search__heading strong,
[data-bs-theme="dark"] .scbas-global-search__tabs button[aria-selected="true"] {
    color: #fff;
}

[data-bs-theme="dark"] .scbas-global-search__tabs em {
    background: var(--scbas-ink-3);
    color: #c8cacb;
}

[data-bs-theme="dark"] .scbas-global-search__result-media,
[data-bs-theme="dark"] .scbas-global-search__result-media img {
    background: #fff;
}

[data-bs-theme="dark"] .scbas-global-search__empty strong {
    color: #fff;
}

[data-bs-theme="dark"] .scbas-tenant-context {
    border-color: rgba(255, 255, 255, 0.09);
    color: #b7bbc3;
}

@media (max-width: 1399.98px) {
    .scbas-tenant-context,
    .scbas-user-menu__name {
        display: none;
    }

    .scbas-topbar {
        gap: 0.6rem;
    }
}

@media (max-width: 1199.98px) {
    .scbas-global-search {
        flex-basis: 20rem;
    }
}

@media (max-width: 767.98px) {
    .scbas-topbar {
        min-height: 66px;
        padding: 0.6rem 0.75rem;
    }

    .scbas-global-search {
        min-width: 0;
        height: 42px;
    }

    .scbas-global-search__results {
        position: fixed;
        top: 4.65rem;
        left: 0.5rem;
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 5.15rem);
        transform: none;
    }

    .scbas-global-search__heading {
        padding-inline: 0.85rem;
    }

    .scbas-global-search__heading > span {
        display: none;
    }

    .scbas-global-search__panels {
        max-height: calc(100vh - 12.5rem);
        padding-inline: 0.65rem;
    }

    .scbas-global-search__grid {
        grid-template-columns: 1fr;
    }

    .scbas-global-search kbd,
    .scbas-create-quote span,
    .scbas-topbar__actions > .tenant-switcher {
        display: none;
    }

    .scbas-create-quote {
        width: 42px;
        padding: 0;
        justify-content: center;
    }
}

[data-bs-theme="dark"] .footer {
    background: var(--scbas-ink-footer);
    border-top: 1px solid var(--scbas-ink-line);
}

[data-bs-theme="light"] .footer {
    background: var(--scbas-paper-3);
    border-top: 1px solid var(--scbas-paper-line);
}

.fd-maintain-footer-brand {
    width: fit-content;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.fd-maintain-footer-brand:hover {
    color: var(--bs-body-color);
}

.fd-maintain-footer-brand__logo {
    width: 6.375rem;
    height: auto;
}

[data-bs-theme="light"] .fd-maintain-footer-brand__logo--dark,
[data-bs-theme="dark"] .fd-maintain-footer-brand__logo--light {
    display: none;
}

.fd-maintain-footer-brand span {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .fd-maintain-footer-brand {
        flex-direction: column;
        gap: .45rem;
        text-align: right;
    }
}

.supplier-suggestion-card {
    max-width: 62rem;
}

[data-bs-theme="dark"] .card {
    background-color: var(--scbas-ink-2);
    border: 1px solid var(--scbas-ink-line);
}

[data-bs-theme="light"] .card {
    background-color: var(--scbas-paper-2);
    border: 1px solid var(--scbas-paper-line);
}

.card {
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(18, 18, 18, 0.06);
}

.content {
    padding: 2rem;
}

.content > .container-fluid {
    max-width: 1720px;
    margin-inline: auto;
}

.scbas-page-search {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-secondary-bg);
}

.scbas-page-search > svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-left: 0.45rem;
    color: #a1a5b7;
}

.scbas-page-search .form-control {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.scbas-empty-state {
    display: grid;
    place-items: center;
    min-height: 18rem;
    padding: 2rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

.scbas-empty-state__icon {
    display: grid;
    width: 64px;
    height: 64px;
    margin-bottom: 0.75rem;
    place-items: center;
    border-radius: 18px;
    background: rgba(var(--scbas-red-rgb), 0.1);
    color: var(--scbas-red);
}

.scbas-empty-state__icon svg {
    width: 28px;
    height: 28px;
}

.scbas-empty-state h3 {
    margin-bottom: 0.25rem;
}

.scbas-empty-state p {
    margin: 0;
}

[data-bs-theme="dark"] .panel {
    background-color: var(--scbas-ink-2);
    border: 1px solid var(--scbas-ink-line);
    border-radius: 8px;
}

[data-bs-theme="light"] .panel {
    background-color: var(--scbas-paper-2);
    border: 1px solid var(--scbas-paper-line);
    border-radius: 8px;
}

/* Active sidebar item gets a red rail + bright label, like the site nav.
   Sidebar chrome — unconditional, since the sidebar is always graphite. */
.sidebar-item.active > .sidebar-link,
.sidebar-link.active {
    color: #fff;
    box-shadow: inset 3px 0 0 0 var(--scbas-red);
}

.sidebar-item.active > .sidebar-link i,
.sidebar-item.active > .sidebar-link svg {
    color: var(--scbas-red);
}

/* ==========================================================================
   Consistent tables across every area (Administration + Service).
   Unifies the mix of `.table`, `.table-bordered`, `.table-striped`, and bare
   `.table w-100` into ONE look: a red-underlined display-font header, hairline
   row dividers, zebra striping, and a subtle red hover — regardless of which
   modifier classes an individual view happened to use.
   ========================================================================== */
.table {
    --bs-table-cell-padding-y: 0.65rem;
    --bs-table-cell-padding-x: 0.75rem;
    vertical-align: middle;
    margin-bottom: 1rem;
}

.table > thead > tr > th {
    font-family: var(--scbas-font-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    border-bottom-width: 2px;
}

/* Drop the boxed grid from .table-bordered so bordered and unbordered tables
   share the same clean horizontal-divider look. */
.table > :not(caption) > * > * {
    border-left: 0 !important;
    border-right: 0 !important;
}

[data-bs-theme="dark"] .table {
    --bs-table-color: #C8CACB;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--scbas-ink-line);
}

[data-bs-theme="light"] .table {
    --bs-table-color: #33383D;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--scbas-paper-line);
}

[data-bs-theme="dark"] .table > thead > tr > th {
    background-color: var(--scbas-ink-3);
    color: #FFFFFF;
    border-bottom-color: var(--scbas-red);
}

[data-bs-theme="light"] .table > thead > tr > th {
    background-color: var(--scbas-paper-4);
    color: #14171A;
    border-bottom-color: var(--scbas-red);
}

[data-bs-theme="dark"] .table > tbody > tr > td,
[data-bs-theme="dark"] .table > tbody > tr > th {
    border-bottom-color: var(--scbas-ink-line);
}

[data-bs-theme="light"] .table > tbody > tr > td,
[data-bs-theme="light"] .table > tbody > tr > th {
    border-bottom-color: var(--scbas-paper-line);
}

/* Zebra + hover applied uniformly — including tables a view never marked
   .table-striped / .table-hover — so every grid reads the same. Striping is
   driven by the centralized --scbas-stripe-bg so it stays theme-appropriate. */
.table > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--scbas-stripe-bg);
}

[data-bs-theme="dark"] .table > tbody > tr:hover > * {
    background-color: rgba(var(--scbas-red-rgb), 0.08);
    color: #FFFFFF;
}

[data-bs-theme="light"] .table > tbody > tr:hover > * {
    background-color: rgba(var(--scbas-red-rgb), 0.06);
    color: #14171A;
}

/* DataTables is an interaction layer, not a second visual system. Every
   successfully initialized grid receives `.scbas-datatable` in site.js and
   follows the same panel, header, row, form-control, and focus treatment as
   Administration > Customers. */
.dt-container {
    overflow: hidden;
    border: 1px solid var(--service-line);
    border-radius: 11px;
    background: var(--service-panel-raised);
    color: var(--bs-body-color);
}

.customer-directory-panel .dt-container {
    border: 0;
    border-radius: 0;
}

.dt-container .dt-layout-row {
    gap: .65rem;
    margin: 0 !important;
    padding: .65rem .85rem;
}

.dt-container .dt-layout-row.dt-layout-table {
    overflow-x: auto;
    padding: 0;
    border-top: 1px solid var(--service-line);
    border-bottom: 1px solid var(--service-line);
}

.dt-container .dt-layout-row:first-child {
    background: var(--service-panel);
}

.dt-container .dt-layout-row:last-child {
    color: var(--service-muted);
    font-size: .8rem;
}

.dt-container .dt-length,
.dt-container .dt-search {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--service-muted);
    font-size: .8rem;
}

.dt-container .dt-input {
    min-height: 36px;
    border: 1px solid var(--service-line);
    border-radius: 6px;
    background: var(--service-panel-raised);
    color: var(--bs-body-color);
}

.dt-container .dt-search .dt-input {
    width: min(260px, 45vw);
    margin-left: 0;
}

.dt-container .dt-input:focus {
    border-color: var(--scbas-red);
    box-shadow: 0 0 0 .2rem rgba(var(--scbas-red-rgb), .15);
    outline: 0;
}

.dt-container .dt-paging {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.dt-container .dt-paging .dt-paging-button {
    min-width: 36px;
    min-height: 36px;
    margin: 0;
    border: 1px solid transparent !important;
    border-radius: 6px;
    background: transparent !important;
    color: var(--service-muted) !important;
}

.dt-container .dt-paging .dt-paging-button:hover,
.dt-container .dt-paging .dt-paging-button:focus-visible {
    border-color: var(--service-line) !important;
    background: var(--service-panel) !important;
    color: var(--bs-emphasis-color) !important;
}

.dt-container .dt-paging .dt-paging-button.current {
    border-color: var(--scbas-red) !important;
    background: rgba(var(--scbas-red-rgb), .14) !important;
    color: var(--scbas-red-bright) !important;
}

.table.scbas-datatable {
    width: 100% !important;
    margin-bottom: 0;
    --bs-table-bg: transparent;
}

.table.scbas-datatable > thead > tr > th {
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--service-line);
    background: var(--service-panel);
    color: var(--service-muted);
    font-family: var(--scbas-font-display);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.table.scbas-datatable > tbody > tr > td,
.table.scbas-datatable > tbody > tr > th {
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--service-line);
    background: transparent;
    font-weight: 400;
}

.table.scbas-datatable > tbody > tr:nth-of-type(odd) > * {
    background: transparent;
}

.table.scbas-datatable > tbody > tr:hover > * {
    background: var(--scbas-stripe-bg);
    color: var(--bs-emphasis-color);
}

.table.scbas-datatable > tbody > tr:last-child > * {
    border-bottom: 0;
}

@media (max-width: 767.98px) {
    .dt-container .dt-layout-row {
        align-items: stretch;
        flex-direction: column;
    }

    .dt-container .dt-search,
    .dt-container .dt-length {
        justify-content: space-between;
    }

    .dt-container .dt-search .dt-input {
        width: 100%;
    }
}

/* Legacy alternating rows (the equipment-maintenance checklist uses
   `.row.alternate-bg`, not a <table>). It was hardcoded to the bluish
   --bs-tertiary-bg; point it at the same neutral, theme-aware stripe so every
   alternating surface in the app matches. */
.alternate-bg {
    background-color: var(--scbas-stripe-bg) !important;
}

/* ==========================================================================
   Button clean-up — consistent shape, and tame the bright "light/white"
   buttons that clashed against the dark chrome.
   ========================================================================== */
.btn {
    --bs-btn-border-radius: 6px;
    font-weight: 500;
}

[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-white,
[data-bs-theme="dark"] .btn.bg-white {
    --bs-btn-bg: var(--scbas-ink-3);
    --bs-btn-border-color: var(--scbas-ink-line-2);
    --bs-btn-color: #EFE6E1;
    --bs-btn-hover-bg: var(--scbas-ink-4);
    --bs-btn-hover-border-color: rgba(var(--scbas-red-rgb), 0.55);
    --bs-btn-hover-color: #FFFFFF;
    background-color: var(--scbas-ink-3) !important;
    border-color: var(--scbas-ink-line-2) !important;
    color: #EFE6E1 !important;
}

/* Destructive triggers (Delete / Unassign trash & × icons) render as a bare,
   light-gray icon — no red button box — and only flush red on hover. Apply
   `btn btn-icon-delete` to any icon-only destructive control. */
.btn-icon-delete {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-color: #9A9C9D;
    --bs-btn-hover-color: var(--scbas-red-bright);
    --bs-btn-active-color: var(--scbas-red);
    --bs-btn-box-shadow: none;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #9A9C9D !important;
    /* Destructive actions sit at the right edge of their action cell. */
    float: right;
    margin-left: 0.35rem;
}

.btn-icon-delete:hover,
.btn-icon-delete:focus {
    color: var(--scbas-red-bright) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.btn-icon-delete i,
.btn-icon-delete svg {
    color: inherit !important;
}

/* "Attach Manuals" (+) control — markup is `btn-link` without a `.btn` base, so
   it fell back to the default UA button box. Render it as a clean accent icon. */
.btn-add-equipment-manuals {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--scbas-red) !important;
    padding: 0 !important;
    line-height: 1;
}

.btn-add-equipment-manuals:hover,
.btn-add-equipment-manuals:focus {
    color: var(--scbas-red-bright) !important;
}

.btn-add-equipment-manuals i {
    color: inherit !important;
}

/* ==========================================================================
   Overrides for scattered hardcoded colors in the app's own stylesheets.
   ========================================================================== */

/* User initials avatar (was #099bdd) */
[data-initials]:before {
    background: var(--scbas-red) !important;
}

/* Custom checkbox checked fill (was #1E80EF) */
input[type="checkbox"]:checked:before {
    background-color: var(--scbas-red) !important;
}

/* Toggle switches: primary state (was #36a9e1) */
.switch-primary > .switch-input:checked ~ .switch-label {
    background: var(--scbas-red) !important;
}

/* ==========================================================================
   Auth pages (Login / Forgot / Reset) — dark card matching the brand.
   These use _ThemeLayout (no data-bs-theme), so colors are set explicitly.
   ========================================================================== */
.auth-full-page {
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(60% 90% at 0% 100%,
            rgba(255, 107, 43, 0.22) 0%,
            rgba(var(--scbas-red-rgb), 0.10) 35%,
            transparent 70%),
        var(--scbas-ink);
}

.auth-form {
    width: 100%;
    max-width: 460px;
    margin: auto;
    background: var(--scbas-ink-2);
    border: 1px solid var(--scbas-ink-line);
    border-radius: 16px;
    padding: 40px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    color: #EFE6E1;
}

.auth-form .lead {
    color: #EFE6E1;
}

.auth-form .form-label,
.auth-form .form-check-label,
.auth-form small {
    color: #DCCEC6;
}

.auth-form .form-control {
    background-color: var(--scbas-ink-sidebar);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.auth-form .form-control::placeholder {
    color: #7D8081;
}

.auth-form .form-control:focus {
    background-color: var(--scbas-ink-sidebar);
    color: #fff;
}

.auth-form a {
    color: var(--scbas-red-bright);
}

.auth-form hr {
    border-color: var(--scbas-ink-line-2);
}

/* Global Administrator tenant picker — shown when a login carried no tenant
   slug/domain. The auth pages are unconditionally dark-branded regardless of
   the operator's content-theme choice (there's no data-bs-theme attribute on
   this layout at all), so give the modal the same explicit ink treatment
   rather than relying on Bootstrap's un-retinted default modal background. */
#scbas-choose-tenant .modal-content {
    background: var(--scbas-ink-2);
    border: 1px solid var(--scbas-ink-line);
    border-radius: 16px;
    color: #EFE6E1;
}

#scbas-choose-tenant .modal-header,
#scbas-choose-tenant .modal-footer {
    border-color: var(--scbas-ink-line);
}

#scbas-choose-tenant .modal-title {
    color: #fff;
}

/* Bootstrap's .text-muted assumes a light surface; this modal is always
   dark, so it needs its own legible muted tone rather than near-invisible
   dark-gray-on-dark-gray. */
#scbas-choose-tenant .text-muted {
    color: #9BA0A3 !important;
}

.scbas-tenant-picker-card .text-muted {
    color: #B7BBC3 !important;
}

.scbas-tenant-picker-card {
    border: 1px solid var(--scbas-ink-line);
    border-radius: 12px;
    background: var(--scbas-ink-sidebar);
    color: #EFE6E1;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.scbas-tenant-picker-card:hover,
.scbas-tenant-picker-card:focus-visible {
    border-color: rgba(var(--scbas-red-rgb), 0.55);
    background: var(--scbas-ink-3);
    color: #fff;
}

.scbas-tenant-picker-card__logo {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
}

.scbas-tenant-picker-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   Price-list catalog explorer.

   Mirrors the public catalog's category sections and image tiles while adding
   branch-aware maintenance controls. The hierarchy is navigated one level at
   a time so deep catalog branches stay understandable at desktop and tablet
   widths instead of collapsing into a single indented table.
   ========================================================================== */
.pl-explorer {
    width: 100%;
}

.pl-category-nav {
    display: flex;
    gap: 0.55rem;
    margin-bottom: 1.75rem;
    padding: 0.85rem;
    overflow-x: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-secondary-bg);
    scrollbar-width: thin;
}

.pl-category-nav__item {
    flex: 0 0 auto;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    color: var(--bs-body-color);
    font-family: var(--scbas-font-display);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    line-height: 1.1;
    text-decoration: none;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.pl-category-nav__item:hover {
    border-color: rgba(var(--scbas-red-rgb), 0.65);
    color: var(--scbas-red-bright);
}

.pl-category-nav__item.is-active {
    border-color: var(--scbas-red);
    background: var(--scbas-red);
    color: #fff;
}

.pl-overview-heading,
.pl-branch-section__heading,
.pl-category-section__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.pl-overview-heading {
    margin-bottom: 1.5rem;
}

.pl-overview-heading h4,
.pl-branch-section__heading h4 {
    margin: 0;
}

.pl-overview-heading p {
    max-width: 620px;
    margin: 0;
    color: var(--bs-secondary-color);
}

.pl-eyebrow {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--scbas-red-bright);
    font-family: var(--scbas-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.pl-category-section {
    margin-bottom: 2.4rem;
}

.pl-category-section__header {
    margin-bottom: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.pl-category-section__title {
    display: inline-flex;
    align-items: baseline;
    gap: 0.8rem;
    min-width: 0;
    color: var(--bs-emphasis-color);
    font-family: var(--scbas-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.pl-category-section__title:hover {
    color: var(--scbas-red-bright);
}

.pl-category-section__title small {
    color: var(--bs-secondary-color);
    font-family: var(--scbas-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

.pl-category-section__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--bs-secondary-color);
    font-size: 0.76rem;
    white-space: nowrap;
}

.pl-node-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 1rem;
}

.pl-node-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-secondary-bg);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.pl-node-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--scbas-red-rgb), 0.55);
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.16);
}

.pl-node-card__open {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.pl-node-card__open:hover {
    color: inherit;
}

.pl-node-card__media {
    display: flex;
    height: 148px;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: #f5f5f3;
}

.pl-node-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pl-node-card__placeholder,
.pl-current-node__placeholder {
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--scbas-red-rgb), 0.12);
    color: var(--scbas-red);
}

.pl-node-card__placeholder svg,
.pl-current-node__placeholder svg {
    width: 30px;
    height: 30px;
}

.service-card__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #656565;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.service-card__placeholder svg {
    width: 34px;
    height: 34px;
}

.service-picture-preview {
    top: 1rem;
    overflow: hidden;
}

.service-picture-preview .pl-node-card__media {
    height: 260px;
    border-bottom: 0;
}

.pl-node-card__body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    padding: 0.85rem;
}

.pl-node-card__kind {
    color: var(--scbas-red-bright);
    font-family: var(--scbas-font-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pl-node-card__name {
    margin: 0.2rem 0 0;
    color: var(--bs-emphasis-color);
    font-size: 1.05rem;
    line-height: 1.05;
}

.pl-node-card__subtitle {
    display: -webkit-box;
    overflow: hidden;
    margin: 0.45rem 0 0;
    color: var(--bs-secondary-color);
    font-size: 0.76rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pl-node-card__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.65rem;
    margin-top: auto;
    padding-top: 0.75rem;
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
}

.pl-node-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--bs-border-color);
}

.pl-node-card__actions .btn-default {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.pl-node-card__actions svg {
    width: 14px;
    height: 14px;
}

.pl-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
}

.pl-breadcrumbs a {
    color: var(--scbas-red-bright);
    text-decoration: none;
}

.pl-breadcrumbs a:hover {
    text-decoration: underline;
}

.pl-current-node {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: stretch;
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-secondary-bg);
}

.pl-current-node__media {
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f3;
}

.pl-current-node__media img {
    width: 100%;
    height: 100%;
    max-height: 190px;
    object-fit: contain;
}

.pl-current-node__content {
    align-self: center;
}

.pl-current-node__content h4 {
    margin: 0.35rem 0 0.25rem;
    color: var(--bs-emphasis-color);
    font-size: 1.65rem;
}

.pl-current-node__meta,
.pl-current-node__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    color: var(--bs-secondary-color);
    font-size: 0.74rem;
}

.pl-current-node__subtitle {
    margin: 0;
    color: var(--bs-body-color);
    font-weight: 500;
}

.pl-current-node__description {
    max-width: 760px;
    margin-top: 0.45rem;
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
    line-height: 1.55;
}

.pl-current-node__description > :last-child {
    margin-bottom: 0;
}

.pl-current-node__stats {
    margin-top: 0.9rem;
}

.pl-current-node__stats strong {
    color: var(--bs-emphasis-color);
}

.pl-current-node__actions {
    display: flex;
    min-width: 175px;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.pl-current-node__delete {
    align-self: flex-end;
    float: none;
    margin: 0.25rem 0 0;
}

.pl-branch-section {
    margin-top: 2.25rem;
}

.pl-branch-section__heading {
    margin-bottom: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.pl-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.pl-product-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 9px;
    background: var(--bs-secondary-bg);
}

.pl-product-card__media {
    display: flex;
    min-height: 105px;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-right: 1px solid var(--bs-border-color);
    background: #f5f5f3;
    color: var(--scbas-red);
}

.pl-product-card__media img {
    width: 100%;
    height: 100%;
    max-height: 100px;
    object-fit: contain;
}

.pl-product-card__body {
    min-width: 0;
    padding: 0.8rem;
}

.pl-product-card__body h5 {
    margin: 0 0 0.25rem;
    color: var(--bs-emphasis-color);
    font-size: 1rem;
    line-height: 1.1;
}

.pl-product-card__body code {
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
}

.pl-product-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.55rem;
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
}

.pl-product-card__meta strong {
    color: var(--bs-emphasis-color);
}

.pl-product-card__actions {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.pl-inline-empty,
.pl-empty-state {
    border: 1px dashed var(--bs-border-color);
    border-radius: 10px;
    color: var(--bs-secondary-color);
}

.pl-reference-summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 9px;
    background: var(--bs-secondary-bg);
}

.pl-reference-summary > svg {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    color: var(--scbas-red);
}

.pl-reference-summary div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.pl-reference-summary strong {
    color: var(--bs-emphasis-color);
    font-family: var(--scbas-font-display);
    font-size: 1rem;
}

.pl-reference-summary span {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
}

.pl-inline-empty {
    padding: 1rem;
    font-size: 0.82rem;
}

.pl-empty-state {
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.pl-empty-state--compact {
    margin-top: 2rem;
    padding: 2rem 1.5rem;
}

.pl-empty-state > svg {
    width: 38px;
    height: 38px;
    margin-bottom: 0.65rem;
    color: var(--scbas-red);
}

.pl-empty-state h4 {
    margin-bottom: 0.25rem;
    color: var(--bs-emphasis-color);
}

.pl-empty-state p {
    margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
    .pl-current-node {
        grid-template-columns: 140px minmax(0, 1fr);
    }

    .pl-current-node__actions {
        grid-column: 1 / -1;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .pl-current-node__delete {
        align-self: center;
    }
}

@media (max-width: 767.98px) {
    .pl-overview-heading,
    .pl-category-section__header,
    .pl-branch-section__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .pl-category-section__meta {
        flex-wrap: wrap;
        white-space: normal;
    }

    .pl-node-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }
}

@media (max-width: 575.98px) {
    .pl-current-node {
        grid-template-columns: 1fr;
    }

    .pl-current-node__media {
        min-height: 180px;
    }

    .pl-current-node__actions {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
    }

    .pl-current-node__delete {
        align-self: flex-end;
    }

    .pl-node-grid,
    .pl-product-grid {
        grid-template-columns: 1fr;
    }
}

.scbas-quote-send {
    position: sticky;
    bottom: 1rem;
    z-index: 20;
    border-color: rgba(209, 44, 49, 0.28);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

@media print {
    .scbas-quote-send,
    .sidebar,
    .navbar,
    .footer {
        display: none !important;
    }
}

/* ==========================================================================
   Service workspace — compact, task-centered, and shared by technicians/admin
   ========================================================================== */

.service-workspace,
.customer-workspace,
.customer-directory {
    --service-panel: var(--bs-tertiary-bg);
    --service-panel-raised: var(--bs-body-bg);
    --service-line: var(--bs-border-color);
    --service-muted: var(--bs-secondary-color);
    --service-green: #2ea66f;
    --service-amber: #d99a2b;
    --service-red: #d64b50;
    max-width: 1680px;
    margin: 0 auto;
}

.service-workspace svg,
.customer-workspace svg,
.customer-directory svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

.service-eyebrow {
    color: var(--scbas-red-bright);
    font-family: var(--scbas-font-display);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.service-page-header,
.customer-workspace-header {
    margin-bottom: 1rem;
}

.service-page-header,
.service-job-heading,
.customer-workspace-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

.service-page-header h1,
.service-job-heading h1,
.customer-workspace-heading h1 {
    margin: .1rem 0 0;
    font-size: clamp(1.85rem, 3vw, 2.65rem);
    font-weight: 750;
    line-height: 1;
}

.service-page-header p,
.service-job-heading p,
.customer-workspace-heading p {
    margin: .4rem 0 0;
    color: var(--service-muted);
}

.service-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.service-page-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
}

.service-filter-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) minmax(180px, .75fr) minmax(200px, .8fr) auto;
    gap: .75rem;
    align-items: end;
    padding: .85rem;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel);
}

.service-filter-bar--queue {
    grid-template-columns: minmax(245px, 1.2fr) repeat(4, minmax(170px, .8fr)) auto;
}

.service-filter-field label {
    display: block;
    margin-bottom: .3rem;
    color: var(--service-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.service-filter-toggle {
    align-self: center;
    padding-top: 1.2rem;
}

.service-filter-toggle .form-check-label {
    margin-bottom: 0;
    color: var(--service-text);
    font-size: .82rem;
    letter-spacing: 0;
    text-transform: none;
}

.service-map-zone-menu {
    width: max-content;
    min-width: 100%;
    max-height: 300px;
    overflow-y: auto;
}

.service-map-zone-menu .form-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 32px;
    padding-left: .25rem;
}

.service-map-zone-menu .form-check-input {
    position: static;
    flex: 0 0 auto;
    margin: 0;
}

.service-map-zone-menu .form-check-label {
    margin: 0;
    color: inherit;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.service-filter-bar .form-control,
.service-filter-bar .form-select,
.service-filter-bar .input-group-text {
    min-height: 40px;
}

.service-filter-actions {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.service-metrics,
.customer-snapshot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: .75rem 0 1.25rem;
}

.service-metric {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 68px;
    padding: .7rem .85rem;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel-raised);
    color: inherit;
    text-decoration: none;
}

.service-metric-icon,
.service-info-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 9px;
    background: rgba(var(--scbas-red-rgb), .12);
    color: var(--scbas-red-bright);
}

.service-metric strong {
    display: block;
    font-family: var(--scbas-font-display);
    font-size: 1.45rem;
    line-height: 1;
}

.service-metric span:not(.service-metric-icon) {
    color: var(--service-muted);
    font-size: .78rem;
}

.service-metric.is-urgent {
    border-color: color-mix(in srgb, var(--service-red) 55%, transparent);
}

.service-metric.is-urgent .service-metric-icon {
    background: color-mix(in srgb, var(--service-red) 15%, transparent);
    color: var(--service-red);
}

.service-metric.is-warning {
    border-color: color-mix(in srgb, var(--service-amber) 55%, transparent);
}

.service-metric.is-warning .service-metric-icon {
    background: color-mix(in srgb, var(--service-amber) 15%, transparent);
    color: var(--service-amber);
}

.service-metric-link > svg {
    margin-left: auto;
    color: var(--service-muted);
}

.service-metric-link:hover {
    border-color: var(--scbas-red);
    color: inherit;
    transform: translateY(-1px);
}

.service-section-heading,
.customer-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .65rem;
}

.service-section-heading h2,
.customer-section-heading h2 {
    margin: .05rem 0 0;
    font-size: 1.45rem;
    font-weight: 700;
}

.service-section-heading > span,
.customer-section-heading > span {
    max-width: 560px;
    font-size: .78rem;
    text-align: right;
}

.service-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .75rem;
}

.service-bulk-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.service-print-choice {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--service-muted);
    font-size: .76rem;
    white-space: nowrap;
}

.service-print-choice .form-check-input {
    margin: 0;
}

.service-job-list {
    display: grid;
    gap: .7rem;
}

.service-job-card {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--service-line);
    border-radius: 11px;
    background: var(--service-panel-raised);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.service-job-card:hover {
    border-color: color-mix(in srgb, var(--scbas-red) 45%, var(--service-line));
    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

.service-job-card.is-past-due {
    border-left: 3px solid var(--service-red);
}

.service-job-card.is-needs-follow-up {
    border-left: 3px solid var(--bs-warning);
}

.service-job-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 142px;
    padding: .7rem;
    border-right: 1px solid var(--service-line);
    background: color-mix(in srgb, var(--service-panel) 80%, transparent);
    text-align: center;
}

.service-job-card.is-past-due .service-job-date {
    background: color-mix(in srgb, var(--service-red) 10%, var(--service-panel));
}

.service-job-date-label {
    margin-bottom: .25rem;
    color: var(--service-muted);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.service-job-card.is-past-due .service-job-date-label {
    color: var(--service-red);
}

.service-job-card.is-needs-follow-up .service-job-date-label {
    color: var(--bs-warning);
}

.service-job-date strong {
    font-family: var(--scbas-font-display);
    font-size: 1.55rem;
    line-height: 1;
}

.service-job-date small {
    color: var(--service-muted);
}

.service-job-main {
    min-width: 0;
    padding: .8rem 0;
}

.service-job-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.service-job-title-row h3 {
    margin: .18rem 0 0;
    font-size: 1.35rem;
    line-height: 1.1;
}

.service-job-title-row h3 a {
    color: inherit;
    text-decoration: none;
}

.service-job-title-row h3 a:hover {
    color: var(--scbas-red-bright);
}

.service-type-badge,
.service-status-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .18rem .45rem;
    border-radius: 5px;
    background: rgba(var(--scbas-red-rgb), .12);
    color: var(--scbas-red-bright);
    font-size: .68rem;
    font-weight: 750;
}

.service-status-badge {
    background: color-mix(in srgb, var(--service-amber) 13%, transparent);
    color: var(--service-amber);
}

/* --------------------------------------------------------------------------
   Job card action rail

   Assignment used to sit at the top-right of the card body while "Open job"
   and "Manage" sat in a separate column, so the three controls landed on three
   different baselines — and an assigned row (pill + red "Unassign" link) had a
   completely different shape from an unassigned one (a wide select). Nothing
   lined up down the queue.

   Everything an operator can *do* to the job now lives in one fixed-width rail
   in a fixed order: who owns it → open it → manage it. Assigned and unassigned
   rows occupy identical slots, so the column reads straight down the page.
   -------------------------------------------------------------------------- */
.service-job-assign {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .3rem;
    padding-bottom: .5rem;
    margin-bottom: .1rem;
    border-bottom: 1px solid var(--service-line);
}

.service-job-assign-label {
    color: var(--service-muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.service-job-assign .service-assignment-pill {
    justify-content: center;
    text-align: center;
}

/* A destructive-looking red link is the wrong weight for reassignment, which
   is routine and reversible. Padding gives the small label a real hit area
   rather than a text-height sliver. */
.service-job-assign-change {
    min-height: 32px;
    padding: .35rem .5rem;
    color: var(--service-muted);
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
    text-decoration: underline;
}

.service-job-assign-change:hover {
    color: var(--scbas-red-bright);
}

.service-job-assign-change:focus-visible {
    color: var(--scbas-red-bright);
    outline: 2px solid var(--scbas-red-bright);
    outline-offset: 2px;
    border-radius: 6px;
}

.service-assign-select {
    width: 100%;
}

/* Assignment is the coordinator's most repeated action on this screen and is
   performed on tablets, so the control keeps a full touch target on any
   device without a precise pointer. */
@media (pointer: coarse) {
    .service-assign-select {
        min-height: 44px;
    }

    .service-job-assign-change {
        min-height: 44px;
    }
}

/* Error must appear next to the control that failed, not only in a corner
   toast the coordinator may never look at. */
.service-assign-select.is-failed {
    border-color: var(--service-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--service-red) 18%, transparent);
}

.service-job-assign-error {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
    color: var(--service-red);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
}

.service-job-assign[data-busy="true"] .service-assign-select {
    opacity: .65;
}

.service-job-assign-busy {
    color: var(--service-muted);
    font-size: .7rem;
    font-weight: 600;
}

/* Unassigned work is an exception the coordinator must resolve, so the control
   carries the same amber the "Unassigned" metric uses — but as a border, not a
   fill, so it does not outrank the past-due date rail. */
.service-assign-select.is-unassigned {
    border-color: color-mix(in srgb, var(--service-amber) 55%, var(--service-line));
}

.service-assignment-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--service-green) 13%, transparent);
    color: var(--service-green);
    font-size: .72rem;
    font-weight: 700;
}

.service-assignment-pill.is-unassigned {
    background: color-mix(in srgb, var(--service-amber) 13%, transparent);
    color: var(--service-amber);
}

/* --------------------------------------------------------------------------
   User-facing message spacing

   Alerts are used across the administration, global administration, supplier,
   and technician workspaces for guidance, validation, warnings, and outcomes.
   Keep a full 20px inset around their copy in both themes so messages never
   sit against the severity border. The block rule also normalizes legacy
   p-1/p-2 utilities; compact inline span badges remain intentionally compact.
   -------------------------------------------------------------------------- */
.alert {
    --bs-alert-padding-x: 1.25rem;
    --bs-alert-padding-y: 1.25rem;
}

div.alert:not(.scbas-user-message),
p.alert:not(.scbas-user-message) {
    padding: 1.25rem !important;
}

div.alert.alert-dismissible:not(.scbas-user-message) {
    padding-right: 3rem !important;
}

/* --------------------------------------------------------------------------
   Post-action feedback banner

   Replaces the Bootstrap-4 alert markup that rendered a bare "×" with no
   padding. Uses a tinted surface with a leading accent bar so the outcome
   reads at a glance without shouting over the page content beneath it.
   -------------------------------------------------------------------------- */
.alert.scbas-user-message {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    width: 100%;
    padding: 1.25rem 3.25rem 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--scbas-message-border, rgba(127, 132, 145, .25));
    border-radius: 12px;
    background: var(--scbas-message-surface, rgba(127, 132, 145, .08));
    color: var(--bs-body-color);
    font-size: .92rem;
    line-height: 1.5;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
}

/* The accent bar repeats the outcome structurally, so the banner is still
   distinguishable in high-contrast or forced-colour modes. */
.scbas-user-message::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
    background: var(--scbas-message-accent, #7f8491);
}

.scbas-user-message__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: .05rem;
    color: var(--scbas-message-accent, #7f8491);
}

.scbas-user-message__icon svg {
    width: 20px;
    height: 20px;
}

.scbas-user-message__body {
    min-width: 0;
    flex: 1 1 auto;
    font-weight: 500;
}

/* Must out-specify `.alert-dismissible .btn-close` (0,2,0), which pins the
   control to top/right with its own padding and pushed it outside the banner. */
.alert.scbas-user-message .scbas-user-message__close {
    position: absolute;
    top: 50%;
    right: .6rem;
    transform: translateY(-50%);
    /* Bootstrap's .btn-close is 1em square — well under a usable target. */
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background-position: center;
    background-size: .75rem;
    opacity: .5;
}

.alert.scbas-user-message .scbas-user-message__close:hover {
    opacity: 1;
    background-color: rgba(127, 132, 145, .14);
}

.alert.scbas-user-message .scbas-user-message__close:focus-visible {
    opacity: 1;
    outline: 2px solid var(--scbas-message-accent, #7f8491);
    outline-offset: 2px;
    box-shadow: none;
}

.alert.scbas-user-message.is-success {
    --scbas-message-accent: #2f9e5f;
    --scbas-message-surface: rgba(47, 158, 95, .10);
    --scbas-message-border: rgba(47, 158, 95, .28);
}

.alert.scbas-user-message.is-error {
    --scbas-message-accent: #d64545;
    --scbas-message-surface: rgba(214, 69, 69, .10);
    --scbas-message-border: rgba(214, 69, 69, .30);
}

.alert.scbas-user-message.is-warning {
    --scbas-message-accent: #c9821b;
    --scbas-message-surface: rgba(201, 130, 27, .11);
    --scbas-message-border: rgba(201, 130, 27, .30);
}

.alert.scbas-user-message.is-info {
    --scbas-message-accent: #3a7bd5;
    --scbas-message-surface: rgba(58, 123, 213, .10);
    --scbas-message-border: rgba(58, 123, 213, .28);
}

/* Dark theme needs lighter accents to clear 4.5:1 against the ink surface. */
[data-bs-theme="dark"] .scbas-user-message {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

[data-bs-theme="dark"] .scbas-user-message.is-success {
    --scbas-message-accent: #4ade80;
    --scbas-message-surface: rgba(74, 222, 128, .12);
    --scbas-message-border: rgba(74, 222, 128, .26);
}

[data-bs-theme="dark"] .scbas-user-message.is-error {
    --scbas-message-accent: #f87171;
    --scbas-message-surface: rgba(248, 113, 113, .13);
    --scbas-message-border: rgba(248, 113, 113, .28);
}

[data-bs-theme="dark"] .scbas-user-message.is-warning {
    --scbas-message-accent: #fbbf24;
    --scbas-message-surface: rgba(251, 191, 36, .13);
    --scbas-message-border: rgba(251, 191, 36, .28);
}

[data-bs-theme="dark"] .scbas-user-message.is-info {
    --scbas-message-accent: #60a5fa;
    --scbas-message-surface: rgba(96, 165, 250, .13);
    --scbas-message-border: rgba(96, 165, 250, .28);
}

[data-bs-theme="dark"] .alert.scbas-user-message .scbas-user-message__close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="dark"] .alert.scbas-user-message .scbas-user-message__close:hover {
    background-color: rgba(255, 255, 255, .12);
}

@media (max-width: 575.98px) {
    .scbas-user-message {
        padding: 1.25rem 3.25rem 1.25rem 1.25rem;
        font-size: .88rem;
    }
}

/* --------------------------------------------------------------------------
   Bootstrap alert variants on the graphite chrome

   Bootstrap 5.3's stock `.alert-*` palette is tuned for a white page. Dropped
   onto the ink surface it produces two failures we shipped across 39 views:
   `.alert-info` and `.alert-primary` render as a saturated slab that shouts
   over the content it annotates, and `.alert-light` renders as a mid-gray
   block whose body text falls under 4.5:1 — the Equipment Manuals empty state
   was effectively unreadable.

   These blocks are almost always explanatory, not urgent. The severity belongs
   in the border, which can carry full saturation cheaply because it holds no
   text. The fill drops to a wash — enough to separate the block from the page,
   far too little to fight the words sitting on it — and the body copy stays the
   near-white used everywhere else on the ink surface rather than a tinted
   variant, because a paragraph is read, not glanced at.

   Driven entirely through Bootstrap's own `--bs-alert-*` custom properties so
   every existing `.alert-*` usage inherits the fix with no markup change, and
   any view that opts into a different treatment still wins on specificity.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .alert {
    --scbas-alert-accent: #8b909d;
    --bs-alert-color: #DCDEE0;
    --bs-alert-bg: rgba(127, 132, 145, .07);
    --bs-alert-border-color: var(--scbas-alert-accent);
    --bs-alert-link-color: var(--scbas-alert-accent);
    border: 1px solid var(--bs-alert-border-color);
}

[data-bs-theme="dark"] .alert-info,
[data-bs-theme="dark"] .alert-primary {
    --scbas-alert-accent: rgba(96, 165, 250, .55);
    --bs-alert-bg: rgba(96, 165, 250, .07);
    --bs-alert-link-color: #93c5fd;
}

[data-bs-theme="dark"] .alert-success {
    --scbas-alert-accent: rgba(74, 222, 128, .5);
    --bs-alert-bg: rgba(74, 222, 128, .07);
    --bs-alert-link-color: #86efac;
}

[data-bs-theme="dark"] .alert-warning {
    --scbas-alert-accent: rgba(251, 191, 36, .5);
    --bs-alert-bg: rgba(251, 191, 36, .07);
    --bs-alert-link-color: #fcd34d;
}

[data-bs-theme="dark"] .alert-danger {
    --scbas-alert-accent: rgba(248, 113, 113, .55);
    --bs-alert-bg: rgba(248, 113, 113, .07);
    --bs-alert-link-color: #fca5a5;
}

/* `.alert-light` and `.alert-secondary` are the neutral "here is some context"
   variants. They keep the gray accent from `.alert` above; they only need the
   surface pulled back off mid-gray so their text can breathe. */
[data-bs-theme="dark"] .alert-light,
[data-bs-theme="dark"] .alert-secondary,
[data-bs-theme="dark"] .alert-dark {
    --scbas-alert-accent: var(--scbas-ink-line-2);
    --bs-alert-bg: rgba(255, 255, 255, .04);
}

/* Headings and inline emphasis inside an alert should read brighter than the
   body copy, matching how headings behave everywhere else on the ink surface. */
[data-bs-theme="dark"] .alert .alert-heading,
[data-bs-theme="dark"] .alert strong,
[data-bs-theme="dark"] .alert b {
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Empty validation summaries

   `Html.ValidationSummary(..., new { @class = "alert alert-danger" })` renders
   its container unconditionally. With no errors to report ASP.NET still emits
   the div — carrying our alert classes and a hidden placeholder list item — so
   26 forms across the application opened with a bare red bar above content
   that had nothing wrong with it. It reads as a failure the user cannot act
   on, and trains people to ignore the one place real errors appear.

   ASP.NET distinguishes the two states for us: `validation-summary-valid` when
   there is nothing to say, `validation-summary-errors` when there is. Hiding
   only the valid state keeps every real error visible and needs no change to
   the 26 call sites.
   -------------------------------------------------------------------------- */
.alert.validation-summary-valid {
    display: none;
}

/* The user-message banner already defines its own severity surface and border,
   so it must keep them rather than inherit the generic treatment above. */
[data-bs-theme="dark"] .alert.scbas-user-message {
    border: 1px solid var(--scbas-message-border, rgba(127, 132, 145, .25));
    background: var(--scbas-message-surface, rgba(127, 132, 145, .08));
}

/* --------------------------------------------------------------------------
   New-quote product cart

   Mirrors the public website's quote cart so staff and customers share one
   mental model: search, pick, set a quantity, remove.
   -------------------------------------------------------------------------- */
.quote-cart-results {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}

/* --------------------------------------------------------------------------
   Rich catalog picker (shared by staff quote screens)

   Mirrors the public website's search: image, category path, product name
   with the match highlighted, part number — and no prices, because quoting
   is not shopping by price and pricing belongs to the review screen.
   -------------------------------------------------------------------------- */
.scbas-picker {
    border: 1px solid var(--service-line);
    border-radius: 12px;
    background: var(--bs-body-bg);
    padding: .35rem;
}

.scbas-picker__group {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .55rem .6rem .3rem;
}

.scbas-picker__group-name {
    font-family: var(--scbas-font-display);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scbas-red-bright);
}

.scbas-picker__group-path {
    overflow: hidden;
    color: var(--service-muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scbas-picker__row {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-height: 56px;
    padding: .45rem .6rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
    transition: background 120ms ease;
}

.scbas-picker__row:hover,
.scbas-picker__row.is-active {
    background: rgba(var(--scbas-red-rgb), .08);
}

.scbas-picker__row:focus-visible {
    outline: 2px solid var(--scbas-red-bright);
    outline-offset: -2px;
}

.scbas-picker__row.is-indented {
    padding-left: 1.1rem;
}

.scbas-picker__row.is-added {
    background: color-mix(in srgb, var(--service-green) 10%, transparent);
}

/* Fixed thumbnail box reserves its space before the image arrives, so rows
   never shift as pictures lazy-load. */
.scbas-picker__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 1px solid var(--service-line);
    border-radius: 8px;
    background: var(--bs-body-bg);
}

.scbas-picker__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.scbas-picker__thumb.is-placeholder {
    background:
        linear-gradient(135deg, rgba(127, 132, 145, .12) 25%, transparent 25%) 0 0 / 10px 10px,
        rgba(127, 132, 145, .06);
}

.scbas-picker__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    gap: .06rem;
}

.scbas-picker__category {
    overflow: hidden;
    color: var(--service-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scbas-picker__title {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
}

.scbas-picker__part {
    color: var(--service-muted);
    font-size: .74rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The subtle highlight the operator asked for: a tinted underline-weight mark
   rather than a shouting yellow block. */
.scbas-picker__match {
    padding: 0 .05em;
    border-radius: 3px;
    background: rgba(var(--scbas-red-rgb), .16);
    color: inherit;
    font-weight: 700;
}

.scbas-picker__variant-count {
    flex: 0 0 auto;
    padding: .2rem .5rem;
    border: 1px solid var(--service-line);
    border-radius: 999px;
    color: var(--service-muted);
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.scbas-picker__row.is-expanded .scbas-picker__variant-count {
    border-color: var(--scbas-red-bright);
    color: var(--scbas-red-bright);
}

.scbas-picker__variants {
    margin-left: 2.6rem;
    border-left: 2px solid var(--service-line);
}

.scbas-picker__variant {
    min-height: 44px;
    gap: .6rem;
}

.scbas-picker__added {
    flex: 0 0 auto;
    color: var(--service-green);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.scbas-picker__message {
    padding: .9rem .7rem;
    color: var(--service-muted);
    font-size: .86rem;
}

.scbas-picker__message.is-error {
    color: var(--service-red);
}

/* Skeleton rows shown once, while the catalog index loads. */
.scbas-picker__skeleton {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 56px;
    padding: .45rem .6rem;
}

.scbas-picker__skeleton-lines {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: .35rem;
}

.scbas-picker__skeleton-lines span {
    height: .6rem;
    border-radius: 4px;
    background: rgba(127, 132, 145, .18);
    animation: scbas-picker-pulse 1.1s ease-in-out infinite;
}

.scbas-picker__skeleton-lines span:first-child { width: 35%; }
.scbas-picker__skeleton-lines span:last-child { width: 65%; }

@keyframes scbas-picker-pulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .scbas-picker__skeleton-lines span { animation: none; }
    .scbas-picker__row { transition: none; }
}

.quote-cart-qty-col {
    width: 7rem;
}

.quote-cart-qty {
    min-width: 4.5rem;
}

.quote-cart-empty {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.1rem;
    margin-top: .75rem;
    border: 1px dashed var(--service-line);
    border-radius: 10px;
    color: var(--service-muted);
}

.quote-cart-empty svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.quote-cart-empty strong {
    display: block;
    color: var(--bs-body-color);
    font-size: .92rem;
}

.quote-cart-empty span {
    font-size: .82rem;
}

.quote-cart-custom {
    padding-top: .9rem;
    border-top: 1px solid var(--service-line);
}

.quote-cart-custom legend {
    float: none;
    width: auto;
}

@media (pointer: coarse) {
    .quote-cart-qty,
    .quote-cart-custom .form-control,
    .quote-cart-custom .btn {
        min-height: 44px;
    }
}

.service-job-context,
.service-readiness {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    margin-top: .45rem;
    color: var(--service-muted);
    font-size: .76rem;
}

.service-job-context a,
.service-job-context span,
.service-readiness span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.service-job-context a {
    color: inherit;
    text-decoration: none;
}

.service-job-context a:hover {
    color: var(--scbas-red-bright);
}

.service-scope-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    max-width: 880px;
    margin-top: .55rem;
    padding: .45rem .55rem;
    border-left: 2px solid var(--scbas-red);
    background: rgba(var(--scbas-red-rgb), .05);
    font-size: .76rem;
}

.service-scope-note > svg {
    flex: 0 0 auto;
    margin-top: .08rem;
    color: var(--scbas-red-bright);
}

.service-scope-note strong,
.service-scope-note span {
    display: block;
}

.service-scope-note span {
    color: var(--service-muted);
}

.service-readiness span.is-missing,
.service-asset-flags .is-missing {
    color: var(--service-amber);
}

.service-job-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    /* 8px minimum between adjacent targets so Open job and Manage cannot be
       mis-tapped for one another. */
    gap: .5rem;
    /* Fixed, not content-sized: a rail that resizes per row is what made the
       queue look ragged. Every card now ends at the same vertical edge. */
    flex: 0 0 auto;
    width: 232px;
    padding: .8rem .8rem .8rem 0;
}

.service-job-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

/* Bootstrap's dropdown wrapper is inline-block by default, so "Manage" was
   narrower than "Open job" directly above it. */
.service-job-actions .dropdown {
    display: flex;
}

.service-job-actions .dropdown > .btn {
    width: 100%;
}

.service-job-actions .dropdown-menu svg {
    margin-right: .4rem;
}

.service-empty-state {
    display: grid;
    min-height: 190px;
    padding: 1.5rem;
    place-items: center;
    align-content: center;
    border: 1px dashed var(--service-line);
    border-radius: 11px;
    color: var(--service-muted);
    text-align: center;
}

.service-empty-state > svg {
    width: 30px;
    height: 30px;
    margin-bottom: .5rem;
    color: var(--scbas-red-bright);
}

.service-empty-state h3 {
    margin: 0;
    color: var(--bs-body-color);
    font-size: 1.2rem;
}

.service-empty-state p {
    margin: .25rem 0 0;
}

.service-empty-state-compact {
    min-height: 130px;
}

.service-completed-panel {
    margin-top: 1.1rem;
    overflow: hidden;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel-raised);
}

.service-completed-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1rem;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.service-completed-panel > summary::-webkit-details-marker {
    display: none;
}

.service-completed-panel > summary > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.service-completed-panel[open] > summary {
    border-bottom: 1px solid var(--service-line);
}

.service-recommendation,
.service-inline-warning {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .65rem;
    border: 1px solid color-mix(in srgb, var(--service-amber) 35%, var(--service-line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--service-amber) 8%, transparent);
    color: var(--service-muted);
}

.service-recommendation > svg,
.service-inline-warning > svg {
    flex: 0 0 auto;
    margin-top: .1rem;
    color: var(--service-amber);
}

/* Job package */

.service-admin-context {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: -.25rem 0 .85rem;
    padding: .55rem .7rem;
    border: 1px solid color-mix(in srgb, var(--service-amber) 35%, var(--service-line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--service-amber) 7%, transparent);
    font-size: .75rem;
}

.service-admin-context > svg {
    color: var(--service-amber);
}

.service-admin-context strong,
.service-admin-context span {
    display: block;
}

.service-admin-context span {
    color: var(--service-muted);
}

.service-admin-context a {
    margin-left: auto;
}

.service-back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .5rem;
    color: var(--service-muted);
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
}

.service-back-link:hover {
    color: var(--scbas-red-bright);
}

.service-job-kicker {
    display: flex;
    gap: .35rem;
}

.service-job-nav {
    position: sticky;
    top: 86px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .2rem;
    margin: .9rem 0 1.2rem;
    padding: .42rem;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
    backdrop-filter: blur(14px);
}

.service-job-nav a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .65rem;
    border-radius: 7px;
    color: var(--service-muted);
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
}

.service-job-nav a:hover {
    background: var(--service-panel);
    color: var(--bs-body-color);
}

.service-job-nav a span {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--scbas-red-rgb), .12);
    color: var(--scbas-red-bright);
    font-size: .67rem;
}

.service-job-progress {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    margin-left: auto;
    padding: 0 .45rem;
}

.service-job-progress strong {
    font-family: var(--scbas-font-display);
    font-size: 1rem;
}

.service-job-progress span {
    color: var(--service-muted);
    font-size: .68rem;
}

.service-job-section {
    scroll-margin-top: 150px;
    margin-bottom: 1.4rem;
}

.service-preflight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: .75rem;
}

.service-info-card {
    padding: .85rem;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel-raised);
}

.service-info-card-primary {
    border-color: color-mix(in srgb, var(--scbas-red) 35%, var(--service-line));
}

.service-info-card-heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .65rem;
}

.service-info-card-heading span:not(.service-info-icon) {
    display: block;
    color: var(--service-muted);
    font-size: .68rem;
}

.service-info-card-heading h3 {
    margin: 0;
    font-size: 1.15rem;
}

.service-info-card address {
    margin: 0 0 .6rem;
    font-size: .85rem;
    font-style: normal;
}

.service-info-list {
    display: grid;
    gap: .35rem;
}

.service-info-list > span {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .35rem;
    border-top: 1px solid var(--service-line);
    color: var(--service-muted);
    font-size: .74rem;
}

.service-info-list strong {
    color: var(--bs-body-color);
    font-weight: 600;
}

.service-contact-list {
    display: grid;
    gap: .55rem;
}

.service-contact-list > div {
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--service-line);
}

.service-contact-list > div:last-child {
    padding-bottom: 0;
    border: 0;
}

.service-contact-list strong,
.service-contact-list span,
.service-contact-list small {
    display: block;
}

.service-contact-list span,
.service-contact-list small {
    color: var(--service-muted);
    font-size: .7rem;
}

.service-contact-list a {
    display: inline-block;
    margin-right: .45rem;
    font-size: .72rem;
}

.service-inline-actions {
    display: flex;
    gap: .35rem;
    margin-top: .45rem;
}

.service-inline-actions .btn {
    font-size: .68rem;
}

.service-scope-copy {
    display: grid;
    gap: .5rem;
}

.service-scope-copy strong {
    display: block;
    margin-bottom: .1rem;
    font-size: .72rem;
}

.service-scope-copy p {
    margin: 0;
    color: var(--service-muted);
    font-size: .76rem;
    line-height: 1.45;
}

.service-asset-readiness {
    margin-top: .75rem;
    padding: .8rem;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel);
}

.service-asset-readiness-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .55rem;
}

.service-asset-readiness-heading h3 {
    margin: 0;
    font-size: 1.15rem;
}

.service-asset-readiness-heading a,
.service-asset-flags a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    text-decoration: none;
}

.service-asset-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: .5rem;
}

.service-asset-strip > article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
    padding: .55rem .65rem;
    border: 1px solid var(--service-line);
    border-radius: 8px;
    background: var(--service-panel-raised);
}

.service-asset-strip strong,
.service-asset-strip span,
.service-asset-strip small {
    display: block;
}

.service-asset-strip strong {
    font-size: .8rem;
}

.service-asset-strip span,
.service-asset-strip small {
    overflow: hidden;
    color: var(--service-muted);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-asset-flags {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    flex-direction: column;
    gap: .35rem;
}

.service-asset-readiness-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .65rem;
}

.service-work-host {
    min-height: 130px;
}

.service-loading {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 130px;
    justify-content: center;
    border: 1px dashed var(--service-line);
    border-radius: 10px;
    color: var(--service-muted);
}

.service-start-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--scbas-red) 35%, var(--service-line));
    border-radius: 11px;
    background: var(--service-panel-raised);
}

.service-start-card h2,
.service-start-card h3,
.service-start-card p {
    margin: 0;
}

.service-start-card p {
    color: var(--service-muted);
    font-size: .78rem;
}

.service-start-card .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

.service-start-card-prominent {
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--scbas-red) 12%, transparent);
}

.service-equipment-worklist {
    display: grid;
    gap: .8rem;
}

.service-equipment-wizard-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.service-equipment-wizard-heading h3 {
    margin: .15rem 0 0;
    font-size: 1rem;
}

.service-equipment-wizard-count {
    color: var(--service-muted);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.service-equipment-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem;
}

.service-equipment-selector-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    min-width: 0;
    padding: .65rem;
    border: 1px solid var(--service-line);
    border-radius: 9px;
    background: var(--service-panel);
    color: var(--service-text);
    text-align: left;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.service-equipment-selector-item:hover,
.service-equipment-selector-item:focus-visible {
    border-color: color-mix(in srgb, var(--scbas-red) 55%, var(--service-line));
    background: var(--service-panel-raised);
}

.service-equipment-selector-item[aria-current="step"] {
    border-color: var(--scbas-red);
    background: color-mix(in srgb, var(--scbas-red) 9%, var(--service-panel-raised));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--scbas-red) 35%, transparent);
}

.service-equipment-selector-item.is-complete {
    border-left: 3px solid var(--service-green);
}

.service-equipment-selector-item.is-unable {
    border-left: 3px solid var(--service-red);
}

.service-equipment-selector-number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--service-amber) 15%, transparent);
    color: var(--service-amber);
    font-size: .72rem;
    font-weight: 800;
}

.service-equipment-selector-item.is-complete .service-equipment-selector-number {
    background: color-mix(in srgb, var(--service-green) 15%, transparent);
    color: var(--service-green);
}

.service-equipment-selector-copy,
.service-equipment-selector-copy strong,
.service-equipment-selector-copy small {
    display: block;
    min-width: 0;
}

.service-equipment-selector-copy strong {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-equipment-selector-copy small {
    overflow: hidden;
    margin-top: .1rem;
    color: var(--service-muted);
    font-size: .62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-equipment-selector-status {
    color: var(--service-muted);
    font-size: .62rem;
    font-weight: 700;
    white-space: nowrap;
}

.service-equipment-wizard-panels {
    min-width: 0;
}

.service-equipment-panel {
    overflow: clip;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel-raised);
}

.service-equipment-panel.is-complete {
    border-left: 3px solid var(--service-green);
}

.service-equipment-panel.is-unable {
    border-left: 3px solid var(--service-red);
}

.service-equipment-panel.is-active {
    border-left: 3px solid var(--service-amber);
}

.service-equipment-panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--service-line);
    background: var(--service-panel);
}

.service-equipment-panel-position > span,
.service-equipment-panel-position > strong,
.service-equipment-panel-position > small {
    display: block;
}

.service-equipment-panel-position > span {
    color: var(--scbas-red-bright);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.service-equipment-panel-position > strong {
    margin-top: .1rem;
    font-size: .98rem;
}

.service-equipment-panel-position > small {
    margin-top: .1rem;
    color: var(--service-muted);
    font-size: .68rem;
}

.service-equipment-panel-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
}

.service-equipment-status {
    color: var(--service-muted);
    font-size: .68rem;
    font-weight: 700;
}

.service-equipment-panel-body {
    padding: .75rem;
}

.service-equipment-panel-body .frm-equipment {
    padding: 0;
    border: 0;
}

.service-equipment-panel-body .frm-equipment > .row.pt-4 {
    padding-top: .25rem !important;
}

.service-equipment-panel-body .frm-equipment > br {
    display: none;
}

.service-equipment-panel-body .alternate-bg {
    border-radius: 4px;
}

.service-equipment-wizard-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    border-top: 1px solid var(--service-line);
    background: color-mix(in srgb, var(--service-panel-raised) 96%, transparent);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, .08);
    backdrop-filter: blur(8px);
}

.service-equipment-wizard-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
}

.service-equipment-wizard-actions .btn > span,
.service-equipment-wizard-actions .btn > span > small {
    display: block;
}

.service-equipment-wizard-actions .btn > span {
    line-height: 1.05;
    text-align: left;
}

.service-equipment-wizard-actions .btn > span > small {
    margin-top: .18rem;
    opacity: .72;
    font-size: .62rem;
    font-weight: 500;
}

.service-equipment-wizard-forward {
    display: flex;
    justify-content: flex-end;
}

.service-equipment-wizard-forward .btn {
    min-width: 220px;
    justify-content: center;
}

.service-closeout-panel {
    scroll-margin-top: 150px;
    margin-top: 1.3rem;
    padding-top: .25rem;
}

.service-closeout-form {
    overflow: hidden;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel-raised);
}

.service-completion-review {
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--service-line);
}

.service-completion-review > div {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.service-completion-review > div > svg {
    flex: 0 0 auto;
    margin-top: .1rem;
}

.service-completion-review strong,
.service-completion-review span {
    display: block;
}

.service-completion-review span {
    color: var(--service-muted);
    font-size: .7rem;
}

.service-completion-review.needs-attention {
    background: color-mix(in srgb, var(--service-amber) 8%, transparent);
}

.service-completion-review.needs-attention > div > svg {
    color: var(--service-amber);
}

.service-completion-review.is-ready {
    background: color-mix(in srgb, var(--service-green) 8%, transparent);
}

.service-completion-review.is-ready > div > svg {
    color: var(--service-green);
}

.service-completion-review ul {
    display: grid;
    gap: .3rem;
    margin: .55rem 0 0 1.55rem;
    padding: 0;
    list-style: none;
}

.service-completion-review li {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .7rem;
}

.service-completion-review li strong {
    color: var(--bs-body-color);
}

.service-unable-box {
    display: grid;
    gap: .35rem;
    padding: .7rem;
    border: 1px solid color-mix(in srgb, var(--service-red) 28%, var(--service-line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--service-red) 5%, transparent);
}

.service-unable-box label {
    font-size: .75rem;
    font-weight: 700;
}

.service-unable-box label span {
    display: block;
    color: var(--service-muted);
    font-size: .68rem;
    font-weight: 400;
}

.service-closeout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
}

.service-closeout-main {
    display: grid;
    gap: .8rem;
    padding: .9rem;
}

.service-closeout-summary {
    padding: .9rem;
    border-left: 1px solid var(--service-line);
    background: var(--service-panel);
}

.service-closeout-summary h3 {
    margin: 0 0 .7rem;
    font-size: 1.1rem;
}

.service-form-field > label {
    display: block;
    margin-bottom: .3rem;
    font-size: .75rem;
    font-weight: 700;
}

.service-form-field > label span {
    display: block;
    color: var(--service-muted);
    font-size: .68rem;
    font-weight: 400;
}

.service-followup-box,
.service-followup-resolution {
    display: grid;
    gap: .55rem;
    padding: .7rem;
    border: 1px solid color-mix(in srgb, var(--service-amber) 35%, var(--service-line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--service-amber) 7%, transparent);
}

.service-followup-resolution.is-resolved {
    border-color: color-mix(in srgb, var(--service-green) 35%, var(--service-line));
    background: color-mix(in srgb, var(--service-green) 7%, transparent);
}

.service-total-row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid var(--service-line);
    font-size: .75rem;
}

.service-closeout-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .9rem;
    border-top: 1px solid var(--service-line);
}

.service-closeout-actions > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

.service-closeout-actions .btn,
.service-complete-confirmation {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.service-complete-confirmation {
    color: var(--service-green);
    font-weight: 700;
}

.service-readonly-totals {
    display: flex;
    gap: .75rem;
}

.service-readonly-totals span {
    padding: .7rem;
    border: 1px solid var(--service-line);
    border-radius: 8px;
}

.service-readonly-totals strong {
    display: block;
}

.service-history-list {
    overflow: hidden;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel-raised);
}

.service-history-item {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) 20px;
    gap: .75rem;
    align-items: center;
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--service-line);
    color: inherit;
    text-decoration: none;
}

.service-history-item:last-child {
    border-bottom: 0;
}

.service-history-item:hover {
    background: var(--service-panel);
    color: inherit;
}

.service-history-date {
    color: var(--service-muted);
    font-size: .72rem;
}

.service-history-item strong,
.service-history-item span {
    display: block;
}

.service-history-item div > span {
    overflow: hidden;
    color: var(--service-muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Administrator customer workspace */

.customer-workspace-heading {
    align-items: flex-end;
}

.customer-snapshot-item {
    min-width: 0;
    padding: .7rem .8rem;
    border: 1px solid var(--service-line);
    border-radius: 9px;
    background: var(--service-panel-raised);
}

.customer-snapshot-item > span,
.customer-snapshot-item strong,
.customer-snapshot-item small {
    display: block;
}

.customer-snapshot-item > span {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--service-muted);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.customer-snapshot-item strong {
    margin-top: .28rem;
    overflow: hidden;
    font-family: var(--scbas-font-display);
    font-size: 1.15rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-snapshot-item small {
    color: var(--service-muted);
    font-size: .67rem;
}

.customer-snapshot-item.is-urgent {
    border-color: color-mix(in srgb, var(--service-red) 50%, var(--service-line));
}

.customer-snapshot-item.is-urgent strong,
.customer-snapshot-item.is-urgent > span {
    color: var(--service-red);
}

.customer-workspace-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: .9rem;
    align-items: start;
}

.customer-section-nav {
    position: sticky;
    top: 90px;
    display: grid;
    gap: .2rem;
    padding: .6rem;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel-raised);
}

.customer-section-nav > span {
    padding: .3rem .45rem .45rem;
    color: var(--service-muted);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.customer-section-nav a {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .48rem .5rem;
    border-radius: 6px;
    color: var(--service-muted);
    font-size: .74rem;
    font-weight: 650;
    text-decoration: none;
}

.customer-section-nav a:hover {
    background: var(--service-panel);
    color: var(--bs-body-color);
}

.customer-section-nav a span {
    margin-left: auto;
    font-size: .65rem;
}

.customer-workspace-content,
.customer-profile-form {
    display: grid;
    min-width: 0;
    gap: .8rem;
}

.customer-section-card {
    scroll-margin-top: 95px;
    padding: .85rem;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel-raised);
}

.customer-section-heading {
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--service-line);
}

.customer-section-heading > span {
    color: var(--service-muted);
}

.customer-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

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

.customer-field-span-2 {
    grid-column: span 2;
}

.customer-field-full {
    grid-column: 1 / -1;
}

.customer-service-groups {
    display: grid;
    gap: .75rem;
}

.customer-service-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.customer-service-group legend {
    margin-bottom: .45rem;
    color: var(--service-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.customer-service-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.customer-service-toggle {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: .55rem;
    align-items: center;
    min-height: 56px;
    padding: .65rem;
    border: 1px solid var(--service-line);
    border-radius: 8px;
    background: var(--service-panel);
    cursor: pointer;
}

.customer-service-toggle:hover,
.customer-service-toggle:has(input:focus-visible) {
    border-color: color-mix(in srgb, var(--scbas-red-bright) 55%, var(--service-line));
}

.customer-service-toggle:has(input:checked) {
    border-color: color-mix(in srgb, var(--scbas-red-bright) 55%, var(--service-line));
    background: color-mix(in srgb, var(--scbas-red) 8%, var(--service-panel));
}

.customer-service-toggle input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.customer-service-toggle-control {
    position: relative;
    inline-size: 34px;
    block-size: 20px;
    border-radius: 999px;
    background: var(--service-line);
    transition: background-color .16s ease;
}

.customer-service-toggle-control::after {
    position: absolute;
    top: 3px;
    left: 3px;
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    content: "";
    transition: transform .16s ease;
}

.customer-service-toggle input:checked + .customer-service-toggle-control {
    background: var(--scbas-red-bright);
}

.customer-service-toggle input:checked + .customer-service-toggle-control::after {
    transform: translateX(14px);
}

.customer-service-toggle-copy strong,
.customer-service-toggle-copy small {
    display: block;
}

.customer-service-toggle-copy strong {
    font-size: .78rem;
}

.customer-service-toggle-copy small {
    margin-top: .15rem;
    color: var(--service-muted);
    font-size: .66rem;
}

.customer-services-empty {
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .75rem;
    border: 1px dashed var(--service-line);
    border-radius: 8px;
    color: var(--service-muted);
}

.customer-services-empty strong,
.customer-services-empty span {
    display: block;
}

.customer-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.customer-plan-card {
    padding: .7rem;
    border: 1px solid var(--service-line);
    border-radius: 8px;
    background: var(--service-panel);
}

.customer-plan-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .65rem;
}

.customer-plan-card-title > svg {
    color: var(--scbas-red-bright);
}

.customer-plan-card-title span,
.customer-plan-card-title strong {
    display: block;
}

.customer-plan-card-title span {
    color: var(--service-muted);
    font-size: .65rem;
}

.customer-plan-card-title strong {
    font-size: .8rem;
}

.customer-save-bar {
    position: sticky;
    bottom: .75rem;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .75rem;
    border: 1px solid color-mix(in srgb, var(--scbas-red) 40%, var(--service-line));
    border-radius: 9px;
    background: color-mix(in srgb, var(--bs-body-bg) 94%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
    backdrop-filter: blur(14px);
}

.customer-save-bar > span,
.customer-save-bar .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.customer-save-bar > span {
    color: var(--service-muted);
    font-size: .7rem;
}

.customer-current-files {
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid var(--service-line);
}

.customer-current-files h3 {
    font-size: .9rem;
}

.customer-current-files > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .35rem;
}

.customer-current-files a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
}

.customer-section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    margin-bottom: .7rem;
}

.customer-section-toolbar > span {
    color: var(--service-muted);
    font-size: .72rem;
}

.customer-equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.customer-equipment-card {
    overflow: hidden;
    border: 1px solid var(--service-line);
    border-radius: 9px;
    background: var(--service-panel);
}

.customer-equipment-card-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem;
    border-bottom: 1px solid var(--service-line);
}

.customer-equipment-card-header > div:not(.service-info-icon) {
    min-width: 0;
}

.customer-equipment-card-header h3 {
    margin: 0;
    overflow: hidden;
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-equipment-card-header div > span {
    display: block;
    overflow: hidden;
    color: var(--service-muted);
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-equipment-card-header > .badge {
    margin-left: auto;
    white-space: nowrap;
}

.customer-equipment-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin: 0;
    padding: .65rem;
}

.customer-equipment-facts > div {
    min-width: 0;
}

.customer-equipment-facts dt,
.customer-equipment-facts dd {
    margin: 0;
}

.customer-equipment-facts dt {
    color: var(--service-muted);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.customer-equipment-facts dd {
    margin-top: .1rem;
    font-size: .74rem;
}

.customer-equipment-fact-full {
    grid-column: 1 / -1;
}

.customer-equipment-manuals {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .55rem .65rem;
    border-top: 1px solid var(--service-line);
    font-size: .68rem;
}

.customer-equipment-manuals strong,
.customer-equipment-manuals strong svg,
.customer-equipment-manuals > span,
.customer-equipment-manuals > span > a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.customer-equipment-manual-link {
    margin-left: auto;
}

.customer-equipment-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    padding: .55rem .65rem;
    border-top: 1px solid var(--service-line);
}

.customer-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.customer-contact-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: start;
    padding: .65rem;
    border: 1px solid var(--service-line);
    border-radius: 8px;
    background: var(--service-panel);
}

.customer-contact-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 9px;
    background: rgba(var(--scbas-red-rgb), .14);
    color: var(--scbas-red-bright);
    font-family: var(--scbas-font-display);
    font-weight: 800;
}

.customer-contact-main h3 {
    margin: 0;
    font-size: .9rem;
}

.customer-contact-main > span {
    color: var(--service-muted);
    font-size: .67rem;
}

.customer-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    margin-top: .3rem;
}

.customer-contact-links a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
}

.customer-contact-main p {
    margin: .3rem 0 0;
    color: var(--service-muted);
    font-size: .68rem;
}

.customer-contact-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.customer-history-list {
    display: grid;
    gap: .5rem;
}

.customer-history-item {
    display: grid;
    grid-template-columns: 16px 72px minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .65rem;
    border: 1px solid var(--service-line);
    border-radius: 8px;
    background: var(--service-panel);
}

.customer-history-marker {
    color: var(--service-amber);
}

.customer-history-item.is-complete .customer-history-marker {
    color: var(--service-green);
}

.customer-history-item.is-unable .customer-history-marker {
    color: var(--service-red);
}

.customer-history-date strong,
.customer-history-date span {
    display: block;
}

.customer-history-date strong {
    font-family: var(--scbas-font-display);
    font-size: 1rem;
}

.customer-history-date span {
    color: var(--service-muted);
    font-size: .66rem;
}

.customer-history-main h3 {
    margin: .25rem 0 0;
    font-size: .82rem;
}

.customer-history-main p {
    margin: .25rem 0 0;
    color: var(--service-muted);
    font-size: .7rem;
}

.customer-history-next {
    margin-top: .35rem;
    padding: .35rem .45rem;
    border-left: 2px solid var(--service-amber);
    background: color-mix(in srgb, var(--service-amber) 7%, transparent);
    font-size: .68rem;
}

.customer-history-next strong {
    margin-right: .25rem;
}

.customer-history-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .35rem;
    color: var(--service-muted);
    font-size: .64rem;
}

.customer-history-metrics span {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
}

.customer-history-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .3rem;
}

@media (max-width: 1199.98px) {
    .service-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-metrics,
    .customer-snapshot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .service-preflight-grid > :last-child {
        grid-column: 1 / -1;
    }

    .customer-equipment-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .service-job-card {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .service-job-date {
        grid-row: 1 / span 2;
    }

    /* Below the desktop breakpoint the rail wraps under the card body and
       becomes a horizontal control strip. The assignment block keeps its own
       column so it does not stretch to the width of the row. */
    .service-job-actions {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: auto;
        padding: 0 1rem .8rem 0;
    }

    .service-job-assign {
        flex-direction: row;
        align-items: center;
        gap: .45rem;
        min-width: 15rem;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

    .service-job-assign .service-assign-select {
        width: auto;
        min-width: 11rem;
    }

    .customer-workspace-layout {
        grid-template-columns: 1fr;
    }

    .customer-section-nav {
        position: static;
        display: flex;
        overflow-x: auto;
    }

    .customer-section-nav > span {
        display: none;
    }

    .customer-section-nav a {
        flex: 0 0 auto;
    }

    .customer-plan-grid {
        grid-template-columns: 1fr;
    }

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

    .service-closeout-summary {
        border-top: 1px solid var(--service-line);
        border-left: 0;
    }
}

@media (max-width: 767.98px) {
    .service-page-header,
    .service-job-heading,
    .customer-workspace-heading,
    .service-section-heading,
    .customer-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-section-heading > span,
    .customer-section-heading > span {
        text-align: left;
    }

    .service-bulk-actions {
        justify-content: flex-start;
    }

    .service-page-actions {
        width: 100%;
    }

    .service-page-actions .btn {
        flex: 1 1 auto;
    }

    .service-filter-bar,
    .service-preflight-grid,
    .customer-form-grid,
    .customer-form-grid-2,
    .customer-service-toggle-grid,
    .customer-contact-grid {
        grid-template-columns: 1fr;
    }

    .service-preflight-grid > :last-child,
    .customer-field-span-2,
    .customer-field-full {
        grid-column: auto;
    }

    .service-job-nav {
        top: 72px;
        overflow-x: auto;
    }

    .service-job-nav a {
        flex: 0 0 auto;
    }

    .service-job-progress {
        display: none;
    }

    .service-equipment-selector {
        display: flex;
        overflow-x: auto;
        padding-bottom: .2rem;
    }

    .service-equipment-selector-item {
        flex: 0 0 min(82vw, 290px);
    }

    .service-equipment-panel-header,
    .service-equipment-wizard-heading {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .service-equipment-wizard-heading {
        flex-direction: column;
    }

    .service-equipment-panel-tools {
        justify-content: space-between;
    }

    .service-equipment-wizard-actions {
        flex-direction: column-reverse;
    }

    .service-equipment-wizard-actions > .btn,
    .service-equipment-wizard-forward,
    .service-equipment-wizard-forward .btn {
        width: 100%;
    }

    .service-equipment-wizard-actions .btn {
        justify-content: center;
    }

    .customer-history-item {
        grid-template-columns: 16px 60px minmax(0, 1fr);
    }

    .customer-history-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .service-metrics,
    .customer-snapshot {
        grid-template-columns: 1fr 1fr;
        gap: .45rem;
    }

    .service-metric {
        min-height: 60px;
        padding: .55rem;
    }

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

    .service-job-date {
        grid-row: auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: .35rem;
        min-height: 0;
        padding: .5rem .7rem;
        border-right: 0;
        border-bottom: 1px solid var(--service-line);
        text-align: left;
    }

    .service-job-date-label {
        margin: 0;
    }

    .service-job-date strong {
        font-size: .95rem;
    }

    .service-job-main {
        padding: .7rem;
    }

    .service-job-title-row {
        flex-direction: column;
    }

    .service-job-actions {
        grid-column: auto;
        padding: 0 .7rem .7rem;
    }

    .service-job-actions > .btn {
        flex: 1;
    }

    /* On a phone the rail stacks again: a technician or coordinator working
       one-handed should not have to reach across a row of small controls. */
    .service-job-assign {
        flex: 1 0 100%;
        min-width: 0;
        padding-bottom: .5rem;
        margin-bottom: .1rem;
        border-bottom: 1px solid var(--service-line);
    }

    .service-job-assign .service-assign-select {
        width: 100%;
        min-width: 0;
    }

    .service-start-card,
    .service-closeout-actions,
    .service-admin-context {
        align-items: stretch;
        flex-direction: column;
    }

    .service-start-card .btn,
    .service-admin-context a {
        margin-left: 0;
    }

    .service-closeout-actions > div {
        align-items: stretch;
        flex-direction: column;
    }

    .service-closeout-actions .btn {
        justify-content: center;
    }

    .customer-equipment-card-header {
        flex-wrap: wrap;
    }

    .customer-equipment-card-header > .badge {
        margin-left: 45px;
    }

    .customer-contact-card {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .customer-contact-actions {
        grid-column: 2;
    }

    .customer-save-bar {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ==========================================================================
   Customer directory

   The list a coordinator opens to answer "who needs something from us?".
   It reuses the service workspace shell (header, metric tiles, empty states)
   so the directory, the customer account page, and the technician queue read
   as one product. Everything here is expressed with the shared --service-*
   and --scbas-* tokens; there are no literal colors, so both themes and any
   future brand change follow automatically.
   ========================================================================== */

.customer-directory {
    max-width: 1680px;
    margin: 0 auto;
}

/* ---- Summary tiles double as one-click service-standing filters ---------- */
.customer-directory-metric {
    appearance: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.customer-directory-metric:hover {
    border-color: color-mix(in srgb, var(--scbas-red) 45%, var(--service-line));
    transform: translateY(-1px);
}

.customer-directory-metric.is-selected {
    border-color: var(--scbas-red);
    box-shadow: 0 0 0 1px var(--scbas-red) inset;
}

.customer-directory-metric:focus-visible {
    outline: 2px solid var(--scbas-red-bright);
    outline-offset: 2px;
}

/* ---- Active / Inactive tabs --------------------------------------------- */
.customer-directory-tabbar {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--service-line);
}

.customer-directory-tabbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--service-muted);
    font-family: var(--scbas-font-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.customer-directory-tabbar .nav-link:hover {
    border-bottom-color: color-mix(in srgb, var(--scbas-red) 40%, transparent);
    color: var(--bs-emphasis-color);
}

.customer-directory-tabbar .nav-link.active {
    border-bottom-color: var(--scbas-red);
    background: none;
    color: var(--bs-emphasis-color);
}

.customer-directory-tabbar .badge {
    background: var(--service-panel) !important;
    color: var(--service-muted);
    font-weight: 700;
}

.customer-directory-tabbar .nav-link.active .badge {
    background: rgba(var(--scbas-red-rgb), .14) !important;
    color: var(--scbas-red-bright);
}

/* ---- Toolbar: tenant-wide search on the left, list filters on the right -- */
.customer-directory-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.customer-directory-search {
    display: flex;
    align-items: center;
    flex: 1 1 340px;
    gap: .75rem;
    min-width: 0;
}

.customer-directory-search .input-group {
    flex: 1 1 auto;
    max-width: 460px;
}

.customer-directory-clear {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    color: var(--service-muted);
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
}

.customer-directory-clear:hover {
    color: var(--scbas-red-bright);
}

.customer-directory-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.customer-directory-filter {
    width: min(320px, 70vw);
}

.customer-directory-zone {
    width: auto;
    min-width: 170px;
}

.customer-directory-toolbar .input-group-text {
    border-right: 0;
    background: var(--service-panel);
    color: var(--service-muted);
}

.customer-directory-toolbar .input-group .form-control {
    border-left: 0;
}

.customer-directory-count {
    color: var(--service-muted);
    font-size: .8rem;
    white-space: nowrap;
}

/* ---- The table ---------------------------------------------------------- */
.customer-directory-panel {
    overflow: hidden;
    border: 1px solid var(--service-line);
    border-radius: 11px;
    background: var(--service-panel-raised);
}

.customer-directory-panel .table-responsive {
    max-height: min(70vh, 780px);
}

.customer-directory-table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
}

.customer-directory-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--service-line);
    background: var(--service-panel);
    color: var(--service-muted);
    font-family: var(--scbas-font-display);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.customer-directory-sort {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.customer-directory-sort svg {
    width: .8rem;
    height: .8rem;
    opacity: .45;
    transition: transform .15s ease, opacity .15s ease;
}

.customer-directory-sort:hover,
.customer-directory-sort.is-sorted {
    color: var(--scbas-red-bright);
}

.customer-directory-sort.is-sorted svg {
    opacity: 1;
}

.customer-directory-sort.is-descending svg {
    transform: rotate(180deg);
}

.customer-directory-sort:focus-visible {
    outline: 2px solid var(--scbas-red-bright);
    outline-offset: 3px;
}

.customer-directory-table tbody td,
.customer-directory-table tbody th {
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--service-line);
    background: transparent;
    font-weight: 400;
    vertical-align: middle;
}

.customer-directory-row {
    transition: background-color .12s ease;
}

.customer-directory-row:hover td,
.customer-directory-row:hover th {
    background: var(--scbas-stripe-bg);
}

.customer-directory-table tbody tr:last-child td,
.customer-directory-table tbody tr:last-child th {
    border-bottom: 0;
}

/* A hairline urgency rail on the row itself: risk is legible while scrolling
   even when the standing column has scrolled out of view horizontally. */
.customer-directory-row > th:first-child {
    border-left: 3px solid transparent;
}

.customer-directory-row.is-overdue > th:first-child {
    border-left-color: var(--service-red);
}

.customer-directory-row.is-due-soon > th:first-child {
    border-left-color: var(--service-amber);
}

.customer-directory-row.is-scheduled > th:first-child {
    border-left-color: color-mix(in srgb, var(--service-green) 60%, transparent);
}

.customer-directory-name a {
    color: var(--bs-emphasis-color);
    font-family: var(--scbas-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
}

.customer-directory-name a:hover {
    color: var(--scbas-red-bright);
}

.customer-directory-subline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .15rem;
    color: var(--service-muted);
    font-size: .76rem;
}

.customer-directory-id {
    font-family: var(--bs-font-monospace);
}

.customer-directory-zone-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .05rem .35rem;
    border: 1px solid var(--service-line);
    border-radius: 5px;
    color: var(--service-muted);
    font-size: .7rem;
    font-weight: 600;
    text-decoration: none;
}

.customer-directory-zone-chip:hover {
    border-color: var(--scbas-red);
    color: var(--scbas-red-bright);
}

.customer-directory-zone-chip svg {
    width: .72rem;
    height: .72rem;
}

.customer-directory-location,
.customer-directory-notes {
    max-width: 320px;
    font-size: .84rem;
}

.customer-directory-notes span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.customer-directory-contact {
    font-size: .84rem;
}

.customer-directory-contact a {
    display: block;
    text-decoration: none;
}

.customer-directory-email {
    color: var(--service-muted);
    font-size: .76rem;
    overflow-wrap: anywhere;
}

.customer-directory-date {
    font-size: .84rem;
    white-space: nowrap;
}

.customer-directory-blank {
    color: var(--service-muted);
    font-size: .78rem;
    font-style: italic;
}

.customer-directory-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .16rem .45rem;
    border-radius: 5px;
    background: var(--service-panel);
    color: var(--service-muted);
    font-size: .72rem;
    font-weight: 750;
    white-space: nowrap;
}

.customer-directory-badge svg {
    width: .82rem;
    height: .82rem;
}

.customer-directory-badge.is-overdue {
    background: color-mix(in srgb, var(--service-red) 15%, transparent);
    color: var(--service-red);
}

.customer-directory-badge.is-due-soon {
    background: color-mix(in srgb, var(--service-amber) 15%, transparent);
    color: var(--service-amber);
}

.customer-directory-badge.is-scheduled {
    background: color-mix(in srgb, var(--service-green) 15%, transparent);
    color: var(--service-green);
}

.customer-directory-actions-header {
    width: 130px;
}

.customer-directory-actions {
    text-align: right;
    white-space: nowrap;
}

.customer-directory-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.customer-directory-actions .btn-icon-delete {
    padding: .25rem .4rem;
    color: var(--service-muted);
}

.customer-directory-actions .btn-icon-delete:hover {
    color: var(--service-red);
}

/* The instant filter hides rows rather than removing them, so the panel border
   should collapse instead of framing an empty box. */
.customer-directory-table.is-empty {
    display: none;
}

@media (max-width: 991.98px) {
    .customer-directory-location,
    .customer-directory-notes {
        max-width: 220px;
    }

    .customer-directory-panel .table-responsive {
        max-height: none;
    }

    .customer-directory-table thead th {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .customer-directory-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-directory-search,
    .customer-directory-filter,
    .customer-directory-zone {
        width: 100%;
        max-width: none;
    }

    .customer-directory-search .input-group {
        max-width: none;
    }

    .customer-directory-tabbar .nav-link {
        padding-inline: .7rem;
    }
}

/* =========================================================================
   Scheduling recommendations — trip planning board
   -------------------------------------------------------------------------
   Horizon review, existing-visit consolidation, and add-to-trip planning share
   one customer-first workspace while keeping each confirmation explicit.
   ========================================================================= */
.scheduling-board {
    --scheduling-rail: var(--scbas-red);
}

.scheduling-note {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--service-line);
    border-left: 3px solid var(--service-green);
    border-radius: 10px;
    background: var(--service-panel);
}

.scheduling-note > svg {
    flex: 0 0 auto;
    margin-top: .15rem;
    color: var(--service-green);
}

.scheduling-note h2 {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
}

.scheduling-note p {
    margin: .2rem 0 0;
    color: var(--service-muted);
    font-size: .86rem;
}

/* ---- Date toolbar ------------------------------------------------------- */
.scheduling-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .6rem;
    padding: .85rem;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel);
}

.scheduling-date-field label {
    display: block;
    margin-bottom: .3rem;
    color: var(--service-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.scheduling-date-field .form-control,
.scheduling-date-field .form-select {
    min-width: 190px;
    min-height: 44px;
}

/* 44px minimum on every control, per the ADM-25 touch-target precedent. */
.scheduling-toolbar .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.scheduling-step {
    width: 44px;
    justify-content: center;
    padding-inline: 0;
}

.scheduling-toolbar-summary {
    flex: 1 1 220px;
    margin: 0 0 .25rem;
    text-align: right;
}

.scheduling-toolbar-summary strong {
    display: block;
    font-family: var(--scbas-font-display);
    font-size: 1rem;
}

.scheduling-toolbar-summary span {
    color: var(--service-muted);
    font-size: .8rem;
}

.scheduling-confidence-note {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin: .75rem 0 0;
    color: var(--service-muted);
    font-size: .84rem;
}

.scheduling-confidence-note > svg {
    flex: 0 0 auto;
    margin-top: .15rem;
    color: var(--service-amber);
}

/* ---- Existing-visit consolidation -------------------------------------- */
.scheduling-consolidations {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--service-line);
    border-radius: 11px;
    background: var(--service-panel);
}

.scheduling-section-heading,
.scheduling-consolidation-card > header,
.scheduling-consolidation-card > footer,
.scheduling-consolidation-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}

.scheduling-section-heading h2,
.scheduling-consolidation-card h3 {
    margin: .1rem 0 0;
}

.scheduling-section-heading p,
.scheduling-consolidation-card header p {
    max-width: 760px;
    margin: .25rem 0 0;
    color: var(--service-muted);
    font-size: .84rem;
}

.scheduling-consolidation-card {
    margin-top: .8rem;
    overflow: hidden;
    border: 1px solid var(--service-line);
    border-left: 3px solid var(--service-green);
    border-radius: 10px;
    background: var(--service-panel-raised);
}

.scheduling-consolidation-card > header,
.scheduling-consolidation-controls,
.scheduling-consolidation-card > footer {
    padding: .8rem .9rem;
}

.scheduling-consolidation-controls {
    border-block: 1px solid var(--service-line);
    background: var(--service-panel);
}

.scheduling-consolidation-controls .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    margin: 0;
}

.scheduling-consolidation-controls .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
}

.scheduling-consolidation-controls .form-label {
    display: block;
    margin-bottom: .25rem;
    color: var(--service-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.scheduling-consolidation-controls .form-control {
    min-width: 230px;
    min-height: 44px;
}

.scheduling-notify-toggle {
    max-width: 270px;
}

.scheduling-contact-ready,
.scheduling-contact-warning {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.scheduling-contact-ready {
    color: var(--service-green) !important;
}

.scheduling-contact-warning {
    color: var(--service-amber) !important;
    font-weight: 700;
}

.scheduling-contact-ready svg,
.scheduling-contact-warning svg {
    width: .9rem;
    height: .9rem;
    flex: 0 0 auto;
}

.scheduling-consolidation-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.scheduling-consolidation-list li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    min-height: 64px;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--service-line);
}

.scheduling-consolidation-list .form-check-input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem;
}

.scheduling-consolidation-list label {
    display: grid;
    gap: .1rem;
    cursor: pointer;
}

.scheduling-consolidation-list span,
.scheduling-consolidation-list small {
    color: var(--service-muted);
    font-size: .78rem;
}

.scheduling-consolidation-card > footer p {
    margin: 0;
    color: var(--service-muted);
    font-size: .85rem;
}

.scheduling-consolidation-card > footer .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
}

.scheduling-day-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 -.55rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--service-line);
}

.scheduling-day-heading h2 {
    margin: 0;
    font-size: 1.15rem;
}

.scheduling-day-heading span {
    color: var(--service-muted);
    font-size: .78rem;
}

/* ---- Trip card ---------------------------------------------------------- */
.scheduling-trip {
    margin-top: 1.25rem;
    /* clip preserves the rounded card without becoming a non-scrolling
       overflow ancestor that would disable the sticky selection bar. */
    overflow: clip;
    border: 1px solid var(--service-line);
    border-left: 3px solid var(--scheduling-rail);
    border-radius: 11px;
    background: var(--service-panel-raised);
}

.scheduling-trip-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--service-line);
    background: var(--service-panel);
}

.scheduling-trip-header h2 {
    margin: .15rem 0 0;
    font-size: 1.3rem;
    font-weight: 750;
}

.scheduling-trip-header h2 a {
    color: inherit;
    text-decoration: none;
}

.scheduling-trip-header h2 a:hover {
    color: var(--scbas-red-bright);
    text-decoration: underline;
}

.scheduling-trip-address {
    margin: .25rem 0 0;
    color: var(--service-muted);
    font-size: .85rem;
}

.scheduling-trip-scope {
    margin-top: .45rem;
}

.scheduling-trip-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    min-width: 220px;
}

.scheduling-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border: 1px solid var(--service-line);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.scheduling-tag.is-repair {
    border-color: #f0c84b;
    background: #ffe69c;
    color: #5c4300;
}

/* Capacity is a real filter in the recommendation engine, so it is rendered as
   a meter rather than a bare hour count. */
.scheduling-capacity {
    width: 100%;
    max-width: 260px;
}

.scheduling-capacity-label {
    color: var(--service-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.scheduling-capacity-label strong {
    display: block;
    margin-top: .1rem;
    color: var(--bs-body-color);
    font-size: .85rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.scheduling-capacity-track {
    height: 8px;
    margin-top: .35rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--service-line);
}

.scheduling-capacity-track > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--service-green);
}

/* ---- Grouped opportunity list ------------------------------------------- */
.scheduling-trip-body {
    padding: 1rem 1.1rem 1.1rem;
}

.scheduling-group + .scheduling-group {
    margin-top: 1.25rem;
}

.scheduling-group-heading {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .6rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scheduling-group-count {
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--service-line);
    font-size: .72rem;
    letter-spacing: 0;
}

.scheduling-group-order {
    margin-left: auto;
    color: var(--service-muted);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

.scheduling-group-empty {
    margin: 0;
    padding: .7rem .85rem;
    border: 1px dashed var(--service-line);
    border-radius: 9px;
    color: var(--service-muted);
    font-size: .85rem;
}

.scheduling-list {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.scheduling-item {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .8rem .9rem;
    border: 1px solid var(--service-line);
    border-left: 3px solid transparent;
    border-radius: 10px;
    background: var(--service-panel);
}

/* Urgency is carried by the chip's words as well as this rail, so the signal
   never depends on colour alone. */
.scheduling-item.is-overdue {
    border-left-color: var(--service-red);
}

.scheduling-item-select {
    padding-top: .15rem;
}

.scheduling-item-select .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
}

.scheduling-item-select .form-check-input:focus-visible {
    outline: 2px solid var(--scbas-red-bright);
    outline-offset: 2px;
}

.scheduling-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.scheduling-item-title {
    display: block;
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
}

.scheduling-item-subline {
    margin: .15rem 0 0;
    color: var(--service-muted);
    font-size: .84rem;
}

.scheduling-item-subline a {
    color: var(--service-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.scheduling-item-subline a:hover {
    color: var(--scbas-red-bright);
}

.scheduling-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}

.scheduling-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    border: 1px solid var(--service-line);
    border-radius: 999px;
    color: var(--service-muted);
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

.scheduling-chip.is-overdue {
    border-color: color-mix(in srgb, var(--service-red) 55%, transparent);
    background: color-mix(in srgb, var(--service-red) 14%, transparent);
    color: var(--service-red);
}

.scheduling-chip.is-today {
    border-color: color-mix(in srgb, var(--service-amber) 55%, transparent);
    background: color-mix(in srgb, var(--service-amber) 14%, transparent);
    color: var(--service-amber);
}

.scheduling-chip.is-estimated {
    border-style: dashed;
}

.scheduling-why {
    margin-top: .5rem;
}

.scheduling-why > summary {
    color: var(--service-muted);
    cursor: pointer;
    font-size: .8rem;
}

.scheduling-why > summary:focus-visible {
    outline: 2px solid var(--scbas-red-bright);
    outline-offset: 2px;
}

.scheduling-why p {
    margin: .35rem 0 0;
    color: var(--service-muted);
    font-size: .82rem;
}

.scheduling-why-meta {
    font-style: italic;
}

.scheduling-item-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: .3rem;
    min-width: 184px;
}

.scheduling-row-action {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .55rem .65rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--service-muted);
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.scheduling-row-action:hover {
    border-color: var(--service-line);
    background: var(--service-panel-raised);
    color: var(--bs-body-color);
}

.scheduling-row-action:focus-visible {
    outline: 2px solid var(--scbas-red-bright);
    outline-offset: 2px;
}

.scheduling-defer > summary {
    list-style: none;
}

.scheduling-defer > summary::-webkit-details-marker {
    display: none;
}

.scheduling-row-chevron {
    margin-left: auto;
    transition: transform 160ms ease;
}

.scheduling-defer[open] .scheduling-row-chevron {
    transform: rotate(180deg);
}

.scheduling-defer-controls {
    margin-top: .25rem;
    padding: .65rem;
    border: 1px solid var(--service-line);
    border-radius: 8px;
    background: var(--service-panel-raised);
}

.scheduling-defer-controls > label {
    display: block;
    margin-bottom: .4rem;
    color: var(--service-muted);
    font-size: .72rem;
    font-weight: 700;
}

.scheduling-defer-controls > div {
    display: grid;
    gap: .4rem;
}

.scheduling-defer-controls .form-select,
.scheduling-defer-controls .btn {
    width: 100%;
    min-height: 44px;
}

.scheduling-hidden-form {
    display: none;
}

/* ---- Sticky review-and-confirm bar -------------------------------------- */
.scheduling-commit {
    position: sticky;
    top: .75rem;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 1.1rem;
    padding: .75rem .85rem;
    border: 1px solid color-mix(in srgb, var(--scbas-red) 48%, var(--service-line));
    border-radius: 10px;
    background: var(--service-panel-raised);
    box-shadow: 0 10px 28px rgb(0 0 0 / 28%);
}

.scheduling-commit-eyebrow {
    display: block;
    margin-bottom: .12rem;
    color: var(--scbas-red-bright);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scheduling-commit-summary {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
}

.scheduling-commit .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
}

.scheduling-commit .btn[data-over-capacity] {
    border-color: var(--service-red);
}

.scheduling-exclusions {
    margin: .5rem 0 0;
    padding-left: 1.1rem;
    text-align: left;
    font-size: .85rem;
}

.scheduling-exclusions li + li {
    margin-top: .2rem;
}

.scheduling-dismissed,
.scheduling-warnings {
    margin-top: 1rem;
    padding: .7rem .85rem;
    border: 1px solid var(--service-line);
    border-radius: 10px;
    background: var(--service-panel);
}

.scheduling-dismissed > summary,
.scheduling-warnings > summary {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--service-muted);
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
}

.scheduling-dismissed > summary:focus-visible,
.scheduling-warnings > summary:focus-visible {
    outline: 2px solid var(--scbas-red-bright);
    outline-offset: 2px;
}

.scheduling-warnings ul {
    margin: .6rem 0 0;
    padding-left: 1.1rem;
    color: var(--service-muted);
    font-size: .84rem;
}

.scheduling-list.is-dismissed {
    margin-top: .6rem;
    opacity: .85;
}

@media (max-width: 991.98px) {
    .scheduling-toolbar-summary {
        flex-basis: 100%;
        text-align: left;
    }

    .scheduling-trip-meta {
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .scheduling-item {
        flex-wrap: wrap;
    }

    .scheduling-item-actions {
        width: 100%;
        min-width: 0;
    }

    /* 8px minimum spacing between adjacent touch targets. */
    .scheduling-row-action,
    .scheduling-defer-controls .btn,
    .scheduling-defer-controls .form-select {
        min-height: 44px;
    }

    .scheduling-commit {
        flex-direction: column;
        align-items: stretch;
        top: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scheduling-row-chevron {
        transition: none;
    }
}

/* ==========================================================================
   Sidebar filter and group labels

   Thirty-odd destinations is a lot to hold in your head however they are
   grouped, so the sidebar gets a filter above the nav. It is deliberately
   quiet: the sidebar is chrome, and a loud search field there would compete
   with the topbar's global search, which does a different job (that one
   searches customers and products; this one searches the menu).
   ========================================================================== */
.sidebar-filter {
    position: relative;
    display: flex;
    align-items: center;
    margin: .75rem .9rem .5rem;
}

.sidebar-filter__icon {
    position: absolute;
    left: .6rem;
    width: 15px;
    height: 15px;
    color: rgba(255, 255, 255, .38);
    pointer-events: none;
}

.sidebar-filter__input {
    width: 100%;
    /* 44px keeps this usable on a tablet, where the sidebar is also reachable. */
    min-height: 44px;
    padding: .35rem .5rem .35rem 2rem;
    border: 1px solid var(--scbas-ink-line-2);
    border-radius: 7px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-family: var(--scbas-font-body);
    font-size: .85rem;
    line-height: 1.3;
}

.sidebar-filter__input::placeholder {
    color: rgba(255, 255, 255, .38);
}

.sidebar-filter__input:focus {
    border-color: var(--scbas-red);
    background: rgba(255, 255, 255, .07);
    outline: 2px solid rgba(var(--scbas-red-rgb), .35);
    outline-offset: 1px;
}

/* Chrome renders its own clear affordance on type=search; ours is the one
   that also resets the filtered nav, so the native one has to go. */
.sidebar-filter__input::-webkit-search-cancel-button {
    display: none;
}

.sidebar-filter__clear {
    position: absolute;
    right: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
}

.sidebar-filter__clear:hover,
.sidebar-filter__clear:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.sidebar-filter__clear i {
    width: 15px;
    height: 15px;
}

/* While filtering, the results are a flat list of destinations, so the bucket
   toggles read as headings rather than things to click open and shut. */
.sidebar-filter.is-filtering ~ .sidebar-nav .sidebar-link.collapsed::after,
.sidebar-filter.is-filtering ~ .sidebar-nav [data-bs-toggle="collapse"]::after {
    opacity: .25;
}

/* Group labels inside a bucket. Customers and Sales are one bucket now; these
   keep the two groups legible without charging a click to cross between them.
   Presentational only — aria-hidden in the markup, since the destinations
   underneath already carry their own accessible names. */
.sidebar-subheader {
    padding: .85rem 1.6rem .3rem;
    color: rgba(255, 255, 255, .34);
    font-family: var(--scbas-font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.sidebar-dropdown .sidebar-subheader:first-child {
    padding-top: .35rem;
}

/* ==========================================================================
   Technician preview banner

   Only shown when a preview has been opened standalone in its own tab. Inside
   the Technician View device frame the bezel carries the label instead, so the
   framed layout stays pixel-accurate.
   ========================================================================== */
.technician-preview-banner {
    position: sticky;
    top: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem;
    background: var(--scbas-violet-deep);
    color: #fff;
    font-size: .85rem;
}

.technician-preview-banner__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

.technician-preview-banner__label {
    flex: 1 1 auto;
    min-width: 0;
}

.technician-preview-banner__exit {
    flex: 0 0 auto;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 .65rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}

.technician-preview-banner__exit:hover,
.technician-preview-banner__exit:focus-visible {
    background: rgba(255, 255, 255, .28);
    color: #fff;
}

/* ==========================================================================
   Technician View

   An administrator watching the field workspace as a named technician sees it.
   The frame is a real iframe at a real device width so the real breakpoints
   fire; everything here is the chrome around it.
   ========================================================================== */
.technician-view__controls {
    align-items: end;
}

.technician-view__segmented {
    display: flex;
    gap: .4rem;
}

.technician-view__segment {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: .5rem;
    /* Matches the 44px touch target the rest of the service surface uses. */
    min-height: 44px;
    padding: .4rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.technician-view__segment input {
    /* Kept in the accessibility tree and focusable — only visually replaced by
       the segment itself, which is the actual target. */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.technician-view__segment i {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
}

.technician-view__segment span {
    display: flex;
    flex-direction: column;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.2;
}

.technician-view__segment small {
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 400;
    /* The dimensions are the point of this control, so they are stated rather
       than left to be inferred from the word "landscape". */
    font-variant-numeric: tabular-nums;
}

.technician-view__segment.is-selected {
    border-color: var(--scbas-red);
    background: rgba(var(--scbas-red-rgb), .08);
}

.technician-view__segment.is-selected i {
    color: var(--scbas-red);
}

.technician-view__segment:has(input:focus-visible) {
    outline: 2px solid rgba(var(--scbas-red-rgb), .5);
    outline-offset: 2px;
}

.technician-view__training {
    padding-top: .35rem;
}

.technician-view__training .form-check-input {
    width: 2.4em;
    height: 1.25em;
    margin-top: .15em;
    cursor: pointer;
}

.technician-view__training .form-check-input:checked {
    background-color: var(--scbas-violet);
    border-color: var(--scbas-violet);
}

.technician-view__training .form-check-label {
    display: flex;
    flex-direction: column;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
}

.technician-view__training .form-check-label small {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

/* Training mode uses the support violet rather than brand red: red means
   "primary action on this screen", and a mode indicator is not that. It is the
   same reasoning that keeps the feedback widget violet. */
.technician-view__training-notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: .85rem 1.1rem;
    border: 1px solid rgba(var(--scbas-violet-rgb), .45);
    border-left: 3px solid var(--scbas-violet);
    border-radius: 8px;
    background: rgba(var(--scbas-violet-rgb), .09);
}

.technician-view__training-notice i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: .1rem;
    color: var(--scbas-violet-bright);
}

.technician-view__training-notice strong {
    display: block;
    margin-bottom: .15rem;
}

.technician-view__training-notice span {
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

.technician-view__empty {
    margin-top: 1rem;
}

.technician-view__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* The frame can exceed the content column at portrait height; letting the
       stage scroll horizontally is better than squashing the frame, because a
       squashed frame is no longer an honest preview. */
    overflow-x: auto;
    padding-bottom: .5rem;
}

.technician-view__device {
    width: fit-content;
    margin: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-tertiary-bg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.technician-view__bezel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-secondary-bg);
    font-size: .8rem;
}

.technician-view__bezel-primary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
}

.technician-view__bezel-primary i {
    width: 16px;
    height: 16px;
    color: var(--scbas-red);
}

.technician-view__bezel-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.technician-view__bezel-badge {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--scbas-violet);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.technician-view__screen {
    width: var(--frame-width);
    height: var(--frame-height);
    max-width: 100%;
    background: var(--scbas-ink);
}

.technician-view__screen iframe {
    display: block;
    width: var(--frame-width);
    height: var(--frame-height);
    border: 0;
}

.technician-view__note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    max-width: 62ch;
    margin: 1rem auto 0;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    text-align: left;
}

.technician-view__note i {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: .15rem;
}

.technician-view__note strong {
    color: var(--bs-body-color);
}

@media (max-width: 991.98px) {
    /* Below the desktop breakpoint the device frame is wider than the content
       column. The stage already scrolls; this keeps the two settings that
       change what is being framed from wrapping awkwardly above it. */
    .technician-view__segmented {
        flex-wrap: wrap;
    }

    .technician-view__segment {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .technician-view__segment {
        transition: none;
    }
}

/* ==========================================================================
   Spec Generation

   A long wizard used many times a day, so the priorities are: always know where
   you are, never lose work, and never wait for something that could have been
   shown already. Density is deliberately tighter than the marketing surfaces —
   this is a tool, and an operator assembling a forty-page package should see as
   much of it at once as fits.
   ========================================================================== */
.spec-workspace {
    --spec-gap: 1.25rem;
}

.spec-header .service-eyebrow a {
    color: inherit;
    text-decoration: none;
}

.spec-header .service-eyebrow a:hover {
    text-decoration: underline;
}

.spec-number {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.spec-status {
    display: inline-flex;
    align-items: center;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    font-size: .78rem;
    font-weight: 600;
}

.spec-status--completed { background: rgba(25, 135, 84, .18); color: #4ade80; }
.spec-status--writing { background: rgba(var(--scbas-violet-rgb), .22); color: var(--scbas-violet-bright); }
.spec-status--inreview { background: rgba(var(--scbas-red-rgb), .18); color: var(--scbas-red-bright); }
.spec-status--archived { opacity: .7; }

/* ---- Step rail ---------------------------------------------------------- */
.spec-steps ol {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: .35rem;
    margin: 0 0 var(--spec-gap);
    padding: 0;
    list-style: none;
}

.spec-step a,
.spec-step span[aria-disabled] {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* Matches the 44px touch target used across the service surface. */
    min-height: 44px;
    padding: .4rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-top-width: 3px;
    border-radius: 8px;
    color: var(--bs-body-color);
    text-decoration: none;
}

.spec-step span[aria-disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.spec-step__index {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.spec-step__label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
}

.spec-step__label small {
    color: var(--bs-secondary-color);
    font-size: .68rem;
    font-weight: 400;
}

.spec-step.is-current a {
    border-top-color: var(--scbas-red);
    background: rgba(var(--scbas-red-rgb), .08);
}

.spec-step.is-current .spec-step__index {
    background: var(--scbas-red);
    color: #fff;
}

.spec-step.is-done a { border-top-color: rgba(25, 135, 84, .7); }
.spec-step.is-done .spec-step__index { background: rgba(25, 135, 84, .25); }

/* ---- Layout ------------------------------------------------------------- */
.spec-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--spec-gap);
    align-items: start;
}

.spec-main { min-width: 0; }

.spec-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .85rem;
}

.spec-section-heading h2 { margin: 0; }

.spec-section-heading p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: .9rem;
}

.spec-card {
    margin-bottom: var(--spec-gap);
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg);
}

.spec-card h3 { margin: 0 0 .35rem; font-size: 1.02rem; }

.spec-card__heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem 1rem;
}

.spec-card__lead,
.spec-card__hint,
.spec-card__empty {
    color: var(--bs-secondary-color);
    font-size: .88rem;
}

.spec-card__lead { margin: 0 0 1rem; }
.spec-card__hint { margin: 0; }

.spec-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
}

.spec-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spec-gap);
}

.spec-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem;
}

.spec-field--wide { grid-column: 1 / -1; }

.spec-field label,
.spec-field .form-label {
    display: block;
    margin-bottom: .25rem;
    font-size: .85rem;
    font-weight: 600;
}

.spec-field__hint {
    display: block;
    margin-top: .25rem;
    color: var(--bs-secondary-color);
    font-size: .78rem;
}

.spec-move {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: var(--spec-gap);
}

/* ---- Running totals ----------------------------------------------------- */
.spec-aside {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.spec-panel {
    padding: .9rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-tertiary-bg);
}

.spec-panel h3 {
    margin: 0 0 .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.spec-figures { margin: 0; }

.spec-figures > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .2rem 0;
}

.spec-figures dt {
    color: var(--bs-secondary-color);
    font-size: .82rem;
    font-weight: 400;
}

.spec-figures dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.spec-panel__note {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin: .6rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .78rem;
}

.spec-panel__note i { flex: 0 0 auto; width: 13px; height: 13px; margin-top: .15rem; }
.spec-panel__note.is-partial { color: var(--scbas-ember); }
.spec-panel__empty { margin: 0; color: var(--bs-secondary-color); font-size: .82rem; }

.spec-panel__badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0 0 .5rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(var(--scbas-red-rgb), .15);
    font-size: .75rem;
    font-weight: 600;
}

.spec-panel__badge i { width: 13px; height: 13px; }

.spec-panel__badge--simulated {
    background: rgba(var(--scbas-violet-rgb), .2);
    color: var(--scbas-violet-bright);
}

.spec-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgba(var(--scbas-violet-rgb), .2);
    color: var(--scbas-violet-bright);
    font-size: .75rem;
    font-weight: 600;
}

.spec-inline-badge--done {
    background: rgba(25, 135, 84, .2);
    color: #4ade80;
}

/* ---- Documents and pages ------------------------------------------------ */
.spec-upload__row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.spec-upload__row .form-control { flex: 1 1 240px; min-height: 44px; }

.spec-document-intake {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
    gap: .75rem;
    margin-bottom: .75rem;
}

.spec-document-intake__panel {
    margin: 0;
    padding: .85rem 1rem;
}

.spec-document-intake__panel > summary {
    cursor: pointer;
    font-size: .95rem;
    font-weight: 700;
}

.spec-document-intake__panel[open] > summary {
    margin-bottom: .7rem;
}

.spec-document-intake .spec-library__list {
    max-height: 230px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.spec-document-workbench {
    display: grid;
    grid-template-columns: minmax(270px, 1fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
    min-height: 760px;
}

.spec-document-workbench__rail {
    position: sticky;
    top: 1rem;
    min-width: 0;
    max-height: calc(100vh - 2rem);
    padding: .9rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
}

.spec-document-workbench__rail-heading,
.spec-document-workbench__source-heading,
.spec-document-workbench__source-heading > div {
    display: flex;
    align-items: center;
}

.spec-document-workbench__rail-heading,
.spec-document-workbench__source-heading {
    justify-content: space-between;
    gap: .5rem;
}

.spec-document-workbench__rail-heading {
    margin-bottom: .75rem;
}

.spec-document-workbench__rail-heading h3 {
    margin: 0;
    font-size: 1rem;
}

.spec-document-workbench__rail-heading p {
    margin: .1rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .74rem;
}

.spec-document-workbench__source {
    min-height: 0;
    margin-top: .7rem;
}

.spec-document-workbench__source-heading {
    margin-bottom: .6rem;
    font-size: .72rem;
}

.spec-document-workbench__source-heading > div {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.spec-document-workbench__source-heading a,
.spec-document-workbench__source-heading span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spec-document-workbench__pages {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    max-height: calc(100vh - 245px);
    padding: .2rem .35rem .75rem .1rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.spec-document-workbench__pages .spec-composer__thumbnail {
    flex: 0 0 auto;
    width: 100%;
}

.spec-document-workbench__pages .spec-composer__thumbnail-visual {
    width: min(100%, 245px);
}

.spec-document-workbench__canvas {
    min-height: 760px;
}

.spec-source__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

.spec-source__header h3 { margin: 0; }
.spec-source__header p { margin: .15rem 0 0; color: var(--bs-secondary-color); font-size: .82rem; }
.spec-source__warning { color: var(--scbas-ember); display: inline-flex; align-items: center; gap: .3rem; }
.spec-source__warning i { width: 14px; height: 14px; }

.spec-source__actions { display: flex; flex-wrap: wrap; gap: .4rem; }

.spec-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spec-page {
    position: relative;
    width: min(100%, 780px);
}

.spec-page__check {
    position: absolute;
    z-index: 2;
    top: .85rem;
    left: .85rem;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

.spec-page label {
    display: block;
    /* Comfortably above the 44px minimum: the whole tile is the target. */
    min-height: 88px;
    padding: .75rem .75rem .85rem 2.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.spec-page__check:focus-visible + label {
    outline: 2px solid rgba(var(--scbas-red-rgb), .55);
    outline-offset: 2px;
}

.spec-page.is-staged label {
    border-color: var(--scbas-red);
    background: rgba(var(--scbas-red-rgb), .08);
}

.spec-page__number {
    display: block;
    margin-bottom: .55rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.spec-page__preview {
    display: block;
    margin-top: .65rem;
    font-size: .84rem;
    line-height: 1.35;
    color: var(--bs-secondary-color);
}

.spec-inline-editor {
    margin-top: .45rem;
}
.spec-inline-editor summary {
    width: max-content;
    color: var(--bs-link-color);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
}
.spec-inline-editor form {
    display: grid;
    gap: .65rem;
    margin-top: .65rem;
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
}

/* ---- Manual library browser --------------------------------------------- */
.spec-library__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem;
    margin-bottom: .5rem;
    color: var(--bs-secondary-color);
    font-size: .82rem;
}

.spec-library__crumb {
    padding: .1rem .25rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.spec-library__crumb:hover { color: var(--bs-body-color); }

.spec-library__list {
    max-height: 320px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    list-style: none;
}

.spec-library__row {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    /* Full-width rows at the shared 44px touch minimum. */
    min-height: 44px;
    padding: .4rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-body-color);
    font-size: .86rem;
    text-align: left;
    cursor: pointer;
}

.spec-library__row:last-child { border-bottom: 0; }
.spec-library__row:hover:not(:disabled) { background: rgba(var(--scbas-red-rgb), .07); }
.spec-library__row:disabled { opacity: .5; cursor: default; }
.spec-library__row i { width: 15px; height: 15px; flex: 0 0 auto; color: var(--bs-secondary-color); }
.spec-library__row--folder { font-weight: 600; }

.spec-library__loading,
.spec-library__empty {
    padding: .75rem;
    color: var(--bs-secondary-color);
    font-size: .84rem;
}

.spec-subheading { margin: 0 0 .75rem; font-size: 1rem; }

/* ---- Product lines ------------------------------------------------------ */
.spec-lines { margin: 0; padding: 0; list-style: none; }

.spec-line {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.spec-line:last-child { border-bottom: 0; }

.spec-line__image {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: contain;
    background: var(--bs-tertiary-bg);
}

.spec-line__image--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
}

.spec-line__body { flex: 1 1 auto; min-width: 0; }

.spec-line__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.spec-line__part { font-variant-numeric: tabular-nums; font-weight: 600; }
.spec-line__unpriced { color: var(--scbas-ember); }

.spec-line__qty { display: flex; align-items: center; gap: .3rem; }
.spec-line__qty .form-control { width: 72px; min-height: 44px; }

/* ---- Instructions ------------------------------------------------------- */
.spec-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spec-inputs li { display: flex; flex-direction: column; }
.spec-inputs strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.spec-inputs span { color: var(--bs-secondary-color); font-size: .82rem; }

.spec-instructions {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84rem;
    line-height: 1.5;
}

.spec-editor {
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-body-bg);
}

.spec-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .65rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.spec-editor__surface {
    min-height: 520px;
    padding: 1.25rem 1.4rem;
    overflow: auto;
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    font-size: .95rem;
    line-height: 1.65;
    outline: none;
}

.spec-editor__surface:focus {
    box-shadow: inset 0 0 0 2px rgba(var(--scbas-red-rgb), .35);
}

.spec-editor__surface h2,
.spec-editor__surface h3 {
    margin: 1.3rem 0 .45rem;
}

.spec-editor__surface h2:first-child,
.spec-editor__surface h3:first-child {
    margin-top: 0;
}

.spec-writing-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(8, 10, 12, .82);
    backdrop-filter: blur(4px);
}

.spec-writing-overlay__panel {
    display: flex;
    width: min(440px, 100%);
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

.spec-writing-overlay__panel .spinner-border {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--scbas-red);
}

.spec-writing-overlay__panel strong { font-size: 1.15rem; }
.spec-writing-overlay__panel span:last-child {
    color: var(--bs-secondary-color);
    font-size: .88rem;
}

.spec-cost-line {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    padding: .6rem .8rem;
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .84rem;
}

.spec-cost-line i { width: 15px; height: 15px; flex: 0 0 auto; }

.spec-warning {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .75rem 0 0;
    padding: .6rem .8rem;
    border-left: 3px solid var(--scbas-ember);
    border-radius: 6px;
    background: rgba(255, 107, 43, .1);
    font-size: .85rem;
}

.spec-grounding summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    font-weight: 600;
}

.spec-grounding__hint { color: var(--bs-secondary-color); font-size: .8rem; font-weight: 400; }

.spec-grounding__body {
    max-height: 460px;
    margin: .85rem 0 0;
    padding: .8rem;
    overflow: auto;
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
    font-size: .78rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.spec-callout {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: var(--spec-gap);
    padding: .85rem 1rem;
    border: 1px solid rgba(var(--scbas-violet-rgb), .45);
    border-left: 3px solid var(--scbas-violet);
    border-radius: 8px;
    background: rgba(var(--scbas-violet-rgb), .09);
}

.spec-callout i { flex: 0 0 auto; width: 19px; height: 19px; color: var(--scbas-violet-bright); }
.spec-callout strong { display: block; margin-bottom: .15rem; }
.spec-callout span { color: var(--bs-secondary-color); font-size: .87rem; }

.spec-preview {
    max-height: 520px;
    padding: 1rem 1.15rem;
    overflow: auto;
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
}

.spec-preview h2 { font-size: 1.05rem; margin: 1.1rem 0 .4rem; }
.spec-preview h2:first-child { margin-top: 0; }
.spec-preview h3 { font-size: .93rem; margin: .85rem 0 .3rem; }
.spec-preview p, .spec-preview li { font-size: .88rem; line-height: 1.55; }

.spec-alternate { margin-bottom: 1rem; }
.spec-alternate summary { cursor: pointer; font-weight: 600; margin-bottom: .6rem; }

.spec-runs__summary { cursor: pointer; font-weight: 600; }
.spec-runs { margin-top: .85rem; font-size: .85rem; }
.spec-runs__error { color: var(--scbas-ember); font-size: .78rem; }

/* ---- Canvas ------------------------------------------------------------- */
.spec-canvas-help p { margin: 0; color: var(--bs-secondary-color); font-size: .88rem; }
.spec-canvas-help__status { margin-top: .35rem !important; font-weight: 600; }

.spec-layout--composer {
    grid-template-columns: minmax(0, 1fr);
}

.spec-layout--composer .spec-aside {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spec-composer {
    display: grid;
    grid-template-columns: minmax(270px, 320px) minmax(520px, 1fr);
    gap: 1rem;
    align-items: start;
    min-height: 720px;
}

.spec-composer__library {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-right: .25rem;
    scrollbar-gutter: stable;
}

.spec-composer__palette,
.spec-composer__workspace {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
}

.spec-composer__palette {
    padding: .85rem;
}

.spec-composer__palette h3,
.spec-composer__workspace h3 {
    margin: 0;
    font-size: .95rem;
}

.spec-composer__palette summary {
    cursor: pointer;
    font-size: .92rem;
    font-weight: 700;
}

.spec-composer__palette[open] summary {
    margin-bottom: .8rem;
}

.spec-composer__source {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    max-height: 460px;
    margin-top: .75rem;
    padding: .15rem .2rem .15rem 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.spec-composer__thumbnail {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: .4rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 9px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    cursor: grab;
    text-align: center;
    transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}

.spec-composer__thumbnail:hover,
.spec-composer__thumbnail:focus-visible {
    border-color: var(--scbas-red);
    transform: translateY(-1px);
}

.spec-composer__thumbnail.is-added {
    border-color: rgba(25, 135, 84, .75);
    background: rgba(25, 135, 84, .08);
}

.spec-composer__thumbnail[aria-busy="true"] {
    opacity: .6;
    cursor: wait;
}

.spec-composer__thumbnail.is-pointer-dragging {
    opacity: .55;
    cursor: grabbing;
}

.spec-composer__thumbnail-visual {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 8.5 / 11;
    margin-bottom: .4rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .28);
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .22);
}

.spec-composer__thumbnail-visual iframe {
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.spec-composer__thumbnail > span:not(.spec-composer__thumbnail-visual) {
    font-size: .78rem;
    font-weight: 700;
}

.spec-composer__thumbnail small {
    color: var(--bs-secondary-color);
    font-size: .67rem;
}

.spec-composer__product-picker {
    margin-top: .65rem;
}

.spec-composer__product-picker .scbas-picker__results {
    max-height: 260px;
}

.spec-composer__products {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .65rem;
}

.spec-composer__product {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 52px;
    padding: .4rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    cursor: grab;
    text-align: left;
}

.spec-composer__product:hover,
.spec-composer__product:focus-visible {
    border-color: var(--scbas-red);
}

.spec-composer__product img,
.spec-composer__product-image--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: #fff;
    object-fit: contain;
}

.spec-composer__product-image--empty i {
    width: 18px;
    height: 18px;
    color: var(--bs-secondary-color);
}

.spec-composer__product > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.spec-composer__product strong,
.spec-composer__product small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spec-composer__product strong { font-size: .82rem; }
.spec-composer__product small { color: var(--bs-secondary-color); font-size: .7rem; }

.spec-composer__workspace {
    min-width: 0;
    padding: 1rem;
    background:
        linear-gradient(rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)),
        var(--bs-tertiary-bg);
}

.spec-composer__workspace-heading,
.spec-composer__workspace-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.spec-composer__workspace-heading {
    position: sticky;
    z-index: 4;
    top: 0;
    margin: -1rem -1rem 1rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 12px 12px 0 0;
    background: color-mix(in srgb, var(--bs-body-bg) 94%, transparent);
    backdrop-filter: blur(10px);
}

.spec-composer__workspace-heading p {
    margin: .12rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .78rem;
}

.spec-composer__workspace-actions .btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--scbas-red);
    --bs-btn-hover-border-color: var(--scbas-red);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--scbas-red-deep);
    --bs-btn-active-border-color: var(--scbas-red-deep);
}

.spec-composer__workspace-actions .btn-outline-secondary[aria-pressed="true"] {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--scbas-red);
    --bs-btn-border-color: var(--scbas-red);
}

.spec-canvas {
    margin: 0 0 var(--spec-gap);
    padding: 0;
    list-style: none;
}

.spec-canvas__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
    padding: .5rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-body-bg);
    transition: opacity .15s ease, border-color .15s ease;
}

.spec-canvas__item.is-excluded { opacity: .45; border-style: dashed; }
.spec-canvas__item.is-dragging { opacity: .5; border-color: var(--scbas-red); }

.spec-canvas__grip { color: var(--bs-secondary-color); cursor: grab; }
.spec-canvas__grip i { width: 15px; height: 15px; }

.spec-canvas__include { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; cursor: pointer; }

.spec-canvas__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.spec-canvas__icon i { width: 15px; height: 15px; }

.spec-canvas__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.spec-canvas__body strong { font-size: .88rem; }
.spec-canvas__body small { color: var(--bs-secondary-color); font-size: .76rem; }

.spec-canvas__move { display: flex; gap: .2rem; }
.spec-canvas__move .btn { min-width: 34px; min-height: 34px; padding: .2rem .35rem; }
.spec-canvas__remove .btn { min-width: 34px; min-height: 34px; padding: .2rem .35rem; }

.spec-canvas--visual {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    align-items: start;
    gap: 1.25rem;
    min-height: 620px;
    margin: 0;
    padding: .5rem;
}

.spec-canvas--visual.is-pointer-drop-target {
    outline: 2px solid rgba(var(--scbas-red-rgb), .65);
    outline-offset: 5px;
}

.spec-canvas--visual.is-pointer-drop-end {
    box-shadow: inset 0 -5px 0 var(--scbas-red);
}

.spec-canvas--visual .spec-canvas__item.is-pointer-drop-before {
    box-shadow:
        -5px 0 0 var(--scbas-red),
        0 12px 28px rgba(0, 0, 0, .28);
}

.spec-canvas--visual .spec-canvas__item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.spec-canvas--visual .spec-canvas__item.is-highlighted {
    border-color: var(--scbas-red);
    box-shadow: 0 0 0 3px rgba(var(--scbas-red-rgb), .2), 0 12px 28px rgba(0, 0, 0, .3);
}

.spec-canvas--visual .spec-canvas__item.is-excluded {
    opacity: .48;
    border-style: dashed;
}

.spec-canvas__page-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 8.5 / 11;
    overflow: hidden;
    background: #fff;
    color: #171717;
}

.spec-canvas__page-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.spec-canvas__page-preview > img {
    display: block;
    width: min(72%, 440px);
    height: 48%;
    margin: 8% auto 2rem;
    object-fit: contain;
}

.spec-canvas__product-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8%;
    text-align: center;
}

.spec-canvas__product-preview > img {
    margin: 0 0 1.5rem;
}

.spec-canvas__product-preview h4 {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 2.2rem);
}

.spec-canvas__product-preview p {
    margin: .5rem 0 0;
    color: #555;
}

.spec-canvas__product-image--empty {
    display: grid;
    place-items: center;
    width: 44%;
    aspect-ratio: 1;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    background: #f2f3f5;
    color: #777;
}

.spec-canvas__product-image--empty i {
    width: 48px;
    height: 48px;
}

.spec-canvas__text-preview {
    height: 100%;
    padding: 10% 11%;
    overflow: hidden;
    color: #171717;
    font: 16px/1.55 Arial, sans-serif;
}

.spec-canvas__text-preview h1,
.spec-canvas__text-preview h2,
.spec-canvas__text-preview h3 {
    color: #111;
}

.spec-canvas__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: .75rem;
    color: #555;
}

.spec-canvas__placeholder i {
    width: 44px;
    height: 44px;
}

.spec-canvas__page-controls {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 56px;
    padding: .5rem .65rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.spec-canvas__page-controls form {
    margin: 0;
}

.spec-canvas--visual .spec-canvas__grip {
    padding: .4rem;
}

/* ---- Finish ------------------------------------------------------------- */
.spec-checklist { margin: 0 0 1rem; padding: 0; list-style: none; }

.spec-checklist li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
    font-size: .9rem;
}

.spec-checklist i { width: 16px; height: 16px; flex: 0 0 auto; }
.spec-checklist .is-ok i { color: #4ade80; }
.spec-checklist .is-warn i { color: var(--scbas-ember); }
.spec-checklist__aside { color: var(--bs-secondary-color); }

.spec-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-color: rgba(25, 135, 84, .5);
    background: rgba(25, 135, 84, .07);
}

.spec-done h3 { margin: 0; }
.spec-done p { margin: .2rem 0 0; color: var(--bs-secondary-color); font-size: .85rem; }
.spec-done__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.spec-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    color: var(--bs-secondary-color);
    font-size: .82rem;
}

.spec-disclaimer i { width: 15px; height: 15px; flex: 0 0 auto; margin-top: .1rem; }

/* ---- List --------------------------------------------------------------- */
.spec-table__title { display: flex; flex-direction: column; text-decoration: none; }
.spec-table__title strong { font-variant-numeric: tabular-nums; font-size: .82rem; }
.spec-table__contents { display: flex; flex-direction: column; color: var(--bs-secondary-color); font-size: .8rem; }
.spec-table__actions { display: inline-flex; gap: .35rem; justify-content: flex-end; }

@media (max-width: 1199.98px) {
    .spec-layout { grid-template-columns: minmax(0, 1fr); }
    .spec-aside { position: static; flex-direction: row; flex-wrap: wrap; }
    .spec-aside .spec-panel { flex: 1 1 240px; }
    .spec-steps ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .spec-composer { grid-template-columns: minmax(240px, 290px) minmax(460px, 1fr); }
    .spec-canvas--visual { grid-template-columns: minmax(0, 1fr); }
    .spec-document-workbench {
        grid-template-columns: minmax(245px, 1fr) minmax(440px, 2fr);
    }
}

@media (max-width: 767.98px) {
    .spec-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spec-line { flex-wrap: wrap; }
    .spec-layout--composer .spec-aside { grid-template-columns: minmax(0, 1fr); }
    .spec-composer { grid-template-columns: minmax(0, 1fr); }
    .spec-composer__library {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .spec-composer__source {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        max-height: 520px;
    }
    .spec-composer__workspace-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .spec-composer__workspace-actions { flex-wrap: wrap; }
    .spec-document-intake,
    .spec-document-workbench {
        grid-template-columns: minmax(0, 1fr);
    }
    .spec-document-workbench__rail {
        position: static;
        max-height: none;
    }
    .spec-document-workbench__pages {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        max-height: 520px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spec-page label,
    .spec-canvas__item {
        transition: none;
    }
}

/* ==========================================================================
   Rendered specification document

   Print-only styles. Deliberately conservative: a purchasing specification is
   read beside other bidders' submissions and photocopied, so it favours legible
   black-on-white over brand colour.
   ========================================================================== */
.spec-doc { color: #111; }

.spec-doc__cover { padding: 2rem 0 2.5rem; border-bottom: 2px solid #111; }
.spec-doc__eyebrow { margin: 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #555; }
.spec-doc__cover h1 { margin: .35rem 0; font-size: 1.8rem; }
.spec-doc__recipient { margin: 0 0 1.25rem; font-size: 1rem; }

.spec-doc__meta { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 0; }
.spec-doc__meta dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #555; }
.spec-doc__meta dd { margin: 0; font-weight: 600; }

.spec-doc__section { margin-top: 1.5rem; }
.spec-doc__section h2 { font-size: 1.15rem; margin: 0 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid #ccc; }
.spec-doc__section h3 { font-size: 1rem; margin: 1rem 0 .35rem; }
.spec-doc__narrative p, .spec-doc__narrative li { font-size: .92rem; line-height: 1.55; }

.spec-doc__table { width: 100%; border-collapse: collapse; }
.spec-doc__table th { width: 34%; text-align: left; vertical-align: top; font-size: .86rem; padding: .3rem .6rem .3rem 0; }
.spec-doc__table td { font-size: .86rem; padding: .3rem 0; border-bottom: 1px solid #eee; }

.spec-doc__part { display: inline-block; margin-left: .5rem; font-size: .82rem; color: #555; }
.spec-doc__product-body { display: flex; gap: 1rem; align-items: flex-start; }
.spec-doc__product-body img { width: 120px; height: auto; border: 1px solid #ddd; }

.spec-doc__figure { margin: 1.25rem 0; }
.spec-doc__figure img { max-width: 100%; border: 1px solid #ddd; }
.spec-doc__figure figcaption { margin-top: .35rem; font-size: .82rem; color: #444; }
.spec-doc__figure figcaption strong { display: block; }

.spec-doc__exhibit { margin-top: 1.5rem; padding: .85rem 1rem; border: 1px solid #bbb; page-break-inside: avoid; }
.spec-doc__exhibit h3 { margin: 0 0 .25rem; font-size: .98rem; }
.spec-doc__exhibit-page { font-weight: 400; color: #555; }
.spec-doc__exhibit-note { margin: 0 0 .35rem; font-size: .82rem; color: #444; }
.spec-doc__exhibit-link { margin: 0; font-size: .72rem; color: #777; word-break: break-all; }

.spec-doc__divider {
    min-height: 8.25in;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .6in;
    border: 2px solid #222;
    page-break-after: always;
}
.spec-doc__divider-label {
    margin: .2rem 0;
    font-size: 4rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
}
.spec-doc__divider h1 {
    max-width: 7in;
    margin: .35rem 0 1rem;
    font-size: 1.75rem;
}
.spec-doc__divider-copy {
    max-width: 6.4in;
    margin: 0 0 2rem;
    font-size: .92rem;
    line-height: 1.55;
    color: #333;
}

.spec-doc__break { page-break-after: always; }

@media print {
    .spec-doc__section, .spec-doc__figure { page-break-inside: avoid; }
    .spec-doc__cover { page-break-after: always; }
}