* {
    box-sizing: border-box;
}

:root {
    --panel-header-height: 50px;
    --panel-header-padding: 7px 16px;
}

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: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.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-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 .work-order-visible-panel,
.theme-transparent_cards .work-order-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,
.theme-futuristic .radio-pill:has(input:checked) {
    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_blue .radio-pill:has(input:checked),
.theme-black_red .nav__link--active,
.theme-black_red .button,
.theme-black_red .radio-pill:has(input:checked),
.theme-black_green .nav__link--active,
.theme-black_green .button,
.theme-black_green .radio-pill:has(input:checked) {
    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;
}

input[type="file"] {
    background: color-mix(in srgb, var(--surface, #ffffff) 88%, var(--interface-boxed-page-bg, #e5e7eb));
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 6px;
    cursor: pointer;
    min-height: 42px;
    overflow: hidden;
    padding: 4px 12px 4px 4px;
}

input[type="file"]::file-selector-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);
    border-radius: 6px;
    color: var(--card-header-text, #ffffff);
    cursor: pointer;
    font-weight: 850;
    margin-right: 10px;
    min-height: 32px;
    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 {
    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: 50;
}

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

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

.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(285px, 27fr) minmax(420px, 50fr) minmax(max-content, 23fr);
    gap: 12px;
}

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

.topbar__inner:has(.dashboard-search--topbar) .topbar__center {
    justify-self: start;
    max-width: 680px;
    min-width: 0;
    width: 100%;
}

.topbar__inner:has(.dashboard-search--topbar) .nav {
    justify-content: flex-end;
    min-width: 0;
}

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

.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__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__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: 80;
}

.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;
}

.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: 108px;
}

: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: 8px 10px;
    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 {
    padding-top: 28px;
    padding-bottom: 48px;
}

.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;
}

.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(285px, 27fr) minmax(0, 73fr);
    margin: -28px -24px -48px;
    min-height: calc(100vh - 64px);
}

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

.dashboard-board__left {
    padding-left: 24px;
}

.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 auto;
    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;
}

.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 12px;
}

.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: 8px;
}

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

.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: 40px;
    justify-content: center;
    justify-self: start;
    letter-spacing: 0;
    line-height: 1;
    overflow: hidden;
    padding: 0 4px;
    text-transform: uppercase;
    width: 30px;
}

.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: 72px;
    padding: 0;
    width: 72px;
}

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

.job-mini-card__main {
    display: grid;
    gap: 1px;
    grid-column: 2;
    grid-row: 1;
    justify-items: center;
    min-width: 0;
}

.job-mini-card__title {
    align-items: center;
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
    font-size: .98rem;
    font-weight: 700;
    justify-content: 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__inline-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1px 4px;
    justify-content: center;
    justify-self: center;
    margin: 0;
    max-width: 100%;
    text-align: center;
    width: min(100%, 190px);
}

