@import 'https://fonts.googleapis.com/css2?family=Outfit:wght@200..900&display=swap';

/* Reset styles */
*,
::before,
::after {
    box-sizing: border-box;
}

/* Consistent thin scrollbars across the app */
* {
    scrollbar-width: thin;
    scrollbar-color: #555 #1a1a1a;
}

body,
p,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote {
    margin: 0;
}

html {
    height: 100%;
}

body {
    min-height: 100dvh;
    background-color: #050505;
    color: #f5f5f5;
    font-family: Outfit, sans-serif;
}


:root {
    --kendo-font-family: Outfit, sans-serif;
    --kendo-color-primary: #aad373;
    --kendo-color-primary-hover: #aad373;
    --kendo-color-secondary: #4899cd;
    --kendo-color-tertiary: #ff3c00;
    --kendo-color-tertiary-emphasis: #eeeeff;
    /*.k-color-tertiary-emphasis ;*/
    --kendo-color-primary-active: #aad373;
    --kendo-font-size-sm: 14px;
    --kendo-color-base-on-surface: #dddddd;
    --kendo-color-app-surface: #050505;
    --kendo-color-surface: #292929;
    --kendo-color-surface-alt: #1B1A19;
    --kendo-color-on-app-surface: #dddddd;
    --kendo-color-success-on-surface: #dddddd;
    --kendo-color-secondary-subtle: #1B1A19;
    --kendo-color-success: #aad373;
    --kendo-color-on-success: #292929;
    --kendo-color-on-primary: #292929;
    --kendo-color-on-warning: #ffdddd;
    --kendo-color-on-info: #050505;
    --kendo-color-on-tertiary: #eeeeff;
    --kendo-color-primary-on-surface: #aad373;
    --kendo-appbar-text: #dddddd;
    --kendo-input-bg: #050505;
    --kendo-button-bg: #292929;
    --kendo-button-text: #dddddd;
    --kendo-button-hover-bg: #292929;
    --kendo-button-hover-text: #dddddd;
    --kendo-grid-hover-bg: #333333;
    --kendo-grid-hover-text: #dddddd;
    --kendo-overlay-opacity: 0.8;
    --kendo-card-border-radius: 0;
    --kendo-menu-item-active-bg: #292929;
    --kendo-menu-item-hover-bg: #292929;
    --kendo-menu-item-hover-text: #eeeeff;
    --kendo-menu-item-active-text: #eeeeff;

    --animate-duration: 0.5s;
    --anoukfeatures-section-gradient: linear-gradient(to bottom, var(--kendo-color-app-surface) 0, var(--kendo-color-surface) 80%, var(--kendo-color-surface) 100%);
    --anoukfeatures-section-gradient-invert: linear-gradient(to bottom, var(--kendo-color-app-surface) 0, var(--kendo-color-surface) 10%, var(--kendo-color-app-surface) 100%);

    --content-max-width: 1120px;

    /* Tile Row System
       RowHeight and RowSpacing must match TelerikTileLayout component attributes.
       Formula: RowSpan = 1 (title) + number of input rows. Minimum RowSpan = 2.
       Each input slot = row-height + row-gap = 44px. */
    --tile-row-height: 36px;
    --tile-row-gap: 8px;
    /* §5 Color — surface */
    --bg: var(--kendo-color-app-surface, #050505);
    --bg-elev: var(--kendo-color-surface, #292929);
    --bg-muted: var(--kendo-color-surface-alt, #1B1A19);

    --fg: var(--kendo-color-on-app-surface, #dddddd);
    --fg-muted: #b0b0b0;
    --fg-subtle: #8a8a8a;

    /* §5 Color — dividers */
    --rule: rgba(255, 255, 255, 0.08);
    --rule-strong: rgba(255, 255, 255, 0.16);

    /* §5 Color — semantic */
    --success: var(--kendo-color-primary, #aad373);
    --kendo-color-error: #D97757;
    --validation-error: #D97757;
    /* Warning / amber for partial-overtime, parts-pending, and other
       attention-but-not-critical states. Resolves to the Kendo warning
       colour at runtime, with a Bootstrap-style amber as static fallback
       so the IDE / static analyser doesn't flag it. */
    --warning: var(--kendo-color-warning, #D97757);
    /* Error / red for overdue dates and hard-failure states. Same pattern
       as --warning above. */
    --error: var(--kendo-color-error, #D97757);
    /* Destructive — the vivid orange-red used for STOP / delete actions and
       full-overtime / parts-missing states. Resolves to the Kendo tertiary
       colour (already overridden to #ff3c00 in :root above), with a static
       fallback for the IDE. */
    --destructive: var(--kendo-color-tertiary, #ff3c00);
    /* Foreground colour used on top of coloured accent surfaces — e.g. the
       planning-tile ribbon backgrounds (--success / --validation-error /
       --kendo-color-secondary). Resolves to the page bg so it reads as
       near-black on light/saturated accents. */
    --on-accent: var(--bg);

    /* Inventory list stock-level row coding (see InventoryOverview.razor.css).
       Softened tones of the legacy Carrman signals for readability on the dark
       theme — same state->hue mapping, lower saturation / higher lightness. */
    --inv-critical: #E8A15C;                        /* was #FF5F15 orange */
    --inv-low-stock: #E57373;                       /* was pure red */
    --inv-in-order: var(--kendo-color-secondary);   /* #4899cd — was pure blue */
    --inv-low-in-order: #B189D9;                    /* was #a800f0 purple */

    /* Quick-task list row coding (see TasksOverview.razor.css) — a subtle background wash
       rather than the saturated inventory fills above, since these rows carry ordinary text. */
    --task-row-completed-bg: color-mix(in srgb, var(--success) 12%, transparent);
    --task-row-overdue-bg: color-mix(in srgb, var(--error) 12%, transparent);

    /* §4 Spacing (4-px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    /* Shopfloor planning tile — working-time dot palette.
       Partial OT: yellow (traffic-light mid-state, clearly distinct from green and red-orange).
       Total OT:   red-orange = --destructive (#ff3c00). */
    --shopfloor-dot-partial-ot: #FFD700;

    /* §4 Radii */
    --radius-xs: 0;
    --radius-sm: 4px;
    --radius-md: 0;
    --radius-pill: 999px;

    /* §4 Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.45);

    /* §4 Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 200ms;
    --duration-bar: 300ms;
    --duration-pulse: 1.6s;

    /* §2.5 Font weight (matches allowed set 400/500/600) */
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Typography rhythm — project extras */
    --line-height-display: 1.1;
    --line-height-heading: 1.3;
    --letter-spacing-display: -0.02em;
    --letter-spacing-heading: -0.01em;
    --letter-spacing-eyebrow: 0.14em;

    /* Structural sizes — project extras */
    --size-avatar: 24px;
    --size-progress-thin: 8px;
    --size-progress-thick: 10px;

    /* Scrims & overlays — project extras */
    --scrim-progress-bg: rgba(255, 255, 255, 0.06);
    --scrim-modal-border: rgba(255, 255, 255, 0.28);
    --scrim-photo-nav-hover: rgba(0, 0, 0, 0.8);
    --scrim-placeholder: rgba(221, 221, 221, 0.5);
    --scrim-modal-bg: rgba(0, 0, 0, 0.6);

}

.k-bg-dark {
    background-color: #292929;
}

.k-appbar,
.k-appbar.k-appbar-base {
    background-color: #101010;
}

.k-table-th, .k-grid td, .k-grid .k-table-td {
    border-color: #292929;
}

.k-checkbox {
    border-color: #333333;
}

.k-switch-off .k-switch-track {
    border-color: #333333;
}

.k-button-solid:focus, .k-button-solid-k-focus {
    border-color: transparent;
    outline-color: transparent;
    box-shadow: none;
    transform: none;
}

.k-button:focus:not(:active),
.k-button.k-focus:not(:active) {
    transform: none;
    scale: none;
}

.k-button-solid-success:hover {
    background-color: #9ec86f;
    outline-color: #9ec86f;
    border-color: #9ec86f;
}

.k-button-solid-tertiary:hover {
    background-color: #ff4400;
    outline-color: #ff4400;
    border-color: #ff4400;
}

.k-button-solid-active:hover {
    background-color: transparent;
    outline-color: transparent;
    border-color: transparent;
}

.k-switch-off .k-switch-track {
    border-color: #333333;
}

.k-focus {
    outline-color: transparent;
    box-shadow: none;
}

.k-bg-dark {
    background-color: #000000;
}

.grid-no-scroll .k-grid-content {
    overflow-y: auto;
}

.grid-no-scroll .k-grid-header,
.grid-no-scroll .k-grid-footer {
    padding-right: 0; /* version 2.26 and older requires !important here */
}

.grid-no-scroll .k-grid-header-wrap,
.grid-no-scroll .k-grid-footer-wrap {
    border-right-width: 0;
}

h1, h2, h3 {
    font-weight: 200;
}

.k-toolbar.k-toolbar-scrollable {
    margin: 0;
}

.k-overlay-light {
    background-color: #050505;
}

/* Contact editor popup hosts the transparent ContactDetailsView tile layout,
   so the window itself must supply the page background of the active theme
   (light override lives in the Light theme section below). */
.contact-editor-window .k-window-content,
.contact-editor-window .k-window-footer {
    background-color: #050505;
}

/* Assign-Claim-to-Dossier popup: its content is only a short dropdown / message,
   so the fixed min-height would otherwise leave the content box scrollable —
   suppress the scrollbars (nothing here ever overflows the box). The footer
   holds a full-width wrapper so its action buttons right-align at their natural
   width instead of stretching across the footer. */
.informex-attach-window .k-window-content {
    overflow: hidden;
}

.informex-attach-window .k-window-footer > div {
    width: 100%;
}

.small-text {
    font-size: 0.7rem;
}

.text-body-sm {
    font-size: 0.85rem;
}

/* Uppercase metadata eyebrow used above field groups, table headers, and section labels.
   Style guide §2.4 — collapses 5 declarations down to one class so future restyling is local. */
.eyebrow {
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
    color: var(--fg-muted);
}

.scroll-auto-hidden-x {
    overflow: auto;
    overflow-x: hidden;
}

/* The username renders inside Telerik's .k-button-text wrapper, so the child rules
   must carry the theme token themselves — a parent color is outranked by them.
   Hardcoded #dddddd made the name invisible on the light theme (anouk#307). */
.header-user-button,
.header-user-button .k-svg-icon,
.header-user-button .k-icon,
.header-user-button .k-button-text {
    color: var(--fg);
}

.header-picker {
    font-size: 0.85rem;
    height: 26px;
    border: 0;
}

.header-picker > input {
    padding: 0;
    text-align: center;
}

.transparent-background-important {
    background: transparent !important;
}

.k-card-title {
    font-weight: 100;
    font-size: 1.2rem;
}

.k-timepicker.header-picker > input {
    margin-bottom: 4px;
}

.k-datepicker.header-picker > input {
    margin-top: 4px;
}

.k-tilelayout-item-body.k-card-body {
    padding-top: 0.25rem;
    overflow-y: auto;
}

/* ─── Tile Row System (opt-in via .tile-rows class) ────────────
   Add "tile-rows" to TelerikTileLayout Class to enable.
   Set RowHeight="36px" RowSpacing="8px" ColumnSpacing="8px".
   RowSpan = 1 (title) + number of input rows. Minimum = 2.
   Each input slot = row-height + row-gap = 44px.
   ─────────────────────────────────────────────────────────── */

.tile-rows .k-tilelayout-item.k-card {
    border: 0;

}

.tile-rows .k-tilelayout-item-header.k-card-header {
    height: var(--tile-row-height);
    min-height: var(--tile-row-height);
    max-height: var(--tile-row-height);
    padding: 0 8px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.tile-rows .k-tilelayout-item-body.k-card-body {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    overflow-y: auto;
}

.tile-rows .k-tilelayout-item-body .k-d-grid.k-grid-cols-12.k-align-items-center {
    flex: 0 0 calc(var(--tile-row-height) + var(--tile-row-gap));
    margin-bottom: 0;
}

.tile-rows .k-tilelayout-item-body .k-textarea {
    flex: 1;
    display: flex;
    margin-bottom:8px;
}

/* Inner <textarea> must fill the grown wrapper so the editable area
   follows the tile height instead of staying at its Rows default. */
.tile-rows .k-tilelayout-item-body .k-textarea > .k-input-inner {
    flex: 1 1 auto;
    height: 100%;
    resize: none;
}

a, a:visited, a:hover, a:active {
    color: white;
    text-decoration: none;
}

.k-drawer.telerik-blazor {
    border: 0;
}

/* Buttons: 5px corners instead of Fluent's 4px. Only the default (k-rounded-md) shape — the shared
   --kendo-border-radius-md would also round inputs and cards, and round (k-rounded-full), square
   (k-rounded-none) and in-input buttons keep their own shapes. */
.k-button.k-rounded-md {
    border-radius: 5px;
}

.display-inline-block {
    display: inline-block;
}

/* Dropdowns render as .k-picker (not .k-input), so they miss the input border
   treatment above and fall back to Telerik's near-invisible theme border,
   blending into tile/card surfaces. Give pickers the same border as inputs. */
.k-input,
.k-picker {
    border-color: #363636;
}

.k-drawer-item:hover {
    background-color: #292929;
}

.k-drawer-item:hover .k-icon {
    color: #aad373;
}

.k-drawer-item:hover .k-item-text {
    color: #bbbbbb;
}

/* Tab strips: the theme's hover colour for a tab title is near-invisible on the app surface.
   Keep the title readable on hover — same values as Shopfloor planning's detail tabs. */
.k-tabstrip-items .k-link:hover,
.k-tabstrip-items .k-tabstrip-item:hover .k-link {
    color: var(--fg);
    background: transparent;
}

label:not([class*="k-"]) {
    font-weight: 100 !important;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.k-input.k-disabled {
    background-color: #141414;
}

/* Compact action-column buttons used in grid "Actie" cells. We keep the arrow
 * affordance visible because the dropdown menu (Credit note, Print, Reminders…)
 * is the whole point of the button — hiding it leaves users with no way in. */
.action-btn-square,
.action-btn-square.k-button {
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    padding: 0 0 !important;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.action-btn-square .k-svg-icon,
.action-btn-square .k-icon {
    width: 12px;
    height: 12px;
    left: 4px;
}

/* Grid cells: single-line ellipsis clipping. Full value is exposed via the `title`
 * attribute set on each cell by domHelper.js, so hovering shows the complete text. */
.k-grid .k-table-td,
.k-grid td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.k-input.k-disabled .k-input-inner {
    color: #c8c8c8;
    -webkit-text-fill-color: #c8c8c8;
    opacity: 1;
    background-color: #141414;
}

.nowrap-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.nowrap-clip {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#blazor-error-ui {
    color: black;
    background-color: coral;
}

#blazor-error-ui > a {
    color: black;
}

#blazor-error-ui > span {
    color: black;
}

.shopfloorBlockNumber {
    font-size: 0.85rem;
}

.popup-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    /* 10001: above the report-overlay (10000) and the sticky view-title-bar (10),
       below the Telerik animation container (10002) so menus/dropdowns can still
       appear over the backdrop when triggered from within the modal.
       The overlays are also rendered outside ForEachView's animated wrapper to
       avoid being trapped in an opacity-based stacking context. */
    z-index: 10001;
}

.popup-content {
    /* Elevated dark surface (was pure black), lifted off the near-black backdrop (#050505) with a
       hairline border + shadow so the Shopfloor scanner / colour / parallel-task overlays read as a
       distinct card instead of black-on-black. Kept dark-only by design (white text). */
    background: #292929;
    color: white;
    padding: 20px;
    border: 1px solid var(--rule-strong, rgba(255, 255, 255, 0.16));
    border-radius: 5px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width: 500px;
    width: 80%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

/* ── Mobile (phone) helpers ───────────────────────────────────────────────
   Phone-only breakpoint: 640px. Tablets in the ≤900px tablet-compact tier
   (see the "Tablet-compact breakpoint" block near .content-height further
   down this file) get their own layout via IViewportService /
   .k-drawer-mini-rail etc.; anything above 900px (desktop, and tablets in
   landscape) keeps the original layout untouched. Used by the Shopfloor
   screens.

   1. .mobile-fullscreen-window — applied to TelerikWindow via its Class
      parameter (forwarded to the rendered .k-window). Telerik centres the
      window with inline width/height/top/left styles; !important here beats
      those inline values so fixed-pixel dialogs (800×600 etc.) fill the
      phone viewport instead of overflowing it.
   2. .popup-content — the raw black overlay card used by the Shopfloor
      scanner / colour / parallel-task popups. Widen it on phones so its
      content (forms, scanner video) isn't squeezed into 80% of a 360px
      screen. */
@media (max-width: 640px) {
    .k-window.mobile-fullscreen-window {
        width: 100dvw !important;
        height: 100dvh !important;
        max-width: 100dvw !important;
        max-height: 100dvh !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    .popup-content {
        width: 95%;
        max-width: 95%;
        max-height: 92dvh;
        padding: 12px;
    }
}

/* ── Modal guard for the whole compact tier (≤900px) ─────────────────────
   Every dialog in the app is a raw TelerikWindow with a fixed pixel Width
   (400–1700px). Telerik centres via inline width/top/left computed at open
   time, so on a narrow screen the window overflows BOTH edges and the
   Close (X) ends up off-screen — the dialog can't even be dismissed.
   Clamp all windows to the viewport and re-centre with a transform (the
   inline left computed for the desktop width is meaningless once clamped).
   !important beats the inline styles; the opt-in .mobile-fullscreen-window
   rule above still wins at ≤640px through its higher specificity. Trade-off:
   windows can't be dragged horizontally below 900px — irrelevant on touch. */
@media (max-width: 900px) {
    .k-window {
        max-width: 100dvw !important;
        max-height: 100dvh !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* Shopfloor planning tile — phase block (left panel containing block number).
   The colour is applied to the .tile-ribbon element inside the tile via
   descendant selectors here. We live in app.css (not scoped *.razor.css)
   because the parent class `.planning-tile-card` lives on a child
   component's rendered root (ForEachPanel) which does not carry the tile's
   scoped attribute. Class produced by ShopfloorPlanningTile.RibbonClass,
   driven by server-computed Item.CardColorStatus — passed through unchanged
   so the ribbon palette matches the ShopFloorPlanning overview case tiles. */
.planning-tile-card.caseNew {
    --tile-accent: #C2DDA4;
}

.planning-tile-card.case101 {
    --tile-accent: #FCEF73;
}

.planning-tile-card.case102 {
    --tile-accent: #E98D6C;
}

.planning-tile-card.case104 {
    --tile-accent: #A7B4B8;
}

.planning-tile-card.case105 {
    --tile-accent: #DE707A;
}

.planning-tile-card.case106 {
    --tile-accent: #90BA5D;
}

.planning-tile-card.case108 {
    --tile-accent: #AD94CF;
}

.planning-tile-card.case116 {
    --tile-accent: #6BB0E7;
}

.planning-tile-card.caseWaitingOnOrder {
    --tile-accent: #C8CAC1;
}

.planning-tile-card.caseFinished {
    --tile-accent: #EF6EBD;
}

.planning-tile-card.caseVehicleInOtherBodyshop {
    --tile-accent: #C2997C;
}

/* ForEachPanel renders an inner div with k-p-4 (16px padding all sides).
   For planning tiles we want the accent border flush left — zero the padding
   so the tile-container fills the full card interior. */
.planning-tile-card .k-p-4 {
    padding: 0;
}

/* Shopfloor overview tile — zero ForEachPanel's inner padding so the top
   ribbon (same anatomy as the planning tile) runs flush to the card edges;
   the tile body carries its own 8px padding in ShopfloorTile.razor.css. */
.shopfloor-tile-card .k-p-4 {
    padding: 0;
}

/* Shopfloor overview tile — ribbon accent from the parts-delivery status
   (class set by ShopfloorTile.PartsRibbonClass). Green/red are taken from
   the planning-tile pastel palette above so both pages read as one family. */
.shopfloor-tile-card.parts-delivered {
    --tile-accent: #90BA5D;
}

.shopfloor-tile-card.parts-not-delivered {
    --tile-accent: #DE707A;
}

/* Neutral state for a dossier with no purchase orders at all — must not read as
   "delivered" (Carrman parity, anouk#388). */
.shopfloor-tile-card.parts-none {
    --tile-accent: #C8CAC1;
}

/* "You are working on this car" — the selected worker has an open activity on this
   vehicle. Carrman marks the tile with a blue bar; Anouk rings the whole card in blue
   so it stands out from the parts-status ribbon without colliding with it. */
.shopfloor-tile-card.worked-by-me {
    box-shadow: 0 0 0 3px #2F80C4;
}

/* With the ribbon occupying the top edge, the round working-time status
   badge anchors to the bottom-right corner instead (8px inset, mirroring
   the planning tile's courtesy-car badge). */
.shopfloor-tile-card .shopfloor-status-badge {
    top: auto !important;
    bottom: var(--space-2) !important;
    right: var(--space-2) !important;
}

/* Repair-size flag + priority icon cluster — pinned bottom-right, just left of the
   working-time clock badge (client-requested placement). Each icon self-hides for
   Small / Normal, so the cluster is often empty. */
.shopfloor-tile-card .shopfloor-tile-flags {
    position: absolute;
    bottom: var(--space-2);
    right: 34px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 1;
}

/* Shopfloor overview header panel (worker chips + legend row).
   k-p-4 (16px) is too generous here — k-p-2 (8px) matches the standard
   spacing used throughout the rest of the page. */
.shopfloor-header-panel .k-p-4 {
    padding: var(--space-2);
}

/* Planning tile badge position overrides — k-p-2 (8px) inset from every
   edge, matching the body's padding so courtesy car (and any future bottom
   badge) sits equidistant from the tile border.
   Telerik's Inside badge defaults to bottom:0 / right:0 / left:0 which puts
   them flush against the corner — these rules pull them inward.
   !important is required to beat the Kendo badge utility specificity.

   (planning-badge-block was removed once the block number moved into the
   top ribbon; it lived here as a bottom-right anchor.) */

/* Courtesy car: bottom-right, k-p-2 (8px) from each edge so it lines up with
   the icon column's right padding boundary.  Equal inline/block padding
   forces the pill into a circle (same technique as .shopfloor-status-badge). */
.planning-badge-courtesy {
    bottom: var(--space-2) !important;
    right: var(--space-2) !important;
    left: auto !important;
    padding-inline: 3px !important;
    padding-block: 3px !important;
}

/* ShopfloorTile top-right status badges (TotalOvertime / PartialOvertime /
   InTime / Info).  Rounded.Full gives border-radius:9999px but Kendo's Small
   badge has asymmetric horizontal padding which makes it pill-shaped when it
   contains only an icon.  Setting equal inline/block padding with no min-width
   turns the pill into a perfect circle. */
.shopfloor-status-badge {
    padding-inline: 3px !important;
    padding-block: 3px !important;
    min-width: 0 !important;
}

/* Tile cards flow as inline-block — default vertical-align is baseline,
   which makes neighbouring tiles drift up/down when their internal
   baselines differ. Pin to top so every tile in a row sits on the same
   horizontal line. */
.planning-tile-card {
    vertical-align: top;
}

.popup-close-button {
    float: right;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    margin-top: -10px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.grid-container {
    min-height: 400px;
}

.grid-container-sm {
    min-height: 200px;
}

#logoText {
    font-size: 1.8rem;
}

#logoImage {
    width: 25px;
}

.menu-container {
    /*justify-content: center;*/
    /*display: flex;*/
}

/* ── Mobile primary navigation (≤640px) ──────────────────────────────────
   The desktop horizontal TopMenu clips on phones. ≤640px we hide it and show
   the MobileNav hamburger, which opens a vertical slide-over (same menu tree).
   The hamburger is display:none above 640px so the slide-over can only open on
   phones; the panel/backdrop only render in markup while open, but are also
   guarded here so they never paint on desktop. */
.mobile-nav-toggle {
    display: none !important;
}

.mobile-nav-backdrop,
.mobile-nav-panel {
    display: none;
}

@media (max-width: 640px) {
    .top-menu-desktop {
        display: none;
    }

    .mobile-nav-toggle {
        display: inline-flex !important;
        /* Theme foreground (white on dark, near-black on light) — the flat
           Base button's default icon ink is too dim against the dark app bar. */
        color: var(--fg) !important;
    }

    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        /* below modal overlays (10001) but above page chrome */
        z-index: 9998;
    }

    .mobile-nav-panel {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 85vw;
        height: 100dvh;
        background: var(--bg-elev, #1a1a1a);
        border-right: 1px solid var(--rule, rgba(255, 255, 255, 0.16));
        box-shadow: var(--shadow-lg);
        z-index: 9999;
        overflow-y: auto;
        padding: var(--space-2, 8px);
    }
}

/* ── Top-menu overflow (any width, js/headerNav.js) ──────────────────────
   Wider than a phone, the horizontal menu can still be too wide for the window: the app bar
   would then wrap the site selector + user onto a second row. headerNav.js measures that and
   sets html.top-menu-collapsed; the menu then hides behind the same hamburger + slide-over as
   on phones, and the site selector + user stay top right. The hidden menu stays laid out
   (visibility, not display:none) at its one-line width so the script can tell when it fits again. */
html.top-menu-collapsed .top-menu-desktop {
    position: absolute;
    width: max-content;
    visibility: hidden;
    pointer-events: none;
}

html.top-menu-collapsed .mobile-nav-toggle {
    display: inline-flex !important;
    color: var(--fg) !important;
}

html.top-menu-collapsed .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

html.top-menu-collapsed .mobile-nav-panel {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    background: var(--bg-elev, #1a1a1a);
    border-right: 1px solid var(--rule, rgba(255, 255, 255, 0.16));
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    overflow-y: auto;
    padding: var(--space-2, 8px);
}

/* Mobile nav rows — only ever render inside .mobile-nav-panel (phones, or a collapsed top menu), so
   these don't need to be media-query-gated. Native <details> gives free
   expand/collapse; we restyle the disclosure marker into a rotating chevron. */
.mnav-group {
    border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
}

.mnav-summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg, #fff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

/* Hide the default triangle (WebKit + standards) and draw our own chevron. */
.mnav-summary::-webkit-details-marker {
    display: none;
}

.mnav-summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--fg-muted, #aaa);
    border-bottom: 2px solid var(--fg-muted, #aaa);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    margin-left: 8px;
    flex-shrink: 0;
}

.mnav-group[open] > .mnav-summary::after {
    transform: rotate(45deg);
}

.mnav-summary:hover {
    background: var(--bg-muted, rgba(255, 255, 255, 0.06));
}

/* Indented child container; nested groups indent further on each level. */
.mnav-children {
    padding-left: 12px;
}

.mnav-leaf {
    display: block;
    padding: 10px 10px;
    font-size: 0.95rem;
    color: var(--fg, #eee);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
}

.mnav-leaf:hover {
    background: var(--bg-muted, rgba(255, 255, 255, 0.06));
    color: var(--fg, #fff);
}

.competence-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem 1rem;
    width: 100%;
    padding-left: 12rem;
}

.pull-right-8 {
    margin-right: -8px;
}


.pull-up-8 {
    position: relative;
    top: -8px;
}

.pull-up-4 {
    position: relative;
    top: -4px;
}

.pull-up-3 {
    position: relative;
    top: -3px;
}

.pull-up-2 {
    position: relative;
    top: -2px;
}

.pull-up-1 {
    position: relative;
    top: -1px;
}

.content-height {
    height: calc(100vh - 170px);
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* ── Tablet-compact breakpoint (≤900px) ───────────────────────────────────
   Portrait-tablet (~768–834px) responsive foundation for the Dossier/Case
   screens. 900px is the SAME value used by:
     - Anouk.UI/Services/ViewportService.cs (IViewportService.IsCompact, via
       wwwroot/js/viewport.js's matchMedia query) — drives the C#-side
       branches (DossierLayout mini-rail vs full drawer, CaseDetails stacked
       tiles vs TelerikTileLayout);
     - the CSS below, which only needs to handle layout the C# branches
       don't already own (title bar wrapping, drawer/content height).
   Keep both in sync if this value ever changes.
   Landscape/desktop (>900px) is untouched by every rule in this block. */
@media (max-width: 900px) {
    /* The case-details drawer content used a fixed calc(100vh - 170px) so the
       mini-rail/overlay markup (DossierLayout.razor) always had a bounded,
       scrollable pane. A wrapped (taller) title bar below changes how much
       vertical space that calc actually leaves, so let the pane size to
       content instead of clipping it. */
    .content-height {
        height: auto;
        max-height: none;
        overflow-y: visible;
    }
}

/* Bottom scroll fade (.scroll-fade on a scroll container): a 4px gradient from transparent to
   translucent black (dark theme) or to the page background (light theme), pinned to the visible bottom edge while there is more content below, so tiles
   cut off by the edge read as "continues". Its opacity follows the container's own scroll position
   (scroll-driven animation): hidden when nothing overflows (no timeline → the default opacity 0),
   shown while scrolling, gone at the very end. Browsers without scroll timelines simply show none. */
.scroll-fade::after {
    content: "";
    display: block;
    position: sticky;
    bottom: 0;
    height: 4px;
    margin-top: -4px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.25));
    opacity: 0;
    animation: scroll-fade-bottom linear both;
    animation-timeline: scroll(nearest block);
}

/* Light theme: the opposite — fade the cut-off content into the page background instead of a shadow. */
[data-theme="light"] .scroll-fade::after {
    background: linear-gradient(to bottom, transparent, #e5e7eb);
}

@keyframes scroll-fade-bottom {
    from {
        opacity: 1;
    }

    97% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Always show scrollbars when content overflows */
.content-height,
.k-drawer-items {
    scrollbar-width: thin;
    scrollbar-color: #555 #1a1a1a;
}

/* Top-menu dropdowns must sit above page-level loader overlays so the user can still navigate
   to another page if a long-running load gets stuck. Telerik renders TelerikMenu popups inside
   .k-animation-container at the body level; bumping the z-index here keeps them on top of any
   .k-loader-container overlay (which defaults to a lower z-index but visually feels higher
   because it covers the whole content area). */
.k-animation-container {
    z-index: 10002;
}

/* Counterpart to the rule above: pin PAGE-level Telerik loader overlays *below* the top-menu
   popups (10002). A TelerikLoaderContainer (e.g. a page's initial-data spinner) renders its
   own overlay inline in the content; in the current Telerik build that overlay stacks above the
   menu flyout, masking the lower menu items so they can't be clicked while a load is in flight
   (or stuck on error). Scoped to .main-content so loaders inside modals/windows — which Telerik
   renders at body level, outside .main-content — keep covering their own dialog as intended.
   !important overrides Telerik's computed z-index on the loader container. */
.main-content .k-loader-container,
.main-content .k-loader-container-overlay {
    z-index: 9500 !important;
}

/* Dropdown / combobox / picker popups have no visible edge on the dark theme — the stock
   Fluent popup border is computed from the surface colour and disappears against the dark
   tiles. The light theme keeps its own (visible) stock border. */
[data-theme="dark"] .k-popup {
    border: 1px solid var(--rule-strong);
}

/* Menu flyout separators (e.g. the divider above Informex in Operations) draw their line with a border
   coloured by --kendo-color-border, which is invisible against the dark popup surface — force a light
   grey line on the dark theme. */
[data-theme="dark"] .k-menu-popup .k-separator,
[data-theme="dark"] .k-menu-group .k-separator {
    border-color: var(--fg-subtle);
}

.report-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 3rem;
    background: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.report-overlay-text {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
}

/* Report dropdown — grouped offer-template headers and indented per-calculation items.
   The popup renders in TelerikRootComponent (outside any scoped CSS), so these rules live here.
   .k-popup prefix ensures specificity beats Telerik's own .k-item / .k-disabled defaults. */
.k-popup .report-group-header {
    color: var(--kendo-color-subtle);
    font-size: smaller;
    cursor: default;
    opacity: 1;
}

.k-popup .report-group-item {
    padding-left: 24px;
}

.k-stepper .k-step-label .k-step-text {
    max-width: 360px;
}

/* ─── Light theme ──────────────────────────────────────────────────────────── */

:root[data-theme="light"] {
    --kendo-color-app-surface: #f5f5f5;
    --kendo-color-surface: #ffffff;
    --kendo-color-surface-alt: #eeeeee;
    --kendo-color-on-app-surface: #1a1a1a;
    --kendo-color-base-on-surface: #1a1a1a;
    --kendo-color-secondary-subtle: #dceef8;
    --kendo-color-success-on-surface: #1a1a1a;
    --kendo-appbar-text: #1a1a1a;
    --kendo-input-bg: #ffffff;
    --kendo-button-bg: #e8e8e8;
    --kendo-button-text: #1a1a1a;
    --kendo-button-hover-bg: #dcdcdc;
    --kendo-button-hover-text: #1a1a1a;
    --kendo-grid-hover-bg: #eeeeee;
    --kendo-grid-hover-text: #1a1a1a;
    --kendo-menu-item-active-bg: #e8e8e8;
    --kendo-menu-item-hover-bg: #e8e8e8;
    --kendo-menu-item-hover-text: #1a1a1a;
    --kendo-menu-item-active-text: #1a1a1a;

    --fg-muted: #555555;
    --fg-subtle: #888888;
    --rule: rgba(0, 0, 0, 0.08);
    --rule-strong: rgba(0, 0, 0, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);

    --scrim-progress-bg: rgba(0, 0, 0, 0.04);
    --scrim-modal-border: rgba(0, 0, 0, 0.12);
    --scrim-photo-nav-hover: rgba(255, 255, 255, 0.9);
    --scrim-placeholder: rgba(26, 26, 26, 0.3);
}

[data-theme="light"] * {
    scrollbar-color: #aaaaaa #f0f0f0;
}

[data-theme="light"] body {
    background-color: #e5e7eb;
    color: #1a1a1a;
}

[data-theme="light"] .contact-editor-window .k-window-content,
[data-theme="light"] .contact-editor-window .k-window-footer {
    background-color: #e5e7eb;
}

[data-theme="light"] a,
[data-theme="light"] a:visited,
[data-theme="light"] a:hover,
[data-theme="light"] a:active {
    color: #1a1a1a;
}

[data-theme="light"] .k-appbar,
[data-theme="light"] .k-appbar.k-appbar-base,
[data-theme="light"] .k-appbar.k-appbar-dark {
    background-color: #e8e8e8;
    color: #1a1a1a;
}

/* Footer AppBar — pin to header colour regardless of Telerik's theme-colour
   class on the fixed/bottom variant. Mirror the [data-theme] attribute-selector
   pattern used by the light-theme block above: same specificity boost, same win. */
[data-theme="dark"] .anouk-footer-appbar,
[data-theme="dark"] .anouk-footer-appbar.k-appbar-base {
    background-color: #101010 !important;
    color: #dddddd !important;
}

[data-theme="light"] .anouk-footer-appbar,
[data-theme="light"] .anouk-footer-appbar.k-appbar-base {
    background-color: #e8e8e8;
    color: #1a1a1a;
}

/* The footer must never wrap to a second row: the chat panel is anchored above a ONE-row footer
   (bottom: 48px), so a wrapped footer covers the chat composer. Contents give way responsively
   instead (.footer-version hides on narrow screens — Footer.razor.css). */
.anouk-footer-appbar.k-appbar {
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Chat composer follows the selected theme (dark/light), matching the panel. */
[data-theme="dark"] .chat-composer-input {
    background-color: #2b2b2b;
    color: #e8e8e8;
    border: 1px solid #424242;
}

[data-theme="light"] .chat-composer-input {
    background-color: #ffffff;
    color: #1a1a1a;
    border: 1px solid #cccccc;
}

.chat-composer-input::placeholder {
    opacity: .6;
}

[data-theme="light"] #logoImage,
[data-theme="light"] img[src*="/cars/"],
[data-theme="light"] img.car-img {
    filter: invert(1);
}

[data-theme="light"] .k-table-th,
[data-theme="light"] .k-grid td,
[data-theme="light"] .k-grid .k-table-td {
    border-color: #e0e0e0;
}

[data-theme="light"] .k-checkbox {
    border-color: #aaaaaa;
}

[data-theme="light"] .k-switch-off .k-switch-track {
    border-color: #aaaaaa;
}

[data-theme="light"] .k-bg-dark {
    background-color: #e8e8e8;
}

[data-theme="light"] .k-input,
[data-theme="light"] .k-picker {
    border-color: #cccccc;
}

[data-theme="light"] .k-input.k-disabled {
    background-color: #f0f0f0;
}

[data-theme="light"] .k-input.k-disabled .k-input-inner {
    color: #888888;
    -webkit-text-fill-color: #888888;
    background-color: #f0f0f0;
}

[data-theme="light"] .k-drawer,
[data-theme="light"] .k-drawer-wrapper,
[data-theme="light"] .k-drawer-items,
[data-theme="light"] .k-drawer-item,
[data-theme="light"] .k-drawer-item.k-selected,
[data-theme="light"] .k-drawer-item.k-selected:hover {
    background-color: var(--kendo-color-surface-alt, #f0f0f0);
    color: #1a1a1a;
}

/* Light theme edges: the side menus (dossier, configuration, site details) and their compact icon
   rails, every panel (ForEachPanel and the hand-built ones: k-border + k-bg-surface-alt), the
   dossier's date strip, the dossier contact cards and the clearing figure boxes get a visible 1px edge plus the tiles' soft card shadow (Fluent's
   .k-tilelayout .k-card), so they read like the tiles next to them. A real border, not a shadow
   alone: a shadow is cut off where a panel touches its scroll container's edge. Panels already have
   a 1px border (k-border) in a colour that vanishes on the light surface, so only its colour changes.
   The tiles keep their own look. On the dark theme none of this applies. */
[data-theme="light"] .side-panel .k-drawer,
[data-theme="light"] .k-drawer.side-panel,
[data-theme="light"] .k-drawer-mini-rail,
[data-theme="light"] .site-details-rail,
[data-theme="light"] .case-header-tile,
[data-theme="light"] .contact-card {
    border: 1px solid var(--rule-strong, rgba(0, 0, 0, 0.16));
}

[data-theme="light"] .k-border.k-bg-surface-alt,
[data-theme="light"] .clearing-metric {
    border-color: var(--rule-strong, rgba(0, 0, 0, 0.16));
}

[data-theme="light"] .side-panel .k-drawer,
[data-theme="light"] .k-drawer.side-panel,
[data-theme="light"] .k-drawer-mini-rail,
[data-theme="light"] .site-details-rail,
[data-theme="light"] .k-border.k-bg-surface-alt,
[data-theme="light"] .case-header-tile,
[data-theme="light"] .contact-card,
[data-theme="light"] .clearing-metric {
    box-shadow: var(--kendo-card-shadow, var(--kendo-elevation-1, none));
}

/* The tiles' own card shadow is cut off wherever a tile touches the scroll container — the top of
   the first row, the left of the first column, the right of the last one, the bottom of the last row
   (the layouts set k-p*-0). A little room on every side lets each outer tile's edge show. */
[data-theme="light"] .k-tilelayout.tile-rows {
    padding: 2px !important;
}

[data-theme="light"] .view-title-bar {
    background: #e5e7eb !important;
}

[data-theme="light"] .k-drawer-item:hover {
    background-color: #e8e8e8;
}

[data-theme="light"] .k-drawer-item:hover .k-icon {
    color: #7aad40;
}

[data-theme="light"] .k-drawer-item:hover .k-item-text {
    color: #333333;
}

[data-theme="light"] .header-user-button .k-svg-icon,
[data-theme="light"] .header-user-button .k-icon,
[data-theme="light"] .header-user-button .k-button-text {
    color: #1a1a1a;
}

[data-theme="light"] .content-height,
[data-theme="light"] .k-drawer-items {
    scrollbar-color: #aaaaaa #f0f0f0;
}

[data-theme="light"] .report-overlay-content {
    background: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .report-overlay-text {
    color: #1a1a1a;
}

[data-theme="light"] .k-overlay-light {
    background-color: #f5f5f5;
}

[data-theme="light"] .k-loader-container::before,
[data-theme="light"] .k-loader-container-overlay {
    background-color: rgba(245, 245, 245, 0.6);
}

/* ===========================================================================
   Warehouse-management tree row layout
   ---------------------------------------------------------------------------
   Forces each tree row to occupy the full panel width so margin-left:auto on
   the action-button cluster pushes the buttons to the right edge of the page
   (not the right edge of the content next to the row name, which is where
   they ended up by default because Telerik's leaf-text wrapper is inline).
   Lives in app.css (not the page's *.razor.css) because Blazor scoped CSS +
   ::deep didn't reliably override Telerik's own .k-treeview-leaf-text rule.
   =========================================================================== */
.wh-tree .k-treeview-leaf {
    width: 100% !important;
    display: flex !important;
}

.wh-tree .k-treeview-leaf-text {
    display: block !important;
    width: 100% !important;
    flex: 1 1 auto !important;
}

.wh-tree .wh-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--space-2);
}

.wh-tree .wh-row__left {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wh-tree .wh-row__actions {
    margin-left: auto;
    /* Sit in from the right edge rather than flush against it. */
    margin-right: 2rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wh-tree .wh-row__meta {
    color: var(--fg-muted);
    font-size: 0.875rem;
}

/* ===========================================================================
   Locked (frozen) grid columns — opaque background
   ---------------------------------------------------------------------------
   Telerik freezes a column with Locked="true" by adding .k-grid-content-sticky
   to its body cells (and .k-grid-header-sticky to the header). Those cells
   need an OPAQUE background or the horizontally scrolling unlocked rows bleed
   their text through underneath — and on the dark theme the default sticky
   background renders as a light "white block" (the PartsOrdering action column
   after it was locked). Match the grid surface so the locked area continues
   the row; hover switches to the grid hover colour so both sides hover in
   lock-step (no two-tone seam).

   App-wide (not scoped to one grid): the .k-grid-*-sticky classes only exist on
   grids that actually have a Locked column, so this affects only those. Lives
   in app.css (global) rather than a scoped *.razor.css because Blazor's scoped
   CSS attribute doesn't reach the sticky cells Telerik renders (portal/render-
   tree boundary).
   =========================================================================== */
.k-grid .k-grid-content-sticky,
.k-grid .k-grid-row-sticky,
.k-grid tr > .k-grid-content-sticky,
.k-grid tr > .k-grid-row-sticky {
    background-color: var(--kendo-color-surface-alt, #1B1A19) !important;
}

.k-grid tr:hover > .k-grid-content-sticky,
.k-grid tr.k-hover > .k-grid-content-sticky,
.k-grid tr:hover > .k-grid-row-sticky,
.k-grid tr.k-hover > .k-grid-row-sticky {
    background-color: var(--kendo-grid-hover-bg, rgba(255, 255, 255, 0.05)) !important;
}

.k-grid .k-grid-header-sticky {
    background-color: var(--kendo-color-surface-alt, #1B1A19) !important;
}

/* Light theme: --kendo-color-surface-alt and --kendo-grid-hover-bg both flip
   automatically via the :root[data-theme="light"] override earlier in this
   file, so no separate light-theme rule is needed here. */

.height-20 {
    height: 20px;
}
/* Empty Telerik grids: the "no records" cell otherwise collapses to ~0 height and the message is
   clipped between the header and the pager. Give it real height + padding so it's always readable.
   Applies app-wide (every TelerikGrid). */
.k-grid .k-grid-norecords,
.k-grid td.k-grid-norecords,
.k-grid .k-grid-norecords-template,
.k-grid tr.k-grid-norecords > td {
    min-height: 56px;
    height: auto;
    padding: 20px 16px;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    line-height: 1.4;
    overflow: visible;
}

/* Floating "Tile Settings" panel (top-right), shared by the case/contact detail pages and the
   dashboards. Several detail pages also define this in their scoped *.razor.css; this GLOBAL copy
   covers the components that don't (the Relations contact view and the dashboards), so the panel is
   a compact floating card instead of a full-width stretched block. */
.tile-settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.tile-settings-panel {
    position: fixed;
    top: 56px;
    right: 16px;
    z-index: 1000;
    background: var(--kendo-color-surface-alt, #1e1e1e);
    border: 1px solid var(--kendo-color-border, #424242);
    border-radius: 4px;
    padding: 16px;
    min-width: 260px;
    max-width: 360px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* UBench pill: the one look shared by the UBench inbox Type chips and every UBenchStatusBadge variant.
   Content-width (no fixed or stretched width), 22px high, 0.8rem, normal weight, fully rounded, black text.
   Backgrounds come from the element's own colour class. !important on the text colour beats the Kendo
   badge theme rules (e.g. .k-badge-solid.k-badge-error) that set white/dark text. */
.ubench-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    height: 22px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    color: #000 !important;
}