/* DevExpress Fluent baseline with EasyConnect app layout compatibility. */
:root {
    --bs-blue: #0d6efd;
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success: #198754;
    --bs-success-rgb: 25, 135, 84;
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255, 193, 7;
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-white: #fff;
    --bs-black: #000;
    --bs-body-bg: #ffffff;
    --bs-body-color: #242424;
    --bs-emphasis-color: #111827;
    --bs-secondary-color: #4b5563;
    --bs-secondary-bg: #f3f6fb;
    --bs-tertiary-bg: #f8fafc;
    --bs-border-color: #d7dde7;
    --bs-border-width: 1px;
    --bs-border-radius: .375rem;
    --bs-link-color: #0b5ed7;
    --bs-link-hover-color: #084298;
    --bs-primary-text-emphasis: #174ea6;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-primary-bg-subtle: #dbeafe;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
}
[data-appearance="dark"] {
    --bs-body-bg: #1f1f1f;
    --bs-body-color: #f2f2f2;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #c7c7c7;
    --bs-secondary-bg: #171717;
    --bs-tertiary-bg: #262626;
    --bs-border-color: #3a3a3a;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #d1d5db;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
}
.d-flex{display:flex!important}.d-inline-block{display:inline-block!important}.d-grid{display:grid!important}.d-none{display:none!important}.flex-column{flex-direction:column!important}.flex-row{flex-direction:row!important}.flex-wrap{flex-wrap:wrap!important}.flex-grow-1{flex-grow:1!important}.align-items-start{align-items:flex-start!important}.align-items-center{align-items:center!important}.align-items-end{align-items:flex-end!important}.align-middle{vertical-align:middle!important}.justify-content-start{justify-content:flex-start!important}.justify-content-center{justify-content:center!important}.justify-content-end{justify-content:flex-end!important}.justify-content-between{justify-content:space-between!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.column-gap-2{column-gap:.5rem!important}.column-gap-3{column-gap:1rem!important}.row-gap-1{row-gap:.25rem!important}.row-gap-2{row-gap:.5rem!important}.row-gap-3{row-gap:1rem!important}
.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}
.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:1rem!important;padding-right:1rem!important}.pt-2{padding-top:.5rem!important}.pb-3{padding-bottom:1rem!important}@media (min-width:768px){.p-md-5{padding:3rem!important}}
.w-100{width:100%!important}.w-auto{width:auto!important}.h-100{height:100%!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.text-start{text-align:left!important}.text-center{text-align:center!important}.text-end{text-align:right!important}.text-wrap{white-space:normal!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-uppercase{text-transform:uppercase!important}.fw-normal{font-weight:400!important}.fw-semibold{font-weight:600!important}.fw-bold{font-weight:700!important}.fs-6{font-size:1rem!important}.small{font-size:.875em}.list-unstyled{padding-left:0;list-style:none}.rounded{border-radius:var(--app-radius-md,.375rem)!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.shadow-sm{box-shadow:var(--app-shadow-sm)!important}
.container,.container-fluid{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}.row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem}.row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.g-1{margin-left:-.125rem;margin-right:-.125rem;row-gap:.25rem}.g-1>*{padding-left:.125rem;padding-right:.125rem}.g-2{margin-left:-.25rem;margin-right:-.25rem;row-gap:.5rem}.g-2>*{padding-left:.25rem;padding-right:.25rem}.g-3{margin-left:-.5rem;margin-right:-.5rem;row-gap:1rem}.g-3>*{padding-left:.5rem;padding-right:.5rem}.col-2{width:16.6667%}.col-3{width:25%}.col-4{width:33.3333%}.col-5{width:41.6667%}.col-6{width:50%}.col-7{width:58.3333%}.col-8{width:66.6667%}.col-12{width:100%}@media (min-width:576px){.col-sm-3{width:25%}.col-sm-6{width:50%}}@media (min-width:768px){.col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}.col-md-4{width:33.3333%}.col-md-5{width:41.6667%}.col-md-6{width:50%}.col-md-8{width:66.6667%}.col-md-9{width:75%}.col-md-12{width:100%}}@media (min-width:992px){.col-lg-3{width:25%}.col-lg-6{width:50%}.col-lg-8{width:66.6667%}}@media (min-width:1200px){.col-xl-3{width:25%}}
.text-muted{color:var(--bs-secondary-color)!important}.text-primary{color:var(--bs-primary-text-emphasis)!important}.text-secondary{color:var(--bs-secondary-text-emphasis)!important}.text-success{color:var(--bs-success-text-emphasis)!important}.text-danger{color:var(--bs-danger-text-emphasis)!important}.text-info{color:var(--bs-info-text-emphasis)!important}.bg-primary{background:var(--bs-primary)!important;color:#fff!important}.bg-secondary{background:var(--bs-secondary)!important;color:#fff!important}.bg-success{background:var(--bs-success)!important;color:#fff!important}.bg-danger{background:var(--bs-danger)!important;color:#fff!important}.bg-warning{background:var(--bs-warning)!important;color:#1f2933!important}.bg-info{background:var(--bs-info)!important;color:#1f2933!important}.bg-light{background:var(--bs-light)!important;color:#1f2933!important}.bg-info-subtle{background:var(--bs-info-bg-subtle)!important}.border{border:1px solid var(--bs-border-color)!important}.badge{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:50rem}.alert{padding:1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:var(--app-radius-md,.375rem)}.alert-danger{color:var(--bs-danger-text-emphasis);background:var(--bs-danger-bg-subtle);border-color:var(--bs-danger)}.alert-warning{color:var(--bs-warning-text-emphasis);background:var(--bs-warning-bg-subtle);border-color:var(--bs-warning)}.alert-info{color:var(--bs-info-text-emphasis);background:var(--bs-info-bg-subtle);border-color:var(--bs-info)}.alert-light{color:var(--bs-body-color);background:var(--bs-tertiary-bg);border-color:var(--bs-border-color)}.alert-heading{font-weight:700}.table{width:100%;border-collapse:collapse}.table-bordered>:not(caption)>*{border-width:1px 0}.table-bordered>:not(caption)>*>*{border-width:0 1px;border-color:var(--bs-border-color)}.table-hover tbody tr:hover{background:var(--bs-tertiary-bg)}.table-responsive{overflow-x:auto}
.card{display:flex;flex-direction:column}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none;border:1px solid transparent;border-radius:var(--app-radius-md,.375rem);padding:.375rem .75rem;min-height:2.375rem}.btn-primary{color:#fff;background:var(--bs-primary);border-color:var(--bs-primary)}.btn-secondary{color:#fff;background:var(--bs-secondary);border-color:var(--bs-secondary)}.btn-outline-secondary{color:var(--bs-secondary-text-emphasis);background:transparent;border-color:var(--bs-secondary-text-emphasis)}.btn-link{color:var(--bs-link-color);background:transparent;border-color:transparent}.btn-sm{min-height:2rem;padding:.25rem .5rem;font-size:.875rem}.btn-lg{min-height:3rem;padding:.5rem 1rem;font-size:1.125rem}.btn-group{display:inline-flex;vertical-align:middle}.btn-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.form-label{display:inline-block;margin-bottom:.5rem;font-weight:600}.form-control,.form-select{display:block;width:100%;padding:.375rem .75rem;color:var(--bs-body-color);background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--app-radius-md,.375rem)}.form-check{display:block;min-height:1.5rem;padding-left:1.5rem}.form-check-input{float:left;margin-left:-1.5rem}.form-check-label{display:inline-block}.input-group{display:flex;align-items:stretch;width:100%}.input-group>.form-control{position:relative;flex:1 1 auto;width:1%;min-width:0}
.top-0{top:0!important}.start-100{left:100%!important}.translate-middle{transform:translate(-50%,-50%)!important}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.app-shell :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #0b5ed7;
    outline-offset: 2px;
}
[data-appearance="dark"] .app-shell :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: #93c5fd;
}
.app-grid-action-dropdown {
    display: inline-flex;
    margin-left: .35rem;
    vertical-align: middle;
}
.app-devexpress-accordion {
    width: 100%;
}
.app-raw-data-panel {
    max-height: 500px;
    overflow-y: auto;
}
.app-raw-data-panel pre {
    margin: 0;
    white-space: pre-wrap;
}

/* Font Awesome Free is loaded in App.razor. Keep only the two custom DevExpress toolbar aliases that are not Font Awesome class names. */
.grid-toolbar-export,
.grid-toolbar-column-chooser {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    min-width: 1.1em;
    height: 1.1em;
    color: currentColor;
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}
.grid-toolbar-export::before { content: "\f56e"; }
.grid-toolbar-column-chooser::before { content: "\f03a"; }

/* Minimal app-specific styling.
   DevExpress Fluent supplies the component theme; this file preserves application layout and semantic colors. This file
   holds only the classes razor pages reference directly, plus the Blazor
   error-boundary stub. */

/* Width utilities (referenced inline by ~2 list pages - keep) */
.width-20  { width: 20px; }
.width-50  { width: 50px; }
.width-100 { width: 100px; }
.width-140 { width: 140px; }
.width-150 { width: 150px; }
.width-200 { width: 200px; }
.width-300 { width: 300px; }
.auto-width { width: 1%; white-space: nowrap; }

/* Ticket color swatch - used in Tickets/List.razor + Upsert variants */
.ticket-color-box {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    margin-right: .4rem;
    vertical-align: -.12rem;
    background: var(--app-ticket-swatch-color, var(--bs-secondary-color));
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
}
.app-ticket-swatch-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.app-ticket-swatch-label .ticket-color-box {
    margin-right: 0;
}

/* Blazor framework hooks */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--bs-success); }
.invalid                              { outline: 1px solid var(--bs-danger); }
.validation-message                   { color: var(--bs-danger); }

.blazor-error-boundary {
    background: var(--bs-danger);
    color: var(--bs-white);
    padding: 1rem 1rem 1rem 3.7rem;
}
.blazor-error-boundary::after        { content: "Si è verificato un errore."; }
[lang="en"] .blazor-error-boundary::after,
:root[data-locale="en"] .blazor-error-boundary::after { content: "An error occurred."; }

/* Appearance toggle icons - visibility driven off [data-appearance].
   App.razor's blocking pre-paint script always sets the attribute, so the
   no-attribute fallback is dead. */
[data-appearance="dark"]  .app-appearance-icon-light { display: none; }
[data-appearance="light"] .app-appearance-icon-dark  { display: none; }

/* WCAG contrast corrections for legacy utility combinations that otherwise
   inherit low-contrast text in dark mode. */
.badge.bg-light {
    color: #1f2933 !important;
    border: 1px solid rgba(31, 41, 51, .18);
}
[data-appearance="dark"] .alert-light {
    --bs-alert-color: #f3f7fb;
    --bs-alert-bg: #26313b;
    --bs-alert-border-color: #4d5b67;
}
[data-appearance="dark"] .table-light {
    --bs-table-color: #f3f7fb;
    --bs-table-bg: #2b3540;
    --bs-table-border-color: #4d5b67;
}

html {
    height: 100%;
    color-scheme: light;
}
[data-appearance="dark"] { color-scheme: dark; }
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"]), .btn, .app-btn):focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), .65);
    outline-offset: 2px;
}
.dxbl-btn:focus,
.dxbl-btn:focus-visible,
.btn:focus,
.btn:focus-visible,
.app-login-button:focus,
.app-login-button:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), .72) !important;
    outline-offset: 2px;
}
.dxbl-checkbox-check-element input[type="checkbox"]:focus,
.dxbl-checkbox-check-element input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), .72) !important;
    outline-offset: 2px;
}
[data-appearance="dark"] .dxbl-checkbox-check-element input[type="checkbox"]:focus,
[data-appearance="dark"] .dxbl-checkbox-check-element input[type="checkbox"]:focus-visible {
    outline-color: #93c5fd !important;
}
:where(h1, h2, h3)[tabindex="-1"]:focus {
    outline: none;
}

