html {
    position: relative;
    min-height: 100%;
    font-size: 12px;
}

body {
    padding-top: 0px;
    padding-bottom: 0px;
   
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 0px;
    padding-right: 0px;
}
/* Font Awesome images in panelBar */
.k-sprite.far {
    font-size: 16px;
    line-height: 16px;
    padding-right: 20px;
}

.k-sprite.fad {
    font-size: 16px;
    line-height: 16px;
    padding-right: 20px;
}
/* Top Nav Shadow */
.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

.menuItemsClass {
    padding-right: 10px;
    padding-left: 10px;
}
/* Added below to fix the grid filter calendar button display issue --RRP */
.k-dropdown-wrap .k-select, .k-numeric-wrap .k-select, .k-picker-wrap .k-select {
    width: 3em;
}

.k-titlebar-icon {
    background: url('/favicon-32x32.png');
    background-size: 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    vertical-align: middle;
}

#ZohoFeedbackArea {
    position: fixed;
    bottom: 0;
    right: 0;
    padding-right: 10px;
    padding-bottom: 10px;
    border: none;
    background-color: #004623;
    margin-right: 30px;
}

#ZohoFeedbackButton {
    color: white;
    background-color: #004623;
    outline: none;
    border: none;
    padding-top: 10px;
    padding-left: 15px;
}
/* PowerBI Report Container */
.reportContainer {
    background-color: #fff;
}

    .reportContainer iframe {
        border: none;
        padding: 0px;
    }

/* Sticky footer styles */
.footer {
    position: absolute;
    bottom: 00px;
    height: 00px;
}

    .footer .text-muted {
        margin: 0;
        display: inline-block;
    }

.body-content > .row:first-child {
    margin-bottom: 15px;
}

h1 a {
    color: #e0e0e0;
    text-decoration: none;
}

    h1 a:hover,
    h1 a:active {
        color: #ffffff;
        text-decoration: none;
    }

.img-responsive {
    padding-top: 25px;
}

/* Styling menu toggle button */
.btn-toggle {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: none;
    height: 48px;
}

    .btn-toggle .k-icon {
        opacity: 1;
    }

    .btn-toggle,
    .btn-toggle:focus:active:not(.k-state-disabled):not([disabled]),
    .btn-toggle:focus:not(.k-state-disabled):not([disabled]) {
        box-shadow: none;
        border-radius: 0;
    }

        .btn-toggle .k-i-hbars,
        .btn-toggle:focus:active:not(.k-state-disabled):not([disabled]) .k-i-hbars,
        .btn-toggle:focus:not(.k-state-disabled):not([disabled]) .k-i-hbars {
            background-position: -80px -32px;
        }

.nav-pills > li > a {
    color: #004623 !important;
}

.nav-pills > li.active > a {
    color: white !important;
    background-color: #004623 !important;
}

/* Styling menu and header for smaller resolutions */
@media (max-width: 768px) {
    .k-header h1 {
        margin: 0;
        padding: 16px 15px 14px 60px;
        font-size: 18px;
        font-weight: lighter;
    }

    .k-rpanel {
        position: relative;
        box-sizing: border-box;
    }

        .k-rpanel .k-menu {
            float: none;
            display: block;
            box-sizing: border-box;
        }

            .k-rpanel .k-menu .k-item {
                display: block;
                clear: both;
                float: none;
                width: 100%;
            }
}
.k-grid .k-grid-search {
    margin-left: auto;
    margin-right: 0;
}

.grid-row-color-red {
    color: #CC0000 !important;
}

.grid-row-color-blue {
    color: #0066FF !important;
}

.anello-logo {
    width: 240px;
    height: auto;
}

.anello-logo-container {
    position: relative;
    width: 240px;
    margin-left: auto;
    margin-right: auto;
}

.anello-logo-subtext {
    font-family: Arial;
    font-style: italic;
    font-weight: 900;
    color: #00615a;
    font-size: 11px;
    letter-spacing: -.5px;
    position: absolute;
    left: 73px;
    top: 43px;
}

#post-registration-wrapper {
    visibility: hidden;
}

#post-registration-block {
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 55px;
    position: relative;
}

#post-registration-block p {
    text-align: center;
    font-size: 24px;
}

#post-registration-logo-block {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    bottom: 0;
}

.paginatedReportContainer {
    height: 800px;
    width: 1080px;
    margin-left: auto;
    margin-right: auto;
    border-style: none;
}

.paginatedReportContainer iframe {
    border: 1px solid #CCC;
}

.account-link {
    color: #004623;
}

.account-form-content {
    padding: 10px;
}

.k-window-titlebar {
    background: #08713D;
    color:#fff;
}
#navbarSupportedContent .k-popup .k-menu-link-text {
    font-size: 1.1rem;
}

.k-window-titlebar .k-i-close,
.k-window-titlebar .k-icon,
.k-window-titlebar .k-svg-icon { /* Kendo 2026 SVG icons */
    background: none;
    color: #fff;
}

/* ===== Universal Bootstrap-modal header — matches the Kendo .k-window-titlebar look ===== */
.anello-modal-header {
    background-color: #08713D !important;
    color: #fff !important;
    align-items: center;
}
.anello-modal-header .modal-title {
    display: flex;
    align-items: center;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.3;
}
.anello-modal-header .modal-title::before {
    content: "";
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    background: url('/favicon-32x32.png') no-repeat center;
    background-size: 24px;
}
/* Anello logo on every Kendo window/dialog titlebar (mirrors the modal ::before). */
.k-window-titlebar .k-window-title::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
    background: url('/favicon-32x32.png') no-repeat center;
    background-size: 24px;
}
/* Kendo dialog OK/Cancel actions: content-width, right-aligned, with bottom breathing room (matches other page buttons). */
.k-dialog-actions.k-actions-stretched {
    justify-content: flex-end;
    padding-bottom: 1.5em;
}
.k-dialog-actions.k-actions-stretched > .k-button {
    flex: 0 0 auto;
    min-width: 90px;
}
.anello-modal-header .close {
    color: #fff !important;
    opacity: 1;
}

