:root {
    --mud-appbar-height: 64px;
}

h1:focus {
    outline: none;
}

/* Full-width page breakout. MainLayout wraps @Body in a MudContainer capped at
   MaxWidth="ExtraLarge" and centered with auto margins, so wide screens (grids with
   many columns) can't use the whole viewport. A page that renders a .page-full-width
   element opts its own MudContainer out of the cap without affecting other pages. */
.mud-container:has(.page-full-width) {
    max-width: 100% !important;
}

/* A list page that should fit the viewport rather than scroll the document uses
   .page-fill-viewport + .grid-fill — see those rules further down, next to .nowrap-grid. */

/* TelerikFloatingLabel renders as inline-block by default, so Width="100%" on the
   inner control has nothing to fill. This ensures it stretches to fill its parent
   (MudItem, MudCardContent, etc.) so dropdown popups measure the correct width.
   max-width caps unbounded growth in wide containers (override per-field as needed). */
.k-floating-label-container {
    width: 100%;
    max-width: 25ch;
}

.k-floating-label-container > .k-floating-label {
    font-weight: 600;
}

/* Same cap for Telerik controls used without a TelerikFloatingLabel wrapper. */
.k-textbox,
.k-numerictextbox,
.k-datepicker,
.k-datetimepicker,
.k-dropdownlist,
.k-combobox {
    max-width: 25ch;
}

/* CtrlPhoneNumberEditor's Country Code column is sized by its CountryCodeWidth parameter; without
   this the 25ch cap above would silently clip anything wider (the User Add Phone dialog asks 192px). */
.phone-country-code .k-combobox {
    max-width: none;
}

/* ── Form columns that hug their fields ──
   Two house rules collide on a wide screen. Editor forms use TelerikGridLayout at 2 x 1fr, and every
   Telerik input is capped at 25ch (~195px) by the rule at the top of this file. At 1900px each 1fr
   track is therefore ~790px wide while the field inside it stops at 195px, so the right-hand column
   begins ~600px past where the left-hand field ended — a hole down the middle of every section, and
   the wider the monitor the worse it looks.

   width: fit-content sizes the tracks to their contents instead of splitting the container: an fr
   track in a container of indefinite width resolves to its max-content contribution. Each column ends
   up as wide as its widest field — ~195px for a text box, ~260px for a selector carrying its search
   and clear buttons — so column 2 starts where column 1's field ends. max-width keeps it inside the
   page on a narrow window.

   Applied to the LAYOUT, not a wrapper, and only to layouts that hold plain inputs. Deliberately NOT
   applied where a layout contains a TextArea or a ColumnSpan item: those rely on 1fr stretching to
   fill the row, and hugging would size them to their content instead. Nor to the ~105 forms whose
   wrapper class overrides the 25ch cap so their controls fill the container (.doc-editor-form and
   friends) — there, 1fr is doing exactly what it should. */
.hug-form-columns {
    width: fit-content;
    max-width: 100%;
}

/* ── Kendo flex-gap utilities the theme does not ship ──
   The login and SSO screens are written with k-d-flex k-flex-col k-gap-4, which reads as "a flex column
   with a gap". .k-d-flex and .k-flex-col ARE in kendo-theme-default; .k-gap-N is NOT, so the gap was
   silently nothing and the Database dropdown sat flush against the Sign in with Microsoft button.

   Defined in terms of the theme's own --kendo-spacing-N variables, which DO exist, so these land on the
   same scale Kendo would have used (spacing-base is 4px, so gap-4 is 16px) and follow the theme rather
   than freezing a pixel value next to it. The literal fallbacks only matter if a future theme drops the
   variables too.

   Only the three sizes actually used are defined — adding the whole utility set would be inventing an
   API surface this app does not ask for. */
.k-gap-2 { gap: var(--kendo-spacing-2, 8px); }
.k-gap-4 { gap: var(--kendo-spacing-4, 16px); }
.k-gap-6 { gap: var(--kendo-spacing-6, 24px); }

/* Drop zone for the Documents tab Upload Files button */
/* No padding. This element wraps the document GRID, and the Documents tab is the only one of the
   editor grid tabs with an extra wrapper around its grid at all - 6px/8px here read as the Documents
   grid being inset further than the ones on Features, Registrations and Notes, which is exactly what
   it was. The 2px transparent border STAYS: .drag-over only recolours it, so the row cannot shift
   under the cursor mid-drag, and 2px is small enough not to reopen the difference. */
.doc-drop-zone {
    padding: 0;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.doc-drop-zone.drag-over {
    background: rgba(25, 118, 210, 0.08);
    border-color: #1976d2;
}

/* The Upload Files button while files are dragged over IT specifically, rather than over the list.
   Outline rather than border so the button does not change size and nudge the rest of the toolbar
   sideways mid-drag; offset so it reads as a halo around the button rather than a second edge. */
.drop-target-active {
    outline: 2px solid #1976d2;
    outline-offset: 1px;
    background: rgba(25, 118, 210, 0.12);
}

/* A TelerikToolBar nested inside a grid's GridToolBarTemplate. The grid's own
   .k-grid-toolbar already paints the toolbar chrome - border, background, padding - so the
   inner .k-toolbar must not paint its own, or the row shows a doubled border and twice the
   padding. Two class levels outscore Telerik's single .k-toolbar, so no !important needed. */
.k-grid-toolbar .grid-inline-toolbar,
.grid-inline-toolbar {
    border: 0;
    background: transparent;
    padding: 0;
    width: 100%;
}

/* Filter row toggle, driven by CtrlGridToolbar's icon-only Filters button.

   The row is HIDDEN, not unmounted, and the grid stays in FilterMode=FilterRow throughout: the
   filter inputs keep their values and any active filter keeps filtering while the row is out of
   sight. Switching FilterMode instead would risk Telerik discarding the filter descriptors.

   :has() reaches from the grid root down to the marker class that the toggle button carries, which
   is how a button inside .k-grid-toolbar can control a row inside the sibling .k-grid-header. */
.k-grid:has(.grid-filters-hidden) .k-filter-row,
.k-treelist:has(.grid-filters-hidden) .k-filter-row,
.nowrap-grid:has(.grid-filters-hidden) .k-filter-row {
    display: none;
}
/* Three selectors for one behaviour, because the toggle has to work on a TelerikTreeList as well
   as a TelerikGrid (CtrlTreeListToolbar drives it there).

   .k-grid covers the grid. .k-treelist covers the tree list IF that is what Telerik puts on its
   root - their TreeList reuses the grid's inner DOM (k-grid-header-wrap, k-grid-content), so the
   root may carry k-grid, k-treelist, or both, and this file should not depend on which.

   .nowrap-grid is the one that cannot drift: it is OUR class, and Telerik documents Class as
   landing on the component's root element. Since the house standard puts Class="nowrap-grid" on
   every grid and tree list anyway, that selector matches whatever Telerik decides to call its root.
   Drop nowrap-grid from a table and you lose the filter toggle with it. */

/* HierarchicalTypeGroup editor form */
.htg-editor-form .k-floating-label-container,
.htg-editor-form .k-textbox,
.htg-editor-form .k-textarea {
    max-width: 100%;
}

/* HierarchicalType editor form */
.ht-editor-form .k-floating-label-container,
.ht-editor-form .k-textbox,
.ht-editor-form .k-textarea,
.ht-editor-form .k-dropdownlist,
.ht-editor-form .k-numerictextbox {
    max-width: 100%;
}

/* Override the 25ch cap on the Commissions For Period Crosstab report's period picker. The report
   cannot run without a period, and at 25ch the combo truncates the period caption
   ("Weekly (09/01/2026 - 09/07/2026)") to the point where two adjacent periods look identical. The
   filter bar gives it a 380px box of its own, so filling that box is what the 100% width is for. */
.commission-crosstab-filters .k-combobox,
.commission-crosstab-filters .k-floating-label-container {
    max-width: 100%;
}

/* Override the 25ch cap on a subscription rendition's content-template picker. The picker sits in a
   full-width column beside a 100%-wide TextArea, so a 25ch control reads as a rendering bug. */
.subscription-method-template .k-combobox,
.subscription-method-template .k-dropdownlist,
.subscription-method-template .k-floating-label-container {
    max-width: 100%;
}

/* Override the 25ch cap on the Employment History editor, whose controls sit in two 1fr columns of
   a TelerikGridLayout and should fill them — the cap pins each to 25ch (~195px) and leaves a hole
   between the columns on every row.

   Filling rather than hugging (.hug-form-columns), because this form carries a full-width Note
   TextArea and the Salary/Piecework price editors, which hugging would shrink to their content.
   .k-numerictextbox is in the list because the Pay section's price editors use one; the earlier
   MudGrid version of this form had no numeric input, so its absence went unnoticed. */
.employment-history-form .k-floating-label-container,
.employment-history-form .k-textbox,
.employment-history-form .k-textarea,
.employment-history-form .k-numerictextbox,
.employment-history-form .k-datepicker,
.employment-history-form .k-dropdownlist,
.employment-history-form .k-combobox {
    max-width: 100%;
}

/* CtrlPriceEditor lays a currency dropdown (150px, set inline) beside the amount. That fits the 1fr
   columns it was written for, but not the bounded 30ch tracks this form uses — the amount box was
   left with barely enough room for a comma. Trimming the symbol picker is scoped to this form so
   the control keeps its normal proportions everywhere else. max-width beats the inline width
   without !important, because a max constrains the used value whatever set it. */
.employment-history-form .eh-price-field .k-dropdownlist {
    max-width: 90px;
}

/* Override the 25ch cap in the User Deactivation dialog. Every control sits in a bounded 32ch grid
   column and should fill it; the cap otherwise pins them to 25ch and leaves each column ragged.
   The note textarea sits outside the grid and is handled by the same rules.

   Inline style= on a Telerik component does not fix this — see CLAUDE.md. */
.user-deactivation-form .k-floating-label-container,
.user-deactivation-form .k-textbox,
.user-deactivation-form .k-textarea,
.user-deactivation-form .k-numerictextbox,
.user-deactivation-form .k-datepicker,
.user-deactivation-form .k-datetimepicker,
.user-deactivation-form .k-dropdownlist,
.user-deactivation-form .k-combobox {
    max-width: 100%;
    width: 100%;
}

/* Override the 25ch cap inside the document editor form and the hierarchical type
   selector, where controls should fill their container. */
.doc-editor-form .k-floating-label-container,
.doc-editor-form .k-textbox,
.doc-editor-form .k-numerictextbox,
.doc-editor-form .k-datepicker,
.doc-editor-form .k-datetimepicker,
.doc-editor-form .k-dropdownlist,
.doc-editor-form .k-combobox {
    max-width: 100%;
}

/* Override the 25ch cap in the Schedule Appointment form. Every control there sits in a 1fr grid
   column and should fill it; the cap otherwise pins them all to 25ch and leaves the right half of
   each column empty, which is what made the Description box look cramped. .afa-wide is the
   full-width row (Description, Attendees, Note), which spans both columns.

   Inline style= on a Telerik component does not fix this — see CLAUDE.md. */
.appointment-add-form .k-floating-label-container,
.appointment-add-form .k-textbox,
.appointment-add-form .k-textarea,
.appointment-add-form .k-numerictextbox,
.appointment-add-form .k-datepicker,
.appointment-add-form .k-datetimepicker,
.appointment-add-form .k-dropdownlist,
.appointment-add-form .k-multiselect,
.appointment-add-form .k-combobox {
    max-width: 100%;
    width: 100%;
}

/* The rows that span both columns. The selectors above already lift the cap; this makes the
   wrapper itself fill the span so its child does too. */
.appointment-add-form .afa-wide {
    width: 100%;
}

/* Override the 25ch cap on the New Estimate wizard's full-width service address row. The rest of
   step 1 sits in 30ch columns where the cap is harmless, but the service address is a whole line of
   "Name — street, city, ST zip" and at 25ch it truncates to the point of being unreadable — which
   matters, because picking the wrong one taxes the estimate in the wrong jurisdiction.

   Inline style= on a Telerik component does not fix this — see CLAUDE.md. */
.estimate-wizard-wide,
.estimate-wizard-wide .k-dropdownlist,
.estimate-wizard-wide .k-combobox,
.estimate-wizard-wide .k-floating-label-container,
.estimate-service-address,
.estimate-service-address .k-dropdownlist,
.estimate-service-address .k-combobox,
.estimate-service-address .k-floating-label-container {
    max-width: 100%;
    width: 100%;
}

/* Override the 25ch cap in the portal invite dialog, where the login email needs the full width of a
   narrow window. Inline style= on a Telerik component does not work for this — see CLAUDE.md. */
.portal-invite-form .k-floating-label-container,
.portal-invite-form .k-textbox,
.portal-invite-form .k-dropdownlist {
    max-width: 100%;
}

/* Override the 25ch cap inside the survey builder and its dialogs, where inputs fill their cell.
   Inline style= on a Telerik component does not work for this — see CLAUDE.md. */
.survey-builder-form .k-floating-label-container,
.survey-builder-form .k-textbox,
.survey-builder-form .k-textarea,
.survey-builder-form .k-numerictextbox,
.survey-builder-form .k-datepicker,
.survey-builder-form .k-datetimepicker,
.survey-builder-form .k-dropdownlist,
.survey-builder-form .k-combobox {
    max-width: 100%;
}

/* Same for the take screen and its dialogs: the answer inputs fill their cell. */
.survey-take-form .k-floating-label-container,
.survey-take-form .k-textbox,
.survey-take-form .k-textarea,
.survey-take-form .k-numerictextbox,
.survey-take-form .k-datepicker,
.survey-take-form .k-datetimepicker,
.survey-take-form .k-timepicker,
.survey-take-form .k-dropdownlist,
.survey-take-form .k-combobox {
    max-width: 100%;
}

/* Override the 25ch cap inside the Send eDoc dialog, where controls fill their cell. */
.edoc-send-form .k-floating-label-container,
.edoc-send-form .k-textbox,
.edoc-send-form .k-textarea,
.edoc-send-form .k-dropdownlist,
.edoc-send-form .k-combobox {
    max-width: 100%;
}

/* Document editor "eDocs" tab: read-only label/value grid of e-signature tracking fields. */
.edoc-info-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    row-gap: 8px;
    column-gap: 16px;
    max-width: 760px;
    font-size: 0.85rem;
}