.btn,
.app-btn {
    min-height: 2.375rem;
}
.btn-sm {
    min-height: 2rem;
}
.form-control,
.form-select {
    min-height: 2.375rem;
}
.form-check {
    min-height: 1.5rem;
}
.form-check-input {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    float: none;
    margin-left: 0;
    vertical-align: middle;
    cursor: pointer;
}
.form-check .form-check-input {
    float: left;
    margin-left: -1.5rem;
}
.form-check-input:disabled {
    cursor: not-allowed;
}
.form-control:disabled,
.form-select:disabled {
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    opacity: 1;
}
.app-textarea-sm { min-height: 4rem; }
.app-textarea-md { min-height: 9.5rem; }
.app-textarea-lg { min-height: 22rem; }
.app-textarea-ticket { min-height: 15rem; }
.card {
    color: var(--bs-body-color);
    background: var(--app-surface);
    border-color: var(--bs-border-color);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Layout shell */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: var(--app-page-bg);
    color: var(--bs-body-color);
}
.app-header   {
    background: color-mix(in srgb, var(--app-surface) 92%, transparent);
    box-sizing: border-box;
    flex: 0 0 60px;
    height: 60px;
    min-height: 60px;
    border-bottom: 1px solid var(--app-border-subtle);
    box-shadow: var(--app-shadow-sm);
    z-index: 3;
    backdrop-filter: blur(14px);
}
.app-brand    {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--bs-emphasis-color);
    font-size: 1.05rem;
    font-weight: 750;
    text-decoration: none;
}
.app-brand::before {
    content: "EC";
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: #fff;
    background: var(--app-brand-mark-bg);
    border-radius: var(--app-radius-md);
    font-size: .72rem;
    font-weight: 800;
}
.app-brand:hover { color: var(--bs-primary-text-emphasis); }
.app-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.375rem;
    min-height: 2.375rem;
    color: var(--bs-body-color);
    padding: .35rem .5rem;
    line-height: 1;
}
.app-icon-btn:hover { color: var(--bs-emphasis-color); }
.app-body {
    display: flex;
    flex: 1 1 auto;
    height: calc(100vh - 60px);
    min-height: 0;
    overflow: hidden;
    background: var(--app-page-bg);
}
.app-body > .dxbl-drawer,
.app-body .dxbl-drawer,
.app-body .dxbl-drawer-panel,
.app-body .dxbl-drawer-mini-panel,
.app-body .dxbl-drawer-target-content,
.app-body .dxbl-drawer-panel-content {
    height: 100%;
    min-height: 0;
}
.app-body .dxbl-drawer,
.app-body .dxbl-drawer-panel,
.app-body .dxbl-drawer-mini-panel,
.app-body .dxbl-drawer-panel-content {
    overflow: visible !important;
}
.app-body .dxbl-drawer-panel,
.app-body .dxbl-drawer-mini-panel {
    position: relative;
    z-index: 20;
}
.app-body .dxbl-drawer-target-content {
    position: relative;
    z-index: 0;
}
.app-body .dxbl-drawer-panel-content {
    overflow: visible;
    background: var(--app-sidebar-bg);
    border-right: 1px solid var(--app-border-subtle);
}
.app-body .dxbl-drawer-mini-panel {
    overflow: visible;
    background: var(--app-sidebar-bg);
    border-right: 1px solid var(--app-border-subtle);
}
.app-sidebar-nav {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: .75rem;
    overflow-y: auto;
    overflow-x: visible;
    background: var(--app-sidebar-bg);
}
.app-sidebar-nav.is-collapsed {
    width: 100%;
    padding-inline: .75rem;
    overflow-y: visible;
}
.app-nav-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .7rem;
    min-height: 100%;
}
.app-sidebar-nav.is-collapsed .app-nav-content {
    align-items: center;
}
.app-sidebar-version {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: .2rem .2rem .05rem;
    color: var(--bs-secondary-color);
    font-size: .5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    opacity: .45;
}
.app-sidebar-version-text,
.app-sidebar-version-short {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-sidebar-nav.is-collapsed .app-sidebar-version {
    width: 2.75rem;
    padding-inline: 0;
    font-size: .36rem;
    text-align: center;
}
.app-sidebar-nav.is-collapsed .app-sidebar-version-short {
    white-space: normal;
    line-height: 1.05;
}
.app-nav-section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .18rem;
    width: 100%;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--app-border-subtle);
}
.app-nav-section:last-child {
    border-bottom: 0;
}
.app-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .55rem .72rem;
    color: #374151;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--app-radius-lg);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.app-nav-link:hover,
.app-nav-link:focus-visible {
    color: var(--bs-emphasis-color);
    background: var(--app-interaction-hover);
    border-color: var(--app-nav-active-border);
    text-decoration: none;
}
.app-nav-link.active {
    color: var(--bs-primary-text-emphasis);
    background: var(--app-nav-active-bg);
    border-color: var(--app-nav-active-border);
    box-shadow: inset 3px 0 0 var(--bs-primary);
    font-weight: 650;
}
[data-appearance="dark"] .app-nav-link {
    color: #d1d5db;
}
[data-appearance="dark"] .app-nav-link:hover,
[data-appearance="dark"] .app-nav-link:focus-visible {
    color: #f9fafb;
}
.app-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    min-width: 1.35rem;
    color: currentColor;
    font-size: 1.02rem;
    line-height: 1;
}
.app-nav-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-nav-chevron {
    display: inline-flex;
    margin-left: auto;
    color: currentColor;
    transition: transform .12s ease;
}
.app-nav-group {
    position: relative;
    width: 100%;
}
.app-nav-group.is-open > .app-nav-group-trigger .app-nav-chevron {
    transform: rotate(90deg);
}
.app-nav-children {
    display: none;
    flex-direction: column;
    gap: .12rem;
    margin: .22rem 0 .2rem 1.02rem;
    padding-left: .65rem;
    border-left: 1px solid var(--app-border-subtle);
}
.app-nav-group.is-open > .app-nav-children {
    display: flex;
}
.app-nav-children .app-nav-link {
    min-height: 2.35rem;
    padding-block: .42rem;
    font-size: .92rem;
}
.app-sidebar-nav.is-collapsed .app-nav-section {
    align-items: center;
    width: 100%;
}
.app-sidebar-nav.is-collapsed .app-nav-link,
.app-sidebar-nav.is-collapsed .app-nav-group-trigger {
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
}
.app-sidebar-nav.is-collapsed .app-nav-icon {
    width: 1.35rem;
    min-width: 1.35rem;
    margin: 0;
}
.app-sidebar-nav.is-collapsed .app-nav-link.active {
    box-shadow: inset 0 -3px 0 var(--bs-primary);
}
.app-nav-group-collapsed {
    position: relative;
    display: flex;
    justify-content: center;
    width: 2.75rem;
}
.app-nav-group-collapsed::after {
    content: "";
    position: absolute;
    top: -.75rem;
    bottom: -.75rem;
    left: 100%;
    width: 1.15rem;
}
.app-nav-group.is-active-group > .app-nav-group-trigger {
    color: var(--bs-emphasis-color);
    background: transparent;
    border-color: transparent;
    font-weight: 650;
}
.app-nav-group-collapsed.is-active-group > .app-nav-group-trigger {
    box-shadow: none;
}
.app-nav-group.is-active-group > .app-nav-group-trigger .app-nav-chevron {
    color: var(--bs-primary);
}
.app-nav-flyout {
    position: absolute;
    top: -.25rem;
    left: calc(100% + 1rem);
    z-index: 1200;
    display: none;
    flex-direction: column;
    gap: .22rem;
    width: min(25rem, calc(100vw - 7.5rem));
    max-height: min(72vh, 42rem);
    overflow: auto;
    padding: .7rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-lg);
}
.app-sidebar-nav.is-collapsed .app-nav-flyout {
    position: fixed;
    top: var(--app-nav-flyout-top, 72px);
    left: var(--app-nav-flyout-left, 96px);
    z-index: 1200;
}
.app-nav-group-collapsed.is-open > .app-nav-flyout {
    display: flex;
}
.app-nav-flyout::before {
    content: "";
    position: absolute;
    top: .95rem;
    left: -.45rem;
    width: .8rem;
    height: .8rem;
    background: var(--app-surface);
    border-left: 1px solid var(--app-border-subtle);
    border-bottom: 1px solid var(--app-border-subtle);
    transform: rotate(45deg);
}
.app-sidebar-nav.is-collapsed .app-nav-flyout .app-nav-link {
    justify-content: flex-start;
    width: 100%;
    height: auto;
    min-height: 2.4rem;
    padding: .45rem .65rem;
}
.app-sidebar-nav.is-collapsed .app-nav-flyout .app-nav-group {
    width: 100%;
}
.app-sidebar-nav.is-collapsed .app-nav-flyout .app-nav-group-trigger {
    justify-content: flex-start;
    width: 100%;
    height: auto;
    min-height: 2.4rem;
    padding: .45rem .65rem;
}
.app-sidebar-nav.is-collapsed .app-nav-flyout .app-nav-icon {
    width: 1.25rem;
    min-width: 1.25rem;
}
.app-sidebar-nav.is-collapsed .app-nav-flyout .app-nav-text {
    display: inline;
}
.app-sidebar-nav.is-collapsed .app-nav-flyout .app-nav-chevron {
    display: inline-flex;
}
.app-nav-message {
    padding: .65rem .75rem;
    color: var(--bs-secondary-color);
    font-size: .9rem;
}
.app-sidebar-menu {
    padding: .75rem .65rem;
    background: var(--app-sidebar-bg);
}
.app-sidebar-menu :where(a, button, [role="menuitem"], .dxbl-menu-item, .dxbl-menu-item-content) {
    min-height: 2.65rem;
    border-radius: var(--app-radius-lg);
}
.app-sidebar-menu :where(.dxbl-menu-item, [role="menuitem"]) {
    margin: .12rem 0;
}
.app-sidebar-menu :where(.dxbl-menu-item:hover, [role="menuitem"]:hover) {
    background: var(--app-interaction-hover);
}
.app-sidebar-menu-collapsed {
    padding-inline: .75rem;
}
.app-sidebar-menu-collapsed :where(a, button, [role="menuitem"], .dxbl-menu-item, .dxbl-menu-item-content) {
    justify-content: center;
    min-width: 2.75rem;
}
.app-sidebar-menu :where(.fa-solid, .fa-regular) {
    font-size: 1.08rem;
}
.app-main {
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow: auto;
    padding: clamp(1rem, 2.2vw, 1.75rem);
    background: var(--app-page-bg);
    scroll-padding-top: 1rem;
}
.app-main:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), .65);
    outline-offset: -3px;
}
.app-skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 2000;
    padding: .65rem .9rem;
    color: var(--bs-body-bg);
    background: var(--bs-emphasis-color);
    border-radius: var(--app-radius-md);
    box-shadow: var(--app-shadow-md);
    transform: translateY(calc(-100% - 1rem));
    transition: transform .12s ease;
}
.app-skip-link:focus {
    color: var(--bs-body-bg);
    transform: translateY(0);
}

