* {
    box-sizing: border-box;
}

:root {
    --panel-header-height: 50px;
    --panel-header-padding: 7px 16px;
    --topbar-sticky-offset: 54px;
}

body {
    margin: 0;
    background: var(--page-bg, #f4f4f5);
    color: var(--text, #18181b);
    font-family: Helvetica, Arial, sans-serif;
}

body.layout-boxed {
    background-color: var(--interface-boxed-page-bg, var(--page-bg, #f4f4f5));
}

body.page-background-active {
    background-image: var(--page-background-image);
    background-attachment: fixed;
    background-position: var(--page-background-position, center center);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

body.page-background-active::before {
    background: var(--page-background-overlay-colour, transparent);
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

body.page-background-active .page-shell {
    background: transparent;
    position: relative;
    z-index: 1;
}

.theme-clean {
    --page-bg: #e5e7eb;
    --surface: #fff;
    --surface-soft: #fafafa;
    --border: #e4e4e7;
    --text: #18181b;
    --muted-text: #71717a;
    --primary: #18181b;
    --primary-hover: #27272a;
    --card-header-bg: #27272a;
    --card-header-text: #ffffff;
    --smtp-help-bg: #f8fafc;
    --smtp-help-border: #cbd5e1;
    --smtp-help-text: #334155;
}

.theme-graphite {
    --page-bg: #e5e7eb;
    --surface: #f8fafc;
    --surface-soft: #eef2f7;
    --border: #cbd5e1;
    --text: #111827;
    --muted-text: #475569;
    --primary: #334155;
    --primary-hover: #1e293b;
    --smtp-help-bg: #eef2f7;
    --smtp-help-border: #94a3b8;
    --smtp-help-text: #1e293b;
}

.theme-british {
    --page-bg: #e8edf5;
    --surface: #ffffff;
    --surface-soft: #eef3fa;
    --border: #c8d1df;
    --text: #111827;
    --muted-text: #4b5b73;
    --primary: #012169;
    --primary-hover: #00194f;
    --british-red: #c8102e;
    --british-blue: #012169;
    --card-header-bg: #012169;
    --card-header-text: #ffffff;
    --smtp-help-bg: #eef3fa;
    --smtp-help-border: #aebbd0;
    --smtp-help-text: #012169;
}

.theme-british .topbar {
    background: #e5e7eb;
    border-bottom: 4px solid #012169;
    border-image: none;
    border-top: 3px solid #c8102e;
}

.theme-british .topbar .brand,
.theme-british .topbar .nav__link,
.theme-british .topbar .nav__trigger,
.theme-british .topbar .nav__button,
.theme-british .topbar .nav-branch-switcher {
    color: #334155;
}

.theme-british .topbar .brand::before {
    background: url("backgrounds/union-flag-header.svg") center / cover no-repeat;
    align-self: stretch;
    content: "";
    flex: 0 0 58px;
    margin-bottom: -4px;
    margin-top: -3px;
    min-height: 57px;
    position: relative;
    z-index: 1;
    width: 58px;
}

.theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand {
    gap: 4px;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 4px;
}

.theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand__logo {
    height: 46px;
    width: 46px;
}

.theme-british .topbar .nav__link:hover,
.theme-british .topbar .nav__trigger:hover,
.theme-british .topbar .nav__button:hover {
    background: rgba(1, 33, 105, .08);
    color: #012169;
}

.theme-british .topbar .nav__link--active {
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 -3px 0 #012169;
    color: #012169;
}

.theme-british .nav__menu-link--active {
    background: #c8102e;
    color: #ffffff;
}

body.theme-british .section-head:not(.section-head--compact),
body.theme-british .module-page-head {
    border-left: 4px solid #c8102e;
    border-right: 4px solid #012169;
}

body.theme-british .customisation-choice-grid .booking-choice-label {
    border-left-color: #c8102e;
    border-right: 4px solid #012169;
}

@media (max-width: 1500px) {
    .theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand {
        gap: 4px;
    }

    .theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand::before {
        flex-basis: 48px;
        width: 48px;
    }

    .theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand__logo {
        height: 46px;
        width: 46px;
    }

    .theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand__text {
        font-size: .9rem;
    }
}

@media (max-width: 1150px) {
    .theme-british .topbar__inner:has(.dashboard-topbar-tools) {
        grid-template-columns: 100px minmax(0, 1fr) auto;
    }

    .theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand-hub,
    .theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand {
        width: 100px;
    }

    .theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand {
        gap: 4px;
        padding-right: 0;
    }

    .theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand::before {
        flex-basis: 50px;
        width: 50px;
    }

    .theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand__logo {
        height: 46px;
        width: 46px;
    }
}

@media (max-width: 820px) {
    .theme-british .topbar__inner:has(.dashboard-topbar-tools) .brand::before {
        flex-basis: 58px;
        min-height: 51px;
        width: 58px;
    }
}

.theme-british th {
    background: #dce8f7;
    border-bottom-color: #9babc3;
    color: #012169;
}

.theme-british tbody tr:hover {
    background: #f1f5fb;
}

.theme-british .eyebrow,
.theme-british .link {
    color: #012169;
}

.theme-british .settings-subnav__link {
    background: #ffffff;
    border-color: #9babc3;
    color: #012169;
}

.theme-british .settings-subnav__link:hover,
.theme-british .settings-subnav__link:focus,
.theme-british .settings-subnav__link--active {
    background: #012169;
    border-color: #012169;
    color: #ffffff;
}

.theme-british input:focus,
.theme-british select:focus,
.theme-british textarea:focus {
    border-color: #012169;
    box-shadow: 0 0 0 3px rgba(1, 33, 105, .14);
}

.theme-midnight {
    --page-bg: #28343b;
    --surface: #ffffff;
    --surface-soft: #f5f7f8;
    --border: #cbd5dc;
    --text: #18181b;
    --muted-text: #52616b;
    --primary: #8b0000;
    --primary-hover: #6b0000;
    --smtp-help-bg: #f6f8f9;
    --smtp-help-border: #cbd5dc;
    --smtp-help-text: #28343b;
}

.theme-high_contrast {
    --page-bg: #222222;
    --surface: #ffffff;
    --surface-soft: #f4f4f4;
    --border: #bcbcbc;
    --text: #18181b;
    --muted-text: #515151;
    --primary: #515151;
    --primary-hover: #222222;
    --smtp-help-bg: #f4f4f4;
    --smtp-help-border: #bcbcbc;
    --smtp-help-text: #222222;
}

.theme-rainbow {
    --page-bg: linear-gradient(135deg, #fff7ed 0%, #fefce8 18%, #ecfdf5 38%, #eff6ff 62%, #f5f3ff 82%, #fff1f2 100%);
    --surface: rgba(255, 255, 255, .94);
    --surface-soft: #f8fafc;
    --border: #cbd5e1;
    --text: #111827;
    --muted-text: #475569;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --rainbow-red: #dc2626;
    --rainbow-orange: #ea580c;
    --rainbow-yellow: #ca8a04;
    --rainbow-green: #16a34a;
    --rainbow-blue: #2563eb;
    --rainbow-indigo: #4f46e5;
    --rainbow-violet: #9333ea;
    --smtp-help-bg: linear-gradient(135deg, #fff7ed 0%, #ecfdf5 45%, #eff6ff 72%, #f5f3ff 100%);
    --smtp-help-border: #93c5fd;
    --smtp-help-text: #1e1b4b;
}

.theme-futuristic {
    --page-bg: #222222;
    --surface: #ffffff;
    --surface-soft: #f7f7f7;
    --border: #d7d7d7;
    --text: #18181b;
    --muted-text: #57534e;
    --primary: #ea5800;
    --primary-hover: #c2410c;
    --accent: #ff8132;
    --smtp-help-bg: #fff7ed;
    --smtp-help-border: #fdba74;
    --smtp-help-text: #7c2d12;
}

.theme-black_blue {
    --dark-accent: #3396ff;
    --dark-accent-strong: #ff8132;
    --dark-accent-rgb: 51, 150, 255;
    --page-bg: #333333;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --border: #cbd5e1;
    --text: #172033;
    --muted-text: #586579;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --smtp-help-bg: #eff6ff;
    --smtp-help-border: #93c5fd;
    --smtp-help-text: #1e3a8a;
}

.theme-black_red {
    --dark-accent: #ef4666;
    --dark-accent-strong: #f69b9a;
    --dark-accent-rgb: 239, 70, 102;
    --page-bg: #84af9c;
    --surface: #fffdf6;
    --surface-soft: #f5f1de;
    --border: #d7d0b4;
    --text: #2d241f;
    --muted-text: #6b5d52;
    --primary: #b23a50;
    --primary-hover: #8f263b;
    --smtp-help-bg: #fff1f2;
    --smtp-help-border: #fda4af;
    --smtp-help-text: #7f1d1d;
}

.theme-black_green {
    --dark-accent: #a4c400;
    --dark-accent-strong: #d3ff04;
    --dark-accent-rgb: 164, 196, 0;
    --page-bg: #8f8f8f;
    --surface: #ffffff;
    --surface-soft: #f5f7ef;
    --border: #d7dfc8;
    --text: #20231a;
    --muted-text: #5c6353;
    --primary: #6f9300;
    --primary-hover: #526d00;
    --smtp-help-bg: #f7fee7;
    --smtp-help-border: #bef264;
    --smtp-help-text: #365314;
}

.theme-transparent_cards {
    --page-bg: #dbeafe;
    --surface: #ffffff;
    --surface-soft: #eff6ff;
    --border: rgba(51, 65, 85, .36);
    --text: #111827;
    --muted-text: #334155;
    --primary: #334155;
    --primary-hover: #1e293b;
    --card-header-bg: #334155;
    --card-header-text: #ffffff;
    --smtp-help-bg: rgba(239, 246, 255, .62);
    --smtp-help-border: rgba(96, 165, 250, .46);
    --smtp-help-text: #1e293b;
}

.theme-transparent_cards .card,
.theme-transparent_cards .form-section,
.theme-transparent_cards .dashboard-preview-card,
.theme-transparent_cards .dashboard-workbench-panel,
.theme-transparent_cards .dashboard-status-panel,
.theme-transparent_cards .dashboard-status-card,
.theme-transparent_cards .dashboard-device-details-card,
.theme-transparent_cards .dashboard-credential-panel,
.theme-transparent_cards .dashboard-note-ledger__panel,
.theme-transparent_cards .jobsheet-visible-panel,
.theme-transparent_cards .jobsheet-create-credential-panel,
.theme-transparent_cards .supplier-card,
.theme-transparent_cards .inventory-category-panel,
.theme-transparent_cards .inventory-url-panel,
.theme-transparent_cards .question-panel,
.theme-transparent_cards .asset-detail-panel,
.theme-transparent_cards .permission-group-card,
.theme-transparent_cards .requirement-card,
.theme-transparent_cards .repair-document-card,
.theme-transparent_cards .customer-progress-card,
.theme-transparent_cards .icon-logo-paired-row .icon-logo-row,
.theme-transparent_cards .icon-logo-library-panel,
.theme-transparent_cards .page-skin-upload-card,
.theme-transparent_cards .page-skin-assignment-card,
.theme-transparent_cards .brand-logo-upload-card,
.theme-transparent_cards .settings-setup-logo-panel,
.theme-transparent_cards .settings-business-numbering,
.theme-transparent_cards .settings-demo-data-card {
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px);
    border-color: rgba(51, 65, 85, .34);
}

.customisation-form .theme-option--transparent_cards {
    background:
        linear-gradient(var(--sw5, #334155), var(--sw5, #334155)) 0 0 / 100% 36% no-repeat,
        linear-gradient(var(--sw6, #dbeafe), var(--sw6, #dbeafe)) 0 100% / 50% 64% no-repeat,
        linear-gradient(var(--sw4, #eff6ff), var(--sw4, #eff6ff)) 100% 100% / 50% 64% no-repeat;
    opacity: 1;
}

.customisation-form .theme-option--transparent_cards::after {
    background: rgba(255, 255, 255, .28);
    border: 1px solid rgba(51, 65, 85, .32);
    border-radius: 4px;
    bottom: 9px;
    content: "";
    left: 21px;
    position: absolute;
    right: 12px;
    top: 35px;
}

.customisation-form .theme-option--transparent_cards span {
    background: linear-gradient(var(--sw1, #334155), var(--sw2, #334155));
    opacity: 1;
    position: relative;
    z-index: 1;
}

.theme-rainbow .topbar {
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, #dc2626, #ea580c, #ca8a04, #16a34a, #2563eb, #4f46e5, #9333ea) 1;
}

.theme-rainbow .brand__text {
    background: linear-gradient(90deg, #dc2626, #ea580c, #16a34a, #2563eb, #9333ea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.theme-rainbow .nav__link--active,
.theme-rainbow .button {
    background: linear-gradient(90deg, #dc2626, #ea580c, #ca8a04, #16a34a, #2563eb, #4f46e5);
    color: #fff;
}

.theme-rainbow .button:hover {
    background: linear-gradient(90deg, #b91c1c, #c2410c, #a16207, #15803d, #1d4ed8, #4338ca);
}

.theme-rainbow .eyebrow,
.theme-rainbow .link {
    color: var(--rainbow-violet);
}

.theme-rainbow .card,
.theme-rainbow .form-section,
.theme-rainbow .submit-bar {
    box-shadow: 0 2px 0 rgba(220, 38, 38, .18), 0 5px 0 rgba(234, 88, 12, .12), 0 8px 0 rgba(37, 99, 235, .08);
}

.theme-rainbow .metric-grid .card:nth-child(1) {
    border-top: 5px solid var(--rainbow-red);
}

.theme-rainbow .metric-grid .card:nth-child(2) {
    border-top: 5px solid var(--rainbow-green);
}

.theme-rainbow .metric-grid .card:nth-child(3) {
    border-top: 5px solid var(--rainbow-blue);
}

.theme-rainbow th {
    background: linear-gradient(90deg, #fee2e2, #ffedd5, #fef9c3, #dcfce7, #dbeafe, #ede9fe);
    color: #111827;
}

.theme-futuristic .page-shell {
    background: var(--page-bg);
}

.theme-futuristic .topbar,
.theme-futuristic .card,
.theme-futuristic .form-section,
.theme-futuristic .submit-bar,
.theme-futuristic .settings-subnav,
.theme-futuristic .nav__menu,
.theme-futuristic .inventory-quick-search__body {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

.theme-futuristic .topbar {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.theme-futuristic .brand__text,
.theme-futuristic .metric-value {
    color: var(--primary);
    text-shadow: none;
}

.theme-futuristic .lead,
.theme-futuristic .prose-text,
.theme-futuristic .empty {
    color: var(--muted-text);
}

.theme-futuristic .eyebrow,
.theme-futuristic .link {
    color: var(--primary);
}

.theme-futuristic .nav__link,
.theme-futuristic .nav__trigger,
.theme-futuristic .nav__button {
    color: var(--muted-text);
}

.theme-futuristic .nav__link:hover,
.theme-futuristic .nav__trigger:hover,
.theme-futuristic .nav__button:hover,
.theme-futuristic .nav__menu-link:hover,
.theme-futuristic .nav__menu-button:hover,
.theme-futuristic .nav__menu-link--active {
    background: rgba(234, 88, 0, .12);
    color: var(--primary);
}

.theme-futuristic .nav__link--active,
.theme-futuristic .button {
    background: linear-gradient(135deg, #ff8132, #ea5800);
    border-color: rgba(234, 88, 0, .42);
    box-shadow: none;
    color: #fff;
}

.theme-futuristic .button:hover {
    background: #c2410c;
    box-shadow: none;
}

.theme-futuristic .button-secondary {
    background: rgba(255, 255, 255, .045);
    border-color: rgba(0, 229, 255, .24);
    color: var(--text);
}

.theme-futuristic .button-secondary:hover {
    background: rgba(234, 88, 0, .1);
    border-color: rgba(234, 88, 0, .34);
}

.theme-futuristic input,
.theme-futuristic select,
.theme-futuristic textarea,
.theme-futuristic .read-only-field {
    background: #fff;
    border-color: #d7d7d7;
    color: var(--text);
}

.theme-futuristic input:focus,
.theme-futuristic select:focus,
.theme-futuristic textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(234, 88, 0, .12);
}

.theme-futuristic input::placeholder,
.theme-futuristic textarea::placeholder {
    color: #9a8f86;
}

.theme-futuristic th {
    background: rgba(234, 88, 0, .08);
    color: var(--primary);
}

.theme-futuristic td,
.theme-futuristic th {
    border-bottom-color: rgba(234, 88, 0, .12);
}

.theme-futuristic tbody tr:hover {
    background: rgba(234, 88, 0, .06);
}

.theme-futuristic .badge,
.theme-futuristic .tag,
.theme-futuristic .customer-lookup__badge {
    background: rgba(234, 88, 0, .1);
    border: 1px solid rgba(234, 88, 0, .22);
    color: var(--primary);
}

.theme-futuristic .alert {
    background: rgba(248, 113, 113, .14);
    border: 1px solid rgba(248, 113, 113, .42);
    color: #fecaca;
}

.theme-futuristic .error {
    color: #fecaca;
}

.theme-futuristic .smtp-help-card {
    box-shadow: 0 10px 26px rgba(0, 229, 255, .08);
}

.theme-futuristic .supplier-card {
    overflow: hidden;
}

.theme-futuristic .supplier-card:hover {
    border-color: rgba(0, 229, 255, .52);
    box-shadow:
        0 20px 45px rgba(0, 229, 255, .13),
        0 10px 25px rgba(0, 0, 0, .45),
        inset 0 0 32px rgba(255, 255, 255, .025);
    transform: translateY(-6px);
}

.theme-futuristic .supplier-card__mark {
    background: linear-gradient(135deg, #00e5ff, #0066ff);
    box-shadow: 0 0 20px rgba(0, 229, 255, .42);
    color: #fff;
}

.theme-futuristic .supplier-card__glow {
    display: block;
}

.theme-black_blue .topbar,
.theme-black_blue .card,
.theme-black_blue .form-section,
.theme-black_blue .submit-bar,
.theme-black_blue .settings-subnav,
.theme-black_blue .nav__menu,
.theme-black_blue .inventory-quick-search__body,
.theme-black_red .topbar,
.theme-black_red .card,
.theme-black_red .form-section,
.theme-black_red .submit-bar,
.theme-black_red .settings-subnav,
.theme-black_red .nav__menu,
.theme-black_red .inventory-quick-search__body,
.theme-black_green .topbar,
.theme-black_green .card,
.theme-black_green .form-section,
.theme-black_green .submit-bar,
.theme-black_green .settings-subnav,
.theme-black_green .nav__menu,
.theme-black_green .inventory-quick-search__body {
    background: color-mix(in srgb, var(--surface) 92%, var(--dark-accent) 8%);
    border-color: var(--border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.theme-black_blue .topbar,
.theme-black_red .topbar,
.theme-black_green .topbar {
    border-bottom-color: rgba(var(--dark-accent-rgb), .38);
}

.theme-black_blue .brand__text,
.theme-black_blue .metric-value,
.theme-black_blue .eyebrow,
.theme-black_blue .link,
.theme-black_red .brand__text,
.theme-black_red .metric-value,
.theme-black_red .eyebrow,
.theme-black_red .link,
.theme-black_green .brand__text,
.theme-black_green .metric-value,
.theme-black_green .eyebrow,
.theme-black_green .link {
    color: var(--primary);
}

.theme-black_blue .lead,
.theme-black_blue .prose-text,
.theme-black_blue .empty,
.theme-black_red .lead,
.theme-black_red .prose-text,
.theme-black_red .empty,
.theme-black_green .lead,
.theme-black_green .prose-text,
.theme-black_green .empty {
    color: var(--muted-text);
}

.theme-black_blue .nav__link,
.theme-black_blue .nav__trigger,
.theme-black_blue .nav__button,
.theme-black_red .nav__link,
.theme-black_red .nav__trigger,
.theme-black_red .nav__button,
.theme-black_green .nav__link,
.theme-black_green .nav__trigger,
.theme-black_green .nav__button {
    color: var(--muted-text);
}

.theme-black_blue .nav__link:hover,
.theme-black_blue .nav__trigger:hover,
.theme-black_blue .nav__button:hover,
.theme-black_blue .nav__menu-link:hover,
.theme-black_blue .nav__menu-button:hover,
.theme-black_blue .nav__menu-link--active,
.theme-black_red .nav__link:hover,
.theme-black_red .nav__trigger:hover,
.theme-black_red .nav__button:hover,
.theme-black_red .nav__menu-link:hover,
.theme-black_red .nav__menu-button:hover,
.theme-black_red .nav__menu-link--active,
.theme-black_green .nav__link:hover,
.theme-black_green .nav__trigger:hover,
.theme-black_green .nav__button:hover,
.theme-black_green .nav__menu-link:hover,
.theme-black_green .nav__menu-button:hover,
.theme-black_green .nav__menu-link--active {
    background: rgba(var(--dark-accent-rgb), .12);
    color: var(--text);
}

.theme-black_blue .nav__link--active,
.theme-black_blue .button,
.theme-black_red .nav__link--active,
.theme-black_red .button,
.theme-black_green .nav__link--active,
.theme-black_green .button {
    background: linear-gradient(135deg, var(--dark-accent-strong), var(--dark-accent));
    border-color: rgba(var(--dark-accent-rgb), .48);
    color: #fff;
}

.theme-black_blue .button-secondary,
.theme-black_red .button-secondary,
.theme-black_green .button-secondary {
    background: rgba(var(--dark-accent-rgb), .08);
    border-color: rgba(var(--dark-accent-rgb), .24);
    color: var(--text);
}

.theme-black_blue input,
.theme-black_blue select,
.theme-black_blue textarea,
.theme-black_blue .read-only-field,
.theme-black_red input,
.theme-black_red select,
.theme-black_red textarea,
.theme-black_red .read-only-field,
.theme-black_green input,
.theme-black_green select,
.theme-black_green textarea,
.theme-black_green .read-only-field {
    background: color-mix(in srgb, var(--surface-soft) 92%, black 8%);
    border-color: rgba(var(--dark-accent-rgb), .24);
    color: var(--text);
}

.theme-black_blue input::placeholder,
.theme-black_blue textarea::placeholder,
.theme-black_red input::placeholder,
.theme-black_red textarea::placeholder,
.theme-black_green input::placeholder,
.theme-black_green textarea::placeholder {
    color: color-mix(in srgb, var(--muted-text) 68%, transparent);
}

.theme-black_blue input:focus,
.theme-black_blue select:focus,
.theme-black_blue textarea:focus,
.theme-black_red input:focus,
.theme-black_red select:focus,
.theme-black_red textarea:focus,
.theme-black_green input:focus,
.theme-black_green select:focus,
.theme-black_green textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--dark-accent-rgb), .16);
}

.theme-black_blue th,
.theme-black_red th,
.theme-black_green th {
    background: rgba(var(--dark-accent-rgb), .1);
    color: var(--primary);
}

.theme-black_blue td,
.theme-black_blue th,
.theme-black_red td,
.theme-black_red th,
.theme-black_green td,
.theme-black_green th {
    border-bottom-color: rgba(var(--dark-accent-rgb), .14);
}

.theme-black_blue tbody tr:hover,
.theme-black_red tbody tr:hover,
.theme-black_green tbody tr:hover {
    background: rgba(var(--dark-accent-rgb), .07);
}

.theme-black_blue .badge,
.theme-black_blue .tag,
.theme-black_blue .customer-lookup__badge,
.theme-black_red .badge,
.theme-black_red .tag,
.theme-black_red .customer-lookup__badge,
.theme-black_green .badge,
.theme-black_green .tag,
.theme-black_green .customer-lookup__badge {
    background: rgba(var(--dark-accent-rgb), .12);
    border: 1px solid rgba(var(--dark-accent-rgb), .24);
    color: var(--primary);
}

.theme-black_blue .alert,
.theme-black_red .alert,
.theme-black_green .alert {
    background: rgba(248, 113, 113, .14);
    border: 1px solid rgba(248, 113, 113, .42);
    color: #fecaca;
}

.theme-black_blue .error,
.theme-black_red .error,
.theme-black_green .error {
    color: #fecaca;
}


a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

html input[type="file"] {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    cursor: pointer;
    height: 42px;
    min-height: 42px;
    min-width: 0;
    overflow: hidden;
    padding: 0 12px 0 0;
    width: 100%;
}

input[type="file"]::file-selector-button {
    background: var(--card-header-bg, var(--primary, #18181b));
    border: 0;
    border-radius: 5px 0 0 5px;
    color: var(--card-header-text, #ffffff);
    cursor: pointer;
    font-weight: 850;
    height: 40px;
    margin-right: 10px;
    min-height: 40px;
    padding: 7px 13px;
}

input[type="file"]:hover::file-selector-button,
input[type="file"]:focus::file-selector-button {
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 82%, #ffffff);
    border-color: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 82%, #ffffff);
    color: var(--card-header-text, #ffffff);
}

.read-only-field {
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    color: #27272a;
    font-weight: 700;
    padding: 10px 12px;
}

.page-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

[id] {
    scroll-margin-top: 86px;
}

.topbar {
    background: var(--interface-menu-1, var(--surface, #fff));
    border-bottom: 1px solid color-mix(in srgb, var(--interface-menu-1, var(--border, #e4e4e7)) 78%, #9ca3af);
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, .9),
        0 1px 0 rgba(0, 0, 0, .16),
        0 2px 4px rgba(0, 0, 0, .08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.topbar__inner,
.content {
    margin: 0 auto;
    max-width: none;
    padding: 0 24px;
    width: 100%;
}

.layout-boxed .content {
    max-width: 1180px;
}

.jobsheet-contact-card > .field-grid {
    grid-template-areas: "customer device" "mobile dropname" "telephone dropphone" "email ." "company ." "devices devices";
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jobsheet-contact-card .field:has(> #customer_display_name) { grid-area: customer; }
.jobsheet-contact-card .field:has(> #customer_mobile) { grid-area: mobile; }
.jobsheet-contact-card .field:has(> #customer_phone) { grid-area: telephone; }
.jobsheet-contact-card .field:has(> #customer_email) { grid-area: email; }
.jobsheet-contact-card .field:has(> #customer_company_name) { grid-area: company; }
.jobsheet-contact-card .field:has(> #customer_label_lookup) { grid-area: device; }
.jobsheet-contact-card .field:has(> #jobsheet_drop_off_name) { grid-area: dropname; }
.jobsheet-contact-card .field:has(> #jobsheet_drop_off_phone) { grid-area: dropphone; }
.jobsheet-contact-card .device-choice-panel { grid-area: devices; }
@media (max-width: 600px) {
    .jobsheet-contact-card > .field-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "customer" "mobile" "telephone" "email" "company" "device" "dropname" "dropphone" "devices";
    }
}

/* Retain readable inner panels without a page-wide outer container. */
body.layout-boxed:not(.document-mode) .content {
    --surface: #f8fafc;
    --surface-soft: #eef2f7;
    --text: #172033;
    --muted-text: #475569;
    --border: #cbd5e1;
    background: transparent;
    color: #172033;
}

body.theme-graphite.layout-boxed:not(.document-mode) .content {
    background: transparent;
}

body.theme-graphite.layout-boxed:not(.document-mode) .content .form-section {
    background: #f8fafc;
}

body.theme-graphite.layout-boxed:not(.document-mode) .content .section-head,
body.theme-graphite.layout-boxed:not(.document-mode) .content .form-section__head {
    background: #dce3ea;
    color: #172033;
}

body.theme-graphite.layout-boxed:not(.document-mode) .content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]),
body.theme-graphite.layout-boxed:not(.document-mode) .content select,
body.theme-graphite.layout-boxed:not(.document-mode) .content textarea {
    background-color: #ffffff;
    color: #172033;
}

.topbar__inner {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.topbar__center {
    flex: 1 1 520px;
    max-width: 680px;
    min-width: 420px;
}

.topbar__inner:has(.dashboard-search--topbar) {
    display: grid;
    grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
    gap: 12px;
}

.topbar__inner:has(.dashboard-search--topbar) .brand {
    justify-self: start;
    min-width: 0;
}

.topbar__inner:has(.dashboard-search--topbar) .topbar__center {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-width: 402px;
    min-width: 0;
    width: 100%;
}

.topbar__inner:has(.dashboard-search--topbar) .nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    justify-self: end;
    min-width: 0;
}

.brand {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: 0;
}

.brand-hub {
    align-self: center;
    display: inline-flex;
    position: relative;
    z-index: 1010;
}

.brand-hub:not(.is-touch-navigation):hover .brand-hub__menu,
.brand-hub:not(.is-touch-navigation):focus-within .brand-hub__menu,
.brand-hub.is-touch-open .brand-hub__menu {
    display: grid;
}

.brand-hub::after {
    bottom: -8px;
    content: "";
    display: none;
    height: 8px;
    left: 0;
    position: absolute;
    right: 0;
}

.brand-hub:hover::after,
.brand-hub:focus-within::after {
    display: block;
}

.brand-hub__menu {
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--surface, #ffffff) 92%, var(--interface-menu-1, #ffffff));
    border: 1px solid color-mix(in srgb, var(--card-header-bg, #18181b) 20%, rgba(255, 255, 255, .75));
    border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .20), inset 0 1px 0 rgba(255, 255, 255, .78);
    display: none;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    left: 0;
    min-width: min(760px, calc(100vw - 24px));
    padding: 10px;
    position: absolute;
    top: 100%;
    z-index: 1020;
}

.brand-hub__group {
    background: color-mix(in srgb, var(--surface, #ffffff) 82%, var(--interface-boxed-page-bg, #f1f5f9));
    border: 1px solid color-mix(in srgb, var(--card-header-bg, #18181b) 10%, var(--border, #e4e4e7));
    border-radius: 9px;
    display: grid;
    gap: 3px;
    align-content: start;
    padding: 7px;
}

.brand-hub__group h2 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--card-header-bg, #18181b) 90%, #ffffff), color-mix(in srgb, var(--card-header-bg, #18181b) 84%, #000000));
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
    color: var(--card-header-text, #ffffff);
    font-size: .9rem;
    line-height: 1;
    margin: 0 0 5px;
    padding: 9px 10px;
}

.brand-hub__group a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--muted-text, #52525b);
    display: flex;
    font-size: .88rem;
    font-weight: 800;
    gap: 9px;
    min-height: 34px;
    padding: 6px 8px;
    text-decoration: none;
    white-space: nowrap;
}

.brand-hub__group a:hover,
.brand-hub__group a:focus {
    background: color-mix(in srgb, var(--card-header-bg, #18181b) 9%, var(--surface, #ffffff));
    border-color: color-mix(in srgb, var(--card-header-bg, #18181b) 18%, var(--border, #e4e4e7));
    box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
    color: var(--text, #18181b);
}

.brand-hub__group svg,
.brand-hub__group .nav__custom-icon {
    background: color-mix(in srgb, var(--card-header-bg, #18181b) 9%, var(--surface, #ffffff));
    border-radius: 5px;
    fill: none;
    flex: 0 0 19px;
    height: 19px;
    object-fit: contain;
    padding: 2px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 19px;
}

.brand__logo {
    border-radius: 6px;
    display: block;
    height: 51px;
    object-fit: contain;
    width: 51px;
}

.brand__text {
    line-height: 1;
}

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nav__link,
.nav__trigger,
.nav__button,
.button,
.button-secondary {
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 650;
}

.nav__link,
.nav__trigger,
.nav__button {
    background: transparent;
    color: var(--text, #18181b);
    font-size: .92rem;
    gap: 7px;
    padding: 10px 12px;
}

.nav__link:hover,
.nav__trigger:hover,
.nav__button:hover {
    background: color-mix(in srgb, var(--interface-menu-1, #ffffff) 82%, #000000);
    color: var(--text, #18181b);
}

.nav__link--active {
    background: color-mix(in srgb, var(--interface-menu-1, #ffffff) 82%, #000000);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), inset 0 -1px 0 rgba(0, 0, 0, .12);
    color: var(--text, #18181b);
}

.button {
    background: var(--card-header-bg, var(--primary, #18181b));
    border: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 82%, #ffffff);
    color: var(--card-header-text, #fff);
}

.nav__group {
    position: relative;
}

.nav-branch-switcher {
    align-items: center;
    display: inline-flex;
    gap: 5px;
    margin: 0 2px 0 auto;
}

.nav-branch-switcher svg {
    fill: none;
    flex: 0 0 17px;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 17px;
}

.nav-branch-switcher select {
    background: color-mix(in srgb, var(--surface, #ffffff) 92%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 5px;
    color: inherit;
    font-size: .74rem;
    font-weight: 750;
    min-height: 32px;
    max-width: 150px;
    padding: 4px 24px 4px 7px;
}

body:not(.nav-mode-easy):not(.nav-mode-uploaded) .nav > .nav__link,
body:not(.nav-mode-easy):not(.nav-mode-uploaded) .nav > .nav__group:not(.nav__group--right) {
    display: none;
}

.nav__group::after {
    content: "";
    display: none;
    height: 8px;
    left: 0;
    position: absolute;
    right: 0;
    top: 100%;
}

.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu {
    display: grid;
}

.nav__trigger {
    gap: 6px;
}

.nav-fullscreen-toggle {
    flex: 0 0 auto;
}

.nav-fullscreen-toggle[hidden],
.nav-fullscreen-toggle svg[hidden] {
    display: none !important;
}

.nav-fullscreen-toggle__label {
    display: none;
}

.nav-fullscreen-toggle.is-active {
    background: color-mix(in srgb, var(--interface-menu-1, #ffffff) 76%, #000000);
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav-fullscreen-toggle__label {
    display: inline;
}

.nav__link svg,
.nav__trigger svg,
.nav__menu-link svg,
.nav__menu-button svg,
.nav__menu-label svg {
    fill: none;
    flex: 0 0 17px;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 17px;
}

.nav__menu-link svg,
.nav__menu-button svg,
.nav__menu-label svg {
    flex-basis: 16px;
    height: 16px;
    width: 16px;
}

.nav__chevron {
    font-size: .72rem;
    line-height: 1;
}

.nav__menu {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .14);
    display: none;
    gap: 4px;
    left: 0;
    min-width: 190px;
    padding: 10px 8px 8px;
    position: absolute;
    top: 100%;
    z-index: 1020;
}

.nav__menu--right {
    left: auto;
    right: 0;
}

.nav__menu-link,
.nav__menu-button,
.nav__menu-label {
    align-items: center;
    border-radius: 6px;
    color: var(--text, #18181b);
    display: flex;
    font-size: .9rem;
    font-weight: 650;
    gap: 8px;
    padding: 9px 10px;
    text-align: left;
    white-space: nowrap;
}

.nav__menu-link:hover,
.nav__menu-button:hover,
.nav__menu-link--active {
    background: color-mix(in srgb, var(--primary, #18181b) 14%, transparent);
    color: var(--primary, #18181b);
}

.nav__menu-button {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 100%;
}

.nav__custom-icon {
    display: block;
    flex: 0 0 18px;
    height: 18px;
    object-fit: contain;
    width: 18px;
}

.create-version-switch {
    align-items: center;
    background: color-mix(in srgb, var(--surface, #ffffff) 84%, var(--interface-menu-1, #ffffff));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 22%, var(--border, #d4d4d8));
    border-radius: 999px;
    display: inline-flex;
    gap: 3px;
    padding: 3px;
}

.create-version-switch__link {
    border-radius: 999px;
    color: var(--text, #18181b);
    font-size: .76rem;
    font-weight: 950;
    line-height: 1;
    padding: 8px 10px;
    text-decoration: none;
}

.create-version-switch__link:hover,
.create-version-switch__link:focus {
    background: color-mix(in srgb, var(--primary, #18181b) 10%, transparent);
}

.create-version-switch__link.is-active {
    background: var(--card-header-bg, var(--primary, #18181b));
    color: var(--card-header-text, #ffffff);
}

.nav__menu-label {
    color: var(--muted-text, #71717a);
    font-size: .8rem;
    font-weight: 700;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner {
    align-items: center;
    min-height: 112px;
    padding-block: 8px;
}

:is(.nav-mode-easy, .nav-mode-uploaded) {
    --topbar-sticky-offset: 102px;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .brand {
    align-self: stretch;
    gap: 12px;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .brand__logo {
    height: 88px;
    width: 88px;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .brand__text {
    font-size: 1.35rem;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav {
    align-items: stretch;
    gap: 10px;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav__group {
    display: flex;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav__link,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__trigger {
    align-items: center;
    background: color-mix(in srgb, var(--surface, #fff) 72%, var(--interface-menu-1, #e5e7eb));
    border: 1px solid color-mix(in srgb, var(--interface-menu-1, #e5e7eb) 68%, #9ca3af);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 2px 4px rgba(15, 23, 42, .12);
    flex-direction: column;
    font-size: .74rem;
    font-weight: 800;
    gap: 6px;
    line-height: 1.08;
    min-height: 96px;
    padding: 4px 6px;
    text-align: center;
    width: 96px;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav__link:hover,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__trigger:hover,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__link--active {
    background: color-mix(in srgb, var(--interface-menu-1, #e5e7eb) 78%, #fff);
    border-color: color-mix(in srgb, var(--primary, #18181b) 34%, var(--interface-menu-1, #e5e7eb));
    color: var(--text, #18181b);
    transform: translateY(-1px);
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav__link svg,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__trigger svg,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__link .nav__custom-icon,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__trigger .nav__custom-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #18181b) 14%, #ffffff), color-mix(in srgb, var(--interface-menu-1, #e5e7eb) 64%, #ffffff));
    border-radius: 8px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
    color: var(--primary, #18181b);
    flex-basis: 42px;
    height: 42px;
    padding: 8px;
    width: 42px;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav__link .nav__custom-icon,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__trigger .nav__custom-icon {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    flex-basis: 72px;
    height: 72px;
    max-width: 100%;
    padding: 0;
    width: 72px;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav__chevron {
    font-size: .68rem;
    margin-top: -3px;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav__menu {
    top: 100%;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav__group::after {
    display: block;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav__menu-link,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__menu-button,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__menu-label {
    flex-direction: row;
    text-align: left;
}

:is(.nav-mode-easy, .nav-mode-uploaded) .nav__menu-link svg,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__menu-button svg,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__menu-label svg,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__menu-link .nav__custom-icon,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__menu-button .nav__custom-icon,
:is(.nav-mode-easy, .nav-mode-uploaded) .nav__menu-label .nav__custom-icon {
    background: transparent;
    box-shadow: none;
    flex-basis: 16px;
    height: 16px;
    padding: 0;
    width: 16px;
}

.button:hover,
.button:focus,
.button-secondary:hover,
.button-secondary:focus {
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 82%, #ffffff);
    border-color: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 82%, #ffffff);
    color: var(--card-header-text, #fff);
}

.content {
    flex: 1 0 auto;
    padding-top: 28px;
    padding-bottom: 48px;
}

.app-footer {
    background: color-mix(in srgb, var(--surface, #fff) 94%, var(--page-bg, #f4f4f5));
    border-top: 1px solid var(--border, #d4d4d8);
    color: var(--muted-text, #71717a);
    flex: 0 0 auto;
    font-size: 12px;
}

.app-footer__inner {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: 0 auto;
    min-height: 44px;
    padding: 9px 24px;
    width: 100%;
}

.layout-boxed .app-footer__inner {
    max-width: 1180px;
}

.app-footer__inner p {
    margin: 0;
}

.app-footer__online {
    align-items: center;
    display: flex;
    gap: 5px;
    min-width: 0;
}

.app-footer__online > span:last-child {
    overflow-wrap: anywhere;
}

.app-footer__presence {
    background: #16a34a;
    border: 2px solid color-mix(in srgb, #16a34a 24%, var(--surface, #fff));
    border-radius: 50%;
    flex: 0 0 auto;
    height: 9px;
    width: 9px;
}

.app-footer__version {
    flex: 0 0 auto;
    text-align: right;
}

@media (max-width: 560px) {
    .app-footer__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .app-footer__version {
        padding-left: 14px;
        text-align: left;
    }
}

.narrow-page {
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
}

.login-grid {
    align-content: center;
    align-items: center;
    display: grid;
    grid-auto-rows: auto;
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 320px;
    min-height: calc(100vh - 96px);
    text-align: center;
}

.login-grid .card {
    text-align: left;
    width: 100%;
}

.login-card {
    background: color-mix(in srgb, var(--surface, #fff) 70%, transparent);
    backdrop-filter: blur(10px);
    border-color: color-mix(in srgb, var(--border, #e4e4e7) 68%, transparent);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
    padding: 16px;
}

.login-card h1 {
    font-size: 1.45rem;
    line-height: 1;
    margin: 0 0 6px;
    text-align: center;
}

.login-card h2 {
    font-size: 1.05rem;
    margin: 0 0 14px;
    text-align: center;
}

.login-card .form-stack {
    gap: 12px;
}

.login-card label {
    margin-bottom: 5px;
}

.login-card input {
    padding: 8px 10px;
}

.eyebrow {
    color: #0f766e;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.page-title {
    color: var(--page-title-colour, #ffffff);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    margin: 0;
}

.lead {
    color: #52525b;
    line-height: 1.7;
    max-width: 620px;
}

.stack {
    display: grid;
    gap: 24px;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.section-head:not(.section-head--compact),
.module-page-head {
    align-items: center;
    background: color-mix(in srgb, var(--surface, #ffffff) 96%, var(--primary, #18181b));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 18%, #dbe2ea);
    border-left: 4px solid var(--card-header-bg, var(--primary, #18181b));
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    color: #111827;
    padding: 11px 14px;
}

.section-head:not(.section-head--compact) .page-title,
.section-head:not(.section-head--compact) .lead,
.section-head:not(.section-head--compact) .eyebrow,
.module-page-head .page-title,
.module-page-head .lead,
.module-page-head .eyebrow {
    color: #111827;
}

.section-head:not(.section-head--compact) .page-title,
.module-page-head .page-title {
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    line-height: 1.08;
}

.section-head:not(.section-head--compact) .eyebrow,
.module-page-head .eyebrow {
    font-size: .68rem;
    margin: 0 0 4px;
}

.section-head:not(.section-head--compact) .lead,
.module-page-head .lead {
    font-size: .92rem;
    line-height: 1.4;
    margin: 6px 0 0;
    max-width: 720px;
}

.page-back-button {
    align-items: center;
    background: #ffffff !important;
    border-color: #94a3b8 !important;
    color: #111827 !important;
    display: inline-flex;
    gap: 5px;
}

.page-back-button svg {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 18px;
}

.module-title,
.module-name {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.module-title__icon,
.module-name__icon {
    align-items: center;
    background: #e8f1e5;
    border: 1px solid #a8bd9d;
    color: #256b3a;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
}

.module-title__icon {
    border-radius: 7px;
    height: 44px;
    width: 44px;
}

.module-name__icon {
    background: #e8f2ff;
    border-color: #9dbce3;
    border-radius: 6px;
    color: #2563a7;
    height: 38px;
    width: 38px;
}

.module-title__icon svg,
.module-name__icon svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.module-title__icon svg {
    height: 25px;
    width: 25px;
}

.customer-page-title__icon {
    background: color-mix(in srgb, var(--primary, #2563eb) 11%, #ffffff);
    border-color: color-mix(in srgb, var(--primary, #2563eb) 36%, #dbeafe);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--primary, #2563eb) 12%, transparent);
    color: var(--primary, #2563eb);
}

.module-name__icon svg {
    height: 21px;
    width: 21px;
}

.module-title .page-title,
.module-title .lead,
.module-name .eyebrow,
.module-name h2 {
    margin-bottom: 0;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(24, 24, 27, .04);
}

.card-pad {
    padding: 22px;
}

.metric-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-label,
.muted,
dt {
    color: #71717a;
    color: var(--muted-text, #71717a);
}

.metric-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    margin-top: 8px;
}

.split-grid {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.split-grid > :first-child,
.split-grid > :last-child {
    border-radius: 0;
    min-width: 0;
    padding: 12px 18px;
}

.split-grid > :first-child {
    background: var(--interface-split-left-bg, transparent);
}

.split-grid > :last-child {
    background: var(--interface-split-right-bg, transparent);
}

.dashboard-board {
    align-items: stretch;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
    margin: -28px -24px -48px;
    min-height: calc(100vh - 64px);
}

.dashboard-board__left,
.dashboard-board__right {
    align-self: stretch;
    min-width: 0;
    padding: 28px 8px 48px;
}

.dashboard-board__left {
    padding-left: 15px;
    padding-right: 13px;
}

.dashboard-board__right {
    padding-right: 24px;
}

.dashboard-board__left {
    background: var(--interface-split-left-bg, transparent);
}

.dashboard-board__right {
    background: var(--interface-split-right-bg, transparent);
    border-radius: 0;
    scroll-margin-top: 86px;
}

.dashboard-board__right.dashboard-placeholder {
    background: var(--interface-split-right-bg, transparent);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.dashboard-metrics {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-role-banner h1 {
    font-size: 1.2rem;
    margin: 4px 0 6px;
}

.dashboard-role-banner p:last-child {
    margin-bottom: 0;
}

.dashboard-search {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(24, 24, 27, .04);
    padding: 16px;
}

.dashboard-search--topbar {
    background: color-mix(in srgb, var(--surface, #ffffff) 90%, var(--interface-menu-1, #ffffff));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 1px 2px rgba(24, 24, 27, .08);
    margin: 0;
    max-width: 402px;
    padding: 0;
    width: 100%;
    z-index: 90;
}

.dashboard-search--topbar input {
    background: transparent;
    border: 0;
    min-height: 38px;
    padding: 7px 12px;
}

.dashboard-search--topbar input:focus {
    box-shadow: none;
    outline: none;
}

.dashboard-search--topbar .customer-lookup__results {
    z-index: 120;
}

.dashboard-search--topbar .field-hint {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 6px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
    left: 0;
    margin: 6px 0 0;
    padding: 6px 9px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 110;
}

.dashboard-topbar-tools {
    align-items: stretch;
    display: grid;
    gap: 8px;
    justify-items: start;
    width: 100%;
}

.dashboard-quicklinks {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(82px, 1fr));
    max-width: 402px;
    width: 100%;
}

.dashboard-quicklink {
    align-items: center;
    background: color-mix(in srgb, var(--surface, #ffffff) 92%, var(--interface-menu-1, #ffffff));
    border: 1px solid color-mix(in srgb, var(--interface-menu-1, #e5e7eb) 45%, var(--border, #cbd5e1));
    border-left-width: 0;
    color: var(--muted-text, #52525b);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 650;
    gap: 4px;
    justify-content: center;
    line-height: 1;
    min-height: 38px;
    padding: 6px 8px;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-quicklinks .dashboard-quicklink:first-child {
    border-left-width: 1px;
    border-radius: 6px 0 0 6px;
}

.dashboard-quicklinks .dashboard-quicklink:last-child {
    border-radius: 0 6px 6px 0;
}

.dashboard-quicklink svg {
    fill: none;
    flex: 0 0 17px;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    width: 17px;
}

.dashboard-quicklink:hover {
    background: color-mix(in srgb, var(--interface-menu-1, #e5e7eb) 18%, var(--surface, #ffffff));
    color: var(--text, #18181b);
}

.dashboard-quicklink--reminders {
    position: relative;
}

.dashboard-quicklink--reminders.is-active {
    background: color-mix(in srgb, var(--interface-menu-1, #e5e7eb) 28%, var(--surface, #ffffff));
    color: var(--text, #18181b);
}

.dashboard-reminder-badge {
    align-items: center;
    background: #dc2626;
    border: 1px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: .57rem;
    font-weight: 900;
    height: 17px;
    justify-content: center;
    line-height: 1;
    min-width: 17px;
    padding: 0 4px;
    position: absolute;
    right: 3px;
    top: 4px;
}

.dashboard-quicklink--disabled {
    cursor: not-allowed;
    opacity: .58;
    pointer-events: none;
}

.topbar__inner:has(.dashboard-topbar-tools) {
    gap: 0;
    grid-template-columns: 204px minmax(0, 1fr) auto;
    min-height: 50px;
    padding-left: 0;
    padding-right: 12px;
}

.topbar__inner:has(.dashboard-topbar-tools) .brand-hub {
    align-self: stretch;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    width: 204px;
}

.topbar__inner:has(.dashboard-topbar-tools) .brand {
    align-self: stretch;
    border-right: 1px solid color-mix(in srgb, var(--interface-menu-1, #ffffff) 62%, #000000);
    gap: 8px;
    justify-content: center;
    min-height: 50px;
    padding: 0 12px;
    width: 204px;
}

.topbar__inner:has(.dashboard-topbar-tools) .brand-hub__menu {
    top: 100%;
}

.topbar__inner:has(.dashboard-topbar-tools) .brand__logo {
    height: 38px;
    width: 38px;
}

.topbar__inner:has(.dashboard-topbar-tools) .brand__text {
    font-size: 1rem;
    font-weight: 800;
}

.topbar__inner:has(.dashboard-topbar-tools) .topbar__center {
    align-self: stretch;
    display: flex;
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-width: none;
    min-width: 0;
    width: 100%;
}

.topbar__inner:has(.dashboard-topbar-tools) .nav {
    align-self: stretch;
    flex-wrap: nowrap;
    gap: 0;
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    justify-self: end;
    min-width: 0;
}

.topbar__inner:has(.dashboard-topbar-tools) .nav > .nav__link {
    display: none;
}

.topbar__inner:has(.dashboard-topbar-tools) .nav > .nav__group:not(.nav__group--right) {
    display: none;
}

.topbar__inner:has(.dashboard-topbar-tools) .nav__trigger,
.topbar__inner:has(.dashboard-topbar-tools) .nav__button {
    border-left: 1px solid color-mix(in srgb, var(--interface-menu-1, #ffffff) 46%, var(--border, #cbd5e1));
    border-radius: 0;
    font-size: .88rem;
    min-height: 50px;
    padding: 0 11px;
    white-space: nowrap;
}

.topbar__inner:has(.dashboard-topbar-tools) .nav__trigger svg,
.topbar__inner:has(.dashboard-topbar-tools) .nav__button svg {
    flex-basis: 18px;
    height: 18px;
    width: 18px;
}

.dashboard-topbar-tools {
    align-items: stretch;
    display: flex;
    gap: 0;
    height: 100%;
    justify-items: stretch;
    min-width: 0;
    width: auto;
}

.dashboard-topbar-tools .dashboard-quicklinks {
    display: flex;
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
    width: auto;
}

.dashboard-topbar-tools .dashboard-quicklink {
    border-radius: 0;
    border-width: 0 1px 0 0;
    font-size: .88rem;
    min-height: 50px;
    padding: 0 13px;
}

.dashboard-topbar-tools .dashboard-quicklinks .dashboard-quicklink:first-child,
.dashboard-topbar-tools .dashboard-quicklinks .dashboard-quicklink:last-child {
    border-radius: 0;
}

.dashboard-search--topbar {
    align-self: center;
    border-radius: 4px;
    display: grid;
    flex: 0 0 220px;
    grid-template-columns: minmax(0, 1fr) 30px;
    margin-left: clamp(18px, 6vw, 92px);
    max-width: 220px;
    min-width: 220px;
    overflow: visible;
}

.dashboard-search--topbar input {
    font-size: .86rem;
    min-height: 30px;
    padding: 4px 7px;
}

.dashboard-search__submit {
    align-items: center;
    background: var(--surface, #fff);
    border: 0;
    border-left: 1px solid var(--border, #d4d4d8);
    border-radius: 0 4px 4px 0;
    color: var(--text, #18181b);
    cursor: pointer;
    display: flex;
    justify-content: center;
    min-height: 30px;
    padding: 0;
}

.dashboard-search__submit svg {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
    width: 17px;
}

.dashboard-search--topbar .customer-lookup__results {
    max-height: min(460px, calc(100vh - 88px));
    min-width: 360px;
    right: auto;
    width: min(460px, calc(100vw - 24px));
}

.dashboard-cart-shortcut,
.dashboard-delivery-shortcut {
    align-items: center;
    align-self: stretch;
    color: color-mix(in srgb, var(--text, #18181b) 64%, #9ca3af);
    display: inline-flex;
    justify-content: center;
    min-height: 50px;
    min-width: 48px;
    position: relative;
    text-decoration: none;
}

.dashboard-delivery-shortcut {
    margin-left: clamp(16px, 3vw, 42px);
}

.dashboard-cart-shortcut {
    margin-left: 4px;
}

.dashboard-cart-shortcut__cart {
    display: block;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .18));
    height: 32px;
    width: 38px;
}

.dashboard-cart-shortcut__cart-handle {
    fill: none;
    stroke: #111827;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
}

.dashboard-cart-shortcut__cart-basket {
    animation: delivery-lorry-bob 2s ease-in-out infinite;
    fill: color-mix(in srgb, var(--card-header-bg, #2563eb) 72%, #ffffff);
    stroke: #111827;
    stroke-linejoin: round;
    stroke-width: 4;
}

.dashboard-cart-shortcut__cart-shine {
    animation: delivery-lorry-bob 2s ease-in-out infinite;
    fill: none;
    opacity: .8;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-width: 3;
}

.dashboard-cart-shortcut__cart-wheel {
    animation: delivery-wheel-spin .9s linear infinite;
    stroke: #111827;
    transform-box: fill-box;
    transform-origin: center;
}

.dashboard-cart-shortcut__cart-wheel circle {
    fill: #312d46;
    stroke-width: 4;
}

.dashboard-cart-shortcut__cart-wheel path {
    fill: none;
    stroke: #8b85a3;
    stroke-linecap: round;
    stroke-width: 2;
}

.dashboard-cart-shortcut:hover .dashboard-cart-shortcut__cart {
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .24));
}

.dashboard-delivery-shortcut__van {
    animation: delivery-lorry-bob 1.8s ease-in-out infinite;
    display: block;
    height: 32px;
    width: 52px;
}

.dashboard-delivery-shortcut__van-body,
.dashboard-delivery-shortcut__van-roof {
    fill: #e8e4ee;
    stroke: #111827;
    stroke-linejoin: round;
    stroke-width: 4;
}

.dashboard-delivery-shortcut__van-window {
    fill: #38a7ff;
    stroke: #111827;
    stroke-linejoin: round;
    stroke-width: 4;
}

.dashboard-delivery-shortcut__van-line {
    fill: none;
    stroke: #111827;
    stroke-linecap: round;
    stroke-width: 3;
}

.dashboard-delivery-shortcut__van-wheel {
    animation: delivery-wheel-spin .9s linear infinite;
    stroke: #111827;
    transform-box: fill-box;
    transform-origin: center;
}

.dashboard-delivery-shortcut__van-wheel circle {
    fill: #312d46;
    stroke-width: 4;
}

.dashboard-delivery-shortcut__van-wheel path {
    fill: none;
    stroke: #6b6680;
    stroke-linecap: round;
    stroke-width: 2;
}

.dashboard-delivery-shortcut:hover .dashboard-delivery-shortcut__van {
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .24));
}

@keyframes delivery-lorry-bob {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1px);
    }
}

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

.dashboard-cart-shortcut__badge {
    align-items: center;
    background: #ff1616;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: .66rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    min-height: 20px;
    min-width: 20px;
    padding: 0 5px;
    position: absolute;
    right: 2px;
    top: 8px;
}

.dashboard-checkout-queue {
    background: var(--surface, #ffffff);
    border: 1px solid var(--status-colour, var(--card-header-bg, #334155));
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-checkout-queue__head {
    align-items: center;
    background: var(--status-colour, var(--card-header-bg, #334155));
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    min-height: var(--panel-header-height);
    padding: var(--panel-header-padding);
}

.dashboard-checkout-queue__head h2,
.dashboard-checkout-queue__head .eyebrow {
    color: inherit;
    margin: 0;
}

.dashboard-checkout-queue__head strong {
    align-items: center;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    display: inline-flex;
    font-size: 1rem;
    justify-content: center;
    min-height: 34px;
    min-width: 42px;
    padding: 5px 10px;
}

.dashboard-checkout-queue__body {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.dashboard-checkout-job {
    align-items: stretch;
    background: var(--surface-soft, #f8fafc);
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
}

.dashboard-checkout-job__main {
    display: grid;
    gap: 10px;
}

.dashboard-checkout-job h3 {
    font-size: 1rem;
    margin: 0 0 2px;
}

.dashboard-checkout-job p {
    color: var(--muted-text, #71717a);
    font-size: .86rem;
    margin: 0;
}

.dashboard-checkout-job dl {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.dashboard-checkout-job dt {
    color: var(--muted-text, #71717a);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-checkout-job dd {
    font-size: .88rem;
    font-weight: 800;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

.dashboard-checkout-job__actions {
    align-content: center;
    display: grid;
    gap: 8px;
    min-width: 118px;
}

.dashboard-checkout-job__actions .button,
.dashboard-checkout-job__actions .button-secondary {
    min-height: 36px;
    text-align: center;
}

.job-status-group {
    background: var(--status-colour, #64748b);
    border: 1px solid var(--status-colour, #64748b);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(24, 24, 27, .04);
    overflow: hidden;
}

.job-status-group__head {
    align-items: center;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .26);
    color: #fff;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-height: 25px;
    padding: 6px 8px;
}

.job-status-group__actions {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.job-status-group__head h2 {
    font-size: .86rem;
    margin: 0;
}

.dashboard-recent-group {
    --status-colour: #64748b;
}

.job-card-list {
    background: color-mix(in srgb, var(--status-colour, #64748b) 13%, var(--surface, #fff));
    display: grid;
    gap: 7px;
    padding: 6px;
}

.job-mini-card {
    align-items: start;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 6px;
    display: grid;
    gap: 7px 6px;
    grid-template-columns: 62px minmax(0, 1fr) 34px;
    grid-template-rows: auto auto auto;
    min-height: 0;
    padding: 6px;
}

.job-mini-card:hover {
    border-color: var(--status-colour, #64748b);
}

.job-mini-card__brand-thumb {
    align-items: center;
    align-self: center;
    background: #111827;
    border: 1px solid color-mix(in srgb, var(--status-colour, #64748b) 18%, #000);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    color: #fff;
    display: inline-flex;
    font-size: .58rem;
    font-weight: 900;
    grid-column: 1;
    grid-row: 1;
    height: 58px;
    justify-content: center;
    justify-self: start;
    letter-spacing: 0;
    line-height: 1;
    overflow: hidden;
    padding: 0 4px;
    text-transform: uppercase;
    width: 58px;
}

.job-mini-card__brand-thumb--apple {
    background: #f8fafc;
    color: #111827;
}

.job-mini-card__brand-thumb--dell,
.job-mini-card__brand-thumb--hp,
.job-mini-card__brand-thumb--hewlett-packard {
    background: #020617;
}

.job-mini-card__brand-thumb--lenovo {
    background: #dc2626;
}

.job-mini-card__brand-thumb--acer {
    background: #16a34a;
}

.job-mini-card__brand-thumb--asus {
    background: #1d4ed8;
}

.job-mini-card__brand-thumb--pc-specialist {
    background: #334155;
}

.job-mini-card__brand-thumb--image {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    height: 58px;
    padding: 0;
    width: 58px;
}

.job-mini-card__brand-thumb img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.job-mini-card__main {
    display: contents;
}

.job-mini-card__title {
    align-items: center;
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
    font-size: .95rem;
    font-weight: 800;
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    line-height: 1.08;
    min-width: 0;
    place-self: center;
    text-align: center;
}

.job-mini-card__preview-button {
    align-items: center;
    align-self: center;
    background: var(--status-colour, #64748b);
    border: 1px solid var(--status-colour, #64748b);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: .95rem;
    font-weight: 900;
    grid-column: 3;
    grid-row: 1;
    height: 36px;
    justify-content: center;
    justify-self: end;
    line-height: 1;
    margin-left: 0;
    width: 30px;
}

.job-mini-card__preview-button:hover,
.job-mini-card__preview-button:focus {
    background: color-mix(in srgb, var(--status-colour, #64748b) 84%, #000);
    border-color: color-mix(in srgb, var(--status-colour, #64748b) 84%, #000);
    color: #fff;
    outline: none;
}

.job-mini-card__icon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    height: 14px;
    justify-content: center;
    width: 14px;
}

.job-mini-card__icon svg {
    fill: none;
    height: 14px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 14px;
}

.job-mini-card__icon--status-eye {
    color: #ef4444;
}

.job-mini-card__icon--status-eye svg {
    fill: color-mix(in srgb, #ef4444 18%, transparent);
    stroke-width: 2.4;
}

.job-mini-card__inline-meta {
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--status-colour, #64748b) 26%, var(--border, #e4e4e7));
    border-radius: 5px;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}

.job-mini-card__inline-meta::before {
    background: color-mix(in srgb, var(--status-colour, #64748b) 22%, var(--border, #e4e4e7));
    bottom: 0;
    content: "";
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: 1;
}

.job-mini-card__inline-meta div {
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--status-colour, #64748b) 18%, var(--border, #e4e4e7));
    display: grid;
    gap: 4px;
    grid-template-columns: 18px minmax(0, 1fr);
    justify-content: stretch;
    min-width: 0;
    order: 40;
    padding: 5px 4px;
    position: relative;
    text-align: left;
    z-index: 0;
}

.job-mini-card__inline-meta dt {
    align-items: center;
    color: var(--status-colour, #64748b);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

.job-mini-card__inline-meta dd {
    align-self: center;
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.15;
    margin: 0;
    overflow-wrap: anywhere;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--device-id {
    order: 1;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--jobsheet-id {
    order: 2;
}

.job-mini-card__inline-eye {
    align-items: center;
    color: #2563eb;
    display: inline-flex;
    margin-left: 6px;
    vertical-align: middle;
}

.job-mini-card__inline-eye svg {
    fill: color-mix(in srgb, #2563eb 18%, transparent);
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    width: 17px;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--device-type {
    order: 3;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--model,
.job-mini-card__inline-meta .job-mini-card__meta-item--device-make {
    max-width: 100%;
    order: 4;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--assigned-user {
    order: 5;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--time {
    order: 6;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--scheduled {
    order: 7;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--priority {
    order: 8;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--contact-method {
    order: 9;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--asset-type {
    order: 10;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--status-check {
    order: 11;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--call-status {
    order: 12;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--storage {
    order: 13;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--progress {
    order: 14;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--customer-repair {
    order: 15;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--repair-cart {
    order: 98;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--received {
    order: 99;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--empty {
    min-height: 31px;
    order: 100;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--empty dt,
.job-mini-card__inline-meta .job-mini-card__meta-item--empty dd {
    visibility: hidden;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--device-type dd {
    font-weight: 400;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--device-type dd strong {
    font-weight: 800;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--device-type dd span {
    font-weight: 400;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--model dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--time dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--repair-cart dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--received dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--assigned-user dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--scheduled dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--contact-method dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--priority dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--status-check dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--call-status dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--storage dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--progress dd,
.job-mini-card__inline-meta .job-mini-card__meta-item--customer-repair dd {
    font-size: .73rem;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--repair-cart dd {
    color: #16a34a;
    font-weight: 800;
}

.job-mini-card .job-mini-card__inline-meta--details {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 8px;
}

.job-mini-card__inline-meta--details::before {
    display: none;
}

.job-mini-card--compact .job-mini-card__inline-meta--details > div {
    align-items: start;
    background: color-mix(in srgb, var(--status-colour, #64748b) 9%, var(--surface, #fff));
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--status-colour, #64748b) 20%, var(--border, #e4e4e7));
    border-radius: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 8px;
    text-align: left;
}

.job-mini-card__inline-meta--details > div:last-child {
    border-bottom: 0;
}

.job-mini-card__inline-meta--details dt {
    color: var(--muted-text, #71717a);
    gap: 6px;
    line-height: 1.35;
    text-transform: none;
}

.job-mini-card__inline-meta--details dt .sr-only {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

.job-mini-card__inline-meta--details dd {
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
}

.job-mini-card__fault {
    border-top: 1px solid var(--border, #e4e4e7);
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: 8px;
    text-align: left;
}

.job-mini-card__fault summary {
    align-items: center;
    color: var(--muted-text, #71717a);
    cursor: pointer;
    display: inline-flex;
    font-size: .85rem;
    font-weight: 800;
    gap: 6px;
    list-style: none;
}

.job-mini-card__fault summary::-webkit-details-marker {
    display: none;
}

.job-mini-card__fault summary::after {
    content: "+";
    font-weight: 900;
}

.job-mini-card__fault[open] summary::after {
    content: "-";
}

.job-mini-card__fault p {
    font-size: .92rem;
    line-height: 1.45;
    margin: 8px 0 0;
}

.job-mini-card--compact {
    gap: 5px 6px;
    grid-template-columns: 52px minmax(0, 1fr) 30px;
    padding: 5px;
}

.job-mini-card--compact .job-mini-card__brand-thumb,
.job-mini-card--compact .job-mini-card__brand-thumb--image {
    height: 48px;
    width: 48px;
}

.job-mini-card__identity {
    align-self: center;
    display: grid;
    gap: 3px;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    text-align: center;
}

.job-mini-card--compact .job-mini-card__title {
    display: flex;
    font-size: .9rem;
    grid-column: auto;
    grid-row: auto;
    line-height: 1.05;
    min-width: 0;
    place-self: auto;
}

.job-mini-card__subtitle {
    color: var(--muted-text, #64748b);
    display: grid;
    font-size: .66rem;
    font-weight: 650;
    gap: 1px;
    line-height: 1.05;
    min-width: 0;
}

.job-mini-card__subtitle > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-mini-card--compact .job-mini-card__preview-button {
    height: 32px;
    width: 28px;
}

.job-mini-card--compact .job-mini-card__inline-meta:not(.job-mini-card__inline-meta--details) > .job-mini-card__meta-item {
    display: none;
}

.job-mini-card--compact .job-mini-card__inline-meta:not(.job-mini-card__inline-meta--details) > .job-mini-card__meta-item--device-id,
.job-mini-card--compact .job-mini-card__inline-meta:not(.job-mini-card__inline-meta--details) > .job-mini-card__meta-item--jobsheet-id,
.job-mini-card--compact:has(.job-mini-card__fault[open]) .job-mini-card__inline-meta:not(.job-mini-card__inline-meta--details) > .job-mini-card__meta-item {
    display: grid;
}

.job-mini-card--compact:has(.job-mini-card__fault[open]) .job-mini-card__inline-meta:not(.job-mini-card__inline-meta--details) > :is(
    .job-mini-card__meta-item--device-type,
    .job-mini-card__meta-item--model,
    .job-mini-card__meta-item--asset-type,
    .job-mini-card__meta-item--assigned-user
) {
    display: none;
}

.job-mini-card--compact .job-mini-card__inline-meta--compact-empty {
    display: none;
}

body .job-mini-card--compact .job-mini-card__inline-meta[data-card-placement] > .job-mini-card__meta-item {
    display: grid;
}

.job-mini-card__meta-item--field dd {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.job-mini-card--compact:has(.job-mini-card__fault[open]) .job-mini-card__inline-meta--compact-empty {
    display: grid;
}

.job-mini-card--compact .job-mini-card__inline-meta div {
    min-height: 29px;
    padding: 4px;
}

.job-mini-card--compact .job-mini-card__fault {
    padding-top: 5px;
}

.job-mini-card--compact .job-mini-card__fault summary {
    font-size: .76rem;
}

.dashboard-placeholder {
    border: 1px dashed color-mix(in srgb, var(--interface-split-right-bg, var(--border, #d4d4d8)) 74%, #000);
    border-radius: 8px;
    color: var(--muted-text, #71717a);
    min-height: 420px;
    padding: 24px;
}

.dashboard-preview-empty {
    display: grid;
    gap: 8px;
}

.dashboard-preview-empty h2 {
    margin: 0;
}

.dashboard-status-panel .dashboard-preview-empty,
.dashboard-status-panel .dashboard-preview-empty .eyebrow {
    color: var(--interface-split-right-text, var(--text, #18181b));
}

.dashboard-role-banner h1 {
    font-size: 1.15rem;
    margin: 0;
}

.dashboard-skin-picker {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
}

.dashboard-skin-option {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    gap: 6px;
    min-width: 0;
    padding: 7px 8px;
}

.dashboard-skin-option input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.dashboard-skin-option::before {
    background:
        linear-gradient(var(--sw1), var(--sw2)) 0 0 / 42% 42% no-repeat,
        linear-gradient(var(--sw4), var(--sw4)) 100% 0 / 58% 42% no-repeat,
        linear-gradient(var(--sw3), var(--sw3)) 0 100% / 42% 58% no-repeat,
        linear-gradient(var(--sw4), var(--sw4)) 100% 100% / 58% 58% no-repeat;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
    content: "";
    flex: 0 0 32px;
    height: 24px;
}

.dashboard-skin-option span {
    font-size: .76rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-skin-option:has(input:checked) {
    box-shadow: 0 0 0 2px var(--primary, #18181b);
}

.dashboard-skin-option--clean {
    --sw1: #cccccc;
    --sw2: #cccccc;
    --sw3: #333333;
    --sw4: #ffffff;
    color: #18181b;
}

.dashboard-skin-option--graphite {
    --sw1: #898989;
    --sw2: #3d3d3d;
    --sw3: #6d604d;
    --sw4: #c8bc8d;
    color: #111827;
}

.dashboard-skin-option--midnight {
    --sw1: #ff0000;
    --sw2: #6b0000;
    --sw3: #28343b;
    --sw4: #ffffff;
    color: #18181b;
}

.dashboard-skin-option--high_contrast {
    --sw1: #e4e4e4;
    --sw2: #b1b1b1;
    --sw3: #8ca65e;
    --sw4: #dde8bb;
    color: #000;
}

.dashboard-skin-option--rainbow {
    --sw1: #dc2626;
    --sw2: #ea580c;
    --sw3: #16a34a;
    --sw4: #dbeafe;
    border-color: #a78bfa;
    color: #111827;
}

.dashboard-skin-option--futuristic {
    --sw1: #ff8132;
    --sw2: #ea5800;
    --sw3: #222222;
    --sw4: #ffffff;
    color: #18181b;
}

.dashboard-skin-option--black_blue {
    --sw1: #3396ff;
    --sw2: #ff8132;
    --sw3: #333333;
    --sw4: #ffffff;
    color: #18181b;
}

.dashboard-skin-option--black_red {
    --sw1: #f69b9a;
    --sw2: #ef4666;
    --sw3: #84af9c;
    --sw4: #c6c7aa;
    color: #18181b;
}

.dashboard-skin-option--black_green {
    --sw1: #d3ff04;
    --sw2: #a4c400;
    --sw3: #8f8f8f;
    --sw4: #ffffff;
    color: #18181b;
}

.dashboard-skin-more {
    grid-column: 1 / -1;
}

.dashboard-skin-more summary {
    align-items: center;
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    font-size: .78rem;
    font-weight: 850;
    justify-content: space-between;
    padding: 8px 10px;
}

.dashboard-skin-more summary::after {
    content: "v";
}

.dashboard-skin-more[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dashboard-skin-more[open] summary::after {
    content: "^";
}

.dashboard-skin-more > div {
    border: 1px solid var(--border, #e4e4e7);
    border-top: 0;
    border-radius: 0 0 7px 7px;
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 8px;
}

.dashboard-technician-workbench {
    display: grid;
    gap: 14px;
}

.dashboard-technician-workbench [data-dashboard-workbench-slot] > .dashboard-preview-empty,
.dashboard-technician-workbench [data-dashboard-workbench-slot] > .alert {
    padding: 24px;
}

.dashboard-assigned-jobs {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px 8px 0 0;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.dashboard-assigned-jobs__head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.dashboard-assigned-jobs__head span {
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-assigned-jobs__head strong {
    background: var(--primary, #18181b);
    border-radius: 999px;
    color: #fff;
    font-size: .78rem;
    min-width: 26px;
    padding: 5px 8px;
    text-align: center;
}

.dashboard-assigned-jobs__rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.dashboard-assigned-job {
    background: color-mix(in srgb, var(--primary, #18181b) 7%, var(--surface-soft, #f4f4f5));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 18%, var(--border, #e4e4e7));
    border-radius: 7px;
    color: var(--text, #18181b);
    cursor: pointer;
    display: grid;
    flex: 0 0 165px;
    gap: 3px;
    padding: 8px 10px;
    text-align: left;
}

.dashboard-assigned-job:hover,
.dashboard-assigned-job:focus {
    border-color: var(--primary, #18181b);
    outline: none;
}

.dashboard-assigned-job strong {
    font-size: .86rem;
}

.dashboard-assigned-job span,
.dashboard-assigned-job small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-assigned-job span {
    font-size: .82rem;
    font-weight: 750;
}

.dashboard-assigned-job small {
    color: var(--muted-text, #71717a);
}

.dashboard-technician-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
}

.dashboard-technician-summary__stats,
.dashboard-technician-summary__comms {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-technician-summary__head {
    background: color-mix(in srgb, var(--primary, #18181b) 86%, #fff);
    color: #fff;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    padding: 8px 10px;
    text-transform: uppercase;
}

.dashboard-technician-metrics {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 10px;
}

.dashboard-technician-metrics div {
    background: color-mix(in srgb, var(--primary, #18181b) 7%, var(--surface-soft, #f4f4f5));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 14%, var(--border, #e4e4e7));
    border-radius: 7px;
    display: grid;
    gap: 2px;
    min-height: 58px;
    place-items: center;
    text-align: center;
}

.dashboard-technician-metrics strong {
    font-size: 1.2rem;
    line-height: 1;
}

.dashboard-technician-metrics span {
    color: var(--muted-text, #71717a);
    font-size: .72rem;
    font-weight: 800;
}

.dashboard-technician-summary__comms p {
    font-weight: 850;
    margin: 10px 10px 2px;
    overflow-wrap: anywhere;
}

.dashboard-technician-summary__comms small {
    color: var(--muted-text, #71717a);
    display: block;
    margin: 0 10px 12px;
}

.dashboard-technician-profile-panel {
    align-items: start;
    display: grid;
    gap: 10px;
    grid-template-columns: 72px minmax(0, 1fr);
}

.dashboard-technician-profile-photo {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    color: var(--primary, #18181b);
    display: flex;
    font-size: 1rem;
    font-weight: 900;
    justify-content: center;
    overflow: hidden;
    width: 72px;
}

.dashboard-technician-profile-photo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.dashboard-technician-profile-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.dashboard-technician-profile-main h1,
.dashboard-technician-profile-main p {
    margin: 0;
}

.dashboard-technician-profile-main p {
    color: var(--muted-text, #71717a);
    font-weight: 850;
}

.dashboard-technician-photo-form {
    display: grid;
    gap: 6px;
    grid-column: 1 / -1;
}

.dashboard-technician-photo-form label {
    font-size: .78rem;
    font-weight: 850;
}

.dashboard-technician-photo-form__row {
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
}

.dashboard-technician-photo-form input[type="file"] {
    min-width: 0;
    width: 100%;
}

.job-mini-card__parts-placeholder {
    background: color-mix(in srgb, var(--status-colour, var(--primary, #18181b)) 10%, var(--surface, #fff));
    border: 1px dashed color-mix(in srgb, var(--status-colour, var(--primary, #18181b)) 40%, var(--border, #e4e4e7));
    border-radius: 7px;
    display: grid;
    gap: 3px;
    margin-top: 8px;
    padding: 8px 10px;
    text-align: left;
}

.job-mini-card__parts-placeholder strong {
    font-size: .78rem;
    font-weight: 900;
}

.job-mini-card__parts-placeholder span {
    color: var(--muted-text, #71717a);
    font-size: .76rem;
}

.dashboard-device-specification-form {
    display: grid;
    gap: 12px;
}

.dashboard-device-specification-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-status-panel {
    background: var(--interface-split-right-bg, transparent);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text, #18181b);
    padding: 0;
}

.dashboard-status-stack {
    display: grid;
    gap: 14px;
}

.dashboard-owner-status-stack {
    background: transparent;
    border-radius: 0;
}

.dashboard-status-quick-row {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.dashboard-status-quick-row .dashboard-status-card {
    container-type: inline-size;
    min-width: 0;
}

.dashboard-status-quick-row .dashboard-status-card__head {
    height: var(--panel-header-height);
    min-height: var(--panel-header-height);
    overflow: hidden;
}

.dashboard-status-quick-row .dashboard-status-card__head h2 {
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-status-quick-row .dashboard-status-card__head .eyebrow {
    font-size: .68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-status-quick-row .dashboard-order-list,
.dashboard-status-quick-row .dashboard-average-repair {
    padding: 0 10px 10px;
}

.dashboard-status-quick-row .dashboard-order-row {
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
}

.dashboard-status-quick-row .dashboard-order-row strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@container (max-width: 300px) {
    .dashboard-status-quick-row .dashboard-order-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-status-quick-row .dashboard-order-row__label {
        width: 100%;
    }

    .dashboard-status-quick-row .dashboard-order-row__label > span {
        overflow-wrap: normal;
        word-break: normal;
    }

    .dashboard-status-quick-row .dashboard-order-row strong {
        justify-self: start;
    }
}

.dashboard-status-quick-row .dashboard-average-repair > span {
    font-size: 1.35rem;
}

.dashboard-status-panel > .dashboard-preview-empty,
.dashboard-status-panel > .dashboard-preview-card,
.dashboard-status-panel > .alert {
    padding: 24px;
}

.dashboard-status-panel > .dashboard-workbench {
    padding: 0;
    width: 100%;
}

.dashboard-status-card {
    background: #ffffff;
    border: 1px solid var(--card-header-bg, var(--primary, #18181b));
    border-radius: 8px;
    box-shadow: none;
    display: grid;
    gap: 14px;
    overflow: hidden;
}

.dashboard-status-panel [data-dashboard-workbench-slot],
.dashboard-status-panel > .dashboard-preview-empty,
.dashboard-status-panel [data-dashboard-workbench-slot] > .dashboard-preview-empty {
    background: var(--interface-split-right-bg, transparent);
    border-radius: 0;
    box-shadow: none;
}

.dashboard-status-panel [data-dashboard-workbench-slot] > .dashboard-workbench {
    margin-left: -18px;
    width: calc(100% + 18px);
}

.dashboard-status-card__head {
    align-content: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #ffffff);
    display: grid;
    gap: 2px;
    min-height: var(--panel-header-height);
    padding: var(--panel-header-padding);
}

.dashboard-status-card__head:has(> .dashboard-status-card__head-icon) {
    align-items: center;
    grid-template-columns: 32px minmax(0, 1fr);
}

.dashboard-status-card__head-icon {
    align-items: center;
    align-self: center;
    background: rgb(255 255 255 / 16%);
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 6px;
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.dashboard-status-card__head-icon svg {
    height: 18px;
    width: 18px;
}

.dashboard-status-card__head h2 {
    color: inherit;
    font-size: 1rem;
    line-height: 1.05;
    margin: 0;
}

.dashboard-status-card__head .eyebrow {
    color: currentColor;
    line-height: 1;
    margin: 0;
    opacity: .74;
}

.dashboard-status-metrics {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    padding: 0 14px 14px;
}

.dashboard-status-metrics div,
.dashboard-order-row,
.dashboard-technician-stat-grid div {
    background: var(--surface-soft, #fafafa);
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--card-header-bg, #334155));
    border-radius: 8px;
    padding: 10px;
}

.dashboard-status-metrics .metric-value {
    font-size: 1.65rem;
    margin-top: 3px;
}

.dashboard-status-metric {
    align-items: center;
    display: grid;
    gap: 1px 9px;
    grid-template-columns: 32px minmax(0, 1fr);
}

.dashboard-status-metric__icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary, #18181b) 11%, var(--surface, #ffffff));
    border-radius: 6px;
    color: var(--primary, #18181b);
    display: flex;
    grid-row: 1 / span 2;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.dashboard-status-metric__icon svg {
    height: 17px;
    width: 17px;
}

.dashboard-status-metric .metric-label,
.dashboard-status-metric .metric-value {
    grid-column: 2;
}

.dashboard-order-list {
    display: grid;
    gap: 8px;
    padding: 0 14px 14px;
}

.dashboard-order-row {
    align-items: center;
    color: inherit;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.dashboard-order-row--button {
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
}

.dashboard-order-row:hover {
    border-color: var(--primary, #18181b);
}

.dashboard-order-row--placeholder {
    border-style: dashed;
    cursor: default;
}

.dashboard-order-row--placeholder:hover {
    border-color: var(--border, #e4e4e7);
}

.dashboard-order-row span {
    font-weight: 750;
    overflow-wrap: anywhere;
}

.dashboard-order-row__label {
    align-items: center;
    display: flex;
    gap: 7px;
    min-width: 0;
}

.dashboard-order-row__label > svg {
    color: var(--primary, #18181b);
    flex: 0 0 17px;
    height: 17px;
    width: 17px;
}

.dashboard-status-empty {
    align-items: center;
    display: flex;
    gap: 9px;
    margin: auto 0;
}

.dashboard-status-empty svg {
    color: var(--primary, #18181b);
    flex: 0 0 22px;
    height: 22px;
    width: 22px;
}

.dashboard-order-row strong {
    background: color-mix(in srgb, var(--primary, #18181b) 12%, white);
    border-radius: 999px;
    color: var(--primary, #18181b);
    flex: 0 0 auto;
    font-size: .82rem;
    padding: 5px 9px;
}

.dashboard-technician-stat-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    padding: 0 14px 14px;
}

.dashboard-statistics-summary {
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--card-header-bg, #334155));
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(210px, auto) minmax(180px, 1fr);
    margin: 0 14px 12px;
    padding: 0 0 12px;
}

.dashboard-statistics-summary > div:first-child {
    align-items: baseline;
    display: grid;
    gap: 3px 10px;
    grid-template-columns: auto auto;
    justify-content: start;
}

.dashboard-statistics-summary span {
    color: var(--muted-text, #71717a);
    font-size: .72rem;
    font-weight: 850;
    grid-column: 1;
}

.dashboard-statistics-summary strong {
    font-size: 1.35rem;
    grid-column: 2;
    grid-row: 1 / span 2;
}

.dashboard-statistics-summary small {
    color: var(--muted-text, #71717a);
    font-size: .66rem;
    grid-column: 1;
}

.dashboard-repair-race-controls {
    align-items: center;
    display: grid;
    gap: 7px;
    grid-template-columns: minmax(0, 1fr) 28px;
    min-width: 0;
}

.dashboard-statistics-summary__progress {
    background: color-mix(in srgb, var(--surface-soft, #fafafa) 82%, #cbd5e1);
    border: 1px solid color-mix(in srgb, var(--card-header-bg, #334155) 28%, #cbd5e1);
    border-radius: 5px;
    height: max(38px, calc(var(--race-lanes, 1) * 18px));
    overflow: hidden;
    position: relative;
}

.dashboard-statistics-summary__progress i {
    background: color-mix(in srgb, var(--card-header-bg, #334155) 18%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--card-header-bg, #334155) 64%, transparent);
    display: block;
    height: 100%;
}

.dashboard-repair-race::before {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 17px,
        color-mix(in srgb, var(--card-header-bg, #334155) 16%, transparent) 17px,
        color-mix(in srgb, var(--card-header-bg, #334155) 16%, transparent) 18px
    );
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.dashboard-repair-race::after {
    background: repeating-conic-gradient(#ffffff 0 25%, #1f2937 0 50%) 0 0 / 6px 6px;
    content: "";
    inset: 0 3px 0 auto;
    opacity: .72;
    position: absolute;
    width: 6px;
}

.dashboard-statistics-summary .dashboard-repair-race__lane-name {
    align-items: center;
    background: linear-gradient(90deg, color-mix(in srgb, var(--surface, #ffffff) 96%, var(--card-header-bg, #334155)) 82%, transparent);
    color: var(--text, #111827);
    display: flex;
    font-size: .62rem;
    font-weight: 850;
    height: 18px;
    left: 0;
    line-height: 1;
    max-width: 92px;
    overflow: hidden;
    padding: 0 12px 0 6px;
    position: absolute;
    text-overflow: ellipsis;
    top: calc(var(--race-lane, 0) * 18px);
    white-space: nowrap;
    width: 28%;
    z-index: 3;
}

.dashboard-statistics-summary .dashboard-repair-race__racer {
    animation: dashboard-horse-race var(--race-duration, 7.4s) linear 0s 1 forwards;
    color: #1f2937;
    height: 18px;
    left: -48px;
    position: absolute;
    top: calc(var(--race-lane, 0) * 18px);
    width: 40px;
    z-index: 1;
}

.dashboard-repair-race__racer svg {
    animation: dashboard-horse-gallop .28s ease-in-out infinite alternate;
    bottom: 0;
    display: block;
    fill: currentColor;
    height: 15px;
    left: 10px;
    overflow: visible;
    position: absolute;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 30px;
}

.dashboard-statistics-summary .dashboard-repair-race__profile {
    align-items: center;
    background: var(--surface, #ffffff);
    border: 1px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgb(15 23 42 / 28%);
    display: flex;
    font-size: 6px;
    font-weight: 900;
    height: 14px;
    justify-content: center;
    left: 13px;
    line-height: 1;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 14px;
    z-index: 2;
}

.dashboard-repair-race__profile img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.dashboard-statistics-summary .dashboard-repair-race__racer--1 {
    color: #2563eb;
}

.dashboard-statistics-summary .dashboard-repair-race__racer--2 {
    color: #16845b;
}

.dashboard-statistics-summary .dashboard-repair-race__racer--3 {
    color: #a16207;
}

.dashboard-statistics-summary .dashboard-repair-race__racer--4 {
    color: #be123c;
}

.dashboard-statistics-summary .dashboard-repair-race__racer--5 {
    color: #7c3aed;
}

@keyframes dashboard-horse-race {
    from { left: -48px; }
    to { left: calc(100% - 36px); }
}

@keyframes dashboard-horse-gallop {
    from { transform: translateY(1px) rotate(-2deg) scaleX(.96); }
    to { transform: translateY(-1px) rotate(2deg) scaleX(1); }
}

.dashboard-repair-race__racer.is-finished svg,
.dashboard-repair-race-controls.is-paused .dashboard-repair-race__racer,
.dashboard-repair-race-controls.is-paused .dashboard-repair-race__racer svg {
    animation-play-state: paused;
}

.dashboard-repair-race__toggle {
    align-items: center;
    align-self: center;
    background: var(--card-header-bg, #334155);
    border: 1px solid color-mix(in srgb, var(--card-header-bg, #334155) 76%, #ffffff);
    border-radius: 4px;
    color: var(--card-header-text, #ffffff);
    cursor: pointer;
    display: flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    width: 28px;
}

.dashboard-repair-race__toggle:hover,
.dashboard-repair-race__toggle:focus-visible {
    filter: brightness(1.15);
}

.dashboard-repair-race__toggle svg {
    fill: currentColor;
    height: 14px;
    width: 14px;
}

.dashboard-repair-race__toggle svg[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-repair-race__racer,
    .dashboard-repair-race__racer svg {
        animation: none;
    }

    .dashboard-repair-race__racer { left: var(--race-resting-position, 50%); }
}

.dashboard-technician-stat-card {
    align-content: start;
    background: var(--surface, #ffffff);
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--card-header-bg, #334155));
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 10px;
}

.dashboard-technician-stat-card h3 {
    font-size: .96rem;
    line-height: 1.2;
    margin: 0;
}

.dashboard-technician-stat-card__identity {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.dashboard-technician-stat-card__photo {
    align-items: center;
    background: color-mix(in srgb, var(--primary, #18181b) 12%, var(--surface, #ffffff));
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 78%, var(--primary, #18181b));
    border-radius: 50%;
    color: var(--primary, #18181b);
    display: flex;
    flex: 0 0 42px;
    font-size: .78rem;
    font-weight: 900;
    height: 42px;
    justify-content: center;
    overflow: hidden;
    width: 42px;
}

.dashboard-technician-stat-card__photo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.dashboard-technician-stat-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-technician-stat-grid div {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 48px;
}

.dashboard-technician-stat-grid strong {
    font-size: 1.25rem;
    line-height: 1;
}

.dashboard-technician-stat-grid span {
    color: var(--muted-text, #71717a);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.1;
    order: -1;
}

.dashboard-average-repair {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}

.dashboard-average-repair > span {
    font-size: 1.75rem;
    font-weight: 900;
}

.dashboard-average-repair > div {
    background: var(--surface-soft, #f4f4f5);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}

.dashboard-average-repair i {
    background: var(--primary, #18181b);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.dashboard-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 14px 14px;
}

.dashboard-analytics-chart {
    min-width: 0;
    padding: 14px;
}

.dashboard-analytics-chart:nth-child(even) {
    border-left: 1px solid var(--border, #d4d4d8);
}

.dashboard-analytics-chart:nth-child(n + 3) {
    border-top: 1px solid var(--border, #d4d4d8);
}

.dashboard-analytics-chart__head {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dashboard-analytics-chart__head h3 {
    font-size: .86rem;
    margin: 0;
}

.dashboard-analytics-chart__head p {
    color: var(--muted-text, #64748b);
    font-size: .66rem;
    margin: 2px 0 0;
}

.dashboard-chart-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    justify-content: flex-end;
}

.dashboard-chart-legend span {
    align-items: center;
    color: var(--muted-text, #64748b);
    display: flex;
    font-size: .61rem;
    font-weight: 800;
    gap: 4px;
    white-space: nowrap;
}

.dashboard-chart-legend i {
    background: #2563eb;
    border-radius: 2px;
    display: block;
    height: 7px;
    width: 7px;
}

.dashboard-chart-legend .is-completed,
.dashboard-column-chart .is-completed {
    background: #16a34a;
}

.dashboard-chart-legend .is-open,
.dashboard-technician-chart .is-open {
    background: #0f766e;
}

.dashboard-chart-legend .is-overdue,
.dashboard-technician-chart .is-overdue {
    background: #dc2626;
}

.dashboard-column-chart {
    align-items: end;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(8, minmax(20px, 1fr));
    height: 135px;
}

.dashboard-column-chart__group {
    align-items: stretch;
    display: grid;
    gap: 5px;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-width: 0;
}

.dashboard-column-chart__plot {
    align-items: end;
    border-bottom: 1px solid color-mix(in srgb, var(--border, #d4d4d8) 84%, var(--text, #111827));
    display: flex;
    gap: 2px;
    justify-content: center;
    min-height: 0;
}

.dashboard-column-chart__plot i {
    background: #2563eb;
    border-radius: 3px 3px 0 0;
    display: block;
    min-height: 2px;
    position: relative;
    width: min(10px, 42%);
}

.dashboard-column-chart__plot b {
    color: var(--text, #111827);
    font-size: .54rem;
    font-style: normal;
    left: 50%;
    line-height: 1;
    position: absolute;
    top: -10px;
    transform: translateX(-50%);
}

.dashboard-column-chart__group > span {
    color: var(--muted-text, #64748b);
    font-size: .54rem;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-donut-layout {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 135px;
}

.dashboard-donut-chart {
    align-content: center;
    aspect-ratio: 1;
    background: conic-gradient(var(--chart-segments));
    border-radius: 50%;
    display: grid;
    justify-items: center;
    position: relative;
}

.dashboard-donut-chart::after {
    background: var(--surface, #ffffff);
    border-radius: 50%;
    content: "";
    inset: 19px;
    position: absolute;
}

.dashboard-donut-chart strong,
.dashboard-donut-chart span {
    position: relative;
    z-index: 1;
}

.dashboard-donut-chart strong {
    font-size: 1.35rem;
    line-height: 1;
}

.dashboard-donut-chart span {
    color: var(--muted-text, #64748b);
    font-size: .62rem;
    font-weight: 800;
}

.dashboard-donut-legend {
    display: grid;
    gap: 5px;
    max-height: 140px;
    overflow: auto;
    padding-right: 4px;
}

.dashboard-donut-legend > div {
    align-items: center;
    display: grid;
    font-size: .66rem;
    gap: 6px;
    grid-template-columns: 8px minmax(0, 1fr) auto;
}

.dashboard-donut-legend i {
    background: var(--legend-colour, #64748b);
    border-radius: 2px;
    height: 8px;
    width: 8px;
}

.dashboard-donut-legend span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-turnaround-chart,
.dashboard-technician-chart {
    display: grid;
    gap: 6px;
}

.dashboard-turnaround-chart > div,
.dashboard-technician-chart > div {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 48px minmax(0, 1fr) 68px;
    min-width: 0;
}

.dashboard-turnaround-chart span,
.dashboard-technician-chart span {
    font-size: .61rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-turnaround-chart > div > i {
    background: color-mix(in srgb, #7c3aed 10%, var(--surface-soft, #f1f5f9));
    border-radius: 3px;
    display: block;
    height: 8px;
    overflow: hidden;
}

.dashboard-turnaround-chart > div > i b {
    background: #7c3aed;
    border-radius: inherit;
    display: block;
    height: 100%;
}

.dashboard-turnaround-chart strong,
.dashboard-technician-chart strong {
    font-size: .58rem;
    text-align: right;
}

.dashboard-technician-chart > div {
    grid-template-columns: 78px minmax(0, 1fr) 42px;
}

.dashboard-technician-chart > div > div {
    display: grid;
    gap: 2px;
}

.dashboard-technician-chart i {
    background: #0f766e;
    border-radius: 2px;
    display: block;
    height: 5px;
}

.dashboard-preview-card {
    color: var(--text, #18181b);
    display: grid;
    gap: 16px;
}

.dashboard-status-panel > .dashboard-preview-card,
.dashboard-status-panel > .dashboard-workbench {
    background: var(--interface-split-right-bg, transparent);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.dashboard-preview-card__head {
    align-items: start;
    border-bottom: 1px solid var(--border, #e4e4e7);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-bottom: 14px;
}

.dashboard-preview-card__head h2 {
    font-size: 1.6rem;
    margin: 0;
}

.dashboard-preview-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.dashboard-preview-grid div,
.dashboard-preview-section {
    background: var(--workbench-card-surface, #ffffff);
    border: 1px solid var(--card-header-bg, var(--primary, #18181b));
    border-radius: 8px;
    padding: 12px;
}

.dashboard-preview-grid dt {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.dashboard-preview-grid dd {
    font-weight: 750;
    margin: 0;
    overflow-wrap: anywhere;
}

.dashboard-preview-section h3 {
    font-size: .9rem;
    margin: 0 0 8px;
}

.dashboard-preview-section p {
    line-height: 1.5;
    margin: 0;
    white-space: pre-line;
}

.dashboard-workbench {
    --workbench-page-surface: color-mix(in srgb, var(--interface-split-left-bg, #e5e7eb) var(--workbench-dimmer, 100%), #d9dee4);
    --workbench-card-surface: color-mix(in srgb, color-mix(in srgb, var(--status-colour, #64748b) 10%, #ffffff) var(--workbench-dimmer, 100%), #ffffff);
    --workbench-inner-surface: var(--workbench-card-surface);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dashboard-workbench-activity-photos-grid {
    order: 10;
}

.dashboard-workbench-lower-grid {
    order: 20;
}

.dashboard-workbench-note-rows {
    order: 21;
}

.dashboard-status-panel .dashboard-workbench {
    background: var(--workbench-page-surface, var(--interface-split-left-bg, transparent));
}

.dashboard-board__right:has(.dashboard-workbench),
.dashboard-status-panel:has(.dashboard-workbench),
.dashboard-status-stack:has(.dashboard-workbench),
.dashboard-status-panel [data-dashboard-workbench-slot]:has(.dashboard-workbench) {
    background: color-mix(in srgb, var(--interface-split-left-bg, #e5e7eb) var(--workbench-dimmer, 100%), #d9dee4);
}

body.page-background-active .dashboard-board__left,
body.page-background-active .dashboard-board__right,
body.page-background-active .dashboard-board__right.dashboard-placeholder,
body.page-background-active .dashboard-status-panel,
body.page-background-active .dashboard-status-panel .dashboard-workbench,
body.page-background-active .dashboard-board__right:has(.dashboard-workbench),
body.page-background-active .dashboard-status-panel:has(.dashboard-workbench),
body.page-background-active .dashboard-status-stack:has(.dashboard-workbench),
body.page-background-active .dashboard-status-panel [data-dashboard-workbench-slot]:has(.dashboard-workbench) {
    background: transparent;
}

.dashboard-workbench-topbar,
.dashboard-workbench-menubar {
    margin-left: 0;
    margin-right: 6px;
}

.dashboard-workbench-topbar {
    align-items: center;
    background: var(--status-colour, var(--card-header-bg, #334155));
    border-radius: 8px 8px 0 0;
    color: var(--status-text-colour, #fff);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 31px;
    padding: 3px 8px;
}

.dashboard-workbench-placeholder-grid,
.dashboard-workbench-lower-grid,
.dashboard-workbench-note-rows,
.dashboard-workbench > .dashboard-preview-section {
    margin-top: 12px;
}

.dashboard-board__right.dashboard-status-panel {
    padding: 28px 8px 48px 12px;
}

.dashboard-workbench-topbar__identity,
.dashboard-workbench-topbar__ids {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.dashboard-workbench-topbar__identity strong {
    color: inherit;
    font-size: 1.08rem;
    line-height: 1.15;
    text-shadow: none;
}

.dashboard-workbench-device-link {
    color: inherit;
    display: inline-flex;
    text-decoration: none;
}

.dashboard-workbench-device-link:hover strong,
.dashboard-workbench-device-link:focus-visible strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dashboard-workbench-topbar__identity span,
.dashboard-workbench-topbar__ids span {
    color: inherit;
    font-size: .82rem;
    font-weight: 800;
}

.dashboard-workbench-topbar__ids {
    justify-content: flex-end;
}

.dashboard-workbench-topbar__ids span {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.dashboard-workbench-topbar__ids svg {
    fill: none;
    flex: 0 0 17px;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 17px;
}

.dashboard-workbench-topbar__ids strong {
    color: inherit;
}

.dashboard-progress-eye {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0, 55, 255, .22);
    border-radius: 999px;
    color: #0037ff;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    gap: 5px;
    line-height: 1;
    padding: 4px 8px;
    text-decoration: none;
}

.dashboard-progress-eye:hover {
    background: #eef3ff;
    color: #001fb8;
}

.dashboard-progress-eye svg {
    fill: none;
    stroke: currentColor;
}

.dashboard-progress-eye svg circle {
    fill: currentColor;
    stroke: currentColor;
}

.dashboard-progress-eye strong {
    color: currentColor;
}

.dashboard-progress-eye--inline {
    background: #fff;
    border-color: rgba(0, 55, 255, .24);
    box-shadow: 0 1px 2px rgba(0, 55, 255, .12);
    flex: 0 0 auto;
    min-height: 30px;
    padding: 4px 8px;
}

.dashboard-progress-eye--inline svg {
    flex: 0 0 24px;
    height: 24px;
    stroke-width: 2.4;
    width: 24px;
}

.dashboard-workbench-status-check-row dd {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    justify-content: center;
}

.dashboard-workbench-menubar {
    align-items: center;
    background: #000000;
    border: 0;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    min-height: 34px;
    padding: 0;
    position: relative;
    z-index: 40;
}

.dashboard-workbench-menu {
    position: relative;
}

.dashboard-workbench-menu__split-trigger {
    align-items: stretch;
    display: flex;
}

.dashboard-workbench-menu__link {
    align-items: center;
    color: #fff;
    display: inline-flex;
    font-size: .83rem;
    font-weight: 750;
    gap: 4px;
    min-height: 34px;
    padding: 7px 5px 7px 9px;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
}

a.dashboard-workbench-menu__link {
    cursor: pointer;
}

.dashboard-workbench-menu:hover .dashboard-workbench-menu__panel,
.dashboard-workbench-menu:focus-within .dashboard-workbench-menu__panel {
    display: grid;
}

.dashboard-workbench-menu__trigger {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #fff;
    cursor: default;
    display: inline-flex;
    gap: 4px;
    font: inherit;
    font-size: .83rem;
    font-weight: 750;
    min-height: 34px;
    padding: 7px 9px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
}

.dashboard-workbench-menu__trigger::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    content: "";
    display: inline-block;
    margin-left: 1px;
}

.dashboard-workbench-menu__trigger--split {
    cursor: pointer;
    padding: 7px 9px 7px 4px;
}

.dashboard-workbench-menu__trigger--split::after {
    margin-left: 0;
}

.dashboard-workbench-menu:hover .dashboard-workbench-menu__trigger,
.dashboard-workbench-menu:focus-within .dashboard-workbench-menu__trigger,
.dashboard-workbench-menu:hover .dashboard-workbench-menu__link,
.dashboard-workbench-menu:focus-within .dashboard-workbench-menu__link {
    background: #292929;
}

.dashboard-workbench-menu__link:focus-visible,
.dashboard-workbench-menu__trigger:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -3px;
}

.dashboard-workbench-menu__trigger--status {
    background: transparent;
    border-radius: 0;
    color: #ffffff;
    text-shadow: none;
}

.dashboard-workbench-menu:hover .dashboard-workbench-menu__trigger--status,
.dashboard-workbench-menu:focus-within .dashboard-workbench-menu__trigger--status {
    background: #292929;
    color: #ffffff;
}

.dashboard-workbench-menu__panel {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 12px rgba(15, 23, 42, .24);
    display: none;
    gap: 0;
    left: 0;
    min-width: 198px;
    padding: 8px 0;
    position: absolute;
    top: 100%;
    z-index: 50;
}

.dashboard-workbench-menu__panel > a,
.dashboard-workbench-menu__panel > span,
.dashboard-workbench-menu__panel button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--text, #18181b);
    display: grid;
    gap: 7px;
    grid-template-columns: 22px minmax(0, 1fr);
    font: inherit;
    font-size: .84rem;
    font-weight: 650;
    min-height: 32px;
    padding: 7px 10px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.dashboard-workbench-menu__panel a > span,
.dashboard-workbench-menu__panel span > span,
.dashboard-workbench-menu__panel button > span {
    align-items: center;
    display: inline-flex;
    font-size: 1rem;
    justify-content: center;
    line-height: 1;
    min-width: 22px;
}

.dashboard-workbench-menu__panel a:hover,
.dashboard-workbench-menu__panel a:focus-visible,
.dashboard-workbench-menu__panel button:hover:not(:disabled),
.dashboard-workbench-menu__panel button:focus-visible:not(:disabled) {
    background: #1d4ed8;
    color: #ffffff;
    box-shadow: inset 4px 0 0 #ffffff;
}

.dashboard-workbench-menu__panel a:focus-visible,
.dashboard-workbench-menu__panel button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -3px;
}

.dashboard-workbench-menu__panel > span {
    color: var(--muted-text, #71717a);
}

.dashboard-workbench-menu__panel small {
    border-top: 1px solid var(--border, #e4e4e7);
    color: var(--muted-text, #71717a);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    margin-top: 3px;
    padding: 9px 9px 2px;
    text-transform: uppercase;
}

.dashboard-workbench-menu__panel form {
    margin: 0;
}

.dashboard-workbench-menu__panel button:disabled {
    background: var(--status-option-colour, var(--status-colour, #64748b));
    color: #fff;
    cursor: default;
}

.dashboard-workbench-menu__icon svg {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 17px;
}

.dashboard-workbench-menu__panel .dashboard-workbench-menu__danger {
    color: #b91c1c;
}

.dashboard-workbench-menu__panel .dashboard-workbench-menu__danger:hover:not(:disabled),
.dashboard-workbench-menu__panel .dashboard-workbench-menu__danger:focus-visible:not(:disabled) {
    background: #b91c1c;
    color: #ffffff;
}

.dashboard-workbench-menu__danger svg {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 17px;
}

.dashboard-workbench-status-icon {
    background: color-mix(in srgb, currentColor 18%, transparent);
    border: 2px solid currentColor;
    border-radius: 2px;
    color: var(--status-colour, #64748b);
    display: inline-block;
    height: 13px;
    width: 16px;
}

.dashboard-workbench-menu__panel--status {
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 24px);
    max-height: 330px;
    overflow-x: hidden;
    overflow-y: auto;
}

.dashboard-workbench-menu__panel--status form,
.dashboard-workbench-menu__panel--status > span {
    --status-option-colour: #64748b;
}

.dashboard-workbench-menu__panel--status form {
    padding: 0;
    min-width: 0;
}

.dashboard-workbench-menu__panel--status button,
.dashboard-workbench-menu__panel--status > span {
    background: color-mix(in srgb, var(--status-option-colour) 82%, #ffffff);
    color: #fff;
    display: block;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-workbench-menu__panel--status button:hover:not(:disabled),
.dashboard-workbench-menu__panel--status button:focus-visible:not(:disabled) {
    background: var(--status-option-colour);
}

.dashboard-workbench-menu__panel--status button:disabled {
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, .75);
}

.dashboard-workbench-assignee-icon,
.dashboard-workbench-assignee-icon svg {
    display: inline-block;
    height: 16px;
    width: 16px;
}

.dashboard-workbench-assignee-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.dashboard-workbench-menu__panel--assignment {
    max-height: 330px;
    overflow-y: auto;
}

.dashboard-photo-caption-form .dashboard-photo-delete { color: #b91c1c; background: #fee2e2; border-color: #fca5a5; }
.dashboard-photo-caption-form .dashboard-photo-delete:hover { color: #fff; background: #b91c1c; }
.technician-note-links { margin-top: 10px; min-width: 0; }
.job-sales-profit-summary { display: grid; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #cbd5e1; background: #f8fafc; color: #17212b; overflow-wrap: anywhere; }
.job-profit-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font-size: .8rem; font-weight: 600; }
.job-profit-head small { color: #52606d; font-size: .7rem; font-weight: 400; }
.job-sales-profit-summary .job-profit-value { color: #166534; font-size: 1.75rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.job-sales-profit-summary .job-profit-value--loss { color: #b91c1c; }
.job-sales-profit-summary .job-profit-value--pending { color: #52606d; }
.job-profit-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 10px; border-top: 1px solid #dde3e9; }
.job-profit-breakdown > div { min-width: 0; }
.job-profit-breakdown > div + div { border-left: 1px solid #dde3e9; padding-left: 12px; }
.job-profit-breakdown dt { font-size: .72rem; color: #52606d; }
.job-profit-breakdown dd { margin: 3px 0 0; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.job-profit-note { color: #52606d; font-size: .68rem; line-height: 1.4; }
.job-profit-warning { display: block; border-left: 3px solid #b45309; background: #fffbeb; color: #78350f; padding: 6px 8px; font-size: .75rem; }
.technician-note-links__buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.technician-note-links__item { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 96px; max-width: 100%; min-width: 0; }
.technician-note-links__name { width: 100%; text-align: center; font-size: .75rem; line-height: 1.3; overflow-wrap: anywhere; color: var(--text, #18181b); }
.technician-note-links__slot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 4px;
    border: 1px solid #1d4ed8; background: #1d4ed8; color: #fff;
    font-weight: 700; text-decoration: none;
}
.technician-note-links__slot--empty { background: #f1f5f9; border: 1px dashed #94a3b8; color: #475569; }
a.technician-note-links__slot:hover { background: #1e3a8a; color: #fff; }
a.technician-note-links__slot:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.technician-note-links__editor { margin-top: 8px; }
.technician-note-links__editor summary { cursor: pointer; width: fit-content; }
.technician-note-links__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; margin: 10px 0; }
.technician-note-links__row label { min-width: 0; }
.technician-note-links__row input { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 600px) { .technician-note-links__row { grid-template-columns: minmax(0, 1fr); } }

.dashboard-workbench-menu__panel--assignment button {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-workbench-menu__panel--assignment button:disabled {
    background: #e8f2ff;
    box-shadow: inset 4px 0 0 var(--primary, #2563eb);
    color: var(--text, #18181b);
}

.dashboard-workbench-placeholder-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(290px, 1.08fr) minmax(260px, .92fr);
    padding: 0 6px 0 0;
}

.dashboard-workbench-placeholder {
    background: var(--workbench-card-surface, #edf0f2);
    border: 1px solid var(--card-header-bg, var(--primary, #18181b));
    border-radius: 8px;
    display: grid;
    gap: 12px;
    align-content: start;
    overflow: hidden;
}

.dashboard-workbench-placeholder--contact-card {
    container-type: inline-size;
    grid-column: 1;
    order: 1;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.dashboard-workbench-placeholder--credentials {
    border-radius: 8px;
    overflow: hidden;
    order: 3;
}

.dashboard-workbench-placeholder.dashboard-device-specifications {
    grid-column: 1 / -1;
    order: 3;
}

.dashboard-workbench-placeholder--youtube {
    grid-column: 2;
    order: 3;
}

.dashboard-youtube-card__bar {
    align-items: center;
    background: var(--card-header-bg, var(--primary, #18181b));
    color: #fff;
    display: flex;
    font-size: .83rem;
    justify-content: space-between;
    margin: 0;
    min-height: 30px;
    padding: 5px 9px;
}

.dashboard-youtube-card__title,
.dashboard-youtube-card__count {
    align-items: center;
    display: inline-flex;
}

.dashboard-youtube-card__title {
    gap: 6px;
}

.dashboard-youtube-card__title svg,
.dashboard-youtube-form__submit svg,
.dashboard-youtube-video__footer svg,
.dashboard-youtube-empty svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.dashboard-youtube-card__title svg {
    height: 17px;
    width: 17px;
}

.dashboard-youtube-card__count {
    background: rgba(255, 255, 255, .2);
    border-radius: 999px;
    font-size: .72rem;
    justify-content: center;
    min-height: 21px;
    min-width: 21px;
    padding: 2px 6px;
}

.dashboard-youtube-card {
    display: grid;
    gap: 10px;
    padding: 0 8px 8px;
}

.dashboard-youtube-form {
    background: color-mix(in srgb, var(--surface, #fff) 82%, var(--workbench-card-surface, #edf0f2));
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    display: grid;
    gap: 7px;
    padding: 8px;
}

.dashboard-youtube-form label {
    display: grid;
    font-size: .75rem;
    font-weight: 800;
    gap: 3px;
}

.dashboard-youtube-form label small {
    color: var(--muted-text, #64748b);
    font-size: .67rem;
    font-weight: 650;
}

.dashboard-youtube-form input {
    min-width: 0;
    width: 100%;
}

.dashboard-youtube-form__submit {
    align-items: center;
    display: inline-flex;
    gap: 5px;
    justify-self: end;
}

.dashboard-youtube-form__submit svg,
.dashboard-youtube-video__footer svg {
    height: 15px;
    width: 15px;
}

.dashboard-youtube-list {
    display: grid;
    gap: 9px;
}

.dashboard-youtube-switcher {
    display: flex;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.dashboard-youtube-switcher__button {
    align-items: center;
    background: color-mix(in srgb, var(--surface, #fff) 88%, var(--workbench-card-surface, #edf0f2));
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 5px;
    color: var(--text, #18181b);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
    gap: 4px;
    height: 28px;
    max-width: 170px;
    padding: 0 8px;
}

.dashboard-youtube-switcher__button:hover {
    border-color: var(--card-header-bg, var(--primary, #18181b));
}

.dashboard-youtube-switcher__button.is-active {
    background: var(--card-header-bg, var(--primary, #18181b));
    border-color: var(--card-header-bg, var(--primary, #18181b));
    color: #fff;
}

.dashboard-youtube-switcher__button:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
}

.dashboard-youtube-switcher__button svg {
    fill: none;
    flex: 0 0 14px;
    height: 14px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 14px;
}

.dashboard-youtube-switcher__button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-youtube-video {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    overflow: hidden;
}

.dashboard-youtube-video[hidden] {
    display: none;
}

.dashboard-youtube-video__player {
    aspect-ratio: 16 / 9;
    background: #111;
    width: 100%;
}

.dashboard-youtube-video__player iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

.dashboard-youtube-video__footer {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 34px;
    padding: 5px 6px 5px 8px;
}

.dashboard-youtube-video__footer > a {
    align-items: center;
    color: var(--text, #18181b);
    display: inline-flex;
    font-size: .76rem;
    font-weight: 800;
    gap: 5px;
    min-width: 0;
    text-decoration: none;
}

.dashboard-youtube-video__footer > a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-youtube-video__delete {
    align-items: center;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 5px;
    color: #dc2626;
    cursor: pointer;
    display: inline-flex;
    height: 27px;
    justify-content: center;
    padding: 0;
    width: 27px;
}

.dashboard-youtube-video__delete svg {
    height: 14px;
    width: 14px;
}

.dashboard-youtube-empty {
    align-items: center;
    color: var(--muted-text, #64748b);
    display: grid;
    font-size: .78rem;
    gap: 6px;
    justify-items: center;
    min-height: 110px;
    padding: 16px;
}

.dashboard-youtube-empty svg {
    height: 32px;
    opacity: .72;
    width: 32px;
}

.dashboard-device-details-card {
    align-items: start;
    display: grid;
    column-gap: 12px;
    row-gap: 10px;
    grid-template-columns: minmax(76px, 92px) minmax(0, 1fr);
    padding: 0 12px 12px;
}

.dashboard-device-details-card__media {
    display: grid;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.dashboard-workbench-placeholder--problem-messages {
    grid-column: 2;
    order: 2;
}

.dashboard-workbench-placeholder h3 {
    background: color-mix(in srgb, var(--status-colour, #334155) 88%, #fff);
    border-radius: 8px 8px 0 0;
    color: #fff;
    font-size: .9rem;
    line-height: 1;
    margin: 0;
    min-height: 34px;
    padding: 9px 12px;
}

.dashboard-workbench-subsection {
    display: grid;
    gap: 8px;
    margin: 0 12px 12px;
    overflow: hidden;
}

.dashboard-workbench-subsection h4 {
    background: color-mix(in srgb, var(--status-colour, #334155) 88%, #fff);
    color: #fff;
    font-size: .82rem;
    line-height: 1;
    margin: 0;
    padding: 8px 10px;
}

.dashboard-workbench-subsection .asset-list {
    margin: 0;
}

.dashboard-workbench-subsection--credentials .dashboard-device-credentials-form {
    padding: 0;
}

.dashboard-workbench-subsection--reported-issue p {
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 6px;
    font-size: .9rem;
    line-height: 1.45;
    margin: 0;
    padding: 10px;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-contact-message-list {
    margin: 0;
}

.dashboard-workbench-placeholder--contact-card,
.dashboard-workbench-placeholder--problem-messages {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 10px;
    overflow: visible;
}

.dashboard-workbench-placeholder--contact-card {
    gap: 0;
}

.dashboard-workbench-placeholder--contact-card > .dashboard-jobsheet-card + .dashboard-workbench-subsection,
.dashboard-workbench-placeholder--contact-card > .dashboard-workbench-order-summary + .dashboard-workbench-subsection,
.dashboard-workbench-placeholder--contact-card > .dashboard-workbench-subsection + .dashboard-workbench-subsection,
.dashboard-workbench-placeholder--problem-messages > .dashboard-workbench-subsection + .dashboard-workbench-subsection {
    margin-top: 10px;
}

.dashboard-workbench-placeholder--problem-messages > h3 {
    display: none;
}

.dashboard-workbench-placeholder--contact-card > h3,
.dashboard-workbench-placeholder--problem-messages > h3 {
    align-items: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--status-colour, #334155) 86%, #ffffff), color-mix(in srgb, var(--status-colour, #334155) 78%, #1f2937));
    border: 1px solid color-mix(in srgb, var(--status-colour, #334155) 50%, var(--border, #e4e4e7));
    border-radius: 8px 8px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
    font-size: .86rem;
    min-height: 28px;
    padding: 7px 10px;
}

.dashboard-workbench-placeholder--contact-card > .dashboard-jobsheet-card__bar {
    display: grid;
    border-bottom: 0;
    gap: 12px;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
}

.dashboard-jobsheet-card {
    background: var(--workbench-inner-surface, #f1f3f5);
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    border-top: 0;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    padding: 8px;
}

.dashboard-jobsheet-card .dashboard-workbench-order-summary,
.dashboard-jobsheet-card .dashboard-workbench-list {
    min-width: 0;
}

.dashboard-jobsheet-card .dashboard-workbench-list {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.dashboard-jobsheet-card__services {
    border-left: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
    padding-left: 10px;
}

.dashboard-jobsheet-card__services:first-child {
    border-left: 0;
    padding-left: 0;
}

.dashboard-jobsheet-card__services:first-child + .dashboard-workbench-order-summary {
    border-left: 2px solid color-mix(in srgb, var(--status-colour, #334155) 58%, var(--border, #e4e4e7));
    padding-left: 12px;
}

.dashboard-jobsheet-card__services > .asset-list {
    align-content: start;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.dashboard-jobsheet-card__reported-issue {
    display: grid;
    gap: 5px;
}

.dashboard-jobsheet-card__requested-services {
    display: grid;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    padding-top: 8px;
}

.dashboard-jobsheet-card__requested-services h4 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--status-colour, #334155) 78%, #ffffff), color-mix(in srgb, var(--status-colour, #334155) 68%, #2f2f2f));
    border: 1px solid color-mix(in srgb, var(--status-colour, #334155) 42%, var(--border, #e4e4e7));
    border-radius: 7px 7px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
    color: var(--status-text-colour, #ffffff);
    font-size: .78rem;
    font-weight: 900;
    margin: 0;
    min-height: 26px;
    padding: 7px 9px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.dashboard-jobsheet-card__reported-issue p {
    color: var(--text, #111827);
    font-size: .82rem;
    line-height: 1.4;
    margin: 0;
}

.dashboard-jobsheet-card__requested-services > .asset-list {
    align-content: start;
    background: var(--surface, #fff);
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    border-top: 0;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
    padding: 7px 8px;
}

.dashboard-jobsheet-card__subsection {
    display: grid;
    gap: 0;
}

.dashboard-jobsheet-card__subsection h4 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--status-colour, #334155) 78%, #ffffff), color-mix(in srgb, var(--status-colour, #334155) 68%, #2f2f2f));
    border: 1px solid color-mix(in srgb, var(--status-colour, #334155) 38%, var(--border, #e4e4e7));
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    color: var(--status-text-colour, #fff);
    font-size: .72rem;
    line-height: 1;
    margin: 0;
    min-height: 24px;
    padding: 6px 8px;
}

.dashboard-jobsheet-card__subsection .asset-list {
    background: color-mix(in srgb, var(--surface, #fff) 94%, var(--status-colour, #334155));
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: none;
    padding: 7px 8px;
}

.dashboard-workbench-placeholder--contact-card .dashboard-workbench-order-summary {
    padding: 0;
}

.dashboard-workbench-placeholder--contact-card .dashboard-workbench-list {
    background: color-mix(in srgb, var(--surface, #fff) 94%, var(--status-colour, #334155));
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    border-top: 0;
    border-radius: 0 0 7px 7px;
    overflow: hidden;
}

.dashboard-jobsheet-card .dashboard-workbench-list {
    border-top: 0 !important;
}

.dashboard-jobsheet-card .dashboard-workbench-list > div:first-child {
    border-top: 0 !important;
}

.dashboard-workbench-placeholder--contact-card .dashboard-workbench-list div {
    align-items: center;
    gap: 8px;
    grid-template-columns: 116px minmax(0, 1fr);
    min-height: 31px;
    padding: 5px 8px;
}

.dashboard-workbench-placeholder--contact-card .dashboard-workbench-list dt {
    align-items: center;
    display: flex;
    font-size: .68rem;
    letter-spacing: .04em;
    gap: 6px;
}

.dashboard-workbench-placeholder--contact-card .dashboard-workbench-list dd {
    font-size: .84rem;
    line-height: 1.15;
}

.dashboard-workbench-timing-key {
    align-items: center;
    border-radius: 4px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 22px;
    justify-content: center;
    min-height: 22px;
}

.dashboard-workbench-timing-row--booked .dashboard-workbench-timing-key {
    background: #2563eb;
}

.dashboard-workbench-timing-row--scheduled .dashboard-workbench-timing-key {
    background: #7c3aed;
}

.dashboard-workbench-timing-row--due .dashboard-workbench-timing-key {
    background: #d97706;
}

.dashboard-workbench-timing-row--closed .dashboard-workbench-timing-key {
    background: #15803d;
}

.dashboard-workbench-timing-row--reopened .dashboard-workbench-timing-key {
    background: #0891b2;
}

.dashboard-workbench-timing-row--due .dashboard-workbench-datetime svg {
    stroke: #d97706;
}

.dashboard-workbench-timing-row--scheduled .dashboard-workbench-datetime svg {
    stroke: #7c3aed;
}

.dashboard-workbench-timing-row--booked .dashboard-workbench-datetime svg {
    stroke: #2563eb;
}

.dashboard-workbench-timing-row--closed .dashboard-workbench-datetime svg {
    stroke: #15803d;
}

.dashboard-workbench-timing-row--reopened .dashboard-workbench-datetime svg {
    stroke: #0891b2;
}

.dashboard-workbench-timing-key svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 15px;
}

.dashboard-workbench-status-check-row {
    align-items: start !important;
}

.dashboard-workbench-status-check-row dt {
    align-items: flex-start;
    display: grid !important;
    gap: 5px;
    justify-items: start;
    justify-content: flex-start;
    justify-self: start;
    text-align: left;
    width: 100%;
}

.dashboard-workbench-status-check-row dd {
    justify-content: flex-start;
}

.dashboard-workbench-status-check-row .dashboard-progress-eye--inline {
    align-self: flex-start;
    border-color: rgba(239, 68, 68, .28);
    box-shadow: 0 1px 2px rgba(239, 68, 68, .12);
    color: #ef4444;
    min-height: 24px;
    padding: 3px 6px;
}

.dashboard-workbench-status-check-row .dashboard-progress-eye--inline:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.dashboard-workbench-status-check-row .dashboard-progress-eye--inline svg {
    flex-basis: 18px;
    height: 18px;
    width: 18px;
}

.dashboard-workbench-status-check-row dt > span {
    text-align: left;
    width: 100%;
}

.dashboard-workbench-placeholder--contact-card .dashboard-workbench-datetime {
    gap: 5px;
}

.dashboard-workbench-placeholder--contact-card .dashboard-workbench-subsection,
.dashboard-workbench-placeholder--problem-messages .dashboard-workbench-subsection {
    gap: 0;
    margin: 0;
}

.dashboard-workbench-placeholder--contact-card .dashboard-contact-messages,
.dashboard-workbench-placeholder--problem-messages .dashboard-contact-messages {
    overflow: visible;
    position: relative;
    z-index: 10;
}

.dashboard-workbench-placeholder--contact-card .dashboard-workbench-subsection h4,
.dashboard-workbench-placeholder--problem-messages .dashboard-workbench-subsection h4 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--status-colour, #334155) 82%, #ffffff), color-mix(in srgb, var(--status-colour, #334155) 72%, #2f2f2f));
    border: 1px solid color-mix(in srgb, var(--status-colour, #334155) 42%, var(--border, #e4e4e7));
    border-radius: 7px 7px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
    font-size: .78rem;
    min-height: 26px;
    padding: 7px 9px;
}

.dashboard-workbench-placeholder--contact-card .asset-list,
.dashboard-workbench-placeholder--problem-messages .asset-list,
.dashboard-workbench-placeholder--contact-card .dashboard-workbench-subsection--reported-issue p,
.dashboard-workbench-placeholder--problem-messages .dashboard-workbench-subsection--reported-issue p,
.dashboard-workbench-placeholder--contact-card .dashboard-contact-status-form,
.dashboard-workbench-placeholder--problem-messages .dashboard-contact-status-form,
.dashboard-workbench-placeholder--contact-card .dashboard-device-credentials-form {
    background: var(--workbench-inner-surface, #f1f3f5);
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    border-top: 0;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
    padding: 7px 8px;
}

.dashboard-workbench-placeholder--contact-card .dashboard-jobsheet-card .dashboard-workbench-list,
.dashboard-workbench-placeholder--contact-card .dashboard-jobsheet-card__services > .asset-list {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-contact-status-form {
    border-radius: 0;
    border-bottom: 0;
    position: relative;
    z-index: 30;
}

.dashboard-workbench-placeholder--contact-card .dashboard-contact-status-form {
    border-bottom: 0;
    border-radius: 0;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card {
    background: var(--workbench-inner-surface, #f1f3f5);
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    border-top: 0;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__visual-credentials {
    align-items: start;
    display: grid;
    column-gap: 9px;
    grid-template-columns: minmax(112px, 128px) minmax(0, 1fr);
    min-width: 0;
    row-gap: 10px;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__visual-row {
    align-items: start;
    display: grid;
    column-gap: 9px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(112px, 128px);
    min-width: 0;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__specs {
    align-self: stretch;
    border-left: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    display: grid;
    gap: 0;
    min-width: 0;
    padding-left: 10px;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__credentials {
    align-self: stretch;
    background: color-mix(in srgb, var(--surface, #fff) 96%, var(--status-colour, #334155));
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    display: grid;
    grid-column: 1 / -1;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__bar {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-device-details-card__credentials-label {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__media {
    align-self: start;
    grid-row: 1;
}


.dashboard-device-repair-warnings {
    display: grid;
    gap: 6px;
    grid-column: 1 / -1;
}

.dashboard-device-repair-warning {
    background: #fff7ed;
    border: 1px solid #fb923c;
    border-left: 5px solid #ea580c;
    border-radius: 7px;
    color: #7c2d12;
    display: grid;
    gap: 3px;
    padding: 8px 10px;
}

.dashboard-device-repair-warning strong {
    color: #9a3412;
    font-size: .78rem;
    letter-spacing: 0;
    line-height: 1.1;
}

.dashboard-device-repair-warning span {
    font-size: .78rem;
    line-height: 1.25;
}
.dashboard-device-details-card__assets {
    align-self: start;
    background: color-mix(in srgb, var(--surface, #fff) 96%, var(--status-colour, #334155));
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    display: grid;
    grid-column: 1 / -1;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}

.dashboard-device-details-card__assets h4 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--status-colour, #334155) 78%, #ffffff), color-mix(in srgb, var(--status-colour, #334155) 68%, #2f2f2f));
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    color: var(--status-text-colour, #fff);
    font-size: .72rem;
    line-height: 1;
    margin: 0;
    min-height: 24px;
    padding: 6px 8px;
}

.dashboard-device-details-card__assets .asset-list {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 7px 8px;
}

.dashboard-device-attachments {
    align-self: start;
    background: color-mix(in srgb, var(--surface, #fff) 96%, var(--status-colour, #334155));
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    border-radius: 7px;
    display: grid;
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
}

.dashboard-device-attachments > h4 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--status-colour, #334155) 78%, #ffffff), color-mix(in srgb, var(--status-colour, #334155) 68%, #2f2f2f));
    color: var(--status-text-colour, #fff);
    font-size: .72rem;
    line-height: 1;
    margin: 0;
    min-height: 24px;
    padding: 6px 8px;
}

.dashboard-device-attachment-upload {
    display: grid;
    gap: 5px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 7px 8px 2px;
}

.dashboard-device-attachment-upload .button {
    min-height: 42px;
    padding: 6px 9px;
}

.dashboard-device-attachment-help {
    color: var(--muted-text, #64748b);
    font-size: .62rem;
    padding: 0 8px 6px;
}

.dashboard-device-attachment-list {
    border-top: 1px solid var(--border, #e2e8f0);
    display: grid;
}

.dashboard-device-attachment-list > .muted {
    font-size: .72rem;
    margin: 0;
    padding: 7px 8px;
}

.dashboard-device-attachment-row {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    min-height: 42px;
    padding: 5px 7px;
}

.dashboard-device-attachment-row + .dashboard-device-attachment-row {
    border-top: 1px solid var(--border, #e2e8f0);
}

.dashboard-device-attachment-row__type {
    background: color-mix(in srgb, var(--status-colour, #334155) 12%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--status-colour, #334155) 32%, #cbd5e1);
    border-radius: 3px;
    color: color-mix(in srgb, var(--status-colour, #334155) 82%, #0f172a);
    font-size: .58rem;
    font-weight: 900;
    padding: 5px 2px;
    text-align: center;
}

.dashboard-device-attachment-row > div {
    display: grid;
    min-width: 0;
}

.dashboard-device-attachment-row a {
    color: var(--link, #0f766e);
    font-size: .7rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-device-attachment-row small {
    color: var(--muted-text, #64748b);
    font-size: .58rem;
}

.dashboard-device-attachment-row form {
    margin: 0;
}

.dashboard-device-details-card__identity {
    display: grid;
    gap: 2px;
    text-align: center;
    width: 100%;
}

.dashboard-device-details-card__identity strong,
.dashboard-device-details-card__identity span {
    background: transparent;
    border: 0;
    color: var(--text, #18181b);
    display: block;
    height: auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.dashboard-device-details-card__identity strong {
    font-size: .72rem;
    font-weight: 900;
    line-height: 1.05;
}

.dashboard-device-details-card__identity span {
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.05;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-workbench-device-icon--details {
    align-items: center;
    background: color-mix(in srgb, var(--status-colour, #334155) 7%, var(--surface-soft, #f4f4f5));
    border-radius: 7px;
    display: grid;
    gap: 3px;
    justify-items: center;
    min-height: 150px;
    padding: 3px;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-workbench-device-icon--details img,
.dashboard-workbench-placeholder--problem-messages .dashboard-workbench-device-icon--details > span {
    height: 106px;
    min-height: 0;
    min-width: 0;
    width: 106px;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-specifications .dashboard-specification-list div {
    padding: 4px 0;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-specifications .dashboard-specification-list--main {
    margin-top: 0;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-specifications .dashboard-specification-list--picture {
    border-top: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    margin-top: 4px;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__credentials .dashboard-device-credentials-form,
.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__credentials .dashboard-workbench-secret {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__credentials .dashboard-device-credentials-form {
    align-content: stretch;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100%;
}

.dashboard-credential-toolbar {
    align-items: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--status-colour, #334155) 78%, #ffffff), color-mix(in srgb, var(--status-colour, #334155) 68%, #2f2f2f));
    border: 1px solid color-mix(in srgb, var(--status-colour, #334155) 42%, var(--border, #d4d4d8));
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    color: var(--status-text-colour, #fff);
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-height: 28px;
    padding: 4px 6px 4px 8px;
}

.dashboard-device-details-card__credentials .dashboard-credential-toolbar {
    border: 0;
    border-radius: 0;
}

.dashboard-credential-toolbar strong {
    font-size: .76rem;
    font-weight: 900;
    line-height: 1;
}

.dashboard-credential-slot-select {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 4px;
    color: var(--card-header-bg, #334155);
    font-size: .76rem;
    font-weight: 850;
    max-width: 150px;
    min-height: 22px;
    padding: 1px 22px 1px 7px;
}

.dashboard-credential-save-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid #19c20f;
    border-radius: 6px;
    color: #19c20f;
    cursor: pointer;
    display: inline-flex;
    gap: 5px;
    height: 28px;
    justify-content: center;
    justify-self: start;
    margin-left: 8px;
    min-width: 92px;
    padding: 0 11px;
    width: auto;
}

.dashboard-credential-save-button:hover {
    background: #ecfff0;
    box-shadow: 0 0 0 2px rgba(25, 194, 15, .12);
}

.dashboard-credential-save-button svg {
    fill: none;
    flex: 0 0 15px;
    height: 15px;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 15px;
}

.dashboard-credential-save-button span {
    font-size: .78rem;
    font-weight: 850;
    line-height: 1;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__credentials .dashboard-device-credentials-form > .button {
    align-self: end;
    justify-self: start;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__credentials .dashboard-credential-editor {
    border: 0;
}

.dashboard-device-credentials-form:not(.has-active-credential) .dashboard-credential-editor,
.dashboard-device-credentials-form:not(.has-active-credential) .dashboard-credential-save-button {
    display: none;
}

.dashboard-device-import-panel {
    align-items: center;
    background: color-mix(in srgb, var(--surface, #fff) 94%, var(--card-header-bg, #334155));
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--card-header-bg, #334155));
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
    padding: 7px 8px;
}

.dashboard-device-import-panel span {
    color: var(--muted-text, #71717a);
    font-size: .78rem;
    font-weight: 750;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-credential-tabs--bar {
    background: transparent;
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-credential-tabs--bar .dashboard-credential-tab {
    background: color-mix(in srgb, #ffffff 88%, var(--status-colour, #334155));
    border-color: rgba(255, 255, 255, .88);
    color: var(--status-colour, #334155);
}

.dashboard-workbench-placeholder--problem-messages .dashboard-credential-tabs--bar .dashboard-credential-tab.is-active {
    background: #ffffff;
    color: var(--status-colour, #334155);
}

.dashboard-workbench > .dashboard-workbench-section,
.dashboard-workbench-lower-grid .dashboard-workbench-section,
.dashboard-workbench-note-rows .dashboard-workbench-section {
    margin-left: 0;
    margin-right: 4px;
    padding: 8px;
}

.dashboard-workbench > .dashboard-workbench-section h3,
.dashboard-workbench-lower-grid .dashboard-workbench-section h3,
.dashboard-workbench-note-rows .dashboard-workbench-section h3 {
    margin: -8px -8px 8px;
    padding: 8px;
}

.dashboard-workbench > .dashboard-workbench-section .dashboard-note-ledger__body,
.dashboard-workbench > .dashboard-workbench-section .dashboard-preview-photo-form,
.dashboard-workbench > .dashboard-workbench-section .dashboard-photo-grid,
.dashboard-workbench-lower-grid .dashboard-note-ledger__body,
.dashboard-workbench-note-rows .dashboard-note-ledger__body {
    margin-left: 0;
    margin-right: 0;
}

.dashboard-workbench-lower-grid,
.dashboard-workbench-note-rows {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.dashboard-workbench-lower-grid__sales,
.dashboard-workbench-lower-grid__timer,
.dashboard-workbench-note-rows {
    min-width: 0;
}

.dashboard-workbench-lower-grid__timer > .dashboard-timer-module {
    height: 100%;
}

@media (max-width: 1300px) {
    .dashboard-workbench-placeholder--contact-card > .dashboard-jobsheet-card__bar {
        grid-template-columns: 1fr;
    }

    .dashboard-workbench-placeholder--contact-card > .dashboard-jobsheet-card__bar span:last-child {
        border-top: 1px solid rgba(255, 255, 255, .32);
        padding-top: 6px;
    }

    .dashboard-jobsheet-card {
        grid-template-columns: 1fr;
    }

    .dashboard-jobsheet-card__services {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
        padding-left: 0;
        padding-top: 10px;
    }

    .dashboard-jobsheet-card__services:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .dashboard-jobsheet-card__services:first-child + .dashboard-workbench-order-summary {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
        padding-left: 0;
        padding-top: 10px;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__bar {
        grid-template-columns: 1fr;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__credentials-label {
        border-top: 0;
        padding-top: 0;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__bar > span:last-child {
        border-top: 1px solid rgba(255, 255, 255, .32);
        padding-top: 6px;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card {
        grid-template-columns: 1fr;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__credentials {
        padding-left: 0;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__specs {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
        padding-left: 0;
        padding-top: 10px;
    }
}

@media (min-width: 981px) {
    .dashboard-workbench-placeholder-grid {
        gap: 8px;
        grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
        padding-right: 4px;
    }

    .dashboard-workbench-placeholder--contact-card > .dashboard-jobsheet-card__bar,
    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__bar {
        gap: 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .dashboard-workbench-placeholder--contact-card > .dashboard-jobsheet-card__bar span:last-child,
    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__bar > span:last-child {
        border-left: 1px solid rgba(255, 255, 255, .32);
        padding-left: 10px;
        border-top: 0;
        padding-top: 0;
    }

    .dashboard-jobsheet-card,
    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card {
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 6px;
    }

    .dashboard-jobsheet-card__services {
        border-left: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
        border-top: 0;
        gap: 6px;
        padding-left: 7px;
        padding-top: 0;
    }

    .dashboard-jobsheet-card__services:first-child + .dashboard-workbench-order-summary {
        border-left: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
        border-top: 0;
        padding-left: 7px;
        padding-top: 0;
    }

    .dashboard-workbench-placeholder--contact-card .dashboard-workbench-list div {
        gap: 6px;
        grid-template-columns: 100px minmax(0, 1fr);
        min-height: 27px;
        padding: 4px 6px;
    }

    .dashboard-workbench-placeholder--contact-card .dashboard-workbench-list dt {
        font-size: .62rem;
        letter-spacing: .03em;
    }

    .dashboard-workbench-placeholder--contact-card .dashboard-workbench-list dd {
        font-size: .79rem;
    }

    .dashboard-workbench-placeholder--contact-card .dashboard-workbench-datetime {
        gap: 4px;
    }

    .dashboard-workbench-datetime svg {
        height: 13px;
        width: 13px;
    }

    .dashboard-workbench-placeholder--contact-card .asset-list,
    .dashboard-workbench-placeholder--problem-messages .asset-list,
    .dashboard-contact-status-form,
    .dashboard-contact-messages__body {
        padding: 5px 6px;
    }

    .asset-chip {
        font-size: .74rem;
        min-height: 24px;
        padding: 4px 7px;
    }

    .dashboard-contact-messages {
        gap: 5px;
    }

    .dashboard-contact-status__current,
    .dashboard-contact-status__menu button {
        min-height: 30px;
        padding: 4px 6px;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__credentials {
        padding-left: 0;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__specs {
        border-left: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
        border-top: 0;
        padding-left: 7px;
        padding-top: 0;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__visual-credentials,
    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__visual-row {
        column-gap: 6px;
        grid-template-columns: minmax(84px, 98px) minmax(0, 1fr);
        row-gap: 6px;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__visual-row {
        grid-template-columns: minmax(84px, 112px);
    }

    .dashboard-device-details-card__assets h5 {
        min-height: 21px;
        padding: 5px 6px;
    }

    .dashboard-device-details-card__assets .asset-list {
        padding: 5px 6px;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-workbench-device-icon--details {
        gap: 2px;
        min-height: 116px;
        padding: 2px;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-workbench-device-icon--details img,
    .dashboard-workbench-placeholder--problem-messages .dashboard-workbench-device-icon--details > span {
        height: 76px;
        width: 76px;
    }

    .dashboard-device-details-card__identity strong {
        font-size: .66rem;
    }

    .dashboard-device-details-card__identity span {
        font-size: .62rem;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-specifications .dashboard-specification-list div {
        gap: 6px;
        grid-template-columns: minmax(78px, .72fr) minmax(0, 1fr);
        min-height: 25px;
        padding: 3px 0;
    }

    .dashboard-device-specifications .dashboard-specification-list dt {
        font-size: .64rem;
    }

    .dashboard-device-specifications .dashboard-specification-list dd {
        font-size: .78rem;
    }

    .dashboard-workbench-placeholder--problem-messages .dashboard-device-details-card__credentials .dashboard-device-credentials-form {
        gap: 5px;
    }

    .dashboard-credential-panel {
        gap: 6px;
        padding: 5px;
    }

    .dashboard-credential-save-button {
        margin-left: 5px;
    }

    .dashboard-credential-panel select,
    .dashboard-credential-panel input {
        font-size: .8rem;
        min-height: 28px;
        padding-block: 4px;
    }

    .dashboard-credential-saved-row {
        gap: 5px;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        min-height: 36px;
    }

    .dashboard-credential-saved-row__icon {
        min-height: 36px;
        width: 32px;
    }

    .dashboard-credential-saved-row strong,
    .dashboard-credential-saved-row span {
        font-size: .72rem;
    }
}

.dashboard-contact-messages__body {
    background: var(--workbench-inner-surface, #f1f3f5);
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    border-radius: 0 0 7px 7px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
    display: grid;
    gap: 6px;
    padding: 7px 8px;
    position: relative;
    z-index: 1;
}

.dashboard-contact-messages__body > strong {
    color: var(--text, #18181b);
    font-size: .8rem;
}

.dashboard-workbench-placeholder--contact-card .dashboard-device-credentials-form {
    gap: 7px;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-workbench-subsection--reported-issue p {
    border-radius: 0 0 7px 7px;
    font-size: .84rem;
    line-height: 1.35;
    margin: 0;
}

.dashboard-workbench-placeholder--problem-messages .dashboard-contact-message-row {
    min-height: 31px;
    padding: 4px 0;
}

.dashboard-contact-status {
    overflow: visible;
    position: relative;
    z-index: 6;
}

.dashboard-contact-status-form {
    display: grid;
    gap: 8px;
}

.dashboard-contact-status__picker {
    position: relative;
    z-index: 7;
}

.dashboard-contact-status__current,
.dashboard-contact-status__menu button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--text, #18181b);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 8px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    min-height: 34px;
    padding: 5px 7px;
    text-align: left;
    width: 100%;
}

.dashboard-contact-status__current {
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 7px;
}

.dashboard-contact-status__menu {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 7px;
    box-shadow: 0 12px 22px rgba(15, 23, 42, .16);
    display: none;
    left: 0;
    min-width: 230px;
    padding: 6px;
    position: absolute;
    top: calc(100% - 1px);
    z-index: 240;
}

.dashboard-contact-status__picker:hover .dashboard-contact-status__menu,
.dashboard-contact-status__picker:focus-within .dashboard-contact-status__menu,
.dashboard-contact-status__picker.is-open .dashboard-contact-status__menu {
    display: grid;
}

.dashboard-contact-status__menu button {
    border-radius: 6px;
    grid-template-columns: 24px minmax(0, 1fr);
}

.dashboard-contact-status__menu button:hover {
    background: color-mix(in srgb, var(--primary, #18181b) 9%, var(--surface, #fff));
}

.dashboard-contact-status__chevron {
    color: var(--muted-text, #71717a);
    font-weight: 900;
}

.dashboard-contact-status__note {
    display: grid;
    gap: 7px;
}

.dashboard-contact-status__note[hidden] {
    display: none;
}

.dashboard-contact-status__note label {
    font-size: .78rem;
    font-weight: 850;
}

.dashboard-contact-status__note textarea {
    min-height: 78px;
}

.contact-status-icon {
    background: var(--contact-status-colour, #ef1b1b);
    border-radius: 4px;
    display: inline-block;
    height: 22px;
    position: relative;
    width: 22px;
}

.contact-status-icon::before,
.contact-status-icon::after {
    content: "";
    position: absolute;
}

.contact-status-icon--phone::before {
    background: #fff;
    height: 15px;
    left: 4px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
    top: 4px;
    width: 15px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.contact-status-icon--mobile::before {
    border: 2px solid #fff;
    border-radius: 2px;
    height: 16px;
    left: 7px;
    top: 3px;
    width: 8px;
}

.contact-status-icon--mobile::after {
    background: #fff;
    border-radius: 999px;
    bottom: 5px;
    height: 2px;
    left: 10px;
    width: 2px;
}

.contact-status-icon--email::before {
    border: 2px solid #fff;
    border-radius: 2px;
    height: 12px;
    left: 4px;
    top: 5px;
    width: 14px;
}

.contact-status-icon--email::after {
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    height: 8px;
    left: 7px;
    top: 5px;
    transform: rotate(-45deg);
    width: 8px;
}

.dashboard-contact-messages {
    display: grid;
    gap: 8px;
}

.dashboard-contact-messages--reported-issue {
    border-top: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    min-width: 0;
    padding-top: 8px;
}

.dashboard-jobsheet-card__services .dashboard-contact-messages--reported-issue h4 {
    border-radius: 5px 5px 0 0;
    font-size: .68rem;
    line-height: 1.2;
    min-height: 0;
    padding: 6px 7px;
}

.dashboard-jobsheet-card__services .dashboard-contact-status-form,
.dashboard-jobsheet-card__services .dashboard-contact-messages__body {
    border-radius: 0;
    padding: 6px;
}

.dashboard-jobsheet-card__services .dashboard-contact-messages__body {
    border-radius: 0 0 5px 5px;
}

.dashboard-jobsheet-card__services .dashboard-contact-messages__body > strong {
    font-size: .7rem;
}

.dashboard-jobsheet-card__services .dashboard-contact-message-row {
    gap: 4px 6px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    padding: 6px 0;
}

.dashboard-jobsheet-card__services .dashboard-contact-message-row > strong {
    grid-column: 1 / 3;
    min-width: 0;
}

.dashboard-jobsheet-card__services .dashboard-contact-message-row > time {
    font-size: .62rem;
    grid-column: 3;
    white-space: nowrap;
}

.dashboard-jobsheet-card__services .dashboard-contact-message-row > .contact-status-icon {
    grid-column: 1;
    grid-row: 2;
}

.dashboard-jobsheet-card__services .dashboard-contact-message-row > span:not(.contact-status-icon) {
    font-size: .68rem;
    grid-column: 2;
    grid-row: 2;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-jobsheet-card__services .dashboard-contact-message-row > form {
    grid-column: 3;
    grid-row: 2;
}

@media (min-width: 981px) {
    .dashboard-jobsheet-card:has(.dashboard-contact-messages--reported-issue) .dashboard-jobsheet-card__services {
        display: contents;
    }

    .dashboard-jobsheet-card:has(.dashboard-contact-messages--reported-issue) .dashboard-jobsheet-card__reported-issue {
        align-self: start;
        grid-column: 1;
        grid-row: 1;
        padding-right: 7px;
    }

    .dashboard-jobsheet-card:has(.dashboard-contact-messages--reported-issue) .dashboard-jobsheet-card__requested-services {
        align-self: start;
        grid-column: 1;
        grid-row: 2;
        grid-template-rows: auto auto;
        padding-right: 7px;
    }

    .dashboard-jobsheet-card:has(.dashboard-contact-messages--reported-issue) .dashboard-jobsheet-card__requested-services h4 {
        line-height: 1.2;
    }

    .dashboard-jobsheet-card:has(.dashboard-contact-messages--reported-issue) .dashboard-workbench-order-summary {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .dashboard-jobsheet-card:has(.dashboard-contact-messages--reported-issue) .dashboard-email-tracking {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 3px;
    }

    .dashboard-jobsheet-card:has(.dashboard-contact-messages--reported-issue) .dashboard-contact-messages--reported-issue {
        gap: 0;
        grid-column: 1 / -1;
        grid-row: 4;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 3px;
    }

    .dashboard-jobsheet-card__services .dashboard-contact-messages--reported-issue > h4 {
        grid-column: 1 / -1;
    }

    .dashboard-jobsheet-card__services .dashboard-contact-messages--reported-issue > .dashboard-contact-status-form {
        align-content: start;
        border-bottom: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
        border-radius: 0 0 0 5px;
        border-right: 0;
        grid-column: 1;
        grid-auto-rows: max-content;
        min-width: 0;
    }

    .dashboard-jobsheet-card__services .dashboard-contact-messages--reported-issue > .dashboard-contact-messages__body {
        border-radius: 0 0 5px 0;
        grid-column: 2;
        min-width: 0;
    }
}

.dashboard-contact-message-list {
    display: grid;
    gap: 0;
}

.dashboard-contact-message-row {
    align-items: center;
    border-top: 1px solid var(--border, #e4e4e7);
    display: grid;
    gap: 8px;
    grid-template-columns: 84px 132px 24px minmax(0, 1fr) auto;
    min-height: 36px;
    padding: 6px 0;
}

.dashboard-contact-message-row:first-child {
    border-top: 0;
}

.dashboard-contact-message-row time {
    font-size: .82rem;
    white-space: nowrap;
}

.dashboard-contact-message-row span:last-of-type {
    overflow-wrap: anywhere;
}

.dashboard-contact-message-row form {
    margin: 0;
}

.dashboard-contact-message-row__delete {
    align-items: center;
    background: #fee2e2;
    border: 0;
    border-radius: 5px;
    color: #ef1b1b;
    cursor: pointer;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.dashboard-contact-message-row__delete svg {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 17px;
}

.dashboard-device-credentials-form {
    display: grid;
    gap: 8px;
    padding: 6px 10px 10px;
}

.dashboard-credential-editor {
    border: 1px solid var(--border, #d4d4d8);
    display: grid;
    gap: 0;
}

.dashboard-credential-saved-list {
    background: var(--surface, #fff);
    display: grid;
    gap: 4px;
    padding: 6px;
}

.dashboard-credential-saved-row {
    align-items: stretch;
    background: #e9e9e9;
    display: grid;
    gap: 8px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 42px;
}

.dashboard-credential-saved-row__icon {
    align-items: center;
    background: #c7c7c7;
    color: #757575;
    display: inline-flex;
    justify-content: center;
}

.dashboard-credential-saved-row__icon--pattern {
    background: #d8d8d8;
}

.dashboard-credential-saved-row svg {
    fill: currentColor;
    height: 22px;
    stroke: currentColor;
    width: 22px;
}

.dashboard-credential-saved-row__icon--pattern svg {
    fill: none;
    height: 30px;
    stroke: none;
    width: 30px;
}

.dashboard-credential-saved-row__icon--pattern polyline {
    fill: none;
    stroke: #16a34a;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 7;
}

.dashboard-credential-saved-row__icon--pattern circle {
    fill: #111827;
}

.dashboard-credential-saved-row__icon--pattern circle.is-selected {
    fill: #16a34a;
}

.dashboard-credential-saved-row > div {
    display: grid;
    gap: 1px;
    min-width: 0;
    padding: 4px 4px 4px 0;
}

.dashboard-credential-saved-row small,
.dashboard-credential-saved-row span,
.dashboard-credential-saved-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-credential-saved-row small {
    font-size: .7rem;
}

.dashboard-credential-saved-row strong,
.dashboard-credential-saved-row span {
    font-size: .78rem;
}

.dashboard-credential-saved-row__actions {
    align-items: center;
    display: flex;
    gap: 4px;
    padding-right: 6px;
}

.dashboard-credential-saved-row__actions button {
    align-items: center;
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 4px;
    color: var(--text, #111827);
    cursor: pointer;
    display: inline-flex;
    height: 25px;
    justify-content: center;
    padding: 0;
    width: 25px;
}

.dashboard-credential-saved-row__actions button:hover {
    background: var(--surface, #fff);
    border-color: var(--primary, #18181b);
}

.dashboard-credential-saved-row__actions button:last-child {
    color: var(--danger, #dc2626);
}

.dashboard-credential-saved-row__actions svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 15px;
}

.dashboard-credential-tabs {
    align-items: center;
    background: color-mix(in srgb, var(--card-header-bg, #7a7a7a) 74%, #ffffff);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    min-height: 28px;
    padding: 3px 6px;
}

.dashboard-credential-tab {
    align-items: center;
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 3px;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    padding: 2px;
    width: 28px;
}

.dashboard-credential-tab.is-active {
    background: #ffffff;
    border-color: #ffffff;
}

.dashboard-credential-tab svg {
    fill: currentColor;
    height: 14px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 14px;
}

.dashboard-credential-panel {
    display: none;
    gap: 10px;
    padding: 8px;
}

.dashboard-credential-panel.is-active {
    display: grid;
}

.dashboard-pattern-grid {
    align-content: center;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72)),
        linear-gradient(135deg, color-mix(in srgb, var(--card-header-bg, #2563eb) 12%, #ffffff), #ffffff);
    border: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 22%, var(--border, #d4d4d8));
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 10px 24px rgba(15, 23, 42, .08);
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(3, 18px);
    grid-template-rows: repeat(3, 18px);
    justify-content: center;
    margin-inline: auto;
    min-height: 190px;
    padding: 22px;
    position: relative;
    touch-action: none;
    user-select: none;
    width: min(100%, 220px);
}

.dashboard-pattern-line {
    height: 150px;
    inset: 0;
    margin: auto;
    pointer-events: none;
    position: absolute;
    width: 150px;
}

.dashboard-pattern-line polyline {
    fill: none;
    filter: drop-shadow(0 3px 5px rgba(15, 23, 42, .18));
    stroke: color-mix(in srgb, var(--card-header-bg, #2563eb) 78%, #16a34a);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 10;
}

.dashboard-pattern-grid button {
    background: #ffffff;
    border: 2px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 38%, #ffffff);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 3px 7px rgba(15, 23, 42, .16);
    cursor: pointer;
    display: block;
    height: 18px;
    justify-self: center;
    padding: 0;
    position: relative;
    width: 18px;
    z-index: 1;
}

.dashboard-pattern-grid button::before {
    content: "";
    inset: -14px;
    position: absolute;
}

.dashboard-pattern-grid button.is-selected {
    background: color-mix(in srgb, var(--card-header-bg, #2563eb) 78%, #15c515);
    border-color: #ffffff;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--card-header-bg, #2563eb) 18%, transparent), 0 7px 14px rgba(15, 23, 42, .22);
}

.dashboard-credential-panel .field {
    margin: 0;
}

.dashboard-credential-panel label {
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    width: 1px;
}

.dashboard-credential-panel select,
.dashboard-credential-panel input {
    font-size: .86rem;
    min-height: 32px;
}

.dashboard-credential-panel select,
.dashboard-credential-panel input[data-credential-field="value"] {
    max-width: 265px;
}

.dashboard-credential-panel input[data-credential-field="username"],
.dashboard-credential-panel input[data-credential-field="password"] {
    max-width: 190px;
}

.dashboard-workbench__hero {
    align-items: stretch;
    background: linear-gradient(135deg, color-mix(in srgb, var(--status-colour, #334155) 88%, #111827), color-mix(in srgb, var(--status-colour, #334155) 62%, #020617));
    border-radius: 8px;
    color: #fff;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px;
}

.dashboard-workbench__hero .eyebrow {
    color: rgba(255, 255, 255, .78);
    margin-bottom: 4px;
}

.dashboard-workbench__hero h2 {
    color: inherit;
    font-size: 1.45rem;
    margin: 0;
}

.dashboard-workbench__hero p {
    color: rgba(255, 255, 255, .86);
    font-weight: 650;
    margin: 4px 0 0;
}

.dashboard-workbench__job-meta {
    align-content: center;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    min-width: 170px;
    padding: 10px;
    text-align: right;
}

.dashboard-workbench__job-meta strong {
    color: #fff;
    font-size: 1.25rem;
}

.dashboard-workbench__job-meta span {
    color: rgba(255, 255, 255, .86);
    font-size: .84rem;
    font-weight: 800;
}

.dashboard-workbench__actions {
    align-items: center;
    background: color-mix(in srgb, var(--status-colour, #64748b) 9%, var(--surface-soft, #f4f4f5));
    border: 1px solid color-mix(in srgb, var(--status-colour, #64748b) 18%, var(--border, #e4e4e7));
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
}

.dashboard-workbench__layout {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dashboard-workbench-panel {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-workbench-panel h3,
.dashboard-workbench-section h3 {
    background: color-mix(in srgb, var(--status-colour, #334155) 88%, #fff);
    color: #fff;
    font-size: .9rem;
    margin: -12px -12px 12px;
    padding: 9px 12px;
}

.dashboard-workbench-panel h3 {
    margin: 0;
}

.dashboard-workbench-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.dashboard-workbench-list div {
    display: grid;
    gap: 8px;
    grid-template-columns: 116px minmax(0, 1fr);
    padding: 9px 12px;
}

.dashboard-workbench-list div + div {
    border-top: 1px solid var(--border, #e4e4e7);
}

.dashboard-workbench-list dt {
    color: var(--muted-text, #71717a);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dashboard-workbench-list dd {
    font-weight: 750;
    margin: 0;
    overflow-wrap: anywhere;
}

.dashboard-workbench-order-summary {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    padding: 0 12px;
}

.dashboard-workbench-list--order {
    padding: 0;
}

.dashboard-workbench-device-icon {
    align-items: center;
    align-self: stretch;
    background: color-mix(in srgb, var(--status-colour, #334155) 8%, var(--surface-soft, #f4f4f5));
    border: 1px solid color-mix(in srgb, var(--status-colour, #334155) 18%, var(--border, #e4e4e7));
    border-radius: 8px;
    display: flex;
    justify-content: center;
    min-height: 236px;
    padding: 14px;
}

.dashboard-workbench-device-icon img {
    display: block;
    height: min(220px, 100%);
    object-fit: contain;
    width: min(220px, 100%);
}

.dashboard-workbench-device-icon > span {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    color: var(--text, #18181b);
    display: inline-flex;
    font-weight: 850;
    height: min(220px, 100%);
    justify-content: center;
    min-height: 120px;
    min-width: 120px;
    width: min(220px, 100%);
}

.dashboard-workbench-device-icon--details {
    align-self: start;
    margin: 0;
    min-height: 0;
    padding: 6px;
}

.dashboard-workbench-device-icon--details img,
.dashboard-workbench-device-icon--details > span {
    height: clamp(64px, 6vw, 82px);
    width: clamp(64px, 6vw, 82px);
}

@container (max-width: 620px) {
    .dashboard-workbench-order-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-workbench-device-icon {
        min-height: 150px;
    }

    .dashboard-workbench-device-icon img,
    .dashboard-workbench-device-icon > span {
        height: 130px;
        width: 130px;
    }
}

.dashboard-workbench-datetime {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.dashboard-workbench-datetime span {
    align-items: center;
    display: inline-flex;
    gap: 5px;
    white-space: nowrap;
}

.dashboard-workbench-datetime svg {
    fill: none;
    flex: 0 0 15px;
    height: 15px;
    stroke: var(--primary, #18181b);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 15px;
}

.dashboard-workbench-secret {
    background: color-mix(in srgb, var(--danger, #dc2626) 8%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 22%, var(--border, #e4e4e7));
    border-radius: 6px;
    padding: 6px 8px;
}

.dashboard-workbench-section {
    overflow: hidden;
    margin-left: 12px;
    margin-right: 12px;
}

.dashboard-workbench-section__head {
    align-items: center;
    background: color-mix(in srgb, var(--status-colour, #334155) 88%, #fff);
    color: #fff;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: -12px -12px 12px;
    padding: 8px 12px;
}

.dashboard-workbench-section__head h3 {
    background: transparent;
    color: inherit;
    margin: 0;
    padding: 0;
}

.dashboard-workbench-section__head .button-small {
    background: rgba(255, 255, 255, .95);
    color: var(--status-colour, #334155);
}

.dashboard-specification-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.dashboard-specification-list div {
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr;
    padding: 8px;
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 6px;
}

.dashboard-specification-list dt {
    color: var(--muted-text, #71717a);
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.dashboard-specification-list dd {
    font-weight: 750;
    margin: 0;
    overflow-wrap: anywhere;
}

.dashboard-device-specifications .dashboard-specification-list {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
}

.dashboard-device-specifications .dashboard-specification-list div {
    border: 0;
    border-bottom: 1px solid var(--border, #e4e4e7);
    border-radius: 0;
    grid-template-columns: minmax(112px, 1.1fr) minmax(0, .9fr);
    padding: 5px 0;
}

.dashboard-device-specifications .dashboard-specification-list div:first-child {
    padding-top: 0;
}

.dashboard-device-specifications .dashboard-specification-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dashboard-device-specifications .dashboard-specification-list--picture div {
    align-items: center;
    column-gap: 8px;
    grid-template-columns: minmax(112px, 1.1fr) minmax(0, .9fr);
}

.dashboard-device-specifications .dashboard-specification-list--picture {
    grid-column: 1 / -1;
    margin-top: 8px;
}

.dashboard-device-specifications .dashboard-specification-list--picture dt {
    grid-column: 1;
    overflow-wrap: normal;
}

.dashboard-device-specifications .dashboard-specification-list--picture dd {
    grid-column: 2;
    text-align: right;
}

.dashboard-device-specifications .dashboard-specification-list dt {
    font-size: .68rem;
    letter-spacing: 0;
    text-transform: none;
}

.dashboard-device-specifications .dashboard-specification-list dd {
    font-size: .82rem;
    text-align: center;
}

.dashboard-workbench-activity {
    display: grid;
    gap: 8px;
}

.dashboard-workbench-activity div {
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 3px;
    padding: 10px;
}

.dashboard-workbench-activity strong {
    font-size: .9rem;
}

.dashboard-workbench-activity span,
.dashboard-workbench-activity small {
    color: var(--muted-text, #71717a);
    font-size: .78rem;
    font-weight: 750;
}

.dashboard-workbench-activity p {
    font-size: .86rem;
}

.dashboard-preview-note-form,
.dashboard-preview-photo-form {
    display: grid;
    gap: 10px;
}

.dashboard-preview-note-form textarea {
    min-height: 118px;
}

.dashboard-note-editor {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 130px;
}

.dashboard-note-editor .dashboard-preview-note-form {
    min-width: 0;
}

.dashboard-technician-note-box {
    align-items: start;
}

.dashboard-note-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-note-actions form {
    margin: 0;
}

.dashboard-note-actions--side {
    align-content: start;
    align-items: stretch;
    display: grid;
    gap: 8px;
}

.dashboard-note-actions--side .button,
.dashboard-note-actions--side .button-secondary,
.dashboard-note-actions--side form {
    width: 100%;
}

.dashboard-note-datetime {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 150px minmax(0, 220px);
}

.dashboard-note-datetime label {
    color: var(--muted-text, #71717a);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dashboard-note-ledger {
    padding: 0;
}

.dashboard-note-ledger__head {
    align-items: center;
    background: color-mix(in srgb, var(--surface, #ffffff) 92%, var(--card-header-bg, #334155));
    border-bottom: 1px solid var(--border, #d1d5db);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 44px;
    padding: 8px 10px;
}

.dashboard-note-ledger__head h3 {
    background: transparent;
    color: var(--text, #18181b);
    font-size: .98rem;
    line-height: 1.2;
    margin: 0;
    min-height: 0;
    padding: 0;
}

.dashboard-note-ledger__head h3 span {
    font-weight: 650;
}

.dashboard-note-ledger__body {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: 145px minmax(0, 1fr);
    padding: 10px;
}

.dashboard-note-ledger__rail {
    display: grid;
    gap: 5px;
    justify-items: center;
    text-align: center;
}

.dashboard-note-ledger__rail strong {
    font-size: .86rem;
    line-height: 1;
}

.dashboard-note-ledger__rail span {
    font-size: .76rem;
    line-height: 1.15;
}

.dashboard-note-ledger__rail-actions {
    align-items: start;
    display: flex;
    gap: 5px;
    justify-content: center;
}

.dashboard-note-ledger__rail-actions form {
    margin: 0;
}

.dashboard-note-icon-button {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 3px;
    color: var(--text, #18181b);
    cursor: pointer;
    font-size: .67rem;
    font-weight: 750;
    line-height: 1;
    min-height: 28px;
    min-width: 28px;
    padding: 3px 4px;
    text-transform: lowercase;
}

.dashboard-note-icon-button--edit {
    border-color: #60a5fa;
}

.dashboard-note-icon-button--delete {
    border-color: #f87171;
    color: #b91c1c;
}

.dashboard-note-icon-button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--card-header-bg, #334155) 12%, var(--surface, #ffffff));
}

.dashboard-note-icon-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.dashboard-note-ledger__panel {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 2px;
    min-height: 150px;
    padding: 10px 12px;
    position: relative;
}

.dashboard-note-ledger__panel::before {
    background: var(--surface, #ffffff);
    border-bottom: 1px solid var(--border, #cbd5e1);
    border-left: 1px solid var(--border, #cbd5e1);
    content: "";
    height: 18px;
    left: -10px;
    position: absolute;
    top: 18px;
    transform: rotate(45deg);
    width: 18px;
}

.dashboard-note-ledger__panel textarea {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 124px;
    padding: 0;
    resize: vertical;
}

.dashboard-note-ledger__panel textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--card-header-bg, #334155) 24%, transparent);
    outline-offset: 4px;
}

.dashboard-note-ledger__panel .dashboard-note-datetime {
    border-bottom: 1px dashed var(--border, #cbd5e1);
    grid-template-columns: 130px minmax(0, 210px);
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.dashboard-note-ledger__panel--readonly .prose-text {
    margin: 0;
    white-space: pre-wrap;
}

@media (max-width: 760px) {
    body.page-background-active {
        background-position: var(--page-background-mobile-position, center center);
    }

    .page-skin-presentation-controls {
        grid-template-columns: 1fr;
    }

    .interface-save-swatch {
        grid-template-columns: 1fr;
    }

    .dashboard-status-quick-row {
        grid-template-columns: 1fr;
    }

    .dashboard-topbar-tools {
        grid-template-columns: 1fr;
    }

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

    .dashboard-quicklinks .dashboard-quicklink {
        border-left-width: 1px;
        border-radius: 6px;
    }

    .dashboard-checkout-job {
        grid-template-columns: 1fr;
    }

    .dashboard-checkout-job dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-note-editor {
        grid-template-columns: 1fr;
    }

    .dashboard-note-actions--side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-note-ledger__body {
        grid-template-columns: 1fr;
    }

    .dashboard-note-ledger__rail {
        align-items: center;
        grid-template-columns: auto auto 1fr;
        justify-items: start;
        text-align: left;
    }

    .dashboard-note-ledger__rail-actions {
        justify-self: end;
    }

    .dashboard-note-ledger__panel::before {
        display: none;
    }
}

@media (max-width: 520px) {
    .dashboard-device-details-card {
        grid-template-columns: 1fr;
    }

    .dashboard-workbench-device-icon--details {
        min-height: 92px;
    }

    .dashboard-workbench-device-icon--details img,
    .dashboard-workbench-device-icon--details > span {
        height: 82px;
        width: 82px;
    }

    .dashboard-device-specifications .dashboard-specification-list dd {
        text-align: left;
    }
}

.dashboard-preview-photo-form input[type="file"] {
    background: var(--surface-soft, #fafafa);
}

.dashboard-preview-photo-form--detached {
    display: none;
}

.dashboard-photo-upload-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-photo-upload-grid__file,
.dashboard-photo-camera-button,
.dashboard-photo-phone-form,
.dashboard-photo-phone-form button {
    min-width: 0;
    width: 100%;
}

.dashboard-photo-upload-grid__file,
.dashboard-photo-camera-button,
.dashboard-photo-phone-form button {
    height: 42px;
}

input.dashboard-photo-upload-grid__file {
    grid-column: span 2;
}

.dashboard-photo-camera-button {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
}

.dashboard-photo-phone-form {
    display: flex;
    margin: 0;
}

.dashboard-photo-phone-form button {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
}

.dashboard-photo-phone-form button svg,
.dashboard-photo-camera-button svg,
.dashboard-photo-camera__actions button svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 15px;
}

.dashboard-photo-upload-grid__visibility,
.dashboard-photo-upload-grid__submit {
    grid-column: 1 / -1;
}

.dashboard-photo-upload-grid__submit {
    justify-self: start;
}

.customer-device-history-card {
    overflow: hidden;
}

.customer-profile-card {
    overflow: hidden;
}

.customer-profile-identity {
    align-items: center;
    display: flex;
    gap: 16px;
    min-width: 0;
}

.customer-profile-heading-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary, #2563eb) 11%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--primary, #2563eb) 38%, #dbeafe);
    border-radius: 8px;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--primary, #2563eb) 14%, transparent);
    color: var(--primary, #2563eb);
    display: flex;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    justify-content: center;
}

.page-heading-back {
    align-items: center;
    display: inline-flex;
    font-size: .78rem;
    gap: 3px;
    justify-content: center;
    min-height: 28px;
    padding: 5px 6px;
    white-space: nowrap;
}

.page-heading-back svg {
    height: 14px;
    width: 14px;
}

.customer-profile-heading-icon svg {
    fill: none;
    height: 42px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
    width: 42px;
}

.page-heading-copy {
    min-width: 0;
}

.page-heading-title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.customer-profile-card .customer-device-history-head .page-title {
    color: #111827;
    margin: 2px 0 0;
}

.customer-profile-card .customer-device-history-head .lead {
    margin: 8px 0 0;
}

.device-profile-card {
    overflow: hidden;
}

.device-profile-head {
    align-items: center;
    border-bottom: 1px solid var(--border, #cbd5e1);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 16px 20px;
}

.device-profile-identity {
    align-items: center;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.device-profile-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary, #2563eb) 10%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--primary, #2563eb) 32%, #dbeafe);
    border-radius: 8px;
    color: var(--primary, #2563eb);
    display: flex;
    flex: 0 0 58px;
    height: 58px;
    justify-content: center;
    overflow: hidden;
}

.device-profile-icon img {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.device-profile-icon svg {
    fill: none;
    height: 32px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 32px;
}

.device-profile-identity .eyebrow {
    margin: 5px 0 2px;
}

.device-profile-identity h1,
.device-profile-identity p {
    margin: 0;
}

.device-profile-identity h1 {
    color: #111827;
    font-size: 1.75rem;
    line-height: 1.1;
}

.device-profile-identity > div:last-child > p:last-child {
    color: var(--muted-text, #64748b);
    margin-top: 4px;
}

.device-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.device-profile-summary {
    background: var(--surface-soft, #f1f5f9);
    border-bottom: 1px solid var(--border, #cbd5e1);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.device-profile-summary > section {
    min-width: 0;
    padding: 16px 18px;
}

.device-profile-summary > section + section {
    border-left: 1px solid var(--border, #cbd5e1);
}

.device-profile-summary .eyebrow {
    margin-bottom: 4px;
}

.device-profile-summary h2 {
    font-size: 1rem;
    margin: 0 0 10px;
}

.device-profile-summary dl {
    display: grid;
    gap: 7px;
    margin: 0;
}

.device-profile-summary dl div {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(76px, .65fr) minmax(0, 1fr);
}

.device-profile-summary dt {
    color: var(--muted-text, #64748b);
    font-size: .76rem;
    font-weight: 800;
}

.device-profile-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.device-profile-assets {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.device-profile-assets span {
    background: #ffffff;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 5px;
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 7px;
}

.device-profile-section {
    padding: 18px 20px;
}

.device-profile-section + .device-profile-section {
    border-top: 1px solid var(--border, #cbd5e1);
}

.device-profile-section__head {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.device-profile-section__head .eyebrow,
.device-profile-section__head h2 {
    margin: 0;
}

.device-profile-section__head h2 {
    font-size: 1.15rem;
    margin-top: 3px;
}

.device-profile-section__head > span {
    color: var(--muted-text, #64748b);
    font-size: .78rem;
    font-weight: 800;
}

.device-profile-specifications {
    background: var(--surface-soft, #f1f5f9);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 7px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    overflow: hidden;
}

.device-profile-specifications > div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 10px 12px;
}

.device-profile-specifications > div:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--border, #d4d4d8);
}

.device-profile-specifications > div:nth-child(n + 4) {
    border-top: 1px solid var(--border, #d4d4d8);
}

.device-profile-specifications dt {
    color: var(--muted-text, #64748b);
    font-size: .72rem;
    font-weight: 800;
}

.device-profile-specifications dd {
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.device-profile-attachments {
    display: grid;
    gap: 7px;
}

.device-profile-attachment {
    align-items: center;
    background: var(--surface-soft, #f8fafc);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 7px;
    color: var(--text, #18181b);
    display: grid;
    gap: 10px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 9px 11px;
    text-decoration: none;
}

.device-profile-attachment:hover {
    border-color: var(--primary, #2563eb);
}

.device-profile-attachment__type {
    background: color-mix(in srgb, var(--primary, #2563eb) 11%, #ffffff);
    border-radius: 5px;
    color: var(--primary, #2563eb);
    font-size: .65rem;
    font-weight: 900;
    overflow: hidden;
    padding: 6px 4px;
    text-align: center;
}

.device-profile-attachment strong,
.device-profile-attachment small {
    display: block;
    overflow-wrap: anywhere;
}

.device-profile-attachment small {
    color: var(--muted-text, #64748b);
    margin-top: 2px;
}

@media (max-width: 980px) {
    .device-profile-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .device-profile-summary > section:nth-child(odd) {
        border-left: 0;
    }

    .device-profile-summary > section:nth-child(n + 3) {
        border-top: 1px solid var(--border, #cbd5e1);
    }

    .device-profile-specifications {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .device-profile-specifications > div,
    .device-profile-specifications > div:nth-child(3n + 1) {
        border-left: 0;
    }

    .device-profile-specifications > div:nth-child(even) {
        border-left: 1px solid var(--border, #d4d4d8);
    }

    .device-profile-specifications > div:nth-child(n + 3) {
        border-top: 1px solid var(--border, #d4d4d8);
    }
}

.customer-profile-overview {
    background: var(--surface-soft, #f1f5f9);
    border-bottom: 1px solid var(--border, #cbd5e1);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-profile-overview__panel {
    min-width: 0;
    padding: 16px 20px;
}

.customer-profile-overview__panel + .customer-profile-overview__panel {
    border-left: 1px solid var(--border, #cbd5e1);
}

.customer-profile-overview__panel h2,
.customer-profile-overview__panel dl,
.customer-profile-overview__panel p,
.customer-profile-table h2 {
    margin: 0;
}

.customer-profile-overview__panel h2 {
    font-size: 1.05rem;
    margin-bottom: 12px;
}

.customer-profile-overview__panel--map {
    min-height: 210px;
    padding: 0;
    position: relative;
}

.customer-profile-map {
    background: var(--surface, #ffffff);
    inset: 0;
    overflow: hidden;
    position: absolute;
}

.customer-profile-map iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

.customer-profile-map__empty {
    color: var(--muted-text, #64748b);
    display: grid;
    min-height: 210px;
    place-items: center;
    text-align: center;
}

.customer-profile-overview__panel dd {
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.customer-profile-table {
    padding: 18px 20px 20px;
}

.customer-profile-table + .customer-profile-table {
    border-top: 1px solid var(--border, #cbd5e1);
}

.customer-profile-table .table-wrap {
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 6px;
    overflow: auto;
}

.customer-profile-table table {
    min-width: 860px;
}

.customer-profile-table table th:last-child,
.customer-profile-table table td:last-child {
    white-space: nowrap;
}

.customer-device-history-head {
    align-items: center;
    border-bottom: 1px solid var(--border, #cbd5e1);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 18px 20px;
}

.customer-device-history-head .eyebrow,
.customer-device-history-head h1,
.customer-device-history-head p,
.customer-device-history-table__head h2 {
    margin: 0;
}

.customer-device-history-head h1 {
    font-size: 1.7rem;
    line-height: 1.1;
}

.customer-device-history-head > div:first-child > p:last-child {
    color: var(--muted-text, #64748b);
    margin-top: 4px;
}

.customer-device-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.customer-device-history-summary {
    background: var(--surface-soft, #f1f5f9);
    border-bottom: 1px solid var(--border, #cbd5e1);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 14px 20px;
}

.customer-device-history-summary > div {
    border-right: 1px solid var(--border, #cbd5e1);
    min-width: 0;
    padding: 0 16px;
}

.customer-device-history-summary > div:first-child {
    padding-left: 0;
}

.customer-device-history-summary > div:last-child {
    border-right: 0;
    padding-right: 0;
}

.customer-device-history-summary dt {
    color: var(--muted-text, #64748b);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.customer-device-history-summary dd {
    font-size: .96rem;
    font-weight: 750;
    margin: 0;
    overflow-wrap: anywhere;
}

.customer-device-history-table {
    padding: 18px 20px 20px;
}

.customer-device-history-table__head {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.customer-device-history-card .table-wrap {
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 6px;
    overflow: auto;
}

@media (max-width: 960px) {
    .customer-profile-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-profile-overview__panel + .customer-profile-overview__panel {
        border-left: 0;
    }

    .customer-profile-overview__panel:nth-child(even) {
        border-left: 1px solid var(--border, #cbd5e1);
    }

    .customer-profile-overview__panel:nth-child(n + 3) {
        border-top: 1px solid var(--border, #cbd5e1);
    }

    .customer-device-history-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 14px;
    }

    .customer-device-history-summary > div {
        border-right: 0;
        padding: 0;
    }
}

@media (max-width: 680px) {
    .device-profile-head,
    .device-profile-section__head {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .device-profile-identity {
        align-items: flex-start;
    }

    .device-profile-actions {
        justify-content: flex-start;
    }

    .device-profile-summary,
    .device-profile-specifications {
        grid-template-columns: minmax(0, 1fr);
    }

    .device-profile-summary > section {
        border-left: 0 !important;
    }

    .device-profile-summary > section + section,
    .device-profile-specifications > div + div {
        border-top: 1px solid var(--border, #cbd5e1);
    }

    .device-profile-specifications > div {
        border-left: 0 !important;
    }

    .device-profile-section {
        padding: 16px;
    }

    .customer-device-history-head,
    .customer-device-history-table__head {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .customer-device-history-actions {
        justify-content: flex-start;
    }

    .customer-profile-heading-icon {
        flex-basis: 58px;
        height: 58px;
        width: 58px;
    }

    .page-heading-back {
        font-size: .72rem;
        padding-inline: 6px;
    }

    .customer-profile-heading-icon svg {
        height: 34px;
        width: 34px;
    }

    .customer-device-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 14px;
    }

    .customer-device-history-table {
        padding: 14px;
    }

    .customer-profile-overview__panel,
    .customer-profile-table {
        padding: 14px;
    }

    .customer-profile-overview__panel--map {
        padding: 0;
    }

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

    .customer-profile-overview__panel:nth-child(even) {
        border-left: 0;
    }

    .customer-profile-overview__panel + .customer-profile-overview__panel {
        border-top: 1px solid var(--border, #cbd5e1);
    }
}

.dashboard-photo-camera {
    align-items: center;
    background: rgba(15, 23, 42, .78);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 1400;
}

.dashboard-photo-camera[hidden] {
    display: none;
}

.dashboard-photo-camera__panel {
    background: var(--surface, #ffffff);
    border: 2px solid var(--status-colour, #2563eb);
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .38);
    display: grid;
    gap: 10px;
    max-height: calc(100vh - 40px);
    max-width: 720px;
    overflow: auto;
    padding: 10px;
    width: 100%;
}

.dashboard-photo-camera__head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.dashboard-photo-camera__head h4 {
    font-size: 1rem;
    margin: 0;
}

.dashboard-photo-camera__head .icon-square-button {
    flex: 0 0 34px;
    font-size: 1.35rem;
    height: 34px;
    line-height: 1;
    width: 34px;
}

.dashboard-photo-camera video {
    aspect-ratio: 4 / 3;
    background: #0f172a;
    border-radius: 4px;
    display: block;
    object-fit: contain;
    width: 100%;
}

.dashboard-photo-camera__status {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    color: #1e3a8a;
    margin: 0;
    padding: 8px 10px;
}

.dashboard-photo-camera__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.dashboard-photo-camera__actions button {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    min-height: 38px;
}

@media (max-width: 700px) {
    .dashboard-photo-upload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-photo-upload-grid__file,
    .dashboard-photo-upload-grid__visibility,
    .dashboard-photo-upload-grid__submit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .dashboard-photo-upload-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-photo-upload-grid__file,
    .dashboard-photo-camera-button,
    .dashboard-photo-phone-form,
    .dashboard-photo-upload-grid__visibility,
    .dashboard-photo-upload-grid__submit {
        grid-column: 1;
    }

    .dashboard-photo-camera {
        padding: 8px;
    }

    .dashboard-photo-camera__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dashboard-photo-section__head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.dashboard-photo-section__head h3,
.dashboard-photo-section__head form {
    margin: 0;
}

.dashboard-photo-section__head button {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.dashboard-photo-section__head button svg,
.dashboard-photo-caption-form button svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 15px;
}

.dashboard-photo-grid {
    align-items: flex-start;
    border-top: 1px solid color-mix(in srgb, var(--status-colour, #2563eb) 38%, #cbd5e1);
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    margin-top: 14px;
    padding-top: 14px;
}

.dashboard-photo-tile {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    margin: 0;
    overflow: hidden;
    padding: 7px;
    width: auto;
}

.dashboard-photo-thumb {
    display: block;
    height: 132px;
    width: 100%;
}

.dashboard-photo-thumb img {
    border-radius: 5px;
    height: 132px;
    object-fit: cover;
    width: 100%;
}

.dashboard-photo-tile figcaption {
    display: grid;
    gap: 1px;
}

.dashboard-photo-tile figcaption span {
    font-size: .68rem;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-photo-tile figcaption small {
    color: var(--muted-text, #71717a);
    font-size: .62rem;
}

.dashboard-photo-tile .checkbox-row {
    font-size: .65rem;
    margin: 0;
}

.dashboard-photo-caption-form {
    display: grid;
    gap: 3px;
}

.dashboard-photo-caption-form > label {
    font-size: .66rem;
    font-weight: 800;
}

.dashboard-photo-caption-form > div {
    display: grid;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr) 28px;
}

.dashboard-photo-caption-form input {
    font-size: .7rem;
    min-width: 0;
    padding: 5px 6px;
}

.dashboard-photo-caption-form > div:has(.dashboard-photo-delete) {
    grid-template-columns: minmax(0, 1fr) 28px 28px;
}

.dashboard-photo-caption-form .icon-square-button {
    border-radius: 4px;
    height: 28px;
    min-height: 28px;
    width: 28px;
}

.dashboard-photo-date {
    color: var(--muted-text, #71717a);
    font-size: .62rem;
}

.dashboard-photo-lightbox[hidden] {
    display: none;
}

.dashboard-photo-lightbox {
    align-items: center;
    background: rgba(15, 23, 42, .82);
    display: grid;
    inset: 0;
    justify-items: center;
    padding: 28px;
    position: fixed;
    z-index: 1000;
}

html.dashboard-photo-lightbox-open,
html.dashboard-photo-lightbox-open body {
    overflow: hidden;
}

.dashboard-photo-lightbox figure {
    display: grid;
    gap: 10px;
    margin: 0;
    max-height: calc(100vh - 80px);
    max-width: min(92vw, 980px);
}

.dashboard-photo-lightbox img {
    background: #0f172a;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
    max-height: calc(100vh - 130px);
    max-width: min(92vw, 980px);
    object-fit: contain;
    transform: scale(var(--photo-lightbox-zoom, 1));
    transition: transform 120ms ease-out;
    will-change: transform;
}

.dashboard-photo-lightbox figcaption {
    color: #fff;
    font-size: .95rem;
    font-weight: 750;
    text-align: center;
}

.dashboard-photo-lightbox__close,
.dashboard-photo-lightbox__nav {
    align-items: center;
    background: rgba(255, 255, 255, .94);
    border: 0;
    border-radius: 999px;
    color: #111827;
    cursor: pointer;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    position: absolute;
    z-index: 2;
}

.dashboard-photo-lightbox__close {
    font-size: .92rem;
    height: 34px;
    right: 22px;
    top: 22px;
    width: 34px;
}

.dashboard-photo-lightbox__nav {
    font-size: 2rem;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
}

.dashboard-photo-lightbox__nav--prev {
    left: 22px;
}

.dashboard-photo-lightbox__nav--next {
    right: 22px;
}

.closed-jobsheet-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    padding: 12px;
}

.pagination-actions {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.button-secondary.is-disabled {
    cursor: not-allowed;
    opacity: .55;
}

.form-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 220px auto;
}

.form-grid:has(input + .button) {
    grid-template-columns: minmax(0, 1fr) auto;
}

.form-stack {
    display: grid;
    gap: 18px;
}

label {
    display: block;
    font-size: .9rem;
    font-weight: 650;
    margin-bottom: 8px;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    padding: 10px 12px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary, #0f766e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #0f766e) 16%, transparent);
    outline: none;
}

textarea {
    min-height: 96px;
    resize: vertical;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
}

.checkbox-row input {
    width: auto;
}

.button,
.button-secondary {
    padding: 10px 16px;
}

.button-secondary {
    background: var(--card-header-bg, var(--primary, #18181b));
    border: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 82%, #ffffff);
    color: var(--card-header-text, #fff);
}

body[class*="theme-"] .button:not(.button-danger) {
    background: var(--card-header-bg, var(--primary, #18181b));
    border: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 82%, #ffffff);
    box-shadow: none;
    color: var(--card-header-text, #fff);
}

body[class*="theme-"] .button-secondary:not(.button-danger) {
    background: var(--card-header-bg, var(--primary, #18181b));
    border: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 82%, #ffffff);
    color: var(--card-header-text, #fff);
}

body[class*="theme-"] .button:not(.button-danger):hover,
body[class*="theme-"] .button:not(.button-danger):focus,
body[class*="theme-"] .button-secondary:not(.button-danger):hover,
body[class*="theme-"] .button-secondary:not(.button-danger):focus {
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 82%, #ffffff);
    border-color: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 82%, #ffffff);
    color: var(--card-header-text, #fff);
}

.button-full {
    width: 100%;
}

.table-wrap {
    overflow-x: auto;
}

table {
    border-collapse: collapse;
    min-width: 760px;
    width: 100%;
}

th,
td {
    border-bottom: 1px solid #f1f1f2;
    padding: 14px 18px;
    text-align: left;
}

th {
    background: var(--surface-soft, #fafafa);
    color: var(--muted-text, #71717a);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

tbody tr:hover {
    background: var(--surface-soft, #fafafa);
}

.link {
    color: #0f766e;
    font-weight: 750;
}

.badge {
    background: color-mix(in srgb, var(--status-colour, #0f766e) 16%, white);
    border-radius: 999px;
    color: var(--status-colour, #115e59);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    padding: 5px 10px;
    text-transform: capitalize;
}

.status-badge {
    background: var(--status-colour, #0f766e);
    color: var(--status-text-colour, #ffffff);
}

.empty {
    color: #71717a;
    padding: 34px 18px;
    text-align: center;
}

.status-row,
.detail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.status-row + .status-row,
.detail-row + .detail-row {
    margin-top: 14px;
}

.prose-text {
    color: #3f3f46;
    line-height: 1.7;
    white-space: pre-line;
}

.timeline {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.timeline__item {
    border-left: 3px solid #0f766e;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 170px;
    padding: 0 0 20px 16px;
}

.timeline__item:last-child {
    padding-bottom: 0;
}

.timeline__item p {
    color: #3f3f46;
    margin: 6px 0 0;
}

.timeline__meta {
    color: #71717a;
    display: grid;
    font-size: .86rem;
    gap: 4px;
    justify-items: end;
}

.error {
    color: #b91c1c;
    font-size: .86rem;
    margin-top: 8px;
}

.notice,
.alert {
    border-radius: 8px;
    padding: 14px 16px;
}

.notice {
    background: var(--card-header-bg, var(--primary, #334155));
    border: 1px solid var(--card-header-bg, var(--primary, #334155));
    color: var(--card-header-text, #ffffff);
    font-weight: 750;
}

.alert {
    background: #fee2e2;
    color: #991b1b;
}

.form-section {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 24px;
    grid-template-columns: 220px minmax(0, 1fr);
    padding: 22px;
}

.dashboard-status-card__head,
.dashboard-workbench-section__head,
.form-section__head,
.staff-profile-column__head,
.licence-edition-card__head {
    box-sizing: border-box;
    min-height: var(--panel-header-height);
}

.form-section__head h2 {
    margin-top: 0;
}

.form-section--single {
    grid-template-columns: 1fr;
}

.form-section--condensed {
    gap: 16px;
    padding: 18px;
}

.form-section--condensed .form-section__head .eyebrow {
    margin-bottom: 4px;
}

.form-section--condensed .form-section__head h2 {
    font-size: 1.2rem;
}

.customer-edit-form__panel {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
    overflow: hidden;
}

.customer-edit-form__panel > .customer-edit-form__section {
    background: transparent;
    border: 0;
    border-radius: 0;
    grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
    padding: 20px 22px;
}

.customer-edit-form__panel > .customer-edit-form__section + .customer-edit-form__section {
    border-top: 1px solid var(--border, #d4d4d8);
}

.customer-edit-form__panel > .customer-edit-form__actions {
    background: color-mix(in srgb, var(--surface, #ffffff) 92%, var(--primary, #18181b));
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--border, #d4d4d8);
    padding: 14px 22px;
}

.jobsheet-create-head {
    align-items: center;
}

.jobsheet-create-head__title {
    align-items: center;
    display: flex;
    gap: 16px;
}

.jobsheet-anchor-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.setup-anchor-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.setup-anchor {
    align-items: center;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 30%, var(--border, #d4d4d8));
    border-radius: 7px;
    color: #172033;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 850;
    gap: 6px;
    min-height: 36px;
    padding: 7px 10px;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.setup-anchor:hover,
.setup-anchor:focus {
    background: color-mix(in srgb, var(--primary, #18181b) 9%, #ffffff);
    border-color: var(--primary, #18181b);
    color: var(--primary, #18181b);
    transform: translateY(-1px);
}

.setup-anchor__icon {
    display: block;
    fill: none;
    flex: 0 0 17px;
    height: 17px;
    stroke: var(--primary, #18181b);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 17px;
}

.setup-anchor-target {
    scroll-margin-top: 132px;
}

.setup-jump-footer {
    align-items: center;
    background: color-mix(in srgb, var(--surface, #ffffff) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 22%, var(--border, #d4d4d8));
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    padding: 12px 14px;
}

.setup-anchor-nav--footer {
    justify-content: flex-start;
}

.jobsheet-anchor {
    align-items: center;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 30%, var(--border, #d4d4d8));
    border-radius: 7px;
    color: #172033;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 850;
    gap: 6px;
    min-height: 36px;
    padding: 7px 10px;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.jobsheet-anchor:hover,
.jobsheet-anchor:focus {
    background: color-mix(in srgb, var(--primary, #18181b) 9%, #ffffff);
    border-color: var(--primary, #18181b);
    color: var(--primary, #18181b);
    transform: translateY(-1px);
}

.jobsheet-anchor__icon {
    display: block;
    fill: none;
    flex: 0 0 17px;
    height: 17px;
    stroke: var(--primary, #18181b);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 17px;
}

.jobsheet-anchor-target {
    scroll-margin-top: 132px;
}

.jobsheet-detached-submit:has(.jobsheet-anchor-nav--footer) {
    justify-content: space-between;
}

.jobsheet-anchor-nav--footer {
    justify-content: flex-start;
}

.jobsheet-footer-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    margin-left: auto;
}

.jobsheet-create-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary, #18181b) 12%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 22%, var(--border, #d4d4d8));
    border-radius: 10px;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--primary, #18181b) 12%, transparent);
    color: var(--primary, #18181b);
    display: inline-flex;
    flex: 0 0 auto;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.jobsheet-create-icon svg,
.jobsheet-create-icon img {
    display: block;
    height: 32px;
    width: 32px;
}

.jobsheet-create-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.jobsheet-create-icon img {
    object-fit: contain;
}

.settings-subnav {
    align-items: center;
    background: transparent !important;
    border: 0;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    padding: 10px;
}

.settings-subnav__link {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 999px;
    color: var(--text, #18181b);
    font-size: .92rem;
    font-weight: 800;
    padding: 8px 14px;
    text-decoration: none;
}

.settings-subnav__link:hover,
.settings-subnav__link--active {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--card-header-bg, var(--primary, #18181b));
}

.settings-subnav__link:focus-visible {
    outline: 2px solid var(--primary, #18181b);
    outline-offset: 2px;
}

.settings-subnav .settings-subnav__link[aria-current="page"],
.settings-subnav .settings-subnav__link[aria-current="page"]:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: inset 0 -3px 0 #153a9f;
}

.settings-subnav__anchors {
    align-items: center;
    display: flex;
    flex: 1 1 520px;
    flex-wrap: wrap;
    gap: 6px;
}

.settings-subnav__link--anchor {
    font-size: .78rem;
    padding: 6px 10px;
}

.settings-subnav__save {
    margin-left: auto;
}

.settings-subnav--footer {
    justify-content: space-between;
}

.settings-document-menu {
    position: relative;
}

.settings-document-menu > summary {
    cursor: pointer;
    white-space: nowrap;
}

.settings-document-menu__links {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    width: 210px;
    max-width: calc(100vw - 40px);
    padding: 4px;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 6px;
    background: var(--surface, #fff);
    box-shadow: 0 6px 18px #0003;
}

.settings-document-menu__links a {
    display: block;
    padding: 9px 10px;
    color: var(--text, #18181b);
    text-decoration: none;
    font-size: .85rem;
}

.settings-document-menu__links a:hover,
.settings-document-menu__links a:focus-visible {
    background: var(--surface-soft, #f1f5f9);
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: -2px;
}

.document-text-section {
    scroll-margin-top: var(--document-anchor-offset, 230px);
}

.customisation-sticky-head:has(.settings-subnav--rectangular) {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 6px #0001;
    padding: 0;
    gap: 0;
}

.customisation-sticky-head:has(.settings-subnav--rectangular) > .section-head {
    margin: 0;
    padding: 16px;
    background: #ffffff;
    color: #172033;
    border: 0;
    border-radius: 0;
}

.customisation-sticky-head:has(.settings-subnav--rectangular) .page-title {
    font-size: 1.5rem;
    letter-spacing: 0;
}

.settings-subnav.settings-subnav--rectangular {
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: #edf1f5 !important;
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
}

.settings-subnav--rectangular .settings-subnav__anchors { display: contents; }
.settings-subnav--rectangular > a,
.settings-subnav--rectangular .settings-subnav__anchors > a,
.settings-subnav--rectangular > details { flex: 0 0 auto; }

.settings-subnav--rectangular .settings-subnav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 0;
    border-right: 1px solid #cbd5e1;
    border-radius: 0;
    background: transparent;
    color: #263449;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: none;
}

.settings-subnav--rectangular summary { gap: 8px; list-style: none; }
.settings-subnav--rectangular summary::-webkit-details-marker { display: none; }
.settings-subnav--rectangular summary::after { content: ''; width: 6px; height: 6px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); margin-top: -4px; }
.settings-subnav--rectangular .settings-subnav__link:hover { background: #dfe7f1; }

.document-section-nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #cbd5e1;
    background: #ffffff;
}

.document-section-nav a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    box-sizing: border-box;
    color: #263449;
    font-size: .8rem;
    text-decoration: none;
}

.document-section-nav a:hover { background: #eef4fc; }
.document-section-nav a[aria-current="location"] { background: #dbeafe; color: #1746a2; font-weight: 700; }
.document-section-nav a[aria-current="page"] { background: #dbeafe; color: #1746a2; font-weight: 700; }
.document-section-nav a:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -3px; }

.settings-subnav--rectangular .settings-subnav__link,
.settings-document-menu__links a,
.document-section-nav a {
    gap: 6px;
}

.settings-document-menu__links a { display: flex; align-items: center; }
.settings-subnav--rectangular svg,
.document-section-nav svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.settings-subnav--rectangular .settings-subnav__link { padding-inline: 6px; }

/* Match section colours across primary navigation, dropdown and shortcut row. */
.settings-subnav--rectangular svg,
.document-section-nav svg { color: var(--section-icon-colour, #475569); }
.settings-subnav--rectangular > a { --section-icon-colour: #475569; }
.settings-subnav--rectangular summary { --section-icon-colour: #1d4ed8; }
.settings-subnav--rectangular a[href$="#booking-choices"] { --section-icon-colour: #0f766e; }
.settings-subnav--rectangular a[href$="#icons"] { --section-icon-colour: #7c3aed; }
.settings-subnav--rectangular a[href$="#page-skins"] { --section-icon-colour: #be185d; }
.settings-subnav--rectangular a[href$="#jobcards"] { --section-icon-colour: #0369a1; }
.settings-subnav--rectangular a[href$="#status-display-options"] { --section-icon-colour: #15803d; }
.settings-subnav--rectangular a[href$="#repair-sources-links"] { --section-icon-colour: #b45309; }
.settings-subnav--rectangular a[href$="#workbench-activity"] { --section-icon-colour: #0e7490; }
.settings-subnav--rectangular a[href$="#repair-warnings"] { --section-icon-colour: #b91c1c; }
:is(.settings-document-menu__links, .document-section-nav) a[href$="#document-jobsheet_receipt"] { --section-icon-colour: #0369a1; }
:is(.settings-document-menu__links, .document-section-nav) a[href$="#document-checkout_receipt"] { --section-icon-colour: #0f766e; }
:is(.settings-document-menu__links, .document-section-nav) a[href$="#document-quotation"] { --section-icon-colour: #7c3aed; }
:is(.settings-document-menu__links, .document-section-nav) a[href$="#document-invoice"] { --section-icon-colour: #b45309; }
:is(.settings-document-menu__links, .document-section-nav) a[href$="#document-deposit"] { --section-icon-colour: #15803d; }
.settings-subnav--rectangular [aria-current="page"] > svg { color: #ffffff; }

.legacy-financial-page {
    background: #f8fafc;
    color: #172033;
    padding: 20px;
    min-width: 0;
}
.legacy-financial-page .page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.legacy-financial-page .page-title { color: #172033; font-size: 1.5rem; overflow-wrap: anywhere; }
.legacy-financial-page .eyebrow { color: #475569; }
.legacy-financial-page table { background: #ffffff; color: #172033; }
.legacy-financial-page th { background: #edf2f7; color: #394b63; }
.legacy-financial-page td { background: #ffffff; color: #172033; }
.legacy-financial-page td a,
.legacy-financial-page .action-row a { color: #1d4ed8; text-decoration: underline; }
.legacy-financial-page dl { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.legacy-financial-page dt { font-weight: 600; }
.legacy-financial-page dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
    .legacy-financial-page { padding: 12px; }
    .legacy-financial-page dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .legacy-financial-page dd { margin-bottom: 8px; }
}

.document-footer-text {
    border-top: 1px solid var(--border, #e4e4e7);
    color: var(--muted, #52525b);
    font-size: .95rem;
    line-height: 1.6;
    margin-top: 8px;
    padding-top: 16px;
}

.document-format-toolbar {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px 8px 0 0;
    display: grid;
    gap: 8px;
    padding: 8px;
}

.document-format-toolbar__selects,
.document-format-toolbar__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.document-format-toolbar__selects {
    align-items: center;
}

.document-format-toolbar__buttons {
    align-items: center;
    border-top: 1px solid var(--border, #d4d4d8);
    padding-top: 8px;
}

.document-format-toolbar + textarea,
.document-format-toolbar + input + .document-rich-editor {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.format-button,
.document-format-toolbar select {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    color: var(--text, #18181b);
    font: inherit;
    min-height: 34px;
}

.format-button {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-width: 36px;
    padding: 0 10px;
}

.format-button--icon svg {
    display: block;
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 18px;
}

.format-button:hover,
.document-format-toolbar select:hover {
    border-color: var(--accent, #068803);
}

.document-format-toolbar select {
    flex: 1 1 150px;
    padding: 0 28px 0 10px;
}

.doc-colour-default {
    color: var(--text, #18181b);
}

.doc-colour-green {
    color: #068803;
}

.doc-colour-red {
    color: #b91c1c;
}

.doc-colour-blue {
    color: #1d4ed8;
}

.doc-colour-amber {
    color: #b45309;
}

.doc-colour-grey {
    color: #52525b;
}

.doc-size-small {
    font-size: .88em;
}

.doc-size-normal {
    font-size: 1em;
}

.doc-size-large {
    font-size: 1.18em;
}

.doc-size-heading {
    display: inline-block;
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1.25;
}

.doc-font-sans {
    font-family: Arial, Helvetica, sans-serif;
}

.doc-font-serif {
    font-family: Georgia, "Times New Roman", serif;
}

.doc-font-mono {
    font-family: "Courier New", Courier, monospace;
}

.document-rich-editor {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    color: var(--text, #18181b);
    line-height: 1.6;
    min-height: 220px;
    overflow: auto;
    padding: 12px;
}

.document-rich-editor--small {
    min-height: 110px;
}

.document-rich-editor[data-customer-note-editor] {
    height: auto;
    min-height: 124px;
    max-height: none;
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
}

.document-rich-editor:focus {
    border-color: var(--primary, #18181b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #18181b) 14%, transparent);
    outline: none;
}

.document-rich-editor p:first-child {
    margin-top: 0;
}

.document-rich-editor p {
    margin: 0 0 12px;
}

.document-rich-editor p:last-child {
    margin-bottom: 0;
}

.doc-align-left,
.doc-align-centre,
.doc-align-right {
    display: block;
}

.doc-align-left {
    text-align: left;
}

.doc-align-centre {
    text-align: center;
}

.doc-align-right {
    text-align: right;
}

.field-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobsheet-contact-grid {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.jobsheet-create-detail-grid {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.jobsheet-edit-flow {
    background: #ffffff;
    border: 1px solid var(--card-header-bg, var(--primary, #18181b));
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    gap: 0;
    overflow: hidden;
}

.jobsheet-edit-page-head {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0 0 16px;
    padding: 0 0 12px;
}

.jobsheet-edit-page-head .jobsheet-create-head__title {
    flex: 0 0 auto;
    min-width: max-content;
}

.jobsheet-edit-page-head .page-title {
    font-size: 2rem;
    white-space: nowrap;
}

.jobsheet-edit-page-head .jobsheet-anchor-nav {
    flex-wrap: nowrap;
    min-width: 0;
}

.jobsheet-edit-page-head .jobsheet-anchor {
    font-size: .75rem;
    padding-inline: 9px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .jobsheet-edit-page-head {
        align-items: stretch;
        flex-direction: column;
    }

    .jobsheet-edit-page-head .jobsheet-anchor-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.jobsheet-edit-flow > .alert {
    border-radius: 0;
    margin: 0;
}

.jobsheet-edit-flow .jobsheet-contact-grid,
.jobsheet-edit-flow .jobsheet-create-detail-grid {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
}

.jobsheet-edit-flow .jobsheet-contact-grid {
    background: #ffffff;
    gap: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, auto) auto auto;
    padding: 0;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack {
    align-self: stretch;
    display: contents;
    gap: 0;
    grid-template-rows: auto auto auto;
}

.jobsheet-edit-flow .form-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 0;
    margin: 0;
    overflow: visible;
    padding: 0;
}

.jobsheet-edit-flow .form-section + .form-section,
.jobsheet-edit-flow .jobsheet-contact-grid + .form-section,
.jobsheet-edit-flow .jobsheet-create-detail-grid > .form-section,
.jobsheet-edit-flow .jobsheet-contact-grid + .jobsheet-create-detail-grid,
.jobsheet-edit-flow .jobsheet-preferred-contact-row + .jobsheet-create-detail-grid {
    border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, var(--border, #e4e4e7));
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-contact-card {
    grid-column: 1;
    grid-row: 1;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-preferred-contact-row,
.jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-intake-card,
.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map,
.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card {
    display: contents;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-preferred-contact-row > .form-section__head {
    grid-column: 1;
    grid-row: 2;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-preferred-contact-row > .field-grid {
    grid-column: 1;
    grid-row: 3;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-intake-card > .field-grid {
    grid-column: 1;
    grid-row: 4;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-contact-card {
    grid-column: 2;
    grid-row: 1;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__head {
    grid-column: 2;
    grid-row: 2;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__frame {
    grid-column: 2;
    grid-row: 3 / 5;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card > .form-section__head {
    grid-column: 1 / -1;
    grid-row: 5;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card > .field-grid {
    grid-column: 1 / -1;
    grid-row: 6;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .form-section,
.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__head,
.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__frame {
    border-left: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, var(--border, #e4e4e7));
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-preferred-contact-row > .form-section__head,
.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__head,
.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card > .form-section__head {
    border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, var(--border, #e4e4e7));
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-intake-card > .field-grid,
.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card > .field-grid {
    border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 14%, var(--border, #e4e4e7));
}

.jobsheet-edit-flow .form-section__head {
    align-items: center;
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 92%, #ffffff);
    color: var(--card-header-text, #ffffff);
    display: flex;
    justify-content: flex-start;
    margin: 0;
    min-height: var(--panel-header-height);
    padding: var(--panel-header-padding);
    text-align: left;
}

.jobsheet-edit-flow .form-section__head h2 {
    color: inherit;
    font-size: 1.05rem;
    line-height: 1.2;
    margin: 0;
}

.jobsheet-edit-flow .field-grid {
    padding: 16px;
}

.login-card__brand {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
    text-align: center;
}

.login-card__brand img {
    border-radius: 6px;
    height: 54px;
    object-fit: contain;
    width: 96px;
}

.jobsheet-edit-flow .submit-bar {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 10px 0 0;
    padding: 0;
}

.jobsheet-detached-submit {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin-top: 14px;
    padding: 0;
}

.jobsheet-machine-card,
.jobsheet-intake-card,
.jobsheet-preferred-contact-row,
.jobsheet-timing-card {
    gap: 0;
    grid-template-columns: 1fr;
    overflow: hidden;
    padding: 0;
}

.jobsheet-machine-card {
    order: 2;
}

.jobsheet-intake-card {
    order: 1;
}

.jobsheet-machine-card .form-section__head,
.jobsheet-intake-card .form-section__head,
.jobsheet-preferred-contact-row .form-section__head,
.jobsheet-timing-card .form-section__head {
    align-items: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #fff);
    display: flex;
    justify-content: flex-start;
    margin: 0;
    padding: var(--panel-header-padding);
    text-align: left;
}

.jobsheet-machine-card .form-section__head h2,
.jobsheet-intake-card .form-section__head h2,
.jobsheet-preferred-contact-row .form-section__head h2,
.jobsheet-timing-card .form-section__head h2 {
    font-size: 1.05rem;
    line-height: 1.2;
    margin: 0;
}

.jobsheet-machine-card > .field-grid,
.jobsheet-intake-card > .field-grid {
    padding: 16px;
}

.jobsheet-contact-card {
    gap: 12px;
    grid-template-columns: 1fr;
    overflow: hidden;
    padding: 16px;
}

.jobsheet-contact-card .form-section__head {
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #fff);
    margin: -16px -16px 0;
    padding: var(--panel-header-padding);
}

.jobsheet-contact-card .form-section__head h2 {
    font-size: 1.05rem;
    margin: 0;
}

.jobsheet-edit-flow .jobsheet-contact-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
}

.jobsheet-edit-flow .jobsheet-contact-card .form-section__head {
    border-radius: 0;
    margin: 0;
    padding: var(--panel-header-padding);
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child .jobsheet-contact-card .form-section__head {
    border-top-left-radius: 7px;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) .jobsheet-contact-card .form-section__head {
    border-top-right-radius: 7px;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) .jobsheet-contact-card {
    display: block;
    min-height: 0;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) .field-grid {
    align-content: stretch;
    height: auto;
}

.jobsheet-edit-flow .jobsheet-location-grid {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .9fr);
}

.jobsheet-edit-flow .jobsheet-location-fields {
    align-content: start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
}

.jobsheet-edit-flow .jobsheet-location-grid > .field-wide:not(.address-map) {
    grid-column: 1 / -1;
}

.jobsheet-edit-flow .jobsheet-location-notes {
    align-self: stretch;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
}

.jobsheet-edit-flow .jobsheet-location-notes textarea {
    min-height: 0;
    overflow: auto;
    resize: none;
}

.jobsheet-edit-flow .address-map {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    display: contents;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 260px;
}

.jobsheet-edit-flow .address-map__head {
    min-height: var(--panel-header-height);
    padding: var(--panel-header-padding);
}

.jobsheet-edit-flow .address-map__frame,
.jobsheet-edit-flow .address-map__empty {
    min-height: 500px;
}

.jobsheet-edit-flow .address-map__frame iframe {
    height: 100%;
    min-height: 500px;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map .address-map__frame,
.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map .address-map__empty {
    min-height: 500px;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map .address-map__frame iframe {
    min-height: 500px;
}

.jobsheet-edit-flow .jobsheet-schedule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobsheet-edit-flow .jobsheet-contact-grid {
    grid-template-rows: auto auto auto;
}

.jobsheet-edit-flow .jobsheet-left-intake-flow {
    grid-column: 1;
    grid-row: 2;
}

.jobsheet-edit-flow .jobsheet-left-intake-flow > .jobsheet-preferred-contact-row,
.jobsheet-edit-flow .jobsheet-left-intake-flow > .jobsheet-intake-card {
    display: grid;
}

.jobsheet-edit-flow .jobsheet-left-intake-flow > .jobsheet-preferred-contact-row > .form-section__head,
.jobsheet-edit-flow .jobsheet-left-intake-flow > .jobsheet-preferred-contact-row > .field-grid,
.jobsheet-edit-flow .jobsheet-left-intake-flow > .jobsheet-intake-card > .field-grid {
    grid-column: auto;
    grid-row: auto;
}

.jobsheet-edit-flow .jobsheet-left-intake-flow > .jobsheet-preferred-contact-row > .form-section__head {
    border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, var(--border, #e4e4e7));
}

.jobsheet-edit-flow .jobsheet-left-intake-flow > .jobsheet-intake-card > .field-grid {
    border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 14%, var(--border, #e4e4e7));
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    grid-template-rows: auto 500px;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__head,
.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__frame {
    grid-column: auto;
    grid-row: auto;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
}

.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card > .form-section__head,
.jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card > .field-grid {
    grid-column: auto;
    grid-row: auto;
}

@media (max-width: 760px) {
    .jobsheet-edit-flow .jobsheet-contact-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .jobsheet-edit-flow .jobsheet-contact-grid > .stack {
        display: grid;
    }

    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-preferred-contact-row,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-intake-card,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card {
        display: grid;
    }

    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-contact-card,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-preferred-contact-row,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-intake-card,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-contact-card,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card {
        grid-column: auto;
        grid-row: auto;
    }

    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-preferred-contact-row > .form-section__head,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-preferred-contact-row > .field-grid,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:first-child > .jobsheet-intake-card > .field-grid,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__head,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__frame,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card > .form-section__head,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .jobsheet-timing-card > .field-grid {
        grid-column: auto;
        grid-row: auto;
    }

    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .form-section,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__head,
    .jobsheet-edit-flow .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__frame {
        border-left: 0;
    }

    .jobsheet-edit-flow .jobsheet-location-grid {
        grid-template-columns: 1fr;
    }
}

/* Stronger status-led hierarchy for the dashboard and workbench. */
.job-card-list {
    background: color-mix(in srgb, var(--status-colour, #64748b) 48%, #ffffff);
}

.job-mini-card {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--status-colour, #64748b) 34%, #cbd5e1);
}

.dashboard-job-sales .job-sales-pane,
.dashboard-job-sales.job-sales-pane,
.dashboard-special-orders {
    background: color-mix(in srgb, var(--status-colour, #334155) 26%, #ffffff);
    border-color: color-mix(in srgb, var(--status-colour, #334155) 70%, #64748b);
}

.job-sales-cart > .job-sales-pane__title,
.job-sales-invoicing > .job-sales-pane__title,
.dashboard-special-orders > .job-sales-pane__title,
.job-sales-bar,
.job-sales-add > summary,
.dashboard-special-orders .job-sales-add > summary {
    background: var(--status-colour, #334155);
    color: var(--status-text-colour, #ffffff);
}

.job-sales-table th,
.dashboard-special-orders .job-sales-table th {
    background: color-mix(in srgb, var(--status-colour, #334155) 82%, #111827);
    color: #ffffff;
}

.job-sales-cart__footer,
.job-sales-proforma,
.job-sales-document-card,
.job-sales-document-card--quotation,
.job-sales-document-card footer,
.job-sales-document-card--quotation footer,
.job-sales-empty--panel {
    background: color-mix(in srgb, var(--status-colour, #334155) 20%, #ffffff);
    border-color: color-mix(in srgb, var(--status-colour, #334155) 58%, #cbd5e1);
}

.job-sales-document-card footer,
.job-sales-document-card--quotation footer {
    border-top-color: color-mix(in srgb, var(--status-colour, #334155) 46%, #cbd5e1);
}

.job-sales-ledger,
.job-sales-add,
.dashboard-special-orders .job-sales-add {
    background: color-mix(in srgb, var(--status-colour, #334155) 25%, #ffffff);
    border-color: color-mix(in srgb, var(--status-colour, #334155) 68%, #64748b);
}

.job-sales-add__grid,
.dashboard-special-orders .job-sales-form--special {
    background: color-mix(in srgb, var(--status-colour, #334155) 18%, #ffffff);
}

.job-sales-form,
.job-sales-inline-form {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--status-colour, #334155) 42%, #cbd5e1);
}

.dashboard-activity-module {
    background: var(--workbench-card-surface, #edf0f2);
    border: 1px solid color-mix(in srgb, var(--status-colour, #334155) 72%, #64748b);
}

.dashboard-activity-module > .dashboard-note-ledger__head {
    background: var(--status-colour, #334155);
    border-bottom-color: color-mix(in srgb, var(--status-colour, #334155) 76%, #111827);
    color: var(--status-text-colour, #ffffff);
    min-height: 36px;
    padding: 5px 8px;
}

.dashboard-activity-module > .dashboard-note-ledger__head h3 {
    color: inherit;
}

.dashboard-activity-module > .dashboard-note-ledger__head h3 {
    font-size: .9rem;
}

.dashboard-activity-grid {
    padding: 10px;
}

.dashboard-activity-picker,
.dashboard-activity-list {
    background: color-mix(in srgb, var(--status-colour, #334155) 18%, #ffffff);
    border-color: color-mix(in srgb, var(--status-colour, #334155) 55%, #94a3b8);
}

.dashboard-activity-picker__group {
    background: color-mix(in srgb, var(--activity-accent) 28%, #ffffff);
    border-color: color-mix(in srgb, var(--activity-accent) 64%, #94a3b8);
}

.dashboard-activity-picker__group h4,
.dashboard-activity-list__column h4,
.dashboard-activity-list__notes h4 {
    background: color-mix(in srgb, var(--activity-accent) 38%, #ffffff);
    border-color: color-mix(in srgb, var(--activity-accent) 58%, #ffffff);
}

.dashboard-activity-choice-list {
    background: color-mix(in srgb, var(--activity-accent) 20%, #ffffff);
    border-color: color-mix(in srgb, var(--activity-accent) 52%, #cbd5e1);
}

.dashboard-activity-list__column,
.dashboard-activity-list__notes {
    background: color-mix(in srgb, var(--activity-accent) 26%, #ffffff);
    border-color: color-mix(in srgb, var(--activity-accent) 58%, #94a3b8);
}

.dashboard-activity-item {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--activity-accent, #64748b) 42%, #cbd5e1);
}

.dashboard-activity-picker__custom,
.dashboard-activity-picker__note {
    background: color-mix(in srgb, var(--status-colour, #334155) 22%, #ffffff);
    border-color: color-mix(in srgb, var(--status-colour, #334155) 52%, #94a3b8);
}

.dashboard-job-sales__top {
    position: relative;
}

.dashboard-job-sales__top::after {
    background: color-mix(in srgb, var(--status-colour, #334155) 62%, #94a3b8);
    border-radius: 999px;
    bottom: 8px;
    content: "";
    left: calc(48% - 1px);
    position: absolute;
    top: 8px;
    width: 2px;
}

.job-sales-divider {
    background: color-mix(in srgb, var(--status-colour, #334155) 62%, #94a3b8);
    height: 2px;
    margin: 16px 4px;
}

.job-sales-divider + .job-sales-ledger,
.job-sales-divider + .job-sales-add {
    margin-top: 0;
}

.workbench-section-divider {
    background: color-mix(in srgb, var(--status-colour, #334155) 58%, #94a3b8);
    height: 2px;
    margin: 18px 12px;
}

@media (max-width: 980px) {
    .dashboard-job-sales__top::after {
        display: none;
    }

    .dashboard-activity-grid,
    .dashboard-activity-picker__custom,
    .dashboard-activity-picker__note {
        grid-template-columns: 1fr;
    }
}

/* Jobsheet timers */
.dashboard-timer-module {
    align-content: start;
    display: grid;
    gap: 10px;
    overflow: visible;
}

.dashboard-timer-header {
    align-items: center;
    background: var(--status-colour, #334155);
    border-bottom: 1px solid color-mix(in srgb, var(--status-colour, #334155) 78%, #111827);
    border-radius: 6px 6px 0 0;
    color: var(--status-text-colour, #ffffff);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin: -8px -8px 0;
    min-height: 52px;
    padding: 7px 9px;
}

.dashboard-timer-header__title {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.dashboard-timer-header__icon {
    align-items: center;
    background: color-mix(in srgb, currentColor 12%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 5px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.dashboard-timer-header__icon svg {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    width: 18px;
}

.dashboard-timer-module .dashboard-timer-header h3,
.dashboard-timer-module .dashboard-timer-header p {
    color: inherit;
    margin: 0;
    padding: 0;
}

.dashboard-timer-module .dashboard-timer-header h3 {
    background: transparent;
    font-size: .92rem;
    line-height: 1.15;
}

.dashboard-timer-module .dashboard-timer-header p {
    color: inherit;
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .06em;
    line-height: 1.1;
    opacity: .72;
    text-transform: uppercase;
}

.dashboard-timer-start {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.dashboard-timer-start input {
    min-height: 40px;
    min-width: 0;
    padding: 8px 10px;
}

.dashboard-timer-start button,
.dashboard-timer-manual summary,
.dashboard-timer-row__actions :is(button, summary) {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
}

.dashboard-timer-start svg,
.dashboard-timer-manual summary svg,
.dashboard-timer-row svg {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    width: 16px;
}

.dashboard-timer-manual,
.dashboard-timer-action-menu {
    position: relative;
}

.dashboard-timer-manual summary,
.dashboard-timer-action-menu summary {
    cursor: pointer;
    list-style: none;
}

.dashboard-timer-manual summary::-webkit-details-marker,
.dashboard-timer-action-menu summary::-webkit-details-marker {
    display: none;
}

.dashboard-timer-manual > summary {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 5px;
    color: #111827;
    font-size: .72rem;
    font-weight: 800;
    min-height: 32px;
    padding: 5px 8px;
}

.dashboard-timer-manual > form,
.dashboard-timer-action-menu > form {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border-strong, #a1a1aa);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
    display: grid;
    gap: 9px;
    padding: 12px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: min(330px, calc(100vw - 40px));
    z-index: 18;
}

.dashboard-timer-manual label,
.dashboard-timer-action-menu label {
    display: grid;
    font-size: .75rem;
    font-weight: 800;
    gap: 4px;
}

.dashboard-timer-manual input,
.dashboard-timer-action-menu input {
    min-width: 0;
    width: 100%;
}

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

.dashboard-timer-row {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d4d4d8);
    border-left: 5px solid #71717a;
    border-radius: 6px;
    display: grid;
    gap: 9px 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 11px 12px;
}

.dashboard-timer-row.is-running {
    border-left-color: #16a34a;
}

.dashboard-timer-row.is-billed {
    border-left-color: #2563eb;
}

.dashboard-timer-row__main {
    align-items: center;
    display: flex;
    gap: 16px;
    grid-column: 1 / -1;
    justify-content: space-between;
}

.dashboard-timer-row__title {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.dashboard-timer-row__title > strong {
    overflow-wrap: anywhere;
}

.dashboard-timer-row__user {
    align-items: center;
    color: var(--muted-text, #52525b);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 800;
    gap: 5px;
}

.dashboard-timer-row__duration {
    align-items: center;
    color: var(--primary, #2563eb);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    gap: 7px;
}

.dashboard-timer-live-dot {
    background: #16a34a;
    border-radius: 50%;
    box-shadow: 0 0 0 4px color-mix(in srgb, #16a34a 18%, transparent);
    height: 8px;
    width: 8px;
}

.dashboard-timer-billed-badge {
    background: color-mix(in srgb, #2563eb 12%, white);
    border: 1px solid color-mix(in srgb, #2563eb 32%, white);
    border-radius: 999px;
    color: #1d4ed8;
    font-size: .65rem;
    padding: 3px 6px;
}

.dashboard-timer-row__meta,
.dashboard-timer-row__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dashboard-timer-row__meta {
    color: var(--muted-text, #52525b);
    font-size: .73rem;
}

.dashboard-timer-row__meta > span {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.dashboard-timer-row__actions {
    justify-content: flex-end;
}

.dashboard-timer-row__actions form {
    margin: 0;
}

.dashboard-timer-row__actions :is(.button, .button-secondary, .button-danger) svg {
    height: 14px;
    width: 14px;
}

.dashboard-timer-action-menu > summary,
.dashboard-timer-icon-button {
    align-items: center;
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 5px;
    color: var(--text, #18181b);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    min-height: 30px;
    padding: 5px 8px;
}

.dashboard-timer-action-menu:not(.dashboard-timer-action-menu--bill) > summary {
    min-width: 31px;
    padding: 6px;
}

.dashboard-timer-icon-button--delete {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #dc2626;
    cursor: pointer;
    min-width: 31px;
    padding: 6px;
}

.dashboard-timer-cart-link {
    color: #1d4ed8;
    font-size: .72rem;
    font-weight: 800;
}

.dashboard-timer-empty {
    align-items: center;
    background: color-mix(in srgb, var(--surface-soft, #f4f4f5) 88%, #ffffff);
    border: 1px dashed var(--border, #d4d4d8);
    border-radius: 6px;
    color: var(--muted-text, #52525b);
    display: grid;
    gap: 3px;
    justify-items: center;
    margin: 0;
    padding: 16px 12px;
    text-align: center;
}

.dashboard-timer-empty svg {
    fill: none;
    height: 22px;
    margin-bottom: 3px;
    stroke: var(--primary, #2563eb);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 22px;
}

.dashboard-timer-empty strong {
    color: var(--text, #18181b);
    font-size: .8rem;
}

.dashboard-timer-empty span {
    font-size: .7rem;
    line-height: 1.35;
}

.dashboard-workbench-lower-grid__timer .dashboard-timer-start,
.dashboard-workbench-lower-grid__timer .dashboard-timer-row {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-workbench-lower-grid__timer .dashboard-timer-row {
    position: relative;
}

.dashboard-workbench-lower-grid__timer .dashboard-timer-start button {
    min-height: 38px;
    width: 100%;
}

.dashboard-workbench-lower-grid__timer .dashboard-timer-row__main {
    align-items: flex-start;
    gap: 8px;
}

.dashboard-workbench-lower-grid__timer .dashboard-timer-row__meta,
.dashboard-workbench-lower-grid__timer .dashboard-timer-row__actions {
    grid-column: 1;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
}

.dashboard-workbench-lower-grid__timer .dashboard-timer-action-menu {
    position: static;
}

.dashboard-workbench-lower-grid__timer .dashboard-timer-action-menu > form {
    left: 8px;
    right: 8px;
    top: calc(100% + 6px);
    width: auto;
}

@media (max-width: 720px) {
    .dashboard-timer-header,
    .dashboard-timer-row__main {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-timer-start,
    .dashboard-timer-row {
        grid-template-columns: 1fr;
    }

    .dashboard-timer-row__main {
        gap: 8px;
    }

    .dashboard-timer-row__duration,
    .dashboard-timer-row__actions {
        justify-content: flex-start;
    }

    .dashboard-timer-manual > form {
        left: 0;
        right: auto;
    }

    .dashboard-timer-action-menu > form {
        left: 0;
        right: auto;
    }
}

/* Compact Technician Activity, following the dense original workbench. */
.dashboard-activity-module > .dashboard-note-ledger__head {
    min-height: 36px;
    padding: 5px 8px;
}

.dashboard-activity-module > .dashboard-note-ledger__head h3 {
    font-size: .9rem;
}

.dashboard-activity-grid {
    gap: 8px;
    grid-template-columns: minmax(260px, .72fr) minmax(470px, 1.28fr);
    padding: 7px;
}

.dashboard-activity-picker,
.dashboard-activity-list {
    border-radius: 5px;
    gap: 6px;
    padding: 6px;
}

.dashboard-activity-picker__group {
    border-left-width: 4px;
    border-radius: 5px;
    gap: 4px;
    padding: 5px;
}

.dashboard-activity-picker__group h4,
.dashboard-activity-list__column h4,
.dashboard-activity-list__notes h4 {
    border-radius: 4px;
    font-size: 11px;
    min-height: 24px;
    padding: 3px 5px;
}

.dashboard-activity-default-buttons {
    gap: 4px;
}

.dashboard-activity-default-button {
    font-size: 10px;
    min-height: 22px;
    padding: 2px 4px;
}

.dashboard-activity-choice-list {
    border-radius: 4px;
    gap: 2px;
    height: 138px;
    max-height: 138px;
    padding: 3px;
}

.dashboard-activity-choice {
    gap: 5px;
    grid-template-columns: 27px minmax(0, 1fr);
    min-height: 29px;
    padding: 2px 4px;
}

.dashboard-activity-choice__icon,
.dashboard-activity-choice__icon img {
    height: 26px;
    width: 26px;
}

.dashboard-activity-choice span:last-child {
    font-size: 11px;
    line-height: 1.1;
}

.dashboard-activity-list {
    gap: 5px;
}

.dashboard-activity-list__column,
.dashboard-activity-list__notes {
    border-radius: 5px;
    gap: 3px;
    padding: 5px;
}

.dashboard-activity-list__column .dashboard-activity-item,
.dashboard-activity-list__notes .dashboard-activity-item {
    border-left-width: 3px;
    border-radius: 4px;
    gap: 5px;
    padding: 4px 6px;
}

.dashboard-activity-item strong {
    font-size: 12px;
    line-height: 1.15;
}

.dashboard-activity-item small {
    font-size: 10px;
    line-height: 1.15;
    margin-top: 1px;
}

.dashboard-activity-item p {
    font-size: 11px;
    line-height: 1.2;
    margin-top: 3px;
}

.dashboard-activity-list__empty {
    font-size: 11px;
    padding: 2px;
}

.dashboard-activity-list__entry-tools {
    gap: 5px;
    margin-top: 0;
    padding-top: 6px;
}

.dashboard-activity-picker__custom,
.dashboard-activity-picker__note {
    border-radius: 5px;
    gap: 6px;
    grid-template-columns: 74px minmax(90px, .42fr) minmax(130px, 1fr) auto;
    padding: 5px;
}

.dashboard-activity-picker__note {
    align-items: center;
    grid-template-columns: 74px minmax(0, 1fr) auto;
}

.dashboard-activity-picker__custom label,
.dashboard-activity-picker__note label {
    font-size: 11px;
}

.dashboard-activity-picker__custom select,
.dashboard-activity-picker__custom input,
.dashboard-activity-picker__note textarea {
    min-height: 32px;
    padding: 5px 7px;
}

.dashboard-activity-picker__note textarea {
    height: 32px;
    resize: vertical;
}

.jobsheet-subsection-field {
    background: color-mix(in srgb, var(--surface, #ffffff) 94%, var(--primary, #18181b));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 18%, var(--border, #d4d4d8));
    border-radius: 8px;
    overflow: hidden;
}

.jobsheet-subsection-bar {
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #fff);
    font-size: .95rem;
    font-weight: 800;
    margin: 0 0 12px;
    padding: 10px 12px;
}

.jobsheet-subsection-field .radio-grid {
    padding: 0 12px 12px;
}

.preferred-contact-grid.radio-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.jobsheet-edit-flow .jobsheet-intake-status-list.radio-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preferred-contact-grid .radio-pill {
    font-size: .82rem;
    justify-content: center;
    padding: 7px 8px;
    text-align: center;
}

.preferred-contact-grid .radio-pill input[type="radio"] {
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.preferred-contact-grid .radio-pill:has(input:focus-visible) {
    outline: 2px solid color-mix(in srgb, var(--primary, #18181b) 72%, #ffffff);
    outline-offset: 2px;
}

.preferred-contact-icon {
    fill: none;
    flex: 0 0 17px;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 17px;
}

.jobsheet-edit-flow .jobsheet-intake-status-list .radio-pill {
    font-size: .82rem;
    justify-content: center;
    min-height: 34px;
    padding: 7px 8px;
    text-align: center;
}

.jobsheet-intake-status-list .initial-status-icon {
    display: block;
    fill: none;
    flex: 0 0 18px;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 18px;
}

.jobsheet-intake-status-list .initial-status-icon__dot {
    fill: currentColor;
    stroke: none;
}

.jobsheet-edit-flow .jobsheet-intake-divider {
    border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, var(--border, #e4e4e7));
    margin-top: 2px;
    padding-top: 14px;
}

.jobsheet-edit-flow .jobsheet-intake-checklist {
    border-top: 0;
    padding-top: 0;
}

.jobsheet-edit-flow .jobsheet-intake-row-divider {
    border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, var(--border, #e4e4e7));
    grid-column: 1 / -1;
    height: 0;
    margin: 2px 0 0;
}

.jobsheet-edit-flow .jobsheet-status-divider {
    border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, var(--border, #e4e4e7));
    grid-column: 1 / -1;
    height: 0;
    margin: 0 -16px;
}

.jobsheet-edit-flow .jobsheet-info-services-head {
    align-items: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #fff);
    display: grid;
    font-size: .95rem;
    font-weight: 800;
    gap: 0;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    letter-spacing: .01em;
    margin-top: 0;
    min-height: var(--panel-header-height);
}

.jobsheet-edit-flow .jobsheet-job-services-section {
    border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, var(--border, #e4e4e7));
    display: grid;
    grid-template-columns: 1fr;
}

.jobsheet-edit-flow .jobsheet-job-services-grid {
    display: grid;
    gap: 0;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 16px;
}

.jobsheet-edit-flow .jobsheet-info-services-head span {
    align-items: center;
    display: flex;
    min-height: var(--panel-header-height);
    padding: var(--panel-header-padding);
}

.jobsheet-edit-flow .jobsheet-info-services-head span + span {
    border-left: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 70%, #ffffff);
}

.jobsheet-edit-flow .jobsheet-job-info-fields {
    display: grid;
    gap: 12px;
    grid-column: 1;
    min-width: 0;
    padding-right: 16px;
}

.jobsheet-edit-flow .jobsheet-services-panel {
    align-self: stretch;
    border-left: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 18%, var(--border, #d4d4d8));
    grid-column: 2;
    margin: 0;
    min-width: 0;
    padding-left: 16px;
}

.jobsheet-edit-flow .jobsheet-services-panel__body {
    display: grid;
    gap: 8px;
    height: 100%;
}

.jobsheet-edit-flow .jobsheet-services-panel > .field-wide {
    margin: 0;
}

.jobsheet-edit-flow .jobsheet-services-panel .service-split-grid,
.jobsheet-edit-flow .jobsheet-services-panel .service-grid {
    grid-template-columns: 1fr;
}

.jobsheet-edit-flow .jobsheet-services-panel .service-split-grid {
    gap: 0;
}

.jobsheet-edit-flow .jobsheet-services-panel .service-split-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 6px;
    padding: 0;
}

.jobsheet-edit-flow .jobsheet-services-panel .service-split-panel > label {
    display: none;
}

.jobsheet-edit-flow .jobsheet-services-panel .service-grid {
    gap: 6px;
}

.jobsheet-edit-flow .jobsheet-services-panel .checkbox-pill {
    border-radius: 5px;
    font-size: .78rem;
    gap: 7px;
    line-height: 1.1;
    min-height: 29px;
    padding: 5px 8px;
}

.jobsheet-edit-flow .jobsheet-services-panel .checkbox-pill input {
    flex: 0 0 auto;
    height: 13px;
    width: 13px;
}

.jobsheet-edit-flow .jobsheet-schedule-panel {
    align-self: stretch;
    border-left: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 18%, var(--border, #d4d4d8));
    display: grid;
    grid-column: 2;
    margin: 0;
    min-width: 0;
    padding-left: 16px;
}

.jobsheet-edit-flow .jobsheet-schedule-panel .jobsheet-schedule-grid {
    align-content: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobsheet-edit-flow .jobsheet-requested-services-section {
    border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, var(--border, #e4e4e7));
    display: grid;
    grid-template-columns: 1fr;
}

.jobsheet-edit-flow .jobsheet-requested-services-grid {
    display: grid;
    grid-column: 1 / -1;
    padding: 16px;
}

.jobsheet-edit-flow .jobsheet-requested-services-grid > .service-split-grid {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.jobsheet-edit-flow .jobsheet-requested-services-grid .service-split-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 6px;
    padding: 0;
}

.jobsheet-edit-flow .jobsheet-requested-services-grid .service-split-panel + .service-split-panel {
    border-left: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 18%, var(--border, #d4d4d8));
    padding-left: 16px;
}

.jobsheet-edit-flow .jobsheet-requested-services-grid .service-split-panel:first-child {
    padding-right: 16px;
}

.jobsheet-edit-flow .jobsheet-requested-services-grid .service-grid {
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobsheet-edit-flow .jobsheet-requested-services-grid .checkbox-pill {
    border-radius: 5px;
    font-size: .78rem;
    gap: 7px;
    line-height: 1.1;
    min-height: 29px;
    padding: 5px 8px;
}

.jobsheet-edit-flow .jobsheet-requested-services-grid .checkbox-pill input {
    flex: 0 0 auto;
    height: 13px;
    width: 13px;
}

.jobsheet-edit-flow .jobsheet-included-assets-section {
    border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, var(--border, #e4e4e7));
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    overflow: hidden;
    padding: 0;
}

.jobsheet-edit-flow .jobsheet-included-assets-body {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    padding: 16px;
}

.jobsheet-edit-flow .jobsheet-included-assets-column,
.jobsheet-edit-flow .jobsheet-included-credentials-column {
    min-width: 0;
}

.jobsheet-edit-flow .jobsheet-included-credentials-column {
    border-left: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 18%, var(--border, #d4d4d8));
    padding-left: 16px;
}

.jobsheet-edit-flow .jobsheet-included-assets-column .icon-grid {
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
}

.jobsheet-edit-flow .jobsheet-included-assets-column .icon-tile {
    min-height: 78px;
}

.jobsheet-edit-flow .jobsheet-included-assets-extra-row {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 10px;
    width: 100%;
}

.jobsheet-edit-flow .jobsheet-included-assets-extra-row .field {
    margin: 0;
}

.jobsheet-edit-flow .jobsheet-included-assets-extra-row .field:first-child {
    grid-column: span 2;
}

.jobsheet-mock-badge {
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 12%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 32%, #ffffff);
    border-radius: 999px;
    color: var(--page-title-colour, var(--text, #18181b));
    font-size: .78rem;
    font-weight: 900;
    padding: 6px 10px;
}

.jobsheet-edit-flow--mock {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 0;
    overflow: visible;
    padding: 0;
}

.jobsheet-edit-flow--mock .jobsheet-contact-card,
.jobsheet-edit-flow--mock .jobsheet-location-card,
.jobsheet-edit-flow--mock .jobsheet-preferred-contact-row,
.jobsheet-edit-flow--mock .jobsheet-intake-card,
.jobsheet-edit-flow--mock .address-map,
.jobsheet-edit-flow--mock .jobsheet-job-services-section,
.jobsheet-edit-flow--mock .jobsheet-requested-services-section,
.jobsheet-edit-flow--mock .jobsheet-machine-card,
.jobsheet-edit-flow--mock .jobsheet-included-assets-section {
    background: #ffffff;
    border: 1px solid var(--card-header-bg, var(--primary, #18181b));
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
    margin: 0 0 14px;
    overflow: hidden;
}

.jobsheet-edit-flow--mock .jobsheet-contact-grid,
.jobsheet-edit-flow--mock .jobsheet-create-detail-grid {
    background: transparent;
    column-gap: 14px;
    padding: 0;
}

.jobsheet-edit-flow--mock .form-section__head,
.jobsheet-edit-flow--mock .jobsheet-info-services-head,
.jobsheet-edit-flow--mock .jobsheet-preferred-map-head,
.jobsheet-edit-flow--mock .jobsheet-subsection-bar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .06)),
        var(--card-header-bg, var(--primary, #18181b));
    color: var(--card-header-text, #ffffff);
    min-height: 44px;
}

.jobsheet-edit-flow .jobsheet-card-head {
    position: relative;
}

.jobsheet-card-save {
    appearance: none;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 4px;
    color: var(--card-header-bg, var(--primary, #18181b));
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    width: 30px;
}

.jobsheet-info-services-head .jobsheet-card-save {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.jobsheet-info-services-head > span:last-of-type {
    padding-right: 50px;
}

.jobsheet-card-save:hover,
.jobsheet-card-save:focus-visible {
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 8%, #ffffff);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

.jobsheet-card-save svg {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 17px;
}

.jobsheet-edit-flow--mock .field-grid,
.jobsheet-edit-flow--mock .jobsheet-job-services-grid,
.jobsheet-edit-flow--mock .jobsheet-visible-panel__body,
.jobsheet-edit-flow--mock .jobsheet-requested-services-grid,
.jobsheet-edit-flow--mock .jobsheet-included-assets-body {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.jobsheet-edit-flow--mock .field input,
.jobsheet-edit-flow--mock .field select,
.jobsheet-edit-flow--mock .field textarea {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 22%, var(--border, #d4d4d8));
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
}

.jobsheet-edit-flow--mock .icon-tile,
.jobsheet-edit-flow--mock .checkbox-pill,
.jobsheet-edit-flow--mock .radio-pill {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 20%, var(--border, #d4d4d8));
}

.jobsheet-edit-flow--mock .icon-tile:has(input:checked),
.jobsheet-edit-flow--mock .checkbox-pill:has(input:checked),
.jobsheet-edit-flow--mock .radio-pill:has(input:checked) {
    border-color: var(--card-header-bg, var(--primary, #18181b));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 16%, transparent);
}

.jobsheet-edit-flow--mock .jobsheet-map-panel {
    border-left-color: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 28%, var(--border, #d4d4d8));
}

.jobsheet-edit-flow--mock .jobsheet-included-credentials-column {
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 4%, #ffffff);
}

.jobsheet-edit-flow--mock .jobsheet-included-assets-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}

.jobsheet-edit-flow--mock .jobsheet-included-credentials-column {
    order: 1;
}

.jobsheet-edit-flow--mock .jobsheet-included-assets-column {
    order: 2;
}

.jobsheet-edit-flow--mock .jobsheet-included-assets-column .icon-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jobsheet-edit-flow--mock .jobsheet-included-assets-column .icon-tile {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

.jobsheet-edit-flow--mock .jobsheet-machine-form-columns__brands,
.jobsheet-edit-flow--mock .jobsheet-included-credentials-column {
    border-left: 0;
    padding-left: 0;
}

.jobsheet-edit-flow--mock #device_description {
    min-height: 131px;
    resize: vertical;
}

.jobsheet-edit-flow--mock .jobsheet-left-intake-flow {
    align-self: stretch;
    display: grid;
}

.jobsheet-edit-flow--mock .jobsheet-contact-grid > .stack:nth-child(2) > .address-map {
    align-self: stretch;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
}

.jobsheet-edit-flow--mock .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__head,
.jobsheet-edit-flow--mock .jobsheet-contact-grid > .stack:nth-child(2) > .address-map > .address-map__frame {
    border-left: 0;
}

.jobsheet-edit-flow--mock .jobsheet-contact-grid > .stack:nth-child(2) > .address-map .address-map__frame,
.jobsheet-edit-flow--mock .jobsheet-contact-grid > .stack:nth-child(2) > .address-map .address-map__empty,
.jobsheet-edit-flow--mock .jobsheet-contact-grid > .stack:nth-child(2) > .address-map .address-map__frame iframe {
    height: 100%;
    min-height: 0;
}

.jobsheet-edit-flow .jobsheet-job-services-section > .jobsheet-job-services-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.jobsheet-edit-flow .jobsheet-job-services-section .jobsheet-job-info-fields {
    grid-column: 1 !important;
    width: auto !important;
}

.jobsheet-edit-flow .jobsheet-job-services-section .jobsheet-services-panel {
    grid-column: 2 !important;
    width: auto !important;
}

.jobsheet-edit-flow .jobsheet-job-services-section .jobsheet-schedule-panel {
    grid-column: 2 !important;
    width: auto !important;
}

.jobsheet-edit-flow .jobsheet-job-services-section .jobsheet-services-panel .service-split-grid,
.jobsheet-edit-flow .jobsheet-job-services-section .jobsheet-services-panel .service-grid {
    display: grid;
    grid-template-columns: 1fr !important;
}

.jobsheet-intake-inline {
    display: grid;
    gap: 10px;
    padding-bottom: 10px;
}

.jobsheet-intake-inline .form-section__head {
    align-items: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #fff);
    margin: 0;
    min-height: 34px;
    padding: 7px 24px;
}

.jobsheet-intake-inline .form-section__head h2 {
    font-size: .9rem;
    line-height: 1;
}

.jobsheet-intake-inline .jobsheet-intake-timing-grid {
    gap: 12px;
    grid-template-columns: minmax(0, 1.35fr) minmax(170px, .65fr);
    padding: 0 24px;
}

.jobsheet-intake-inline .radio-pill {
    font-size: .86rem;
    line-height: 1.1;
    padding: 7px 10px;
}

.jobsheet-intake-inline .stack {
    gap: 10px;
}

.jobsheet-intake-inline label {
    font-size: .86rem;
    line-height: 1.15;
}

.jobsheet-intake-inline input[type="datetime-local"] {
    font-size: .9rem;
    padding: 8px 10px;
}

.jobsheet-intake-head {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr);
}

.field-grid--compact {
    gap: 12px;
}

.jobsheet-machine-grid,
.jobsheet-repair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobsheet-machine-form-columns {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, .95fr) minmax(280px, 1.05fr);
}

.jobsheet-machine-form-columns__fields {
    align-content: start;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobsheet-machine-form-columns__brands {
    align-content: start;
    border-left: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 18%, var(--border, #d4d4d8));
    display: grid;
    gap: 10px;
    min-width: 0;
    padding-left: 16px;
}

.jobsheet-machine-card .icon-grid--brand.icon-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jobsheet-machine-grid .field-wide,
.jobsheet-repair-grid .field-wide {
    grid-column: 1 / -1;
}

.jobsheet-collapsible {
    background: color-mix(in srgb, var(--primary, #18181b) 5%, var(--surface-soft, #fafafa));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 16%, var(--border, #d4d4d8));
    border-radius: 8px;
    overflow: hidden;
}

.jobsheet-collapsible summary {
    align-items: center;
    background: color-mix(in srgb, var(--primary, #18181b) 88%, #ffffff);
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: .92rem;
    font-weight: 900;
    justify-content: space-between;
    list-style: none;
    padding: 10px 12px;
}

.jobsheet-collapsible summary::-webkit-details-marker {
    display: none;
}

.jobsheet-collapsible summary::after {
    content: "+";
    font-size: 1rem;
    font-weight: 900;
}

.jobsheet-collapsible[open] summary::after {
    content: "-";
}

.jobsheet-collapsible__body {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.jobsheet-collapsible__body > .field,
.jobsheet-collapsible__body > .field-wide,
.jobsheet-collapsible__body .asset-detail-panel {
    grid-column: 1 / -1;
}

.jobsheet-collapsible .question-panel {
    margin: 0;
}

.jobsheet-visible-panel {
    background: color-mix(in srgb, var(--primary, #18181b) 4%, var(--surface-soft, #fafafa));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 16%, var(--border, #d4d4d8));
    border-radius: 8px;
    overflow: hidden;
}

.jobsheet-visible-panel .jobsheet-subsection-bar {
    margin: 0;
}

.jobsheet-visible-panel__body {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.service-split-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-split-panel {
    background: color-mix(in srgb, var(--surface, #ffffff) 92%, var(--primary, #18181b));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 14%, var(--border, #d4d4d8));
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 10px;
}

.service-split-panel > label {
    color: var(--text, #18181b);
    font-size: .92rem;
    font-weight: 900;
}

.jobsheet-create-credential-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobsheet-credentials-specs-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.jobsheet-credentials-specs-column {
    min-width: 0;
}

.jobsheet-credentials-specs-column--specs {
    border-left: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 18%, var(--border, #d4d4d8));
    padding-left: 16px;
}

.jobsheet-credentials-specs-column--specs .asset-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobsheet-create-credential-panel {
    background: var(--surface, #ffffff);
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 14%, var(--border, #d4d4d8));
    border-radius: 8px;
    display: grid;
    gap: 9px;
    padding: 10px;
}

.jobsheet-create-credential-panel > strong {
    font-size: .92rem;
}

.input-action-row {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.jobsheet-create-pattern {
    align-items: center;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(3, 18px);
    grid-template-rows: repeat(3, 18px);
    justify-content: center;
    min-height: 190px;
}

.jobsheet-create-pattern span {
    background: var(--text, #18181b);
    border-radius: 999px;
    display: block;
    height: 10px;
    width: 10px;
}

.field-grid--compact .field-hint {
    font-size: .8rem;
    margin-top: 5px;
}

.radio-grid--vertical {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
}

.jobsheet-intake-status-list.radio-grid {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
}

.jobsheet-intake-timing-grid {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr);
}

.address-map {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    overflow: hidden;
}

.address-map__head {
    align-items: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #fff);
    display: flex;
    font-weight: 800;
    justify-content: space-between;
    padding: 10px 12px;
}

.address-map__head a {
    color: inherit;
    font-size: .85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.address-map__frame {
    min-height: 220px;
    position: relative;
}

.address-map__frame iframe {
    border: 0;
    height: 220px;
    width: 100%;
}

.address-map__empty {
    color: var(--muted-text, #71717a);
    display: grid;
    height: 100%;
    min-height: 220px;
    overflow: hidden;
    place-items: center;
    text-align: center;
}

.address-map__empty img,
.address-map__placeholder {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.smtp-help-card {
    background: var(--smtp-help-bg, #f8fafc);
    border: 1px solid var(--smtp-help-border, #cbd5e1);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
    color: var(--smtp-help-text, #334155);
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding: 16px 18px;
}

.smtp-help-card h3 {
    font-size: 1rem;
    margin: 0;
}

.smtp-help-card p {
    font-size: .9rem;
    line-height: 1.45;
    margin: 0;
}

.email-recommendations {
    background: var(--smtp-help-bg, #f8fafc);
    border: 1px solid var(--smtp-help-border, #cbd5e1);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
    color: var(--smtp-help-text, #334155);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    padding: 18px;
}

.email-recommendations h2 {
    color: inherit;
    font-size: 1.15rem;
    margin: 0;
}

.email-recommendations p:not(.eyebrow) {
    line-height: 1.5;
    margin: 8px 0 0;
}

.email-provider-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.email-provider-grid span,
.email-test-checklist {
    background: color-mix(in srgb, var(--surface, #fff) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--smtp-help-border, #cbd5e1) 72%, transparent);
    border-radius: 8px;
}

.email-provider-grid span {
    font-weight: 800;
    padding: 9px 10px;
}

.email-test-checklist {
    display: grid;
    gap: 6px;
    padding: 12px;
}

.email-test-checklist strong {
    color: var(--primary, #18181b);
}

.email-test-checklist span {
    color: var(--muted-text, #71717a);
    font-size: .9rem;
    line-height: 1.35;
}

.email-provider-settings {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.email-provider-card {
    background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 10px;
    display: grid;
    gap: 14px;
    padding: 14px;
}

.email-provider-card .field-grid {
    gap: 10px;
    grid-template-columns: 1fr;
}

.email-provider-card__head {
    align-items: center;
    border-bottom: 1px solid var(--border, #e4e4e7);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-bottom: 10px;
}

.email-provider-card__head h3 {
    font-size: 1rem;
    margin: 2px 0 0;
}

.email-provider-card__hint {
    color: var(--muted-text, #71717a);
    font-size: .9rem;
    line-height: 1.4;
    margin: 0;
}

.email-provider-card__actions {
    display: flex;
    justify-content: flex-end;
}

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

.inventory-form {
    gap: 14px;
}

.inventory-form .section-head {
    margin-bottom: 0;
}

.inventory-form .form-section {
    gap: 16px;
    grid-template-columns: 150px minmax(0, 1fr);
    padding: 16px;
}

.inventory-form .form-section__head h2 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.inventory-form .form-section__head .eyebrow {
    margin-bottom: 4px;
}

.inventory-form .field-grid {
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventory-form .field-wide {
    grid-column: span 2;
}

.inventory-form .field label {
    font-size: .84rem;
}

.inventory-form input,
.inventory-form select,
.inventory-form textarea {
    min-height: 36px;
}

.inventory-form textarea {
    resize: vertical;
}

.staff-profile-form {
    gap: 14px;
}

.staff-profile-form .section-head {
    margin-bottom: 0;
}

.staff-profile-form .form-section {
    gap: 16px;
    grid-template-columns: 140px minmax(0, 1fr);
    overflow: hidden;
    padding: 16px;
}

.staff-login-section .form-section__head {
    grid-column: 1 / -1;
}

.staff-login-section > .staff-login-layout {
    grid-column: 1 / -1;
}

.staff-login-layout {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
    align-items: stretch;
}

.staff-login-fields {
    align-content: start;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 14px;
    grid-template-columns: 1fr;
}

.staff-profile-form .staff-login-fields {
    grid-template-columns: 1fr;
}

.staff-login-fields .field-wide {
    grid-column: 1;
}

.staff-login-top-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-login-top-row .checkbox-row {
    align-items: center;
    min-height: 42px;
    padding: 0;
    white-space: nowrap;
}

.staff-login-field-row {
    padding: 0;
}

.staff-login-field-row input {
    width: 100%;
}

.staff-login-password-hint {
    margin: 0;
    padding: 0 2px;
}

.staff-login-submit {
    margin-top: 0;
}

.staff-login-submit .button {
    width: 100%;
}

.staff-login-placeholder {
    align-content: center;
    background: color-mix(in srgb, var(--primary, #18181b) 5%, var(--surface-soft, #fafafa));
    border: 1px dashed color-mix(in srgb, var(--primary, #18181b) 22%, var(--border, #e4e4e7));
    border-radius: 8px;
    color: var(--muted-text, #71717a);
    display: grid;
    gap: 6px;
    min-height: 160px;
    padding: 14px;
}

.staff-login-placeholder strong {
    color: var(--text, #18181b);
}

.staff-profile-form .staff-permissions-section {
    grid-template-columns: 1fr;
}

.staff-profile-form .form-section__head h2 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.staff-profile-form .form-section__head .eyebrow {
    margin-bottom: 4px;
}

.staff-profile-form .field-grid {
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-profile-form .field-wide {
    grid-column: span 2;
}

.staff-profile-form .field label {
    font-size: .84rem;
}

.staff-edit-head {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
}

.staff-edit-head__photo {
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 6px;
    height: 34px;
    object-fit: cover;
    width: 34px;
}

.staff-profile-columns,
.staff-profile-editor {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
}

.staff-profile-editor {
    align-items: start;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
}

.staff-profile-column {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    overflow: hidden;
    padding: 16px;
}

.staff-profile-column--identity {
    align-content: start;
}

.staff-profile-identity-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
}

.staff-profile-active-toggle {
    min-height: 36px;
}

.staff-contact-address-grid {
    display: grid;
    gap: 10px 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-contact-address-grid__wide {
    grid-column: 1 / -1;
}

.staff-profile-photo-control {
    background: color-mix(in srgb, var(--primary, #18181b) 5%, var(--surface, #ffffff));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 14%, var(--border, #e4e4e7));
    border-radius: 7px;
    display: grid;
    gap: 10px;
    padding: 10px;
}

.staff-profile-photo-field {
    align-items: center;
    display: grid;
    justify-content: center;
}

.staff-profile-photo-field img,
.staff-profile-photo-field span {
    align-items: center;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 6px;
    color: var(--muted-text, #71717a);
    display: inline-flex;
    font-size: .68rem;
    font-weight: 800;
    height: 72px;
    justify-content: center;
    object-fit: cover;
    text-align: center;
    width: 72px;
}

.staff-profile-photo-upload-label {
    font-size: .84rem;
    font-weight: 800;
}

.staff-profile-photo-control input[type="file"] {
    min-width: 0;
    width: 100%;
}

.staff-profile-photo-save {
    justify-self: start;
    margin-top: 4px;
}

.staff-profile-column__head,
.staff-profile-form .form-section__head {
    align-content: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    box-sizing: border-box;
    color: var(--card-header-text, #ffffff);
    display: grid;
    gap: 2px;
    height: var(--panel-header-height);
    margin: -16px -16px 0;
    padding: var(--panel-header-padding);
}

.staff-profile-column__head h2,
.staff-profile-form .form-section__head h2 {
    color: inherit;
    font-size: 1rem;
    line-height: 1.05;
    margin: 0;
    white-space: nowrap;
}

.staff-profile-column__head .eyebrow,
.staff-profile-form .form-section__head .eyebrow {
    color: currentColor;
    line-height: 1;
    margin: 0;
    opacity: .74;
}

.staff-profile-form input,
.staff-profile-form select,
.staff-profile-form textarea {
    min-height: 36px;
    padding: 8px 10px;
}

.staff-profile-form textarea {
    min-height: 90px;
    resize: vertical;
}

.staff-permissions-panel {
    min-width: 0;
    width: 100%;
}

.staff-profile-form .permission-group-grid {
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
}

.staff-profile-form .permission-group-card {
    padding: 10px;
}

.staff-profile-form .permission-list {
    gap: 6px;
}

.staff-profile-form .permission-row {
    font-size: .82rem;
    padding: 8px 10px;
}

.staff-profile-form .submit-bar {
    padding: 12px 14px;
}

.inventory-form .field-hint {
    font-size: .78rem;
    margin-top: 4px;
}

.inventory-form .checkbox-row {
    align-self: end;
    min-height: 36px;
}

.inventory-form .submit-bar {
    padding: 12px 14px;
}

.supplier-card-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.supplier-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
    display: grid;
    gap: 18px;
    padding: 22px;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.supplier-card:hover {
    border-color: color-mix(in srgb, var(--primary, #18181b) 36%, var(--border, #e4e4e7));
    box-shadow: 0 16px 32px rgba(15, 23, 42, .12);
    transform: translateY(-3px);
}

.supplier-card__glow {
    background: color-mix(in srgb, var(--primary, #18181b) 12%, transparent);
    border-radius: 999px;
    display: none;
    filter: blur(30px);
    height: 180px;
    position: absolute;
    right: -70px;
    top: -70px;
    width: 180px;
}

.supplier-card__top,
.supplier-card__footer {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    position: relative;
}

.supplier-card__top {
    justify-content: flex-start;
}

.supplier-card__mark {
    align-items: center;
    background: color-mix(in srgb, var(--primary, #18181b) 14%, var(--surface-soft, #fafafa));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 28%, var(--border, #e4e4e7));
    border-radius: 8px;
    color: var(--primary, #18181b);
    display: flex;
    flex: 0 0 64px;
    font-size: 1.35rem;
    font-weight: 800;
    height: 64px;
    justify-content: center;
    text-transform: uppercase;
    width: 64px;
}

.supplier-card__mark img {
    border-radius: 6px;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    width: 100%;
}

.supplier-card__mark--large {
    flex-basis: 82px;
    height: 82px;
    width: 82px;
}

.supplier-logo-upload {
    grid-row: span 2;
}

.supplier-logo-preview {
    align-items: center;
    aspect-ratio: 1;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    color: var(--muted-text, #71717a);
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
    width: 120px;
}

.supplier-logo-preview img {
    height: 100%;
    object-fit: contain;
    padding: 8px;
    width: 100%;
}

.supplier-logo-preview span {
    font-size: .84rem;
    font-weight: 700;
}

.supplier-detail-head {
    align-items: center;
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}

.supplier-detail-head h2 {
    margin: 0;
}

.supplier-card__identity {
    min-width: 0;
}

.supplier-card__identity h2 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.supplier-card__status {
    align-items: center;
    color: var(--muted-text, #71717a);
    display: inline-flex;
    font-size: .86rem;
    font-weight: 700;
    gap: 8px;
}

.supplier-card__status span {
    background: #22c55e;
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(34, 197, 94, .45);
    height: 10px;
    width: 10px;
}

.supplier-card__status--inactive span {
    background: #94a3b8;
    box-shadow: none;
}

.supplier-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
}

.supplier-card__tags span {
    background: color-mix(in srgb, var(--primary, #18181b) 8%, var(--surface-soft, #fafafa));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 14%, var(--border, #e4e4e7));
    border-radius: 999px;
    color: var(--text, #18181b);
    font-size: .8rem;
    font-weight: 750;
    padding: 7px 10px;
}

.supplier-card__info {
    display: grid;
    gap: 12px;
    margin: 0;
    position: relative;
}

.supplier-card__info div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.supplier-card__info dt {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.supplier-card__info dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.supplier-card__info a {
    color: var(--primary, #0f766e);
    font-weight: 750;
}

.supplier-card__footer {
    border-top: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 80%, transparent);
    flex-wrap: wrap;
    padding-top: 16px;
}

.inventory-form .inventory-product-image-panel {
    grid-column: 3 / span 2;
    grid-row: 1 / span 3;
}

.inventory-form .inventory-item-name-field {
    grid-column: 2;
    grid-row: 1;
}

.inventory-product-image-frame {
    align-items: center;
    aspect-ratio: 16 / 9;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    color: var(--muted-text, #71717a);
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
    width: 100%;
}

.inventory-product-image-frame img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.inventory-product-image-frame span {
    font-size: .84rem;
    font-weight: 600;
}

.submit-bar {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px;
}

.theme-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.theme-option {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 16px;
}

.theme-option input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.theme-option::before {
    background:
        linear-gradient(var(--sw1), var(--sw2)) 0 0 / 100% 36% no-repeat,
        linear-gradient(var(--sw5, var(--sw2)), var(--sw5, var(--sw2))) 0 100% / 42% 64% no-repeat,
        linear-gradient(var(--sw3), var(--sw3)) 100% 100% / 58% 64% no-repeat;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .18);
    content: "";
    flex: 0 0 54px;
    height: 38px;
}

.theme-option:has(input:checked) {
    box-shadow: 0 0 0 2px var(--primary, #18181b);
}

.theme-option--clean {
    --sw1: #e5e7eb;
    --sw2: #27272a;
    --sw3: #fafafa;
    --sw4: #ffffff;
    color: #18181b;
}

.theme-option--graphite {
    --sw1: #e5e7eb;
    --sw2: #334155;
    --sw3: #eef2f7;
    --sw4: #f8fafc;
    color: #111827;
}

.theme-option--british {
    --sw1: #012169;
    --sw2: #012169;
    --sw3: #eef3fa;
    --sw4: #ffffff;
    border-color: #8c9bb5;
    color: #111827;
}

.customisation-form .theme-option.theme-option--british span {
    background: #012169;
    height: 50%;
    min-height: 50%;
    position: relative;
    z-index: 1;
}

.customisation-form .theme-option.theme-option--british::before {
    background: url("backgrounds/union-flag-header.svg") center / cover no-repeat;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
}

.theme-option--midnight {
    --sw1: #28343b;
    --sw2: #8b0000;
    --sw3: #28343b;
    --sw4: #ffffff;
    color: #18181b;
}

.theme-option--high_contrast {
    --sw1: #222222;
    --sw2: #515151;
    --sw3: #f4f4f4;
    --sw4: #ffffff;
    color: #000;
}

.theme-option--rainbow {
    --sw1: #dc2626;
    --sw2: #ea580c;
    --sw3: #16a34a;
    --sw4: #dbeafe;
    border-color: #a78bfa;
    color: #111827;
}

.theme-option--futuristic {
    --sw1: #222222;
    --sw2: #ea5800;
    --sw3: #f7f7f7;
    --sw4: #ffffff;
    color: #18181b;
}

.theme-option--black_blue {
    --sw1: #3396ff;
    --sw2: #ff8132;
    --sw3: #333333;
    --sw4: #ffffff;
    color: #18181b;
}

.theme-option--black_red {
    --sw1: #f69b9a;
    --sw2: #ef4666;
    --sw3: #84af9c;
    --sw4: #c6c7aa;
    color: #18181b;
}

.theme-option--black_green {
    --sw1: #d3ff04;
    --sw2: #a4c400;
    --sw3: #8f8f8f;
    --sw4: #ffffff;
    color: #18181b;
}

.interface-colour-panel {
    align-content: start;
}

.interface-card-divider {
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--primary, #18181b) 18%, var(--border, #e4e4e7));
    margin: 12px 0;
}

.interface-swatches-card > .theme-grid,
.interface-swatches-card > .interface-card-divider,
.interface-swatches-card > .interface-colour-grid,
.interface-swatches-card > .interface-visual-builder,
.interface-swatches-card > .interface-save-swatch,
.interface-swatches-card > .interface-swatch-delete-list {
    grid-column: 2;
}

.interface-colour-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.interface-colour-grid .field:first-child,
.interface-colour-grid .field:nth-child(2) {
    grid-column: 1 / -1;
}

.interface-colour-grid input[type="color"] {
    height: 34px;
    padding: 3px;
    width: 74px;
}

.interface-visual-builder {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(280px, 1.35fr) minmax(190px, .65fr);
    --preview-card-body: #ffffff;
}

.interface-layout-preview,
.interface-card-preview {
    border: 2px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 75%, #000);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .12);
    color: #111827;
    display: grid;
    overflow: hidden;
}

.interface-layout-preview {
    background: var(--preview-page);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 76px 180px;
    min-height: 256px;
}

.interface-card-preview {
    align-self: start;
    grid-template-rows: 76px 180px;
    min-height: 256px;
}

.interface-region {
    align-items: center;
    border: 1px solid rgba(17, 24, 39, .55);
    cursor: pointer;
    display: grid;
    gap: 8px;
    justify-items: center;
    margin: 0;
    min-width: 0;
    padding: 12px;
    position: relative;
    text-align: center;
}

.interface-region span {
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(17, 24, 39, .16);
    border-radius: 6px;
    color: #111827;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1.12;
    padding: 5px 7px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .58);
}

.interface-region input[type="color"] {
    border: 1px solid rgba(17, 24, 39, .32);
    border-radius: 6px;
    cursor: pointer;
    height: 32px;
    padding: 2px;
    width: 58px;
}

.interface-region--navbar {
    background: var(--preview-page);
    grid-column: 3;
    grid-row: 2;
}

.interface-region--page {
    background: var(--preview-navbar);
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: max-content 58px;
    justify-content: center;
    padding: 8px;
    pointer-events: none;
    z-index: 2;
}

.interface-region--page span,
.interface-region--page input {
    pointer-events: auto;
}

.interface-region--left {
    background: var(--preview-left);
    grid-column: 1;
    grid-row: 2;
}

.interface-region--right {
    background: var(--preview-right);
    grid-column: 2;
    grid-row: 2;
}

.interface-region--navbar,
.interface-region--left,
.interface-region--right {
    z-index: 1;
}

.interface-region--card-header {
    background: var(--preview-header);
    grid-template-columns: max-content 58px;
    justify-content: center;
    padding: 8px;
}

.interface-region--card-body {
    background: var(--preview-card-body);
    cursor: default;
}

.interface-region--card-body small {
    background: rgba(17, 24, 39, .08);
    border-radius: 999px;
    color: #334155;
    font-size: .72rem;
    font-weight: 800;
    padding: 4px 8px;
}

.interface-save-swatch {
    margin: 12px 0;
}

.workbench-dimmer-control {
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--card-header-bg, #334155) 38%, #cbd5e1);
    border-radius: 6px;
    color: #18181b;
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
}

.workbench-dimmer-control__heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.workbench-dimmer-control__heading label,
.workbench-dimmer-control__heading output {
    font-size: .82rem;
    font-weight: 850;
}

.workbench-dimmer-control input[type="range"] {
    accent-color: var(--card-header-bg, #334155);
    cursor: pointer;
    margin: 0;
    width: 100%;
}

.workbench-dimmer-preview {
    display: grid;
    gap: 6px;
    grid-template-columns: 1.2fr 1fr 1fr;
    height: 34px;
}

.workbench-dimmer-preview span {
    --preview-status-colour: var(--preview-status-1, #16a34a);
    background: color-mix(in srgb, var(--preview-status-colour) var(--preview-dimmer, 100%), #e7ebef);
    border: 1px solid color-mix(in srgb, var(--preview-status-colour) 70%, #64748b);
    border-radius: 3px;
}

.workbench-dimmer-preview span:nth-child(2) {
    --preview-status-colour: var(--preview-status-2, #ca8a04);
}

.workbench-dimmer-preview span:nth-child(3) {
    --preview-status-colour: var(--preview-status-3, #2563eb);
}

.interface-swatch-list {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.interface-swatch {
    background:
        linear-gradient(var(--sw5, var(--sw2)), var(--sw5, var(--sw2))) 0 0 / 100% 36% no-repeat,
        linear-gradient(var(--sw6, var(--sw3)), var(--sw6, var(--sw3))) 0 100% / 50% 64% no-repeat,
        linear-gradient(var(--sw4), var(--sw4)) 100% 100% / 50% 64% no-repeat;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 5px;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .28);
    cursor: pointer;
    height: 58px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 92px;
}

.interface-swatch:hover,
.interface-swatch:focus {
    box-shadow: 0 0 0 2px var(--primary, #18181b), 3px 3px 4px rgba(0, 0, 0, .28);
}

.interface-swatch span {
    background: linear-gradient(var(--sw1), var(--sw2));
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    left: 0;
    padding: 4px 6px;
    position: absolute;
    right: 0;
    text-align: left;
    top: 0;
}

.interface-swatch-delete-list {
    align-items: flex-start;
    border-top: 1px solid color-mix(in srgb, var(--primary, #18181b) 12%, var(--border, #e4e4e7));
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 12px;
    padding-top: 12px;
}

.interface-swatch-delete-row {
    align-items: flex-start;
    background: transparent;
    border: 0;
    display: inline-flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 6px;
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 0;
    width: auto;
}

.interface-swatch--mini {
    height: 44px;
    flex: 0 0 92px;
    width: 92px;
}

.interface-swatch-delete-row .button-danger {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 10px;
    width: 92px;
}

.icon-logo-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.icon-logo-notice {
    background: color-mix(in srgb, var(--primary, #18181b) 8%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 18%, var(--border, #e4e4e7));
    border-radius: 8px;
    color: var(--muted-text, #71717a);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.35;
    padding: 9px 12px;
}

.customisation-resource-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customisation-form .repair-resource-settings {
    grid-column: 1 / -1;
}

.customisation-form .icon-logo-settings {
    grid-column: 1 / -1;
}

.customisation-form .icon-logo-settings .form-section__head {
    align-items: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #ffffff);
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    margin: -16px -16px 0;
    padding: 10px 14px;
}

.customisation-form .icon-logo-settings .form-section__head h2 {
    color: inherit;
    margin: 0;
}

.customisation-form .icon-logo-settings .form-section__head .eyebrow {
    color: currentColor;
    margin: 0 0 2px;
    opacity: .74;
}

.customisation-form .icon-logo-settings .icon-logo-notice {
    grid-column: 1 / -1;
}

.customisation-form .icon-logo-settings .icon-logo-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.customisation-form .icon-logo-settings .icon-logo-paired-grid {
    display: grid;
    gap: 12px;
    grid-column: 1 / -1;
}

.icon-logo-paired-row {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
}

.icon-logo-paired-row + .icon-logo-paired-row {
    border-top: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 70%, var(--card-header-bg, #334155));
    padding-top: 14px;
}

.customisation-resource-grid .customisation-placeholder-card {
    grid-column: span 2;
}

.customisation-form .page-skin-settings {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    overflow: hidden;
    padding: 16px;
}

.customisation-form .page-skin-settings .form-section__head {
    align-items: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #ffffff);
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    margin: -16px -16px 0;
    padding: 10px 14px;
}

.customisation-form .page-skin-settings .form-section__head h2 {
    color: inherit;
    margin: 0;
}

.customisation-form .page-skin-settings .form-section__head .eyebrow {
    color: currentColor;
    margin: 0 0 2px;
    opacity: .74;
}

.customisation-form .repair-resource-settings,
.customisation-form .icon-logo-settings,
.customisation-resource-grid .customisation-placeholder-card {
    align-content: start;
    display: grid;
    grid-template-columns: 1fr;
}

.customisation-form .repair-resource-settings-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.customisation-form .repair-resource-settings-row .field-wide {
    grid-column: 1 / -1;
}

.customisation-form .repair-resource-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.customisation-form .icon-logo-row {
    align-items: start;
    grid-template-columns: 56px minmax(0, 1fr);
}

.customisation-form .icon-logo-paired-row .icon-logo-row {
    align-content: start;
    align-items: start;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 10px 12px;
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 10px;
}

.customisation-form .icon-logo-paired-row .icon-logo-preview {
    grid-row: span 2;
}

.customisation-form .icon-logo-paired-row .icon-logo-row .field:last-child {
    grid-column: 2;
}

.customisation-form .icon-logo-paired-row .icon-logo-row input[type="file"] {
    width: 100%;
}

.customisation-form .icon-logo-paired-row .icon-logo-row .icon-logo-row-save {
    grid-column: 2;
    margin-top: 2px;
}

.customisation-form .icon-logo-paired-row .icon-logo-row .icon-logo-row-save .button {
    min-width: 84px;
}

.customisation-form .icon-logo-grid .icon-logo-row {
    align-content: start;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
    padding: 10px;
}

.customisation-form .icon-logo-grid .icon-logo-preview {
    justify-self: center;
}

.customisation-form .icon-logo-grid .field:last-child {
    grid-column: auto;
}

.customisation-form .icon-logo-preview {
    width: 56px;
}

.icon-logo-library-panel {
    background: #ffffff;
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    min-width: 0;
    padding: 10px;
}

.icon-logo-library-panel h3 {
    font-size: .88rem;
    margin: 0 0 8px;
}

.icon-default-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.icon-default-controls .button-small,
.icon-default-controls .button-secondary {
    min-height: 32px;
    padding: 6px 10px;
}

.icon-logo-library-panel .brand-logo-library {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.branding-icon-library-grid {
    border-top: 1px solid var(--border, #e4e4e7);
    display: grid;
    gap: 12px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
    padding-top: 14px;
}

.branding-icon-library-grid h3 {
    font-size: .9rem;
    margin: 0 0 8px;
}

.customisation-placeholder-card__body {
    padding: 14px;
}

.page-skin-paired-row {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-column: 1 / -1;
    grid-template-columns: 300px minmax(0, 1fr);
}

.page-skin-upload-card {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 10px;
}

.page-skin-pill-button,
.page-skin-delete-button {
    border-radius: 6px;
    font-weight: 850;
    min-height: 34px;
    padding-left: 14px;
    padding-right: 14px;
}

.page-skin-library {
    border-top: 1px solid var(--border, #e4e4e7);
    display: grid;
    gap: 8px;
    padding-top: 10px;
}

.page-skin-library h3 {
    font-size: .86rem;
    margin: 0;
}

.page-skin-library-row {
    align-items: center;
    background: color-mix(in srgb, var(--surface, #ffffff) 82%, var(--interface-boxed-page-bg, #e5e7eb));
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 6px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
    padding: 6px;
}

.page-skin-library-row > span:not(.page-skin-library-thumb) {
    flex: 1 1 auto;
    font-size: .82rem;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-skin-library-row .page-skin-library-badge {
    background: #012169;
    border: 1px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    flex: 0 0 auto;
    font-size: .68rem;
    line-height: 1;
    padding: 5px 7px;
}

.page-skin-library-thumb {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 5px;
    display: block;
    flex: 0 0 64px;
    height: 38px;
    overflow: hidden;
    width: 64px;
}

.page-skin-library-thumb img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.page-background-assignment-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.page-skin-assignment-card {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 10px;
}

.page-skin-assignment-head {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 8px;
    min-height: 28px;
}

.customisation-form .page-skin-assignment-head label {
    margin: 0;
}

.page-skin-card-save {
    appearance: none;
    align-items: center;
    background: var(--card-header-bg, var(--primary, #18181b));
    border: 1px solid var(--card-header-bg, var(--primary, #18181b));
    border-radius: 4px;
    color: var(--card-header-text, #ffffff);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    padding: 0;
    width: 28px;
}

.page-skin-card-save:hover,
.page-skin-card-save:focus-visible {
    background: var(--primary-hover, #27272a);
    border-color: var(--primary-hover, #27272a);
}

.page-skin-card-save:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary, #18181b) 40%, #ffffff);
    outline-offset: 2px;
}

.page-skin-card-save svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 15px;
}

.page-skin-assignment-preview {
    align-items: center;
    background: color-mix(in srgb, var(--surface-soft, #fafafa) 82%, var(--border, #e4e4e7));
    border: 1px dashed color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--primary, #18181b));
    border-radius: 7px;
    display: grid;
    justify-items: center;
    margin: 0;
    min-height: 96px;
    overflow: hidden;
}

.page-skin-assignment-preview img {
    aspect-ratio: 16 / 10;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.page-skin-assignment-preview figcaption,
.page-skin-assignment-preview span {
    color: var(--muted-text, #71717a);
    font-size: .72rem;
    font-weight: 800;
    padding: 6px;
    text-align: center;
}

.page-skin-assignment-preview figcaption {
    background: color-mix(in srgb, var(--surface, #ffffff) 86%, transparent);
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-skin-assignment-preview:has(img) {
    align-items: stretch;
    border-style: solid;
    display: block;
    position: relative;
}

.brand-logo-settings {
    border-top: 1px solid var(--border, #e4e4e7);
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
}

.brand-logo-settings__head h3 {
    margin: 0;
}

.brand-logo-settings__head .field-hint {
    margin-top: 6px;
}

.brand-logo-settings__body {
    display: grid;
    gap: 12px;
}

.brand-logo-upload-card {
    grid-template-columns: 64px minmax(0, 1fr);
}

.brand-logo-upload-card .field:last-child {
    grid-column: 1 / -1;
}

.brand-logo-library {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}

.brand-logo-library figure {
    align-items: center;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    justify-items: center;
    margin: 0;
    padding: 8px;
}

.brand-logo-library span {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: flex;
    height: 48px;
    justify-content: center;
    overflow: hidden;
    width: 48px;
}

.brand-logo-library img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.brand-logo-library figcaption {
    color: var(--muted-text, #71717a);
    font-size: .72rem;
    font-weight: 800;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.brand-logo-library .button-small {
    min-height: 0;
    padding: 4px 8px;
}

.icon-library-actions {
    display: flex;
    gap: 5px;
}

.icon-square-button {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-size: .9rem;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    line-height: 1;
    min-height: 28px;
    padding: 0;
    width: 28px;
}

.device-type-icon-library span,
.icon-logo-preview--device-type {
    aspect-ratio: 1;
    height: 56px;
    width: 56px;
}

.customer-asset-icon-library span,
.icon-logo-preview--customer-asset {
    aspect-ratio: 1;
    height: 56px;
    width: 56px;
}

.navigation-icon-library span,
.icon-logo-preview--navigation {
    aspect-ratio: 1;
    height: 56px;
    width: 56px;
}

.icon-logo-row {
    align-items: center;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: 86px minmax(0, 1fr) minmax(220px, .8fr);
    padding: 12px;
}

.icon-logo-preview {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: color-mix(in srgb, var(--primary, #18181b) 10%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 24%, var(--border, #e4e4e7));
    border-radius: 8px;
    color: var(--primary, #18181b);
    display: flex;
    font-weight: 900;
    justify-content: center;
    overflow: hidden;
    width: 72px;
}

.icon-logo-preview img {
    height: 100%;
    object-fit: contain;
    padding: 6px;
    width: 100%;
}

.status-colour-list {
    display: grid;
    gap: 12px;
}

.status-colour-row {
    align-items: center;
    border-bottom: 1px solid var(--border, #e4e4e7);
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(260px, 1fr) 360px;
    padding-bottom: 12px;
}

.status-colour-row label {
    margin: 0;
}

.status-colour-control {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 64px minmax(0, 1fr);
    justify-items: start;
}

.status-colour-control input[type="color"] {
    height: 38px;
    padding: 2px;
    width: 58px;
}

.status-colour-control .badge {
    justify-self: start;
}

.dashboard-field-options {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-group-list {
    display: grid;
    gap: 10px;
}

.section-inline-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-inline-head h3 {
    margin: 0;
}

.dashboard-new-status {
    align-items: stretch;
    background: var(--surface-soft, #fafafa);
    border: 1px dashed var(--border, #d4d4d8);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 12px;
    padding: 12px;
}

.dashboard-new-status .field-hint {
    grid-column: 1 / -1;
    margin: 0;
}

.dashboard-group-row {
    align-items: stretch;
    background: color-mix(in srgb, var(--status-colour, #64748b) 10%, var(--surface-soft, #fafafa));
    border: 1px solid color-mix(in srgb, var(--status-colour, #64748b) 28%, var(--border, #d4d4d8));
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 12px;
}

.dashboard-group-row__top {
    align-items: center;
    background: color-mix(in srgb, var(--status-colour, #64748b) 16%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--status-colour, #64748b) 24%, transparent);
    border-radius: 7px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 120px;
    padding: 8px;
}

.dashboard-group-status {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
}

.dashboard-group-fields {
    border-top: 1px solid var(--border, #d4d4d8);
    padding-top: 10px;
}

.customisation-form {
    gap: 16px;
}

.customisation-form .section-head {
    align-items: center;
}

.customisation-sticky-head {
    background: var(--interface-boxed-page-bg, var(--page-bg, #f4f4f5));
    backdrop-filter: none;
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
    display: grid;
    gap: 8px;
    margin: -8px 0 2px;
    padding: 8px;
    position: sticky;
    top: var(--topbar-sticky-offset, 64px);
    z-index: 300;
}

.customisation-save-head {
    justify-content: space-between;
}

.customisation-form .page-title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.customisation-form .lead {
    margin: 8px 0 0;
}

.customisation-form .form-section {
    gap: 16px;
    grid-template-columns: 150px minmax(0, 1fr);
    padding: 16px;
}

.customisation-top-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

.customisation-form :is(
    #booking-choices,
    #icons,
    #page-skins,
    #jobcards,
    #status-display-options,
    #repair-sources-links,
    #workbench-activity
) {
    scroll-margin-top: 180px;
}

.customisation-top-grid .form-section {
    grid-template-columns: 190px minmax(0, 1fr);
    min-width: 0;
}

.customisation-form .interface-swatches-card,
.customisation-form .navigation-mode-card,
.customisation-form .icon-logo-settings,
.customisation-form .page-skin-settings,
.customisation-form .dashboard-jobcard-settings,
.customisation-form .repair-resource-settings {
    grid-template-columns: 1fr;
    overflow: hidden;
    padding: 16px;
}

.customisation-form .interface-swatches-card > .form-section__head,
.customisation-form .navigation-mode-card > .form-section__head,
.customisation-form .page-skin-settings > .form-section__head,
.customisation-form .dashboard-jobcard-settings > .form-section__head,
.customisation-form .repair-resource-settings > .form-section__head,
.customisation-form .repair-warning-settings > .form-section__head {
    align-items: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #ffffff);
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    margin: -16px -16px 0;
    padding: 10px 14px;
}

.customisation-form .interface-swatches-card > .form-section__head h2,
.customisation-form .navigation-mode-card > .form-section__head h2,
.customisation-form .page-skin-settings > .form-section__head h2,
.customisation-form .dashboard-jobcard-settings > .form-section__head h2,
.customisation-form .repair-resource-settings > .form-section__head h2,
.customisation-form .repair-warning-settings > .form-section__head h2 {
    color: inherit;
    margin: 0;
}

.customisation-form .interface-swatches-card > .form-section__head .eyebrow,
.customisation-form .navigation-mode-card > .form-section__head .eyebrow,
.customisation-form .page-skin-settings > .form-section__head .eyebrow,
.customisation-form .dashboard-jobcard-settings > .form-section__head .eyebrow,
.customisation-form .repair-resource-settings > .form-section__head .eyebrow,
.customisation-form .repair-warning-settings > .form-section__head .eyebrow {
    color: currentColor;
    margin: 0 0 2px;
    opacity: .74;
}

.customisation-head-actions {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.customisation-form .interface-swatches-card > :not(.form-section__head),
.customisation-form .navigation-mode-card > :not(.form-section__head),
.customisation-form .page-skin-settings > :not(.form-section__head),
.customisation-form .dashboard-jobcard-settings > :not(.form-section__head),
.customisation-form .repair-resource-settings > :not(.form-section__head),
.customisation-form .repair-warning-settings > :not(.form-section__head) {
    grid-column: 1 / -1;
}

.customisation-top-grid .form-section:nth-child(3) {
    grid-column: auto;
}

.customisation-top-grid .theme-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.customisation-top-grid .field-grid {
    grid-template-columns: 1fr;
}

.navigation-mode-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.navigation-mode-option {
    align-items: center;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 58px;
    padding: 10px 12px;
}

.navigation-mode-option:has(input:checked) {
    border-color: var(--primary, #18181b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #18181b) 12%, transparent);
}

.navigation-mode-option input {
    margin: 0;
}

.navigation-mode-option span {
    display: grid;
    gap: 2px;
}

.navigation-mode-option small {
    color: var(--muted-text, #71717a);
    font-size: .78rem;
    line-height: 1.25;
}

.customisation-top-grid textarea {
    min-height: 92px;
}

.customisation-device-intake-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customisation-choice-settings {
    align-items: start;
    gap: 0;
    grid-template-columns: 1fr;
    overflow: hidden;
    padding: 0;
}

.customisation-form .customisation-choice-settings {
    grid-template-columns: 1fr;
    padding: 0;
}

.customisation-choice-settings .form-section__head {
    align-items: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #ffffff);
    display: flex;
    gap: 12px;
    grid-column: 1 / -1;
    justify-content: space-between;
    margin: 0;
    padding: 10px 14px;
    width: 100%;
}

.customisation-choice-settings .form-section__head h2 {
    color: inherit;
    margin: 0;
}

.customisation-choice-grid {
    display: grid;
    gap: 14px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 16px;
    width: 100%;
}

.customisation-intake-status-row {
    border-bottom: 1px solid var(--border, #cbd5e1);
    grid-column: 1 / -1;
    padding-bottom: 12px;
}

.customisation-intake-status-row .field-label {
    margin-bottom: 8px;
}

.customisation-choice-grid textarea {
    min-height: 210px;
}

.customisation-choice-grid label,
.customisation-choice-grid .field-label {
    color: var(--text, #18181b);
    display: block;
    font-size: .84rem;
    font-weight: 900;
    margin: 0 0 6px;
}

.customisation-choice-grid .booking-choice-label {
    background: color-mix(in srgb, var(--card-header-bg, #334155) 10%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--card-header-bg, #334155) 22%, #ffffff);
    border-left: 4px solid var(--card-header-bg, #334155);
    border-radius: 6px;
    color: color-mix(in srgb, var(--card-header-bg, #334155) 72%, var(--text, #18181b));
    letter-spacing: .04em;
    margin-bottom: 8px;
    padding: 6px 8px;
    text-transform: uppercase;
}

.customisation-checkbox-stack {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.customisation-choice-grid .customisation-checkbox-stack .checkbox-row {
    align-items: center;
    background: var(--surface-soft, #f8fafc);
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 0;
    min-height: 34px;
    padding: 6px 10px;
    white-space: nowrap;
}

.customisation-choice-grid .customisation-checkbox-stack .checkbox-row input[type="checkbox"] {
    flex: 0 0 auto;
}

.customisation-form .form-section__head h2 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.customisation-form .form-section__head .eyebrow {
    margin-bottom: 4px;
}

.customisation-form .field-grid {
    gap: 12px;
}

.customisation-form label {
    font-size: .84rem;
    margin-bottom: 5px;
}

.customisation-form input,
.customisation-form select,
.customisation-form textarea {
    min-height: 36px;
    padding: 8px 10px;
}

.customisation-form textarea {
    min-height: 140px;
}

.customisation-form .field-hint {
    font-size: .78rem;
    margin-top: 4px;
}

.customisation-form .theme-grid {
    gap: 10px;
    grid-template-columns: repeat(auto-fill, 76px);
    justify-content: start;
}

.customisation-form .theme-option {
    align-items: start;
    background:
        linear-gradient(var(--sw5, var(--sw2)), var(--sw5, var(--sw2))) 0 0 / 100% 36% no-repeat,
        linear-gradient(var(--sw6, var(--sw3)), var(--sw6, var(--sw3))) 0 100% / 50% 64% no-repeat,
        linear-gradient(var(--sw4), var(--sw4)) 100% 100% / 50% 64% no-repeat;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 6px;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .18);
    font-size: .7rem;
    font-weight: 900;
    justify-content: start;
    height: 76px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 76px;
}

.customisation-form .theme-option::before {
    display: none;
}

.customisation-form .theme-option span {
    background: linear-gradient(var(--sw1), var(--sw2));
    color: #fff;
    display: block;
    line-height: 1.05;
    min-height: 21px;
    padding: 4px 6px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
    width: 100%;
}

.customisation-form .theme-option:has(input:checked) {
    box-shadow: 0 0 0 2px var(--card-header-bg, var(--primary, #18181b)), 3px 3px 4px rgba(0, 0, 0, .18);
}

.customisation-form .theme-option:hover,
.customisation-form .theme-option:focus-within {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 55%, transparent), 3px 3px 4px rgba(0, 0, 0, .18);
}

.customisation-form .theme-option--saved {
    border-style: dashed;
}

.customisation-form .theme-option--saved span {
    background: linear-gradient(var(--sw5), var(--sw1));
}

.interface-save-swatch {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, max-content) minmax(180px, 260px) max-content;
    margin: 12px 0;
}

.interface-save-swatch__name {
    margin: 0;
}

.interface-save-swatch__button {
    min-height: 38px;
}

.customisation-form .section-inline-head {
    margin-bottom: 8px;
}

.customisation-form .dashboard-new-status {
    gap: 10px;
    margin-bottom: 10px;
    max-width: 320px;
    padding: 10px;
}

.dashboard-status-groups-panel {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    padding: 12px;
}

.dashboard-status-groups-panel .field-hint {
    margin: 10px 0 0;
}

.customisation-form .dashboard-group-list {
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.customisation-form .dashboard-group-row {
    background: color-mix(in srgb, var(--status-colour, #64748b) 10%, #ffffff);
    border-color: color-mix(in srgb, var(--status-colour, #64748b) 28%, #d4d4d8);
    gap: 9px;
    padding: 10px;
}

.customisation-form .dashboard-group-row__top {
    align-items: end;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) 58px 42px;
}

.customisation-form .dashboard-group-row__top label {
    font-size: .72rem;
}

.customisation-form .dashboard-group-row__top input[type="number"] {
    min-height: 30px;
    padding: 5px 6px;
}

.customisation-form .dashboard-group-row__top input[type="color"] {
    height: 30px;
    min-height: 30px;
    padding: 2px;
    width: 42px;
}

.customisation-form .dashboard-group-row__top > div {
    min-width: 0;
}

.dashboard-group-actions {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) 28px 28px;
}

.dashboard-group-actions .dashboard-display-edit-button {
    min-width: 0;
    width: 100%;
}

.dashboard-group-actions .icon-square-button:disabled {
    opacity: .35;
    pointer-events: none;
}

.dashboard-group-card-action svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 15px;
}

.dashboard-group-current-label {
    min-width: 0;
}

.dashboard-group-current-label .badge {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.customisation-form .dashboard-group-current-label .badge {
    background: var(--status-colour, #64748b);
    border: 1px solid color-mix(in srgb, var(--status-colour, #64748b) 82%, #000000);
    color: #ffffff;
}

.customisation-form .dashboard-group-status {
    gap: 8px;
    grid-template-columns: 1fr;
}

.dashboard-display-edit-button {
    justify-self: start;
}

.customisation-form .dashboard-field-options {
    gap: 5px 10px;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
}

.customisation-form .dashboard-field-section {
    border: 1px solid color-mix(in srgb, var(--border, #d4d4d8) 76%, transparent);
    border-radius: 7px;
    overflow: hidden;
    padding: 0;
}

.customisation-form .dashboard-field-section__head,
.customisation-form .dashboard-field-section summary {
    align-items: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--status-colour, #64748b) 88%, #ffffff));
    color: var(--card-header-text, #ffffff);
    display: flex;
    font-weight: 800;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    height: var(--panel-header-height);
    min-height: 0;
    padding: var(--panel-header-padding);
}

.customisation-form .dashboard-field-section summary {
    cursor: pointer;
}

.customisation-form .dashboard-field-section__head {
    cursor: default;
}

.dashboard-field-section__actions {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.dashboard-shared-field-panel {
    align-self: start;
    height: fit-content;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    display: grid;
    margin-top: 12px;
    overflow: hidden;
}

.dashboard-shared-field-panel__body {
    align-self: start;
    align-content: start;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    width: 50%;
}

.customisation-form .dashboard-shared-field-panel__body .dashboard-field-section {
    align-self: start;
    height: fit-content;
    background: color-mix(in srgb, var(--status-colour, #64748b) 10%, #ffffff);
    border-color: color-mix(in srgb, var(--status-colour, #64748b) 38%, #d4d4d8);
    border-radius: 0;
}

.customisation-form .dashboard-shared-field-panel__body .dashboard-field-section:first-child {
    border-radius: 7px 7px 0 0;
}

.customisation-form .dashboard-shared-field-panel__body .dashboard-field-section + .dashboard-field-section {
    border-top: 0;
}

.customisation-form .dashboard-shared-field-panel__body .dashboard-field-section:last-child {
    border-radius: 0 0 7px 7px;
}

.customisation-form .dashboard-shared-field-panel__body .dashboard-field-section__head {
    background: var(--status-colour, var(--card-header-bg, #64748b));
    color: var(--status-text-colour, #ffffff);
}

.customisation-form .dashboard-shared-field-panel__body input[type="checkbox"] {
    accent-color: var(--status-colour, var(--primary, #18181b));
}

.dashboard-shared-field-panel__body[hidden] {
    display: none;
}

.dashboard-shared-field-panel__layout {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(180px, .7fr) minmax(0, 2fr);
    padding: 12px;
}

.dashboard-shared-field-panel h4 {
    font-size: .9rem;
    margin: 0 0 8px;
}

.dashboard-status-target-options {
    display: grid;
    gap: 6px;
}

.dashboard-display-status-tabs {
    align-content: start;
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 7px;
    display: grid;
    gap: 8px;
    padding: 8px;
}

.dashboard-display-edit-button.is-active {
    background: var(--card-header-bg, var(--primary, #18181b));
    border-color: var(--card-header-bg, var(--primary, #18181b));
    color: var(--card-header-text, #fff);
}

.customisation-form .dashboard-display-status-tabs .button-secondary,
body[class*="theme-"] .customisation-form .dashboard-display-status-tabs .button-secondary {
    background: var(--status-tab-colour, #64748b);
    border-color: color-mix(in srgb, var(--status-tab-colour, #64748b) 75%, var(--status-tab-text, #ffffff));
    color: var(--status-tab-text, #ffffff);
}

.customisation-form .dashboard-display-status-tabs .button-secondary:hover,
.customisation-form .dashboard-display-status-tabs .button-secondary:focus-visible,
body[class*="theme-"] .customisation-form .dashboard-display-status-tabs .button-secondary:hover,
body[class*="theme-"] .customisation-form .dashboard-display-status-tabs .button-secondary:focus-visible {
    background: var(--status-tab-colour, #64748b);
    border-color: var(--status-tab-text, #ffffff);
    color: var(--status-tab-text, #ffffff);
}

.customisation-form .dashboard-display-status-tabs .button-secondary.is-active,
.customisation-form .dashboard-display-status-tabs .button-secondary.is-active:hover,
.customisation-form .dashboard-display-status-tabs .button-secondary.is-active:focus-visible,
body[class*="theme-"] .customisation-form .dashboard-display-status-tabs .button-secondary.is-active,
body[class*="theme-"] .customisation-form .dashboard-display-status-tabs .button-secondary.is-active:hover,
body[class*="theme-"] .customisation-form .dashboard-display-status-tabs .button-secondary.is-active:focus-visible {
    background: var(--status-tab-colour, #64748b);
    border-color: var(--status-tab-text, #ffffff);
    box-shadow: inset 5px 0 0 var(--status-tab-text, #ffffff), 0 0 0 2px var(--surface, #ffffff), 0 0 0 4px var(--status-tab-text, #ffffff);
    color: var(--status-tab-text, #ffffff);
}

.dashboard-display-status-tabs .button-secondary.is-active::before {
    content: "\2713";
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    margin-right: 7px;
}

.customisation-form .dashboard-field-section summary::-webkit-details-marker {
    display: none;
}

.customisation-form .dashboard-field-section summary::after {
    content: "+";
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.customisation-form .dashboard-field-section[open] summary::after {
    content: "-";
}

.customisation-form .dashboard-field-section .dashboard-field-options {
    padding: 8px;
}

.customisation-form .checkbox-row {
    align-items: center;
    font-size: .82rem;
    gap: 6px;
    margin-bottom: 0;
    min-width: 0;
    white-space: nowrap;
}

.customisation-form .checkbox-row input[type="checkbox"] {
    flex: 0 0 auto;
}

.customisation-form .dashboard-shared-field-panel .checkbox-row {
    align-items: center;
    display: flex;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
}

.customisation-form .dashboard-shared-field-panel .checkbox-row input[type="checkbox"] {
    height: 14px;
    min-height: 14px;
    width: 14px;
    margin: 0;
    padding: 0;
}

.customisation-form .dashboard-shared-field-panel .checkbox-row > span {
    min-width: 0;
}

.customisation-form .status-colour-control {
    gap: 8px;
    grid-template-columns: 48px;
}

.customisation-form .status-colour-control input[type="color"] {
    height: 34px;
    width: 44px;
}

.customisation-form .status-colour-control .badge {
    font-size: .72rem;
    max-width: 100%;
}

.customisation-form .submit-bar {
    padding: 12px 14px;
}

.icon-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.icon-grid--brand {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.icon-grid--compact {
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.jobsheet-visible-panel .icon-grid--compact {
    gap: 5px 7px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.icon-tile {
    align-items: center;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 8px;
    justify-items: center;
    margin: 0;
    min-height: 118px;
    padding: 12px;
    text-align: center;
    transform: translateZ(0);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    will-change: transform;
}

.icon-tile:hover {
    background: color-mix(in srgb, var(--primary, #18181b) 7%, var(--surface, #ffffff));
    border-color: color-mix(in srgb, var(--primary, #18181b) 34%, var(--border, #d4d4d8));
    box-shadow: 0 10px 18px rgba(15, 23, 42, .16), 0 2px 0 rgba(255, 255, 255, .72) inset;
    transform: perspective(700px) translateY(-3px) rotateX(4deg);
}

.service-split-panel .checkbox-pill {
    transform: translateZ(0);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    will-change: transform;
}

.service-split-panel .checkbox-pill:hover {
    background: color-mix(in srgb, var(--primary, #18181b) 7%, var(--surface, #ffffff));
    border-color: color-mix(in srgb, var(--primary, #18181b) 34%, var(--border, #d4d4d8));
    box-shadow: 0 10px 18px rgba(15, 23, 42, .14), 0 2px 0 rgba(255, 255, 255, .72) inset;
    transform: perspective(700px) translateY(-3px) rotateX(4deg);
}

.icon-grid--compact .icon-tile {
    gap: 5px;
    min-height: 86px;
    padding: 8px;
}

.jobsheet-visible-panel .icon-grid--compact .icon-tile {
    align-items: center;
    display: grid;
    gap: 5px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    min-height: 74px;
    padding: 7px 8px;
    text-align: center;
}

.icon-grid--compact .icon-square {
    width: 46px;
}

.jobsheet-visible-panel .icon-grid--compact .icon-square {
    width: 38px;
}

.icon-grid--compact .icon-tile > span:last-child {
    font-size: .78rem;
    font-weight: 850;
}

.jobsheet-visible-panel .icon-grid--compact .icon-tile > span:last-child {
    font-size: .68rem;
    line-height: 1.08;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.icon-tile input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.icon-square {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--primary, #18181b);
    display: flex;
    font-weight: 900;
    justify-content: center;
    width: 64px;
}

.icon-tile:has(input:checked) {
    border-color: var(--primary, #18181b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #18181b) 18%, transparent);
}

.icon-tile:has(input:checked):hover {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #18181b) 18%, transparent), 0 12px 20px rgba(15, 23, 42, .18);
}

.asset-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.device-icon {
    display: block;
    height: 64px;
    width: 64px;
}

.device-icon--image {
    border-radius: 8px;
    object-fit: contain;
    padding: 7px;
}

.device-icon__bg {
    fill: var(--surface, #fff);
    stroke: var(--border, #d4d4d8);
    stroke-width: 3;
}

.device-icon--asset .device-icon__bg {
    fill: none;
    stroke: none;
}

.icon-tile:has(input:checked) .device-icon__bg {
    fill: color-mix(in srgb, var(--primary, #18181b) 12%, white);
    stroke: var(--primary, #18181b);
}

.brand-logo {
    dominant-baseline: middle;
    fill: var(--primary, #18181b);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
}

.brand-logo--acer {
    font-size: 17px;
    font-style: italic;
    font-weight: 800;
}

.brand-logo--asus {
    font-size: 15px;
}

.brand-logo--dell {
    font-size: 13px;
    letter-spacing: .04em;
}

.brand-logo--lenovo {
    fill: #fff;
    font-size: 11px;
}

.brand-logo--pcs {
    font-size: 12px;
}

.brand-logo--hp {
    font-size: 17px;
    font-style: italic;
}

.brand-logo--msi {
    font-size: 12px;
}

.brand-logo--samsung {
    fill: #fff;
    font-size: 7px;
}

.brand-logo--toshiba {
    font-size: 9px;
}

.brand-logo--fallback {
    font-size: 9px;
}

.brand-mark {
    fill: var(--primary, #18181b);
}

.brand-control {
    fill: var(--surface, #fff);
    stroke: var(--primary, #18181b);
    stroke-width: 3;
}

.brand-cut {
    fill: var(--surface, #fff);
}

.brand-line,
.brand-stroke {
    fill: none;
    stroke: var(--primary, #18181b);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.brand-line--fine {
    stroke-width: 2;
}

.brand-stroke--soft {
    fill: color-mix(in srgb, var(--primary, #18181b) 8%, white);
}

.asset-line {
    fill: none;
    stroke: var(--primary, #18181b);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.device-icon--brand-acer .brand-logo {
    fill: #78a22f;
}

.device-icon--brand-asus .brand-logo,
.device-icon--brand-dell .brand-logo,
.device-icon--brand-hp .brand-logo {
    fill: #0866b2;
}

.device-icon--brand-asus .brand-line,
.device-icon--brand-dell .brand-stroke,
.device-icon--brand-hp .brand-stroke {
    stroke: #0866b2;
}

.device-icon--brand-lenovo .brand-mark {
    fill: #e2231a;
}

.device-icon--brand-msi .brand-logo {
    fill: #fff;
}

.device-icon--brand-msi .brand-stroke {
    fill: #c91f2c;
    stroke: #c91f2c;
}

.device-icon--brand-samsung .brand-mark {
    fill: #1428a0;
}

.device-icon--brand-toshiba .brand-logo,
.device-icon--brand-toshiba .brand-line {
    fill: #e60012;
    stroke: #e60012;
}

.asset-fill {
    fill: color-mix(in srgb, var(--primary, #18181b) 16%, white);
    stroke: var(--primary, #18181b);
    stroke-linejoin: round;
    stroke-width: 4;
}

.asset-fill--dark {
    fill: #343a40;
    stroke: #111827;
}

.asset-fill--blue {
    fill: #647da0;
    stroke: #243b53;
}

.asset-fill--silver {
    fill: #d8dde3;
    stroke: #6b7280;
}

.asset-fill--paper {
    fill: #f8fafc;
    stroke: #94a3b8;
}

.asset-fill--case {
    fill: #1f2937;
    stroke: #111827;
}

.asset-fill--disc {
    fill: #e7c84b;
    stroke: #9a7d13;
}

.asset-highlight {
    fill: none;
    stroke: rgba(255, 255, 255, .72);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.asset-cable {
    fill: none;
    stroke: #20242a;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.asset-cable--heavy {
    stroke-width: 6;
}

.asset-line--thin {
    stroke-width: 3;
}

.asset-hole {
    fill: var(--surface, #fff);
    stroke: var(--primary, #18181b);
    stroke-width: 3;
}

.asset-chip {
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 700;
    padding: 4px 7px;
}

.asset-chip--icon {
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 5px;
}

.asset-chip__icon {
    align-items: center;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.asset-chip__icon .device-icon {
    height: 24px;
    width: 24px;
}

.asset-chip__icon .device-icon--image {
    padding: 2px;
}

.radio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.radio-pill {
    align-items: center;
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
}

.radio-pill input {
    width: auto;
}

.radio-pill:has(input:checked) {
    background: var(--primary, #18181b);
    border-color: var(--primary, #18181b);
    color: #fff;
}

.technician-profile-card {
    align-items: center;
    display: flex;
    gap: 18px;
}

.technician-photo {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    display: flex;
    flex: 0 0 112px;
    font-size: 2rem;
    font-weight: 900;
    justify-content: center;
    overflow: hidden;
    width: 112px;
}

.technician-photo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.staff-profile-detail-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-profile-show-head {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    padding: 16px;
}

.staff-profile-show-head__photo {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    color: var(--primary, #18181b);
    display: flex;
    font-weight: 900;
    justify-content: center;
    overflow: hidden;
    width: 112px;
}

.staff-profile-show-head__photo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.staff-profile-show-head__main {
    min-width: 0;
}

.staff-profile-show-head__main .page-title {
    color: var(--text, #18181b);
    margin: 2px 0 8px;
}

.staff-profile-show-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.staff-profile-show-badges span {
    background: color-mix(in srgb, var(--primary, #18181b) 8%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 14%, var(--border, #e4e4e7));
    border-radius: 999px;
    color: var(--text, #18181b);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
    padding: 7px 9px;
}

.staff-profile-show-head__actions {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 150px;
}

.staff-profile-show-head__actions .button,
.staff-profile-show-head__actions .button-secondary,
.staff-profile-show-head__actions form {
    width: 100%;
}

.staff-profile-show-head__actions form button {
    width: 100%;
}

.staff-profile-detail-grid--efficient {
    align-items: start;
    gap: 14px;
}

.staff-profile-detail-column {
    align-content: start;
    display: grid;
    gap: 12px;
}

.staff-profile-detail-column h2 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.staff-profile-mini-head {
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #ffffff);
    margin: calc(var(--card-pad, 18px) * -1) calc(var(--card-pad, 18px) * -1) 2px;
    padding: 8px 12px;
}

.staff-profile-mini-head h2,
.staff-profile-mini-head .eyebrow {
    color: inherit;
    margin: 0;
}

.staff-profile-mini-head .eyebrow {
    opacity: .72;
}

.staff-profile-subsection {
    border-top: 1px solid var(--border, #e4e4e7);
    padding-top: 12px;
}

.staff-profile-compact-list {
    margin: 0;
}

.staff-profile-compact-list .detail-row {
    gap: 10px;
    grid-template-columns: minmax(104px, .74fr) minmax(0, 1.26fr);
    min-height: 32px;
}

.staff-profile-detail-grid--efficient .address-map__frame,
.staff-profile-detail-grid--efficient .address-map__empty {
    min-height: 180px;
}

.staff-profile-detail-grid--efficient .address-map__frame iframe {
    height: 180px;
}

.staff-profile-detail-identity {
    align-items: center;
    display: flex;
    gap: 16px;
}

.staff-profile-address-map {
    margin-top: 4px;
}

.staff-management-extra-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.staff-profile-login-activity-placeholder {
    min-height: 118px;
}

.staff-profile-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-profile-sections,
.staff-profile-section {
    display: grid;
    gap: 22px;
}

.staff-profile-section {
    padding-top: 20px;
}

.staff-profile-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.staff-group-header {
    align-items: center;
    background: var(--primary, #18181b);
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 82%, white);
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 11px 14px;
}

.staff-group-header h2 {
    color: inherit;
    font-size: 1rem;
    margin: 0;
}

.staff-group-header span {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    color: inherit;
    font-size: .82rem;
    font-weight: 800;
    padding: 5px 10px;
}

.staff-profile-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
    display: grid;
    gap: 16px;
    padding: 20px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.staff-profile-card:hover {
    border-color: color-mix(in srgb, var(--primary, #18181b) 36%, var(--border, #e4e4e7));
    box-shadow: 0 16px 32px rgba(15, 23, 42, .12);
    transform: translateY(-3px);
}

.staff-profile-card__top,
.staff-profile-card__footer {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.staff-profile-card__top {
    justify-content: flex-start;
}

.staff-profile-card__photo {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: color-mix(in srgb, var(--primary, #18181b) 14%, var(--surface-soft, #fafafa));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 28%, var(--border, #e4e4e7));
    border-radius: 8px;
    color: var(--primary, #18181b);
    display: flex;
    flex: 0 0 76px;
    font-size: 1.4rem;
    font-weight: 900;
    height: 76px;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    text-transform: uppercase;
    width: 76px;
}

.staff-profile-card__photo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.staff-profile-card__identity {
    min-width: 0;
}

.staff-profile-card__identity h2 {
    font-size: 1.05rem;
    margin-bottom: 5px;
}

.staff-profile-card__identity h2 a {
    color: inherit;
    text-decoration: none;
}

.staff-profile-card__identity h2 a:hover {
    text-decoration: underline;
}

.staff-profile-card__type {
    color: var(--muted-text, #71717a);
    font-size: .84rem;
    font-weight: 700;
}

.staff-profile-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.staff-profile-card__badges span {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 999px;
    color: var(--text, #27272a);
    font-size: .78rem;
    font-weight: 800;
    padding: 6px 9px;
}

.staff-profile-card__badges .staff-profile-card__status--active {
    background: color-mix(in srgb, var(--accent, #068803) 12%, white);
    border-color: color-mix(in srgb, var(--accent, #068803) 24%, white);
    color: var(--accent, #068803);
}

.staff-profile-card__badges .staff-profile-card__status--inactive {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.staff-profile-card__info {
    display: grid;
    gap: 10px;
}

.staff-profile-card__info div {
    display: grid;
    gap: 3px;
}

.staff-profile-card__info dt {
    color: var(--muted-text, #71717a);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.staff-profile-card__info dd {
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.staff-profile-card__footer {
    padding-top: 14px;
}

.protected-owner-label {
    align-items: center;
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 10%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, var(--border, #e4e4e7));
    border-radius: 6px;
    color: var(--card-header-bg, var(--primary, #18181b));
    display: inline-flex;
    font-size: .88rem;
    font-weight: 850;
    min-height: 38px;
    padding: 8px 12px;
}

.protected-owner-label--small {
    font-size: .78rem;
    min-height: 32px;
    padding: 6px 9px;
}

.pagination {
    margin-top: 18px;
}

.pagination-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}

.pagination-summary {
    color: var(--muted-text, #71717a);
    font-size: .9rem;
    margin: 0;
}

.pagination-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pagination-link {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    color: var(--text, #18181b);
    display: inline-flex;
    font-size: .88rem;
    font-weight: 750;
    min-height: 34px;
    min-width: 34px;
    justify-content: center;
    padding: 7px 10px;
}

.pagination-link--active {
    background: var(--primary, #18181b);
    border-color: var(--primary, #18181b);
    color: #fff;
}

.pagination-link--disabled {
    color: var(--muted-text, #71717a);
    cursor: not-allowed;
    opacity: .58;
}

@media (min-width: 1500px) {
    .dashboard-board {
        grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
    }

    .topbar__inner:has(.dashboard-search--topbar) {
        grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
    }

    .dashboard-workbench-placeholder-grid {
        grid-template-columns: minmax(310px, 1.08fr) minmax(280px, .92fr);
    }

    .dashboard-workbench-placeholder.dashboard-device-specifications {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1660px) {
    .dashboard-workbench-placeholder-grid {
        grid-template-columns: minmax(445px, 1.15fr) minmax(400px, 1fr) minmax(305px, .69fr);
    }

    .dashboard-workbench-placeholder--youtube {
        grid-column: auto;
    }

    .dashboard-workbench-lower-grid {
        align-items: stretch;
        gap: 8px;
        grid-template-columns: minmax(0, 2.12fr) minmax(320px, .72fr);
    }

    .dashboard-workbench-lower-grid--timer-only {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1450px) {
    .topbar__inner:has(.dashboard-search--topbar) {
        grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
    }

    .dashboard-board {
        grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
    }

    .dashboard-status-quick-row {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    }

    .email-provider-settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customisation-choice-header-grid {
        display: none;
    }
}

@media (max-width: 980px) {
    .customisation-choice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .customisation-form .dashboard-group-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1450px) {
    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) {
        min-height: 78px;
        padding-block: 6px;
    }

    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) .brand__logo {
        height: 58px;
        width: 58px;
    }

    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) .brand__text {
        font-size: 1.05rem;
    }

    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) .nav {
        gap: 6px;
    }

    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) .nav__link,
    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) .nav__trigger {
        flex-direction: column;
        font-size: .78rem;
        gap: 0;
        height: 52px;
        min-height: 52px;
        padding: 4px;
        width: 52px;
    }

    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) .nav__link > span,
    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) .nav__trigger > span:not(.nav__chevron) {
        display: none;
    }

    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) .nav__link .nav__custom-icon,
    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) .nav__trigger .nav__custom-icon,
    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) .nav__link svg,
    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner:has(.dashboard-search--topbar) .nav__trigger svg {
        flex-basis: 44px;
        height: 44px;
        padding: 0;
        width: 44px;
    }

    .topbar__inner:has(.dashboard-search--topbar) .topbar__center,
    .dashboard-search--topbar,
    .dashboard-quicklinks {
        max-width: 320px;
    }

    .dashboard-workbench-placeholder-grid {
        grid-template-columns: minmax(290px, 1.08fr) minmax(260px, .92fr);
    }

    .dashboard-workbench-placeholder--contact-card,
    .dashboard-workbench-placeholder--problem-messages {
        grid-column: auto;
    }

    .dashboard-workbench-placeholder.dashboard-device-specifications {
        grid-column: 1 / -1;
    }
}

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

    .dashboard-board__left,
    .dashboard-board__right,
    .dashboard-board__right.dashboard-status-panel {
        padding-right: 10px;
    }

    .dashboard-board__left {
        padding-left: 15px;
        padding-right: 15px;
    }

    .dashboard-board__right,
    .dashboard-board__right.dashboard-status-panel {
        padding-left: 12px;
    }

    .job-mini-card {
        grid-template-columns: 72px minmax(0, 1fr) 34px;
    }

}

@media (max-width: 820px) {
    .topbar__inner {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .topbar__inner:has(.dashboard-search--topbar) {
        display: flex;
    }

    .topbar__center {
        flex-basis: auto;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    .nav {
        align-items: stretch;
        width: 100%;
    }

    :is(.nav-mode-easy, .nav-mode-uploaded) .topbar__inner {
        min-height: auto;
    }

    :is(.nav-mode-easy, .nav-mode-uploaded) .nav__link,
    :is(.nav-mode-easy, .nav-mode-uploaded) .nav__trigger {
        flex: 1 1 94px;
        min-height: 72px;
        width: auto;
    }

    .nav__group {
        position: static;
    }

    .nav__menu {
        box-shadow: none;
        left: 24px;
        right: 24px;
        top: auto;
    }

    .nav__menu--right {
        left: 24px;
        right: 24px;
    }

    .login-grid,
    .split-grid,
    .metric-grid,
    .email-recommendations,
    .email-provider-grid,
    .email-provider-settings,
    .inventory-detail-hero,
    .inventory-price-row,
    .inventory-summary-metrics,
    .inventory-stock-level-grid,
    .inventory-restock-grid,
    .inventory-category-workspace,
    .jobsheet-create-detail-grid,
    .staff-profile-grid,
    .staff-profile-columns,
    .staff-profile-editor,
    .staff-profile-detail-grid,
    .staff-management-extra-grid,
    .dashboard-board,
    .dashboard-metrics,
    .dashboard-workbench-topbar,
    .dashboard-workbench-placeholder-grid,
    .dashboard-workbench__hero,
    .dashboard-workbench__layout,
    .dashboard-technician-summary,
    .dashboard-device-specification-grid,
    .jobsheet-machine-grid,
    .jobsheet-repair-grid,
    .dashboard-field-options,
    .dashboard-group-row,
    .dashboard-group-row__top,
    .dashboard-group-status,
    .dashboard-new-status,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-workbench-placeholder--contact-card,
    .dashboard-workbench-placeholder.dashboard-device-specifications,
    .dashboard-workbench-placeholder--problem-messages,
    .dashboard-workbench-placeholder--youtube {
        grid-column: auto;
    }

    .job-mini-card__inline-meta,
    .job-mini-card__inline-meta--details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-status-metrics,
    .dashboard-analytics-grid,
    .dashboard-technician-metrics,
    .dashboard-technician-stat-grid,
    .licence-check-grid,
    .licence-edition-grid,
    .dashboard-skin-picker,
    .dashboard-skin-more > div {
        grid-template-columns: 1fr;
    }

    .dashboard-analytics-chart:nth-child(even) {
        border-left: 0;
    }

    .dashboard-analytics-chart:nth-child(n + 2) {
        border-top: 1px solid var(--border, #d4d4d8);
    }

    .dashboard-technician-photo-form__row {
        grid-template-columns: 1fr;
    }

    .staff-profile-show-head {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .staff-profile-show-head__photo {
        width: 86px;
    }

    .staff-profile-show-head__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .jobsheet-machine-card .icon-grid--brand.icon-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jobsheet-machine-form-columns,
    .jobsheet-machine-form-columns__fields {
        grid-template-columns: 1fr;
    }

    .jobsheet-machine-form-columns__brands {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 18%, var(--border, #d4d4d8));
        padding-left: 0;
        padding-top: 12px;
    }

    .preferred-contact-grid.radio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .email-provider-card__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-workbench__job-meta {
        justify-items: start;
        min-width: 0;
        text-align: left;
    }

    .dashboard-workbench-topbar__ids {
        justify-content: flex-start;
    }

    .dashboard-workbench-menu {
        position: static;
    }

    .dashboard-workbench-menu__panel {
        left: 0;
        right: 0;
        top: auto;
    }

    .dashboard-device-details-card {
        grid-template-columns: minmax(76px, 92px) minmax(0, 1fr);
    }

    .dashboard-workbench-order-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-workbench-device-icon {
        min-height: 140px;
    }

    .dashboard-workbench-device-icon--details img,
    .dashboard-workbench-device-icon--details > span {
        height: 82px;
        width: 82px;
    }

    .dashboard-workbench-list div {
        grid-template-columns: 1fr;
    }

    .dashboard-device-specifications .dashboard-specification-list div {
        grid-template-columns: minmax(104px, 1fr) minmax(0, 1fr);
    }

    .job-mini-card {
        grid-template-columns: minmax(52px, 72px) minmax(0, 1fr) 34px;
    }

    .section-inline-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .inventory-category-group__head,
    .inventory-category-row {
        grid-template-columns: 1fr;
    }

    .inventory-category-row {
        padding-left: 12px;
    }

    .section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-section,
    .field-grid,
    .jobsheet-contact-grid,
    .jobsheet-create-credential-grid,
    .jobsheet-intake-head,
    .jobsheet-intake-timing-grid,
    .service-split-grid,
    .theme-grid,
    .status-colour-row {
        grid-template-columns: 1fr;
    }

    .customer-edit-form__panel > .customer-edit-form__section {
        gap: 14px;
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .customer-edit-form__panel > .customer-edit-form__actions {
        padding: 14px 16px;
    }

    .inventory-form .form-section,
    .staff-profile-form .form-section,
    .customisation-form .form-section,
    .staff-login-layout,
    .inventory-form .field-grid,
    .staff-profile-form .field-grid,
    .staff-contact-address-grid,
    .staff-profile-form .permission-group-grid {
        grid-template-columns: 1fr;
    }

    .customisation-form .theme-grid,
    .navigation-mode-grid,
    .customisation-top-grid,
    .customisation-top-grid .form-section,
    .customisation-top-grid .theme-grid,
    .customisation-form .dashboard-field-options,
    .customisation-form .dashboard-group-list,
    .customisation-form .dashboard-group-row__top,
    .customisation-form .dashboard-group-status,
    .customisation-form .dashboard-new-status,
    .dashboard-shared-field-panel__layout,
    .dashboard-shared-field-panel__body,
    .customisation-resource-grid,
    .customisation-choice-grid,
    .customisation-device-intake-grid,
    .settings-setup-grid,
    .settings-business-body {
        grid-template-columns: 1fr;
    }

    .dashboard-shared-field-panel__body {
        width: 100%;
    }

    .customisation-checkbox-stack {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .interface-swatches-card > .theme-grid,
    .interface-swatches-card > .interface-card-divider,
    .interface-swatches-card > .interface-colour-grid,
    .interface-swatches-card > .interface-visual-builder,
    .interface-swatches-card > .interface-save-swatch,
    .interface-swatches-card > .interface-swatch-delete-list {
        grid-column: 1;
    }

    .interface-visual-builder {
        grid-template-columns: 1fr;
    }

    .customisation-form .repair-resource-settings,
    .customisation-form .icon-logo-settings,
    .customisation-resource-grid .customisation-placeholder-card {
        grid-column: 1;
    }

    .customisation-form .icon-logo-settings .icon-logo-grid,
    .customisation-form .icon-logo-settings .icon-logo-paired-grid,
    .icon-logo-paired-row,
    .page-skin-paired-row,
    .branding-icon-library-grid,
    .settings-setup-logo-grid {
        grid-column: 1;
        grid-template-columns: 1fr;
    }

    .branding-icon-library-grid {
        grid-template-columns: 1fr;
    }

    .customisation-top-grid .form-section:nth-child(3) {
        grid-column: auto;
    }

    .customisation-form .theme-grid {
        grid-template-columns: repeat(auto-fill, 76px);
    }

    .customisation-form .dashboard-field-options {
        grid-auto-flow: row;
        grid-template-rows: auto;
    }

    .inventory-form .field-wide,
    .staff-profile-form .field-wide {
        grid-column: 1;
    }

    .inventory-form .inventory-product-image-panel {
        grid-column: 1;
        grid-row: auto;
        order: 2;
    }

    .inventory-form .inventory-item-name-field {
        grid-column: 1;
        grid-row: auto;
    }

    .status-colour-control {
        justify-content: flex-start;
    }

    .submit-bar {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .timeline__item {
        grid-template-columns: 1fr;
    }

    .timeline__meta {
        justify-items: start;
    }
}

.question-panel {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    padding: 16px;
}

.question-panel__head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.question-panel__head h3 {
    font-size: 1rem;
    margin: 0;
}

.jobsheet-detached-submit {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.jobsheet-detached-submit .button,
.jobsheet-detached-submit .button-secondary {
    background: transparent;
    box-shadow: none;
}

.jobsheet-detached-submit .button:hover,
.jobsheet-detached-submit .button:focus,
.jobsheet-detached-submit .button-secondary:hover,
.jobsheet-detached-submit .button-secondary:focus {
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 24%, transparent);
}

.question-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 22px;
}

.question-list li {
    padding-left: 4px;
}

.button-small {
    font-size: .86rem;
    padding: 8px 10px;
}

.inventory-category-workspace {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: 35fr 65fr;
}

.inventory-category-workspace .button-secondary:hover {
    background: var(--card-header-bg, #3f3f46);
    border-color: var(--card-header-bg, #3f3f46);
    color: #fff;
}

.inventory-workspace-nav__link {
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.inventory-workspace-nav__link:hover,
.inventory-workspace-nav__link:focus,
.inventory-workspace-nav__link--active {
    background: var(--card-header-bg, #3f3f46);
    border-color: var(--card-header-bg, #3f3f46);
    color: #fff;
}

.inventory-workspace-nav__link--active {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.inventory-quick-search {
    background: color-mix(in srgb, var(--card-header-bg, #2f2f2f) 84%, #000000);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(24, 24, 27, .08);
    overflow: hidden;
}

.inventory-quick-search__title {
    background: var(--card-header-bg, #111);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 850;
    padding: 8px 10px;
}

.inventory-quick-search__body {
    background: var(--surface, #fff);
    display: grid;
    gap: 8px;
    padding: 12px;
}

.inventory-quick-search__hint {
    color: var(--text, #18181b);
    font-size: .82rem;
    line-height: 1.45;
    margin: 0 0 2px;
}

.inventory-quick-search__row {
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.inventory-quick-search__row input {
    min-height: 34px;
    padding: 7px 9px;
}

.inventory-quick-search__actions {
    align-items: flex-start;
    display: grid;
    gap: 7px;
    justify-items: start;
    padding-top: 2px;
}

.inventory-quick-search button[disabled] {
    cursor: not-allowed;
    opacity: .62;
}

.inventory-search-categories {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.inventory-search-categories__title {
    color: var(--text, #18181b);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.inventory-search-category {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

.inventory-search-category summary {
    align-items: center;
    background: #555;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: grid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr);
    list-style: none;
    min-height: 32px;
    padding: 7px 12px;
    text-align: center;
}

.inventory-search-category summary::-webkit-details-marker {
    display: none;
}

.inventory-search-category summary::before {
    color: rgba(255, 255, 255, .82);
    content: "+";
    font-weight: 600;
}

.inventory-search-category[open] summary::before {
    content: "-";
}

.inventory-search-category summary span:first-child {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.inventory-search-category summary span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-search-category__child span:last-child {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 999px;
    color: var(--muted-text, #71717a);
    font-size: .75rem;
    font-weight: 800;
    min-width: 28px;
    padding: 2px 7px;
    text-align: center;
}

.inventory-search-category__children {
    display: grid;
    gap: 4px;
    padding: 5px 0 2px;
}

.inventory-search-category__child,
.inventory-search-category__empty {
    align-items: center;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 4px;
    color: var(--text, #18181b);
    display: grid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 30px;
    padding: 7px 9px 7px 18px;
    text-decoration: none;
}

.inventory-search-category__child:hover,
.inventory-search-category__empty:hover,
.inventory-search-category__child--active {
    background: var(--accent-soft, #dcfce7);
    color: var(--accent, #068803);
}

.inventory-search-category__child + .inventory-search-category__child {
    border-top: 1px solid var(--border, #d4d4d8);
}

.inventory-search-category__child span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-search-category__empty {
    color: var(--muted-text, #71717a);
    grid-template-columns: 1fr;
}

.inventory-category-item-preview {
    min-width: 0;
}

.inventory-detail-hero--embedded {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

.inventory-detail-hero--embedded .inventory-price-row,
.inventory-summary-metrics--embedded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inventory-category-panel {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    display: grid;
    overflow: hidden;
}

.inventory-category-panel__title {
    background: linear-gradient(90deg, #18181b, #27272a);
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 7px 10px;
}

.inventory-category-group {
    border-top: 1px solid color-mix(in srgb, var(--border, #d4d4d8) 65%, #777);
    display: grid;
    gap: 0;
}

.inventory-category-group:first-of-type {
    border-top: 0;
}

.inventory-category-group__head {
    align-items: center;
    background: var(--card-header-bg, #6f7275);
    color: var(--card-header-text, #fff);
    display: grid;
    font-family: Helvetica, Arial, sans-serif;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 32px;
    padding: 5px 10px;
}

.inventory-category-group__head strong {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.inventory-category-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.inventory-category-actions form {
    margin: 0;
}

.inventory-category-row {
    align-items: center;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #d4d4d8);
    display: grid;
    font-family: Helvetica, Arial, sans-serif;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 34px;
    padding: 5px 10px 5px 24px;
}

.inventory-category-row:nth-child(odd) {
    background: color-mix(in srgb, var(--surface, #fff) 94%, var(--surface-soft, #fafafa));
}

.inventory-category-row:hover {
    background: color-mix(in srgb, var(--surface, #fff) 88%, var(--primary, #18181b));
}

.inventory-category-row__name {
    align-items: center;
    display: flex;
    min-width: 0;
}

.inventory-category-row--empty {
    color: var(--muted-text, #71717a);
    font-size: 12px;
    grid-template-columns: 1fr;
}

.inventory-category-chip {
    background: color-mix(in srgb, var(--surface-soft, #fafafa) 88%, var(--border, #d4d4d8));
    border-radius: 4px;
    color: var(--text, #18181b);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 9px;
}

.inventory-category-count {
    color: var(--muted-text, #71717a);
    font-size: 12px;
    font-weight: 600;
    margin-left: 7px;
}

.inventory-category-head-count {
    color: rgba(255, 255, 255, .78);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.mini-action {
    align-items: center;
    background: rgba(255, 255, 255, .9);
    border: 0;
    border-radius: 4px;
    color: #111827;
    cursor: pointer;
    display: inline-flex;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    min-height: 23px;
    padding: 5px 8px;
}

.mini-action:hover {
    background: #fff;
}

.inventory-category-actions .mini-action--edit:hover {
    background: var(--card-header-bg, #3f3f46);
    color: #fff;
}

.mini-action--danger {
    background: #fee2e2;
    color: #dc2626;
}

.mini-action--danger:hover {
    background: #fecaca;
}

.button-danger {
    align-items: center;
    background: linear-gradient(180deg, #ef4444, #dc2626);
    border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 82%, #7f1d1d);
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 5px rgba(127, 29, 29, .16);
    color: #ffffff;
    display: inline-flex;
    font-weight: 850;
    gap: 5px;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.button-danger:hover,
.button-danger:focus {
    background: linear-gradient(180deg, #f87171, #ef4444);
    border-color: #ef4444;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .42) inset, 0 4px 10px rgba(127, 29, 29, .2);
    color: #ffffff;
    transform: translateY(-1px);
}

.button-danger:active {
    box-shadow: 0 1px 2px rgba(127, 29, 29, .18) inset;
    transform: translateY(0);
}

.button-danger::before {
    background: currentColor;
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    height: 13px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 21q-.82 0-1.41-.59T5 19V7H4V5h5V4h6v1h5v2h-1v12q0 .82-.59 1.41T17 21H7Zm2-4h2V9H9v8Zm4 0h2V9h-2v8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 21q-.82 0-1.41-.59T5 19V7H4V5h5V4h6v1h5v2h-1v12q0 .82-.59 1.41T17 21H7Zm2-4h2V9H9v8Zm4 0h2V9h-2v8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    width: 13px;
}

.button-danger.icon-square-button {
    background: color-mix(in srgb, var(--danger, #dc2626) 13%, #ffffff);
    border-color: color-mix(in srgb, var(--danger, #dc2626) 28%, #ffffff);
    box-shadow: 0 1px 2px rgba(127, 29, 29, .08);
    color: #dc2626;
}

.button-danger.icon-square-button:hover,
.button-danger.icon-square-button:focus {
    background: color-mix(in srgb, var(--danger, #dc2626) 22%, #ffffff);
    border-color: color-mix(in srgb, var(--danger, #dc2626) 40%, #ffffff);
    box-shadow: 0 2px 6px rgba(127, 29, 29, .12);
    color: #b91c1c;
}

body[class*="theme-"] .button.icon-square-button:not(.button-danger),
body[class*="theme-"] .button-secondary.icon-square-button:not(.button-danger),
.button.icon-square-button:not(.button-danger),
.button-secondary.icon-square-button:not(.button-danger) {
    background: color-mix(in srgb, #2563eb 12%, #ffffff);
    border-color: color-mix(in srgb, #2563eb 28%, #ffffff);
    box-shadow: 0 1px 2px rgba(30, 64, 175, .08);
    color: #2563eb;
}

body[class*="theme-"] .button.icon-square-button:not(.button-danger):hover,
body[class*="theme-"] .button.icon-square-button:not(.button-danger):focus,
body[class*="theme-"] .button-secondary.icon-square-button:not(.button-danger):hover,
body[class*="theme-"] .button-secondary.icon-square-button:not(.button-danger):focus,
.button.icon-square-button:not(.button-danger):hover,
.button.icon-square-button:not(.button-danger):focus,
.button-secondary.icon-square-button:not(.button-danger):hover,
.button-secondary.icon-square-button:not(.button-danger):focus {
    background: color-mix(in srgb, #2563eb 20%, #ffffff);
    border-color: color-mix(in srgb, #2563eb 40%, #ffffff);
    box-shadow: 0 2px 6px rgba(30, 64, 175, .12);
    color: #1d4ed8;
}

.button-danger-solid {
    background: var(--danger, #dc2626);
    border-color: var(--danger, #dc2626);
    color: #ffffff;
}

.button-danger-solid:hover,
.button-danger-solid:focus {
    background: color-mix(in srgb, var(--danger, #dc2626) 86%, #000000);
    border-color: color-mix(in srgb, var(--danger, #dc2626) 86%, #000000);
    color: #ffffff;
}

.staff-edit-head .button-danger-solid,
.staff-edit-head .button-danger-solid:visited {
    background: var(--danger, #dc2626) !important;
    border-color: var(--danger, #dc2626) !important;
    color: #ffffff !important;
}

.staff-edit-head .button-danger-solid:hover,
.staff-edit-head .button-danger-solid:focus {
    background: color-mix(in srgb, var(--danger, #dc2626) 84%, #000000) !important;
    border-color: color-mix(in srgb, var(--danger, #dc2626) 84%, #000000) !important;
    color: #ffffff !important;
}

.hidden-form {
    display: none;
}

.table-action-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.mini-action--edit::before,
.mini-action--delete::before,
.button-with-icon::before {
    background: currentColor;
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    height: 12px;
    margin-right: 5px;
    width: 12px;
}

.button-with-icon {
    align-items: center;
    display: inline-flex;
}

.mini-action--edit::before,
.button-with-icon--edit::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 17.46V20h2.54l9.98-9.98-2.54-2.54L4 17.46Zm14.73-10.2a.67.67 0 0 0 0-.95l-1.04-1.04a.67.67 0 0 0-.95 0l-1.12 1.12 2.54 2.54 1.12-1.12Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 17.46V20h2.54l9.98-9.98-2.54-2.54L4 17.46Zm14.73-10.2a.67.67 0 0 0 0-.95l-1.04-1.04a.67.67 0 0 0-.95 0l-1.12 1.12 2.54 2.54 1.12-1.12Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mini-action--delete::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 21q-.82 0-1.41-.59T5 19V7H4V5h5V4h6v1h5v2h-1v12q0 .82-.59 1.41T17 21H7Zm2-4h2V9H9v8Zm4 0h2V9h-2v8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 21q-.82 0-1.41-.59T5 19V7H4V5h5V4h6v1h5v2h-1v12q0 .82-.59 1.41T17 21H7Zm2-4h2V9H9v8Zm4 0h2V9h-2v8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.inventory-list-item {
    align-items: center;
    display: flex;
    gap: 10px;
}

.inventory-thumb {
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    height: 42px;
    object-fit: cover;
    width: 42px;
}

.inventory-thumb--empty {
    align-items: center;
    background: var(--surface-soft, #fafafa);
    color: var(--muted-text, #71717a);
    display: inline-flex;
    font-size: .62rem;
    font-weight: 800;
    justify-content: center;
    line-height: 1.05;
    padding: 3px;
    text-align: center;
}

.inventory-image-preview,
.inventory-image-hero {
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    display: block;
    max-width: 100%;
    object-fit: cover;
}

.inventory-image-preview {
    height: 110px;
    width: 150px;
}

.inventory-image-hero {
    aspect-ratio: 4 / 3;
    margin-bottom: 14px;
    max-height: 260px;
    width: 100%;
}

.inventory-add-cart-form,
.inline-quantity-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inventory-add-cart-form input[type="number"],
.inline-quantity-form input[type="number"] {
    max-width: 82px;
}

.inventory-detail-hero {
    align-items: stretch;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.inventory-detail-main,
.inventory-detail-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.inventory-detail-side {
    align-content: start;
}

.inventory-detail-side dl,
.inventory-detail-side .detail-row,
.inventory-detail-side dd {
    min-width: 0;
}

.inventory-detail-side dl {
    margin: 0;
}

.inventory-detail-side dd {
    overflow-wrap: anywhere;
    text-align: right;
}

.inventory-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inventory-detail-meta span,
.inventory-price-row > div {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    padding: 9px 11px;
}

.inventory-detail-meta span {
    color: var(--muted-text, #71717a);
    font-size: .86rem;
    font-weight: 750;
}

.inventory-url-panel {
    align-items: center;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px;
}

.inventory-url-panel div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.inventory-url-panel a:not(.button-secondary) {
    overflow-wrap: anywhere;
}

.inventory-price-row,
.inventory-summary-metrics,
.inventory-stock-level-grid,
.inventory-restock-grid {
    display: grid;
    gap: 12px;
}

.inventory-price-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventory-price-row span,
.inventory-price-row strong,
.inventory-summary-metrics span,
.inventory-summary-metrics strong {
    display: block;
}

.inventory-price-row strong {
    margin-top: 5px;
}

.inventory-summary-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventory-summary-metrics strong {
    font-size: 1.75rem;
    margin-top: 6px;
}

.inventory-stock-page,
.inventory-stock-page > * {
    min-width: 0;
    max-width: 100%;
}

.inventory-stock-page .overflow-table {
    overflow-x: auto;
}

.inventory-stock-page .stock-reservations-table {
    min-width: 0;
}

.inventory-stock-page .stock-reservations-table th,
.inventory-stock-page .stock-reservations-table td {
    padding: 10px;
    white-space: normal;
}

@media (max-width: 800px) {
    .inventory-stock-page .inventory-detail-hero,
    .inventory-stock-page .inventory-stock-level-grid,
    .inventory-stock-page .inventory-restock-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .inventory-stock-page .inventory-summary-metrics,
    .inventory-stock-page .inventory-price-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-stock-page .section-head,
    .inventory-stock-page .action-row {
        flex-wrap: wrap;
    }
}

.inventory-stock-level-form {
    display: grid;
    gap: 16px;
}

.inventory-stock-level-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.inventory-restock-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventory-image-placeholder {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: var(--surface-soft, #fafafa);
    border: 1px dashed var(--border, #d4d4d8);
    border-radius: 8px;
    color: var(--muted-text, #71717a);
    display: flex;
    font-weight: 750;
    justify-content: center;
    max-width: 100%;
    width: 100%;
}

.check-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.check-row label {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.table-title {
    border-bottom: 1px solid var(--border, #e4e4e7);
    font-size: 1.05rem;
    font-weight: 800;
    padding: 16px 18px;
}

.table-title--split {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.table-title__meta {
    color: var(--muted-text, #71717a);
    font-size: .9rem;
    font-weight: 750;
}

.text-wrap {
    max-width: 260px;
    white-space: pre-wrap;
}

.question-editor {
    border-top: 1px solid var(--border, #d4d4d8);
    display: grid;
    gap: 12px;
    padding-top: 14px;
}

.question-editor[hidden] {
    display: none;
}

.question-editor__rows {
    display: grid;
    gap: 10px;
}

.question-editor__row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.question-editor__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.question-editor__status {
    color: #52525b;
    font-size: .9rem;
}
.field-hint {
    color: var(--muted-text, #71717a);
    font-size: .88rem;
    margin: 8px 0 0;
}
.customer-lookup {
    position: relative;
}

.customer-lookup__results {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(24, 24, 27, .14);
    display: grid;
    left: 0;
    margin-top: 8px;
    max-height: 320px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
}

.customer-lookup__results[hidden] {
    display: none;
}

.customer-lookup__option {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border, #e4e4e7);
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    text-align: left;
}

.customer-lookup__option:hover,
.customer-lookup__option:focus {
    background: var(--surface-soft, #fafafa);
    outline: none;
}

.customer-lookup__option strong,
.customer-lookup__option small {
    display: block;
}

.customer-lookup__option small,
.customer-lookup__empty {
    color: var(--muted-text, #71717a);
    font-size: .86rem;
}

.customer-lookup__empty {
    padding: 12px 14px;
}
.customer-lookup__badge {
    background: color-mix(in srgb, var(--primary, #18181b) 10%, transparent);
    border-radius: 999px;
    color: var(--primary, #18181b);
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    margin-right: 6px;
    padding: 3px 7px;
}

.device-choice-panel {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    padding: 14px;
}

.device-choice-panel[hidden] {
    display: none;
}

.device-choice-panel__head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.device-choice-list {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.device-choice {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    color: var(--text, #18181b);
    cursor: pointer;
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    text-align: left;
}

.device-choice:hover,
.device-choice:focus {
    border-color: var(--primary, #18181b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #18181b) 12%, transparent);
    outline: none;
}

.device-choice span,
.device-choice small {
    color: var(--muted-text, #71717a);
}

.checkbox-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.checkbox-pill {
    align-items: center;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    margin: 0;
    min-height: 44px;
    padding: 10px 12px;
}

.checkbox-pill input {
    width: auto;
}

.checkbox-pill:has(input:checked) {
    border-color: var(--primary, #18181b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #18181b) 14%, transparent);
}

.asset-list--left {
    justify-content: flex-start;
}
.subsection-head {
    border-top: 1px solid var(--border, #e4e4e7);
    padding-top: 16px;
}

.asset-detail-panel {
    display: grid;
    gap: 14px;
}

.asset-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-detail-list {
    display: grid;
    gap: 8px;
    margin: 0;
}

@media (max-width: 560px) {
    .dashboard-board__left,
    .dashboard-board__right,
    .dashboard-board__right.dashboard-status-panel {
        padding-left: 12px;
        padding-right: 12px;
    }

    .job-mini-card {
        grid-template-columns: 56px minmax(0, 1fr) 32px;
        padding: 8px;
    }

    .job-mini-card__brand-thumb--image {
        height: 56px;
        width: 56px;
    }

    .job-mini-card__title {
        font-size: .9rem;
    }

    .job-mini-card__inline-meta {
        width: 100%;
    }

    .dashboard-workbench-order-summary {
        padding: 0 8px;
    }
}

@media (max-width: 900px) {
    .jobsheet-credentials-specs-grid,
    .jobsheet-edit-flow .jobsheet-included-assets-body,
    .jobsheet-create-credential-grid {
        grid-template-columns: 1fr;
    }

    .jobsheet-credentials-specs-column--specs {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 18%, var(--border, #d4d4d8));
        padding-left: 0;
        padding-top: 16px;
    }

    .jobsheet-edit-flow .jobsheet-included-credentials-column {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 18%, var(--border, #d4d4d8));
        padding-left: 0;
        padding-top: 16px;
    }

    .asset-detail-grid {
        grid-template-columns: 1fr;
    }
}
.paper-sheet {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    color: var(--text, #18181b);
    display: grid;
    gap: 22px;
    padding: 28px;
}

body.document-mode,
body.document-mode.page-background-active {
    background: #8e8e8e;
    background-image: none;
}

body.document-mode.page-background-active::before,
.document-mode .topbar,
.document-mode .app-footer,
.document-mode .reminder-popup-backdrop {
    display: none;
}

.document-mode .content {
    background: #8e8e8e;
    margin: 0;
    max-width: none;
    padding: 0 0 32px;
    width: 100%;
}

.document-mode .jobsheet-check {
    gap: 14px;
}

.jobsheet-receipt-toolbar {
    align-items: center;
    background: #ededed;
    border-bottom: 1px solid #4b5563;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .38);
    display: flex;
    gap: 8px;
    justify-content: center;
    max-width: 100vw;
    min-height: 54px;
    min-width: 0;
    padding: 6px 12px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 20;
}

.jobsheet-receipt-toolbar form {
    margin: 0;
}

.checkout-receipt-toolbar {
    flex-wrap: wrap;
}

.checkout-receipt-toolbar__collector {
    align-items: center;
    display: flex;
    gap: 7px;
}

.checkout-receipt-toolbar__collector label {
    color: #3f3f46;
    font-size: .75rem;
    font-weight: 800;
}

.checkout-receipt-toolbar__collector input {
    background: #ffffff;
    border: 1px solid #aeb5bd;
    border-radius: 2px;
    font: inherit;
    min-height: 40px;
    padding: 7px 9px;
    width: min(250px, 34vw);
}

.subcontractor-sheet-toolbar {
    flex-wrap: wrap;
}

.subcontractor-sheet-toolbar__email {
    align-items: center;
    display: flex;
    gap: 7px;
    min-width: 0;
}

.subcontractor-sheet-toolbar__email input {
    background: #ffffff;
    border: 1px solid #aeb5bd;
    border-radius: 2px;
    font: inherit;
    min-height: 40px;
    min-width: 0;
    padding: 7px 9px;
    width: min(220px, 24vw);
}

.jobsheet-receipt-toolbar__action {
    align-items: center;
    background: #ffffff;
    border: 1px solid #b8bec5;
    border-radius: 3px;
    color: #27272a;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    gap: 7px;
    min-height: 40px;
    padding: 7px 12px;
    text-decoration: none;
}

.jobsheet-receipt-toolbar__action:hover,
.jobsheet-receipt-toolbar__action:focus-visible {
    background: #f8fafc;
    border-color: #64748b;
    color: #111827;
}

.jobsheet-receipt-toolbar__action svg {
    fill: none;
    height: 23px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 23px;
}

.jobsheet-receipt-guardian-options,
.document-mode .notice,
.document-mode .alert {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    margin: 0 auto;
    padding: 10px 12px;
    width: min(210mm, calc(100vw - 32px));
}

.jobsheet-receipt-guardian-options summary {
    cursor: pointer;
    font-size: .8rem;
    font-weight: 800;
}

.document-mode .notice {
    background: #ecfdf5;
    border-color: #86c9aa;
    color: #14532d;
}

.document-mode .alert {
    background: #fff1f2;
    border-color: #f0a1aa;
    color: #881337;
}

.jobsheet-check .receipt-email-review {
    box-sizing: border-box;
    width: min(600px, calc(100% - 32px));
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #172033;
    scroll-margin-top: 100px;
}

.receipt-email-review h2 {
    margin: 0 0 16px;
    color: #172033;
    font-size: 20px;
}

.receipt-email-review__form {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.receipt-email-review__form label {
    color: #172033;
    font-size: 14px;
    font-weight: 700;
}

.receipt-email-review__form input {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    margin-bottom: 8px;
    background: #ffffff;
    color: #172033;
}

.receipt-email-review__form .action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.jobsheet-receipt-guardian-options form {
    align-items: end;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(220px, 1fr) auto;
    margin-top: 9px;
}

.jobsheet-receipt-guardian-options label {
    font-size: .75rem;
}

.jobsheet-receipt-guardian-options input {
    min-height: 34px;
    padding: 7px 9px;
}

.paper-sheet--jobsheet-receipt {
    background: #ffffff;
    border: 0;
    border-radius: 1px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .48);
    color: #111827;
    font-size: 11px;
    gap: 14px;
    margin: 34px auto 0;
    min-height: 297mm;
    padding: 13mm 14mm;
    width: min(210mm, calc(100vw - 32px));
}

.paper-sheet--jobsheet-receipt > section > h3 {
    font-size: .82rem;
    margin: 0 0 6px;
}

.paper-sheet--checkout-receipt .checkout-receipt-problem p {
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
}

.paper-sheet--checkout-receipt {
    align-content: start;
    grid-auto-rows: max-content;
}

.paper-sheet--checkout-receipt .checkout-receipt-acknowledgement > p {
    margin: 7px 0 0;
}

.paper-sheet--subcontractor-sheet {
    align-content: start;
    grid-auto-rows: max-content;
}

.paper-sheet--subcontractor-sheet .jobsheet-receipt-header > div:first-child > h1 {
    font-size: 1.55rem;
    line-height: 1.1;
    margin: 4px 0 8px;
}

.paper-sheet--subcontractor-sheet .jobsheet-receipt-header .lead {
    font-size: .82rem;
    margin: 0 0 11px;
}

.paper-sheet--subcontractor-sheet .jobsheet-receipt-business h2 {
    font-size: 1.05rem;
    margin: 0;
}

.paper-sheet--subcontractor-sheet .jobsheet-receipt-business p {
    font-size: .68rem;
    margin: 0;
}

.paper-sheet--subcontractor-sheet .terms-box {
    line-height: 1.45;
    padding: 8px 9px;
}

.paper-sheet--subcontractor-sheet .receipt-key-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.paper-sheet--subcontractor-sheet .receipt-key-details .receipt-detail-wide {
    grid-column: 1 / -1;
}

.paper-sheet--bench-sheet {
    align-content: start;
    background: #ffffff;
    border: 0;
    border-radius: 1px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .48);
    color: #111827;
    font-size: 10px;
    gap: 12px;
    margin: 34px auto 0;
    min-height: 297mm;
    padding: 13mm 14mm;
    width: min(210mm, calc(100vw - 32px));
}

.bench-sheet-primary {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.bench-sheet-summary h2,
.bench-sheet-group > h2 {
    background: #e4e4e7;
    color: #111827;
    font-size: .78rem;
    margin: 0;
    padding: 5px 7px;
}

.bench-sheet-summary dl {
    margin: 0;
}

.bench-sheet-summary dl > div {
    border-bottom: 1px solid #e4e4e7;
    display: grid;
    gap: 6px;
    grid-template-columns: 115px minmax(0, 1fr);
    padding: 4px 5px;
}

.bench-sheet-summary dt {
    font-weight: 700;
}

.bench-sheet-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.bench-sheet-text-block {
    margin-top: 13px;
}

.bench-sheet-text-block h3 {
    font-size: .72rem;
    margin: 0 0 4px;
}

.bench-sheet-text-block p {
    line-height: 1.45;
    margin: 0;
    min-height: 42px;
    white-space: pre-wrap;
}

.bench-sheet-top-checklists {
    display: grid;
    gap: 9px;
}

.bench-sheet-top-checklists > h1 {
    align-items: center;
    border: 2px solid #111827;
    border-radius: 7px;
    display: inline-flex;
    font-size: 1rem;
    gap: 5px;
    justify-self: center;
    margin: 0 0 2px;
    padding: 4px 9px;
}

.bench-sheet-top-checklists > h1 svg {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    width: 17px;
}

.bench-sheet-secondary {
    align-items: start;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bench-sheet-group {
    break-inside: avoid;
    min-width: 0;
}

.bench-sheet-list {
    display: grid;
    gap: 1px;
    padding: 4px 2px;
}

.bench-sheet-list__item {
    align-items: start;
    display: grid;
    gap: 4px;
    grid-template-columns: 11px 15px minmax(0, 1fr);
    line-height: 1.25;
    min-width: 0;
    padding: 1px 0;
}

.bench-sheet-list__item > span:last-child {
    min-width: 0;
}

.bench-sheet-list__item strong {
    display: block;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.bench-sheet-list__item.is-selected strong {
    font-weight: 800;
}

.bench-sheet-list__item small {
    color: #52525b;
    display: block;
    font-size: .58rem;
    margin-top: 1px;
}

.bench-sheet-check {
    align-items: center;
    border: 1px solid #71717a;
    display: inline-flex;
    font-size: 9px;
    font-weight: 900;
    height: 9px;
    justify-content: center;
    line-height: 1;
    margin-top: 1px;
    width: 9px;
}

.bench-sheet-check--selected {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.bench-sheet-item-icon {
    align-items: center;
    display: inline-flex;
    font-size: 11px;
    height: 14px;
    justify-content: center;
    overflow: hidden;
    width: 14px;
}

.bench-sheet-item-icon img,
.bench-sheet-item-icon svg {
    display: block;
    height: 13px;
    object-fit: contain;
    width: 13px;
}

.bench-sheet-item-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.bench-sheet-empty {
    color: #71717a;
    margin: 3px;
}

.paper-sheet--jobsheet-receipt > .card {
    border-radius: 2px;
    font-size: .72rem;
    padding: 9px 10px;
}

.paper-sheet--jobsheet-receipt > .card h3,
.paper-sheet--jobsheet-receipt > .card p {
    margin: 0 0 5px;
}

.paper-sheet__head {
    align-items: flex-start;
    border-bottom: 1px solid var(--border, #e4e4e7);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding-bottom: 18px;
}

.paper-sheet__head h2 {
    color: var(--text, #111827);
    font-size: 2rem;
    margin: 0;
}

.paper-sheet__meta {
    color: var(--muted-text, #71717a);
    display: grid;
    gap: 6px;
    justify-items: end;
}

.jobsheet-receipt-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--border, #e4e4e7);
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    padding-bottom: 22px;
}

.paper-sheet--jobsheet-receipt .jobsheet-receipt-header {
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 190px;
    padding-bottom: 12px;
}

.jobsheet-receipt-customer {
    display: grid;
    gap: 16px;
}

.paper-sheet--jobsheet-receipt .jobsheet-receipt-customer {
    gap: 10px;
}

.receipt-customer-title {
    align-items: center;
    display: flex;
    gap: 14px;
}

.receipt-person-icon {
    align-items: center;
    border: 2px solid #068803;
    border-radius: 999px;
    color: #068803;
    display: inline-flex;
    flex: 0 0 auto;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.receipt-person-icon svg {
    fill: none;
    height: 32px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 32px;
}

.paper-sheet--jobsheet-receipt .receipt-customer-title {
    gap: 9px;
}

.paper-sheet--jobsheet-receipt .receipt-person-icon {
    height: 40px;
    width: 40px;
}

.paper-sheet--jobsheet-receipt .receipt-person-icon svg {
    height: 25px;
    width: 25px;
}

.receipt-customer-title h2 {
    color: var(--text, #111827);
    font-size: 2.15rem;
    line-height: 1.1;
    margin: 0;
}

.paper-sheet--jobsheet-receipt .receipt-customer-title h2 {
    font-size: 1.5rem;
}

.paper-sheet--jobsheet-receipt .receipt-customer-title .eyebrow {
    font-size: .64rem;
    margin-bottom: 3px;
}

.receipt-key-details {
    display: grid;
    gap: 7px;
    margin: 0;
}

.paper-sheet--jobsheet-receipt .receipt-key-details {
    gap: 4px;
}

.receipt-key-details div {
    display: grid;
    gap: 10px;
    grid-template-columns: 160px minmax(0, 1fr);
}

.paper-sheet--jobsheet-receipt .receipt-key-details div {
    gap: 7px;
    grid-template-columns: 118px minmax(0, 1fr);
}

.receipt-key-details dt {
    color: var(--muted-text, #3f3f46);
    font-weight: 700;
}

.paper-sheet--jobsheet-receipt .receipt-key-details dt {
    font-weight: 750;
}

.receipt-key-details dd {
    color: var(--text, #18181b);
    margin: 0;
    overflow-wrap: anywhere;
}

.receipt-detail-wide {
    align-items: start;
}

.receipt-inline-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.paper-sheet--jobsheet-receipt .receipt-inline-chips {
    gap: 3px;
}

.paper-sheet--jobsheet-receipt .asset-chip {
    border-radius: 3px;
    font-size: .65rem;
    padding: 2px 5px;
}

.receipt-summary-text {
    line-height: 1.5;
    white-space: pre-wrap;
}

.jobsheet-receipt-business {
    display: grid;
    gap: 10px;
    justify-items: end;
    text-align: right;
}

.paper-sheet--jobsheet-receipt .jobsheet-receipt-business {
    gap: 6px;
}

.jobsheet-receipt-business h1 {
    color: var(--text, #111827);
    font-size: 2rem;
    line-height: 1.1;
    margin: 0;
}

.paper-sheet--jobsheet-receipt .jobsheet-receipt-business h1 {
    font-size: 1.35rem;
}

.receipt-logo {
    border: 2px solid var(--primary, #068803);
    border-radius: 8px;
    color: var(--primary, #068803);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 8px 12px;
}

.receipt-logo-image {
    display: block;
    max-height: 90px;
    max-width: 180px;
    object-fit: contain;
}

.paper-sheet--jobsheet-receipt .receipt-logo-image {
    max-height: 62px;
    max-width: 132px;
}

.jobsheet-receipt-business address {
    color: var(--muted-text, #52525b);
    font-style: normal;
    line-height: 1.45;
    margin: 0;
    white-space: pre-line;
}

.paper-sheet--jobsheet-receipt .jobsheet-receipt-business address {
    font-size: .68rem;
    line-height: 1.3;
}

.receipt-qr {
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    padding: 8px;
}

.paper-sheet--jobsheet-receipt .receipt-qr {
    border-radius: 3px;
    padding: 5px;
}

.receipt-qr img {
    display: block;
    height: 118px;
    width: 118px;
}

.paper-sheet--jobsheet-receipt .receipt-qr img {
    height: 92px;
    width: 92px;
}

.receipt-progress-url {
    color: var(--muted-text, #71717a);
    font-size: .78rem;
    margin: 0;
    max-width: 260px;
    overflow-wrap: anywhere;
}

.paper-sheet--jobsheet-receipt .receipt-progress-url {
    font-size: .58rem;
    max-width: 190px;
}

.store-row {
    align-items: flex-start;
    border-bottom: 1px solid var(--border, #e4e4e7);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 0 0 18px;
}

.store-row + .store-row {
    padding-top: 18px;
}

.store-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.store-row__title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.store-row__address {
    color: var(--muted-text, #71717a);
    margin: 8px 0 0;
    white-space: pre-line;
}

.settings-setup-grid {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.settings-setup-grid .form-section,
.settings-store-section {
    grid-template-columns: 1fr;
}

.settings-setup-grid .form-section {
    gap: 10px;
    padding: 12px;
}

.settings-setup-grid .form-section__head {
    min-height: 38px;
    padding: 8px 12px;
}

.settings-business-body {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(270px, .85fr);
}

.settings-business-column {
    align-content: start;
    display: grid;
    gap: 8px;
}

.settings-business-column .field,
.settings-business-numbering .field {
    gap: 4px;
}

.settings-business-column label,
.settings-business-numbering label {
    font-size: .78rem;
}

.settings-business-column input,
.settings-business-column select,
.settings-business-numbering input {
    min-height: 36px;
    padding: 8px 10px;
}

.settings-business-column .field-hint,
.settings-business-numbering .field-hint {
    font-size: .72rem;
    line-height: 1.25;
    margin: 0;
}

.settings-setup-logo-panel {
    border-top: 1px solid color-mix(in srgb, var(--primary, #18181b) 24%, var(--border, #d4d4d8));
    display: grid;
    gap: 10px;
    margin-top: 4px;
    padding-top: 14px;
}

.settings-setup-logo-heading {
    font-size: 1.1rem;
    margin: 0;
}

.settings-setup-logo-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-setup-logo-grid .icon-logo-row {
    align-content: start;
    gap: 8px;
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 8px;
}

.settings-setup-logo-grid .icon-logo-preview {
    justify-self: center;
    min-height: 46px;
    width: 46px;
}

.settings-setup-logo-grid .icon-logo-row .field:last-child {
    grid-column: 1 / -1;
}

.settings-setup-logo-grid label {
    font-size: .76rem;
}

.settings-setup-logo-grid input {
    min-height: 34px;
    padding: 7px 9px;
}

.setup-icon-upload-action {
    align-items: start;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.setup-icon-upload-action > .button {
    align-self: start;
    min-height: 42px;
}

.settings-business-numbering {
    align-content: start;
    align-self: start;
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 5%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 14%, var(--border, #e4e4e7));
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 10px;
}

.page-skin-presentation-controls {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-skin-presentation-controls label {
    font-size: .72rem;
}

.page-skin-opacity-control {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 40px;
}

.page-skin-opacity-control input {
    min-width: 0;
    padding: 0;
}

.page-skin-opacity-control output {
    color: var(--muted-text, #71717a);
    font-size: .72rem;
    font-weight: 800;
    text-align: right;
}

.settings-business-numbering .form-section__head {
    margin: -10px -10px 0;
}

.settings-business-numbering .field-grid {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
}

.settings-business-numbering__save {
    width: 100%;
}

@media (max-width: 1180px) {
    .settings-setup-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-business-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-business-numbering {
        grid-column: 1 / -1;
    }

    .settings-business-numbering .field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .settings-business-body,
    .settings-setup-logo-grid,
    .settings-business-numbering .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-business-numbering {
        grid-column: 1;
    }
}

.settings-store-section > .form-section__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.settings-demo-data-card {
    grid-template-columns: 1fr;
}

.settings-demo-data-card .form-section__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.settings-demo-data-body {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.settings-demo-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.settings-demo-counts span {
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 8%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 18%, var(--border, #e4e4e7));
    border-radius: 6px;
    color: var(--text, #18181b);
    font-size: .8rem;
    font-weight: 800;
    padding: 6px 8px;
}

.settings-demo-actions {
    align-items: stretch;
    display: grid;
    gap: 8px;
    min-width: 190px;
}

.settings-demo-actions form,
.settings-demo-actions button {
    width: 100%;
}

.button:disabled,
.button-secondary:disabled,
.button-danger:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.settings-store-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    padding: 10px;
}

.settings-store-list .store-row {
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 5%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 14%, var(--border, #e4e4e7));
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 10px;
}

.settings-store-list .store-row + .store-row {
    padding-top: 10px;
}

.settings-store-list .store-row__title {
    gap: 6px;
}

.settings-store-list .store-row__identity {
    align-items: flex-start;
    display: grid;
    gap: 10px;
    grid-template-columns: 48px minmax(0, 1fr);
}

.settings-store-list .store-row__logo {
    align-items: center;
    background: color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 8%, var(--surface-soft, #f8fafc));
    border: 1px solid color-mix(in srgb, var(--card-header-bg, var(--primary, #18181b)) 18%, var(--border, #e4e4e7));
    border-radius: 8px;
    color: var(--primary, #334155);
    display: flex;
    font-size: .8rem;
    font-weight: 900;
    height: 48px;
    justify-content: center;
    overflow: hidden;
    width: 48px;
}

.settings-store-list .store-row__logo img {
    display: block;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    width: 100%;
}

.settings-store-list .store-row__address,
.settings-store-list .muted {
    font-size: .78rem;
    line-height: 1.3;
    margin: 4px 0 0;
}

.settings-store-list .action-row {
    gap: 6px;
}

.hosted-order-row {
    align-items: center;
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 14px;
}

.hosted-order-row__title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hosted-order-row__domain {
    color: var(--primary, #18181b);
    font-weight: 850;
    margin: 4px 0 0;
}

.hosted-subdomain-input {
    align-items: center;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr) auto;
}

.hosted-subdomain-input input {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.hosted-subdomain-input span {
    align-items: center;
    align-self: stretch;
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #d4d4d8);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    color: var(--muted-text, #71717a);
    display: inline-flex;
    font-size: .9rem;
    font-weight: 800;
    padding: 0 12px;
}

.hosted-provisioning-note {
    background: color-mix(in srgb, var(--primary, #18181b) 7%, var(--surface-soft, #fafafa));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 18%, var(--border, #e4e4e7));
    border-radius: 8px;
    display: grid;
    gap: 4px;
    margin: 14px;
    padding: 12px;
}

.hosted-provisioning-note strong {
    color: var(--primary, #18181b);
}

.hosted-provisioning-note span {
    color: var(--muted-text, #71717a);
    font-size: .9rem;
}

.licence-row {
    align-items: center;
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 14px;
}

.licence-row__title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.licence-row__key {
    color: var(--primary, #18181b);
    font-weight: 850;
    margin: 4px 0 0;
}

.licence-key-reveal {
    background: color-mix(in srgb, #068803 9%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, #068803 24%, var(--border, #d4d4d8));
    border-radius: 8px;
    display: grid;
    gap: 6px;
    padding: 14px;
}

.licence-key-reveal span,
.licence-key-reveal small {
    color: var(--muted-text, #71717a);
    font-weight: 750;
}

.licence-key-reveal strong {
    color: #064e03;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 1.25rem;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}

.licence-offline-note {
    background: color-mix(in srgb, var(--primary, #18181b) 7%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--primary, #18181b) 18%, var(--border, #e4e4e7));
    border-radius: 8px;
    display: grid;
    gap: 5px;
    padding: 12px 14px;
}

.licence-offline-note strong {
    color: var(--primary, #18181b);
}

.licence-offline-note span {
    color: var(--muted-text, #71717a);
    font-size: .92rem;
}

.licence-check-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 14px 14px;
}

.licence-check-grid div {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    padding: 10px;
}

.licence-check-grid span,
.licence-check-grid strong {
    display: block;
}

.licence-check-grid span {
    color: var(--muted-text, #71717a);
    font-size: .78rem;
    font-weight: 800;
}

.licence-check-grid strong {
    font-size: 1rem;
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.licence-edition-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.licence-edition-card {
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    overflow: hidden;
}

.licence-edition-card.is-active {
    border-color: var(--primary, #18181b);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #18181b) 18%, transparent);
}

.licence-edition-card__head {
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #ffffff);
    display: grid;
    gap: 3px;
    padding: 10px 12px;
}

.licence-edition-card__head h3,
.licence-edition-card__head span {
    color: inherit;
    margin: 0;
}

.licence-edition-card__head h3 {
    font-size: 1rem;
}

.licence-edition-card__head span {
    font-size: .9rem;
    font-weight: 800;
    opacity: .86;
}

.licence-edition-card dl,
.licence-edition-card ul {
    margin: 0;
    padding: 0 12px;
}

.licence-edition-card dl {
    display: grid;
    gap: 6px;
}

.licence-edition-card dl div {
    display: flex;
    font-size: .82rem;
    justify-content: space-between;
}

.licence-edition-card dt {
    color: var(--muted-text, #71717a);
}

.licence-edition-card dd {
    font-weight: 850;
    margin: 0;
}

.licence-edition-card ul {
    display: grid;
    gap: 5px;
    list-style: none;
    padding-bottom: 12px;
}

.licence-edition-card li {
    color: var(--muted-text, #71717a);
    font-size: .8rem;
    line-height: 1.25;
}

.licence-edition-card li::before {
    color: var(--primary, #18181b);
    content: "✓ ";
    font-weight: 900;
}

.logo-preview {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: flex;
    min-height: 96px;
    padding: 12px;
}

.logo-preview img {
    display: block;
    max-height: 80px;
    max-width: 220px;
    object-fit: contain;
}

.paper-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.terms-box {
    background: var(--surface-soft, #f8faf9);
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    line-height: 1.65;
    padding: 16px;
    white-space: pre-wrap;
}

.signature-pad {
    background: var(--surface, #ffffff);
    border: 2px dashed #a1a1aa;
    border-radius: 8px;
    display: block;
    height: 180px;
    max-width: 100%;
    touch-action: none;
    width: 100%;
}

.signature-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 12px;
}

.signature-display img {
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    max-height: 160px;
    max-width: 100%;
}

.paper-sheet--jobsheet-receipt .terms-box {
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: .67rem;
    line-height: 1.28;
    padding: 0;
    white-space: normal;
}

.paper-sheet--jobsheet-receipt .terms-box :is(h1, h2, h3, h4, p, ul, ol) {
    margin-block: 0 5px;
}

.paper-sheet--jobsheet-receipt .terms-box :is(ul, ol) {
    padding-left: 18px;
}

.paper-sheet--jobsheet-receipt .signature-pad {
    border: 1px solid #64748b;
    border-radius: 1px;
    height: 105px;
}

.paper-sheet--jobsheet-receipt .signature-actions {
    gap: 7px;
    margin-top: 7px;
}

.paper-sheet--jobsheet-receipt .signature-actions :is(.button, .button-secondary) {
    min-height: 32px;
    padding: 5px 9px;
}

.paper-sheet--jobsheet-receipt .signature-display img {
    border-radius: 1px;
    max-height: 105px;
}

.paper-sheet--jobsheet-receipt .document-footer-text {
    font-size: .64rem;
    line-height: 1.3;
}

.permission-list {
    display: grid;
    gap: 10px;
}

.permission-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.permission-preset-row .button-secondary:hover,
.permission-preset-row .button-secondary:focus {
    background: color-mix(in srgb, var(--primary, #18181b) 14%, transparent);
    border-color: color-mix(in srgb, var(--primary, #18181b) 18%, var(--border, #d4d4d8));
    color: var(--primary, #18181b);
}

.permission-group-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.permission-group-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    padding: 14px;
}

.permission-group-card h3,
.permission-summary h3 {
    font-size: .9rem;
    margin-bottom: 10px;
}

.permission-row {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    padding: 10px 12px;
}

.permission-summary {
    display: grid;
    gap: 16px;
}

.requirement-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.requirement-card {
    display: grid;
    gap: 12px;
    overflow: hidden;
}

.requirement-card h2 {
    align-items: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    color: var(--card-header-text, #fff);
    display: flex;
    font-size: 1rem;
    height: var(--panel-header-height);
    line-height: 1.05;
    margin: -22px -22px 4px;
    min-height: 0;
    overflow: hidden;
    padding: var(--panel-header-padding);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.requirement-action {
    align-items: center;
    border-top: 1px solid var(--border, #e4e4e7);
    display: flex;
    justify-content: flex-start;
    padding-top: 12px;
}

.requirement-list {
    display: grid;
    gap: 10px;
}

.requirement-list div {
    border-top: 1px solid var(--border, #e4e4e7);
    display: grid;
    gap: 3px;
    padding-top: 10px;
}

.requirement-list div:first-child {
    border-top: 0;
    padding-top: 0;
}

.requirement-list dt {
    font-weight: 800;
}

.requirement-list dd {
    color: var(--muted-text, #71717a);
    font-size: .9rem;
}

.check-list {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.check-list li {
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    font-size: .9rem;
    padding: 8px 10px;
}

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pill-list li {
    background: color-mix(in srgb, var(--brand, #0f766e) 12%, white);
    border: 1px solid color-mix(in srgb, var(--brand, #0f766e) 18%, white);
    border-radius: 999px;
    color: var(--brand-dark, #115e59);
    font-size: .82rem;
    font-weight: 750;
    padding: 6px 10px;
}

.repair-resource-band {
    display: grid;
    gap: 16px;
}

.repair-script-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.repair-script-card,
.repair-document-card {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
    display: grid;
    gap: 12px;
    padding: 16px;
}

.repair-script-card__head,
.repair-script-card__footer {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.repair-script-card__head span,
.repair-script-card__head strong {
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    padding: 5px 9px;
}

.repair-script-card__head span {
    background: color-mix(in srgb, var(--primary, #18181b) 10%, white);
    color: var(--primary, #18181b);
}

.repair-script-card__head strong {
    background: var(--primary, #18181b);
    color: #ffffff;
}

.repair-script-card h2,
.repair-document-card h2 {
    font-size: 1rem;
    margin: 0;
}

.repair-script-card p,
.repair-document-card p {
    color: var(--muted-text, #71717a);
    font-size: .9rem;
    line-height: 1.45;
    margin: 0;
}

.repair-script-card code {
    background: var(--surface-soft, #f4f4f5);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 6px;
    font-size: .78rem;
    overflow-wrap: anywhere;
    padding: 5px 7px;
}

.repair-document-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.repair-resource-settings {
    grid-template-columns: 160px minmax(0, 1fr);
}

.repair-resource-settings-list {
    display: grid;
    gap: 12px;
}

.repair-resource-settings-row {
    align-items: end;
    background: var(--surface-soft, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr) auto;
    padding: 12px;
}

.repair-resource-settings-row .field-wide {
    grid-column: span 2;
}

@media (max-width: 1180px) {
    .repair-script-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.customer-progress-page {
    display: grid;
    gap: 18px;
}

.customer-progress-hero {
    align-items: stretch;
    background: #f7fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    overflow: hidden;
}

.customer-progress-hero > div:first-child {
    padding: 24px;
}

.customer-progress-kicker {
    color: var(--muted);
    display: block;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.customer-progress-hero h1 {
    color: var(--text);
    font-size: 2rem;
    line-height: 1.1;
    margin: 6px 0;
}

.customer-progress-hero p {
    color: var(--muted);
    font-size: 1.02rem;
    font-weight: 800;
    margin: 0;
}

.customer-progress-status {
    align-items: center;
    background: var(--status-colour);
    color: #fff;
    display: grid;
    justify-items: center;
    padding: 22px;
    text-align: center;
}

.customer-progress-status span {
    font-size: .78rem;
    font-weight: 900;
    opacity: .84;
    text-transform: uppercase;
}

.customer-progress-status strong {
    font-size: 1.35rem;
    line-height: 1.15;
}

.customer-progress-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-progress-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    padding: 18px;
}

.customer-progress-card--wide {
    grid-column: 1 / -1;
}

.customer-progress-card h2 {
    color: var(--text);
    font-size: 1rem;
    margin: 0 0 12px;
}

.customer-progress-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.customer-progress-list div {
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(120px, .36fr) minmax(0, 1fr);
    padding-bottom: 10px;
}

.customer-progress-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.customer-progress-list dt {
    color: var(--muted);
    font-size: .84rem;
    font-weight: 800;
}

.customer-progress-list dd {
    color: var(--text);
    font-weight: 800;
    margin: 0;
}

.customer-progress-copy {
    color: var(--text);
    line-height: 1.65;
    margin: 0;
    white-space: pre-wrap;
}

.customer-progress-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.customer-progress-chip-list span {
    background: rgba(6, 136, 3, .09);
    border: 1px solid rgba(6, 136, 3, .25);
    border-radius: 999px;
    color: #075f05;
    font-size: .84rem;
    font-weight: 800;
    padding: 6px 10px;
}

.customer-progress-photo-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.customer-progress-photo-grid figure {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 0;
    overflow: hidden;
}

.customer-progress-photo-grid img {
    aspect-ratio: 4 / 3;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.customer-progress-photo-grid figcaption {
    color: var(--muted);
    font-size: .84rem;
    font-weight: 800;
    padding: 8px 10px;
}

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

    .requirement-grid,
    .repair-script-grid,
    .repair-document-grid,
    .check-list.columns-2 {
        grid-template-columns: 1fr;
    }

    .paper-sheet__head {
        display: grid;
    }

    .paper-sheet__meta {
        justify-items: start;
    }

    .jobsheet-receipt-header {
        grid-template-columns: 1fr;
    }

    .jobsheet-receipt-business {
        justify-items: start;
        text-align: left;
    }

    .paper-sheet--jobsheet-receipt {
        margin-top: 16px;
        padding: 18px;
    }

    .paper-sheet--jobsheet-receipt .jobsheet-receipt-header {
        grid-template-columns: 1fr;
    }

    .paper-sheet--jobsheet-receipt .jobsheet-receipt-business {
        justify-items: start;
        text-align: left;
    }

    .jobsheet-receipt-guardian-options form {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .checkout-receipt-toolbar__collector {
        flex: 1 1 100%;
        justify-content: center;
    }

    .checkout-receipt-toolbar__collector input {
        flex: 1 1 auto;
        max-width: 300px;
        min-width: 0;
        width: auto;
    }

    .subcontractor-sheet-toolbar__email {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .subcontractor-sheet-toolbar__email input {
        flex: 1 1 180px;
        width: auto;
    }

    .paper-sheet--subcontractor-sheet .receipt-key-details {
        grid-template-columns: 1fr;
    }

    .paper-sheet--subcontractor-sheet .receipt-key-details div {
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .bench-sheet-primary,
    .bench-sheet-secondary {
        grid-template-columns: 1fr;
    }

    .paper-sheet--bench-sheet {
        margin-top: 16px;
        padding: 18px;
    }

    .permission-group-grid {
        grid-template-columns: 1fr;
    }

    .repair-resource-settings,
    .repair-resource-settings-row {
        grid-template-columns: 1fr;
    }

    .repair-resource-settings-row .field-wide {
        grid-column: 1;
    }

    .receipt-key-details div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .customer-progress-hero,
    .customer-progress-grid,
    .customer-progress-list div {
        grid-template-columns: 1fr;
    }
}

@media print {
    .no-print,
    .topbar {
        display: none !important;
    }

    body {
        background: #ffffff;
    }

    .page-shell,
    .content {
        padding: 0;
    }

    .paper-sheet {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .paper-sheet--jobsheet-receipt {
        font-size: 8.5pt;
        gap: 9px;
        margin: 0;
        min-height: 0;
        width: auto;
    }

    .paper-sheet--subcontractor-sheet {
        font-size: 8pt;
        gap: 9px;
        margin: 0;
        min-height: 0;
        padding: 0;
        width: auto;
    }

    .paper-sheet--subcontractor-sheet .receipt-key-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .paper-sheet--jobsheet-receipt .terms-box {
        font-size: 6.4pt;
        line-height: 1.18;
    }

    .paper-sheet--jobsheet-receipt .jobsheet-receipt-header {
        grid-template-columns: minmax(0, 1fr) 190px;
    }

    .paper-sheet--jobsheet-receipt .jobsheet-receipt-business {
        justify-items: end;
        text-align: right;
    }

    .paper-sheet--jobsheet-receipt .signature-pad {
        height: 82px;
    }

    .paper-sheet--bench-sheet {
        box-shadow: none;
        font-size: 7pt;
        gap: 7px;
        margin: 0;
        min-height: 0;
        padding: 0;
        width: auto;
    }

    .bench-sheet-primary {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    }

    .bench-sheet-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bench-sheet-list {
        gap: 0;
        padding: 2px 1px;
    }

    .bench-sheet-list__item {
        line-height: 1.12;
        padding: 0;
    }
}

.dashboard-sales-documents__actions,
.dashboard-sales-document-row__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dashboard-sales-documents__grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-sales-documents__column {
    border: 1px solid var(--border, #d7dee8);
    border-radius: 6px;
    min-width: 0;
    overflow: hidden;
}

.dashboard-sales-documents__column > header {
    align-items: center;
    background: color-mix(in srgb, var(--status-colour, #334155) 10%, #ffffff);
    border-bottom: 1px solid var(--border, #d7dee8);
    color: var(--text, #18181b);
    display: flex;
    justify-content: space-between;
    padding: 7px 9px;
}

.dashboard-sales-documents__column > header span {
    align-items: center;
    background: var(--status-colour, #334155);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 850;
    height: 22px;
    justify-content: center;
    min-width: 22px;
    padding: 0 6px;
}

.dashboard-sales-documents__rows {
    display: grid;
}

.dashboard-sales-document-row {
    align-items: center;
    border-bottom: 1px solid var(--border, #e2e8f0);
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(92px, 1fr) auto auto auto;
    padding: 7px 8px;
}

.dashboard-sales-document-row:last-child {
    border-bottom: 0;
}

.dashboard-sales-document-row__identity {
    display: grid;
    gap: 1px;
    min-width: 0;
    text-decoration: none;
}

.dashboard-sales-document-row__identity small {
    color: var(--muted-text, #64748b);
}

.dashboard-sales-document-row__total {
    text-align: right;
    white-space: nowrap;
}

.dashboard-sales-documents__empty {
    color: var(--muted-text, #64748b);
    padding: 12px;
}

.dashboard-job-sales {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    padding: 0;
}

.dashboard-job-sales__top {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job-sales-pane,
.job-sales-ledger {
    min-width: 0;
}

.job-sales-pane {
    background: #ffffff;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
    overflow: hidden;
    padding: 0 10px 10px;
}

.job-sales-pane__title {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-height: 38px;
    padding: 7px 10px;
}

.job-sales-cart > .job-sales-pane__title {
    background: #0f766e;
    color: #ffffff;
    margin: 0 -10px 10px;
}

.job-sales-invoicing > .job-sales-pane__title {
    background: #1d4ed8;
    color: #ffffff;
    margin: 0 -10px 10px;
}

.job-sales-pane__title h3 {
    font-size: .96rem;
    margin: 0;
}

.job-sales-pane__title > span {
    color: inherit;
    font-size: .76rem;
    font-weight: 750;
}

.job-sales-table-wrap {
    overflow-x: auto;
}

.job-sales-table {
    border-collapse: collapse;
    font-size: .78rem;
    width: 100%;
}

.job-sales-table th {
    background: #334155;
    color: #ffffff;
    font-size: .69rem;
    font-weight: 850;
    padding: 6px;
    text-align: left;
    text-transform: uppercase;
}

.job-sales-table td {
    background: #ffffff;
    border-bottom: 1px solid #cbd5e1;
    padding: 7px 6px;
    vertical-align: top;
}

.job-sales-table tbody tr:nth-child(even) td {
    background: #f1f5f9;
}

.job-sales-cart-table th:nth-child(n+2),
.job-sales-cart-table td:nth-child(n+2) {
    text-align: right;
    white-space: nowrap;
}

.job-sales-cart-table td:first-child {
    width: 100%;
}

.job-sales-row-editor summary {
    cursor: pointer;
    display: grid;
    gap: 2px;
    list-style-position: outside;
}

.job-sales-row-editor summary small,
.job-sales-document-card__meta {
    color: var(--muted-text, #64748b);
    font-size: .69rem;
}

.job-sales-inline-form {
    align-items: end;
    background: #e2e8f0;
    border: 1px solid #94a3b8;
    border-radius: 5px;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(120px, 2fr) minmax(90px, 1fr) 64px 84px 64px auto;
    margin-top: 6px;
    padding: 7px;
}

.job-sales-inline-form label,
.job-sales-form label {
    color: var(--muted-text, #64748b);
    display: grid;
    font-size: .67rem;
    font-weight: 750;
    gap: 3px;
    min-width: 0;
}

.job-sales-inline-form--special {
    grid-template-columns: repeat(6, minmax(90px, 1fr));
    min-width: 760px;
}

.job-sales-inline-form input,
.job-sales-form input,
.job-sales-form select {
    min-width: 0;
    padding: 6px 7px;
}

.job-sales-cart__footer {
    align-items: center;
    background: #ccfbf1;
    border: 1px solid #5eead4;
    border-top: 0;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 8px;
}

.job-sales-cart__footer > span {
    font-size: .86rem;
    font-weight: 750;
}

.is-disabled[aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
}

.job-sales-proforma {
    align-items: center;
    background: #dbeafe;
    border: 1px solid #60a5fa;
    border-radius: 5px;
    color: var(--text, #1f2937);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    margin: 0 0 8px;
    padding: 8px 10px;
    text-decoration: none;
}

.job-sales-proforma::before {
    content: var(--currency-symbol, "¤");
    color: var(--status-colour, #16a34a);
    font-size: 1rem;
    margin-right: 6px;
}

.job-sales-documents {
    display: grid;
    gap: 7px;
}

.job-sales-document-card {
    background: #fef3c7;
    border: 1px solid #d97706;
    border-radius: 5px;
    overflow: hidden;
}

.job-sales-document-card--quotation {
    background: #dbeafe;
    border-color: #2563eb;
}

.job-sales-document-card header,
.job-sales-document-card__meta,
.job-sales-document-card footer {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 6px 8px;
}

.job-sales-document-card header a {
    color: inherit;
    text-decoration: none;
}

.job-sales-document-card footer {
    background: #fde68a;
    border-top: 1px solid #f59e0b;
    justify-content: flex-start;
}

.job-sales-document-card--quotation footer {
    background: #bfdbfe;
    border-top-color: #60a5fa;
}

.job-sales-document-card footer a,
.job-sales-document-card footer button {
    background: transparent;
    border: 0;
    color: var(--text, #334155);
    cursor: pointer;
    font-size: .7rem;
    font-weight: 800;
    padding: 0;
    text-decoration: none;
}

.job-sales-ledger {
    background: #ffffff;
    border: 1px solid #86efac;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .1);
    margin-top: 16px;
    overflow: hidden;
}

.job-sales-bar,
.job-sales-add > summary {
    background: #15803d;
    color: #ffffff;
    font-size: .77rem;
    font-weight: 850;
    padding: 7px 9px;
}

.job-sales-bar {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.job-sales-add {
    background: #ffffff;
    border: 1px solid #fdba74;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .1);
    margin-top: 16px;
    overflow: hidden;
}

.job-sales-add > summary {
    background: #9a3412;
    cursor: pointer;
    list-style-position: inside;
}

.job-sales-add__grid {
    background: #fff7ed;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
}

.job-sales-form {
    align-items: end;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 9px;
}

.job-sales-form h4 {
    grid-column: 1 / -1;
    margin: 0;
}

.job-sales-form .job-sales-form__title {
    align-items: center;
    display: flex;
    font-size: 1rem;
    gap: 10px;
    min-height: 56px;
}

.job-sales-form__title-icon {
    align-items: center;
    background: color-mix(in srgb, var(--status-colour, #334155) 14%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--status-colour, #334155) 48%, #cbd5e1);
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 4px rgba(15, 23, 42, .12);
    color: var(--status-colour, #334155);
    display: inline-flex;
    flex: 0 0 56px;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.job-sales-form__title-icon svg {
    fill: none;
    height: 36px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 36px;
}

.job-sales-form__title-icon--deposit {
    background: color-mix(in srgb, #15803d 13%, #ffffff);
    border-color: color-mix(in srgb, #15803d 44%, #cbd5e1);
    color: #15803d;
}

.job-sales-form__wide {
    grid-column: span 2;
}

.dashboard-special-orders {
    background: #ffffff;
    border: 1px solid #a78bfa;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
    margin-top: 18px;
    overflow: hidden;
    padding: 0 10px 10px;
}

.dashboard-special-orders > .job-sales-pane__title {
    background: #6d28d9;
    color: #ffffff;
    margin: 0 -10px 10px;
}

.dashboard-special-orders .job-sales-table th {
    background: #4c1d95;
}

.dashboard-special-orders .job-sales-add {
    border-color: #c4b5fd;
}

.dashboard-special-orders .job-sales-add > summary {
    background: #5b21b6;
}

.dashboard-special-orders .job-sales-form--special {
    background: #f5f3ff;
}

.job-sales-form--special {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 10px;
}

.job-sales-special-table__actions {
    align-items: center;
    display: flex;
    gap: 5px;
    white-space: nowrap;
}

.job-sales-special-table__part > strong {
    display: block;
}

.job-sales-special-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.job-sales-special-actions > form {
    align-items: center;
    display: flex;
    margin: 0;
}

.job-sales-special-editor-toggle {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.job-sales-special-editor {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    margin: 0;
    min-width: 0;
    width: 100%;
}

.job-sales-special-editor-row {
    display: none;
}

.job-sales-special-editor-row > td {
    background: color-mix(in srgb, var(--sales-soft, #f3f7e9) 88%, #ffffff) !important;
    padding: 0 7px 7px;
}

.job-sales-special-table tr:has(.job-sales-special-editor-toggle:checked) + .job-sales-special-editor-row {
    display: table-row;
}

.job-sales-special-action {
    appearance: none;
    align-items: center;
    background: #dbe9a6;
    border: 1px solid #c3d780;
    border-radius: 2px;
    color: #34402a;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: .65rem;
    font-weight: 750;
    gap: 4px;
    height: 23px;
    justify-content: center;
    line-height: 1;
    margin: 0;
    min-height: 23px;
    padding: 0 5px;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    width: max-content;
}

.job-sales-special-action.job-sales-special-url {
    width: 23px;
    min-width: 23px;
    padding: 0;
}

.job-sales-special-controls {
    grid-column: 1 / -1;
}

.job-sales-special-controls .job-sales-special-actions {
    justify-content: flex-end;
    margin-top: 0;
}

.job-sales-special-action svg {
    fill: none;
    height: 14px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 14px;
}

.job-sales-special-editor-toggle:checked + .job-sales-special-action,
.job-sales-special-action:hover,
.job-sales-special-action:focus-visible {
    background: #cbdc8d;
    border-color: #adc568;
}

.job-sales-added {
    color: #15803d;
    font-size: .7rem;
    font-weight: 850;
}

.job-sales-empty {
    color: var(--muted-text, #64748b);
    padding: 10px !important;
}

.job-sales-empty--panel {
    background: #eff6ff;
    border: 1px dashed #60a5fa;
    border-radius: 5px;
}

@media (max-width: 980px) {
    .dashboard-job-sales__top,
    .job-sales-add__grid {
        grid-template-columns: 1fr;
    }

    .job-sales-form--special {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .job-sales-inline-form,
    .job-sales-form,
    .job-sales-form--special {
        grid-template-columns: 1fr 1fr;
    }

    .job-sales-form h4,
    .job-sales-form__wide {
        grid-column: 1 / -1;
    }
}

.job-sales-choice-panel,
.job-sales-no-charge {
    background: #ffffff;
    border: 1px solid var(--sales-line);
    border-radius: 5px;
    padding: 10px;
}

.job-sales-choice-panel h4,
.job-sales-no-charge h4 {
    color: #465031;
    font-size: .9rem;
    margin: 0 0 8px;
}

.job-sales-quick-labour-row {
    align-items: center;
    border-top: 1px solid color-mix(in srgb, var(--sales-line) 60%, transparent);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 7px 0;
}

.job-sales-quick-labour-row span {
    font-size: .78rem;
    font-weight: 700;
}

.job-sales-quick-labour-row strong {
    color: #465031;
    font-size: .78rem;
    white-space: nowrap;
}

.job-sales-choice-panel__empty,
.job-sales-no-charge p {
    color: var(--muted-text, #64748b);
    font-size: .72rem;
    margin: 0 0 10px;
}

.job-sales-no-charge label {
    display: grid;
    font-size: .7rem;
    font-weight: 700;
    gap: 4px;
}

.job-sales-no-charge textarea {
    min-height: 66px;
    resize: vertical;
}

.job-sales-no-charge .button {
    margin-top: 9px;
}

.settings-quick-labour {
    background: rgba(248, 250, 252, .98);
    border-color: #cbd5e1;
    color: #111827;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 18px;
    overflow: hidden;
    padding: 0;
}

.settings-quick-labour > .form-section__head {
    align-items: center;
    background: #eef2f7;
    border-bottom: 1px solid #cbd5e1;
    display: flex;
    justify-content: space-between;
    padding: 13px 16px;
}

.settings-quick-labour > .field-hint {
    color: #475569;
    margin: 0;
    padding: 13px 16px 0;
}

.settings-module-add {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.settings-module-add svg {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
    width: 16px;
}

.settings-quick-labour__rows {
    display: grid;
    gap: 7px;
    padding: 13px 16px;
}

.settings-quick-labour__row {
    align-items: end;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(260px, 1fr) minmax(140px, 190px) minmax(90px, auto) 38px;
    padding: 10px;
}

.settings-quick-labour__row > label:not(.settings-quick-labour__active) {
    display: grid;
    font-size: .7rem;
    font-weight: 700;
    gap: 4px;
}

.settings-quick-labour__row input[type="text"],
.settings-quick-labour__row input[type="number"],
.settings-quick-labour__row input:not([type]) {
    background: #ffffff;
    border-color: #b8c5d4;
    color: #111827;
    opacity: 1;
}

.settings-quick-labour__active {
    align-items: center;
    display: flex;
    font-size: .76rem;
    font-weight: 750;
    gap: 5px;
    min-height: 34px;
}

.settings-quick-labour > .submit-bar {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    justify-content: flex-end;
    padding: 0 16px 16px;
}

@media (max-width: 980px) {
    .job-sales-builder__actions {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .job-sales-builder__actions,
    .settings-quick-labour__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-quick-labour__row > .icon-square-button {
        justify-self: end;
    }
}

@media (max-width: 1200px) {
    .dashboard-sales-document-row {
        grid-template-columns: minmax(92px, 1fr) auto auto;
    }

    .dashboard-sales-document-row__actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .dashboard-sales-documents__grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 821px) {
    .topbar__inner:has(.dashboard-topbar-tools) {
        grid-template-columns: 204px minmax(0, 1fr) auto;
        min-height: 50px;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .topbar__center,
    .topbar__inner:has(.dashboard-topbar-tools) .dashboard-quicklinks {
        max-width: none;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .dashboard-search--topbar {
        flex-basis: 220px;
        max-width: 220px;
        min-width: 220px;
    }
}

@media (min-width: 821px) and (max-width: 1500px) {
    .topbar__inner:has(.dashboard-topbar-tools) {
        grid-template-columns: 168px minmax(0, 1fr) auto;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .brand-hub,
    .topbar__inner:has(.dashboard-topbar-tools) .brand {
        width: 168px;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .dashboard-search--topbar {
        flex: 1 1 200px;
        margin-left: 8px;
        max-width: 220px;
        min-width: 140px;
    }

    .dashboard-delivery-shortcut {
        margin-left: 8px;
    }

    .dashboard-cart-shortcut,
    .dashboard-delivery-shortcut {
        min-width: 42px;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .nav__trigger,
    .topbar__inner:has(.dashboard-topbar-tools) .nav__button {
        padding-left: 8px;
        padding-right: 8px;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .nav__group--right > .nav__trigger {
        width: 44px;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .nav__group--right > .nav__trigger > span {
        display: none;
    }
}

@media (min-width: 821px) and (max-width: 1199px) {
    .dashboard-topbar-tools .dashboard-quicklink {
        flex: 0 0 44px;
        padding: 0;
        width: 44px;
    }

    .dashboard-topbar-tools .dashboard-quicklink > span {
        display: none;
    }
}

@media (min-width: 821px) and (max-width: 1150px) {
    .topbar__inner:has(.dashboard-topbar-tools) {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        padding-right: 6px;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .brand-hub,
    .topbar__inner:has(.dashboard-topbar-tools) .brand {
        padding: 0;
        width: 58px;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .brand__text {
        display: none;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .dashboard-search--topbar {
        flex-basis: 160px;
        max-width: 180px;
        min-width: 110px;
    }

    .dashboard-delivery-shortcut__van {
        width: 44px;
    }

    .dashboard-cart-shortcut__cart {
        width: 34px;
    }
}

@media (min-width: 821px) {
    .dashboard-topbar-tools:has(.dashboard-search--topbar) {
        width: 100%;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .dashboard-search--topbar {
        flex-grow: 0;
        margin-left: auto;
    }

    .dashboard-topbar-tools:has(.dashboard-search--topbar) .dashboard-cart-shortcut {
        margin-right: auto;
    }
}

@media (max-width: 820px) {
    .topbar__inner:has(.dashboard-topbar-tools) {
        align-items: stretch;
        gap: 8px;
        padding: 8px;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .brand-hub,
    .topbar__inner:has(.dashboard-topbar-tools) .brand {
        width: 100%;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .brand {
        border: 0;
        justify-content: flex-start;
        min-height: 44px;
        padding: 0;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .topbar__center {
        width: 100%;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .dashboard-topbar-tools {
        display: grid;
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        height: auto;
        width: 100%;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .dashboard-quicklinks {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 100%;
    }

    .dashboard-topbar-tools .dashboard-quicklink {
        min-height: 40px;
        padding: 0;
    }

    .dashboard-topbar-tools .dashboard-quicklink > span {
        display: none;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .dashboard-search--topbar {
        flex: none;
        margin: 0;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    .dashboard-cart-shortcut,
    .dashboard-delivery-shortcut {
        margin: 0;
        min-height: 38px;
        min-width: 44px;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .nav {
        justify-content: stretch;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .nav > .nav__trigger,
    .topbar__inner:has(.dashboard-topbar-tools) .nav > .nav__group--right {
        flex: 1 1 0;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .nav__group--right > .nav__trigger {
        width: 100%;
    }

    .topbar__inner:has(.dashboard-topbar-tools) .nav__group--right > .nav__trigger > span {
        display: none;
    }
}

body[class*="theme-"] .jobsheet-detached-submit {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.submit-bar.jobsheet-detached-submit,
body[class*="theme-"] .submit-bar.jobsheet-detached-submit {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.dashboard-activity-module {
    border-color: var(--card-border-colour, var(--theme-header-bg, #1d8bf2));
}

.dashboard-activity-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.76fr) minmax(520px, 1.24fr);
    gap: 12px;
    align-items: stretch;
}

.dashboard-activity-picker,
.dashboard-activity-list {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    padding: 10px;
}

.dashboard-activity-picker {
    display: grid;
    gap: 10px;
}

.dashboard-activity-picker__group {
    --activity-accent: var(--theme-header-bg, #2563eb);
    background: color-mix(in srgb, #ffffff 90%, var(--activity-accent));
    border: 1px solid color-mix(in srgb, #cbd5e1 72%, var(--activity-accent));
    border-left: 5px solid var(--activity-accent);
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    display: grid;
    gap: 7px;
    padding: 8px;
}

.dashboard-activity-picker__group:nth-of-type(1) {
    --activity-accent: #2563eb;
}

.dashboard-activity-picker__group:nth-of-type(2) {
    --activity-accent: #0f9f6e;
}

.dashboard-activity-picker__group:nth-of-type(3) {
    --activity-accent: #7c3aed;
}

.dashboard-activity-picker__group h4 {
    background: color-mix(in srgb, var(--activity-accent) 14%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--activity-accent) 34%, #ffffff);
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: color-mix(in srgb, var(--activity-accent) 70%, #0f172a);
    font-size: 12px;
    line-height: 1.2;
    margin: 0;
    min-height: 28px;
    padding: 5px 7px;
}

.dashboard-activity-default-buttons {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-activity-default-button {
    background: color-mix(in srgb, var(--activity-accent) 18%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--activity-accent) 44%, #ffffff);
    border-radius: 5px;
    color: color-mix(in srgb, var(--activity-accent) 76%, #0f172a);
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
    min-height: 26px;
    padding: 4px 5px;
}

.dashboard-activity-default-button:hover,
.dashboard-activity-default-button:focus-visible {
    background: color-mix(in srgb, var(--activity-accent) 28%, #ffffff);
    outline: 1px solid color-mix(in srgb, var(--activity-accent) 64%, #ffffff);
}

.dashboard-activity-default-button:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.dashboard-activity-choice-list {
    display: grid;
    gap: 4px;
    max-height: 164px;
    overflow: auto;
    border: 1px solid color-mix(in srgb, #dbeafe 70%, var(--activity-accent));
    border-radius: 6px;
    background: color-mix(in srgb, #f8fafc 90%, var(--activity-accent));
    padding: 5px;
}

.dashboard-activity-choice {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
    border: 0;
    border-radius: 4px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    padding: 4px 6px;
    cursor: pointer;
}

.dashboard-activity-choice:hover,
.dashboard-activity-choice:focus-visible {
    background: color-mix(in srgb, #ffffff 76%, var(--activity-accent));
    outline: 1px solid color-mix(in srgb, var(--activity-accent) 58%, #ffffff);
}

.dashboard-activity-choice__icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: color-mix(in srgb, #e2e8f0 70%, var(--activity-accent));
    overflow: hidden;
    font-size: 18px;
}

.dashboard-activity-choice__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.dashboard-activity-picker__row {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.dashboard-activity-picker__row label,
.dashboard-activity-picker__custom label,
.dashboard-activity-picker__note label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0f172a;
    font-weight: 700;
    font-size: 12px;
}

.dashboard-activity-picker select,
.dashboard-activity-picker input,
.dashboard-activity-picker textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    padding: 8px 9px;
}

.dashboard-activity-picker select {
    min-height: 38px;
}

.dashboard-activity-picker__custom {
    background: color-mix(in srgb, var(--surface, #ffffff) 94%, var(--theme-header-bg, #2563eb));
    border: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 78%, var(--theme-header-bg, #2563eb));
    border-radius: 7px;
    display: grid;
    grid-template-columns: 95px minmax(90px, 0.5fr) minmax(130px, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
}

.dashboard-activity-picker__note {
    background: color-mix(in srgb, var(--surface, #ffffff) 94%, #475569);
    border: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 78%, #475569);
    border-radius: 7px;
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    padding: 8px;
}

.dashboard-activity-list {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
    max-height: none;
    overflow: visible;
}

.dashboard-activity-list__column,
.dashboard-activity-list__notes {
    --activity-accent: var(--theme-header-bg, #2563eb);
    background: color-mix(in srgb, #ffffff 92%, var(--activity-accent));
    border: 1px solid color-mix(in srgb, #cbd5e1 76%, var(--activity-accent));
    border-radius: 7px;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 7px;
}

.dashboard-activity-list__column--scan {
    --activity-accent: #2563eb;
}

.dashboard-activity-list__column--action {
    --activity-accent: #0f9f6e;
}

.dashboard-activity-list__column--install {
    --activity-accent: #7c3aed;
}

.dashboard-activity-list__notes {
    --activity-accent: #475569;
}

.dashboard-activity-list__column h4,
.dashboard-activity-list__notes h4 {
    align-items: center;
    background: color-mix(in srgb, var(--activity-accent) 16%, #ffffff);
    border-radius: 5px;
    color: color-mix(in srgb, var(--activity-accent) 72%, #0f172a);
    display: flex;
    font-size: 12px;
    gap: 6px;
    line-height: 1;
    margin: 0 0 2px;
    min-height: 28px;
    padding: 4px 6px;
}

.dashboard-activity-list__empty {
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
    margin: 0;
    padding: 5px 2px;
}

.dashboard-activity-list__entry-tools {
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: 8px;
    margin-top: 2px;
    padding-top: 8px;
}

.dashboard-activity-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: start;
    border: 1px solid #dbeafe;
    border-left: 4px solid var(--theme-header-bg, #2563eb);
    border-radius: 6px;
    background: #f8fafc;
    padding: 8px;
}

.dashboard-activity-list__column .dashboard-activity-item,
.dashboard-activity-list__notes .dashboard-activity-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 7px;
}

.dashboard-activity-item strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.25;
}

.dashboard-activity-item small {
    display: block;
    color: #64748b;
    font-size: 11px;
    line-height: 1.3;
    margin-top: 2px;
}

.dashboard-activity-item p {
    color: #334155;
    font-size: 12px;
    line-height: 1.35;
    margin: 5px 0 0;
    white-space: pre-wrap;
}

.dashboard-activity-item--scan {
    border-left-color: #2563eb;
}

.dashboard-activity-item--action {
    border-left-color: #0f9f6e;
}

.dashboard-activity-item--install {
    border-left-color: #7c3aed;
}

.dashboard-activity-item--note {
    border-left-color: #475569;
}

.dashboard-activity-picker__icon,
.dashboard-activity-item__icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #e2e8f0;
}

.dashboard-activity-item__icon {
    width: 30px;
    height: 30px;
}

.dashboard-activity-picker__icon::before,
.dashboard-activity-item__icon::before {
    font-size: 15px;
    line-height: 1;
}

.dashboard-activity-picker__icon--scan,
.dashboard-activity-item__icon--bug {
    background: #dbeafe;
    color: #1d4ed8;
}

.dashboard-activity-picker__icon--action,
.dashboard-activity-item__icon--wrench {
    background: #dcfce7;
    color: #047857;
}

.dashboard-activity-picker__icon--install,
.dashboard-activity-item__icon--download {
    background: #ede9fe;
    color: #6d28d9;
}

.dashboard-activity-picker__icon--note,
.dashboard-activity-item__icon--message {
    background: #e2e8f0;
    color: #334155;
}

.dashboard-activity-picker__icon--scan::before,
.dashboard-activity-item__icon--bug::before {
    content: "☣";
}

.dashboard-activity-picker__icon--action::before,
.dashboard-activity-item__icon--wrench::before {
    content: "🔧";
}

.dashboard-activity-picker__icon--install::before,
.dashboard-activity-item__icon--download::before {
    content: "⬇";
}

.dashboard-activity-picker__icon--note::before,
.dashboard-activity-item__icon--message::before {
    content: "●";
}

.workbench-activity-settings-grid {
    display: grid;
    gap: 8px;
}

.customisation-form .workbench-activity-settings {
    grid-template-columns: 1fr;
}

.workbench-activity-settings-columns {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workbench-activity-tabs {
    align-items: center;
    background: color-mix(in srgb, var(--surface, #fff) 94%, var(--card-header-bg, #334155));
    border: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 82%, var(--card-header-bg, #334155));
    border-radius: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
}

.workbench-activity-tabs .button-secondary.is-active {
    background: var(--card-header-bg, var(--primary, #334155));
    border-color: var(--card-header-bg, var(--primary, #334155));
    color: var(--card-header-text, #ffffff);
}

.workbench-activity-settings-pages {
    display: grid;
    gap: 10px;
}

.workbench-activity-settings-page {
    --workbench-activity-accent: #2563eb;
    background: color-mix(in srgb, #ffffff 92%, var(--workbench-activity-accent));
    border: 1px solid color-mix(in srgb, #cbd5e1 76%, var(--workbench-activity-accent));
    border-left: 5px solid var(--workbench-activity-accent);
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 10px;
}

.workbench-activity-settings-page--scan {
    --workbench-activity-accent: #2563eb;
}

.workbench-activity-settings-page--action {
    --workbench-activity-accent: #0f9f6e;
}

.workbench-activity-settings-page--install {
    --workbench-activity-accent: #7c3aed;
}

.workbench-activity-page-head {
    align-items: center;
    background: color-mix(in srgb, var(--workbench-activity-accent) 16%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--workbench-activity-accent) 34%, #ffffff);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    min-height: 28px;
    padding: 5px 7px;
}

.workbench-activity-page-head h3 {
    color: color-mix(in srgb, var(--workbench-activity-accent) 72%, #0f172a);
    font-size: 14px;
    margin: 0;
}

.workbench-activity-page-head span {
    color: color-mix(in srgb, var(--workbench-activity-accent) 58%, #475569);
    font-size: 12px;
    font-weight: 800;
}

.workbench-activity-settings-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 58px;
    gap: 6px;
    align-items: end;
    border: 1px solid color-mix(in srgb, #cbd5e1 76%, var(--workbench-activity-accent));
    border-radius: 6px;
    background: #ffffff;
    padding: 7px;
}

.workbench-activity-settings-icon-cell {
    align-items: center;
    display: grid;
    gap: 4px;
    justify-items: center;
}

.workbench-activity-settings-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    align-self: center;
    border-radius: 4px;
    background: color-mix(in srgb, #e2e8f0 70%, var(--workbench-activity-accent));
    overflow: hidden;
    font-size: 18px;
}

.workbench-activity-settings-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.workbench-activity-icon-actions {
    display: flex;
    gap: 5px;
}

.workbench-activity-icon-edit {
    cursor: pointer;
    display: inline-flex;
}

.workbench-activity-icon-edit input {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.workbench-activity-settings-emoji,
.workbench-activity-settings-order,
.workbench-activity-active-toggle {
    min-width: 0;
}

.workbench-activity-title-stack {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.workbench-activity-row-topline {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    min-height: 22px;
}

.workbench-activity-default-selectors {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: center;
}

.workbench-activity-default-selectors label {
    align-items: center;
    background: color-mix(in srgb, var(--workbench-activity-accent) 12%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--workbench-activity-accent) 34%, #ffffff);
    border-radius: 4px;
    color: color-mix(in srgb, var(--workbench-activity-accent) 76%, #0f172a);
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    gap: 3px;
    line-height: 1;
    min-height: 22px;
    padding: 3px 4px;
}

.workbench-activity-default-selectors input {
    height: 11px;
    margin: 0;
    width: 11px;
}

.workbench-activity-active-toggle {
    align-self: center;
    font-size: 11px;
    font-weight: 850;
    justify-self: center;
    margin: 0;
    white-space: nowrap;
}

.workbench-activity-row-actions {
    align-self: end;
    display: grid;
    gap: 5px;
}

.workbench-activity-row-actions .field {
    gap: 2px;
}

.workbench-activity-row-actions .field span {
    font-size: 10px;
}

.workbench-activity-row-actions input {
    min-height: 28px;
    padding: 3px 5px;
    text-align: center;
}

.workbench-activity-upload-card {
    border: 1px solid color-mix(in srgb, #cbd5e1 76%, var(--workbench-activity-accent));
    border-radius: 6px;
    background: color-mix(in srgb, #f8fafc 90%, var(--workbench-activity-accent));
    padding: 12px;
}

.workbench-activity-upload-card--compact {
    margin-top: auto;
}

.workbench-activity-upload-card h3 {
    color: color-mix(in srgb, var(--workbench-activity-accent) 70%, #0f172a);
    font-size: 14px;
    margin: 0 0 10px;
}

.workbench-activity-upload-target {
    background: color-mix(in srgb, var(--surface, #fff) 92%, var(--card-header-bg, #334155));
    border: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 82%, var(--card-header-bg, #334155));
    border-radius: 6px;
    color: var(--text, #18181b);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 10px;
    padding: 7px 9px;
}

.workbench-activity-upload-target strong {
    color: var(--card-header-bg, var(--primary, #334155));
}

.workbench-activity-upload-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.workbench-activity-upload-card--compact .button {
    width: 100%;
}

@media (max-width: 1100px) {
    .dashboard-activity-grid,
    .dashboard-activity-list,
    .dashboard-activity-picker__row,
    .dashboard-activity-picker__custom,
    .dashboard-activity-picker__note,
    .workbench-activity-settings-row,
    .workbench-activity-upload-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .workbench-activity-settings-columns {
        grid-template-columns: 1fr;
    }
}



.repair-warning-settings-list {
    display: grid;
    gap: 12px;
}

.repair-warning-settings-row,
.repair-warning-add-card {
    background: color-mix(in srgb, #ffffff 94%, var(--card-header-bg, #334155));
    border: 1px solid color-mix(in srgb, #cbd5e1 72%, var(--card-header-bg, #334155));
    border-radius: 6px;
    display: grid;
    overflow: hidden;
}

.repair-warning-settings-row {
    border-left: 4px solid var(--card-header-bg, #334155);
}

.repair-warning-settings-row__head,
.repair-warning-add-card__head {
    align-items: center;
    background: color-mix(in srgb, var(--card-header-bg, #334155) 9%, #ffffff);
    border-bottom: 1px solid color-mix(in srgb, #cbd5e1 78%, var(--card-header-bg, #334155));
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 42px;
    padding: 7px 10px;
}

.repair-warning-settings-row__head > strong {
    color: color-mix(in srgb, var(--card-header-bg, #334155) 78%, #0f172a);
    font-size: .82rem;
}

.repair-warning-settings-row__controls {
    align-items: center;
    display: flex;
    gap: 8px;
}

.repair-warning-copy-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(200px, .7fr) minmax(320px, 1.3fr);
    padding: 10px;
}

.repair-warning-copy-grid .field,
.repair-warning-match-grid .field,
.repair-warning-add-grid .field {
    margin: 0;
    min-width: 0;
}

.repair-warning-match-section {
    border-top: 1px solid color-mix(in srgb, #cbd5e1 80%, var(--card-header-bg, #334155));
    padding: 9px 10px 10px;
}

.repair-warning-match-section__head {
    align-items: baseline;
    display: flex;
    gap: 8px;
    margin-bottom: 7px;
}

.repair-warning-match-section__head strong {
    color: var(--text, #18181b);
    font-size: .78rem;
}

.repair-warning-match-section__head span,
.repair-warning-add-card__head span {
    color: var(--muted, #64748b);
    font-size: .72rem;
}

.repair-warning-match-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(90px, .35fr);
}

.repair-warning-add-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(90px, .35fr);
    padding: 10px;
}

.repair-warning-add-grid > :first-child {
    grid-column: span 1;
}

.repair-warning-add-grid .repair-warning-body-field {
    grid-column: span 3;
}

.repair-warning-body-field textarea {
    min-height: 72px;
    resize: vertical;
}

.repair-warning-order-field input {
    max-width: 90px;
}

.repair-warning-active-toggle {
    align-items: center;
    border-radius: 4px;
    display: inline-flex;
    min-height: 28px;
    margin: 0;
    padding: 4px 8px;
}

.repair-warning-active-toggle {
    background: color-mix(in srgb, #dcfce7 75%, #ffffff);
    border: 1px solid #86efac;
    color: #166534;
    font-weight: 800;
}

.repair-warning-card-action {
    border-radius: 4px;
    height: 32px;
    min-height: 32px;
    width: 32px;
}

.repair-warning-card-action svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 15px;
}

.repair-warning-add-card h3 {
    color: color-mix(in srgb, var(--card-header-bg, #334155) 78%, #0f172a);
    font-size: .95rem;
    margin: 0;
}

.repair-warning-add-card .button {
    justify-self: end;
    margin: 0 10px 10px;
}

@media (max-width: 1100px) {
    .repair-warning-match-grid,
    .repair-warning-add-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .repair-warning-add-grid .repair-warning-body-field {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .repair-warning-copy-grid,
    .repair-warning-match-grid,
    .repair-warning-add-grid {
        grid-template-columns: 1fr;
    }

    .repair-warning-settings-row__head,
    .repair-warning-add-card__head,
    .repair-warning-match-section__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .repair-warning-settings-row__controls {
        align-items: stretch;
        flex-wrap: wrap;
        width: 100%;
    }

    .repair-warning-add-grid .repair-warning-body-field {
        grid-column: auto;
    }
}

/* Quotations and invoices */
.sales-documents-page,
.sales-document-form,
.sales-document-show-page {
    width: 100%;
}

.sales-document-show-page {
    gap: 14px;
}

.sales-document-show-page > .notice {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: 210mm;
    width: 100%;
}

.sales-document-form {
    gap: 14px;
    margin: 0 auto;
    max-width: 210mm;
}

.sales-document-toolbar,
.sales-document-approval {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-left: 4px solid var(--accent, #2563eb);
    border-radius: 7px;
    margin: 0 auto;
    max-width: 210mm;
    width: 100%;
}

.sales-document-toolbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 58px;
    padding: 8px 10px 8px 14px;
}

.sales-document-toolbar__identity .eyebrow {
    font-size: .68rem;
    margin: 0 0 1px;
}

.sales-document-toolbar__identity .page-title {
    color: #111827;
    font-size: 1.55rem;
    line-height: 1;
    margin: 0;
}

.sales-document-toolbar__actions {
    justify-content: flex-end;
}

.sales-document-toolbar__actions form {
    margin: 0;
}

.sales-document-toolbar__actions .button,
.sales-document-toolbar__actions .button-secondary {
    min-height: 36px;
    padding: 7px 12px;
}

.sales-document-editor-paper {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .16);
    color: #172033;
    min-height: 297mm;
    padding: 12mm 13mm;
}

.sales-document-editor-paper .sales-document-editor-section {
    border: 0;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 0;
    margin-bottom: 18px;
    overflow: visible;
}

.sales-document-editor-paper .sales-document-section-bar {
    background: #eef2f7;
    border-left: 3px solid var(--card-header-bg, #334155);
    color: #172033;
    font-size: .76rem;
    letter-spacing: 0;
    padding: 7px 9px;
    text-transform: uppercase;
}

.sales-document-editor-paper .submit-bar {
    background: transparent;
    border: 0;
    border-radius: 0;
    border-top: 1px solid #cbd5e1;
    box-shadow: none;
    margin-top: 2px;
    min-height: 0;
    padding: 12px 0 0;
}

.sales-document-editor-paper .submit-bar .button,
.sales-document-editor-paper .submit-bar .button-secondary {
    min-height: 36px;
    padding: 7px 13px;
}

.sales-document-approval {
    overflow: hidden;
}

.sales-document-approval__head {
    align-items: center;
    background: #eef2f7;
    border-bottom: 1px solid #d7dee8;
    display: flex;
    justify-content: space-between;
    padding: 9px 12px;
}

.sales-document-approval__head h2 {
    font-size: 1rem;
    line-height: 1.2;
    margin: 1px 0 0;
}

.sales-document-approval__eyebrow {
    color: #64748b;
    display: block;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sales-document-approval > p[role="alert"] {
    margin: 10px 12px 0;
}

.sales-document-approval__form {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto;
    padding: 10px 12px;
}

.sales-document-approval__form .field {
    margin: 0;
}

.sales-document-approval__form > .button {
    min-height: 40px;
}

.sales-document-approval__photos {
    border: 1px solid #cbd5e1;
    margin: 0;
    min-height: 40px;
    padding: 4px 8px 7px;
}

.sales-document-approval__photos legend {
    color: #475569;
    font-size: .72rem;
    font-weight: 700;
    padding: 0 4px;
}

.sales-document-approval__photos label {
    align-items: center;
    display: inline-flex;
    font-size: .75rem;
    gap: 6px;
    margin: 3px 8px 3px 0;
}

.sales-document-approval__photos img {
    height: 34px;
    object-fit: cover;
    width: 46px;
}

.sales-document-approval__request {
    border-top: 1px solid #d7dee8;
    margin: 0 12px;
    padding: 10px 0;
}

.sales-document-filters {
    align-items: end;
    background: color-mix(in srgb, var(--surface, #ffffff) 94%, var(--card-header-bg, #334155));
    border: 1px solid var(--border, #d7dee8);
    border-radius: 7px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(280px, 1fr) minmax(170px, 230px) auto auto;
    padding: 10px;
}

.sales-document-filters .field,
.sales-document-meta-grid .field,
.sales-document-notes-grid .field {
    margin: 0;
}

.sales-document-list td,
.sales-document-list th {
    padding-bottom: 8px;
    padding-top: 8px;
    vertical-align: middle;
}

.money-cell {
    text-align: right;
    white-space: nowrap;
}

.sales-document-status {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    padding: 5px 8px;
    white-space: nowrap;
}

.sales-document-status--sent,
.sales-document-status--unpaid {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.sales-document-status--accepted,
.sales-document-status--paid,
.sales-document-status--converted {
    background: #ecfdf5;
    border-color: #86efac;
    color: #166534;
}

.sales-document-status--part_paid {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

.sales-document-status--declined,
.sales-document-status--expired,
.sales-document-status--void {
    background: #fff1f2;
    border-color: #fda4af;
    color: #9f1239;
}

.sales-document-editor-section {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #d7dee8);
    border-radius: 7px;
    overflow: hidden;
}

.sales-document-section-bar {
    background: var(--card-header-bg, #334155);
    color: #ffffff;
    font-size: .9rem;
    font-weight: 800;
    padding: 8px 11px;
}

.sales-document-section-bar--actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.sales-document-meta-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 11px;
}

.sales-document-editor-paper .sales-document-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 9px 16px;
}

.sales-document-editor-paper .sales-document-customer-field,
.sales-document-editor-paper .sales-document-jobsheet-field {
    grid-column: span 1;
}

.sales-customer-picker .customer-lookup__results {
    margin-top: 4px;
}

.sales-customer-picker .field-hint {
    margin: 5px 0 0;
    min-height: 1.1em;
}

.sales-document-customer-field,
.sales-document-jobsheet-field {
    grid-column: span 2;
}

.sales-line-table {
    border-collapse: collapse;
    min-width: 1040px;
    width: 100%;
}

.sales-line-table th,
.sales-line-table td {
    border-bottom: 1px solid var(--border, #d7dee8);
    padding: 6px;
    text-align: left;
    vertical-align: top;
}

.sales-line-table th {
    background: #f1f5f9;
    color: #334155;
    font-size: .74rem;
    text-transform: uppercase;
}

.sales-line-table input,
.sales-line-table select,
.sales-line-table textarea {
    min-width: 0;
    padding: 7px;
    width: 100%;
}

.sales-line-table textarea {
    min-height: 58px;
    resize: vertical;
}

.sales-line-table td:nth-child(2) { min-width: 260px; }
.sales-line-table td:nth-child(3) { width: 130px; }
.sales-line-table td:nth-child(4),
.sales-line-table td:nth-child(5),
.sales-line-table td:nth-child(6) { width: 95px; }
.sales-line-table td:nth-child(7) { width: 100px; }
.sales-line-table td:last-child { width: 42px; }

.sales-line-source {
    display: grid;
    gap: 5px;
    min-width: 190px;
}

.sales-document-editor-paper .overflow-table {
    overflow: visible;
}

.sales-document-editor-paper .sales-line-table {
    display: block;
    min-width: 0;
}

.sales-document-editor-paper .sales-line-table thead {
    display: none;
}

.sales-document-editor-paper .sales-line-table tbody {
    display: block;
}

.sales-document-editor-paper .sales-line-table tr {
    background: #f8fafc;
    border-bottom: 1px solid #cbd5e1;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 10px 9px;
}

.sales-document-editor-paper .sales-line-table td {
    border: 0;
    min-width: 0;
    padding: 0;
    width: auto;
}

.sales-document-editor-paper .sales-line-table td::before {
    color: #475569;
    content: attr(data-label);
    display: block;
    font-size: .65rem;
    font-weight: 800;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.sales-document-editor-paper .sales-line-table td:nth-child(1) { grid-column: span 4; }
.sales-document-editor-paper .sales-line-table td:nth-child(2) { grid-column: span 8; }
.sales-document-editor-paper .sales-line-table td:nth-child(3) { grid-column: span 4; }
.sales-document-editor-paper .sales-line-table td:nth-child(4),
.sales-document-editor-paper .sales-line-table td:nth-child(5),
.sales-document-editor-paper .sales-line-table td:nth-child(6) { grid-column: span 2; }
.sales-document-editor-paper .sales-line-table td:nth-child(7) {
    align-self: end;
    grid-column: span 1;
    padding-bottom: 8px;
}
.sales-document-editor-paper .sales-line-table td:nth-child(8) {
    align-self: end;
    grid-column: span 1;
    padding-bottom: 3px;
    text-align: right;
}

.sales-document-editor-paper .sales-line-source {
    min-width: 0;
}

.sales-document-editor-paper .sales-document-live-totals {
    padding: 10px 9px 14px;
}

.sales-document-editor-paper .sales-document-notes-grid {
    grid-template-columns: 1fr;
    padding: 12px 9px 16px;
}

.sales-document-live-totals {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: flex-end;
    padding: 10px 12px;
}

.sales-document-live-totals span {
    display: inline-flex;
    gap: 8px;
}

.sales-document-live-total {
    border-left: 1px solid var(--border, #cbd5e1);
    font-size: 1.05rem;
    padding-left: 20px;
}

.sales-document-notes-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    padding: 11px;
}

.sales-document-notes-grid textarea {
    resize: vertical;
}

.sales-document-paper {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .16);
    color: #172033;
    margin: 0 auto;
    min-height: 297mm;
    padding: 13mm 14mm;
    width: 210mm;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.35;
}

.sales-document-paper__header {
    align-items: start;
    border-bottom: 2px solid var(--card-header-bg, #334155);
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr minmax(220px, .72fr);
    padding-bottom: 14px;
}

.sales-document-business {
    align-items: start;
    display: flex;
    gap: 12px;
}

.sales-document-business__logo {
    max-height: 58px;
    max-width: 120px;
    object-fit: contain;
}

.sales-document-business h2,
.sales-document-identity h2 {
    font-size: 1.22rem;
    margin: 0 0 5px;
}

.sales-document-business span,
.sales-document-address-grid span,
.sales-document-print-lines td span {
    display: block;
    line-height: 1.35;
}

.sales-document-identity {
    text-align: right;
}

.sales-document-identity dl,
.sales-document-totals {
    margin: 0;
}

.sales-document-identity dl div,
.sales-document-totals div {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr auto;
    padding: 2px 0;
}

.sales-document-identity dt,
.sales-document-totals dt {
    font-weight: 700;
}

.sales-document-identity dd,
.sales-document-totals dd {
    margin: 0;
}

.sales-document-address-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 1fr;
    padding: 15px 0;
}

.sales-document-address-grid section {
    border-left: 3px solid color-mix(in srgb, var(--card-header-bg, #334155) 70%, #ffffff);
    padding-left: 9px;
}

.sales-document-address-grid h3,
.sales-document-summary-grid h3 {
    color: #475569;
    font-size: .75rem;
    margin: 0 0 7px;
    text-transform: uppercase;
}

.sales-document-print-lines {
    border-collapse: collapse;
    margin-top: 14px;
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}

.sales-document-print-lines th:first-child,
.sales-document-print-lines td:first-child {
    width: 48%;
}

.sales-document-print-lines th {
    background: var(--card-header-bg, #334155);
    color: #ffffff;
    font-size: .7rem;
    padding: 6px;
    text-transform: uppercase;
    text-align: left;
}

.sales-document-print-lines td {
    border-bottom: 1px solid #cbd5e1;
    padding: 7px 6px;
    vertical-align: top;
}

.sales-document-print-lines th:not(:first-child),
.sales-document-print-lines td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.sales-document-choice-group {
    border-bottom: 1px solid #64748b;
    margin-top: 14px;
}

.sales-document-choice-group h3 {
    background: #e2e8f0;
    color: #0f172a;
    font-size: .86rem;
    margin: 0;
    padding: 7px 8px;
}

.sales-document-choice-group__head,
.sales-document-choice-option {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) 190px;
    padding: 6px 8px;
}

.sales-document-choice-group__head {
    border-bottom: 1px solid #94a3b8;
    font-size: .72rem;
    font-weight: 700;
}

.sales-document-choice-group__head span:last-child {
    text-align: right;
}

.sales-document-choice-option {
    border-bottom: 1px solid #e2e8f0;
}

.sales-document-choice-option > div > span {
    color: #475569;
    display: block;
    font-size: .75rem;
    margin-top: 3px;
}

.sales-document-choice-option dl,
.sales-document-choice-option dl div {
    margin: 0;
}

.sales-document-choice-option dl div {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.sales-document-choice-option dd {
    font-weight: 700;
    margin: 0;
}

.sales-document-choice-convert {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    margin-top: 20px;
    padding: 14px;
}

.sales-document-choice-convert h3,
.sales-document-choice-convert fieldset {
    margin: 0 0 12px;
}

.sales-document-choice-convert label {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 7px 0;
}

.sales-document-summary-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 245px;
    padding-top: 15px;
}

.sales-document-totals__grand {
    border-top: 2px solid #334155;
    font-size: 1.16rem;
    margin-top: 6px;
    padding-top: 9px !important;
}

.sales-document-paper__footer {
    border-top: 1px solid #cbd5e1;
    color: #475569;
    margin-top: 20px;
    padding-top: 10px;
}

.sales-document-danger-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

@media (max-width: 1200px) {
    .sales-document-meta-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sales-document-customer-field,
    .sales-document-jobsheet-field {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .sales-document-filters,
    .sales-document-meta-grid,
    .sales-document-notes-grid,
    .sales-document-paper__header,
    .sales-document-address-grid,
    .sales-document-summary-grid {
        grid-template-columns: 1fr;
    }

    .sales-document-choice-group__head,
    .sales-document-choice-option {
        grid-template-columns: 1fr;
    }

    .sales-document-choice-group__head span:last-child,
    .sales-document-choice-option dl div {
        text-align: left;
        justify-content: flex-start;
    }

    .sales-document-paper {
        max-width: 100%;
        min-height: 0;
        padding: 16px 14px;
        width: 100%;
    }

    .sales-document-form {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .sales-document-form .sales-document-toolbar {
        max-width: 100%;
        width: 100%;
    }

    .sales-document-editor-paper {
        min-height: 0;
        padding: 16px 14px;
    }

    .sales-document-editor-paper .sales-document-meta-grid,
    .sales-document-editor-paper .sales-document-notes-grid {
        grid-template-columns: 1fr;
    }

    .sales-document-editor-paper .sales-line-table td:nth-child(1),
    .sales-document-editor-paper .sales-line-table td:nth-child(2),
    .sales-document-editor-paper .sales-line-table td:nth-child(3) {
        grid-column: span 12;
    }

    .sales-document-editor-paper .sales-line-table td:nth-child(4),
    .sales-document-editor-paper .sales-line-table td:nth-child(5),
    .sales-document-editor-paper .sales-line-table td:nth-child(6) {
        grid-column: span 4;
    }

    .sales-document-editor-paper .sales-line-table td:nth-child(7) {
        grid-column: span 10;
    }

    .sales-document-editor-paper .sales-line-table td:nth-child(8) {
        grid-column: span 2;
    }

    .sales-document-editor-paper .sales-document-live-totals {
        align-items: stretch;
        gap: 6px;
        flex-direction: column;
    }

    .sales-document-editor-paper .sales-document-live-total {
        border-left: 0;
        border-top: 1px solid #cbd5e1;
        padding-left: 0;
        padding-top: 6px;
    }

    .sales-document-show-page {
        min-width: 0;
    }

    .sales-document-toolbar,
    .sales-document-approval {
        max-width: 100%;
        width: 100%;
    }

    .sales-document-print-lines th,
    .sales-document-print-lines td {
        font-size: .68rem;
        padding-left: 3px;
        padding-right: 3px;
    }

    .sales-document-print-lines th:first-child,
    .sales-document-print-lines td:first-child {
        width: 40%;
    }

    .sales-document-identity {
        text-align: left;
    }

    .sales-document-toolbar,
    .sales-document-approval__head {
        align-items: stretch;
        flex-direction: column;
    }

    .sales-document-toolbar {
        gap: 9px;
    }

    .sales-document-toolbar__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-document-toolbar__actions > *,
    .sales-document-toolbar__actions .button,
    .sales-document-toolbar__actions .button-secondary {
        width: 100%;
    }

    .sales-document-approval__head {
        gap: 8px;
    }

    .sales-document-approval__form {
        align-items: stretch;
        grid-template-columns: 1fr;
    }
}

@media print {
    @page {
        margin: 0;
        size: A4 portrait;
    }

    .topbar,
    .sales-document-screen-actions {
        display: none !important;
    }

    body,
    body.page-background-active,
    .content {
        background: #ffffff !important;
    }

    .content {
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .sales-document-paper {
        border: 0;
        box-shadow: none;
        max-width: 210mm;
        min-height: 297mm;
        padding: 10mm 12mm;
        width: 210mm;
    }
}

/* Canonical workbench colours: keep this after all component declarations. */
.job-card-list {
    background: color-mix(in srgb, color-mix(in srgb, var(--status-colour, #64748b) 48%, #ffffff) var(--workbench-dimmer, 100%), #ffffff);
}

.job-mini-card {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--status-colour, #64748b) 34%, #cbd5e1);
}

.dashboard-job-sales .job-sales-pane,
.dashboard-special-orders {
    background: color-mix(in srgb, color-mix(in srgb, var(--status-colour, #334155) 26%, #ffffff) var(--workbench-dimmer, 100%), #ffffff);
    border-color: color-mix(in srgb, var(--status-colour, #334155) 70%, #64748b);
}

.job-sales-cart > .job-sales-pane__title,
.job-sales-invoicing > .job-sales-pane__title,
.dashboard-special-orders > .job-sales-pane__title,
.job-sales-bar,
.job-sales-add > summary,
.dashboard-special-orders .job-sales-add > summary {
    background: var(--status-colour, #334155);
    color: var(--status-text-colour, #ffffff);
}

.dashboard-job-sales .job-sales-pane__title h3,
.dashboard-special-orders > .job-sales-pane__title h3 {
    background: transparent;
    color: inherit;
    margin: 0;
    padding: 0;
}

.job-sales-table th,
.dashboard-special-orders .job-sales-table th {
    background: color-mix(in srgb, var(--status-colour, #334155) 82%, #111827);
    color: #ffffff;
}

.job-sales-cart__footer,
.job-sales-proforma,
.job-sales-document-card,
.job-sales-document-card--quotation,
.job-sales-document-card footer,
.job-sales-document-card--quotation footer,
.job-sales-empty--panel {
    background: color-mix(in srgb, color-mix(in srgb, var(--status-colour, #334155) 20%, #ffffff) var(--workbench-dimmer, 100%), #ffffff);
    border-color: color-mix(in srgb, var(--status-colour, #334155) 58%, #cbd5e1);
}

.job-sales-document-card footer,
.job-sales-document-card--quotation footer {
    border-top-color: color-mix(in srgb, var(--status-colour, #334155) 46%, #cbd5e1);
}

.job-sales-ledger,
.job-sales-add,
.dashboard-special-orders .job-sales-add {
    background: color-mix(in srgb, color-mix(in srgb, var(--status-colour, #334155) 25%, #ffffff) var(--workbench-dimmer, 100%), #ffffff);
    border-color: color-mix(in srgb, var(--status-colour, #334155) 68%, #64748b);
}

.job-sales-add__grid,
.dashboard-special-orders .job-sales-form--special {
    background: color-mix(in srgb, color-mix(in srgb, var(--status-colour, #334155) 18%, #ffffff) var(--workbench-dimmer, 100%), #ffffff);
}

.job-sales-form,
.job-sales-inline-form {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--status-colour, #334155) 42%, #cbd5e1);
}

.dashboard-activity-module {
    background: color-mix(in srgb, color-mix(in srgb, var(--status-colour, #334155) 30%, #ffffff) var(--workbench-dimmer, 100%), #ffffff);
    border: 1px solid color-mix(in srgb, var(--status-colour, #334155) 72%, #64748b);
}

.dashboard-activity-module > .dashboard-note-ledger__head {
    background: var(--status-colour, #334155);
    border-bottom-color: color-mix(in srgb, var(--status-colour, #334155) 76%, #111827);
    color: var(--status-text-colour, #ffffff);
}

.dashboard-activity-module > .dashboard-note-ledger__head h3 {
    background: transparent;
    color: inherit;
}

.dashboard-activity-grid {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    padding: 7px;
}

.dashboard-activity-picker,
.dashboard-activity-list {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 6px;
    padding: 0;
}

.dashboard-activity-picker,
.dashboard-activity-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-activity-picker__group--scan,
.dashboard-activity-list__column--scan {
    --activity-accent: #2563eb;
}

.dashboard-activity-picker__group--action,
.dashboard-activity-list__column--action {
    --activity-accent: #0f9f6e;
}

.dashboard-activity-picker__group--install,
.dashboard-activity-list__column--install {
    --activity-accent: #7c3aed;
}

.dashboard-activity-picker__group--note,
.dashboard-activity-list__column--note {
    --activity-accent: #475569;
}

.dashboard-activity-picker__group {
    background: transparent;
    border: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 4px;
    padding: 0;
}

.dashboard-activity-picker__group h4,
.dashboard-activity-list__column h4,
.dashboard-activity-list__notes h4 {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--activity-accent);
    border-radius: 0;
    font-size: 11px;
    margin: 0;
    min-height: 24px;
    padding: 2px 3px;
}

.dashboard-activity-choice-list {
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--activity-accent) 58%, #94a3b8);
    border-radius: 3px;
    gap: 0;
    height: 210px;
    max-height: 210px;
    padding: 2px;
}

.dashboard-activity-choice {
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    font-size: 11px;
    gap: 5px;
    grid-template-columns: 27px minmax(0, 1fr);
    min-height: 29px;
    padding: 2px 4px;
}

.dashboard-activity-choice:last-child {
    border-bottom: 0;
}

.dashboard-activity-choice__icon,
.dashboard-activity-choice__icon img {
    height: 26px;
    width: 26px;
}

.dashboard-activity-default-buttons {
    gap: 4px;
}

.dashboard-activity-default-button {
    border-radius: 3px;
    font-size: 10px;
    min-height: 22px;
    padding: 2px 4px;
}

.dashboard-activity-list__column,
.dashboard-activity-list__notes {
    align-content: start;
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 0;
    padding: 0;
}

.dashboard-activity-list__column .dashboard-activity-item,
.dashboard-activity-list__notes .dashboard-activity-item {
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--activity-accent) 38%, #cbd5e1);
    border-left: 3px solid var(--activity-accent);
    border-radius: 0;
    align-items: center;
    gap: 6px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    height: 66px;
    min-height: 66px;
    overflow: hidden;
    padding: 5px 6px;
}

.dashboard-activity-result-icon {
    align-items: center;
    align-self: stretch;
    background: #e5e7eb;
    display: flex;
    justify-content: center;
    margin: -5px 0 -5px -6px;
    min-height: 64px;
    width: 34px;
}

.dashboard-activity-result-icon img,
.dashboard-activity-result-icon > span {
    font-size: 22px;
    height: 26px;
    line-height: 26px;
    object-fit: contain;
    text-align: center;
    width: 26px;
}

.dashboard-activity-item__content {
    max-height: 54px;
    min-width: 0;
    overflow: hidden;
}

.dashboard-activity-item__actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dashboard-activity-item__actions form {
    margin: 0;
}

.dashboard-activity-item__actions .dashboard-note-icon-button,
.dashboard-activity-item__actions .dashboard-note-icon-button--edit {
    align-items: center;
    display: inline-flex;
    height: 25px;
    justify-content: center;
    padding: 2px;
    width: 26px;
}

.dashboard-activity-item__actions svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 15px;
}

.dashboard-activity-item__editor-toggle {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.dashboard-activity-item__editor-toggle:checked + .dashboard-note-icon-button--edit {
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px #2563eb;
}

.dashboard-activity-item__editor {
    align-items: end;
    background: #f8fafc;
    border-top: 1px solid #cbd5e1;
    display: none;
    gap: 6px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    margin: 2px -6px -5px;
    padding: 7px;
}

.dashboard-activity-item__editor .button {
    justify-self: start;
}

.dashboard-activity-item:has(.dashboard-activity-item__editor-toggle:checked) .dashboard-activity-item__editor {
    display: grid;
}

.dashboard-activity-item:has(.dashboard-activity-item__editor-toggle:checked) {
    height: auto;
    overflow: visible;
}

.dashboard-activity-item__editor label {
    color: #334155;
    display: grid;
    font-size: 10px;
    font-weight: 750;
    gap: 2px;
}

.dashboard-activity-item__editor input,
.dashboard-activity-item__editor textarea {
    font-size: 11px;
    min-height: 30px;
    padding: 4px 6px;
}

.dashboard-activity-item__editor textarea {
    height: 30px;
    resize: vertical;
}

.dashboard-activity-item strong {
    font-size: 12px;
    line-height: 1.15;
}

.dashboard-activity-item small {
    font-size: 10px;
    line-height: 1.15;
    margin-top: 1px;
}

.dashboard-activity-item p {
    font-size: 11px;
    line-height: 1.2;
    margin-top: 3px;
}

.dashboard-activity-list__empty {
    font-size: 11px;
    padding: 3px;
}

.dashboard-activity-list__entry-tools {
    border-top: 2px solid color-mix(in srgb, var(--status-colour, #334155) 50%, #cbd5e1);
    gap: 4px;
    margin-top: 3px;
    padding-top: 5px;
    grid-column: 1 / -1;
}

.dashboard-activity-results__head {
    border-bottom: 2px solid color-mix(in srgb, var(--status-colour, #334155) 62%, #94a3b8);
    color: color-mix(in srgb, var(--status-colour, #334155) 78%, #0f172a);
    font-size: 12px;
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding: 3px 2px 5px;
}

.dashboard-activity-picker__custom,
.dashboard-activity-picker__note {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 6px;
    grid-template-columns: 74px minmax(90px, .42fr) minmax(130px, 1fr) auto;
    padding: 2px 0;
}

.dashboard-activity-picker__note {
    align-items: center;
    border-top: 1px solid #cbd5e1;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    padding-top: 5px;
}

.dashboard-activity-picker__custom label,
.dashboard-activity-picker__note label {
    font-size: 11px;
}

.dashboard-activity-picker__custom select,
.dashboard-activity-picker__custom input,
.dashboard-activity-picker__note textarea {
    min-height: 32px;
    padding: 5px 7px;
}

.dashboard-activity-picker__note textarea {
    height: 32px;
    resize: vertical;
}

.dashboard-job-sales__top {
    position: relative;
}

.dashboard-job-sales__top::after {
    background: color-mix(in srgb, var(--status-colour, #334155) 62%, #94a3b8);
    border-radius: 999px;
    bottom: 8px;
    content: "";
    left: calc(48% - 1px);
    position: absolute;
    top: 8px;
    width: 2px;
}

.job-sales-divider,
.workbench-section-divider {
    background: color-mix(in srgb, var(--status-colour, #334155) 58%, #94a3b8);
    height: 2px;
}

.job-sales-divider {
    margin: 16px 4px;
}

.workbench-section-divider {
    align-items: center;
    background: var(--status-colour, #334155);
    border-radius: 2px;
    color: var(--status-text-colour, #ffffff);
    display: flex;
    font-size: 10px;
    font-weight: 850;
    height: 15px;
    line-height: 15px;
    margin: 16px 12px 8px;
    padding: 0 7px;
}

.dashboard-activity-module > .dashboard-note-ledger__head {
    background: var(--status-colour, #334155);
    border-bottom: 1px solid color-mix(in srgb, var(--status-colour, #334155) 76%, #111827);
    color: var(--status-text-colour, #ffffff);
    justify-content: space-between;
    min-height: 34px;
    padding: 4px 7px 4px 9px;
}

.dashboard-workbench-activity-photos-grid {
    align-items: stretch;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 12px 4px 0 0;
}

.dashboard-workbench-activity-photos-grid > .dashboard-workbench-section {
    margin: 0;
    min-width: 0;
    padding: 8px;
}

.dashboard-workbench-activity-photos-grid > .dashboard-workbench-section > .dashboard-note-ledger__head,
.dashboard-workbench-activity-photos-grid > .dashboard-photo-section > .dashboard-photo-section__head {
    margin: -8px -8px 8px;
}

.dashboard-photo-section > .dashboard-photo-section__head {
    background: var(--status-colour, #334155);
    border-bottom: 1px solid color-mix(in srgb, var(--status-colour, #334155) 76%, #111827);
    color: var(--status-text-colour, #ffffff);
    min-height: 34px;
    padding: 4px 7px 4px 9px;
}

.dashboard-photo-section > .dashboard-photo-section__head h3 {
    background: transparent;
    color: inherit;
    font-size: .9rem;
    margin: 0;
    padding: 0;
}

@media (max-width: 1499px) {
    .dashboard-workbench-activity-photos-grid {
        grid-template-columns: 1fr;
    }
}

.job-sales-divider + .job-sales-ledger,
.job-sales-divider + .job-sales-add {
    margin-top: 0;
}

@media (max-width: 980px) {
    .dashboard-job-sales__top::after {
        display: none;
    }
}

@media (max-width: 900px) {
    .dashboard-activity-picker,
    .dashboard-activity-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .dashboard-activity-picker,
    .dashboard-activity-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Compact PCRT-inspired sales workspace. */
.dashboard-job-sales,
.dashboard-special-orders {
    --sales-header: color-mix(in srgb, var(--status-colour, #64748b) 24%, #3f4932);
    --sales-bar: color-mix(in srgb, var(--status-colour, #64748b) 30%, #77845a);
    --sales-line: color-mix(in srgb, var(--status-colour, #64748b) 20%, #aeb995);
    --sales-soft: color-mix(in srgb, var(--status-colour, #64748b) 5%, #fbfcf7);
}

.dashboard-job-sales {
    background: #fbfcf8;
    border: 1px solid var(--sales-line);
    border-radius: 4px;
    overflow: hidden;
    padding: 9px;
}

#job-sales-workspace {
    display: flex;
    flex-direction: column;
}

#job-sales-workspace > .job-sales-builder {
    border-bottom: 1px solid var(--sales-line);
    order: 1;
    padding: 0 0 14px;
}

#job-sales-workspace > .dashboard-job-sales__top {
    border-bottom: 0;
    order: 2;
    padding: 14px 0 0;
}

.dashboard-job-sales__top {
    gap: 28px;
}

.dashboard-job-sales__top::after {
    display: none;
}

.dashboard-job-sales .job-sales-pane {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
}

.job-sales-cart > .job-sales-pane__title,
.job-sales-invoicing > .job-sales-pane__title,
.dashboard-special-orders > .job-sales-pane__title {
    background: transparent;
    color: #465031;
    margin: 0;
    min-height: 30px;
    padding: 0 4px 7px;
}

.job-sales-pane__title h3 {
    font-size: .95rem;
}

.job-sales-pane__title > span {
    color: #64705a;
}

.job-sales-table {
    font-size: .76rem;
}

.job-sales-table th,
.dashboard-special-orders .job-sales-table th {
    background: var(--sales-header);
    color: #ffffff;
    font-size: .66rem;
    padding: 5px 6px;
}

.job-sales-table td,
.job-sales-table tbody tr:nth-child(even) td {
    background: var(--sales-soft);
    border-bottom-color: var(--sales-line);
    padding: 6px;
}

.job-sales-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--status-colour, #64748b) 8%, #f8faee);
}

.job-sales-cart__footer {
    background: var(--sales-soft);
    border: 1px solid var(--sales-line);
    border-top: 0;
    padding: 7px;
}

.job-sales-cart__actions {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.job-sales-cart__actions > .button,
.job-sales-cart__actions > .button-secondary {
    box-sizing: border-box;
    height: 34px;
    line-height: 1;
    margin: 0;
    padding: 0 10px;
}

.job-sales-inline-document-toggle {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.job-sales-inline-document-button {
    cursor: pointer;
}

.job-sales-inline-document {
    background: #ffffff;
    border: 1px solid var(--sales-line);
    border-radius: 5px;
    display: none;
    gap: 8px;
    margin: 0 0 10px;
    padding: 9px;
}

.job-sales-inline-document-toggle:checked ~ .dashboard-job-sales__top .job-sales-inline-document {
    display: grid;
}

.job-sales-inline-document--editor.is-active {
    display: grid;
}

.job-sales-inline-document-toggle:checked ~ .dashboard-job-sales__top .job-sales-inline-document--editor {
    display: none;
}

.job-sales-inline-document__head {
    align-items: center;
    border-bottom: 1px solid var(--sales-line);
    display: flex;
    justify-content: space-between;
    padding-bottom: 6px;
}

.job-sales-inline-document__head strong {
    color: #465031;
    font-size: .86rem;
}

.job-sales-inline-document__head label,
.job-sales-inline-document__head button {
    align-items: center;
    background: #f1f4ed;
    border: 1px solid var(--sales-line);
    border-radius: 4px;
    color: #59624e;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    height: 25px;
    justify-content: center;
    line-height: 1;
    width: 25px;
}

.job-sales-inline-document__customer {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.job-sales-inline-document__customer span,
.job-sales-inline-document label {
    color: var(--muted-text, #64748b);
    font-size: .65rem;
    font-weight: 750;
}

.job-sales-inline-document__customer strong {
    color: #263124;
    font-size: .76rem;
}

.job-sales-inline-document__customer small {
    color: var(--muted-text, #64748b);
    font-size: .66rem;
}

.job-sales-inline-document__fields {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job-sales-inline-document__fields label,
.job-sales-inline-document__wide {
    display: grid;
    gap: 3px;
}

.job-sales-inline-document input,
.job-sales-inline-document select,
.job-sales-inline-document textarea {
    min-width: 0;
    padding: 5px 6px;
    width: 100%;
}

.job-sales-inline-document textarea {
    min-height: 48px;
    resize: vertical;
}

.job-sales-inline-document__cart {
    background: var(--sales-soft);
    border: 1px solid var(--sales-line);
    display: grid;
    font-size: .68rem;
    gap: 4px 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px 7px;
}

.job-sales-inline-document__cart strong {
    text-align: right;
    white-space: nowrap;
}

.job-sales-inline-document__cart > span:last-of-type,
.job-sales-inline-document__cart > strong:last-child {
    border-top: 1px solid var(--sales-line);
    font-size: .74rem;
    padding-top: 4px;
}

.job-sales-choice-group__heading td {
    background: color-mix(in srgb, var(--card-header-bg, #334155) 14%, #ffffff);
    border-top: 2px solid color-mix(in srgb, var(--card-header-bg, #334155) 48%, #ffffff);
}

.job-sales-choice-group__title,
.job-sales-choice-group__title form {
    align-items: center;
    display: flex;
    gap: 6px;
}

.job-sales-choice-group__title {
    justify-content: space-between;
}

.job-sales-choice-group__title input {
    min-height: 30px;
    padding: 4px 6px;
}

.job-sales-choice-group__remove {
    min-height: 30px;
    padding: 4px 8px;
}

.job-sales-choice-group__save svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 15px;
}

.job-sales-choice-group__save.icon-square-button {
    flex: 0 0 28px;
}

.job-sales-choice-group__option td:first-child {
    align-items: center;
    display: grid;
    gap: 3px 7px;
    grid-template-columns: 15px minmax(0, 1fr);
}

.job-sales-choice-group__option small {
    grid-column: 2;
}

.job-sales-choice-group__radio {
    border: 2px solid var(--primary, #2563eb);
    border-radius: 50%;
    height: 12px;
    width: 12px;
}

.job-sales-choice-builder {
    border-top: 1px solid var(--sales-line);
    padding: 7px 8px;
}

.job-sales-choice-builder summary {
    cursor: pointer;
    font-size: .74rem;
    font-weight: 800;
}

.job-sales-choice-builder form,
.job-sales-choice-builder fieldset {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}

.job-sales-choice-builder label {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.job-sales-special-choice-builder {
    background: color-mix(in srgb, var(--primary, #2563eb) 7%, var(--surface, #ffffff));
    border-bottom: 1px solid var(--sales-line);
    display: grid;
    gap: 10px;
    padding: 10px;
}

.job-sales-special-choice-builder > div,
.job-sales-special-choice-builder form,
.job-sales-special-choice-builder fieldset {
    display: grid;
    gap: 7px;
}

.job-sales-special-choice-builder > div small {
    color: var(--muted-text, #52525b);
    line-height: 1.35;
}

.job-sales-special-choice-builder form {
    grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.3fr) auto;
    align-items: end;
}

.job-sales-special-choice-builder__name {
    display: grid;
    gap: 4px;
}

.job-sales-special-choice-builder fieldset {
    border: 1px solid var(--sales-line);
    border-radius: 5px;
    padding: 6px 8px;
}

.job-sales-special-choice-builder fieldset label {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.job-sales-special-choice-builder fieldset label small {
    color: var(--muted-text, #52525b);
}

.job-sales-special-choice-hint {
    background: color-mix(in srgb, var(--primary, #2563eb) 6%, var(--surface, #ffffff));
    border-bottom: 1px solid var(--sales-line);
    margin: 0;
    padding: 9px 10px;
}

@media (max-width: 900px) {
    .job-sales-special-choice-builder form {
        grid-template-columns: 1fr;
    }

    .job-sales-special-choice-builder form > button {
        width: 100%;
    }
}

.job-sales-inline-document__choice-title {
    font-weight: 800;
}

.job-sales-inline-document__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}

.job-sales-inline-document__actions .job-sales-proforma {
    font-size: .72rem;
    margin: 0;
    min-height: 30px;
    padding: 5px 8px;
}

@media (max-width: 680px) {
    .job-sales-cart__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .job-sales-inline-document__fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.job-sales-proforma {
    background: #ffffff;
    border-color: var(--sales-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    padding: 7px 9px;
}

.job-sales-document-card,
.job-sales-document-card--quotation {
    background: color-mix(in srgb, var(--status-colour, #64748b) 7%, #f3f0d8);
    border-color: var(--sales-line);
    border-radius: 4px;
}

.job-sales-document-card footer,
.job-sales-document-card--quotation footer {
    background: color-mix(in srgb, var(--status-colour, #64748b) 10%, #e8e5c8);
    border-top-color: var(--sales-line);
}

.job-sales-document-card--quotation {
    background: #e8f2f7;
    border-color: #8aabba;
}

.job-sales-document-card--quotation footer {
    background: #d5e6ed;
    border-top-color: #8aabba;
}

.job-sales-document-card--quotation .job-sales-document-card__icon {
    background: #f2f8fb;
    border-color: #9ab7c4;
    color: #3f6f82;
}

.job-sales-ledger {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-top: 14px;
}

.job-sales-bar,
.job-sales-add > summary,
.dashboard-special-orders .job-sales-add > summary {
    background: var(--sales-bar);
    color: #ffffff;
    font-size: .74rem;
    padding: 6px 8px;
}

.job-sales-add,
.dashboard-special-orders .job-sales-add {
    background: transparent;
    border: 0;
    border-radius: 2px;
    box-shadow: none;
    margin-top: 10px;
}

.job-sales-add:not([open]) > :not(summary) {
    display: none !important;
}

.job-sales-add__grid,
.dashboard-special-orders .job-sales-form--special {
    background: var(--sales-soft);
}

.job-sales-add__grid {
    border: 1px solid var(--sales-line);
    border-top: 0;
    padding: 9px;
}

.job-sales-form,
.job-sales-inline-form {
    background: #ffffff;
    border-color: var(--sales-line);
    box-shadow: none;
}

.dashboard-special-orders {
    background: #fbfcf8;
    border: 1px solid var(--sales-line);
    border-radius: 4px;
    box-shadow: none;
    margin-top: 14px;
    padding: 9px;
}

.dashboard-special-orders > .job-sales-pane__title {
    padding-left: 4px;
}

.dashboard-special-orders .job-sales-add {
    margin: 10px 0 0;
}

.dashboard-special-orders .job-sales-form--special {
    border: 1px solid var(--sales-line);
    border-top: 0;
    margin: 0;
}

.workbench-section-divider {
    background: color-mix(in srgb, var(--status-colour, #64748b) 32%, #46513b);
}

.job-sales-workspace__title {
    color: #465031;
    font-size: 1rem;
    margin: 0 0 8px;
    padding: 0 4px 7px;
    border-bottom: 1px solid var(--sales-line);
}

.dashboard-job-sales__top {
    border-bottom: 1px solid var(--sales-line);
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 170px;
    padding-bottom: 10px;
}

.dashboard-job-sales__top > .job-sales-pane:first-child {
    padding-right: 18px;
}

.dashboard-job-sales__top > .job-sales-pane + .job-sales-pane {
    border-left: 1px solid var(--sales-line);
    padding-left: 18px;
}

.job-sales-workspace-empty {
    align-items: center;
    color: color-mix(in srgb, var(--status-colour, #64748b) 48%, #59624e);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 112px;
    padding: 12px;
    text-align: center;
}

.job-sales-workspace-empty__icon {
    align-items: center;
    background: color-mix(in srgb, var(--status-colour, #64748b) 8%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--status-colour, #64748b) 24%, #dce3d3);
    border-radius: 50%;
    display: flex;
    height: 46px;
    justify-content: center;
    margin-bottom: 8px;
    width: 46px;
}

.job-sales-workspace-empty__icon svg {
    fill: none;
    height: 23px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 23px;
}

.job-sales-workspace-empty strong {
    color: #465031;
    font-size: .8rem;
}

.job-sales-workspace-empty > span:last-child {
    font-size: .7rem;
    margin-top: 3px;
}

.job-sales-inline-document-toggle:checked ~ .dashboard-job-sales__top .job-sales-workspace-empty--documents {
    display: none;
}

.job-sales-document-card__identity {
    align-items: center;
    display: flex;
    gap: 7px;
    min-width: 0;
}

.job-sales-document-card__icon {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--sales-line);
    border-radius: 3px;
    color: #596232;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
}

.job-sales-document-card__icon svg {
    height: 22px;
    width: 22px;
}

.job-sales-document-card__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding-top: 0;
}

.job-sales-document-card footer {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 7px 0 0;
}

.job-sales-document-card footer form {
    align-items: stretch;
    display: inline-flex;
    margin: 0;
}

.job-sales-document-card footer a,
.job-sales-document-card footer button {
    align-items: center;
    display: inline-flex;
    gap: 3px;
    line-height: 1;
    min-height: 18px;
    white-space: nowrap;
}

.job-sales-document-card footer svg {
    display: block;
    flex: 0 0 14px;
    fill: none;
    height: 14px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 14px;
}

.job-sales-document-card .job-sales-email-sent {
    align-items: center;
    color: #15803d;
    display: inline-flex;
    margin-left: 1px;
}

.job-sales-document-card .job-sales-email-sent svg {
    height: 15px;
    stroke-width: 3;
    width: 15px;
}

.job-sales-document-card footer a,
.job-sales-document-card footer button {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 30px;
    padding: 5px 7px;
    transition: background-color .12s ease, color .12s ease;
}

.job-sales-document-card footer > a + a,
.job-sales-document-card footer > a + form,
.job-sales-document-card footer > form + a,
.job-sales-document-card footer > form + form,
.job-sales-document-card footer > form + button,
.job-sales-document-card footer > button + a,
.job-sales-document-card footer > button + form,
.job-sales-document-card footer > button + button {
    border-left: 1px solid color-mix(in srgb, var(--sales-line, #8fa579) 72%, transparent);
}

.job-sales-document-card footer a:hover,
.job-sales-document-card footer button:hover,
.job-sales-document-card footer a:focus-visible,
.job-sales-document-card footer button:focus-visible {
    background: rgba(0, 0, 0, .5);
    box-shadow: none;
    color: #ffffff;
    outline: none;
}

.job-sales-document-card footer a:hover .job-sales-email-sent,
.job-sales-document-card footer button:hover .job-sales-email-sent,
.job-sales-document-card footer a:focus-visible .job-sales-email-sent,
.job-sales-document-card footer button:focus-visible .job-sales-email-sent {
    color: #ffffff;
}

.job-sales-builder {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 250px;
    padding-top: 14px;
}

.job-sales-builder__radio {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.job-sales-builder__actions {
    align-content: start;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 8px 18px 8px 10px;
}

.job-sales-builder__actions label,
.job-sales-builder__actions .job-sales-builder__placeholder {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--sales-line);
    border-radius: 5px;
    color: #465031;
    cursor: pointer;
    display: grid;
    font-size: .82rem;
    font-weight: 800;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    min-height: 42px;
    padding: 7px 10px;
    text-align: center;
    width: 100%;
}

.job-sales-builder__actions .job-sales-builder__placeholder:disabled {
    cursor: not-allowed;
    font-family: inherit;
    opacity: .6;
    box-shadow: none;
    margin: 0;
}

.job-sales-builder__actions label > span:nth-child(2) {
    text-align: center;
}

.job-sales-builder__action-icon {
    align-items: center;
    background: #eaf3ea;
    border: 1px solid #bad5ba;
    border-radius: 5px;
    color: #287944;
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.job-sales-builder__action-icon svg {
    fill: none;
    height: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 19px;
}

.job-sales-builder__actions label:nth-child(2) .job-sales-builder__action-icon {
    background: #e8f2fb;
    border-color: #b7d2e8;
    color: #286c9d;
}

.job-sales-builder__actions label:nth-child(3) .job-sales-builder__action-icon {
    background: #f4eee2;
    border-color: #dccba9;
    color: #8a6226;
}

.job-sales-builder__actions label:nth-child(4) .job-sales-builder__action-icon {
    background: #eeeafa;
    border-color: #cfc3e9;
    color: #6a4ca0;
}

.job-sales-builder__actions label:nth-child(5) .job-sales-builder__action-icon {
    background: #f7ecec;
    border-color: #e2c0c0;
    color: #a13d3d;
}

.job-sales-builder__actions label:nth-child(6) .job-sales-builder__action-icon {
    background: #fee2e2;
    border-color: #f3aaaa;
    color: #c62828;
}

.job-sales-builder__radio:nth-of-type(2):checked ~ .job-sales-builder__actions label:nth-child(1) .job-sales-builder__action-icon,
.job-sales-builder__radio:nth-of-type(3):checked ~ .job-sales-builder__actions label:nth-child(2) .job-sales-builder__action-icon,
.job-sales-builder__radio:nth-of-type(4):checked ~ .job-sales-builder__actions label:nth-child(3) .job-sales-builder__action-icon,
.job-sales-builder__radio:nth-of-type(5):checked ~ .job-sales-builder__actions label:nth-child(4) .job-sales-builder__action-icon,
.job-sales-builder__radio:nth-of-type(6):checked ~ .job-sales-builder__actions label:nth-child(5) .job-sales-builder__action-icon {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(255, 255, 255, .7);
}

.job-sales-builder__actions label:hover {
    background: var(--sales-soft);
    border-color: var(--sales-bar);
}

.job-sales-builder__radio:nth-of-type(2):checked ~ .job-sales-builder__actions label:nth-child(1),
.job-sales-builder__radio:nth-of-type(3):checked ~ .job-sales-builder__actions label:nth-child(2),
.job-sales-builder__radio:nth-of-type(4):checked ~ .job-sales-builder__actions label:nth-child(3),
.job-sales-builder__radio:nth-of-type(5):checked ~ .job-sales-builder__actions label:nth-child(4),
.job-sales-builder__radio:nth-of-type(6):checked ~ .job-sales-builder__actions label:nth-child(5) {
    background: var(--sales-bar);
    border-color: var(--sales-bar);
    color: #ffffff;
}

.job-sales-builder__content {
    border-left: 1px solid var(--sales-line);
    min-width: 0;
    padding: 0 0 0 18px;
}

.job-sales-workspace-empty--builder {
    min-height: 220px;
}

.job-sales-builder__panel {
    display: none;
}

.job-sales-builder__radio:nth-of-type(2):checked ~ .job-sales-builder__content .job-sales-builder__panel--cart,
.job-sales-builder__radio:nth-of-type(3):checked ~ .job-sales-builder__content .job-sales-builder__panel--deposit,
.job-sales-builder__radio:nth-of-type(4):checked ~ .job-sales-builder__content .job-sales-builder__panel--special,
.job-sales-builder__radio:nth-of-type(5):checked ~ .job-sales-builder__content .job-sales-builder__panel--labour,
.job-sales-builder__radio:nth-of-type(6):checked ~ .job-sales-builder__content .job-sales-builder__panel--quick-labour,
.job-sales-builder__radio:nth-of-type(7):checked ~ .job-sales-builder__content .job-sales-builder__panel--no-charge {
    display: block;
}

.job-sales-builder__radio:nth-of-type(2):checked ~ .job-sales-builder__content .job-sales-workspace-empty--builder,
.job-sales-builder__radio:nth-of-type(3):checked ~ .job-sales-builder__content .job-sales-workspace-empty--builder,
.job-sales-builder__radio:nth-of-type(4):checked ~ .job-sales-builder__content .job-sales-workspace-empty--builder,
.job-sales-builder__radio:nth-of-type(5):checked ~ .job-sales-builder__content .job-sales-workspace-empty--builder,
.job-sales-builder__radio:nth-of-type(6):checked ~ .job-sales-builder__content .job-sales-workspace-empty--builder,
.job-sales-builder__radio:nth-of-type(7):checked ~ .job-sales-builder__content .job-sales-workspace-empty--builder {
    display: none;
}

.job-sales-builder .job-sales-form {
    margin: 0;
}

.job-sales-builder .job-sales-form--special {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.job-special-order-column {
    display: grid;
    align-self: start;
    align-content: start;
    gap: 12px;
    min-width: 0;
}

.job-special-order-footer {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    min-width: 0;
}

.job-special-order-column label,
.job-special-order-footer label {
    min-width: 0;
}

.job-sales-form--labour [data-labour-hours-field][hidden] {
    display: none !important;
}

@media (max-width: 980px) {
    .dashboard-job-sales__top {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-job-sales__top > .job-sales-pane + .job-sales-pane {
        border-left: 0;
        border-top: 1px solid var(--sales-line);
        padding-left: 0;
        padding-top: 10px;
    }

    .dashboard-job-sales__top > .job-sales-pane:first-child {
        padding-right: 0;
    }

    .job-sales-builder {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .job-sales-builder__actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0;
    }

    .job-sales-builder__actions label {
        width: 100%;
    }

    .job-sales-builder__content {
        border-left: 0;
        border-top: 1px solid var(--sales-line);
        padding: 12px 0 0;
    }
}

@media (max-width: 680px) {
    .job-sales-builder__actions {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .job-sales-builder__actions label,
    .job-sales-builder__actions .job-sales-builder__placeholder {
        grid-template-columns: 30px minmax(0, 1fr);
        padding: 6px 8px;
    }

    .job-sales-builder__actions label > i,
    .job-sales-builder__actions .job-sales-builder__placeholder > i {
        display: none;
    }

    .job-sales-builder .job-sales-form--special {
        grid-template-columns: minmax(0, 1fr);
    }

    .job-special-order-footer {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .dashboard-special-orders .job-sales-table-wrap {
        overflow-x: visible;
    }

    .job-sales-special-table,
    .job-sales-special-table tbody {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .job-sales-special-table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .job-sales-special-table > tbody > tr:not(.job-sales-special-editor-row) {
        background: #ffffff;
        border: 1px solid var(--sales-line);
        border-radius: 4px;
        display: grid;
        gap: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 8px;
        overflow: hidden;
    }

    .job-sales-special-table > tbody > tr:not(.job-sales-special-editor-row) > td {
        background: transparent;
        border: 0;
        min-width: 0;
        overflow-wrap: anywhere;
        padding: 6px 8px;
    }

    .job-sales-special-table > tbody > tr:not(.job-sales-special-editor-row) > .job-sales-special-table__part {
        background: var(--sales-soft);
        border-bottom: 1px solid var(--sales-line);
        grid-column: 1 / -1;
    }

    .job-sales-special-detail {
        display: grid;
        font-size: .72rem;
        gap: 2px;
    }

    .job-sales-special-detail::before {
        color: var(--muted-text, #64748b);
        content: attr(data-label);
        font-size: .59rem;
        font-weight: 850;
        text-transform: uppercase;
    }

    .job-sales-special-detail.is-empty {
        display: none;
    }

    .job-sales-special-table tr:has(.job-sales-special-editor-toggle:checked) + .job-sales-special-editor-row {
        display: block;
        margin: -8px 0 8px;
    }

    .job-sales-special-editor-row > td {
        display: block;
        padding: 7px;
        width: 100%;
    }

    .job-sales-special-editor {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .job-sales-special-table > tbody > tr:not(.job-sales-special-editor-row) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .job-sales-special-editor {
        grid-template-columns: minmax(0, 1fr);
    }
}

.job-sales-stock-lookup {
    display: grid;
    gap: 3px;
    min-width: 0;
    position: relative;
}

.job-sales-stock-lookup > label {
    color: var(--muted-text, #64748b);
    font-size: .67rem;
    font-weight: 750;
}

.job-sales-stock-lookup__control {
    align-items: stretch;
    display: grid;
    gap: 7px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.job-sales-stock-lookup__control > input[type="search"] {
    min-width: 0;
    padding: 6px 7px;
    width: 100%;
}

.job-sales-stock-lookup__image {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--sales-line, #aeb995);
    border-radius: 4px;
    display: grid;
    height: 52px;
    justify-items: center;
    overflow: hidden;
    width: 52px;
}

.job-sales-stock-lookup__image[hidden] {
    display: none;
}

.job-sales-stock-lookup__image img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.job-sales-stock-lookup > small {
    color: var(--muted-text, #64748b);
    font-size: .62rem;
    line-height: 1.2;
}

.job-sales-stock-results {
    background: #ffffff;
    border: 1px solid var(--sales-line, #aeb995);
    border-radius: 4px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
    left: 0;
    max-height: 320px;
    overflow-y: auto;
    padding: 3px;
    position: absolute;
    top: calc(100% - 14px);
    width: min(520px, calc(100vw - 48px));
    z-index: 80;
}

.job-sales-stock-result {
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    color: #1f2937;
    cursor: pointer;
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    text-align: left;
    width: 100%;
}

.job-sales-stock-result:last-child {
    border-bottom: 0;
}

.job-sales-stock-result:hover,
.job-sales-stock-result.is-active {
    background: var(--sales-soft, #f4f7ef);
    box-shadow: inset 3px 0 0 var(--sales-bar, #77845a);
}

.job-sales-stock-result strong {
    font-size: .76rem;
}

.job-sales-stock-result span,
.job-sales-stock-result small {
    color: #64748b;
    font-size: .66rem;
    line-height: 1.25;
}

.job-sales-stock-results__empty {
    color: #64748b;
    font-size: .74rem;
    margin: 0;
    padding: 10px;
}

/* Keep the repair cart compact like the original PCRT table. */
.job-sales-cart .job-sales-table-wrap {
    overflow-x: visible;
}

.job-sales-ledger--documents .job-sales-table-wrap {
    overflow-x: visible;
}

.job-sales-ledger--documents .job-sales-table {
    font-size: .68rem;
    min-width: 0;
    table-layout: fixed;
}

.job-sales-ledger--documents .job-sales-table td {
    overflow-wrap: anywhere;
    padding: 4px 3px;
    vertical-align: middle;
}

.job-sales-ledger--documents .job-sales-table td:nth-child(1) {
    width: 19%;
}

.job-sales-ledger--documents .job-sales-table td:nth-child(1) time {
    display: block;
    font-size: .62rem;
    margin-top: 2px;
    white-space: nowrap;
}

.job-sales-ledger--documents .job-sales-table td:nth-child(2) {
    white-space: nowrap;
    width: 12%;
}

.job-sales-ledger--documents .job-sales-table td:nth-child(3) {
    width: 15%;
}

.job-sales-ledger--documents .job-sales-table td:nth-child(4) {
    width: 18%;
}

.job-sales-ledger--documents .job-sales-table td:nth-child(5) {
    width: 10%;
}

.job-sales-ledger--documents .job-sales-table td:nth-child(6) {
    width: auto;
}

.job-sales-ledger--documents .job-sales-table td:last-child {
    text-align: center;
    width: 54px;
}

.job-sales-ledger--documents .icon-square-button {
    height: 22px;
    min-height: 22px;
    width: 22px;
}

.job-sales-deposit-actions {
    align-items: center;
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    position: relative;
}

.job-sales-deposit-date-editor {
    position: relative;
}

.job-sales-deposit-date-editor > summary {
    align-items: center;
    background: #edf5e9;
    border: 1px solid #9fbd94;
    color: #245d32;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    list-style: none;
}

.job-sales-deposit-date-editor > summary::-webkit-details-marker {
    display: none;
}

.job-sales-deposit-date-editor > summary svg {
    fill: none;
    height: 13px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 13px;
}

.job-sales-deposit-date-editor[open] > summary {
    background: #2e643d;
    color: #fff;
}

.job-sales-deposit-date-editor > form {
    background: #fff;
    border: 1px solid #84aa79;
    box-shadow: 0 5px 16px rgb(15 23 42 / 20%);
    padding: 8px;
    position: absolute;
    right: 0;
    text-align: left;
    top: calc(100% + 3px);
    width: 190px;
    z-index: 30;
}

.job-sales-deposit-date-editor label {
    display: grid;
    font-size: .68rem;
    font-weight: 700;
    gap: 4px;
}

.job-sales-deposit-date-editor input {
    font-size: .72rem;
    min-width: 0;
    padding: 5px;
    width: 100%;
}

.job-sales-deposit-date-editor .button {
    margin-top: 6px;
    width: 100%;
}

.job-sales-cart-table {
    min-width: 0;
    table-layout: fixed;
}

.job-sales-cart-table__description {
    width: auto;
}

.job-sales-cart-table__quantity {
    width: 44px;
}

.job-sales-cart-table__delete {
    width: 40px;
}

.job-cart-delete-form {
    margin: 0;
}

.job-cart-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    background: #fff1f2;
    color: #b91c1c;
    cursor: pointer;
}

.job-cart-delete:hover,
.job-cart-delete:focus-visible {
    background: #b91c1c;
    color: #ffffff;
    outline: 2px solid #b91c1c;
    outline-offset: 2px;
}

.job-cart-delete svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.job-sales-cart-table__money {
    width: 76px;
}

.job-sales-cart-table td:first-child {
    overflow-wrap: anywhere;
    width: auto;
}

.job-sales-cart-table th:nth-child(n+2),
.job-sales-cart-table td:nth-child(n+2) {
    text-align: right;
    white-space: nowrap;
}

.job-sales-cart-table .job-sales-row-editor,
.job-sales-cart-table .job-sales-row-editor summary {
    min-width: 0;
}

.job-sales-cart-table .job-sales-inline-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.job-sales-row-remove {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

@media (max-width: 680px) {
    .job-sales-cart-table__quantity {
        width: 38px;
    }

    .job-sales-cart-table__money {
        width: 68px;
    }

    .job-sales-cart-table th,
    .job-sales-cart-table td {
        padding-left: 4px;
        padding-right: 4px;
    }
}

@media (max-width: 980px) and (min-width: 681px) {
    .job-sales-builder__actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Compact PCRT-style cart item actions. */
.job-sales-row-editor > summary,
.job-sales-row-action-panel > summary {
    list-style: none;
}

.job-sales-row-editor > summary::-webkit-details-marker,
.job-sales-row-action-panel > summary::-webkit-details-marker {
    display: none;
}

.job-sales-row-editor__summary {
    align-items: start;
    display: grid;
    gap: 5px;
    grid-template-columns: 19px minmax(0, 1fr);
}

.job-sales-row-editor__summary::before {
    align-items: center;
    background: var(--sales-bar, #77845a);
    border-radius: 3px;
    color: #ffffff;
    content: "⌄";
    display: flex;
    font-size: .86rem;
    font-weight: 900;
    height: 19px;
    justify-content: center;
    line-height: 1;
    width: 19px;
}

.job-sales-row-editor[open] > .job-sales-row-editor__summary::before {
    content: "⌃";
}

.job-sales-row-editor__summary > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.job-sales-row-actions {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 6px 0 1px 24px;
}

.job-sales-row-actions > form {
    margin: 0;
}

.job-sales-row-action {
    align-items: center;
    background: color-mix(in srgb, var(--sales-bar, #77845a) 24%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--sales-bar, #77845a) 48%, #ffffff);
    border-radius: 3px;
    color: #34402a;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: .65rem;
    font-weight: 750;
    gap: 4px;
    min-height: 25px;
    padding: 3px 6px;
    white-space: nowrap;
}

.job-sales-row-editor .job-sales-row-action-panel > .job-sales-row-action {
    display: inline-flex;
    width: max-content;
}

.job-sales-row-action:hover,
.job-sales-row-action-panel[open] > .job-sales-row-action {
    background: color-mix(in srgb, var(--sales-bar, #77845a) 38%, #ffffff);
}

.job-sales-row-action--remove {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b42318;
}

.job-sales-row-action svg {
    fill: none;
    height: 14px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 14px;
}

.job-sales-row-action-panel[open] {
    flex-basis: 100%;
}

.job-sales-row-action-panel[open] > .job-sales-row-action {
    margin-bottom: 5px;
}

.job-sales-row-action-panel .job-sales-inline-form {
    margin: 0;
}

.job-sales-row-discount__panel {
    background: #ffffff;
    border: 1px solid var(--sales-line, #aeb995);
    border-radius: 4px;
    display: grid;
    gap: 7px;
    padding: 7px;
}

.job-sales-row-discount__panel > p {
    font-size: .68rem;
    margin: 0;
}

.job-sales-discount-form {
    align-items: end;
    background: var(--sales-soft, #f4f7ef);
    border: 1px solid color-mix(in srgb, var(--sales-line, #aeb995) 62%, #ffffff);
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 6px;
}

.job-sales-discount-form > strong {
    color: #465031;
    font-size: .68rem;
    grid-column: 1 / -1;
}

.job-sales-discount-form label {
    color: var(--muted-text, #64748b);
    display: grid;
    font-size: .62rem;
    font-weight: 750;
    gap: 2px;
}

.job-sales-discount-form input {
    min-width: 0;
    padding: 5px 6px;
    width: 100%;
}

.job-sales-discount-form > button {
    grid-column: 1 / -1;
    justify-self: start;
    white-space: nowrap;
}

.job-sales-discount-reset {
    margin: 0;
}

.job-sales-row-tax {
    align-items: center;
    display: flex;
    flex-basis: 100%;
    gap: 5px;
    margin: 0;
}

.job-sales-row-tax label {
    margin: 0;
}

.job-sales-row-tax select {
    background: #ffffff;
    border: 1px solid var(--sales-line, #aeb995);
    border-radius: 3px;
    font-size: .66rem;
    min-height: 26px;
    padding: 3px 24px 3px 6px;
}

.job-sales-row-tax .job-sales-row-action {
    min-height: 26px;
}

@media (max-width: 680px) {
    .job-sales-discount-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Personal reminders */
.nav__link--reminders,
.brand-hub__menu a {
    position: relative;
}

.nav-reminder-badge {
    align-items: center;
    background: #dc2626;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-size: .58rem;
    font-weight: 900;
    height: 19px;
    justify-content: center;
    line-height: 1;
    min-width: 19px;
    padding: 0 3px;
}

.nav__link--reminders .nav-reminder-badge {
    position: absolute;
    right: 2px;
    top: 1px;
}

.reminder-page {
    margin: 0 auto;
    max-width: 1080px;
}

.reminder-page__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.reminder-page__head .eyebrow,
.reminder-page__head .page-title {
    margin-bottom: 0;
}

.reminder-page__new,
.reminder-page__new svg {
    align-items: center;
    display: inline-flex;
}

.reminder-page__new {
    gap: 6px;
}

.reminder-page__new svg {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
    width: 17px;
}

.reminder-list {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
}

.reminder-row {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 12px 14px;
}

.reminder-row + .reminder-row {
    border-top: 1px solid #e2e8f0;
}

.reminder-row--due {
    background: #fff8e7;
    box-shadow: inset 4px 0 0 #d97706;
}

.reminder-row--complete {
    background: #f8fafc;
    color: #64748b;
}

.reminder-row__icon {
    align-items: center;
    background: #eef4e8;
    border: 1px solid #b5c49e;
    border-radius: 5px;
    color: #526238;
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.reminder-row--due .reminder-row__icon {
    background: #ffedd5;
    border-color: #fdba74;
    color: #c2410c;
}

.reminder-row__icon svg,
.reminder-row__actions svg,
.reminder-empty svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.reminder-row__icon svg {
    height: 21px;
    width: 21px;
}

.reminder-row__body {
    min-width: 0;
}

.reminder-row__title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.reminder-row__title h2 {
    font-size: .92rem;
    margin: 0;
}

.reminder-status {
    background: #e2e8f0;
    border-radius: 3px;
    font-size: .61rem;
    font-weight: 800;
    padding: 2px 5px;
    text-transform: uppercase;
}

.reminder-row--due .reminder-status {
    background: #fed7aa;
    color: #9a3412;
}

.reminder-row__body time {
    color: #64748b;
    display: block;
    font-size: .7rem;
    font-weight: 700;
    margin-top: 3px;
}

.reminder-row__body p {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.reminder-row__actions {
    align-items: center;
    display: flex;
    gap: 6px;
}

.reminder-row__actions form {
    margin: 0;
}

.reminder-row__actions .icon-square-button svg {
    height: 15px;
    width: 15px;
}

/* Secure phone picture upload */
.phone-photo-page {
    display: grid;
    justify-items: center;
    min-height: calc(100vh - 72px);
    padding: 24px 12px;
}

.phone-photo-card {
    background: #ffffff;
    border: 1px solid #9ab7a3;
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, .16);
    display: grid;
    gap: 14px;
    max-width: 560px;
    padding: 20px;
    width: 100%;
}

.phone-photo-card h1,
.phone-photo-card h2,
.phone-photo-card p,
.phone-photo-card form {
    margin: 0;
}

.phone-photo-card h1 {
    font-size: 1.45rem;
}

.phone-photo-card h2 {
    font-size: 1rem;
}

.phone-photo-card__brand {
    align-items: center;
    color: #17643b;
    display: flex;
    font-size: .82rem;
    font-weight: 850;
    gap: 9px;
    text-transform: uppercase;
}

.phone-photo-card__brand img {
    height: 34px;
    object-fit: contain;
    width: 34px;
}

.phone-photo-card__job {
    background: #edf7f0;
    border-left: 4px solid #2d8b57;
    display: grid;
    font-weight: 800;
    gap: 2px;
    padding: 10px 12px;
}

.phone-photo-card__job span {
    color: #52616f;
    font-size: .8rem;
    font-weight: 700;
}

.phone-photo-qr {
    border: 8px solid #ffffff;
    box-shadow: 0 0 0 1px #cbd5e1;
    justify-self: center;
    max-width: 260px;
    width: 100%;
}

.phone-photo-link {
    display: grid;
    font-size: .72rem;
    font-weight: 800;
    gap: 5px;
}

.phone-photo-link input {
    font-size: .72rem;
    width: 100%;
}

.phone-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.phone-photo-option,
.phone-photo-finish,
.phone-photo-unavailable {
    background: #f6f8f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.phone-photo-option form,
.phone-photo-finish form {
    display: grid;
    gap: 10px;
}

.phone-photo-file {
    background: #ffffff;
    border: 1px dashed #7c9b88;
    border-radius: 5px;
    cursor: pointer;
    display: grid;
    gap: 8px;
    padding: 12px;
}

.phone-photo-file span {
    color: #17643b;
    font-size: .86rem;
    font-weight: 850;
}

.phone-photo-file input {
    font-size: .82rem;
    width: 100%;
}

.phone-photo-selection,
.phone-photo-finish p {
    color: #64748b;
    font-size: .76rem;
}

.phone-photo-selection.error {
    color: #b91c1c;
}

.phone-photo-count {
    background: #e8f2f7;
    border: 1px solid #9ab7c4;
    border-radius: 5px;
    padding: 10px 12px;
    text-align: center;
}

.phone-photo-complete-icon {
    align-items: center;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 50%;
    color: #15803d;
    display: flex;
    font-size: 2rem;
    height: 64px;
    justify-content: center;
    justify-self: center;
    width: 64px;
}

.phone-photo-card--finished {
    margin-top: 8vh;
    text-align: center;
}

@media (max-width: 560px) {
    .phone-photo-page {
        padding: 10px;
    }

    .phone-photo-card {
        padding: 16px;
    }

    .phone-photo-actions > * {
        flex: 1 1 100%;
        text-align: center;
    }

    .dashboard-photo-section__head {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-photo-section__head button {
        justify-content: center;
        width: 100%;
    }
}

.reminder-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 48px 20px;
    text-align: center;
}

.reminder-empty svg {
    color: #64748b;
    height: 34px;
    width: 34px;
}

.reminder-empty h2 {
    font-size: 1rem;
    margin: 0;
}

.reminder-form {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 16px;
}

.reminder-form__fields {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
}

.reminder-form__fields label {
    display: grid;
    font-size: .74rem;
    font-weight: 800;
    gap: 5px;
}

.reminder-form__fields label > span {
    color: #64748b;
    font-weight: 500;
}

.reminder-form__fields input,
.reminder-form__fields textarea {
    width: 100%;
}

.reminder-form__notes {
    grid-column: 1 / -1;
}

.reminder-login-option {
    align-items: start;
    background: #f3f6ef;
    border: 1px solid #bec9ad;
    border-radius: 5px;
    cursor: pointer;
    display: flex !important;
    gap: 9px !important;
    grid-column: 1 / -1;
    padding: 10px 11px;
}

.reminder-login-option input[type="checkbox"] {
    flex: 0 0 auto;
    height: 18px;
    margin: 1px 0 0;
    width: 18px;
}

.reminder-login-option > span {
    display: grid;
    gap: 2px;
}

.reminder-login-option small {
    color: #64748b;
    font-size: .68rem;
    font-weight: 500;
}

.reminder-login-label {
    background: #e8efe0;
    border: 1px solid #bac8a7;
    border-radius: 3px;
    color: #526238;
    display: inline-block;
    font-size: .61rem;
    font-weight: 800;
    margin-top: 5px;
    padding: 2px 5px;
    text-transform: uppercase;
}

.reminder-form__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.reminder-popup-backdrop {
    align-items: center;
    background: rgba(15, 23, 42, .48);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 1000;
}

.reminder-popup {
    background: #ffffff;
    border: 1px solid #94a3b8;
    border-radius: 7px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
    max-height: min(680px, calc(100vh - 36px));
    max-width: 620px;
    overflow: auto;
    width: 100%;
}

.reminder-popup__head {
    align-items: center;
    background: #f3f6ef;
    border-bottom: 1px solid #bec9ad;
    display: grid;
    gap: 10px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 13px 15px;
}

.reminder-popup__head p {
    color: #59653e;
    font-size: .66rem;
    font-weight: 900;
    margin: 0 0 2px;
    text-transform: uppercase;
}

.reminder-popup__head h2 {
    font-size: 1.08rem;
    margin: 0;
}

.reminder-popup__head form,
.reminder-popup__item-actions form,
.reminder-popup__footer form {
    margin: 0;
}

.reminder-popup__bell {
    align-items: center;
    background: #ffffff;
    border: 1px solid #aab993;
    border-radius: 6px;
    color: #526238;
    display: flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.reminder-popup__bell svg {
    fill: none;
    height: 25px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 25px;
}

.reminder-popup__close {
    align-items: center;
    background: transparent;
    border: 0;
    color: #475569;
    cursor: pointer;
    display: flex;
    font-size: 1.55rem;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.reminder-popup__item {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 13px 15px;
}

.reminder-popup__item + .reminder-popup__item {
    border-top: 1px solid #e2e8f0;
}

.reminder-popup__item h3 {
    font-size: .9rem;
    margin: 0;
}

.reminder-popup__item time {
    color: #b45309;
    display: block;
    font-size: .7rem;
    font-weight: 800;
    margin-top: 3px;
}

.reminder-popup__item p {
    color: #475569;
    margin: 6px 0 0;
    white-space: pre-line;
}

.reminder-popup__item-actions,
.reminder-popup__footer {
    align-items: center;
    display: flex;
    gap: 7px;
}

.reminder-popup__footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    justify-content: space-between;
    padding: 10px 15px;
}

/* Brevo transactional email tracking. */
.integrations-settings {
    max-width: 960px;
}

.integration-card {
    background: rgba(248, 250, 252, .98);
    border-color: #cbd5e1;
    color: #111827;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    padding: 0;
}

.integration-card__head {
    align-items: center;
    background: #eef2f7;
    border-bottom: 1px solid #cbd5e1;
    display: flex;
    justify-content: space-between;
    padding: 13px 16px;
}

.integration-card__head h2,
.integration-card label,
.integration-test-row strong {
    color: #111827;
}

.integration-status {
    border: 1px solid #f59e0b;
    color: #92400e;
    font-size: .76rem;
    font-weight: 900;
    padding: 5px 9px;
}

.integration-status--connected {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}

.integration-status--setup {
    background: #fef3c7;
}

.integration-card__toggle {
    grid-column: 1 / -1;
}

.integration-card > .field-grid {
    padding: 20px;
}

.integration-card__actions {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    justify-content: flex-end;
    margin: 0;
    padding: 0 20px 20px;
}

.integration-test-row {
    align-items: center;
    background: rgba(248, 250, 252, .98);
    border: 1px solid #cbd5e1;
    color: #111827;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 14px 16px;
}

.integration-test-row div {
    display: grid;
    gap: 3px;
}

.integration-test-row span {
    color: var(--muted-text, #64748b);
    font-size: .78rem;
}

.dashboard-email-tracking {
    min-width: 0;
    background: var(--workbench-inner-surface, #f1f3f5);
    border: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 82%, var(--status-colour, #334155));
    border-radius: 5px;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.dashboard-email-tracking__head {
    align-items: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--status-colour, #334155) 82%, #ffffff), color-mix(in srgb, var(--status-colour, #334155) 72%, #2f2f2f));
    border-bottom: 1px solid color-mix(in srgb, var(--status-colour, #334155) 42%, var(--border, #e4e4e7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
    color: var(--status-text-colour, #ffffff);
    display: flex;
    gap: 6px;
    justify-content: space-between;
    min-height: 27px;
    padding: 4px 6px;
}

.dashboard-email-tracking__head h3,
.dashboard-email-tracking__actions {
    align-items: center;
    display: flex;
    gap: 5px;
    margin: 0;
}

.dashboard-email-tracking__head h3 {
    background: transparent;
    color: inherit;
    font-size: .68rem;
    line-height: 1.2;
    padding: 0;
}

.dashboard-email-tracking__head svg,
.dashboard-email-tracking__actions svg {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 16px;
}

.dashboard-email-tracking__actions form {
    margin: 0;
}

.dashboard-email-tracking__actions .button-secondary {
    align-items: center;
    background: #ffffff;
    border-color: #d4d4d4;
    color: #202020;
    display: inline-flex;
    font-size: .67rem;
    font-weight: 800;
    gap: 4px;
    min-height: 27px;
    padding: 4px 7px;
}

body[class*="theme-"] .dashboard-email-tracking__actions .button-secondary:not(.button-danger),
.dashboard-email-tracking__actions .button-secondary:not(.button-danger) {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(255, 255, 255, .86);
    color: var(--status-colour, #166534);
    min-height: 23px;
    padding: 3px 6px;
}

body[class*="theme-"] .dashboard-email-tracking__actions .button-secondary:not(.button-danger):hover,
body[class*="theme-"] .dashboard-email-tracking__actions .button-secondary:not(.button-danger):focus,
.dashboard-email-tracking__actions .button-secondary:not(.button-danger):hover,
.dashboard-email-tracking__actions .button-secondary:not(.button-danger):focus {
    background: color-mix(in srgb, #ffffff 86%, var(--status-colour, #166534));
    border-color: #ffffff;
    color: var(--status-colour, #166534);
}

.dashboard-email-tracking__table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.dashboard-email-tracking__table {
    border-collapse: collapse;
    font-size: .68rem;
    table-layout: fixed;
    min-width: 0;
    width: 100%;
}

.dashboard-email-tracking__table th,
.dashboard-email-tracking__table td {
    border-bottom: 1px solid #d4d4d4;
    padding: 5px 7px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    white-space: normal;
}

.dashboard-email-tracking__table th {
    background: #f4f4f1;
    color: #242424;
    font-weight: 900;
    font-size: .65rem;
    letter-spacing: 0;
}

.dashboard-email-tracking__table th:nth-child(1) { width: 11%; }
.dashboard-email-tracking__table th:nth-child(2) { width: 12%; }
.dashboard-email-tracking__table th:nth-child(3) { width: 25%; }
.dashboard-email-tracking__table th:nth-child(n+4) { width: 17.33%; }

.dashboard-email-tracking__table:not(.dashboard-email-tracking__table--full) th:nth-child(1) { width: 13%; }
.dashboard-email-tracking__table:not(.dashboard-email-tracking__table--full) th:nth-child(3) { width: 23%; }

.dashboard-email-tracking__table--full th:nth-child(3),
.dashboard-email-tracking__table--full th:nth-child(4) {
    width: 18%;
}

.dashboard-email-tracking__table--full {
    table-layout: auto;
}

.dashboard-email-tracking__event-date {
    color: #525252;
    display: block;
    margin-top: 2px;
    white-space: nowrap;
}

.dashboard-email-tracking__status {
    border-left: 4px solid transparent;
    font-weight: 900;
    text-transform: lowercase;
}

.dashboard-email-tracking__status--opened {
    background: #d8f5df;
    border-left-color: #22c55e;
    color: #166534;
}

.dashboard-email-tracking__status--unopened {
    background: #ffe1e1;
    border-left-color: #ef4444;
    color: #991b1b;
}

.dashboard-email-tracking__status--failed {
    background: #fef3c7;
    border-left-color: #f59e0b;
    color: #92400e;
}

.dashboard-email-tracking__empty {
    color: var(--muted-text, #64748b);
    font-size: .7rem;
    margin: 0;
    padding: 10px 8px;
}

@media (max-width: 680px) {
    .jobsheet-anchor-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .setup-anchor-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .setup-anchor {
        justify-content: flex-start;
        min-width: 0;
    }

    .setup-jump-footer {
        align-items: stretch;
    }

    .jobsheet-anchor {
        justify-content: flex-start;
        min-width: 0;
    }

    .jobsheet-detached-submit:has(.jobsheet-anchor-nav--footer) {
        align-items: stretch;
        flex-direction: column;
    }

    .jobsheet-footer-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-left: 0;
    }

    .jobsheet-footer-actions .button,
    .jobsheet-footer-actions .button-secondary {
        justify-content: center;
        text-align: center;
    }

    .section-head:not(.section-head--compact),
    .module-page-head {
        align-items: stretch;
    }

    .page-back-button {
        justify-content: center;
    }

    .integration-card__head,
    .integration-test-row {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-email-tracking__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-email-tracking__actions {
        flex-wrap: wrap;
    }

    .dashboard-email-tracking__table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .dashboard-email-tracking__table,
    .dashboard-email-tracking__table tbody,
    .dashboard-email-tracking__table tr {
        display: block;
        width: 100%;
    }

    .dashboard-email-tracking__table tr {
        border-bottom: 3px solid #d4d4d4;
    }

    .dashboard-email-tracking__table td {
        align-items: start;
        display: grid;
        gap: 8px;
        grid-template-columns: 78px minmax(0, 1fr);
        width: auto;
    }

    .dashboard-email-tracking__table td::before {
        color: #525252;
        content: attr(data-label);
        font-weight: 900;
    }

    .dashboard-email-tracking__status {
        border-left-width: 4px;
    }
}

.reminder-popup__footer > a {
    color: #465031;
    font-size: .74rem;
    font-weight: 800;
}

@media (max-width: 760px) {
    .dashboard-status-quick-row,
    .dashboard-statistics-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-statistics-summary > div:first-child {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 680px) {
    .reminder-page__head,
    .reminder-row,
    .reminder-popup__item {
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr);
    }

    .reminder-page__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .reminder-row__icon {
        display: none;
    }

    .reminder-row__actions,
    .reminder-popup__item-actions {
        justify-content: flex-start;
    }

    .reminder-form__fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .reminder-popup__footer {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Workbench card bodies share one status tint; controls keep semantic colours. */
.dashboard-workbench .dashboard-preview-section,
.dashboard-workbench .dashboard-workbench-placeholder,
.dashboard-workbench .dashboard-workbench-section,
.dashboard-workbench .dashboard-activity-module,
.dashboard-workbench .dashboard-job-sales,
.dashboard-workbench .dashboard-special-orders,
.dashboard-workbench .dashboard-job-sales .job-sales-pane,
.dashboard-workbench .job-sales-cart__footer,
.dashboard-workbench .job-sales-proforma,
.dashboard-workbench .job-sales-document-card,
.dashboard-workbench .job-sales-document-card footer,
.dashboard-workbench .job-sales-empty--panel,
.dashboard-workbench .job-sales-ledger,
.dashboard-workbench .job-sales-add,
.dashboard-workbench .job-sales-add__grid,
.dashboard-workbench .dashboard-special-orders .job-sales-form--special {
    background: var(--workbench-card-surface);
}