.edoc-info-grid .edoc-info-label {
    font-weight: 600;
    color: #555;
}

/* Send eDoc dialog: section labels + per-role recipient rows. */
.edoc-send-form .esign-section-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #1976d2;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 4px;
    margin: 18px 0 10px;
}

.edoc-send-form .esign-recipient-row {
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #fafafa;
}

.edoc-send-form .esign-recipient-role {
    font-size: 0.75rem;
    margin-bottom: 6px;
}

/* Override the 25ch cap on the My Schedule defaults form, where controls fill their cell. */
.my-schedule-form .k-floating-label-container,
.my-schedule-form .k-textbox,
.my-schedule-form .k-timepicker,
.my-schedule-form .k-datepicker,
.my-schedule-form .k-dropdownlist,
.my-schedule-form .k-combobox {
    max-width: 100%;
}

/* My Schedule Scheduler: shade non-work / day-off cells and block interaction with them. */
.schedule-non-work-day {
    background-color: rgba(0, 0, 0, 0.06);
    pointer-events: none;
}

/* Override the 25ch cap inside the CtrlServiceTicketUpdate dialog, where controls fill their cell. */
.service-ticket-update-form .k-floating-label-container,
.service-ticket-update-form .k-textbox,
.service-ticket-update-form .k-textarea,
.service-ticket-update-form .k-dropdownlist,
.service-ticket-update-form .k-combobox {
    max-width: 100%;
}

/* Override the 25ch cap inside the contract term editor form. */
.contract-term-editor-form .k-floating-label-container,
.contract-term-editor-form .k-textbox,
.contract-term-editor-form .k-numerictextbox,
.contract-term-editor-form .k-datepicker,
.contract-term-editor-form .k-datetimepicker,
.contract-term-editor-form .k-dropdownlist,
.contract-term-editor-form .k-combobox {
    max-width: 100%;
}

/* Override the 25ch cap inside the tag editor form. */
.tag-editor-form .k-floating-label-container,
.tag-editor-form .k-textbox,
.tag-editor-form .k-numerictextbox,
.tag-editor-form .k-textarea {
    max-width: 100%;
}

/* Override the 25ch cap on the Video QA upload page's account-number field. */
.video-qa-form .k-textbox {
    max-width: 100%;
}

/* Override the 25ch cap inside the language editor form. */
.language-editor-form .k-floating-label-container,
.language-editor-form .k-textbox {
    max-width: 100%;
}

/* Override the 25ch cap inside the contract editor form. */
.contract-editor-form .k-floating-label-container,
.contract-editor-form .k-textbox,
.contract-editor-form .k-numerictextbox,
.contract-editor-form .k-datepicker,
.contract-editor-form .k-datetimepicker,
.contract-editor-form .k-dropdownlist,
.contract-editor-form .k-combobox,
.contract-editor-form .k-textarea {
    max-width: 100%;
}

/* Override the 25ch cap inside the contract item editor form. */
.contract-item-editor-form .k-floating-label-container,
.contract-item-editor-form .k-textbox,
.contract-item-editor-form .k-numerictextbox,
.contract-item-editor-form .k-datepicker,
.contract-item-editor-form .k-datetimepicker,
.contract-item-editor-form .k-dropdownlist,
.contract-item-editor-form .k-combobox,
.contract-item-editor-form .k-textarea {
    max-width: 100%;
}

/* Vehicle editor General tab. The form stops growing at a readable width: without this its two 1fr
   layout columns each take half the viewport, so on a wide monitor every text box, selector and date
   picker is stretched across hundreds of pixels it has no use for. The inputs still fill their
   column, which is what the 25ch override below is for. Same treatment as
   .commission-period-editor-form. */
.vehicle-editor-form {
    max-width: 900px;
}

.vehicle-editor-form .k-floating-label-container,
.vehicle-editor-form .k-textbox,
.vehicle-editor-form .k-numerictextbox,
.vehicle-editor-form .k-datepicker,
.vehicle-editor-form .k-datetimepicker,
.vehicle-editor-form .k-dropdownlist,
.vehicle-editor-form .k-combobox,
.vehicle-editor-form .k-textarea {
    max-width: 100% !important;
    width: 100%;
}

/* Warehouse editor form: same problem and same treatment as .vehicle-editor-form. It used
   .mpn-editor-form, which lifts the global 25ch input cap but sets no ceiling of its own — with two
   1fr layout columns and nothing to stop them, every box grew to half the viewport on a wide
   monitor. A new class rather than a max-width on .mpn-editor-form, which 16 other editors share. */
.warehouse-editor-form {
    max-width: 900px;
}

.warehouse-editor-form .k-floating-label-container,
.warehouse-editor-form .k-textbox,
.warehouse-editor-form .k-numerictextbox,
.warehouse-editor-form .k-datepicker,
.warehouse-editor-form .k-datetimepicker,
.warehouse-editor-form .k-dropdownlist,
.warehouse-editor-form .k-combobox,
.warehouse-editor-form .k-textarea {
    max-width: 100% !important;
    width: 100%;
}

/* User editor General tab. Unlike the editors above this one has no max-width to add — its grid
   uses fixed ch tracks, so it never sprawled. What it needs is the opposite: the global 25ch cap
   has to come OFF, or the inputs stop 12.5ch short of their 37.5ch track and reopen the very gap
   the fixed tracks were chosen to close. See the comment in CtrlUserTabGeneral.razor: track width
   and this cap move together. */
.user-general-form .k-floating-label-container,
.user-general-form .k-textbox,
.user-general-form .k-numerictextbox,
.user-general-form .k-datepicker,
.user-general-form .k-datetimepicker,
.user-general-form .k-dropdownlist,
.user-general-form .k-combobox,
.user-general-form .k-textarea {
    max-width: 100% !important;
    width: 100%;
}

/* The IT tab's Note box: twice the 25ch the global cap would otherwise hold it to. Scoped to this
   one field rather than lifting the cap for the whole tab, because the General section above it is
   laid out on 30ch tracks and its inputs are meant to stay inside them. */
.it-note-field .k-textarea {
    max-width: 50ch !important;
    width: 50ch;
}

/* Warehouse zone editor form — same story as .warehouse-editor-form above. */
.warehouse-zone-editor-form {
    max-width: 900px;
}

.warehouse-zone-editor-form .k-floating-label-container,
.warehouse-zone-editor-form .k-textbox,
.warehouse-zone-editor-form .k-numerictextbox,
.warehouse-zone-editor-form .k-datepicker,
.warehouse-zone-editor-form .k-datetimepicker,
.warehouse-zone-editor-form .k-dropdownlist,
.warehouse-zone-editor-form .k-combobox,
.warehouse-zone-editor-form .k-textarea {
    max-width: 100% !important;
    width: 100%;
}

/* Override the 25ch cap inside the vehicle service schedule editor form. */
.vehicle-service-schedule-editor-form .k-floating-label-container,
.vehicle-service-schedule-editor-form .k-textbox,
.vehicle-service-schedule-editor-form .k-numerictextbox,
.vehicle-service-schedule-editor-form .k-datepicker,
.vehicle-service-schedule-editor-form .k-datetimepicker,
.vehicle-service-schedule-editor-form .k-dropdownlist,
.vehicle-service-schedule-editor-form .k-combobox {
    max-width: 100%;
    width: 100%;
}