/* Public auth pages */
.app-public-layout {
    min-height: 100vh;
    color: var(--bs-body-color);
    background: var(--app-page-bg);
}
.app-public-main {
    min-height: 100vh;
}
.app-public-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: clamp(1rem, 3vw, 2rem);
    background:
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), .10), transparent 38%),
        var(--app-page-bg);
}
.app-public-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: min(100%, 34rem);
    padding: clamp(1.25rem, 4vw, 2rem);
    color: var(--bs-body-color);
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-left: 4px solid var(--bs-primary);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-md);
    text-align: center;
}
.app-public-card-compact {
    width: min(100%, 26rem);
}
.app-public-icon,
.app-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    border-radius: var(--app-radius-md);
    font-size: 1.45rem;
}
.app-public-icon-danger,
.app-empty-state-icon-danger {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
}
.app-public-icon-warning {
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
}
.app-public-copy,
.app-empty-state-card {
    color: var(--bs-secondary-color);
}
.app-public-title,
.app-empty-state-title {
    margin: 0;
    color: var(--bs-emphasis-color);
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
    font-weight: 750;
    line-height: 1.2;
}
.app-empty-state-copy {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: center;
}
.app-public-copy p,
.app-empty-state-card p {
    margin: .35rem 0 0;
}
.app-public-actions,
.app-empty-state-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    width: 100%;
    margin-top: .5rem;
}
.app-empty-state-page {
    display: grid;
    min-height: min(42rem, calc(100vh - 8rem));
    place-items: center;
    padding: clamp(1rem, 3vw, 2rem);
}
.app-empty-state-inline {
    display: grid;
    min-height: 14rem;
    place-items: center;
    padding: 1rem;
}
.app-empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: min(100%, 32rem);
    padding: clamp(1.25rem, 4vw, 2rem);
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-md);
    text-align: center;
}
.app-login-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background:
        linear-gradient(180deg, rgba(var(--bs-primary-rgb), .06), transparent 18rem),
        var(--app-page-bg);
}
.app-login-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: min(100%, 26rem);
    padding: clamp(1.25rem, 4vw, 1.65rem);
    color: var(--app-login-text);
    background: var(--app-login-bg);
    border: 1px solid var(--app-login-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-md);
    text-align: center;
}
.app-login-panel {
    --app-login-bg: color-mix(in srgb, var(--app-surface) 96%, var(--bs-primary-bg-subtle));
    --app-login-border: var(--app-border-subtle);
    --app-login-accent: #174ea6;
    --app-login-text: #13233d;
    --app-login-muted: #42536d;
    --app-login-icon-bg: #dbeafe;
    --app-login-mark-bg: #174ea6;
    --app-login-mark-text: #ffffff;
}
[data-appearance="dark"] .app-login-panel {
    --app-login-bg: color-mix(in srgb, var(--app-surface) 92%, #1f3457);
    --app-login-border: var(--app-border-subtle);
    --app-login-accent: #8bbcff;
    --app-login-text: #f1f6ff;
    --app-login-muted: #c8d7ee;
    --app-login-icon-bg: #1f3457;
    --app-login-mark-bg: #8bbcff;
    --app-login-mark-text: #13233d;
}
.app-login-brand-mark {
    display: block;
    width: auto;
    height: 3.5rem;
    max-width: 100%;
    margin: 0 auto;
    /* PNG has alpha — no background-color so the panel surface shows
       through; the panel's subtle blue tint becomes the logo's backdrop. */
}
.app-login-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .28rem;
    min-width: 0;
}
.app-login-copy h1 {
    margin: 0;
    color: var(--app-login-text);
    font-size: clamp(1.65rem, 4vw, 1.9rem);
    font-weight: 800;
    line-height: 1.1;
}
.app-login-copy p {
    margin: 0;
    color: var(--app-login-muted);
    font-size: .98rem;
    font-weight: 650;
    line-height: 1.45;
}
.app-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    min-height: 3.15rem;
    border-radius: var(--app-radius-md);
    box-shadow: var(--app-shadow-sm);
    font-weight: 750;
    text-decoration: none;
}
.app-login-button:hover,
.app-login-button:focus-visible {
    text-decoration: none;
}

/* Shared page structure */
.app-page-header,
.app-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}
.app-page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
    font-size: 1.18rem;
}
.app-page-header-copy {
    min-width: 0;
    flex: 1 1 22rem;
}
.app-page-eyebrow {
    margin-bottom: .25rem;
    color: var(--bs-primary-text-emphasis);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.app-page-title {
    margin: 0;
    color: var(--bs-emphasis-color);
    font-size: clamp(1.35rem, 1.8vw, 1.7rem);
    font-weight: 760;
    line-height: 1.2;
}
.app-page-subtitle {
    max-width: 72ch;
    margin: .35rem 0 0;
    color: var(--bs-secondary-color);
}
.app-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}
.app-filter-bar {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}
.app-filter-field {
    min-width: min(100%, 16rem);
}
.app-form-actions,
.app-form-actions-start,
.app-form-actions-end {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.app-form-actions {
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border-subtle);
}
.app-form-actions-end {
    justify-content: flex-end;
    margin-left: auto;
}
.app-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.app-inline-actions,
.app-form-options,
.app-check-option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.app-inline-actions {
    gap: .75rem 1rem;
}
.app-form-options {
    gap: .75rem 2rem;
}
.app-check-option {
    gap: .5rem;
}
.app-file-picker {
    cursor: pointer;
}
.app-file-input {
    display: none;
}
.app-stat-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .75rem;
}
.app-stat-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    padding: .75rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-md);
}
.app-stat-item h5 {
    margin: 0;
}
.app-grid-shell {
    overflow: hidden;
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    box-shadow: var(--app-shadow-sm);
}
.app-grid-shell .dxbl-grid {
    min-width: 100%;
}
.app-grid-shell .dxbl-toolbar {
    margin-bottom: .5rem;
}
.app-grid-shell,
.card {
    overflow-wrap: anywhere;
}
.app-grid :where(.dxbl-grid-header-row, .dxbl-grid-group-panel) {
    background: var(--app-surface-muted);
}
.app-grid :where(.dxbl-grid-search-box, .dxbl-edit) {
    border-radius: var(--app-radius-md);
}
.app-search-lookup {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}
.app-search-lookup.dxbl-text-edit,
.app-search-lookup .dxbl-text-edit {
    --dxbl-text-edit-bg: var(--bs-body-bg);
    --dxbl-text-edit-color: var(--bs-body-color);
    --dxbl-text-edit-border-color: var(--bs-border-color);
    --dxbl-text-edit-border-hovered-color: var(--bs-border-color);
    --dxbl-text-edit-border-active-color: #86b7fe;
    --dxbl-text-edit-focus-border-color: #86b7fe;
    --dxbl-text-edit-underline-color: var(--bs-border-color);
    --dxbl-text-edit-underline-hovered-color: var(--bs-border-color);
    --dxbl-text-edit-underline-active-color: #86b7fe;
    --dxbl-text-edit-underline-focused-color: #86b7fe;
    --dxbl-text-edit-underline-focused-height: var(--bs-border-width);
    --dxbl-text-edit-border-radius: var(--bs-border-radius);
    --dxbl-text-edit-border-width: var(--bs-border-width);
    --dxbl-text-edit-box-shadow: none;
    --dxbl-text-edit-padding-x: .75rem;
    --dxbl-text-edit-padding-y: .375rem;
    --dxbl-text-edit-font-size: 1rem;
    --dxbl-text-edit-line-height: 1.5;
    --dxbl-text-edit-btn-bg: transparent;
    --dxbl-text-edit-btn-hover-bg: transparent;
    --dxbl-text-edit-btn-hovered-bg: transparent;
    --dxbl-text-edit-btn-color: var(--bs-secondary-color);
    --dxbl-text-edit-btn-hover-color: var(--bs-body-color);
    --dxbl-text-edit-btn-padding-x: .65rem;
    --dxbl-text-edit-btn-padding-y: 0;
    width: 100% !important;
    min-height: 38px;
    height: 38px;
    box-shadow: none;
}
.app-search-lookup.dxbl-text-edit:focus-within,
.app-search-lookup .dxbl-text-edit:focus-within {
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.app-search-lookup .dxbl-text-edit-input {
    min-width: 0;
    height: 100%;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-search-lookup .dxbl-text-edit-btn,
.app-search-lookup .dxbl-edit-btn-dropdown {
    align-self: stretch;
    min-height: 100%;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    background: transparent;
    color: var(--bs-secondary-color);
    box-shadow: none;
}
.dxbl-grid,
.dxbl-tabs,
.dxbl-popup,
.dxbl-toolbar {
    --dxbl-border-radius: var(--app-radius-md);
}
.dxbl-popup,
.dxbl-window,
.dxbl-modal {
    z-index: 2100;
}
.dxbl-popup-backdrop,
.dxbl-modal-backdrop,
.dxbl-overlay-backdrop {
    z-index: 2090;
}
.dxbl-grid {
    background: var(--app-surface);
}
.dxbl-grid .dxbl-grid-table {
    min-width: 100%;
}
.dxbl-grid .dxbl-grid-header-row {
    color: var(--bs-secondary-color);
    font-size: .82rem;
    font-weight: 750;
    text-transform: uppercase;
}
.dxbl-grid .dxbl-grid-data-row:hover {
    background: var(--app-interaction-hover);
}
.app-search-lookup-grid {
    width: 100%;
    min-width: 0;
    max-height: min(28rem, 70vh);
    overflow: auto;
}
.app-search-lookup-grid .dxbl-grid-search-box {
    margin: .5rem;
}
.form-label.fw-semibold {
    margin-bottom: .35rem;
    color: var(--bs-secondary-color);
    font-size: .84rem;
    font-weight: 700 !important;
}
.app-form-card .form-control,
.app-side-card .form-control,
.app-grid-shell .form-control,
.app-order-editor-page .form-control,
.app-quotation-editor-page .form-control,
.app-ticket-editor-page .form-control,
.app-customer-editor-page .form-control,
.app-appointment-form .form-control {
    min-height: 38px;
    border-radius: var(--app-radius-md);
}
.app-form-card textarea.form-control,
.app-order-editor-page textarea.form-control,
.app-quotation-editor-page textarea.form-control,
.app-ticket-editor-page textarea.form-control,
.app-customer-editor-page textarea.form-control,
.app-appointment-form textarea.form-control {
    min-height: 9rem;
    resize: vertical;
}
.app-form-card .validation-message,
.app-side-card .validation-message,
.app-ticket-editor-page .validation-message,
.app-customer-editor-page .validation-message,
.app-appointment-form .validation-message {
    display: block;
    margin-top: .28rem;
    font-size: .82rem;
}
.dxbl-tabs {
    background: transparent;
}
.dxbl-tabs .dxbl-tabs-tablist {
    gap: .2rem;
    padding: .25rem;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
}
.dxbl-tabs .dxbl-tabs-tab {
    border-radius: var(--app-radius-md);
}
.dxbl-edit,
.dxbl-btn {
    border-radius: var(--app-radius-md);
}
.dxbl-btn:disabled,
.dxbl-btn[disabled],
.dxbl-btn[aria-disabled="true"],
.dxbl-btn.dxbl-disabled,
.dxbl-btn.dxbl-state-disabled {
    opacity: 1;
    color: #374151 !important;
    background-color: #eef2f7 !important;
    border-color: #c8d0dc !important;
}
[data-appearance="dark"] .dxbl-btn:disabled,
[data-appearance="dark"] .dxbl-btn[disabled],
[data-appearance="dark"] .dxbl-btn[aria-disabled="true"],
[data-appearance="dark"] .dxbl-btn.dxbl-disabled,
[data-appearance="dark"] .dxbl-btn.dxbl-state-disabled {
    color: #e5e7eb !important;
    background-color: #2f3540 !important;
    border-color: #596273 !important;
}

@media (max-width: 767.98px) {
    .app-page-header,
    .app-page-heading {
        align-items: stretch;
        flex-direction: column;
    }
    .app-page-actions {
        justify-content: flex-start;
        width: 100%;
        margin-left: 0;
    }
    .app-page-actions > * {
        max-width: 100%;
    }
    .app-form-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .app-form-actions-start,
    .app-form-actions-end {
        justify-content: flex-start;
        width: 100%;
        margin-left: 0;
    }
    .app-order-description-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .app-ticket-relation-inputs {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Coverage workspace */
.app-coverage-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.app-coverage-mode {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    margin: 0;
    border: 0;
}
.app-coverage-mode-option {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 40px;
    padding: .45rem .65rem;
    color: #374151;
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-md);
    cursor: pointer;
    font: inherit;
    text-align: left;
    user-select: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.app-coverage-mode-option:hover {
    color: var(--bs-emphasis-color);
    background: var(--app-interaction-hover);
    border-color: var(--app-nav-active-border);
}
.app-coverage-mode-input:focus-visible + .app-coverage-mode-option {
    outline: 3px solid rgba(var(--bs-primary-rgb), .65);
    outline-offset: 2px;
}
.app-coverage-mode-option.is-selected {
    color: var(--bs-primary-text-emphasis);
    background: var(--app-nav-active-bg);
    border-color: var(--app-nav-active-border);
    box-shadow: inset 0 0 0 1px var(--app-nav-active-border);
    font-weight: 600;
}
.app-coverage-mode-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: transparent;
    border: 1px solid var(--bs-secondary-color);
    border-radius: 50%;
    font-size: .58rem;
}
.app-coverage-mode-option.is-selected .app-coverage-mode-check {
    color: #ffffff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}
[data-appearance="dark"] .app-coverage-mode-option {
    color: #d1d5db;
}
[data-appearance="dark"] .app-coverage-mode-option:hover {
    color: #f9fafb;
}
.app-coverage-search-panel {
    margin-bottom: 0;
    background: var(--app-surface);
    border-color: var(--app-border-subtle);
}
.app-coverage-fields {
    display: grid;
    grid-template-columns: minmax(18rem, 1.2fr) minmax(18rem, 1.2fr) minmax(9rem, .45fr) minmax(8rem, .35fr) auto;
    align-items: end;
    gap: 1rem;
}
.app-coverage-field {
    min-width: 0;
}
.app-coverage-field .form-control,
.app-coverage-field .form-select {
    min-height: 38px;
}
.app-coverage-map-resolution {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
}
.app-coverage-map-resolution-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--bs-emphasis-color);
    font-weight: 700;
}
.app-coverage-map-resolution-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 1.3fr) minmax(7rem, .6fr) minmax(7rem, .6fr);
    gap: .75rem;
}
.app-coverage-map-resolution-grid span {
    min-width: 0;
}
.app-coverage-map-resolution-grid small {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .78rem;
    font-weight: 650;
}
.app-coverage-map-resolution-grid strong {
    display: block;
    overflow: hidden;
    color: var(--bs-body-color);
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-map-canvas {
    min-height: 400px;
    margin-bottom: 1rem;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-md);
    overflow: hidden;
}
.app-loading-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.app-loading-modal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 2.5rem;
    min-width: 14rem;
    color: var(--bs-emphasis-color);
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-md);
    font-size: 1.05rem;
    font-weight: 600;
}
.app-loading-modal-card .fa-circle-notch,
.app-loading-modal-card .fa-spinner {
    font-size: 2.5rem;
    color: var(--bs-primary);
}
.app-coverage-combobox {
    position: relative;
}
.app-coverage-options {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 18rem;
    overflow-y: auto;
    padding: .25rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-md, 6px);
    box-shadow: var(--app-shadow-md);
}
.app-coverage-option {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: .45rem .6rem;
    border: 0;
    border-radius: var(--app-radius-sm, 4px);
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
}
.app-coverage-option:hover,
.app-coverage-option:focus-visible,
.app-coverage-option--active {
    background: var(--app-interaction-hover);
    color: var(--bs-emphasis-color);
}
.app-coverage-option--active {
    /* Keyboard-arrow highlight — same visual as hover so it reads as
       "this is the option you'd commit if you pressed Enter". The
       option button itself never receives focus (focus stays in the
       input that owns the dropdown), so :focus-visible alone can't
       carry the highlight. */
    outline: 2px solid rgba(var(--bs-primary-rgb), .45);
    outline-offset: -2px;
}
.app-coverage-option[aria-selected="true"] {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}
.app-coverage-option:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), .65);
    outline-offset: 1px;
}
.app-coverage-option-primary,
.app-coverage-option-secondary {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-coverage-option-primary {
    font-weight: 500;
}
.app-coverage-option-secondary {
    color: var(--bs-secondary-color);
    font-size: .82rem;
}
.app-coverage-field .form-control:disabled,
.app-coverage-field .form-select:disabled {
    cursor: not-allowed;
}
.app-coverage-actions {
    display: flex;
    align-items: end;
    padding-bottom: 1px;
}
.app-coverage-actions .app-btn {
    min-height: 38px;
    white-space: nowrap;
}
.app-coverage-results {
    margin-top: .25rem;
}
.app-coverage-result-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.25rem);
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-md);
}
.app-coverage-result-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.app-coverage-result-title {
    min-width: min(100%, 24rem);
    flex: 1 1 24rem;
}
.app-coverage-result-eyebrow {
    display: block;
    margin-bottom: .25rem;
    color: var(--bs-secondary-color);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}