/* ---- No flash-of-raw-dialogs on page load ----
   Kendo dialogs/windows are initialized from plain divs on document.ready with
   visible:false — until that runs, the raw markup (radios, buttons, viewers)
   flashes at the top of the page and then disappears. Hide the known dialog
   hosts up front; Kendo adds .k-window-content to the element at init (verified
   against kendo.all.min.js 2026), after which its own visibility takes over. */
#dialog:not(.k-window-content),
#reportDialog:not(.k-window-content),
#exportToExceldialog:not(.k-window-content),
#emailReportDialog:not(.k-window-content),
#batchPodReportDialog:not(.k-window-content),
#rolloverDialog:not(.k-window-content),
#rolloverOrderDialog:not(.k-window-content),
#rolloverConfirmationPopup:not(.k-window-content),
#reportWindow:not(.k-window-content),
#rateQuoteHistoryDialog:not(.k-window-content),
#rateDisabledDialog:not(.k-window-content),
#printDialog:not(.k-window-content),
#loadingVerifyCarrierChange:not(.k-window-content),
#loadingErrorMessage:not(.k-window-content),
#kendoBatchDialogComplete:not(.k-window-content),
#cancelSingleOrderDialog:not(.k-window-content),
#cancelBatchDialog:not(.k-window-content),
#alertDialog:not(.k-window-content) {
    display: none;
}

/* ---- No flash of raw toolbar pickers ----
   Grid-toolbar warehouse/status/type/date pickers are raw <select>/<input>
   elements that get upgraded to Kendo widgets on document.ready — until then
   the bare native controls flash and then morph (e.g. WarehouseAppointments).
   Kendo stamps data-role on the element at upgrade, so hide only the
   not-yet-upgraded ones; the rule self-releases. Toolbar search boxes are
   static k-input markup (never upgraded) and are not matched. */
.k-grid-toolbar select:not([data-role]),
.k-grid-toolbar input[title="datepicker"]:not([data-role]) {
    visibility: hidden;
}

/* Kendo 2022 copied the source <select>'s inline width (165px) onto the widget
   wrapper; Kendo 2026 doesn't, so toolbar dropdowns rendered auto-width and then
   RESIZED when their remote data arrived (visible flicker, e.g. the Warehouse
   picker on WarehouseAppointments). Pin the wrapper to the intended width. */
.k-grid-toolbar .k-dropdownlist,
.k-grid-toolbar span.k-picker,
#warehousepicker .k-dropdownlist,
#warehousepicker span.k-picker,
#orderTypePicker .k-dropdownlist,
#orderTypePicker span.k-picker,
#statusPicker .k-dropdownlist,
#statusPicker span.k-picker {
    /* !important on purpose: it wins over any INLINE width the widget computes
       when its remote data arrives — a plain rule loses to inline styles. */
    width: 165px !important;
}

/* While a dropdown's remote data loads, Kendo 2026 adds .k-loading and injects an
   inline loading icon into the picker; legacy all.css spinner geometry (em-based
   ::before/::after on .k-i-loading) balloons it, growing the 30px picker to 88px
   and pushing the whole page down until data arrives (diagnosed via layout-shift
   instrumentation on WarehouseAppointments). A picker must never change height
   while loading — hide its inline spinner. Grid loading masks are unaffected. */
.k-picker .k-input-loading-icon,
.k-input .k-input-loading-icon,
.k-picker.k-loading .k-i-loading {
    display: none !important;
}

/* =====================================================================
   ANELLO BRAND TOKENS  — RLS spec MM-0055 ("Cold Chain Experts")
   Single source of truth for brand color. Use these vars in markup
   instead of hard-coded hex.  Intended distribution: 70 / 25 / 5.
   ===================================================================== */
:root {
    --anello-green: #08713d;        /* Main / PMS 349  — 70% (dominant)        */
    --anello-green-dark: #004623;   /* Dark / PMS 342C — 25% (emphasis/primary) */
    --anello-green-light: #85c989;  /* Light / PMS 358C — 5% (accent/selection) */
    --anello-green-wash: #e7f3e8;   /* tint of light green for hover/selection */
    --anello-gold: #d4af5a;         /* Anello logo gold — NOT off-brand        */
    --claude-terracotta: #d97757;   /* Claude brand mark — AI entry points only */
    --anello-link: #004623;         /* re-based from off-brand blue #004779    */
    --anello-focus-ring: 0 0 0 3px rgba(133, 201, 137, .55);

    /* Kendo 2026 (bootstrap-main) theme re-brand. The CDN theme defaults
       --kendo-color-primary to Bootstrap blue (oklch hue 260deg); every primary
       state derives from it via oklch(from var(--kendo-color-primary) …), so
       re-hueing this ONE token turns all native chrome that site.css doesn't
       explicitly override — filter menus, selected list/dropdown items, date-picker
       selection, pager, focus rings, checkboxes/radios, primary dialog buttons —
       to RLS green. site.css loads after the CDN theme (see _Layout), so this wins. */
    --kendo-color-primary: #08713d; /* = --anello-green (Main) */
}

/* ---- re-base order-detail grid links from off-brand blue to brand ---- */
.linkDetails,
.linkDetails:link,
.linkDetails:visited {
    color: var(--anello-link) !important;
    font-weight: 600;
}

.linkDetails:hover {
    color: var(--anello-green) !important;
}

/* ---------------------- Data grid legibility/polish ------------------- */
.k-grid {
    font-size: 13px; /* nudge up from inherited 12px for dense tables */
}

.k-grid-header .k-header,
.k-grid-header th.k-header {
    font-weight: 600;
}

/* Show full column-header text instead of clipping it to "Actual Qu…".
   Narrow columns wrap their header to multiple lines rather than truncate. */
.k-grid-header .k-header,
.k-grid-header .k-header .k-link,
.k-grid-header .k-header .k-cell-inner,
.k-grid-header .k-header .k-column-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.k-grid-header .k-header {
    height: auto;
    vertical-align: middle;
}