/* Override the 25ch cap inside the vehicle service schedule limit editor form. */
.vehicle-service-schedule-limit-editor-form .k-floating-label-container,
.vehicle-service-schedule-limit-editor-form .k-textbox,
.vehicle-service-schedule-limit-editor-form .k-numerictextbox,
.vehicle-service-schedule-limit-editor-form .k-datepicker,
.vehicle-service-schedule-limit-editor-form .k-datetimepicker,
.vehicle-service-schedule-limit-editor-form .k-dropdownlist,
.vehicle-service-schedule-limit-editor-form .k-combobox {
    max-width: 100%;
    width: 100%;
}

.bu-editor-form .k-floating-label-container,
.bu-editor-form .k-textbox,
.bu-editor-form .k-numerictextbox,
.bu-editor-form .k-datepicker,
.bu-editor-form .k-datetimepicker,
.bu-editor-form .k-dropdownlist,
.bu-editor-form .k-combobox {
    max-width: 100%;
}

.div-editor-form .k-floating-label-container,
.div-editor-form .k-textbox,
.div-editor-form .k-textarea,
.div-editor-form .k-dropdownlist {
    max-width: 100%;
}

.hierarchical-type-selector .k-dropdownlist,
.hierarchical-type-selector .k-combobox {
    max-width: 100%;
}

/* Let the Tools-tab mini calendar fill the drawer width instead of the Telerik default intrinsic width. */
.ctrl-local-calendar .k-calendar {
    /* Scale the whole calendar down 20%. Width 125% * scale 0.8 = fills the drawer at 100% visual width. */
    width: 125%;
    transform: scale(0.8);
    transform-origin: top left;
}

.htcf-option-form .k-floating-label-container,
.htcf-option-form .k-textbox,
.htcf-option-form .k-numerictextbox {
    max-width: 100%;
    width: 100%;
}

.geo-coord-selector .k-numerictextbox {
    max-width: 100%;
}

/* The form stops growing at a readable width. Without this the two 1fr layout columns each take
   half the viewport, so on a wide monitor every date picker and selector is stretched across
   hundreds of pixels it has no use for. The inputs still fill their column. */
.commission-period-editor-form {
    max-width: 900px;
}

/* Override the 25ch cap inside the commission period editor form */
.commission-period-editor-form .k-floating-label-container,
.commission-period-editor-form .k-textbox,
.commission-period-editor-form .k-textarea,
.commission-period-editor-form .k-datepicker,
.commission-period-editor-form .k-dropdownlist {
    max-width: 100%;
}

/* Override the 25ch cap inside the tech pay plan editor form */
.tech-pay-plan-editor-form .k-floating-label-container,
.tech-pay-plan-editor-form .k-textbox,
.tech-pay-plan-editor-form .k-textarea,
.tech-pay-plan-editor-form .k-numerictextbox,
.tech-pay-plan-editor-form .k-datepicker,
.tech-pay-plan-editor-form .k-dropdownlist {
    max-width: 100%;
}

/* Override the 25ch cap inside the commission editor form and the commission search pane. */
.commission-editor-form .k-floating-label-container,
.commission-editor-form .k-textbox,
.commission-editor-form .k-textarea,
.commission-editor-form .k-numerictextbox,
.commission-editor-form .k-datepicker,
.commission-editor-form .k-datetimepicker,
.commission-editor-form .k-dropdownlist,
.commission-editor-form .k-combobox,
.commission-search-pane .k-textbox,
.commission-search-pane .k-datepicker,
.commission-search-pane .k-dropdownlist,
.commission-search-pane .k-combobox {
    max-width: 100%;
}

/* Override the 25ch cap inside the security system editor form */
.ss-editor-form .k-floating-label-container,
.ss-editor-form .k-textbox,
.ss-editor-form .k-textarea,
.ss-editor-form .k-numerictextbox,
.ss-editor-form .k-datepicker,
.ss-editor-form .k-datetimepicker,
.ss-editor-form .k-dropdownlist,
.ss-editor-form .k-combobox {
    max-width: 100%;
}

/* Override the 25ch cap inside the manufacturer product editor form */
.mpn-editor-form .k-floating-label-container,
.mpn-editor-form .k-textbox,
.mpn-editor-form .k-numerictextbox,
.mpn-editor-form .k-datepicker,
.mpn-editor-form .k-dropdownlist,
.mpn-editor-form .k-combobox,
.mpn-editor-form .k-textarea {
    max-width: 100% !important;
    width: 100%;
}

/* Override the 25ch cap inside the credit bureau editor form */
.credit-bureau-editor-form .k-floating-label-container,
.credit-bureau-editor-form .k-textbox,
.credit-bureau-editor-form .k-textarea,
.credit-bureau-editor-form .k-numerictextbox {
    max-width: none;
    width: 100%;
}

/* Override the 25ch cap inside the score method editor form */
.score-method-editor-form .k-floating-label-container,
.score-method-editor-form .k-textbox,
.score-method-editor-form .k-textarea,
.score-method-editor-form .k-numerictextbox,
.score-method-editor-form .k-dropdownlist {
    max-width: none;
    width: 100%;
}

/* Override the 25ch cap inside the credit score letter conversion editor forms */
.conversion-editor-form .k-floating-label-container,
.conversion-editor-form .k-textbox,
.conversion-editor-form .k-textarea,
.conversion-editor-form .k-numerictextbox,
.conversion-editor-form .k-dropdownlist {
    max-width: none;
    width: 100%;
}


/* An inactive record selected in any Ctrl*Selector tints its displayed value pink, so a
   deactivated FK is visible without opening the record. Every selector already emits
   "<name>-selector-inactive" on its wrapper from _selectedIsActive == false; this is the one
   place that gives those classes an effect, so a new selector must add its name here or the
   hook is dead. Scoped to .k-input-inner so only the value box tints, not the buttons beside
   it; Telerik sets that background itself, hence !important. */
.app-sub-system-version-selector-inactive .k-combobox .k-input-inner,
.app-system-selector-inactive .k-combobox .k-input-inner,
.approval-chain-selector-inactive .k-combobox .k-input-inner,
.asset-selector-inactive .k-combobox .k-input-inner,
.assignment-type-selector-inactive .k-combobox .k-input-inner,
.bl-selector-inactive .k-combobox .k-input-inner,
.bu-selector-inactive .k-combobox .k-input-inner,
.city-selector-inactive .k-combobox .k-input-inner,
.contact-selector-inactive .k-combobox .k-input-inner,
.contract-term-selector-inactive .k-combobox .k-input-inner,
.conversion-type-selector-inactive .k-combobox .k-input-inner,
.country-selector-inactive .k-combobox .k-input-inner,
.county-selector-inactive .k-combobox .k-input-inner,
.credit-bureau-selector-inactive .k-combobox .k-input-inner,
.credit-card-type-selector-inactive .k-combobox .k-input-inner,
.credit-score-method-selector-inactive .k-combobox .k-input-inner,
.currency-selector-inactive .k-combobox .k-input-inner,
.customer-selector-inactive .k-combobox .k-input-inner,
.dealer-selector-inactive .k-combobox .k-input-inner,
.dept-selector-inactive .k-combobox .k-input-inner,
.div-selector-inactive .k-combobox .k-input-inner,
.email-import-task-selector-inactive .k-combobox .k-input-inner,
.email-response-template-selector-inactive .k-combobox .k-input-inner,
.enterprise-selector-inactive .k-combobox .k-input-inner,
.eos-selector-inactive .k-combobox .k-input-inner,
.eots-selector-inactive .k-combobox .k-input-inner,
.ers-selector-inactive .k-combobox .k-input-inner,
.from-email-address-selector-inactive .k-combobox .k-input-inner,
.language-selector-inactive .k-combobox .k-input-inner,
.lead-selector-inactive .k-combobox .k-input-inner,
.location-selector-inactive .k-combobox .k-input-inner,
.manufacturer-selector-inactive .k-combobox .k-input-inner,
.messaging-phone-number-selector-inactive .k-combobox .k-input-inner,
.mp-selector-inactive .k-combobox .k-input-inner,
.naics-selector-inactive .k-combobox .k-input-inner,
.notification-method-selector-inactive .k-combobox .k-input-inner,
.pay-plans-tech-commission-selector-inactive .k-combobox .k-input-inner,
.price-schedule-selector-inactive .k-combobox .k-input-inner,
.product-pay-schedule-selector-inactive .k-combobox .k-input-inner,
.project-step-selector-inactive .k-combobox .k-input-inner,
.project-template-selector-inactive .k-combobox .k-input-inner,
.prospect-selector-inactive .k-combobox .k-input-inner,
.referral-source-selector-inactive .k-combobox .k-input-inner,
.service-queue-selector-inactive .k-combobox .k-input-inner,
.shipping-type-selector-inactive .k-combobox .k-input-inner,
.shipping-type-method-selector-inactive .k-combobox .k-input-inner,
.sic-selector-inactive .k-combobox .k-input-inner,
.sku-selector-inactive .k-combobox .k-input-inner,
.state-selector-inactive .k-combobox .k-input-inner,
.supplier-selector-inactive .k-combobox .k-input-inner,
.team-selector-inactive .k-combobox .k-input-inner,
.tenant-selector-inactive .k-combobox .k-input-inner,
.timezone-selector-inactive .k-combobox .k-input-inner,
.type-list-selector-inactive .k-combobox .k-input-inner,
.user-selector-inactive .k-combobox .k-input-inner,
.warehouse-selector-inactive .k-combobox .k-input-inner,
.zipcode-selector-inactive .k-combobox .k-input-inner {
    background-color: #ffcdd2 !important;
}

/* Same pink as the selector rule above, for a deactivated USER shown in a grid cell - the driver on
   Vehicle Search, the holder on PC Tracker. One rule rather than one per screen: it is the same fact
   being reported, and a second name for it drifts to a second shade.
   A GridColumn Template renders inside the td and cannot colour the cell, so the span fills it
   instead - display:block plus negative margins so the tint reaches the cell's padding edges. */
.grid-cell-inactive {
    display: block;
    margin: -8px -12px;
    padding: 8px 12px;
    background-color: #ffcdd2;
}

.dept-editor-form .k-floating-label-container,
.dept-editor-form .k-textbox,
.dept-editor-form .k-textarea,
.dept-editor-form .k-numerictextbox,
.dept-editor-form .k-dropdownlist {
    max-width: none;
    width: 100%;
}

/* Override the 25ch cap inside the service ticket queue editor form and dialog */
.stq-editor-form .k-floating-label-container,
.stq-editor-form .k-textbox,
.stq-editor-form .k-textarea,
.stq-editor-form .k-numerictextbox,
.stq-editor-form .k-dropdownlist {
    max-width: 100%;
}

