html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

/* Layout Styles */
/* Layout Styles */
.top-row.px-4 {
    min-height: 3.5rem;
    background-color: #294C5E !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* Ensure space between */
    padding: 0.25rem 1rem !important; /* Override px-4 padding if needed */
    width: 100%; /* Ensure full width */
}

    .top-row.px-4 .brand-container {
        flex-shrink: 0; /* Prevent brand from shrinking */
        display: flex; /* Ensure consistent flex behavior */
    }

    .top-row.px-4 .navbar-brand {
        color: #d7d7d7 !important;
        text-decoration: none !important;
        font-size: 1.1rem !important;
        padding: 0.25rem 0.75rem !important;
        margin: 0 !important;
    }

        .top-row.px-4 .navbar-brand:hover {
            color: white !important;
        }

    .top-row.px-4 .button-container {
        display: flex !important;
        align-items: center !important;
        margin-left: auto; /* Push buttons to the right as a fallback */
    }

        .top-row.px-4 .button-container .btn-link {
            color: #d7d7d7 !important;
            text-decoration: none !important;
            padding: 0.25rem 0.75rem !important;
        }

            .top-row.px-4 .button-container .btn-link:hover {
                color: white !important;
            }

            .top-row.px-4 .button-container .btn-link i {
                margin-right: 0.25rem;
            }


h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Slider track (base bar) */
.noUi-target {
    background: #e6e9ef;
    border: none;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    height: 8px;
    z-index: 0 !important;
}

/* The filled portion between handles */
.noUi-connect {
    background: linear-gradient(90deg, #007bff, #009dff);
}

/* Slider handles (the draggable circles) */
.noUi-handle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007bff;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    z-index: 0 !important;
}

    /* Add a hover effect for interactivity */
    .noUi-handle:hover {
        transform: scale(1.15);
        box-shadow: 0 4px 10px rgba(0, 123, 255, 0.5);
    }

    /* Remove default stripes from handle pseudo-elements */
    .noUi-handle::before,
    .noUi-handle::after {
        display: none;
    }

.slider-container {
    margin-top: 40px;
    margin-bottom: 15px;
    margin-right: 15px;
    margin-left: 10px;
}

.nav-tabs {
    border-bottom: 1px solid #e0e0e0;
}

    .nav-tabs .nav-link.active {
        border: none;
        border-bottom: 4px solid #294C5E !important;
        background: transparent;
        color: #294C5E !important;
    }

    /* Dropdown toggle tab (�+ Add�) */
    .nav-tabs .nav-link.dropdown-toggle {
        color: #294C5E !important;
        background: transparent !important;
        border: none !important;
    }

        /* Dropdown toggle hover/focus */
        .nav-tabs .nav-link.dropdown-toggle:hover,
        .nav-tabs .nav-link.dropdown-toggle:focus {
            color: #294C5E !important;
            background: rgba(41, 76, 94, 0.05) !important;
        }

    /* Dropdown menu appearance */
    .nav-tabs .dropdown-menu {
        border-color: #294C5E20;
    }

    .nav-tabs .dropdown-item.disabled {
        color: #294C5E99 !important;
    }

/* Drawers (Bootstrap offcanvas) use Bootstrap's own stacking — drawer 1045, scrim 1040 — so the top bar (1050) stays
   above them and Nápověda / Asistent can be opened while a drawer is open (spec 210 §3.4 layout C, owner 2026-10-15);
   modals (1055) and toasts (1060) stay above everything; the nav row (1035), the status banners (1031) and the page
   header bar (1030) lie under the scrim. From 768 px up a drawer and its scrim start under the top bar and, while the
   assistant panel is open, end where the panel begins (spec 211 D2, further down). Phones keep the full-height drawer. */
:root { --topbar-height: 3.5rem; }
@media (min-width: 768px) {
    .offcanvas.offcanvas-end { top: var(--topbar-height); height: auto; }
    .offcanvas-backdrop { top: var(--topbar-height); height: auto; bottom: 0; }
}
/* A modal whose markup lives inside a drawer (a confirm dialog in an editor) renders inside the drawer's stacking
   context, under the modal's own backdrop (1050). While such a modal is open, site.js lifts its drawer above that
   backdrop — the dialog shows, the page behind stays dimmed, as it did when drawers sat at 1055. */
.offcanvas.offcanvas-has-modal { z-index: 1052; }