/* ============================================================
   CLEAN GRID PASS — strip spreadsheet noise; color = meaning
   ============================================================ */
/* Horizontal rhythm only: drop vertical gridlines in header + body */
.k-grid-header .k-header,
.k-grid td {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
}

/* Light header: white band, muted uppercase labels, green underline accent.
   Calmer than a saturated green slab; titles read as quiet labels, and the
   brand presence moves to the green underline + green links/selection. */
.k-grid-header,
.k-grid-header .k-header,
.k-grid-header .k-grid-header-wrap {
    background-color: #fff !important;
    border-color: #e3e9e4 !important;
}
.k-grid-header,
.k-grid .k-grid-header {
    border-bottom: 2px solid var(--anello-green) !important;
}
.k-grid-header .k-header {
    vertical-align: middle;
}
.k-grid-header .k-header,
.k-grid-header .k-header .k-link,
.k-grid-header .k-header .k-column-title {
    color: #46554d !important;
    font-weight: 600 !important;
    font-size: 10px !important; /* was 11px — Kendo 2026 theme is looser; keeps 2-word titles (EXPECTED QTY) on one line */
    text-transform: uppercase;
    letter-spacing: .02em;      /* was .04em — reclaim horizontal space */
}

/* Kendo 2026 header density: bootstrap-main pads header cells more than the 2022
   theme, wrapping 2-word column titles in narrow numeric columns. Tighten the
   header cell padding to restore single-line headers (matches pre-upgrade look). */
.k-grid-header .k-table-th,
.k-grid-header .k-header {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}

/* Filter funnels: hidden until you hover the column header — keeps the header
   clean. Columns with an ACTIVE filter stay lit in brand green so you can see
   what's filtered at a glance. */
.k-grid-header .k-grid-filter .k-icon,
.k-grid-header .k-header .k-i-filter,
.k-grid-header .k-header .k-i-filter-sm {
    color: #aab6ae !important;
}
.k-grid-header .k-grid-filter {
    opacity: 0;
    transition: opacity .12s ease;
}
.k-grid-header .k-header:hover .k-grid-filter,
.k-grid-header .k-grid-filter:focus,
.k-grid-header .k-grid-filter:focus-within {
    opacity: 1;
}
.k-grid-header .k-grid-filter:hover { background: transparent !important; }
.k-grid-header .k-grid-filter:hover .k-icon { color: var(--anello-green-dark) !important; }
.k-grid-header .k-grid-filter.k-state-active,
.k-grid-header .k-grid-filter.k-active,
.k-grid-header .k-grid-filter.k-state-border-down {
    opacity: 1 !important;
}
.k-grid-header .k-grid-filter.k-state-active .k-icon,
.k-grid-header .k-grid-filter.k-active .k-icon,
.k-grid-header .k-grid-filter.k-state-border-down .k-icon {
    color: var(--anello-green) !important;
}

/* Kendo 2026 renamed the header filter button k-grid-filter -> k-grid-filter-menu and
   switched to SVG icons (k-svg-icon). Mirror the muted hover-reveal funnel treatment
   (verified against the classes kendo.all.min.js 2026.2.520 actually emits). */
.k-grid-header .k-grid-filter-menu {
    opacity: 0;
    transition: opacity .12s ease;
}
.k-grid-header .k-grid-filter-menu .k-icon,
.k-grid-header .k-grid-filter-menu .k-svg-icon {
    color: #aab6ae !important;
}
.k-grid-header .k-header:hover .k-grid-filter-menu,
.k-grid-header .k-table-th:hover .k-grid-filter-menu,
.k-grid-header .k-grid-filter-menu:focus,
.k-grid-header .k-grid-filter-menu:focus-within {
    opacity: 1;
}
.k-grid-header .k-grid-filter-menu:hover { background: transparent !important; }
.k-grid-header .k-grid-filter-menu:hover .k-icon,
.k-grid-header .k-grid-filter-menu:hover .k-svg-icon {
    color: var(--anello-green-dark) !important;
}
/* Column with an ACTIVE filter stays visible + lit green */
.k-grid-header .k-grid-filter-menu.k-active {
    opacity: 1 !important;
}
.k-grid-header .k-grid-filter-menu.k-active .k-icon,
.k-grid-header .k-grid-filter-menu.k-active .k-svg-icon {
    color: var(--anello-green) !important;
}
/* Sort indicators in brand green (k-svg-* = Kendo 2026 SVG icon names) */
.k-grid-header .k-sort-icon .k-icon,
.k-grid-header .k-sort-icon .k-svg-icon,
.k-grid-header .k-i-sort-asc-sm,
.k-grid-header .k-i-sort-desc-sm,
.k-grid-header .k-svg-i-sort-asc-small,
.k-grid-header .k-svg-i-sort-desc-small {
    color: var(--anello-green) !important;
}

/* Detail-row expand/collapse chevrons: the Kendo 2026 theme renders these large and
   solid black, clashing with the clean green grid. Make them small + muted, brand
   green on row hover, and dark green when the detail is open — matching the row-link
   and selection language. */
.k-grid .k-hierarchy-cell .k-icon,
.k-grid .k-hierarchy-cell .k-svg-icon {
    color: #9aa6a0 !important;   /* muted gray-green */
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    transition: color .12s ease;
}
.k-grid tr:hover .k-hierarchy-cell .k-icon,
.k-grid tr:hover .k-hierarchy-cell .k-svg-icon,
.k-grid .k-hierarchy-cell:hover .k-icon,
.k-grid .k-hierarchy-cell:hover .k-svg-icon {
    color: var(--anello-green) !important;
}
/* Expanded (detail open) — caret points down; keep it dark green so the open row stands out. */
.k-grid .k-hierarchy-cell .k-i-caret-alt-down,
.k-grid .k-hierarchy-cell .k-svg-i-caret-alt-down,
.k-grid .k-detail-row + tr .k-hierarchy-cell .k-icon {
    color: var(--anello-green-dark) !important;
}

/* Column-filter search box (Kendo 2026): the .k-searchbox in the filter menu is
   icon + input + clear-suffix. Force the flex row so the magnifier sits as a static
   prefix and never overlaps the typed text. */