.app-coverage-result-title h4 {
    margin: 0;
    color: var(--bs-emphasis-color);
    font-size: 1.2rem;
    font-weight: 700;
}
.app-coverage-result-title p {
    margin: .35rem 0 0;
    color: var(--bs-secondary-color);
}
.app-coverage-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(6.25rem, 1fr));
    gap: .6rem;
    flex: 1 1 28rem;
}
.app-coverage-summary-item {
    min-width: 0;
    padding: .85rem;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-md);
}
.app-coverage-summary-item span {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}
.app-coverage-summary-item strong {
    display: block;
    margin-top: .2rem;
    color: var(--bs-emphasis-color);
    font-size: 1.35rem;
    line-height: 1;
}
.app-coverage-empty-state,
.app-coverage-empty-provider {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    color: var(--bs-secondary-color);
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-md);
}
.app-coverage-empty-state i,
.app-coverage-empty-provider i {
    color: var(--bs-primary-text-emphasis);
    font-size: 1.25rem;
}
.app-coverage-empty-state h5 {
    margin: 0;
    color: var(--bs-emphasis-color);
    font-size: 1rem;
    font-weight: 700;
}
.app-coverage-empty-state p {
    margin: .2rem 0 0;
}
.app-coverage-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    min-width: 0;
}
.app-coverage-accordion-title {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
}
.app-coverage-accordion-title > span {
    color: var(--bs-emphasis-color);
    font-weight: 700;
}
.app-coverage-accordion-title small {
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 700;
}
.app-coverage-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: .25rem .5rem;
    border-radius: var(--app-radius-sm);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.app-coverage-status-covered {
    color: #123c22;
    background: #d7f2df;
    border: 1px solid #84c998;
}
.app-coverage-status-suspended {
    color: #4e3900;
    background: #fff0be;
    border: 1px solid #d7a724;
}
.app-coverage-status-planned {
    color: #083f4a;
    background: #d7f3fa;
    border: 1px solid #77c4d4;
}
.app-coverage-status-not-covered {
    color: #681207;
    background: #ffe4df;
    border: 1px solid #df7c6e;
}
[data-appearance="dark"] .app-coverage-status-covered {
    color: #c9f4d5;
    background: #14321f;
    border-color: #3e8455;
}
[data-appearance="dark"] .app-coverage-status-suspended {
    color: #ffe6a3;
    background: #35270b;
    border-color: #9c7819;
}
[data-appearance="dark"] .app-coverage-status-planned {
    color: #bcebf5;
    background: #0d2f36;
    border-color: #3d8491;
}
[data-appearance="dark"] .app-coverage-status-not-covered {
    color: #ffc9c0;
    background: #391714;
    border-color: #944b42;
}
.app-coverage-accordion-content {
    padding: 1rem;
}
.app-coverage-detail-stack {
    display: grid;
    gap: .55rem;
}
.app-coverage-detail-stack p {
    display: grid;
    grid-template-columns: minmax(10rem, .42fr) 1fr;
    gap: .75rem;
    align-items: baseline;
    margin: 0;
    padding: .55rem .65rem;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-md);
}
.app-coverage-detail-stack strong {
    color: var(--bs-secondary-color);
    font-size: .82rem;
    font-weight: 750;
}
.app-coverage-result-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}
.app-coverage-opnet-grid {
    min-width: 0;
    padding: .75rem;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
}

/* Calendar */
.app-calendar-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: calc(100vh - 8rem);
}
.app-calendar-scheduler {
    height: min(78vh, 820px);
    min-height: 620px;
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-md);
    overflow: hidden;
}

@media (max-width: 1399.98px) {
    .app-coverage-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .app-coverage-map-resolution-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .app-coverage-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .app-coverage-actions {
        align-items: stretch;
    }
}