/* Override the 25ch cap inside the credit score editor form */
.credit-score-editor .k-floating-label-container,
.credit-score-editor .k-textbox,
.credit-score-editor .k-numerictextbox,
.credit-score-editor .k-datepicker,
.credit-score-editor .k-dropdownlist,
.credit-score-editor .k-textarea {
    max-width: 100%;
    width: 100%;
}

/* Override the 25ch cap inside the service ticket editor form */
.st-editor-form .k-floating-label-container,
.st-editor-form .k-textbox,
.st-editor-form .k-textarea,
.st-editor-form .k-numerictextbox,
.st-editor-form .k-dropdownlist,
.st-editor-form .k-datepicker,
.st-editor-form .k-combobox {
    max-width: 100%;
}

/* Override the 25ch cap inside the service ticket editor panel (right-pane component) */
.st-editor-panel-form .k-floating-label-container,
.st-editor-panel-form .k-textbox,
.st-editor-panel-form .k-textarea,
.st-editor-panel-form .k-numerictextbox,
.st-editor-panel-form .k-dropdownlist,
.st-editor-panel-form .k-datepicker,
.st-editor-panel-form .k-combobox {
    max-width: 100%;
}

/* Override the 25ch cap inside the sales opportunity editor dialog */
.sales-opp-editor-form .k-floating-label-container,
.sales-opp-editor-form .k-textbox,
.sales-opp-editor-form .k-textarea,
.sales-opp-editor-form .k-numerictextbox,
.sales-opp-editor-form .k-datepicker,
.sales-opp-editor-form .k-dropdownlist,
.sales-opp-editor-form .k-combobox {
    max-width: 100%;
}

/* Override the 25ch cap inside the sales opportunity editor page */
.sales-opp-edit-page-form .k-floating-label-container,
.sales-opp-edit-page-form .k-textbox,
.sales-opp-edit-page-form .k-textarea,
.sales-opp-edit-page-form .k-numerictextbox,
.sales-opp-edit-page-form .k-datepicker,
.sales-opp-edit-page-form .k-dropdownlist,
.sales-opp-edit-page-form .k-combobox {
    max-width: 100%;
}

/* DateTimeSelector: compact quick-pick dropdown — show only the arrow, hide the value text */
.dt-quick-pick-wrap .k-dropdownlist {
    min-width: 0;
    max-width: 36px;
    width: 36px;
}
.dt-quick-pick-wrap .k-input-inner {
    display: none;
}
.dt-quick-pick-wrap .k-input-button {
    border-radius: 4px;
}

/* Override the 25ch cap inside the sales prediction editor dialog */
.sales-pred-editor-form .k-floating-label-container,
.sales-pred-editor-form .k-textbox,
.sales-pred-editor-form .k-numerictextbox,
.sales-pred-editor-form .k-datepicker {
    max-width: 100%;
}

/* Override the 25ch cap inside the supplier SKU editor form and price editor form */
.supplier-sku-form .k-floating-label-container,
.supplier-sku-form .k-textbox,
.supplier-sku-form .k-numerictextbox,
.supplier-sku-form .k-datepicker,
.supplier-sku-form .k-dropdownlist,
.supplier-sku-form .k-combobox,
.supplier-sku-form .k-textarea {
    max-width: 100%;
    width: 100%;
}

/* Override the 25ch cap inside the supplier account editor form */
.supplier-account-form .k-floating-label-container,
.supplier-account-form .k-textbox,
.supplier-account-form .k-numerictextbox,
.supplier-account-form .k-datepicker,
.supplier-account-form .k-dropdownlist,
.supplier-account-form .k-combobox,
.supplier-account-form .k-textarea {
    max-width: 100%;
    width: 100%;
}

/* Override the 25ch cap inside the supplier contract editor form */
.supplier-contract-form .k-floating-label-container,
.supplier-contract-form .k-textbox,
.supplier-contract-form .k-numerictextbox,
.supplier-contract-form .k-datepicker,
.supplier-contract-form .k-dropdownlist,
.supplier-contract-form .k-combobox,
.supplier-contract-form .k-textarea {
    max-width: 100%;
    width: 100%;
}

/* Override the 25ch cap inside the asset editor form */
.asset-editor-form .k-floating-label-container,
.asset-editor-form .k-textbox,
.asset-editor-form .k-numerictextbox,
.asset-editor-form .k-datepicker,
.asset-editor-form .k-datetimepicker,
.asset-editor-form .k-dropdownlist,
.asset-editor-form .k-combobox,
.asset-editor-form .k-textarea {
    max-width: 100%;
}

/* Override the 25ch cap inside the SIP server editor form */
.sip-server-editor-form .k-floating-label-container,
.sip-server-editor-form .k-textbox,
.sip-server-editor-form .k-numerictextbox,
.sip-server-editor-form .k-dropdownlist,
.sip-server-editor-form .k-textarea {
    max-width: 100%;
}

/* Override the 25ch cap inside the supplier contract product editor form */
.supplier-contract-product-form .k-floating-label-container,
.supplier-contract-product-form .k-textbox,
.supplier-contract-product-form .k-numerictextbox,
.supplier-contract-product-form .k-datepicker,
.supplier-contract-product-form .k-dropdownlist,
.supplier-contract-product-form .k-combobox,
.supplier-contract-product-form .k-textarea {
    max-width: 100%;
    width: 100%;
}

.redstone-appbar {
    background-color: #f6f6f6 !important;
    color: #424242 !important;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    z-index: 1201;
    /* Never let the bar wrap to a second row */
    flex-wrap: nowrap !important;
    overflow: hidden;
}

/* Left section: breadcrumb may truncate rather than push siblings */
.redstone-appbar .k-appbar-section:first-child {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

/* Search section: shrinks before the right-side controls ever wrap */
.redstone-appbar .k-appbar-section:has(.appbar-search) {
    flex: 0 1 auto;
    min-width: 0;
    overflow: visible;
}

/* Favorite (pin current page) toggle button in the AppBar */
.favorite-star-btn .k-icon,
.favorite-star-btn .k-svg-icon {
    color: #bdbdbd;
}

.favorite-star-btn.favorited .k-icon,
.favorite-star-btn.favorited .k-svg-icon {
    color: #f5a623;
}

/* Favorites tab (left drawer). One row per favorite: the star unpins it, the label navigates, and
   the row itself is the drag handle for re-ordering. These live here rather than in
   MainLayout.razor.css because the star rules reach into a TelerikButton's own DOM (.k-svg-icon),
   which a scoped stylesheet's [b-xxxx] attribute never lands on.

   These are the LIGHT-SURFACE defaults. The drawer is navy under skyline-theme.css, which loads
   after this file and repaints the row background, the divider and the hint there — see its
   "Favorites and Tools panels" section. Change a colour here and check that one too, or the row
   silently keeps the navy value. */
.favorite-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border-bottom: 1px solid #eee;
    cursor: grab;
}

.favorite-row:hover {
    background: #f5f5f5;
}

.favorite-row.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

/* Drop target. Deliberately a whole-row highlight rather than a line above or below it: the drop
   puts the dragged row into THIS row's slot, and an edge line would imply a gap that is not what
   the reorder actually does. outline rather than border, so the row does not change height and
   shove the rest of the list down as the pointer moves. Recoloured for the navy drawer in
   skyline-theme.css. */
.favorite-row.drag-over {
    background: #e3f2fd;
    outline: 1px dashed #1976d2;
    outline-offset: -1px;
}

/* min-height:0 is what lets the ellipsis engage - a flex item defaults to min-width:auto and
   refuses to shrink below its content, which would push the star out of view instead of
   truncating the name. */
.favorite-label {
    flex: 1;
    min-width: 0;
    color: #212121;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-label:hover {
    text-decoration: underline;
}

/* Every row in this list is by definition a favorite, so the star is always lit; it greys on hover
   to telegraph that clicking it unpins. The reverse of .favorite-star-btn in the top toolbar, which
   is grey until the current page is pinned. */
.favorite-unpin-btn .k-icon,
.favorite-unpin-btn .k-svg-icon {
    color: #f5a623;
}

.favorite-unpin-btn:hover .k-icon,
.favorite-unpin-btn:hover .k-svg-icon {
    color: #bdbdbd;
}

.favorite-reorder-hint {
    margin-top: 8px;
    font-size: 11px;
    color: #9e9e9e;
    text-align: center;
}

.appbar-search {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 60px;
    max-width: 240px;
    width: 240px;
    flex: 0 1 auto;
    overflow: visible;
}

/* ── Splash screen ── */
#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    transition: opacity 0.5s ease;
}

#splash-screen.splash-hidden {
    opacity: 0;
    pointer-events: none;
}