.job-mini-card__inline-meta div {
    align-items: center;
    display: flex;
    gap: 3px;
    justify-content: center;
    min-width: 0;
    order: 7;
    padding: 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 {
    font-size: .78rem;
    font-weight: 500;
    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-meta .job-mini-card__meta-item--device-type {
    flex-basis: 100%;
    order: 3;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--model {
    flex-basis: 100%;
    max-width: 100%;
    order: 4;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--time {
    flex-basis: 100%;
    order: 5;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--repair-cart {
    flex-basis: 100%;
    order: 6;
}

.job-mini-card__inline-meta .job-mini-card__meta-item--received {
    flex-basis: 100%;
    order: 7;
}

.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 {
    font-size: .73rem;
}

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

.job-mini-card__inline-meta--details {
    margin-top: 8px;
}

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

.job-mini-card__inline-meta--details dt {
    color: var(--muted-text, #71717a);
}

.job-mini-card__fault {
    border-top: 1px solid var(--border, #e4e4e7);
    grid-column: 1 / -1;
    grid-row: 2;
    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;
}

.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-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;
}

.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(4, minmax(0, 1fr));
}

.dashboard-status-quick-row .dashboard-status-card {
    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 {
    white-space: nowrap;
}

.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-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 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: color-mix(in srgb, var(--interface-split-right-bg, #ffffff) 72%, 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-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 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;
    padding: 0 14px 14px;
}

.dashboard-technician-stat-card {
    background: color-mix(in srgb, var(--surface, #ffffff) 88%, var(--interface-split-right-bg, #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-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-technician-stat-grid div {
    display: grid;
    min-height: 64px;
}

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

.dashboard-technician-stat-grid span {
    align-self: end;
    color: var(--muted-text, #71717a);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.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-placeholder {
    min-height: 220px;
}

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

.dashboard-analytics-grid span {
    background: linear-gradient(180deg, var(--surface-soft, #f4f4f5), var(--surface, #fff));
    border: 1px dashed var(--border, #d4d4d8);
    border-radius: 8px;
    min-height: 70px;
}

.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: #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 {
    gap: 0;
}

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

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

.dashboard-workbench-topbar {
    align-items: center;
    background: var(--card-header-bg, color-mix(in srgb, var(--primary, #18181b) 92%, #ffffff));
    border-radius: 8px 8px 0 0;
    color: #fff;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 31px;
    padding: 3px 8px;
}

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

.dashboard-board__right.dashboard-status-panel {
    padding: 28px 24px 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: #fff;
    font-size: 1.08rem;
    line-height: 1.15;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
}

.dashboard-workbench-topbar__identity span,
.dashboard-workbench-topbar__ids span {
    color: rgba(255, 255, 255, .86);
    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: #fff;
}

.dashboard-progress-eye {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    color: #d60000;
    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: #ffe8e8;
    color: #9d0000;
}

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

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

.dashboard-workbench-menubar {
    align-items: center;
    background: color-mix(in srgb, var(--card-header-bg, #2f2f2f) 84%, #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: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:hover .dashboard-workbench-menu__trigger,
.dashboard-workbench-menu:focus-within .dashboard-workbench-menu__trigger {
    background: color-mix(in srgb, var(--card-header-bg, #2f2f2f) 72%, #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 button:hover:not(:disabled) {
    background: #e8f2ff;
}

.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-status-icon {
    border: 2px solid #42c7ff;
    display: inline-block;
    height: 13px;
    width: 16px;
}

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

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

.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) {
    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-placeholder-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 12px;
}

.dashboard-workbench-placeholder {
    background: #ffffff;
    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: 3;
    order: 3;
}

.dashboard-device-details-card {
    align-items: start;
    display: grid;
    column-gap: 18px;
    row-gap: 10px;
    grid-template-columns: minmax(108px, 31%) 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-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% + 4px);
    z-index: 80;
}

.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-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: 22px 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__direction {
    font-size: 1.1rem;
    font-weight: 900;
}

.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;
    display: grid;
    gap: 60px;
    grid-template-columns: repeat(3, 10px);
    grid-template-rows: repeat(3, 10px);
    justify-content: center;
    min-height: 180px;
    padding: 20px 0 18px;
    position: relative;
    touch-action: none;
    user-select: none;
}

.dashboard-pattern-line {
    height: 150px;
    inset: 0;
    margin: auto;
    pointer-events: none;
    position: absolute;
    width: 150px;
}

.dashboard-pattern-line polyline {
    fill: none;
    stroke: #16a34a;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 8;
}

.dashboard-pattern-grid button {
    background: #000;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    display: block;
    height: 10px;
    justify-self: center;
    padding: 0;
    position: relative;
    width: 10px;
    z-index: 1;
}

.dashboard-pattern-grid button.is-selected {
    background: #15c515;
    box-shadow: 0 0 0 4px rgba(21, 197, 21, .18);
}

.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: 10px;
}

.dashboard-workbench-device-icon--details img,
.dashboard-workbench-device-icon--details span {
    height: clamp(88px, 10vw, 128px);
    width: clamp(88px, 10vw, 128px);
}

@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(92px, .85fr) minmax(0, 1.15fr);
    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(0, 1fr) auto minmax(0, 1fr);
}

.dashboard-device-specifications .dashboard-specification-list--picture {
    grid-column: 1 / -1;
}

.dashboard-device-specifications .dashboard-specification-list--picture div::before {
    color: var(--muted-text, #71717a);
    content: "-";
    font-weight: 850;
    grid-column: 2;
}

.dashboard-device-specifications .dashboard-specification-list--picture dt {
    grid-column: 1;
    overflow-wrap: normal;
}

.dashboard-device-specifications .dashboard-specification-list--picture dd {
    grid-column: 3;
    text-align: left;
}

.dashboard-device-specifications .dashboard-specification-list dt {
    font-size: .68rem;
}

.dashboard-device-specifications .dashboard-specification-list dd {
    font-size: .82rem;
    text-align: right;
}

.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) {
    .interface-save-swatch {
        grid-template-columns: 1fr;
    }

    .dashboard-status-quick-row {
        grid-template-columns: 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: 118px;
    }

    .dashboard-device-specifications .dashboard-specification-list dd {
        text-align: left;
    }
}

.dashboard-preview-photo-form input[type="file"] {
    background: var(--surface-soft, #fafafa);
}

.dashboard-photo-grid {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-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: 5px;
    width: 87px;
}

.dashboard-photo-thumb {
    display: block;
    height: 75px;
    width: 75px;
}

.dashboard-photo-thumb img {
    border-radius: 5px;
    height: 75px;
    object-fit: cover;
    width: 75px;
}

.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-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;
}

.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;
}

.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;
}

.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-work-order-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;
}

.work-order-create-head {
    align-items: center;
}

.work-order-create-head__title {
    align-items: center;
    display: flex;
    gap: 16px;
}

.work-order-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: 16px;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--primary, #18181b) 18%, transparent);
    color: var(--primary, #18181b);
    display: inline-flex;
    flex: 0 0 auto;
    height: 82px;
    justify-content: center;
    width: 82px;
}

.work-order-create-icon svg {
    fill: color-mix(in srgb, var(--primary, #18181b) 12%, var(--surface, #fff));
    height: 62px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
    width: 62px;
}

.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: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #ffffff;
    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__save {
    margin-left: auto;
}

.settings-subnav--footer {
    justify-content: space-between;
}

.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: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));
}

.work-order-contact-grid {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.work-order-create-detail-grid {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.work-order-machine-card,
.work-order-intake-card {
    gap: 0;
    grid-template-columns: 1fr;
    overflow: hidden;
    padding: 0;
}

.work-order-machine-card {
    order: 2;
}

.work-order-intake-card {
    order: 1;
}

.work-order-machine-card .form-section__head,
.work-order-intake-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: 0;
    padding: var(--panel-header-padding);
}

.work-order-machine-card .form-section__head h2,
.work-order-intake-card .form-section__head h2 {
    font-size: 1.05rem;
    line-height: 1.2;
    margin: 0;
}

.work-order-machine-card > .field-grid,
.work-order-intake-card > .field-grid {
    padding: 16px;
}

.work-order-contact-card {
    gap: 12px;
    grid-template-columns: 1fr;
    overflow: hidden;
    padding: 16px;
}

.work-order-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);
}

.work-order-contact-card .form-section__head h2 {
    font-size: 1.05rem;
    margin: 0;
}

.work-order-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;
}

.work-order-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;
}

.work-order-subsection-field .radio-grid {
    padding: 0 12px 12px;
}

.preferred-contact-grid.radio-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.preferred-contact-grid .radio-pill {
    font-size: .82rem;
    justify-content: center;
    padding: 7px 8px;
    text-align: center;
}

.work-order-intake-inline {
    display: grid;
    gap: 10px;
    padding-bottom: 10px;
}

.work-order-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;
}

.work-order-intake-inline .form-section__head h2 {
    font-size: .9rem;
    line-height: 1;
}

.work-order-intake-inline .work-order-intake-timing-grid {
    gap: 12px;
    grid-template-columns: minmax(0, 1.35fr) minmax(170px, .65fr);
    padding: 0 24px;
}

.work-order-intake-inline .radio-pill {
    font-size: .86rem;
    line-height: 1.1;
    padding: 7px 10px;
}

.work-order-intake-inline .stack {
    gap: 10px;
}

.work-order-intake-inline label {
    font-size: .86rem;
    line-height: 1.15;
}

.work-order-intake-inline input[type="datetime-local"] {
    font-size: .9rem;
    padding: 8px 10px;
}

.work-order-intake-head {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr);
}

.field-grid--compact {
    gap: 12px;
}

.work-order-machine-grid,
.work-order-repair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-order-machine-card .icon-grid--brand.icon-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-order-machine-grid .field-wide,
.work-order-repair-grid .field-wide {
    grid-column: 1 / -1;
}

.work-order-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;
}

.work-order-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;
}

.work-order-collapsible summary::-webkit-details-marker {
    display: none;
}

.work-order-collapsible summary::after {
    content: "+";
    font-size: 1rem;
    font-weight: 900;
}

.work-order-collapsible[open] summary::after {
    content: "-";
}

.work-order-collapsible__body {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.work-order-collapsible__body > .field,
.work-order-collapsible__body > .field-wide,
.work-order-collapsible__body .asset-detail-panel {
    grid-column: 1 / -1;
}

.work-order-collapsible .question-panel {
    margin: 0;
}

.work-order-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;
}

.work-order-visible-panel .work-order-subsection-bar {
    margin: 0;
}

.work-order-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;
}

.work-order-create-credential-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-order-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;
}

.work-order-create-credential-panel > strong {
    font-size: .92rem;
}

.input-action-row {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.work-order-create-pattern {
    align-items: center;
    display: grid;
    gap: 60px;
    grid-template-columns: repeat(3, 10px);
    grid-template-rows: repeat(3, 10px);
    justify-content: center;
    min-height: 150px;
}

.work-order-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;
}

.work-order-intake-status-list.radio-grid {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
}

.work-order-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;
    min-height: 220px;
    place-items: center;
    text-align: center;
}

.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 auto;
}