@media (max-width: 767.98px) {
    .app-page-heading {
        align-items: stretch;
    }
    .app-coverage-mode {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .app-coverage-mode-option {
        justify-content: flex-start;
        width: 100%;
    }
    .app-coverage-fields {
        grid-template-columns: 1fr;
    }
    .app-coverage-map-resolution-grid {
        grid-template-columns: 1fr;
    }
    .app-coverage-result-panel {
        padding: .75rem;
    }
    .app-coverage-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
    .app-coverage-accordion-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .app-coverage-detail-stack p {
        grid-template-columns: 1fr;
        gap: .25rem;
    }
    .app-calendar-scheduler {
        height: 72vh;
        min-height: 540px;
    }
}

/* Design system tokens & primitives
   Single source of visual truth for the App* component family.
   Bootstrap variables provide the underlying color/spacing scale;
   these add app-specific layering + typography polish. */

:root {
    --app-radius-sm: 4px;
    --app-radius-md: 6px;
    --app-radius-lg: 8px;
    --app-spacing-tight: .5rem;
    --app-spacing-normal: 1rem;
    --app-spacing-loose: 1.5rem;
    --app-page-bg: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
    --app-surface: #ffffff;
    --app-surface-raised: #ffffff;
    --app-surface-muted: #f8fafc;
    --app-sidebar-bg: linear-gradient(180deg, #fbfcff 0%, #f3f7fd 100%);
    --app-border-subtle: rgba(17, 24, 39, .16);
    --app-interaction-hover: rgba(37, 99, 235, .12);
    --app-nav-active-bg: rgba(37, 99, 235, .16);
    --app-nav-active-border: rgba(37, 99, 235, .38);
    --app-brand-mark-bg: linear-gradient(135deg, #2563eb, #0f766e);
    --app-shadow-sm: 0 1px 2px rgba(17,24,39,.06), 0 1px 1px rgba(17,24,39,.04);
    --app-shadow-md: 0 10px 28px rgba(17,24,39,.10), 0 2px 8px rgba(17,24,39,.06);
    --app-shadow-lg: 0 18px 48px rgba(17,24,39,.14), 0 4px 14px rgba(17,24,39,.08);
    --text-muted: var(--bs-secondary-color);
    --text-success: var(--bs-success-text-emphasis);
    --text-info: var(--bs-info-text-emphasis);
    --text-warning: var(--bs-warning-text-emphasis);
    --text-danger: var(--bs-danger-text-emphasis);
}

[data-appearance="dark"] {
    --app-page-bg: linear-gradient(180deg, #181818 0%, #101010 100%);
    --app-surface: #242424;
    --app-surface-raised: #2b2b2b;
    --app-surface-muted: #1d1d1d;
    --app-sidebar-bg: linear-gradient(180deg, #202124 0%, #18191c 100%);
    --app-border-subtle: rgba(255, 255, 255, .20);
    --app-interaction-hover: rgba(96, 165, 250, .22);
    --app-nav-active-bg: rgba(96, 165, 250, .26);
    --app-nav-active-border: rgba(147, 197, 253, .52);
    --app-brand-mark-bg: linear-gradient(135deg, #60a5fa, #2dd4bf);
    --app-shadow-sm: 0 1px 2px rgba(0,0,0,.38);
    --app-shadow-md: 0 12px 30px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.28);
    --app-shadow-lg: 0 20px 54px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.32);
}

/* AppButton: shared sizing + IconOnly square padding */
.app-btn {
    --bs-btn-border-radius: var(--app-radius-md);
    font-weight: 500;
    letter-spacing: .01em;
}
.app-btn-icon {
    aspect-ratio: 1;
    padding: 0 .5rem;
    line-height: 1;
}
.app-btn-icon .dxbl-image,
.app-btn-icon i { margin: 0; }

/* AppButton.Link - chrome-less inline action; no fill, primary text color,
   underline on hover. Works on top of the DX Secondary/Contained shell. */
.app-btn-link,
.app-btn-link:hover,
.app-btn-link:focus {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--bs-link-color, var(--bs-primary, #0e5260)) !important;
    box-shadow: none !important;
}
.app-btn-link:hover { text-decoration: underline; }

/* AppLookup: ensure dropdown rows render comfortably + multi-column rows align */
.app-lookup .dxbl-edit-input { font-size: .9375rem; }
.app-lookup-row {
    align-items: center;
    min-height: 1.5rem;
}
.app-lookup-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* AppFormField: label-input-error rhythm */
.app-form-field {
    margin-bottom: var(--app-spacing-normal);
}
.app-form-field .form-control,
.app-form-field .app-lookup,
.app-form-field .dxbl-edit {
    width: 100%;
}
.app-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1rem;
    align-items: start;
}
.app-editor-main,
.app-editor-side {
    min-width: 0;
}
.app-editor-side {
    position: sticky;
    top: 1rem;
}
.app-form-card,
.app-side-card {
    padding: 0;
    overflow: hidden;
}
.app-form-card .dxbl-tabs {
    border: 0;
}
.app-dialog-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.app-form-section,
.app-side-card {
    padding: clamp(1rem, 2vw, 1.25rem);
}
.app-side-card .row {
    row-gap: 1rem;
}
.app-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .65rem;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-md);
}
.app-checkbox-group-scroll {
    max-height: 10rem;
    overflow-y: auto;
}
.app-inline-cluster {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.app-stack-tight {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.app-stack-compact {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.app-audit-meta {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}
.app-pre-line {
    white-space: pre-line;
}
.app-break-anywhere {
    line-break: anywhere;
    overflow-wrap: anywhere;
}
.app-scroll-panel-tall {
    max-height: 70vh;
    overflow-y: auto;
}
.app-transfer-panel {
    min-height: 18.75rem;
}
.app-transfer-actions {
    gap: .5rem;
}
.app-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.app-timeline-time {
    min-width: 8.75rem;
    padding-top: .25rem;
}
.app-dialog-action-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
}
.app-reminders-table {
    height: 20.625rem;
}
.app-reminders-message {
    width: 90%;
}
.app-reminders-message-full {
    width: 100%;
}
.app-coverage-bts-name {
    color: var(--bs-emphasis-color);
    font-weight: 600;
}
.app-ticket-editor-page textarea.form-control {
    min-height: 14rem;
    resize: vertical;
}
.app-ticket-tabs {
    border-left: .5rem solid var(--app-ticket-accent, var(--bs-border-color));
}
.app-ticket-status-draft { --app-ticket-swatch-color: #6b7280; }
.app-ticket-status-new { --app-ticket-swatch-color: #7c2d8f; }
.app-ticket-status-in-progress { --app-ticket-swatch-color: #006aa8; }
.app-ticket-status-suspended-customer { --app-ticket-swatch-color: #704b3d; }
.app-ticket-status-suspended-olo { --app-ticket-swatch-color: #b87800; }
.app-ticket-status-closure-requested { --app-ticket-swatch-color: #23722b; }
.app-ticket-status-solved { --app-ticket-swatch-color: #15803d; }
.app-ticket-status-closed { --app-ticket-swatch-color: #111827; }
.app-ticket-priority-low {
    --app-ticket-swatch-color: #6b7280;
    --app-ticket-accent: #6b7280;
}
.app-ticket-priority-medium {
    --app-ticket-swatch-color: #9a6700;
    --app-ticket-accent: #9a6700;
}
.app-ticket-priority-high {
    --app-ticket-swatch-color: #b45309;
    --app-ticket-accent: #b45309;
}
.app-ticket-priority-urgent {
    --app-ticket-swatch-color: #b42318;
    --app-ticket-accent: #b42318;
}
[data-appearance="dark"] .app-ticket-status-draft { --app-ticket-swatch-color: #9ca3af; }
[data-appearance="dark"] .app-ticket-status-new { --app-ticket-swatch-color: #d8a8e5; }
[data-appearance="dark"] .app-ticket-status-in-progress { --app-ticket-swatch-color: #7dd3fc; }
[data-appearance="dark"] .app-ticket-status-suspended-customer { --app-ticket-swatch-color: #d7b8a8; }
[data-appearance="dark"] .app-ticket-status-suspended-olo { --app-ticket-swatch-color: #ffd166; }
[data-appearance="dark"] .app-ticket-status-closure-requested { --app-ticket-swatch-color: #86efac; }
[data-appearance="dark"] .app-ticket-status-solved { --app-ticket-swatch-color: #4ade80; }
[data-appearance="dark"] .app-ticket-status-closed { --app-ticket-swatch-color: #e5e7eb; }
[data-appearance="dark"] .app-ticket-priority-low {
    --app-ticket-swatch-color: #d1d5db;
    --app-ticket-accent: #d1d5db;
}
[data-appearance="dark"] .app-ticket-priority-medium {
    --app-ticket-swatch-color: #facc15;
    --app-ticket-accent: #facc15;
}
[data-appearance="dark"] .app-ticket-priority-high {
    --app-ticket-swatch-color: #fb923c;
    --app-ticket-accent: #fb923c;
}
[data-appearance="dark"] .app-ticket-priority-urgent {
    --app-ticket-swatch-color: #fda29b;
    --app-ticket-accent: #fda29b;
}
.app-ticket-relation-inputs {
    /* Two-column when there's room, single column when there isn't.
       `min(100%, 14rem)` is the trick: each column wants to be ≥14rem,
       but if the container is narrower than that the column shrinks to
       100% — preventing horizontal overflow inside the (narrow) ticket
       sidebar where this control now lives. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: .5rem;
    width: 100%;
    min-width: 0;
}
.app-ticket-relation-row {
    display: flex;
    align-items: start;
    gap: .375rem;
    /* Without min-width: 0 a grid/flex child refuses to shrink past its
       intrinsic min-content width — and the SearchLookup inside has a
       wide min-content. */
    min-width: 0;
}
.app-ticket-relation-row .app-ticket-relation-inputs {
    flex: 1 1 auto;
    min-width: 0;
}
.app-ticket-relation-row > .dxbl-btn {
    flex: 0 0 auto;
}
.app-ticket-editor-page > .row.mb-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1rem;
    margin: 0;
}
.app-ticket-editor-page > .row.mb-3 > .col-6,
.app-ticket-editor-page > .row.mb-3 > .col-2 {
    width: auto;
    max-width: none;
    padding: 0;
}
.app-ticket-editor-page > .row.mb-3 .card {
    height: auto;
}
.app-order-editor-page,
.app-quotation-editor-page,
.app-ticket-editor-page,
.app-customer-editor-page,
.app-price-items-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.app-price-list-switcher {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.app-price-list-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .75rem;
    min-width: 0;
}
.app-price-list-switcher .form-label {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    font-size: .78rem;
    text-transform: uppercase;
}
.app-price-list-lookup {
    width: clamp(14rem, 24vw, 22rem) !important;
    flex: 0 1 clamp(14rem, 24vw, 22rem);
    min-width: 14rem;
}
.app-price-list-actions .dxbl-btn {
    flex: 0 0 auto;
}
.app-dynamic-field-origin {
    font-size: .7rem;
}
.app-report-data-source-actions {
    margin-top: 1.625rem;
}
.app-scroll-panel {
    max-height: 18.75rem;
    overflow-y: auto;
}
.app-file-upload-bar {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}
.app-file-description-field {
    min-width: min(100%, 25rem);
}
.app-image-input {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.app-image-input-preview {
    max-width: 18.75rem;
    max-height: 18.75rem;
}
.app-initialization-card {
    max-width: 75rem;
}
.app-product-picker-dialog {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}
.app-product-picker-quote-badge {
    font-size: .8em;
}
.app-order-editor-page .app-form-actions,
.app-quotation-editor-page .app-form-actions {
    margin-top: 0;
}
.app-order-lines {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}
.app-order-lines-toolbar {
    display: flex;
    justify-content: flex-end;
}
.app-order-lines-scroll {
    width: 100%;
    overflow-x: auto;
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}
.app-order-lines-table {
    min-width: 112rem;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--app-surface-muted);
}
.app-order-lines-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .8rem .75rem;
    background: var(--app-surface-muted);
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--app-border-subtle);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: normal;
}
.app-order-lines-table tbody td {
    padding: .8rem .75rem;
    border-color: var(--app-border-subtle);
    vertical-align: top;
}
.app-order-lines-table tbody tr:hover {
    background: var(--app-surface-muted);
}
.app-order-lines-table tfoot td {
    padding: .8rem .75rem;
    background: var(--app-surface-muted);
    border-top: 1px solid var(--app-border-subtle);
    vertical-align: middle;
}
.app-order-lines-table .form-control,
.app-order-lines-table .app-search-lookup {
    min-width: 0;
}
.app-order-line-type {
    width: 10.5rem;
    min-width: 10.5rem;
}
.app-order-line-product {
    width: 28rem;
    min-width: 28rem;
}
.app-order-line-supplier,
.app-order-line-status {
    width: 16rem;
    min-width: 16rem;
}
.app-order-line-number {
    width: 8.5rem;
    min-width: 8.5rem;
}
.app-order-line-money {
    width: 9rem;
    min-width: 9rem;
}
.app-order-line-note {
    width: 18rem;
    min-width: 18rem;
}
.app-order-line-actions {
    width: 5.5rem;
    min-width: 5.5rem;
    text-align: right;
}
.app-order-row-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: .35rem;
    white-space: nowrap;
}
.app-order-lines-total-label {
    color: var(--bs-secondary-color);
    font-weight: 700;
    text-transform: uppercase;
}
.product-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 38px;
    width: 100%;
    padding: .375rem .75rem;
    background: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.product-picker-trigger:hover,
.product-picker-trigger:focus-visible {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .15);
}
.product-picker-trigger:disabled {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    cursor: not-allowed;
    opacity: .85;
}
.product-picker-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-picker-text.placeholder {
    color: var(--bs-secondary-color);
}
.product-picker-icon {
    flex: 0 0 auto;
    font-size: 1rem;
}
.app-product-picker-search {
    gap: .5rem;
}
.app-product-picker-search .search-box {
    min-width: 0;
}
.to-quote-label {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    width: 100%;
    padding: .375rem .75rem;
    color: var(--bs-secondary-color);
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--bs-border-radius);
    font-weight: 600;
}
.app-order-description-layout {
    display: grid;
    grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.app-order-contact-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.app-order-editor-page > .row.mb-5 {
    display: grid;
    grid-template-columns: minmax(0, min(100%, 52rem));
    justify-content: center;
    margin: 0 0 1rem;
}
.app-order-editor-page > .row.mb-5 > .col-6 {
    width: auto;
    max-width: none;
    padding: 0;
}

/* AppCard / AppFormSection containers */
.app-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
    padding: var(--app-spacing-loose);
    margin-bottom: var(--app-spacing-normal);
}
.app-selectable-card {
    width: 100%;
    color: var(--bs-body-color);
    background: var(--app-surface);
    border-color: var(--app-border-subtle) !important;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.app-selectable-card:hover,
.app-selectable-card:focus-visible {
    color: var(--bs-body-color);
    background: var(--app-interaction-hover);
    border-color: var(--app-nav-active-border) !important;
    box-shadow: var(--app-shadow-md);
}
.app-selectable-card:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), .65);
    outline-offset: 2px;
}
.app-selectable-card.is-selected {
    color: var(--bs-primary-text-emphasis);
    background: var(--app-nav-active-bg);
    border-color: var(--app-nav-active-border) !important;
    box-shadow: inset 0 0 0 1px var(--app-nav-active-border), var(--app-shadow-sm);
}
.app-selectable-card:disabled {
    cursor: default;
    opacity: 1;
}
.app-selectable-card:disabled:hover {
    background: var(--app-surface);
    border-color: var(--app-border-subtle) !important;
    box-shadow: var(--app-shadow-sm);
}
.app-contact-card {
    max-width: 20rem;
}
.app-supplier-product-card {
    min-height: 100%;
}

/* Homepage KPI cards */
.app-home-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.app-home-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}
.app-home-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.app-kpi-card {
    --app-kpi-bg: var(--bs-body-bg);
    --app-kpi-border: var(--bs-border-color);
    --app-kpi-accent: var(--bs-primary);
    --app-kpi-text: var(--bs-emphasis-color);
    --app-kpi-muted: var(--bs-secondary-color);
    --app-kpi-icon-bg: var(--bs-primary-bg-subtle);
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 6.25rem;
    padding: 1.1rem;
    color: var(--app-kpi-text);
    background: var(--app-kpi-bg);
    border: 1px solid var(--app-kpi-border);
    border-left: 4px solid var(--app-kpi-accent);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
    text-decoration: none;
    text-align: left;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.app-kpi-card[type="button"] {
    font: inherit;
    cursor: pointer;
}
.app-kpi-card:hover {
    color: var(--app-kpi-text);
    border-color: var(--app-kpi-accent);
    box-shadow: var(--app-shadow-md);
    transform: translateY(-2px);
}
.app-kpi-card:focus-visible {
    outline: 3px solid var(--app-kpi-accent);
    outline-offset: 2px;
}
.app-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    color: var(--app-kpi-accent);
    background: var(--app-kpi-icon-bg);
    border-radius: var(--app-radius-lg);
    font-size: 1.35rem;
}
.app-kpi-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}
.app-kpi-label {
    color: var(--app-kpi-muted);
    font-size: .9rem;
    font-weight: 600;
}
.app-kpi-value {
    color: var(--app-kpi-text);
    font-size: 1.65rem;
    font-weight: 750;
    line-height: 1.1;
    width: 100%;
    text-align: center;
}
.app-kpi-skeleton-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}
.app-kpi-skeleton-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}
.app-kpi-skeleton-value {
    height: 1.25rem;
}
.app-overview-chart-card {
    display: block;
    cursor: pointer;
    color: var(--bs-body-color);
    min-height: 24rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border-subtle);
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.app-overview-chart-card h6 {
    margin: 0 0 .75rem;
    color: var(--bs-emphasis-color);
    font-size: 1rem;
    font-weight: 750;
}
.app-overview-chart-card:hover {
    color: var(--bs-body-color);
    border-color: var(--bs-primary);
    box-shadow: var(--app-shadow-md);
    transform: translateY(-2px);
}
.app-overview-chart-card:focus-visible,
.app-overview-chart-card:focus-within {
    outline: 3px solid rgba(var(--bs-primary-rgb), .65);
    outline-offset: 2px;
}
.app-kpi-loading {
    --app-kpi-bg: var(--bs-body-bg);
    --app-kpi-border: var(--bs-border-color);
    --app-kpi-accent: var(--bs-secondary-color);
    --app-kpi-icon-bg: var(--bs-secondary-bg);
}
.app-kpi-orders {
    --app-kpi-bg: #eef4ff;
    --app-kpi-border: #aac4ef;
    --app-kpi-accent: #1f5fbf;
    --app-kpi-text: #13233d;
    --app-kpi-muted: #42536d;
    --app-kpi-icon-bg: #dbeafe;
}
.app-kpi-quotations {
    --app-kpi-bg: #fff3db;
    --app-kpi-border: #e6b85f;
    --app-kpi-accent: #8a4b00;
    --app-kpi-text: #38240d;
    --app-kpi-muted: #634918;
    --app-kpi-icon-bg: #ffedae;
}
.app-kpi-customers {
    --app-kpi-bg: #eaf7ef;
    --app-kpi-border: #98d0aa;
    --app-kpi-accent: #1f6f42;
    --app-kpi-text: #12331f;
    --app-kpi-muted: #365b44;
    --app-kpi-icon-bg: #d5f0df;
}
.app-kpi-products {
    --app-kpi-bg: #f2edff;
    --app-kpi-border: #c1b0ec;
    --app-kpi-accent: #5b3ea8;
    --app-kpi-text: #261a4c;
    --app-kpi-muted: #51446f;
    --app-kpi-icon-bg: #e4dbff;
}
[data-appearance="dark"] .app-kpi-orders {
    --app-kpi-bg: #14213a;
    --app-kpi-border: #315f9e;
    --app-kpi-accent: #8bbcff;
    --app-kpi-text: #f1f6ff;
    --app-kpi-muted: #c8d7ee;
    --app-kpi-icon-bg: #1f3457;
}
[data-appearance="dark"] .app-kpi-quotations {
    --app-kpi-bg: #302414;
    --app-kpi-border: #8a631e;
    --app-kpi-accent: #ffd479;
    --app-kpi-text: #fff7e8;
    --app-kpi-muted: #ead4aa;
    --app-kpi-icon-bg: #4a3517;
}
[data-appearance="dark"] .app-kpi-customers {
    --app-kpi-bg: #14291e;
    --app-kpi-border: #2e754a;
    --app-kpi-accent: #8bd9a6;
    --app-kpi-text: #effaf2;
    --app-kpi-muted: #c3dfcc;
    --app-kpi-icon-bg: #1d3e2b;
}
[data-appearance="dark"] .app-kpi-products {
    --app-kpi-bg: #231b35;
    --app-kpi-border: #6a55a3;
    --app-kpi-accent: #cbb7ff;
    --app-kpi-text: #f6f2ff;
    --app-kpi-muted: #d5c8ee;
    --app-kpi-icon-bg: #33264d;
}

@media (max-width: 991.98px) {
    .app-home-charts {
        grid-template-columns: 1fr;
    }
    .app-editor-layout {
        grid-template-columns: 1fr;
    }
    .app-ticket-editor-page > .row.mb-3 {
        grid-template-columns: 1fr;
    }
    .app-editor-side {
        position: static;
    }
}

/* Renewal pipeline dashboard tile. Full-width list rather than a
   chart card, so it gets its own narrow style block. The day-count chip
   uses traffic-light backgrounds (critical / warning / default) keyed off
   DaysUntilEnd in RenewalsTile.razor. */
.app-home-renewals {
    margin-top: 1rem;
}
.app-renewals-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.app-renewals-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}
.app-renewals-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.app-renewals-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius-md, .5rem);
    background: var(--bs-body-bg);
}
.app-renewals-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
    gap: .5rem 1rem;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}
.app-renewals-customer {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-renewals-partner {
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-renewals-end-date {
    font-variant-numeric: tabular-nums;
    color: var(--bs-emphasis-color);
}
.app-renewals-days {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 999px;
    min-width: 2.5rem;
    text-align: center;
}
.app-renewals-days-critical {
    color: #fff;
    background: var(--bs-danger);
}
.app-renewals-days-warning {
    color: #000;
    background: var(--bs-warning);
}
.app-renewals-days-default {
    color: var(--bs-emphasis-color);
    background: var(--bs-secondary-bg);
}
.app-renewals-row-actions {
    flex: 0 0 auto;
}
@media (max-width: 767.98px) {
    .app-renewals-row {
        flex-direction: column;
        align-items: stretch;
    }
    .app-renewals-row-main {
        grid-template-columns: 1fr auto;
    }
}

/* Status cards use paired background/text variables so colored states remain
   readable in both Bootstrap light and dark themes. */
.app-status-card-group {
    display: flex;
    flex-wrap: nowrap;
    gap: .3rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: thin;
}
.app-status-card,
.app-timeline-status {
    --app-status-bg: var(--bs-body-bg);
    --app-status-border: var(--bs-border-color);
    --app-status-text: var(--bs-emphasis-color);
    --app-status-muted: var(--bs-secondary-color);
    color: var(--app-status-text);
    background: var(--app-status-bg);
    border: 1px solid var(--app-status-border);
    border-radius: var(--app-radius-md);
}
.app-status-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 3.65rem;
    padding: 1rem;
    text-align: center;
    box-shadow: var(--app-shadow-sm);
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.app-status-card:hover {
    border-color: var(--app-status-text);
    box-shadow: var(--app-shadow-md);
    transform: translateY(-1px);
}
.app-status-card:focus-visible,
.app-timeline-status:focus-visible {
    outline: 3px solid var(--app-status-text);
    outline-offset: 2px;
}
.app-status-card.is-active {
    box-shadow: inset 0 0 0 2px var(--app-status-text), var(--app-shadow-md);
}
.app-status-label {
    color: var(--app-status-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}
.app-status-card-clear {
    --app-status-bg: var(--bs-body-bg);
    --app-status-border: var(--bs-border-color);
    --app-status-text: var(--bs-emphasis-color);
    --app-status-muted: var(--bs-secondary-color);
    min-width: 3.65rem;
    font-size: 1.35rem;
}
.app-timeline-status {
    flex: 1;
    min-width: 0;
    padding: .55rem .85rem;
    text-align: left;
}
.app-order-status-draft {
    --app-status-bg: #fff1db;
    --app-status-border: #d98a1d;
    --app-status-text: #5c3300;
    --app-status-muted: #5c3300;
}
.app-order-status-sent,
.app-order-status-sent-after-rejection {
    --app-status-bg: #e8f1ff;
    --app-status-border: #7aa8e8;
    --app-status-text: #17457c;
    --app-status-muted: #17457c;
}
.app-order-status-approved {
    --app-status-bg: #e7f6dc;
    --app-status-border: #8bc46f;
    --app-status-text: #25530f;
    --app-status-muted: #25530f;
}
.app-order-status-signed-by-partner {
    --app-status-bg: #e3f3d9;
    --app-status-border: #77af56;
    --app-status-text: #21520c;
    --app-status-muted: #21520c;
}
.app-order-status-sent-to-supplier {
    --app-status-bg: #f1f0f0;
    --app-status-border: #b9b1b1;
    --app-status-text: #3b3b3b;
    --app-status-muted: #3b3b3b;
}
.app-order-status-supplier-working {
    --app-status-bg: #eee9e5;
    --app-status-border: #a2968f;
    --app-status-text: #3e3936;
    --app-status-muted: #3e3936;
}
.app-order-status-suspended {
    --app-status-bg: #fff4cf;
    --app-status-border: #d49b1d;
    --app-status-text: #5b4300;
    --app-status-muted: #5b4300;
}
.app-order-status-active {
    --app-status-bg: #e3f6e8;
    --app-status-border: #65b579;
    --app-status-text: #17512a;
    --app-status-muted: #17512a;
}
.app-order-status-rejected {
    --app-status-bg: #ffe8e5;
    --app-status-border: #e37462;
    --app-status-text: #7a1607;
    --app-status-muted: #7a1607;
}
[data-appearance="dark"] .app-order-status-draft {
    --app-status-bg: #372414;
    --app-status-border: #9a650f;
    --app-status-text: #ffd7a0;
    --app-status-muted: #ffd7a0;
}
[data-appearance="dark"] .app-order-status-sent,
[data-appearance="dark"] .app-order-status-sent-after-rejection {
    --app-status-bg: #14253d;
    --app-status-border: #3f71ad;
    --app-status-text: #b8d8ff;
    --app-status-muted: #b8d8ff;
}
[data-appearance="dark"] .app-order-status-approved,
[data-appearance="dark"] .app-order-status-signed-by-partner,
[data-appearance="dark"] .app-order-status-active {
    --app-status-bg: #14291b;
    --app-status-border: #3b7a49;
    --app-status-text: #b7edc2;
    --app-status-muted: #b7edc2;
}
[data-appearance="dark"] .app-order-status-sent-to-supplier {
    --app-status-bg: #2b2d30;
    --app-status-border: #6f7478;
    --app-status-text: #e4e7ea;
    --app-status-muted: #e4e7ea;
}
[data-appearance="dark"] .app-order-status-supplier-working {
    --app-status-bg: #2d2926;
    --app-status-border: #7e736b;
    --app-status-text: #ece1d8;
    --app-status-muted: #ece1d8;
}
[data-appearance="dark"] .app-order-status-suspended {
    --app-status-bg: #352810;
    --app-status-border: #9f7815;
    --app-status-text: #ffe29a;
    --app-status-muted: #ffe29a;
}
[data-appearance="dark"] .app-order-status-rejected {
    --app-status-bg: #3b1714;
    --app-status-border: #9d4a40;
    --app-status-text: #ffc7bf;
    --app-status-muted: #ffc7bf;
}
.app-form-section { padding: var(--app-spacing-normal); }
.app-form-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    margin: 0 0 var(--app-spacing-tight) 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--app-border-subtle);
}

/* AppFormFooter: Cancel-left, Save-right, destructive isolated far-left */
.app-form-footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: var(--app-spacing-normal);
    margin-top: var(--app-spacing-normal);
    border-top: 1px solid var(--app-border-subtle);
}
.app-form-footer-spacer { flex: 1; }

/* OTP code input - fixed width, large monospaced characters, centered */
.app-otp-input {
    width: 200px;
    font-size: 18px;
    letter-spacing: 4px;
    text-align: center;
}

/* OTP signing card accent - green left rule indicating "ready to sign" */
.app-otp-card { border-left: 4px solid var(--bs-success, #6ab04c); }

/* AppGrid: subtle row-hover and consistent action column */
.app-grid .dxbl-grid-row:hover {
    background: var(--app-interaction-hover);
}
.app-grid-actions {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
}
.app-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem clamp(.85rem, 1.8vw, 1.25rem);
}
.app-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}
.app-header-menu :where(.dxbl-menu-item, [role="menuitem"]) {
    border-radius: var(--app-radius-md);
}
.app-mobile-menu-button {
    flex: 0 0 auto;
}
.app-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.app-dialog-message { margin: 0; }
.app-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.app-field-caption {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .5rem;
    color: var(--bs-emphasis-color);
    font-weight: 600;
    line-height: 1.35;
}

.app-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.app-fieldset-legend {
    float: none;
    width: auto;
    padding: 0;
}

.wizard-select-product {
    height: min(75vh, 820px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wizard-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.wizard-step {
    position: relative;
}

.wizard-step + .wizard-step::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 50%;
    width: .75rem;
    height: 2px;
    background: var(--bs-border-color);
}

.wizard-step-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 1px solid transparent;
    padding: .35rem .7rem .35rem .35rem;
    border-radius: 999px;
    color: var(--bs-body-color);
    font-weight: 500;
    cursor: pointer;
}

.wizard-step-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.wizard-step-marker {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: .9rem;
}

.wizard-step.is-active .wizard-step-marker {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

.wizard-step.is-active .wizard-step-button {
    background: var(--bs-primary-bg-subtle);
    font-weight: 600;
}

.wizard-step.is-done .wizard-step-marker,
.wizard-step.is-available .wizard-step-marker {
    background: var(--bs-body-bg);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.wizard-step-label {
    white-space: nowrap;
}

.wizard-request-action {
    margin-left: auto;
}

.wizard-grid-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.wizard-step-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: .75rem;
}

/* ============================================================================
   Ticket conversation pane (issue #30 / Zendesk-style rework)
   ============================================================================ */
.ec-conversation {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ec-conversation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.ec-conversation-filter-select {
    min-width: 180px;
}

.ec-conversation-empty {
    text-align: center;
    padding: 2rem 1rem;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    background: var(--bs-light, #f8f9fa);
}

.ec-comment {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: .75rem;
    padding: .75rem;
    border-radius: .5rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e6e8eb);
}

.ec-comment-internal {
    background: #fff8e1;
    border-left: 3px solid #f0ad4e;
}

.ec-comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #5b6cff;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    letter-spacing: .02em;
}

.ec-comment-internal .ec-comment-avatar {
    background: #b07a16;
}

.ec-comment-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.ec-comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
}

.ec-comment-author {
    font-weight: 600;
}

.ec-comment-time,
.ec-comment-time-edited {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .85rem;
}

.ec-comment-actions {
    margin-left: auto;
}

.ec-comment-pill {
    display: inline-flex;
    align-items: center;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ec-comment-pill-muted {
    background: var(--bs-tertiary-bg, #e9ecef);
    color: var(--bs-secondary-color, #495057);
}

.ec-comment-pill-internal {
    background: #f0ad4e;
    color: #fff;
}

.ec-comment-text {
    margin: 0;
    white-space: pre-line;
    word-wrap: break-word;
}

.ec-comment-edit-memo {
    width: 100%;
}

.ec-comment-attachments {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ec-comment-attachment {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--bs-tertiary-bg, #f1f3f5);
    border-radius: .35rem;
    padding: .1rem .25rem;
}

.ec-comment-pending-attachment {
    display: inline-flex;
    align-items: center;
    background: #e7f1ff;
    color: #0a58ca;
    padding: .15rem .5rem;
    border-radius: .35rem;
    font-size: .85rem;
}

.ec-comment-mention-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: #fff3cd;
    color: #856404;
    padding: .15rem .5rem;
    border-radius: .35rem;
    font-size: .85rem;
}

.ec-comment-mention-remove {
    background: transparent;
    border: none;
    color: #856404;
    cursor: pointer;
    font-weight: bold;
    padding: 0 .15rem;
}
.ec-comment-mention-remove:hover { color: #b07900; }

.ec-composer-format {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem 0;
    margin-bottom: .25rem;
}
.ec-composer-format-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: .15rem .4rem;
    cursor: pointer;
    color: #495057;
}
.ec-composer-format-btn:hover {
    background: #f1f3f5;
    border-color: #dee2e6;
}
.ec-composer-format-hint {
    font-size: .75rem;
    color: #6c757d;
    margin-left: auto;
}
.ec-comment-text a { color: #0d6efd; text-decoration: underline; }

.ec-comment-edit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
}

.ec-composer {
    margin-top: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .75rem;
    background: var(--bs-body-bg, #fff);
}

.ec-composer-toggle {
    display: inline-flex;
    margin-bottom: .5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .35rem;
    overflow: hidden;
}

.ec-composer-toggle-btn {
    background: transparent;
    border: 0;
    padding: .25rem .75rem;
    font-size: .85rem;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
}

.ec-composer-toggle-btn.active {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}

.ec-composer-toggle-internal.active {
    background: #f0ad4e;
    color: #fff;
}

.ec-composer-input {
    width: 100%;
}

.ec-composer-input-internal {
    background: #fff8e1;
}

.ec-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}

.ec-composer-attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

/* ----------------------------------------------------------------------------
   Two-pane ticket layout
   ---------------------------------------------------------------------------- */
.ec-ticket-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 992px) {
    .ec-ticket-shell {
        grid-template-columns: 1fr;
    }
}

.ec-ticket-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.ec-ticket-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}

.ec-ticket-sidebar-card {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.ec-ticket-sidebar-field {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.ec-ticket-sidebar-field-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color, #6c757d);
}

/* ---------------------------------------------------------------------------
   Ticket sidebar — refactored layout (4 sections: pills / people / advanced /
   advanced actions). See EasyConnect.Web/Features/Tickets/Upsert.razor.
   --------------------------------------------------------------------------- */
.ec-ticket-sidebar-card-title {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.ec-ticket-sidebar-subsection {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-top: .55rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.ec-ticket-sidebar-subsection:first-of-type {
    padding-top: 0;
    border-top: none;
}

.ec-ticket-sidebar-subheading {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

/* --- Status / priority / type chip row ---
   Fluent 2 alignment: neutral chrome that matches every other DevExpress
   combobox / SearchLookup on the page. Accent color is expressed ONLY by
   the small status/priority swatch dot inside the chip — never as a
   tinted background. Rectangular (4px corner), 1px neutral border, same
   text size + control height as DxComboBox so the chips visually line up
   with the WorkingArea SearchLookup beneath them. */
.ec-ticket-pills-card {
    gap: .55rem;
}
.ec-ticket-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    align-items: center;
}
.ec-ticket-pill {
    /* DxDropDownButton renders a <button>; we restyle it to match a
       compact DxComboBox trigger. Padding + radius mirror the
       --dxbl-textbox-* values DevExpress uses by default. */
    --dxbl-btn-padding-y: .25rem;
    --dxbl-btn-padding-x: .55rem;
    border-radius: var(--bs-border-radius, .375rem) !important;
    line-height: 1.25 !important;
    font-size: .8125rem !important;
    font-weight: 400 !important;
    background: var(--bs-body-bg, #fff) !important;
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    color: var(--bs-body-color) !important;
    box-shadow: none !important;
    transition: background-color .12s ease, border-color .12s ease;
}
.ec-ticket-pill:hover {
    background: var(--bs-tertiary-bg, #f8f9fa) !important;
    border-color: var(--bs-secondary-border-subtle, #ced4da) !important;
}
.ec-ticket-pill:focus-visible,
.ec-ticket-pill:focus-within {
    /* Fluent 2 focus ring: 2px accent outline outside the border. */
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 1px;
}
.ec-ticket-pill .ec-ticket-pill-content {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    max-width: 100%;
}
.ec-ticket-pill .ec-ticket-pill-content .ticket-color-box {
    /* Indicator dot — Fluent uses small color tokens beside neutral chrome,
       not full color fills. 8px diameter is the smallest legible swatch. */
    width: .5rem;
    height: .5rem;
    margin-right: 0;
    border-width: 0;
    border-radius: 50%;
    flex: 0 0 auto;
}
.ec-ticket-pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12ch;
}
.ec-ticket-pill-icon,
.ec-ticket-pill-caret {
    font-size: .65rem;
    color: var(--bs-secondary-color, #6c757d);
}
/* Status / priority / type chips intentionally share the same neutral
   chrome — the swatch dot carries the type-of-info. Keep these selectors
   so future per-kind overrides have a hook. */
.ec-ticket-status-pill,
.ec-ticket-priority-pill,
.ec-ticket-type-pill {
    /* No accent background / border. Fluent 2 keeps color subordinate to
       hierarchy: text + icon for meaning, dot for state. */
}

/* Read-only chip variant — used in the partner SimpleUpsert sidebar.
   Renders as a <span> instead of DxDropDownButton so it has no button
   chrome, no caret, no interactive affordances. Visual chrome mirrors
   .ec-ticket-pill exactly (same padding / border / radius / typography)
   so admin and partner sidebars line up identically. */
.ec-ticket-pill-readonly {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: var(--bs-border-radius, .375rem);
    line-height: 1.25;
    font-size: .8125rem;
    font-weight: 400;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color);
    cursor: default;
}
.ec-ticket-pill-readonly:hover,
.ec-ticket-pill-readonly:focus,
.ec-ticket-pill-readonly:focus-visible,
.ec-ticket-pill-readonly:focus-within {
    /* Explicitly suppress the interactive treatments inherited from the
       base .ec-ticket-pill block — these chips don't do anything. */
    background: var(--bs-body-bg, #fff);
    border-color: var(--bs-border-color, #dee2e6);
    outline: none;
}

/* --- Collapsible advanced sections (<details> based) --- */
.ec-ticket-advanced-card {
    padding: 0;
    overflow: hidden;
}
.ec-ticket-advanced-card > *:not(summary) {
    padding-left: 1rem;
    padding-right: 1rem;
}
.ec-ticket-advanced-card > *:last-child:not(summary) {
    padding-bottom: .75rem;
}
.ec-ticket-sidebar-card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ec-ticket-sidebar-card-summary::-webkit-details-marker {
    display: none;
}
.ec-ticket-sidebar-card-summary:hover {
    background: var(--bs-tertiary-bg, #f8f9fa);
}
.ec-ticket-summary-caret {
    transition: transform .15s ease;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8rem;
}
details[open] > .ec-ticket-sidebar-card-summary .ec-ticket-summary-caret {
    transform: rotate(180deg);
}
.ec-ticket-advanced-card[open] > .ec-ticket-sidebar-card-summary {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    margin-bottom: .65rem;
}

.ec-ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.ec-ticket-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.ec-ticket-subtitle {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .85rem;
}

/* ============================================================================
   Inline activity-log rows (issue #30 follow-on, Zendesk parity)
   ============================================================================ */
.ec-activity-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    margin: .25rem 0;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .85rem;
    border-left: 2px solid var(--bs-tertiary-color, #c9ced3);
    background: var(--bs-light, #f8f9fa);
    border-radius: .25rem;
}

.ec-activity-icon {
    width: 20px;
    text-align: center;
    color: var(--bs-primary, #0d6efd);
}

.ec-activity-actor {
    font-weight: 600;
}

.ec-activity-text {
    flex: 1;
}

.ec-activity-time {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8rem;
}

/* ----------------------------------------------------------------------------
   Ticket tags field (sidebar widget)
   ---------------------------------------------------------------------------- */
.ec-tags-field {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.ec-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
    font-size: .78rem;
    font-weight: 500;
}

.ec-tag-chip-remove {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: .7;
}

.ec-tag-chip-remove:hover {
    opacity: 1;
}

.ec-tags-add {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    width: 100%;
    margin-top: .25rem;
}

.ec-tags-add-input {
    flex: 1;
}

/* ----------------------------------------------------------------------------
   Ticket followers field
   ---------------------------------------------------------------------------- */
.ec-followers-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.ec-followers-list {
    list-style: none;
    padding: 0;
    margin: 0 0 .25rem 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.ec-followers-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    padding: .1rem .25rem;
    font-size: .85rem;
}

/* ----------------------------------------------------------------------------
   Threaded replies
   ---------------------------------------------------------------------------- */
.ec-comment-reply {
    margin-left: 2rem;
    border-left: 3px solid var(--bs-primary-bg-subtle, #cfe2ff);
}

.ec-composer-replying {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .6rem;
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    border-radius: .35rem;
    margin-bottom: .5rem;
    font-size: .85rem;
}

.ec-composer-replying-cancel {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* ----------------------------------------------------------------------------
   Requester history widget
   ---------------------------------------------------------------------------- */
.ec-requester-history {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.ec-requester-history-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: .35rem;
    cursor: pointer;
}

.ec-requester-history-item:hover {
    background: var(--bs-tertiary-bg, #f1f3f5);
}

.ec-requester-history-meta {
    flex: 1;
    min-width: 0;
}

.ec-requester-history-subject {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* OrderActivationTimeline: vertical rail with coloured dots.
   Layout: dot on the left (40px column), content card on the right.
   The rail itself is a pseudo-element on the <ol> so it spans every item
   without we having to draw it per-row. */
.app-activation-timeline {
    position: relative;
    padding-left: 1.25rem;
}
.app-activation-timeline::before {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-border-color, #dee2e6);
}
.app-activation-timeline-item {
    --app-activation-color: var(--bs-secondary-color, #6c757d);
    --app-activation-bg: var(--bs-body-bg);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
}
.app-activation-timeline-item:last-child {
    padding-bottom: 0;
}
.app-activation-timeline-dot {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--app-activation-bg);
    border: 2px solid var(--app-activation-color);
    color: var(--app-activation-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    margin-left: -.6rem;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--bs-body-bg);
}
.app-activation-timeline-card {
    flex: 1;
    min-width: 0;
    border-left: 4px solid var(--app-activation-color);
}
.app-activation-supplier   { --app-activation-color: #5a6e8c; }
.app-activation-scheduled  { --app-activation-color: #b07a1f; }
.app-activation-installed  { --app-activation-color: #2563a1; }
.app-activation-tested     { --app-activation-color: #2f7d32; }
.app-activation-active     { --app-activation-color: #17512a; }
.app-activation-migrated   { --app-activation-color: #6a3d9a; }
.app-activation-cancelled  { --app-activation-color: #a82a1a; }
[data-appearance="dark"] .app-activation-supplier   { --app-activation-color: #9fb4d4; }
[data-appearance="dark"] .app-activation-scheduled  { --app-activation-color: #f0c47a; }
[data-appearance="dark"] .app-activation-installed  { --app-activation-color: #7fb3e5; }
[data-appearance="dark"] .app-activation-tested     { --app-activation-color: #87d693; }
[data-appearance="dark"] .app-activation-active     { --app-activation-color: #b7edc2; }
[data-appearance="dark"] .app-activation-migrated   { --app-activation-color: #c5a8e8; }
[data-appearance="dark"] .app-activation-cancelled  { --app-activation-color: #f0a89e; }

/* --- Kanban board (orders + quotations) ----------------------------
   HTML5-native drag/drop board. Single horizontal scroll, one column per
   status. Cards reuse the same `--app-status-bg / --app-status-border` custom
   properties as the list view's status chips, so a single swatch definition
   (.app-order-status-*, .app-quotation-status-*) drives both surfaces and
   light / dark themes inherit automatically.
*/
.app-kanban-board {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    align-items: flex-start;
    padding-bottom: .5rem;
}
.app-kanban-column {
    flex: 0 0 280px;
    min-height: 320px;
    max-height: calc(100vh - 220px);
    display: flex;
    flex-direction: column;
    background: var(--app-status-bg, var(--bs-body-bg));
    border: 1px solid var(--app-status-border, var(--app-border-subtle));
    border-radius: .5rem;
    overflow: hidden;
    transition: outline-color .15s ease;
    outline: 2px dashed transparent;
    outline-offset: -4px;
}
.app-kanban-column.is-drop-target {
    outline-color: var(--app-status-border, var(--bs-primary));
}
.app-kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--app-status-border, var(--app-border-subtle));
    background: color-mix(in srgb, var(--app-status-bg, transparent) 70%, transparent);
    font-weight: 600;
    color: var(--app-status-text, var(--bs-emphasis-color));
}
.app-kanban-column-title {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.app-kanban-column-count {
    font-size: .8rem;
    background: var(--bs-body-bg);
    color: var(--app-status-text, var(--bs-emphasis-color));
    border-radius: 999px;
    padding: .1rem .55rem;
    min-width: 1.5rem;
    text-align: center;
}
.app-kanban-column-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.app-kanban-card {
    background: var(--bs-body-bg);
    border-radius: .35rem;
    padding: .55rem .65rem;
    border: 1px solid var(--app-border-subtle);
    border-left: 4px solid var(--app-status-border, var(--bs-primary));
    cursor: grab;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.app-kanban-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}
.app-kanban-card:active { cursor: grabbing; }
.app-kanban-card.is-dragging { opacity: .4; }
.app-kanban-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.app-kanban-card-number {
    font-weight: 600;
    font-size: .9rem;
    color: var(--bs-emphasis-color);
}
.app-kanban-card-badge {
    color: var(--bs-warning, #b87800);
    font-size: .85rem;
}
.app-kanban-card-customer {
    font-size: .85rem;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   Ticket list saved views (chip strip)
   ---------------------------------------------------------------------------- */
.ec-ticket-views {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .5rem 0 1rem;
}

.ec-ticket-view-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    font-size: .85rem;
    cursor: pointer;
}

.ec-ticket-view-chip:hover {
    background: var(--bs-tertiary-bg, #f1f3f5);
}

.ec-ticket-view-chip.active {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border-color: var(--bs-primary, #0d6efd);
}

.ec-ticket-view-count {
    background: rgba(0,0,0,.08);
    border-radius: 999px;
    padding: 0 .45rem;
    font-size: .75rem;
}

.ec-ticket-view-chip.active .ec-ticket-view-count {
    background: rgba(255,255,255,.25);
}

/* ----------------------------------------------------------------------------
   SLA indicator chip
   ---------------------------------------------------------------------------- */
.ec-sla-chip {
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}

.ec-sla-ok {
    background: rgba(40, 167, 69, .15);
    color: #155724;
}

.ec-sla-warn {
    background: rgba(255, 193, 7, .25);
    color: #856404;
}

.ec-sla-breach {
    background: rgba(220, 53, 69, .15);
    color: #842029;
}

/* ----------------------------------------------------------------------------
   Mobile composer polish
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .ec-composer-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .ec-composer-attachments {
        justify-content: flex-start;
    }

    .ec-ticket-views {
        gap: .25rem;
    }

    .ec-ticket-view-chip {
        padding: .25rem .55rem;
        font-size: .8rem;
    }

    .ec-comment {
        grid-template-columns: 32px 1fr;
        gap: .5rem;
    }

    .ec-comment-avatar {
        width: 32px;
        height: 32px;
        font-size: .75rem;
    }

    .ec-comment-meta {
        font-size: .8rem;
    }
}

/* ----------------------------------------------------------------------------
   Ticket time tracking
   ---------------------------------------------------------------------------- */
.ec-time-tracking {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.ec-time-tracking-summary {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
}

.ec-time-tracking-add {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.ec-time-tracking-input {
    width: 100px;
}

/* ----------------------------------------------------------------------------
   Composer drag-and-drop zone
   ---------------------------------------------------------------------------- */
.ec-composer {
    position: relative;
}

.ec-composer-drop-hint {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(13, 110, 253, .08);
    border: 2px dashed var(--bs-primary, #0d6efd);
    border-radius: .5rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .25rem;
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
}

.ec-composer-drop-hint i {
    font-size: 1.6rem;
}

.ec-composer.ec-drop-active .ec-composer-drop-hint {
    display: flex;
}

.ec-feedback-card {
    max-width: 560px;
    margin: 64px auto;
    padding: 32px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ec-feedback-title { font-size: 24px; margin: 0 0 8px; }
.ec-feedback-subtitle { color: #555; margin: 0 0 24px; }
.ec-feedback-status { color: #333; }
.ec-feedback-rating { display: flex; gap: 8px; margin: 24px 0; justify-content: center; }
.ec-feedback-star {
    background: none; border: none; cursor: pointer;
    font-size: 36px; color: #d0d4d8; padding: 4px;
    transition: color 0.15s;
}
.ec-feedback-star:hover { color: #f5b400; }
.ec-feedback-star-active { color: #f5b400; }
.ec-feedback-comment {
    width: 100%; padding: 12px; border: 1px solid #d0d4d8;
    border-radius: 6px; font: inherit; resize: vertical; box-sizing: border-box;
}
.ec-feedback-error { color: #c0392b; margin: 12px 0 0; }
.ec-feedback-submit {
    margin-top: 16px; padding: 12px 24px; background: #0d6efd;
    color: #fff; border: none; border-radius: 6px; font-size: 16px;
    cursor: pointer; width: 100%;
}
.ec-feedback-submit:disabled { background: #9bb5dc; cursor: not-allowed; }

.app-kanban-card-meta {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    gap: .5rem;
}
.app-kanban-card-amount {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

/* Quotation status swatches: the list view already has `.app-order-status-*`
   but no `.app-quotation-status-*`. We define them here so the Kanban can
   color-code both flavours with the same custom-property contract. */
.app-quotation-status-draft {
    --app-status-bg: #fff1db;
    --app-status-border: #d98a1d;
    --app-status-text: #5c3300;
    --app-status-muted: #5c3300;
}
.app-quotation-status-sent {
    --app-status-bg: #e8f1ff;
    --app-status-border: #7aa8e8;
    --app-status-text: #17457c;
    --app-status-muted: #17457c;
}
.app-quotation-status-order {
    --app-status-bg: #e3f6e8;
    --app-status-border: #65b579;
    --app-status-text: #17512a;
    --app-status-muted: #17512a;
}
.app-quotation-status-rejected {
    --app-status-bg: #ffe8e5;
    --app-status-border: #e37462;
    --app-status-text: #7a1607;
    --app-status-muted: #7a1607;
}
.app-quotation-status-cancelled {
    --app-status-bg: #f1f0f0;
    --app-status-border: #b9b1b1;
    --app-status-text: #3b3b3b;
    --app-status-muted: #3b3b3b;
}
.app-quotation-status-expired {
    --app-status-bg: #ece1f5;
    --app-status-border: #9b76c8;
    --app-status-text: #3d1f6b;
    --app-status-muted: #3d1f6b;
}
[data-appearance="dark"] .app-quotation-status-draft {
    --app-status-bg: #372414;
    --app-status-border: #9a650f;
    --app-status-text: #ffd7a0;
    --app-status-muted: #ffd7a0;
}
[data-appearance="dark"] .app-quotation-status-sent {
    --app-status-bg: #14253d;
    --app-status-border: #3f71ad;
    --app-status-text: #b8d8ff;
    --app-status-muted: #b8d8ff;
}
[data-appearance="dark"] .app-quotation-status-order {
    --app-status-bg: #14291b;
    --app-status-border: #3b7a49;
    --app-status-text: #b7edc2;
    --app-status-muted: #b7edc2;
}
[data-appearance="dark"] .app-quotation-status-rejected {
    --app-status-bg: #3b1714;
    --app-status-border: #9d4a40;
    --app-status-text: #ffc7bf;
    --app-status-muted: #ffc7bf;
}
[data-appearance="dark"] .app-quotation-status-cancelled {
    --app-status-bg: #2b2d30;
    --app-status-border: #6f7478;
    --app-status-text: #e4e7ea;
    --app-status-muted: #e4e7ea;
}
[data-appearance="dark"] .app-quotation-status-expired {
    --app-status-bg: #25153b;
    --app-status-border: #6f4ea3;
    --app-status-text: #d9c4f3;
    --app-status-muted: #d9c4f3;
}