.splash-image {
    max-width: min(716px, 80vw);
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.splash-spinner {
    margin-top: 32px;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: splash-spin 0.8s linear infinite;
}

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


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

/* ── User Editor scrolling layout ── */
.user-editor-page {
    height: calc(100dvh - var(--mud-appbar-height, 64px) - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-editor-tabstrip-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-editor-tabstrip-wrapper .k-tabstrip {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-editor-tabstrip-wrapper .k-tabstrip-items-wrapper {
    flex-shrink: 0;
}

.user-editor-tabstrip-wrapper .k-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.user-editor-actions {
    flex-shrink: 0;
    padding-top: 4px;
}

/* ── Contact Editor scrolling layout — same pattern as User Editor above ── */
.contact-editor-page {
    height: calc(100dvh - var(--mud-appbar-height, 64px) - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.contact-editor-tabstrip-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.contact-editor-tabstrip-wrapper .k-tabstrip {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.contact-editor-tabstrip-wrapper .k-tabstrip-items-wrapper {
    flex-shrink: 0;
}

.contact-editor-tabstrip-wrapper .k-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.contact-editor-actions {
    flex-shrink: 0;
    padding-top: 4px;
}

/* ── Entity editor scrolling layout — same pattern as User Editor above ──
   Shared by every "summary bar + tab strip" editor screen. Named for the Entity sub-class editors
   that first used it (Customer / Lead / Prospect / Supplier / Dealer / Manufacturer /
   Referral Source / Tenant), but also applied to SKU / Vehicle / Location / Manufacturer Product,
   which are the same shape without being Entity sub-types.
   The page itself never scrolls: the summary bar and the action buttons keep their natural height and
   stay on screen, the tab strip takes whatever is left, and scrolling happens inside the active tab's
   content pane.
   96px = the 64px AppBar + the MudContainer's mt-4/mb-4. */
.entity-editor-page {
    height: calc(100dvh - var(--mud-appbar-height, 64px) - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Summary bar and inline error alerts must never be squeezed to make room for the tabs. */
.entity-editor-summary,
.entity-editor-page > .mud-alert {
    flex-shrink: 0;
}

/* The summary bar wears the same surface as a section panel — same tint, same border, same radius
   (see .section-panel) — so the record's identity strip and the sections below it read as one
   system rather than a grey box sitting on top of blue ones.

   Every call site used to carry `background:#f5f5f5; border:1px solid #e0e0e0; border-radius:4px`
   INLINE, which no stylesheet rule can override; those three declarations were stripped from all
   25 of them so this rule is the single place the surface is set. Put them back inline and this
   stops working.

   These values must stay equal to .section-panel's below, and BOTH selectors are restated together
   in skyline-theme.css — the theme is what actually paints them in the running app. Change the
   surface in one place and the two drift by a shade, which reads as a bug rather than a choice. */
/* Padding lives here for the same reason the surface does: it was inline at all 25 call sites, so
   trimming the bar meant editing 25 files and missing one. 8px rather than the 12px it replaces —
   part of taking roughly a fifth off the bar's height, together with the smaller thumbnail in
   CtrlSummaryPicture and the tighter boxes in CtrlSummarySection. Put padding back inline at a call
   site and that site stops following this. */
.entity-editor-summary {
    background: #f2f7fc;
    border: 1px solid #d6e4f2;
    border-radius: 8px;
    padding: 8px;
}

.entity-editor-tabstrip-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.entity-editor-tabstrip-wrapper .k-tabstrip {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.entity-editor-tabstrip-wrapper .k-tabstrip-items-wrapper {
    flex-shrink: 0;
}

.entity-editor-tabstrip-wrapper .k-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.entity-editor-actions {
    flex-shrink: 0;
}

/* ── Sales Hub height chain ──
   The Kendo Drawer does not pass a height down to its content, which is what stopped the split-pane
   tabs from scrolling: everything below simply grew and got clipped by the shell's overflow:hidden.
   Two rules in the theme cause it, and both need overriding:
     .k-drawer-container { align-items: flex-start }  — the content is never stretched vertically,
     .k-drawer-content   { flex: 1 1 auto }           — so it has no height, only a width.
   With the content given a real height and made a flex column, the header/body divs inside
   <DrawerContent> size as their markup already assumes, the Splitter's Height="100%" finally
   resolves against something definite, and .k-pane (height:100%, overflow:hidden) bounds each pane.
   Only then can .hub-editor-pane below scroll the active tab. */
/* min-width: 0 for the same reason min-height: 0 is here — the trap exists on both axes.
   .k-drawer-container is the load-bearing one. It is a flex item of .sales-hub-shell (display: flex,
   so a row), and the theme gives it no overflow of its own:
     .k-drawer-container { display: flex; flex-flow: row nowrap; align-items: flex-start }
   A flex item whose overflow is visible keeps min-width: auto resolved from its CONTENT, so it will
   not shrink below its min-content width. Once every grid column had an explicit pixel width, that
   min-content width became the sum of those widths, the drawer body grew wider than the shell, and
   .sales-hub-shell's overflow: hidden clipped the excess. Nothing overflowed anything scrollable, so
   there was no scrollbar anywhere and the far columns were simply unreachable.

   .k-drawer-content did NOT need it — its automatic minimum size is already 0, because the flexbox
   rule only applies to items whose overflow is visible and this one is hidden just below. It is
   stated anyway so that changing that overflow cannot quietly bring the clipping back.

   Splitter panes need nothing: the theme already ships .k-pane { min-width: 0; max-width: 100% },
   which is why the Lead Manager's horizontal splitter never had this problem.

   Constraining the chain is what gives the Grid a DEFINITE width to measure its columns against;
   only then does Telerik render its own horizontal scrollbar inside .k-grid-content, which is where
   a grid's horizontal scrolling belongs. */
.sales-hub-shell .k-drawer-container {
    height: 100%;
    min-height: 0;
    min-width: 0;
    align-items: stretch;
}

.sales-hub-shell .k-drawer-content {
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Scrolling belongs to the active tab's .k-content, not to the whole drawer body. */
    overflow: hidden;
}

/* ── Sales Hub split-pane editor ──
   The bottom pane of the Referral Sources / Customers / Leads / Prospects tabs hosts the same tab
   shells as the full-screen entity editors, so it needs the same internal scrolling: the tab strip
   header stays put and the active tab's content scrolls. Identical rules to
   .entity-editor-tabstrip-wrapper above, except the height comes from the splitter pane (100%)
   rather than from a flex parent. Without this the tab content is clipped at the pane's bottom edge
   with no scrollbar — a plain overflow:auto on the pane does not help, because Telerik's .k-content
   never grows past the pane. */
.hub-editor-pane {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hub-editor-pane .k-tabstrip {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hub-editor-pane .k-tabstrip-items-wrapper {
    flex-shrink: 0;
}

.hub-editor-pane .k-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.service-ticket-manager-tabstrip {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.service-ticket-manager-tabstrip .k-tabstrip {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.service-ticket-manager-tabstrip .k-tabstrip-items-wrapper {
    flex-shrink: 0;
}

.service-ticket-manager-tabstrip .k-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── TelerikGrid density ── */
.k-grid .k-header,
.k-grid .k-table-th {
    padding-top: var(--kendo-spacing-1, 4px) !important;
    padding-bottom: var(--kendo-spacing-1, 4px) !important;
    font-weight: var(--kendo-font-weight-bold, 700) !important;
}

.k-grid .k-grid-table td,
.k-grid .k-grid-table th {
    padding-top: var(--kendo-spacing-1, 4px) !important;
    padding-bottom: var(--kendo-spacing-1, 4px) !important;
}

.k-grid .k-grid-table td {
    line-height: var(--kendo-line-height-sm, 1.25) !important;
}

/* Mini widget grids (CtrlMiniAppointments, CtrlMiniServiceTickets): 6px font for headers and records */
.mini-appt-grid,
.mini-appt-grid .k-header,
.mini-appt-grid .k-table-th,
.mini-appt-grid .k-grid-table td,
.mini-appt-grid .k-grid-table th,
.mini-appt-grid .k-grid-table td span,
.mini-appt-grid .k-grid-table td a,
.mini-ticket-grid,
.mini-ticket-grid .k-header,
.mini-ticket-grid .k-table-th,
.mini-ticket-grid .k-grid-table td,
.mini-ticket-grid .k-grid-table th,
.mini-ticket-grid .k-grid-table td span,
.mini-ticket-grid .k-grid-table td a {
    font-size: 8px !important;
}

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

/* Override the 25ch cap inside the product point schedule editor form */
/* Width cap for the Shipping Carrier General tab only. It rides on its own class rather than on
   .pps-editor-form below, which is shared with another screen that must not change. */
.shipping-general-fields {
    max-width: 760px;
}

.pps-editor-form .k-floating-label-container,
.pps-editor-form .k-textbox,
.pps-editor-form .k-textarea,
.pps-editor-form .k-dropdownlist,
.pps-editor-form .k-numerictextbox,
.pps-editor-form .k-combobox {
    max-width: 100%;
}

/* Same override for the Subscription editor's General tab, whose two GridLayout tracks are wider
   than 25ch and whose row-1 cells hold two controls side by side. A separate rule rather than a
   second class on the one above, so neither screen's layout can be changed by a tweak meant for
   the other. */
.subscription-editor-form .k-floating-label-container,
.subscription-editor-form .k-textbox,
.subscription-editor-form .k-textarea,
.subscription-editor-form .k-dropdownlist,
.subscription-editor-form .k-numerictextbox,
.subscription-editor-form .k-combobox {
    max-width: 100%;
}

/* Tabbed navigation drawer: keep the active panel scrollable below the app bar + tab strip. */
.drawer-tabs .mud-tabs-panels {
    overflow-y: auto;
    max-height: calc(100vh - 112px);
}

/* Icon-only drawer tabs, ~1/3 smaller than the default 24px tab icon. */
.drawer-tabs .mud-tab .mud-icon-root {
    font-size: 1rem;
}

/* Genesys Cloud phone fills the Phone tab panel below the app bar + tab strip. */
.genesys-phone {
    height: calc(100vh - 112px);
    width: 100%;
}

/* Override the 25ch cap inside the product pay schedule editor form */
.ppay-editor-form .k-floating-label-container,
.ppay-editor-form .k-textbox,
.ppay-editor-form .k-textarea,
.ppay-editor-form .k-dropdownlist,
.ppay-editor-form .k-numerictextbox,
.ppay-editor-form .k-combobox {
    max-width: 100%;
}

.email-editor-form .k-floating-label-container,
.email-editor-form .k-textbox,
.email-editor-form .k-textarea,
.email-editor-form .k-dropdownlist,
.email-editor-form .k-numerictextbox,
.email-editor-form .k-combobox {
    max-width: 100%;
}

/* Override the 25ch cap inside the merge field editor form */
.merge-field-editor-form .k-floating-label-container,
.merge-field-editor-form .k-textbox,
.merge-field-editor-form .k-textarea,
.merge-field-editor-form .k-dropdownlist,
.merge-field-editor-form .k-numerictextbox,
.merge-field-editor-form .k-combobox {
    max-width: 100%;
}

/* Override the 25ch cap inside the email import task editor form */
.eit-editor-form .k-floating-label-container,
.eit-editor-form .k-textbox,
.eit-editor-form .k-textarea,
.eit-editor-form .k-dropdownlist,
.eit-editor-form .k-numerictextbox,
.eit-editor-form .k-combobox {
    max-width: 100%;
}

.po-editor-form .k-floating-label-container,
.po-editor-form .k-textbox,
.po-editor-form .k-textarea,
.po-editor-form .k-dropdownlist,
.po-editor-form .k-numerictextbox,
.po-editor-form .k-combobox {
    max-width: 100%;
}

/* ── Notification bell + panel ──
   .notification-panel mirrors .global-search-dropdown below, but anchored to the right of the app bar
   instead of centred. Both are hand-rolled fixed panels with a click-away backdrop rather than a
   TelerikWindow (see CLAUDE.md on Telerik focus restoration firing spurious onclick events). */
.notification-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #d32f2f;
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.notification-panel {
    position: fixed;
    top: 64px;
    right: 8px;
    width: 380px;
    max-width: calc(100vw - 16px);
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 9999;
    max-height: 460px;
    overflow-y: auto;
}

.notification-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    background: #fff;
}

.notification-panel-title {
    font-weight: 600;
    flex: 1;
}

.notification-panel-action {
    font-size: 12px;
    color: #1976d2;
    cursor: pointer;
    white-space: nowrap;
}

.notification-panel-action:hover {
    text-decoration: underline;
}

.notification-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    border-left: 3px solid transparent;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: #f5f5f5;
}

/* Unread is signalled by weight and a left rule, not colour alone. */
.notification-item-unread {
    border-left-color: #1976d2;
    background: #f5f9ff;
}

.notification-item-unread .notification-item-title {
    font-weight: 700;
}

.notification-item-title {
    font-size: 13px;
    line-height: 1.35;
}

.notification-item-body {
    font-size: 12px;
    color: #616161;
    margin-top: 3px;
    line-height: 1.35;
}

.notification-item-meta {
    font-size: 11px;
    color: #9e9e9e;
    margin-top: 4px;
}

.notification-empty {
    padding: 18px 14px;
    font-size: 13px;
    color: #757575;
    text-align: center;
}

/* ── Global search dropdown ── */
.global-search-dropdown {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 360px;
    max-width: 520px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 9999;
    max-height: 420px;
    overflow-y: auto;
}

.global-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
}

.global-search-item:last-child {
    border-bottom: none;
}

.global-search-item:hover {
    background: #f5f5f5;
}

.global-search-type {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #1565c0;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 72px;
    text-align: center;
}

.global-search-label {
    flex: 1;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-id {
    font-size: 12px;
    color: #9e9e9e;
    white-space: nowrap;
    flex-shrink: 0;
}

.global-search-empty {
    padding: 14px;
    color: #9e9e9e;
    font-size: 14px;
    text-align: center;
}

/* Appointment editor form — override the global 25ch cap so inputs fill grid cells */
.appointment-editor-form .k-floating-label-container,
.appointment-editor-form .k-dropdownlist,
.appointment-editor-form .k-textbox,
.appointment-editor-form .k-datepicker,
.appointment-editor-form .k-datetimepicker,
.appointment-editor-form .k-numerictextbox {
    max-width: 100% !important;
    width: 100%;
}

/* Note section full-width textarea */
.appointment-editor-note .k-textarea {
    max-width: 100% !important;
    width: 100%;
}

/* Project step editor form — override global 25ch cap */
.project-step-editor-form .k-floating-label-container,
.project-step-editor-form .k-dropdownlist,
.project-step-editor-form .k-textbox,
.project-step-editor-form .k-numerictextbox {
    max-width: 100% !important;
    width: 100%;
}

/* Project editor form — override the global 25ch cap so inputs fill grid cells */
.project-editor-form .k-floating-label-container,
.project-editor-form .k-dropdownlist,
.project-editor-form .k-textbox,
.project-editor-form .k-datepicker,
.project-editor-form .k-numerictextbox {
    max-width: 100% !important;
    width: 100%;
}

/* Project note section full-width textarea */
.project-editor-note .k-textarea {
    max-width: 100% !important;
    width: 100%;
}

/* Search forms — override the global 25ch cap so inputs fill their container.
   Shared by Customer Finder and the Lead Manager tabs' search panes: same problem, same fix, and the
   .cf-label below is the matching field label for both. */
.customer-finder-form .k-floating-label-container,
.customer-finder-form .k-dropdownlist,
.customer-finder-form .k-textbox,
.customer-finder-form .k-datepicker,
.customer-finder-form .k-numerictextbox,
.customer-finder-form .k-combobox,
.lead-manager-search-form .k-floating-label-container,
.lead-manager-search-form .k-dropdownlist,
.lead-manager-search-form .k-textbox,
.lead-manager-search-form .k-datepicker,
.lead-manager-search-form .k-numerictextbox,
.lead-manager-search-form .k-combobox {
    max-width: 100% !important;
    width: 100%;
}

.cf-label {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 4px;
}

/* Location editor form — override the global 25ch cap so inputs fill grid cells */
.location-editor-form .k-floating-label-container,
.location-editor-form .k-dropdownlist,
.location-editor-form .k-textbox,
.location-editor-form .k-datepicker,
.location-editor-form .k-numerictextbox {
    max-width: 100% !important;
    width: 100%;
}

/* Location note section full-width textarea */
.location-editor-note .k-textarea {
    max-width: 100% !important;
    width: 100%;
}

.integration-editor-form .k-floating-label-container,
.integration-editor-form .k-dropdownlist,
.integration-editor-form .k-textbox,
.integration-editor-form .k-datepicker,
.integration-editor-form .k-numerictextbox {
    max-width: 100% !important;
    width: 100%;
}

.integration-editor-note .k-textarea {
    max-width: 100% !important;
    width: 100%;
}

/* Type List Name editor — override the global 25ch cap so inputs fill their grid cells */
.typelist-name-editor-form .k-floating-label-container,
.typelist-name-editor-form .k-dropdownlist,
.typelist-name-editor-form .k-textbox {
    max-width: 100% !important;
    width: 100%;
}

/* Type List entry editor — same override. The colour pickers keep their natural width. */
.typelist-editor-form .k-floating-label-container,
.typelist-editor-form .k-dropdownlist,
.typelist-editor-form .k-textbox,
.typelist-editor-form .k-numerictextbox {
    max-width: 100% !important;
    width: 100%;
}

.typelist-editor-form .k-colorpicker {
    max-width: none !important;
    width: auto;
}

/* Entity links/keywords add form — override the global 25ch cap so inputs fill grid cells */
.entity-links-form .k-floating-label-container,
.entity-links-form .k-dropdownlist,
.entity-links-form .k-textbox {
    max-width: 100% !important;
    width: 100%;
}

/* Entity general tab form — override the global 25ch cap so inputs fill grid cells */
.entity-general-tab-form .k-floating-label-container,
.entity-general-tab-form .k-dropdownlist,
.entity-general-tab-form .k-textbox,
.entity-general-tab-form .k-datepicker,
.entity-general-tab-form .k-numerictextbox,
.entity-general-tab-form .k-maskedtextbox,
.entity-general-tab-form .k-textarea {
    max-width: 100% !important;
    width: 100%;
}

/* Entity General tab: give every input the same width. The selector controls (Entity Type, Account
   Status, Data Source, Referral Source, Language, Time Zone, State, ...) render TelerikComboBoxes
   (.k-combobox), which the rule above does not list, so they keep the global 25ch cap — while text
   boxes, numeric boxes, date pickers and dropdown lists were widened to 100% and looked oversized
   beside them. Re-cap those at 25ch. The Note textarea is not listed here and stays full-width.
   Must stay AFTER the block above: same specificity, so source order decides. */
.entity-general-key-fields .k-floating-label-container,
.entity-general-key-fields .k-textbox,
.entity-general-key-fields .k-dropdownlist,
.entity-general-key-fields .k-numerictextbox,
.entity-general-key-fields .k-maskedtextbox,
.entity-general-key-fields .k-datepicker {
    max-width: 25ch !important;
    width: 100%;
}

/* CtrlHierarchicalTypeSelector (Category) and CtrlSSNEditor both wrap their input in a flex:1 div so it
   fills the cell and their trailing buttons sit immediately after it. Once the rule above caps the input
   at 25ch, that wrapper keeps stretching and strands the buttons out to the right of the column — pin it
   to the same 25ch. The combobox-based selectors need no equivalent: they have no flex:1 wrapper, which
   is exactly why their buttons already sit tight against the field. Kept in sync with the cap above; do
   not substitute a pixel width. */
.entity-general-key-fields .hierarchical-type-selector-field,
.entity-general-key-fields .ctrl-ssn-editor-field {
    flex: 0 0 25ch;
    max-width: 25ch;
}

/* Entity accounts inline add/edit form — override the global 25ch cap */
.entity-accounts-form .k-floating-label-container,
.entity-accounts-form .k-textbox,
.entity-accounts-form .k-dropdownlist,
.entity-accounts-form .k-textarea {
    max-width: 100%;
    width: 100%;
}

/* Team editor general tab — override the global 25ch cap */
/* .k-combobox joins the list because the Ctrl*Selector controls on this form (Team Type, Parent
   Team, Team Leader) are comboboxes, and the global 25ch cap at the top of this file catches them.
   Team Type in particular was a .k-dropdownlist until it moved to CtrlTypeListSelector, so without
   this line it would have shrunk to 25ch while the text boxes beside it stayed full width. */
/* The Team General tab's field layout is 200px (photo) + 16px gap + 1fr, and that 1fr takes every
   pixel the editor is not using: on a 1900px monitor the name box ran well past 1400px. The cap
   leaves column 2 at roughly 480px, a readable field length, while the section panel around it still
   spans the tab. max-width rather than a fixed track width so the columns still shrink on a narrow
   window instead of overflowing. */
.team-general-fields {
    max-width: 700px;
}

.team-editor-form .k-floating-label-container,
.team-editor-form .k-textbox,
.team-editor-form .k-dropdownlist,
.team-editor-form .k-combobox,
.team-editor-form .k-textarea {
    max-width: 100%;
    width: 100%;
}

/* Address editor — override the global 25ch cap so text inputs fill grid cells and comboboxes fill flex containers */
.address-editor-form .k-floating-label-container,
.address-editor-form .k-textbox {
    max-width: 100%;
    width: 100%;
}
.address-editor-form .k-combobox {
    max-width: none;
    flex: 1;
    min-width: 0;
}

/* Business Location editor form — override the global 25ch cap so inputs fill grid cells */
.business-location-form .k-floating-label-container,
.business-location-form .k-textbox,
.business-location-form .k-textarea,
.business-location-form .k-dropdownlist {
    max-width: 100%;
    width: 100%;
}

/* Business Settings form — override the global 25ch cap so inputs fill grid cells */
.biz-settings-form .k-floating-label-container,
.biz-settings-form .k-textbox,
.biz-settings-form .k-numerictextbox,
.biz-settings-form .k-datepicker,
.biz-settings-form .k-dropdownlist {
    max-width: 100%;
    width: 100%;
}

/* Business Settings dashboard message editor — full width */
.biz-settings-editor {
    max-width: none;
}

.biz-settings-editor .k-editor {
    max-width: none;
    width: 100%;
}

.worker-task-schedule-editor-form .k-floating-label-container,
.worker-task-schedule-editor-form .k-textbox,
.worker-task-schedule-editor-form .k-numerictextbox,
.worker-task-schedule-editor-form .k-dropdownlist { max-width: none; width: 100%; }

/* The task selector is a combobox flanked by search/clear buttons, so it may only lose the
   25ch cap — forcing width:100% here would push those buttons out of the column. */
.worker-task-schedule-editor-form .k-combobox { max-width: 100%; }

/* User editor tab permission states */
.tab-readonly-banner {
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    padding: 8px 12px;
    margin: 8px 8px 4px;
    font-size: 12px;
    color: #e65100;
    border-radius: 2px;
}
.user-tab-readonly {
    pointer-events: none;
    user-select: text;
}

/* Entity payment methods inline add/edit form — override the global 25ch cap */
.entity-payment-methods-form .k-floating-label-container,
.entity-payment-methods-form .k-dropdownlist,
.entity-payment-methods-form .k-textbox,
.entity-payment-methods-form .k-datepicker,
.entity-payment-methods-form .k-textarea {
    max-width: 100% !important;
    width: 100%;
}

/* PaymentMethod editor dialog form — override the global 25ch cap */
.payment-method-editor-form .k-floating-label-container,
.payment-method-editor-form .k-dropdownlist,
.payment-method-editor-form .k-textbox,
.payment-method-editor-form .k-datepicker {
    max-width: 100% !important;
    width: 100%;
}

/* Phone Call editor form — override the global 25ch cap so inputs fill grid cells */
.phone-call-editor-form .k-floating-label-container,
.phone-call-editor-form .k-dropdownlist,
.phone-call-editor-form .k-textbox,
.phone-call-editor-form .k-datepicker,
.phone-call-editor-form .k-datetimepicker,
.phone-call-editor-form .k-numerictextbox,
.phone-call-editor-form .k-textarea {
    max-width: 100%;
    width: 100%;
}

/* Override the 25ch cap inside the mileage pay table editor form */
.mileage-pay-table-editor-form .k-floating-label-container,
.mileage-pay-table-editor-form .k-textbox,
.mileage-pay-table-editor-form .k-numerictextbox,
.mileage-pay-table-editor-form .k-dropdownlist {
    max-width: 100%;
    width: 100%;
}

/* Override the 25ch cap inside the enterprise editor form */
.enterprise-editor-form .k-floating-label-container,
.enterprise-editor-form .k-dropdownlist,
.enterprise-editor-form .k-textbox,
.enterprise-editor-form .k-combobox,
.enterprise-editor-form .k-textarea,
.enterprise-editor-form .k-numerictextbox,
.enterprise-editor-form .k-datepicker {
    max-width: 100%;
    width: 100%;
}

/* Override the 25ch cap inside the inventory adjustment editor form */
.inv-adj-editor-form .k-floating-label-container,
.inv-adj-editor-form .k-textbox,
.inv-adj-editor-form .k-numerictextbox,
.inv-adj-editor-form .k-dropdownlist,
.inv-adj-editor-form .k-textarea {
    max-width: 100%;
}

/* Fleet Manager full-height workspace */
.fleet-manager-root {
    height: calc(100vh - 100px);
}

.fleet-side-panel {
    height: 100%;
    padding: 8px 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fleet-section-head {
    font-size: 0.85rem;
    color: #1565c0;
    border-bottom: 2px solid #1565c0;
    margin: 16px 0 10px;
    padding-bottom: 2px;
    flex-shrink: 0;
}

.fleet-vehicle-list-panel {
    /* inherits flex-direction:column from fleet-side-panel */
}

.fleet-vehicle-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.fleet-vehicle-row {
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 2px;
    border: 1px solid transparent;
    transition: background 0.1s;
    line-height: 1.4;
}

.fleet-vehicle-row:hover {
    background: #f5f5f5;
}

.fleet-vehicle-row.selected {
    background: #e3f2fd;
    border-color: #1565c0;
}

.fleet-veh-id {
    font-size: 0.72rem;
    color: #9e9e9e;
    display: block;
}

.fleet-veh-num {
    font-size: 0.85rem;
    font-weight: 500;
    color: #212121;
    display: block;
}

.fleet-veh-lic {
    font-size: 0.78rem;
    color: #616161;
    display: block;
}

.fleet-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
/* ── Dashboard tile scrolling & maximize button ── */
/* Light blue title bar for every dashboard tile */
.k-tilelayout-item-header.k-card-header,
.k-tilelayout-item-header {
    background-color: #e3f2fd;
}

.dashboard-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    user-select: none;
}

.dashboard-tile-title {
    font-weight: 600;
}

.dashboard-tile-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.dashboard-tile-action {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    color: #1565c0;
    border-radius: 3px;
}

.dashboard-tile-action:hover {
    color: #0d47a1;
    background-color: #bbdefb;
}

/* ── Dashboard toolbar (Widgets / Save / Reset) ── */
.dashboard-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.dashboard-toolbar-spacer {
    flex: 1;
}

.dashboard-widget-menu-anchor {
    position: relative;
}

.dashboard-widget-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1002;
    min-width: 260px;
    max-height: 340px;
    overflow: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.dashboard-widget-menu-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #607d8b;
    padding: 4px 6px;
    border-bottom: 1px solid #eceff1;
    margin-bottom: 4px;
}

.dashboard-widget-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.dashboard-widget-menu-item:hover {
    background-color: #f2f6fb;
}

.dashboard-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: transparent;
}

.k-tilelayout-item .k-card {
    height: 100%;
}

.k-tilelayout-item .k-card-body {
    overflow: auto;
    min-height: 0;
    flex: 1;
}

/* A dashboard widget whose content is a grid: fill the tile and let the grid scroll itself, so its
   header and filter rows stay put. Pair with Height="100%" on the TelerikGrid — without that the grid
   sizes to its rows, overflows, and the tile's own overflow:auto scrolls the headers out of view.
   min-height:0 is required because .k-card-body is a flex container and a flex item otherwise refuses
   to shrink below its content. */
.dashboard-grid-fill {
    height: 100%;
    min-height: 0;
}

.k-tilelayout-item.dashboard-tile-expanded {
    grid-row: span 5 !important;
    grid-column: span 2 !important;
}

/* ── Product Finder ── */
.product-finder-root {
    height: calc(100vh - 100px);
}

.pf-side-panel {
    height: 100%;
    padding: 8px 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pf-section-head {
    font-size: 0.85rem;
    color: #1565c0;
    border-bottom: 2px solid #1565c0;
    margin: 0 0 10px;
    padding-bottom: 2px;
    flex-shrink: 0;
}

.pf-filters-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
}

.pf-filter-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-filter-label {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
}

.pf-filter-input .k-floating-label-container,
.pf-filter-input .k-textbox,
.pf-filter-input .k-numerictextbox,
.pf-filter-input .k-dropdownlist {
    max-width: 100%;
    width: 100%;
}

.pf-results-panel {
    height: 100%;
    overflow: hidden;
}

.pf-product-thumb {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.pf-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #9e9e9e;
    font-size: 0.72rem;
}

.pf-detail-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.82rem;
}

.pf-detail-table tr {
    border-bottom: 1px solid #f0f0f0;
}

.pf-detail-label {
    color: #757575;
    font-weight: 500;
    padding: 3px 8px 3px 0;
    white-space: nowrap;
    vertical-align: top;
    width: 85px;
}

.pf-detail-desc {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-carousel-loading {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 8px;
}

.pf-no-pictures {
    color: #9e9e9e;
    font-size: 0.78rem;
    font-style: italic;
    padding: 8px;
}

.pf-id-link {
    color: #1565c0;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}

.pf-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Override the 25ch cap inside the NAICS code editor form */
.naics-editor-form .k-floating-label-container,
.naics-editor-form .k-textbox,
.naics-editor-form .k-textarea {
    max-width: 100%;
}

/* Override the 25ch cap inside the SIC code editor form */
.sic-editor-form .k-floating-label-container,
.sic-editor-form .k-textbox,
.sic-editor-form .k-textarea,
.sic-editor-form .k-numerictextbox {
    max-width: 100%;
}

/* Override the 25ch cap inside the tax rate source editor form */
.trs-editor-form .k-floating-label-container,
.trs-editor-form .k-textbox,
.trs-editor-form .k-textarea {
    max-width: 100%;
}

/* Override the 25ch cap inside the email sender blocklist editor form */
/* The blocklist General tab's two 1fr columns take every pixel the editor is not using, and the
   rule below lifts the 25ch input cap inside them, so a 320-character Pattern box and a 500-character
   Reason box stretched the full width of a wide monitor. 820px leaves each column near 400px — long
   enough for an email pattern, short enough to read. */
.esb-general-fields {
    max-width: 820px;
}

.esb-editor-form .k-floating-label-container,
.esb-editor-form .k-textbox,
.esb-editor-form .k-textarea,
.esb-editor-form .k-dropdownlist,
.esb-editor-form .k-combobox {
    max-width: 100%;
    width: 100%;
}

/* Public messaging opt-in / test console — override the global 25ch input cap. */
.msg-public-form .k-floating-label-container,
.msg-public-form .k-textbox,
.msg-public-form .k-textarea {
    max-width: 100%;
    width: 100%;
}

/* Messaging phone number + text response template editors — override the global 25ch input cap. */
/* Presence Type editor — override the global 25ch input cap so the controls fill their grid cells,
   then cap the layout itself. Three 1fr columns across a wide monitor would otherwise stretch a
   50-character Name box to several hundred pixels more than it can ever hold. */
.presence-editor-form .k-floating-label-container,
.presence-editor-form .k-textbox,
.presence-editor-form .k-textarea,
.presence-editor-form .k-numerictextbox {
    max-width: 100%;
    width: 100%;
}

.presence-general-fields {
    max-width: 1000px;
}

/* Width cap for the In-App Notification Template General tab only. Its own class rather than a
   change to .msg-editor-form below, which the Messaging Phone Number editor shares. 820px leaves
   each 1fr column near 400px - enough for a notification Title and a few lines of Body Text. */
.notif-general-fields {
    max-width: 820px;
}

.msg-editor-form .k-floating-label-container,
.msg-editor-form .k-textbox,
.msg-editor-form .k-textarea,
.msg-editor-form .k-dropdownlist,
.msg-editor-form .k-combobox,
.msg-editor-form .k-numerictextbox {
    max-width: 100%;
    width: 100%;
}

/* Do Not Call editor + opt-in/void dialogs — override the global 25ch input cap so fields fill
   their grid cells. Inline style= on Telerik components does not work for this. */
.dnc-editor-form .k-floating-label-container,
.dnc-editor-form .k-textbox,
.dnc-editor-form .k-textarea,
.dnc-editor-form .k-dropdownlist,
.dnc-editor-form .k-combobox,
.dnc-editor-form .k-datetimepicker,
.dnc-editor-form .k-datepicker,
.dnc-optin-form .k-floating-label-container,
.dnc-optin-form .k-textbox,
.dnc-optin-form .k-textarea,
.dnc-optin-form .k-dropdownlist,
.dnc-optin-form .k-combobox,
.dnc-optin-form .k-datetimepicker,
.dnc-optin-form .k-datepicker {
    max-width: 100%;
    width: 100%;
}

/* Override the 25ch cap inside the order editor and its dialogs. */
.order-editor-form .k-floating-label-container,
.order-editor-form .k-textbox,
.order-editor-form .k-numerictextbox,
.order-editor-form .k-datepicker,
.order-editor-form .k-dropdownlist,
.order-editor-form .k-combobox,
.order-editor-form .k-textarea,
.order-dialog-form .k-floating-label-container,
.order-dialog-form .k-textbox,
.order-dialog-form .k-numerictextbox,
.order-dialog-form .k-datepicker,
.order-dialog-form .k-dropdownlist,
.order-dialog-form .k-combobox,
.order-dialog-form .k-textarea {
    max-width: 100%;
}

/* Search screens: the page itself never scrolls. Headings, filter bars and alerts keep
   their natural height, the grid takes whatever is left, and scrolling happens inside the
   grid so its column headers stay on screen no matter how far down the user is.
   96px = the 64px AppBar + the MudContainer's mt-4/mb-4. Pair with Height="100%" on the
   TelerikGrid, or the grid auto-sizes to its rows and overflows the wrapper instead. */
.page-fill-viewport {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 96px);
}

/* Every block other than the grid keeps its own height rather than being squeezed. */
.page-fill-viewport > * {
    flex-shrink: 0;
}

/* min-height:0 is load-bearing: a flex item defaults to min-height:auto and so refuses to
   shrink below its content, which puts the scrollbar back on the page. */
.page-fill-viewport > .grid-fill {
    flex: 1;
    min-height: 0;
}

/* One line per row. Telerik wraps long cell text, so a single outsized value drags the whole
   row's height with it — the Orion case notes run to 4,000 characters, which makes one row
   taller than the viewport and pushes every other row off screen. Cells clip with an ellipsis
   instead; the full value is revealed on hover by the .nowrap-grid handler in appInterop.js,
   and the column stays resizable for anyone who would rather widen it.

   The detail cell is excluded: it holds a nested grid, not text, and clipping it would cut the
   child rows off. Cells *inside* that nested grid still truncate, which is what we want. */
.nowrap-grid .k-table-td:not(.k-detail-cell),
.nowrap-grid .k-grid td:not(.k-detail-cell) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Headers too, or a narrow column wraps its title over two or three lines and the header row grows
   taller than the data rows it labels — the same vertical creep the cell rule above prevents. With
   every column given an explicit width, the grid scrolls horizontally instead. */
.nowrap-grid .k-table-th,
.nowrap-grid .k-grid th {
    white-space: nowrap;
}

/* Hide the expand toggle on rows that have no detail rows to show. A grid with a DetailTemplate
   renders the toggle on every row regardless, so without this a "+" invites the user to open rows
   that are empty. Paired with OnRowRender tagging those rows .no-child-rows.

   visibility, not display: the hierarchy cell keeps its width, so the first real column stays
   aligned with the rows that DO expand. It also makes the toggle unclickable. */
tr.no-child-rows > .k-hierarchy-cell > * {
    visibility: hidden;
}

/* Section label above a nested grid inside a DetailTemplate, so each level of a drilldown says
   what it is holding. Previously repeated inline on every such grid. */
.drilldown-heading {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1565c0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid #1565c0;
    padding-bottom: 2px;
    margin-bottom: 8px;
}

/* ── CtrlPhoneLink: click-to-dial phone numbers ─────────────────────────────────────────────────
   A dialable number looks like a link; a DNC-blocked one deliberately does NOT, so a rep can tell at
   a glance which numbers they may call. The blocked and unknown states are plain spans with
   cursor:default — there is no href to click, and the tooltip explains why. */
/* Underlined, not just coloured. Colour alone reads as emphasis rather than as something clickable,
   and these sit inside grid cells where nothing else is interactive. The DNC-blocked and unknown
   states below deliberately do NOT get this treatment — looking un-clickable is the point there. */
.phone-link,
.email-link,
.record-link {
    color: #1565c0;
    text-decoration: underline;
    white-space: nowrap;
}

.phone-link:hover,
.email-link:hover,
.record-link:hover {
    color: #0d47a1;
}

.phone-link-blocked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #c62828;
    text-decoration: line-through;
    cursor: default;
    white-space: nowrap;
}

.phone-link-blocked .phone-link-icon {
    font-size: 1rem;
}

/* Unknown DNC status: readable but visibly inert, so a failed lookup never masquerades as "clear". */
.phone-link-unknown {
    color: inherit;
    cursor: default;
    border-bottom: 1px dotted #9e9e9e;
    white-space: nowrap;
}

/* Not E.164 — shown exactly as stored, with no dial affordance. */
.phone-link-plain,
.phone-link-empty {
    color: inherit;
    white-space: nowrap;
}

/* The address autocomplete is one full-width line, not a 25ch field.

   app.css caps every Telerik input at max-width: 25ch, which silently overrides Width="100%" on the
   component -- so a wrapper class plus this override is the only thing that works. Setting an inline
   style on the Telerik component does not, and Telerik does not support attribute splatting anyway. */
.address-autocomplete,
.address-autocomplete .k-autocomplete,
.address-autocomplete .k-input,
.address-autocomplete .k-picker {
    max-width: none;
    width: 100%;
}

/* Override the 25ch cap on the notification-preferences address picker, which sits inline beside a
   channel switch and reads as broken at 25ch. */
.my-notification-address {
    min-width: 260px;
}

.my-notification-address .k-dropdownlist,
.my-notification-address .k-floating-label-container {
    max-width: 100%;
}

/* Worker Task Schedules: a schedule that has never run. Muted rather than a chip, so an empty
   Last Result reads as "no data yet" and not as an outcome. */
.worker-last-result-never {
    color: var(--mud-palette-text-disabled, #9e9e9e);
    font-style: italic;
}

/* An always-declared but empty <GridToolBarTemplate>. Telerik still renders the toolbar
   container, which leaves a blank strip above the header row. GridToolBarTemplate cannot be
   wrapped in an @if (TelerikGrid rejects anything but its known child components, RZ9996), so
   grids that share one definition between a search screen and a picker gate the *content* and
   hide the empty container here. Used by UsersGrid in the CtrlUserSelector modal. */
.hide-grid-toolbar .k-grid-toolbar {
    display: none;
}

/* Knowledge article editor. app.css caps every Telerik input at 25ch globally, which silently
   overrides width:100% -- so a Title box, a Summary textarea, an External URL and the rich-text
   editor all render as a 25-character stub unless the cap is lifted for this form. Same wrapper
   trick as .doc-editor-form: a class on the parent, an override here, never an inline style on the
   Telerik component (which the cap wins against anyway). */
.knowledge-article-form .knowledge-wide-field .k-textbox,
.knowledge-article-form .knowledge-wide-field .k-input,
.knowledge-article-form .knowledge-wide-field .k-textarea,
.knowledge-article-form .knowledge-wide-field .k-editor,
.knowledge-article-form .knowledge-wide-field .k-dropdownlist,
.knowledge-article-form .knowledge-wide-field .k-floating-label-container,
.knowledge-article-form .knowledge-wide-field .mud-select {
    max-width: 100%;
    width: 100%;
}

/* The body editor needs real height; the global input rules do not set one. */
.knowledge-article-form .knowledge-wide-field .k-editor {
    min-height: 420px;
}

/* Add User dialog. Overrides the global 25ch cap so the two layout columns actually fill the
   dialog, and gives the inline required-field messages one definition instead of repeating the
   same inline style on eight fields. */
.user-add-form .k-floating-label-container,
.user-add-form .k-textbox,
.user-add-form .k-textarea,
.user-add-form .k-datepicker,
.user-add-form .k-dropdownlist,
.user-add-form .k-combobox {
    max-width: 100%;
}

.user-add-form-error {
    font-size: 0.75rem;
    color: red;
    margin-top: 2px;
}

/* ── CtrlSectionPanel ──
   Every section heading on every editor is this control, so the card chrome lives here rather than
   on 243 call sites. The panel wraps the heading AND its fields in one tinted, rounded surface, so
   two sections stacked on a tab read as two things instead of one long run of inputs separated by a
   rule -- the same treatment as the search pill on the app bar.

   The tint is deliberately weak. These panels stack three and four deep on a tab and sit behind
   white Telerik inputs; anything stronger than a wash turns an editor into stripes and costs the
   inputs their contrast. skyline-theme.css restates all three colours in token terms so the panel
   follows the theme rather than pinning MudBlazor blue underneath it.

   Collapsing removes the body entirely, so .section-panel-collapsed drops the heading's bottom
   margin -- otherwise a collapsed panel carries 16px of empty tinted space under its title. */
.section-panel {
    background: #f2f7fc;
    border: 1px solid #d6e4f2;
    border-radius: 8px;
    padding: 12px 16px;
}

/* Gap between two panels, and ONLY between two panels. Most editors already separate their sections
   with a <div style="margin-top:16px"> wrapper around each one, which puts the panels in different
   parents; a margin-bottom here would stack on top of that and double every gap on those pages. The
   sibling rule fires exactly where the wrapper is absent, and never adds a trailing margin under the
   last section. */
.section-panel + .section-panel {
    margin-top: 20px;
}

/* The opt-out, for a section that is already inside its own chrome (a dialog body, a nested card)
   where a second surface just adds a box around a box. Heading only, exactly as it rendered before
   the panel existed. */
.section-panel-plain {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* An opted-out section never had a gap of its own, so the sibling rule must not invent one. */
.section-panel + .section-panel-plain {
    margin-top: 0;
}

.section-panel-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1565c0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid #0d47a1;
    padding-bottom: 4px;
    margin-bottom: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
}

.section-panel-collapsed .section-panel-header {
    margin-bottom: 0;
    /* Nothing follows the rule when the body is gone, so the underline reads as a stray line under
       the title. Keep the colour, lose the weight. */
    border-bottom-width: 1px;
}

/* CtrlOwnerCalendarTab: the scheduler's TOOLBAR -- the top bar holding the date navigation and the
   view buttons -- takes the same light blue as .section-panel, so a calendar sitting in a sectioned
   editor reads as part of it rather than as a plain white widget dropped into the page.

   The toolbar, NOT the day-of-week heading row below it (.k-scheduler-head / .k-scheduler-header):
   those cells stay on Telerik's own surface colour, so the grid still reads as a grid.

   Telerik leaves .k-toolbar transparent (background:none) and lets the scheduler surface show
   through. app.css is linked BEFORE the Telerik theme, so this has to win on specificity rather
   than order -- the wrapper class puts it one class ahead. That wrapper also keeps the tint off the
   Sales Hub and My Schedule schedulers, which are not section-panel content. */
.ctrl-owner-calendar .k-scheduler-toolbar {
    background-color: #f2f7fc;
}

/* A tab whose whole body is one section panel wrapping one grid, in an editor that bounds its own
   height (the Team editor's .entity-editor-page layout, where the tab pane scrolls rather than the
   page). The panel has to become the growing flex item and pass the height through to the grid, or
   the grid's Height="100%" has no definite container to resolve against and collapses.

   Only for that bounded case. A grid in an unbounded tab wants no height at all -- it grows to its
   natural size and the page scrolls, which is the normal preference. */
.tab-fill-panel {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.tab-fill-panel > .section-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The heading keeps its natural height; everything below it shares what is left. min-height:0 on
   the children is what lets the grid shrink and scroll internally instead of overflowing. */
.tab-fill-panel > .section-panel > .section-panel-header {
    flex-shrink: 0;
}

.tab-fill-panel > .section-panel > *:not(.section-panel-header) {
    min-height: 0;
}

/* Collapsed, the panel is a heading and nothing else -- growing it to fill the tab would leave a
   tall empty tinted box under the title. */
.tab-fill-panel > .section-panel.section-panel-collapsed {
    flex: 0 0 auto;
}