.k-filter-menu .k-searchbox {
    display: flex !important;
    align-items: center;
    width: 100%;
}
.k-filter-menu .k-searchbox > .k-input-inner {
    flex: 1 1 auto;
    padding-left: 0.35rem !important;
}
.k-filter-menu .k-searchbox > .k-input-icon {
    position: static !important;
    flex: 0 0 auto;
    margin: 0 0.15rem 0 0.4rem;
}
.k-filter-menu .k-searchbox > .k-input-suffix { flex: 0 0 auto; }

/* Subtle zebra striping to track a row across many columns */
.k-grid tbody > tr.k-alt > td {
    background-color: #f4f8f5;
}

/* Keep the grid footer row (record count + totals) on a single line */
.k-grid-footer td,
.k-grid-footer .k-footer-template td {
    white-space: nowrap;
    overflow: visible;
}

/* Feedback FAB — a clean rounded pill instead of the boxy corner tab.
   Floats above the grid + its horizontal scrollbar. */
#ZohoFeedbackArea {
    z-index: 1100;
    right: 18px !important;
    bottom: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
#ZohoFeedbackButton {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: var(--anello-green-dark) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 10px 18px !important;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45);
    transition: background .15s ease, transform .15s ease;
}
#ZohoFeedbackButton:hover {
    background: var(--anello-green) !important;
    transform: translateY(-1px);
}

/* Feedback modal: tidy textarea + submit button */
#userFeedback {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d6ddd7;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}
#userFeedback:focus {
    outline: none;
    border-color: var(--anello-green);
    box-shadow: var(--anello-focus-ring);
}
#feedbackSubmit {
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    font-weight: 600;
}

/* Soften the Kendo grid load reflow (column width sync + per-user saved
   column-state restore) by fading the grid in while it settles. Opacity
   doesn't affect Kendo's width measurements, so this is layout-safe. */
@keyframes anelloGridFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .k-grid { animation: anelloGridFadeIn .3s ease-out both; }
}

/* Order-detail links: not a heavy boxed button, but clearly clickable —
   always underlined (link affordance) + a light-green pill on hover (interactive cue). */