/* Ensure all right-side drawers are usable on small screens */
@media (max-width: 575.98px) {
    .offcanvas-end {
        width: 100% !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .offcanvas-end {
        min-width: 360px !important;
    }
}

.offcanvas-body img {
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/*.offcanvas-body h6 {
    color: #0d6efd;
}*/

.offcanvas-body p {
    line-height: 1.5;
}

/* The drawer header (owner 2026-10-15, with layout C of spec 210 §3.4): the page header-bar look — light blue-grey, dark
   blue text, a 2 px rule — 2.75 rem tall, the same geometry as the assistant panel's header, so the two line up under the
   top bar and a drawer reads as a page in the app rather than a second dark band. The 70 drawer headers keep their
   markup from the dark-header days: the title's text-white, the white close button and the light buttons are
   re-coloured here. */
.drawer-header {
    background-color: #e9f0f3 !important;
    color: #294C5E;
    min-height: 2.75rem;
    box-sizing: border-box;
    padding: .4rem 1.25rem;
    border-bottom: 2px solid #b0c4ca;
    box-shadow: none;
}

    .drawer-header .offcanvas-title {
        font-size: 1.1rem;
        font-weight: 600 !important; /* the titles carry an inline normal weight */
        line-height: 1.4;
    }

    .drawer-header .text-white { color: #294C5E !important; }
    .drawer-header .text-white-50 { color: rgba(41, 76, 94, .65) !important; }
    .drawer-header .btn-close-white { filter: none; }
    .drawer-header .btn-outline-light { --bs-btn-color: #294C5E; --bs-btn-border-color: #294C5E; --bs-btn-hover-bg: #294C5E; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #294C5E; --bs-btn-disabled-color: #294C5E; --bs-btn-disabled-border-color: #294C5E; }
    .drawer-header .btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #b0c4ca; --bs-btn-color: #294C5E; --bs-btn-hover-bg: #294C5E; --bs-btn-hover-border-color: #294C5E; --bs-btn-hover-color: #fff; }

.change-icon {
    cursor: pointer;
    color: #6c757d; /* muted gray */
    transition: color 0.2s;
}

    .change-icon:hover {
        color: #0d6efd; /* Bootstrap primary blue */
    }



.header-bar {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    background-color: #e9f0f3;
    border-bottom: 2px solid #b0c4ca; /* darker bluish-gray */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    overflow: visible !important;
    z-index: 1030; /* stays above other content */
}


    .header-bar h3 {
        font-size: 1.5rem;
        color: #294C5E;
        font-weight: 600;
    }

    .header-bar .badge {
        background-color: #294C5E !important;
        color: #fff;
        font-weight: 500;
        padding: 0.35em 0.75em;
        border-radius: 0.5rem;
    }

        /* Keep consistent color overrides */
        .header-bar .badge.bg-success {
            background-color: #28a745 !important;
        }

        .header-bar .badge.bg-primary {
            background-color: #0d6efd !important;
        }

        .header-bar .badge.bg-danger {
            background-color: #dc3545 !important;
        }

        .header-bar .badge.bg-secondary {
            background-color: #6c757d !important;
        }

        /* Spec 162: extended-status badges may use any Bootstrap contextual colour. Without these the
           header-bar default (#294C5E) would swallow bg-warning/info/light/dark (only the four above were
           overridden). Light backgrounds get dark text for contrast. */
        .header-bar .badge.bg-warning {
            background-color: #ffc107 !important;
            color: #000 !important;
        }

        .header-bar .badge.bg-info {
            background-color: #0dcaf0 !important;
            color: #000 !important;
        }

        .header-bar .badge.bg-light {
            background-color: #f8f9fa !important;
            color: #000 !important;
        }

        .header-bar .badge.bg-dark {
            background-color: #212529 !important;
            color: #fff !important;
        }


.header-status {
    font-size: 0.65rem !important;
    padding: 0.25em 0.6em;
    border-radius: 0.35rem;
}

.header-big-label {
    font-size: 1.4rem;
    color: #294C5E;
    line-height: 1.1;
}

.header-material-label {
    font-size: 1rem;
    color: #294C5E;
    line-height: 1.1;
    padding-top: 0.4rem;
}

.header-small-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    line-height: 1.1;
    margin-top: 0.1rem;
}

.card {
    border-radius: 0 !important;
    border: 2px solid #b0c4ca; /* darker bluish-gray */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .card.no-top-and-sides-padding {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

.fc-container {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    padding-left: 40px !important;
    padding-right: 40px !important
}

.row {

}
    .row.no-sides-margins{
        margin-right: 0 !important;
        margin-left: 0 !important;
    }


.calculation-results-row {
    padding-left: 40px !important;
    padding-right: 40px !important
}


.table-fc-bg {
    background-color: #e9f0f3;
}

/* import preview inside offcanvas: responsive maximum height based on viewport */
.import-preview {
    box-sizing: border-box;
    overflow: auto;
    /* Reserve space for offcanvas header + controls; tweak 260px as needed. The drawer starts under the top bar. */
    max-height: calc(100vh - 260px - var(--topbar-height, 3.5rem));
    min-height: 120px;
}


/* --- Row input icon helpers --- */
.input-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem; /* space between input and icon */
}

    /* keep the input padding-normal so icon sits outside, not inside the input */
    .input-with-icon .form-control {
        padding-right: 0.75rem;
    }

    /* small icon placed to the right of the input (not overlapping) */
    .input-with-icon .small-icon {
        position: relative;
        margin-left: 0; /* spacing handled by gap on the container */
        /* allow pointer events so native title / tooltips work */
        pointer-events: auto;
        cursor: help; /* shows user that a tooltip/help is available */
        font-size: 0.95rem;
        line-height: 1;
        color: #ff8c00; /* default undersized warning color (orange) */
        display: inline-block;
        vertical-align: middle;
    }

        /* explicit overrides for common utility classes */
        .input-with-icon .small-icon.text-danger {
            color: var(--bs-danger);
        }

        .input-with-icon .small-icon.text-muted {
            color: var(--bs-secondary);
        }

        /* spec 131: informational "specific edge" marker — never red (red = width-band invalid, spec 123) */
        .input-with-icon .small-icon.text-info {
            color: var(--bs-info);
        }

        /* spec 179: saw-blade "wider edge — width adjustment charged" marker — neutral, not a warning colour */
        .input-with-icon .small-icon.text-dark {
            color: var(--bs-dark);
        }

/* spec 131 §3.5: a side carrying a specific (different-decor) edge is visibly distinct in the control itself —
   blue outline, the same idiom as the red .is-invalid outline for width-band violations (which wins when both apply). */
.edge-select.edge-specific:not(.is-invalid) {
    border-color: var(--bs-info);
    background-color: var(--bs-info-bg-subtle, #cff4fc); /* light info blue — reads "specific" even when the text is truncated */
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-info-rgb), 0.35);
}

        /* if icon should be slightly smaller for very tight inputs */
        .input-with-icon .small-icon.small {
            font-size: 0.85rem;
        }

/* Hide native number input spinners for specific inputs */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinners {
    -moz-appearance: textfield;
}

/* Parts-table note cell: the note icon is shown at ALL widths (it opens the note drawer so a
   long 50-char note stays viewable/editable in full, which even a wide inline box can't show).
   On narrow screens (<1000px, which includes the fixed 800px mobile viewport) the inline input
   is hidden too, collapsing the cell to just the icon when the dense table gets too tight. */
.note-cell-icon {
    display: inline-block;
}

/* Name and Note are the two fluid columns: give them matching width hints so they share the
   table's free space roughly equally instead of letting Name absorb it all. These are hints
   under table-layout:auto — the inputs fill their cell, and the floors keep them usable. */
.col-name,
.col-note,
.col-production-instructions {
    width: 22%;
    min-width: 140px;
}

@media (max-width: 999.98px) {
    .note-cell-input {
        display: none;
    }

    /* Narrow screens: the note collapses to just the icon, so release the column's width hint and
       let it shrink to the icon instead of reserving a wide, mostly-empty cell. (Name keeps its
       hint — its input is shown at all widths.) */
    .col-note,
    .col-production-instructions {
        width: auto;
        min-width: 0;
    }

    /* Hide the "Edge all around" convenience column on narrow screens to save width.
       It is a write-only shortcut (sets all four sides at once); individual side
       dropdowns remain, so nothing is lost functionally. */
    .col-allround {
        display: none;
    }

    /* Dimension hints: hide the bracketed cut/min value on narrow screens. The info icon
       next to it becomes a tappable drawer opener instead (hover tooltips don't work on touch). */
    .dim-info-value {
        display: none;
    }
}

/* Compact edge-thickness selects in the parts table. Bootstrap's .form-select
   reserves a fixed 2.25rem right-padding for the caret, so when the table is
   squeezed on narrow / mobile screens the box collapses to just the caret and
   the thickness number disappears. Trim the caret padding/size and pull it to
   the edge, then set a min-width floor so the number stays readable. */
.edge-select {
    padding-right: 1rem;
    background-position: right 0.3rem center;
    background-size: 10px 8px;
    min-width: 52px;
}

/* --- Auth page card wrappers (Login, Register, ForgotPassword, etc.) --- */
.auth-card {
    width: 100%;
    max-width: 480px;
    padding: 0 1rem;
}

.auth-card-wide {
    width: 100%;
    max-width: 720px;
    padding: 0 1rem;
}

/* Branded tooltip matching the top menu bar color */
.fc-tooltip-white {
    --bs-tooltip-bg: #294C5E;
    --bs-tooltip-color: #ffffff;
    --bs-tooltip-opacity: 1;
    opacity: 1 !important;
}
.fc-tooltip-white .tooltip-inner {
    background-color: #294C5E !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    max-width: 450px;
}
.fc-tooltip-white .tooltip-arrow::before {
    border-bottom-color: #294C5E;
}

/* Order Items table: hide border under section headers and last rows */
tr.oi-section-header > td {
    border-bottom: none !important;
}
tr.oi-section-last > td {
    border-bottom: none !important;
}

/* Order Items table: light section background colors */
tr.oi-bg-furniture > td {
    background-color: #eef6fb !important;  /* light blue */
}
tr.oi-bg-direct > td {
    background-color: #f0f7ee !important;  /* light green */
}
tr.oi-bg-delivery > td {
    background-color: #f3eef8 !important;  /* light lavender */
}



/* Part shapes (spec 195): the "Tvar" thumbnail in the parts table. */
.shape-thumb svg { width: 56px; height: 38px; display: block; }
.shape-thumb:hover svg, .shape-thumb:focus-visible svg { outline: 1px solid #147C7C; outline-offset: 1px; border-radius: 3px; }
.shape-thumb-plain svg { opacity: .45; }
.shape-thumb-bad svg { outline: 2px solid #C0392B; outline-offset: 1px; border-radius: 3px; }

/* Spec 210 §3.4 — the assistant panel: beside the page on wide screens (the page narrows), over it on tablets,
   full screen on phones. body.assistant-open and --assistant-width come from assistant-panel.js.
   Layout C (owner 2026-10-15): from 1200 px up the panel is a column beside the nav row AND the page (.shell-main holds
   the nav row, the status banners and the page), so it starts under the top bar on the same edge as a drawer. It is
   capped by --assistant-max (assistant-panel.js: the window minus the menu's natural width) so it never covers a menu
   item, and it stands above the nav row (1035) it narrows; the drawer scrim never reaches it (D2 below). */
:root { --assistant-width: 400px; }
.content-with-assistant { display: flex; align-items: flex-start; }
.content-with-assistant > .shell-main { flex: 1 1 auto; min-width: 0; }
.shell-main > .content { min-width: 0; }
.nav-menu-container .navbar-nav { flex-wrap: nowrap; white-space: nowrap; }
.assistant-aside { display: none; flex: 0 0 auto; }
body.assistant-open .assistant-aside { display: block; }
body.assistant-resizing { user-select: none; cursor: col-resize; }
.assistant-panel { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border-left: 1px solid #d6d5d5; font-size: .9rem; }
@media (min-width: 1200px) {
    body.assistant-open .assistant-aside { width: min(var(--assistant-width), 50vw, var(--assistant-max, 50vw)); position: sticky; top: var(--topbar-height, 3.5rem); height: calc(100vh - var(--topbar-height, 3.5rem)); z-index: 1036; }
}
@media (max-width: 1199.98px) {
    body.assistant-open .assistant-aside { position: fixed; right: 0; top: var(--header-height, 7rem); bottom: 0; width: min(var(--assistant-width), 50vw); z-index: 1045; box-shadow: -4px 0 16px rgba(0, 0, 0, .15); }
    .assistant-resize { display: none; }
}
@media (max-width: 767.98px) {
    body.assistant-open .assistant-aside { width: 100vw; left: 0; }
    .assistant-panel { border-left: 0; }
}
/* Spec 211 D2 (owner 2026-10-12: every drawer covered the assistant panel): while the panel is open, a right-hand
   drawer and its backdrop end where the panel begins, so the panel stays visible and usable beside the drawer (on
   tablets the panel is a 400 px overlay, so the same rule applies). On phones the panel is full screen: it goes above
   the drawer and closing it shows the drawer again. The drawer's focus trap is told to leave the panel alone in
   assistant-panel.js. The panel is at most half the window wide (here, not only while dragging — a width stored on a wide
   screen never squeezes a drawer on a narrow one), and a drawer's own minimum width gives way to the room beside the panel
   (its body scrolls instead of the drawer reaching past the window's left edge).
   --assistant-dock is the panel's measured distance from the window's right edge (it includes a page scrollbar the
   panel sits next to); assistant-panel.js keeps it current, the panel width is the fallback. */
@media (min-width: 768px) {
    body.assistant-open .offcanvas.offcanvas-end { right: var(--assistant-dock, var(--assistant-width)); }
    body.assistant-open .offcanvas-backdrop { width: calc(100vw - var(--assistant-dock, var(--assistant-width))); }
}
/* Drawer sizes (owner 2026-10-15, after layout C): a drawer's width is a share of the REGION beside the assistant panel —
   the whole window while the panel is closed — and every drawer leaves at least --drawer-gap of the page uncovered, the
   strip the user closes it with, whatever its share or minimum width says (the Figura editor beside the panel used to
   cover the page completely). The classes replaced the former w-75 / w-25 / inline widths on the 70 drawers; a minimum
   width shrinks to the region minus the gap instead of winning over it. Three-class selectors: Bootstrap's own
   placement rule is .offcanvas.offcanvas-end, so a single class would lose the cascade. The responsive rules above (100 % under 576 px,
   a 360 px minimum up to 991 px) still win where they apply; phones keep the full-width drawer. */
:root { --drawer-region: 100vw; --drawer-gap: 4rem; }
@media (min-width: 768px) {
    body.assistant-open { --drawer-region: calc(100vw - var(--assistant-dock, var(--assistant-width))); }
    .offcanvas.offcanvas-end { max-width: calc(var(--drawer-region) - var(--drawer-gap)); }
}
.offcanvas.offcanvas-end.drawer-w-25 { width: calc(var(--drawer-region) * .25); }
.offcanvas.offcanvas-end.drawer-w-30 { width: calc(var(--drawer-region) * .30); }
.offcanvas.offcanvas-end.drawer-w-34 { width: calc(var(--drawer-region) * .34); }
.offcanvas.offcanvas-end.drawer-w-35 { width: calc(var(--drawer-region) * .35); }
.offcanvas.offcanvas-end.drawer-w-38 { width: calc(var(--drawer-region) * .38); }
.offcanvas.offcanvas-end.drawer-w-40 { width: calc(var(--drawer-region) * .40); }
.offcanvas.offcanvas-end.drawer-w-42 { width: calc(var(--drawer-region) * .42); }
.offcanvas.offcanvas-end.drawer-w-45 { width: calc(var(--drawer-region) * .45); }
.offcanvas.offcanvas-end.drawer-w-50 { width: calc(var(--drawer-region) * .50); }
.offcanvas.offcanvas-end.drawer-w-55 { width: calc(var(--drawer-region) * .55); }
.offcanvas.offcanvas-end.drawer-w-56 { width: calc(var(--drawer-region) * .56); }
.offcanvas.offcanvas-end.drawer-w-74 { width: calc(var(--drawer-region) * .74); }
.offcanvas.offcanvas-end.drawer-w-75 { width: calc(var(--drawer-region) * .75); }
.offcanvas.offcanvas-end.drawer-w-80 { width: calc(var(--drawer-region) * .80); }
.offcanvas.offcanvas-end.drawer-w-82 { width: calc(var(--drawer-region) * .82); }
.offcanvas.offcanvas-end.drawer-w-90 { width: calc(var(--drawer-region) * .90); }
.offcanvas.offcanvas-end.drawer-w-px-520 { width: min(520px, calc(var(--drawer-region) - var(--drawer-gap))); }
.offcanvas.offcanvas-end.drawer-w-px-560 { width: min(560px, calc(var(--drawer-region) - var(--drawer-gap))); }
.offcanvas.offcanvas-end.drawer-min-360 { min-width: min(360px, calc(var(--drawer-region) - var(--drawer-gap))); }
.offcanvas.offcanvas-end.drawer-min-720 { min-width: min(720px, calc(var(--drawer-region) - var(--drawer-gap))); }
.offcanvas.offcanvas-end.drawer-min-860 { min-width: min(860px, calc(var(--drawer-region) - var(--drawer-gap))); }
.offcanvas.offcanvas-end.drawer-min-900 { min-width: min(900px, calc(var(--drawer-region) - var(--drawer-gap))); }
@media (max-width: 767.98px) {
    body.assistant-open .assistant-aside { z-index: 1056; }
}
.assistant-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }
.assistant-resize:hover { background: rgba(41, 76, 94, .15); }
/* The same geometry as .drawer-header (2.75 rem, 1.1 rem semibold title, 2 px rule) so the two headers line up under the
   top bar; white, not the drawer's tint — the panel is a companion that stays, a drawer is a task that closes. */
.assistant-header { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; box-sizing: border-box; padding: .4rem .9rem; border-bottom: 2px solid #e9ecef; font-size: 1.1rem; line-height: 1.4; }
.assistant-header strong { font-weight: 600; }
.assistant-icon-btn { border: 0; background: transparent; color: #6c757d; padding: .2rem .45rem; border-radius: .3rem; line-height: 1; }
.assistant-icon-btn:hover { background: #f0f3f5; color: #294C5E; }
.assistant-context { display: flex; align-items: center; gap: .4rem; padding: .4rem .9rem; font-size: .8rem; border-bottom: 1px solid #f1f3f5; }
.assistant-chip { display: inline-flex; align-items: center; gap: .3rem; background: #eef4f8; color: #294C5E; border-radius: 1rem; padding: .1rem .3rem .1rem .6rem; }
.assistant-chip-x { border: 0; background: transparent; color: #6c757d; line-height: 1; padding: 0 .25rem; font-size: 1rem; }
.assistant-chip-x:hover { color: #C0392B; }
.assistant-messages { flex: 1 1 auto; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .75rem; }
.assistant-user { align-self: flex-end; max-width: 85%; background: #294C5E; color: #fff; border-radius: 1rem 1rem .25rem 1rem; padding: .5rem .8rem; white-space: pre-wrap; }
.assistant-answer { align-self: stretch; background: #f8f9fa; border-radius: .25rem 1rem 1rem 1rem; padding: .6rem .8rem; line-height: 1.5; }
.assistant-answer p { margin-bottom: .5rem; }
.assistant-answer p:last-child { margin-bottom: 0; }
.assistant-answer ul, .assistant-answer ol { padding-left: 1.2rem; margin-bottom: .5rem; }
.assistant-answer h1, .assistant-answer h2, .assistant-answer h3, .assistant-answer h4 { font-size: .95rem; font-weight: 600; color: #294C5E; margin: .5rem 0 .25rem; }
.assistant-answer table { width: 100%; font-size: .85rem; margin-bottom: .5rem; }
.assistant-answer th, .assistant-answer td { padding: .2rem .4rem; border-bottom: 1px solid #e9ecef; vertical-align: top; }
.assistant-answer code { font-size: .85em; }
.assistant-sources { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.assistant-source { border: 1px solid #cfd8dd; background: #fff; color: #294C5E; border-radius: 1rem; padding: .1rem .6rem; font-size: .78rem; }
button.assistant-source:hover { background: #eef4f8; }
.assistant-source-static { color: #6c757d; }
.assistant-feedback { display: flex; align-items: center; gap: .1rem; margin-top: .4rem; }
.assistant-ghost { border: 0; background: transparent; color: #adb5bd; padding: .1rem .3rem; border-radius: .3rem; }
.assistant-ghost:hover, .assistant-ghost.active { color: #294C5E; background: #e9eef1; }
.assistant-starter { border: 1px solid #cfd8dd; background: #fff; color: #294C5E; border-radius: 1rem; padding: .2rem .7rem; font-size: .8rem; text-align: left; }
.assistant-starter:hover { background: #eef4f8; }
.assistant-composer { border-top: 1px solid #e9ecef; padding: .6rem .9rem .5rem; }
.assistant-composer-box { display: flex; align-items: flex-end; gap: .4rem; border: 1px solid #ced4da; border-radius: .75rem; padding: .35rem .35rem .35rem .7rem; background: #fff; }
.assistant-composer-box:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15); }
.assistant-composer-box textarea { flex: 1 1 auto; border: 0; outline: 0; resize: none; font-size: .9rem; background: transparent; }
.assistant-send { width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%; border: 0; background: #294C5E; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.assistant-send:disabled { background: #cfd8dd; }
.assistant-disclaimer { font-size: .7rem; margin-top: .3rem; }
.assistant-history { max-height: 60vh; overflow-y: auto; min-width: 280px; }

/* Spec 214 §3.7 (2026-10-17, support request #9): the message js/client-errors.js builds only when the .NET runtime refuses
   the browser. Empty = not displayed, so the fixed container can never cover the page. */
.fc-unsupported-browser { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; padding: 1rem; }
.fc-unsupported-browser:empty { display: none; }