.staff-edit-head__photo {
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 6px;
    height: 34px;
    object-fit: cover;
    width: 34px;
}

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

.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-contact-address-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-contact-address-grid__wide {
    grid-column: 1 / -1;
}

.staff-profile-photo-field {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 50px minmax(250px, 1fr);
}

.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: 50px;
    justify-content: center;
    object-fit: cover;
    text-align: center;
    width: 50px;
}

.staff-profile-photo-field input[type="file"] {
    min-width: 250px;
    width: 100%;
}

.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: 1 / span 2;
    grid-row: 1 / span 3;
}

.inventory-form .inventory-item-name-field {
    grid-column: 4;
    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--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;
    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);
}

.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;
}

.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-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(170px, 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-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-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-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 {
    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 {
    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 {
    color: currentColor;
    margin: 0 0 2px;
    opacity: .74;
}

.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) {
    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-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-checkbox-stack {
    display: grid;
    gap: 8px;
    max-height: 238px;
    overflow: auto;
    padding-right: 4px;
}

.customisation-choice-grid .customisation-checkbox-stack .checkbox-row {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 0;
    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-current-label {
    min-width: 0;
}

.dashboard-group-current-label .badge {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.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-shared-field-panel {
    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 {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dashboard-shared-field-panel__body[hidden] {
    display: none;
}

.dashboard-shared-field-panel__layout {
    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-status-tabs .is-active,
.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-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 .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));
}

.work-order-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;
}

.work-order-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;
}

.work-order-visible-panel .icon-grid--compact .icon-square {
    width: 38px;
}

.icon-grid--compact .icon-tile > span:last-child {
    font-size: .78rem;
    font-weight: 850;
}

.work-order-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;
    letter-spacing: .08em;
}

.brand-logo--dell {
    font-size: 13px;
    letter-spacing: .04em;
}

.brand-logo--lenovo {
    fill: #fff;
    font-size: 12px;
}

.brand-logo--pcs {
    font-size: 12px;
}

.brand-mark {
    fill: var(--primary, #18181b);
}

.brand-cut {
    fill: var(--surface, #fff);
}

.brand-line,
.brand-stroke,
.asset-line {
    fill: none;
    stroke: var(--primary, #18181b);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.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-detail-column {
    align-content: start;
    display: grid;
    gap: 18px;
}

.staff-profile-detail-column h2 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.staff-profile-detail-identity {
    align-items: center;
    display: flex;
    gap: 16px;
}

.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 {
    border-top: 1px solid var(--border, #e4e4e7);
    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 {
    border-top: 1px solid var(--border, #e4e4e7);
    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 (max-width: 1180px) {
    .topbar__inner:has(.dashboard-search--topbar) {
        grid-template-columns: minmax(285px, 30fr) minmax(360px, 47fr) minmax(max-content, 23fr);
    }

    .dashboard-board {
        grid-template-columns: minmax(285px, 30fr) minmax(0, 70fr);
    }

    .dashboard-status-quick-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-workbench-device-icon {
        min-height: 205px;
    }

    .dashboard-workbench-device-icon img,
    .dashboard-workbench-device-icon span {
        height: 180px;
        width: 180px;
    }

    .email-provider-settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customisation-form .dashboard-group-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customisation-choice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .customisation-choice-header-grid {
        display: none;
    }
}

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

    .dashboard-board__left,
    .dashboard-board__right,
    .dashboard-board__right.dashboard-status-panel {
        padding-left: 18px;
        padding-right: 18px;
    }

    .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,
    .work-order-create-detail-grid,
    .staff-profile-grid,
    .staff-profile-columns,
    .staff-profile-detail-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,
    .work-order-machine-grid,
    .work-order-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 {
        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;
    }

    .work-order-machine-card .icon-grid--brand.icon-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .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(96px, 128px) minmax(0, 1fr);
    }

    .dashboard-workbench-order-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-workbench-device-icon {
        min-height: 140px;
    }

    .dashboard-workbench-device-icon img,
    .dashboard-workbench-device-icon span {
        height: 104px;
        width: 104px;
    }

    .dashboard-workbench-list div {
        grid-template-columns: 1fr;
    }

    .dashboard-device-specifications .dashboard-specification-list div {
        grid-template-columns: minmax(88px, .85fr) minmax(0, 1.15fr);
    }

    .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,
    .work-order-contact-grid,
    .work-order-create-credential-grid,
    .work-order-intake-head,
    .work-order-intake-timing-grid,
    .service-split-grid,
    .theme-grid,
    .status-colour-row {
        grid-template-columns: 1fr;
    }

    .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-grid,
    .settings-business-body {
        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;
    }

    .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;
}

.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 {
    background: color-mix(in srgb, var(--danger, #dc2626) 9%, #ffffff);
    border-color: color-mix(in srgb, var(--danger, #dc2626) 24%, #ffffff);
    border-radius: 6px;
    color: #b91c1c;
    font-weight: 850;
}

.button-danger:hover,
.button-danger:focus {
    background: var(--danger, #dc2626);
    border-color: var(--danger, #dc2626);
    color: #ffffff;
}

.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;
}

.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-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;
}

.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) {
    .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;
}

.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;
}

.jobsheet-receipt-customer {
    display: grid;
    gap: 16px;
}

.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;
}

.receipt-customer-title h2 {
    color: var(--text, #111827);
    font-size: 2.15rem;
    line-height: 1.1;
    margin: 0;
}

.receipt-key-details {
    display: grid;
    gap: 7px;
    margin: 0;
}

.receipt-key-details div {
    display: grid;
    gap: 10px;
    grid-template-columns: 160px minmax(0, 1fr);
}

.receipt-key-details dt {
    color: var(--muted-text, #3f3f46);
    font-weight: 700;
}

.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;
}

.receipt-summary-text {
    line-height: 1.5;
    white-space: pre-wrap;
}

.jobsheet-receipt-business {
    display: grid;
    gap: 10px;
    justify-items: end;
    text-align: right;
}

.jobsheet-receipt-business h1 {
    color: var(--text, #111827);
    font-size: 2rem;
    line-height: 1.1;
    margin: 0;
}

.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;
}

.jobsheet-receipt-business address {
    color: var(--muted-text, #52525b);
    font-style: normal;
    line-height: 1.45;
    margin: 0;
    white-space: pre-line;
}

.receipt-qr {
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 8px;
    padding: 8px;
}

.receipt-qr img {
    display: block;
    height: 118px;
    width: 118px;
}

.receipt-progress-url {
    color: var(--muted-text, #71717a);
    font-size: .78rem;
    margin: 0;
    max-width: 260px;
    overflow-wrap: anywhere;
}

.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-grid {
    display: grid;
    gap: 8px 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-business-body {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr);
}

.settings-business-grid .field {
    gap: 4px;
}

.settings-business-grid label,
.settings-business-numbering label {
    font-size: .78rem;
}

.settings-business-grid input,
.settings-business-numbering input {
    min-height: 36px;
    padding: 8px 10px;
}

.settings-business-grid .field-hint,
.settings-business-numbering .field-hint {
    font-size: .72rem;
    line-height: 1.25;
    margin: 0;
}

.settings-business-logo-field input[type="file"] {
    min-width: 0;
    width: 100%;
}

.settings-setup-logo-panel {
    display: grid;
    gap: 6px;
}

.settings-setup-logo-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, 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: center;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.setup-icon-upload-action input[type="file"] {
    min-width: 0;
    width: 100%;
}

.settings-business-numbering {
    align-self: stretch;
    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;
}

.settings-business-numbering .form-section__head {
    margin: -10px -10px 0;
}

.settings-business-numbering .field-grid {
    gap: 8px;
    grid-template-columns: 1fr;
}

.settings-business-numbering .submit-bar {
    justify-content: stretch;
    margin-top: auto;
}

.settings-business-numbering .submit-bar .button {
    width: 100%;
}

.settings-store-section .section-inline-head {
    gap: 8px;
}

.settings-store-section .section-inline-head h3 {
    font-size: .95rem;
}

.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%;
}

.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(2, 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;
}

.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;
    }

    .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;
    }
}