.k-grid a.linkDetails.k-button,
.k-grid a.linkDetails {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 6px !important;
    min-width: 0 !important;
    border-radius: 4px;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
.k-grid a.linkDetails:hover {
    color: var(--anello-green) !important;
    background: var(--anello-green-wash) !important;
    text-decoration: underline !important;
}

/* Consistent, moderately compact row height. No !important, so grids that
   intentionally set tighter inline padding keep it; grids on Kendo defaults
   (e.g. Fulfillment) get reined in to match. */
.k-grid td {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* row hover + selection in brand light-green (separate from semantic color) */
.k-grid tbody > tr:hover,
.k-grid tbody > tr:hover > td {
    background-color: var(--anello-green-wash);
}

.k-grid tbody > tr.k-state-selected,
.k-grid tbody > tr.k-state-selected > td {
    background-color: var(--anello-green-wash) !important;
    box-shadow: inset 3px 0 0 var(--anello-green);
}

/* keep numeric/footer aggregate emphasis on-brand */
.k-grid tfoot td,
.k-grid .k-footer-template td {
    color: var(--anello-green-dark);
}

/* ------- Status pills (reusable in grid column ClientTemplates) -------
   Semantic colors are intentionally NOT the brand greens, except "ok"
   which legitimately reads as the brand. Usage:
     <span class="anello-pill anello-pill--ok">Shipped</span>            */
.anello-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.anello-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .9;
}

.anello-pill--ok { background: var(--anello-green-wash); color: var(--anello-green-dark); }
.anello-pill--warn { background: #fbf1dc; color: #b07a12; }
.anello-pill--crit { background: #fbe7e4; color: #bb392d; }
.anello-pill--info { background: #e8f1f4; color: #2f6f86; }
.anello-pill--neutral { background: #eef1ee; color: #5a6b61; }

/* Negative numeric values (e.g. Difference shortfalls) flagged in red */
.grid-neg { color: #bb392d; font-weight: 600; }

/* Numeric-column headers: right-align the caption over the right-aligned values
   (HeaderHtmlAttributes class "anello-col-num"). Kendo 2026 wraps the caption in a
   flex .k-cell-inner > .k-link chain with justify-content: inherit, so setting it
   on the th cascades all the way down. */
.k-grid th.anello-col-num {
    text-align: right;
    justify-content: flex-end;
}

/* ===== Grid toolbar buttons — cohesive, on-brand (outlined green) ===== */
.k-grid-toolbar .k-button {
    background: #fff !important;
    color: var(--anello-green-dark) !important;
    border: 1px solid var(--anello-green) !important;
    border-radius: 6px !important;
    font-weight: 600;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.k-grid-toolbar .k-button:hover {
    background: var(--anello-green) !important;
    color: #fff !important;
    border-color: var(--anello-green) !important;
}
.k-grid-toolbar .k-button:active,
.k-grid-toolbar .k-button.k-state-active,
.k-grid-toolbar .k-button.k-primary {
    background: var(--anello-green-dark) !important;
    color: #fff !important;
    border-color: var(--anello-green-dark) !important;
}
.k-grid-toolbar .k-button:focus {
    outline: none;
    box-shadow: var(--anello-focus-ring) !important;
}
/* toolbar inputs (date pickers, search, dropdown) — green focus to match */
.k-grid-toolbar .k-textbox.k-state-focused,
.k-grid-toolbar .k-picker-wrap.k-state-focused,
.k-grid-toolbar .k-dropdown-wrap.k-state-focused {
    border-color: var(--anello-green) !important;
    box-shadow: var(--anello-focus-ring) !important;
}

/* In-row command buttons (Edit / Delete) — cohesive on-brand; Delete reads as danger */
.k-grid .k-command-cell .k-button,
.k-grid td .k-button.k-grid-edit,
.k-grid td .k-button.k-grid-update,
.k-grid td .k-button.k-grid-cancel {
    background: #fff !important;
    color: var(--anello-green-dark) !important;
    border: 1px solid var(--anello-green) !important;
    border-radius: 6px !important;
    font-weight: 600;
    margin: 1px 2px;
    transition: background .12s ease, color .12s ease;
}
.k-grid .k-command-cell .k-button:hover,
.k-grid td .k-button.k-grid-edit:hover {
    background: var(--anello-green) !important;
    color: #fff !important;
}
.k-grid .k-command-cell .k-grid-delete,
.k-grid .k-command-cell .k-button.k-grid-remove-command,
.k-grid td .k-button.k-grid-delete {
    color: #bb392d !important;
    border-color: #e3c0bc !important;
}
.k-grid .k-command-cell .k-grid-delete:hover,
.k-grid td .k-button.k-grid-delete:hover {
    background: #bb392d !important;
    color: #fff !important;
    border-color: #bb392d !important;
}

/* FontAwesome's kit loads async and swaps nav <i> icons to SVGs; until then the
   icons have zero size, so the navbar content grew 32px -> 44px when they arrived
   (~240ms layout shift captured on load) and pushed the page down. Reserve the
   final height, and give un-swapped <i> tags an approximate slot so the right-side
   icons/toggler don't jiggle horizontally either. */
.anello-navbar #navbarSupportedContent {
    min-height: 44px;
}
.anello-navbar i.fad,
.anello-navbar i.far,
.anello-navbar i.fas,
.anello-navbar i.fal {
    display: inline-block;
    /* min-width, NOT width: reserves the pre-swap slot (anti-flicker) without
       squeezing glyphs wider than 1.25em (Transportation truck, Warehouse). */
    min-width: 1.25em;
    min-height: 1em;
    text-align: center;
}

/* Kendo Menu SpriteCssClasses render as .k-sprite — a legacy 16x16 SPRITE-SHEET
   slot (overflow:hidden, font-size:0 in both the 2026 theme and all.css). Our
   "sprites" are FontAwesome icons (swapped to SVGs by the FA kit, which keeps
   the k-sprite class), so wide glyphs like the Transportation truck get CLIPPED
   at the box edge. Let them take their natural size. */
.anello-navbar .k-sprite {
    /* height must be FIXED, not auto: the FA-swapped <svg> has no intrinsic
       size, so auto resolves per-glyph from the viewBox ratio and every icon
       renders a different height (ragged row). Fixed height + auto width =
       uniform row, natural glyph width, flex-centered by the k-link. */
    width: auto !important;
    height: 16px !important;
    min-width: 16px;
    overflow: visible !important;
    font-size: 16px !important;
    line-height: 1 !important;
    align-self: center;
}

/* Grid expand-arrow (hierarchy) cells: center the arrow ABSOLUTELY in its
   cell. Flow-based attempts (inline-block, then block + auto margins) kept
   landing below the centerline in tall multi-line rows — too many 2022
   leftovers fight over the anchor's box (all.css shim padding/height:100%,
   baseline alignment, per-view td padding). Absolute + transform depends on
   none of them. Size (14px) comes from the chevron styling rule above. */
/* NOTE: this MUST be class-based — a `tbody .k-hierarchy-cell` variant matched
   per Element.matches() but was ignored by the style engine (verified live in
   the preview browser); the class selector applies reliably. */
.k-grid .k-hierarchy-cell {
    position: relative;
}
.k-grid .k-hierarchy-cell > .k-icon,
.k-grid .k-hierarchy-cell > .k-svg-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 4px; /* click target */
    height: auto;
    /* flex-center the svg INSIDE the anchor too: as inline content it sits on
       the anchor's text baseline, which rendered the glyph ~8px below center
       even with the anchor box itself perfectly centered (measured). */
    display: flex;
    align-items: center;
    justify-content: center;
}
.k-grid .k-hierarchy-cell > .k-icon > svg,
.k-grid .k-hierarchy-cell > .k-svg-icon > svg {
    display: block;
}

/* ---- Grid row-action buttons (admin grids' Edit / Edit Applications etc.) ----
   Hand-written template anchors used to carry 2022 k-button classes, which the
   2026 theme renders as flat gray slabs with an off-brand hover. One shared
   quiet style instead: white tile, green border+wash on hover. */
.anello-grid-btn {
    display: inline-block;
    padding: 3px 14px;
    border: 1px solid #cfdcd3;
    border-radius: 6px;
    background: #fff;
    color: var(--anello-green-dark) !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.anello-grid-btn:hover,
.anello-grid-btn:focus {
    background: var(--anello-green-wash);
    border-color: var(--anello-green);
    color: var(--anello-green-dark) !important;
}
/* Danger variant (e.g. admin Disable) — quiet red, fills red on hover, matching
   the Kendo destroy-command treatment below. */
.anello-grid-btn--danger {
    border-color: #e5b6bc;
    color: #c82333 !important;
}
.anello-grid-btn--danger:hover,
.anello-grid-btn--danger:focus {
    background: #c82333;
    border-color: #c82333;
    color: #fff !important;
}

/* Kendo Destroy commands (e.g. admin Remove): quiet-danger to match — white
   with red text, fills red on hover so destructive intent is unmissable. */
.k-grid .k-grid-remove-command {
    background: #fff !important;
    border: 1px solid #e5b6bc !important;
    border-radius: 6px !important;
    color: #c82333 !important;
    box-shadow: none !important;
}
.k-grid .k-grid-remove-command:hover,
.k-grid .k-grid-remove-command:focus {
    background: #c82333 !important;
    border-color: #c82333 !important;
    color: #fff !important;
}
.k-grid .k-grid-remove-command .k-svg-icon,
.k-grid .k-grid-remove-command .k-icon {
    color: currentColor !important;
}

/* Tab count badge (e.g. the Expired count on Inventory Lot tabs), one shared rule.
   The old per-view version used position:absolute with a -17px margin, anchored to
   whatever 2022 ancestor was positioned — on Kendo 2026 it floated above the tab bar
   and got clipped. Render it in-flow beside the tab label instead. */
[badge]:after {
    content: attr(badge);
    display: inline-block;
    background: var(--anello-green-dark);
    color: #fff;
    font-weight: 600;
    font-size: 10px;
    line-height: 1;
    border-radius: 999px;
    padding: 3px 6px;
    margin-left: 6px;
    vertical-align: middle;
}
[badge=""]:after {
    display: none;
}

/* ----------------- Reusable Anello tabstrip (70/25/5) -----------------
   Re-bases the duplicated per-view tabstrip styling: Main Green for the
   inactive tabs (the dominant surface), white + Dark Green marker for the
   active tab. Apply class "anello-tabs" to a Kendo TabStrip's Name target
   or wrap, OR rely on these once the inline per-view blocks are removed. */
.anello-tabs .k-tabstrip-items .k-item,
.anello-tabs.k-tabstrip > .k-tabstrip-items .k-item {
    background-color: var(--anello-green);
    color: #fff;
    font-weight: 400;
    text-align: center;
    border-right: 1px solid #fff;
}

.anello-tabs .k-tabstrip-items .k-item.k-state-active {
    background-color: #fff;
    color: var(--anello-green-dark);
    font-weight: 600;
    border-top: 3px solid var(--anello-green-dark);
}

/* Authoritative tabstrip styling for ALL grids (70/25/5): Main-Green inactive
   tabs, white active tab with a Dark-Green top marker. Higher specificity than
   the duplicated inline per-view blocks so this is the single source of truth. */
.k-tabstrip .k-tabstrip-items .k-item.k-state-default,
.k-tabstrip .k-tabstrip-items .k-item.k-state-default .k-link {
    background-color: var(--anello-green) !important;
    color: #fff !important;
    font-weight: 400 !important;
    text-align: center !important;
    border-right: 1px solid #fff !important;
}
.k-tabstrip .k-tabstrip-items .k-item.k-state-active,
.k-tabstrip .k-tabstrip-items .k-item.k-state-active .k-link {
    background-color: #fff !important;
    color: var(--anello-green-dark) !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-top: 3px solid var(--anello-green-dark) !important;
    border-right: 1px solid #fff !important;
}
/* Size each tab to its label with even padding. (site.css elsewhere pins
   li.k-item to width:100px, which cramps longer labels like "Appointments".) */
.k-tabstrip .k-tabstrip-items .k-item {
    width: auto !important;
}
.k-tabstrip .k-tabstrip-items .k-item > .k-link {
    padding: 8px 18px !important;
}

/* ===================================================================
   TOP NAVIGATION — Main Green brand surface (the 70% in MM-0055)
   =================================================================== */
.anello-navbar {
    background-color: var(--anello-green) !important;
    border-bottom: 3px solid var(--anello-green-dark) !important;
}
/* anello logo on a white chip so the green/gold mark reads on the green bar */
.anello-navbar .navbar-brand { padding: 3px 0; }
.anello-navbar .anello-logo-container {
    background: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    width: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.anello-navbar .anello-logo { width: 140px; }
.anello-navbar .anello-logo-subtext {
    position: static;
    left: auto; top: auto;
    margin-top: 1px;
    font-size: 8.5px;
}

/* Top-level menu items: white on green. (Submenu popups render OUTSIDE
   #headerMenu in a detached container, so the > child combinator leaves
   their dark-on-white styling untouched.) */
.anello-navbar #headerMenu,
.anello-navbar #headerMenu > .k-item {
    background: transparent !important;
}
.anello-navbar #headerMenu > .k-item > .k-link {
    color: #fff !important;
    border-radius: 6px;
}
.anello-navbar #headerMenu > .k-item > .k-link .k-icon,
.anello-navbar #headerMenu > .k-item > .k-link .k-sprite {
    color: #fff !important;
}
.anello-navbar #headerMenu > .k-item:hover > .k-link,
.anello-navbar #headerMenu > .k-item.k-state-hover > .k-link {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}
.anello-navbar #headerMenu > .k-item.k-state-active > .k-link,
.anello-navbar #headerMenu > .k-item.k-state-selected > .k-link,
.anello-navbar #headerMenu > .k-item.k-state-border-down > .k-link {
    background: var(--anello-green-dark) !important;
    color: #fff !important;
}

/* Right-side controls (settings / sign-out icons) white on green */
.anello-navbar #navbarslider,
.anello-navbar #navbarlogout,
.anello-navbar .navbar-nav .nav-link > a {
    color: #fff !important;
}
.anello-navbar #navbarslider:hover,
.anello-navbar #navbarlogout:hover { opacity: .82; }

/* Keep the whole bar on ONE line (Bootstrap navbars wrap by default) and
   compact the logo + menu so it fits at 1920x1080 and down. */
.anello-navbar { flex-wrap: nowrap !important; }
.anello-navbar .navbar-collapse { flex-wrap: nowrap; }
.anello-navbar .anello-logo { width: 112px; }
.anello-navbar #headerMenu { font-size: 13px !important; }
.anello-navbar #headerMenu > .k-item > .k-link {
    padding-left: 9px !important;
    padding-right: 9px !important;
}
.anello-navbar .menuItemsClass { padding-left: 6px; padding-right: 6px; }
/* Icon-to-label gap: the theme's .k-menu-link > .k-sprite margin (8px) is
   enough — extra padding here made the gap a loose, uneven 15px. */
.anello-navbar #headerMenu .k-sprite { padding-right: 0 !important; }

/* ----------------------- Login (Identity page) ------------------------ */
.anello-login {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    background:
        radial-gradient(120% 90% at 100% 0%, #f1f7f2 0%, #e7efe8 60%);
}

.anello-login__card {
    display: flex;
    width: 100%;
    max-width: 940px;
    min-height: 480px;
    background: #fff;
    border: 1px solid #d9e2db;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 28px 60px -32px rgba(8, 70, 40, .55);
}

/* left brand panel — Main Green (the 70%) */
.anello-login__brand {
    position: relative;
    width: 44%;
    padding: 40px 34px;
    color: #fff;
    background: linear-gradient(165deg, var(--anello-green) 0%, var(--anello-green-dark) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.anello-login__brand::after { /* subtle frost / cold-chain texture */
    content: "";
    position: absolute;
    inset: 0;
    opacity: .14;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 10%, #fff 0, transparent 24%),
        repeating-linear-gradient(125deg, transparent 0 22px, rgba(255,255,255,.6) 22px 23px);
}

.anello-login__brand-top { position: relative; display: flex; align-items: center; gap: 12px; }
.anello-login__brand-top .leaf { width: 36px; height: 36px; flex: none; }
/* Real Anello logo on a white chip so the green/gold mark reads on the green panel */
.anello-login__logo {
    display: block;
    width: 160px;
    height: auto;
    background: #fff;
    padding: 9px 14px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
}
.anello-login__brand-name { font-weight: 800; font-size: 22px; letter-spacing: -.02em; line-height: 1; }
.anello-login__brand-name small {
    display: block; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--anello-green-light); font-weight: 700; margin-top: 4px;
}
.anello-login__pitch {
    position: relative; font-size: 22px; line-height: 1.32; font-weight: 600;
    letter-spacing: -.01em; max-width: 16ch; margin: 0;
}
.anello-login__frost {
    position: relative; align-self: flex-start; font-size: 11.5px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
    border-radius: 20px; padding: 5px 13px; display: inline-flex; align-items: center; gap: 8px;
}

/* right form panel */
.anello-login__form {
    flex: 1;
    padding: 40px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.anello-login__form h2 { margin: 0 0 2px; font-size: 24px; font-weight: 700; color: #1d2b23; }
.anello-login__form .anello-login__sub { margin: 0 0 22px; color: #5a6b61; font-size: 13.5px; }

.anello-login__field { position: relative; margin-bottom: 16px; }
.anello-login__field > label {
    display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: #5a6b61; margin: 0 0 5px;
}
.anello-login__field .k-icon {
    position: absolute; left: 11px; top: 33px; color: var(--anello-green); z-index: 2; font-size: 15px;
}
.anello-login__form input.form-control { padding-left: 34px; height: auto; padding-top: 10px; padding-bottom: 10px; }
.anello-login__form input.form-control:focus {
    border-color: var(--anello-green);
    box-shadow: var(--anello-focus-ring);
}

.anello-login__remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4a5a52; margin: 4px 0 18px; }
.anello-login__remember input { margin: 0; }

/* primary button — Dark Green (the 25% emphasis) */
.anello-login__submit {
    width: 100%;
    background: var(--anello-green-dark);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    transition: background .15s ease;
}
.anello-login__submit:hover { background: #063318; color: #fff; }
.anello-login__submit:focus { outline: none; box-shadow: var(--anello-focus-ring); }

.anello-login__sso-note {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 11.5px; color: #8a978f; margin: 14px 0 2px;
}
.anello-login__altlinks { display: flex; justify-content: center; gap: 20px; margin-top: 8px; font-size: 13px; }
.anello-login__altlinks a { color: var(--anello-green-dark); text-decoration: none; font-weight: 600; }
.anello-login__altlinks a:hover { text-decoration: underline; }

/* inline browser-warning banner (replaces alert()) */
.anello-browser-warning {
    display: none;
    background: #fbf1dc; color: #7a5310; border: 1px solid #ecd9a8;
    border-radius: 8px; padding: 10px 14px; font-size: 13px; margin: 0 0 18px;
}

/* responsive: stack the split on small screens */
@media (max-width: 720px) {
    .anello-login__card { flex-direction: column; max-width: 460px; min-height: 0; }
    .anello-login__brand { width: 100%; padding: 26px 26px; }
    .anello-login__pitch { max-width: none; }
    .anello-login__form { padding: 28px 26px; }
}

/* ===================================================================
   SUMMARY / DETAIL CHOICE DIALOGS  (Export to Excel + Report Mode)
   Renders the two radios as a clean segmented pair of brand-green tiles
   so the Summary / Detail choice is unmistakable. Kendo's default radio
   glyph is suppressed inside .anello-choice; the whole label is the
   control. Used by the export/report dialogs across all grid views.
   =================================================================== */
.anello-choice__hint {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #5a6b61;
    text-align: center;
}
.anello-choice {
    display: flex;
    gap: 10px;
    margin: 0;
}
.anello-choice input.k-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.anello-choice label.k-radio-label {
    flex: 1 1 0;
    margin: 0;
    padding: 11px 8px;
    text-align: center;
    cursor: pointer;
    border: 1.5px solid #d7e2da;
    border-radius: 10px;
    background: #fff;
    color: #3a4a41;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.1;
    transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
/* remove Kendo's circular radio marker inside the tiles */
.anello-choice label.k-radio-label::before,
.anello-choice label.k-radio-label::after { content: none !important; }
.anello-choice label.k-radio-label:hover {
    border-color: var(--anello-green);
    color: var(--anello-green-dark);
}
.anello-choice input.k-radio:checked + label.k-radio-label {
    border-color: var(--anello-green);
    background: var(--anello-green-wash);
    color: var(--anello-green-dark);
    box-shadow: inset 0 0 0 1px var(--anello-green);
}
.anello-choice input.k-radio:focus + label.k-radio-label {
    box-shadow: var(--anello-focus-ring);
}

/* ── Home KPI strip ───────────────────────────────────────────── */
.anello-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0 4px 28px;
    background: linear-gradient(135deg, var(--anello-green) 0%, var(--anello-green-dark) 100%);
    border-radius: 14px;
    box-shadow: 0 18px 34px -24px rgba(0, 70, 35, .55);
    overflow: hidden;
}
.anello-kpis__card {
    display: flex; flex-direction: row; align-items: center; gap: 14px;
    padding: 18px 20px;
    text-decoration: none; color: inherit;
    transition: background-color .14s ease;
}
.anello-kpis__card + .anello-kpis__card { border-left: 1px solid rgba(255, 255, 255, .14); }
.anello-kpis__card:hover { background: rgba(255, 255, 255, .07); text-decoration: none; color: inherit; }
.anello-kpis__ico {
    flex: none;
    width: 44px; height: 44px; border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    display: grid; place-items: center;
    font-size: 19px;
}
.anello-kpis__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.anello-kpis__value {
    font-size: 30px; font-weight: 700; line-height: 1.15;
    color: #fff;
    min-height: 35px;
}
.anello-kpis__value.is-zero { color: rgba(255, 255, 255, .55); } /* quiet day reads quiet */
.anello-kpis__value.is-filled { animation: anelloKpiIn .18s ease-out; }
@keyframes anelloKpiIn { from { opacity: 0; transform: translateY(4px); } }
.anello-kpis__label {
    font-size: 11px; font-weight: 600; letter-spacing: .05em;
    color: rgba(255, 255, 255, .72); text-transform: uppercase;
}
.anello-kpis__value.is-loading {
    display: inline-block; width: 56px; border-radius: 6px; color: transparent;
    background: linear-gradient(90deg, rgba(255,255,255,.14) 25%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.14) 75%);
    background-size: 200% 100%;
    animation: anelloKpiShimmer 1.2s linear infinite;
}
@keyframes anelloKpiShimmer { to { background-position: -200% 0; } }
/* semantic (status) treatment, not brand green */
.anello-kpis__card--crit .anello-kpis__value { color: #ffd2cb; }
.anello-kpis__card--crit .anello-kpis__ico { background: #c04437; color: #fff; }
@media (max-width: 1100px) {
    .anello-kpis { grid-template-columns: 1fr 1fr; }
    .anello-kpis__card + .anello-kpis__card { border-left: 0; }
    .anello-kpis__card { border-top: 1px solid rgba(255, 255, 255, .14); }
    .anello-kpis__card:nth-child(-n+2) { border-top: 0; }
    .anello-kpis__card:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, .14); }
}



/* ── "Ask about your data" assistant panel ──────────────────────────────── */
/* ── AI entry points — gold is reserved for these (the logo's own accent) ── */
.claude-spark { width: 15px; height: 15px; flex: none; }

/* Docked tab on the right screen edge — the panel's own edge peeking in.
   Collides with nothing: the navbar stays untouched and Feedback keeps
   its corner. Hidden while the panel is open. */
#assistantToggle {
    position: fixed;
    right: 0;
    top: 45%;
    transform: translateY(-50%);
    z-index: 1089;
    display: none; /* only shown when the page has grid data to review (JS adds .is-available) */
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 14px 9px 16px;
    background: var(--anello-green-dark);
    color: #fff;
    border: 0;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    box-shadow: -6px 4px 16px -10px rgba(0, 0, 0, .5);
    transition: background-color .14s ease, padding .14s ease;
}
#assistantToggle .claude-spark { color: var(--claude-terracotta); width: 16px; height: 16px; }
#assistantToggle span {
    writing-mode: vertical-rl;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    white-space: nowrap;
}
#assistantToggle:hover { background: var(--anello-green); padding-right: 13px; }
#assistantToggle.is-available { display: flex; }
body.assistant-open #assistantToggle { display: none !important; }

#assistantHeader .claude-spark { color: #fff; vertical-align: -2px; margin-right: 2px; }

#assistantAttribution {
    text-align: center;
    font-size: 10px;
    letter-spacing: .04em;
    color: #8a978d;
    padding: 0 12px 8px;
}

/* While the assistant is open, the floating Feedback button gets out of the way. */
body.assistant-open #ZohoFeedbackArea { display: none; }

#assistantOverlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 28, 22, .28);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 1200;
}
#assistantOverlay.is-open { opacity: 1; visibility: visible; }

#assistantPanel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 540px;
    max-width: 95vw;
    background: #fff;
    border-left: 1px solid #e3e9e4;
    box-shadow: -18px 0 40px -24px rgba(29, 43, 35, .5);
    transform: translateX(100%);
    transition: transform .2s ease;
    z-index: 1201;
    display: flex;
    flex-direction: column;
}
#assistantPanel.is-open { transform: translateX(0); }

#assistantHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--anello-green-dark);
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
}
#assistantHeader button { background: none; border: 0; color: rgba(255, 255, 255, .85); font-size: 16px; cursor: pointer; }
#assistantHeader button:hover { color: #fff; }

#assistantBody {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f7faf8;
}

.assistant-msg {
    max-width: 88%;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.assistant-msg--user {
    align-self: flex-end;
    background: var(--anello-green);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.assistant-msg--bot {
    align-self: flex-start;
    max-width: 100%;
    background: #fff;
    border: 1px solid #e3e9e4;
    color: #1d2b23;
    border-bottom-left-radius: 4px;
    white-space: normal; /* bot answers are rendered markdown, not preformatted */
}
.assistant-msg--bot p { margin: 0 0 6px; }
.assistant-msg--bot p:last-child { margin-bottom: 0; }

/* Markdown tables in answers */
.assistant-table-wrap { overflow-x: auto; margin: 6px 0; }
.assistant-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.assistant-table th {
    background: var(--anello-green-wash);
    color: #1d2b23;
    text-align: left;
    font-weight: 600;
    padding: 4px 8px;
    border: 1px solid #dbe5dd;
    white-space: nowrap;
}
.assistant-table td { padding: 4px 8px; border: 1px solid #e9eeea; white-space: nowrap; }
.assistant-table tbody tr:nth-child(even) td { background: #f7faf8; }
.assistant-msg--thinking { color: #6b776f; font-style: italic; }
.assistant-msg--notice { background: #fbf3e6; border-color: #ecd9b0; color: #7a5b16; }

#assistantForm {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e3e9e4;
    background: #fff;
}
#assistantInput {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid #cfd9d2;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
}
#assistantInput:focus { outline: none; border-color: var(--anello-green); box-shadow: 0 0 0 3px rgba(133, 201, 137, .4); }
#assistantSend {
    flex: none;
    width: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--anello-green-dark);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
#assistantSend:hover:not(:disabled) { background: var(--anello-green); }
#assistantSend:disabled, #assistantInput:disabled { opacity: .6; cursor: default; }