/* ============================================================================================
   RADZEN FIX
   Toasts (RadzenNotification) — standard-style filled look on material theme.
   Loaded after RadzenTheme in App.razor. Notifications render on body — not scoped .razor.css.
   ============================================================================================ */

/* text: white on the deep colors (error/success/info), dark only on the light amber — same rule as the buttons */
.rz-notification-error .rz-notification-item {
    --rz-notification-error-background-color: var(--rz-danger);
    --rz-notification-error-color: #fff;
    --rz-notification-error-icon-color: #fff;
}

.rz-notification-warn .rz-notification-item {
    --rz-notification-warning-background-color: var(--rz-warning);
    --rz-notification-warning-color: var(--ink);
    --rz-notification-warning-icon-color: var(--ink);
}

.rz-notification-success .rz-notification-item {
    --rz-notification-success-background-color: var(--rz-success);
    --rz-notification-success-color: #fff;
    --rz-notification-success-icon-color: #fff;
}

/* info = the default everyday toast ("something happened, all good"): quiet white with a green check.
   loud colors stay for success/warning/error; blocking errors get an alert dialog, not a toast. */
.rz-notification-info .rz-notification-item {
    --rz-notification-info-background-color: #f7f7f7;
    --rz-notification-info-color: #000;
    --rz-notification-info-icon-color: var(--rz-success);
    border: 1px solid var(--line-strong);
}

/* swap info's built-in (i) glyph for our FA check (severity icon only — the close X untouched) */
.rz-notification-info .rz-notification-icon::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.rz-notification-item {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* position: bottom (20px), horizontal = theme default (inline-end → left in RTL) */
/* z-index above the custom-bundle floating tray (1040) — toasts are transient and must show on top */
.rz-notification {
    inset-block-start: auto;
    inset-block-end: 20px;
    z-index: 1060;
}

/* ============================================================================================
   Buttons (RadzenButton) — our shape: site font, no uppercase, soft radius, flat.
   Radzen colors stay untouched (semantic palette pending a dedicated color discussion).
   ============================================================================================ */

.rz-button {
    font-family: var(--font);
    font-weight: 600;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 0.5rem;
    box-shadow: none;
    /* slow, soft hover — the same "whoosh" pace as every button in the system */
    transition: background-color var(--btn-whoosh), border-color var(--btn-whoosh), color var(--btn-whoosh), box-shadow var(--btn-whoosh), filter var(--btn-whoosh);
}

/* action-button metrics — real standalone buttons only. micro-buttons living inside composite
   components (numeric spinner, datepicker trigger, grid filter) keep their component's own sizing.
   :where() keeps specificity flat so .rz-button-sm below still wins. */
.rz-button:where(:not(.rz-numeric-button):not(.rz-datepicker-trigger):not(.rz-filter-button)) {
    /* same height as our buttons (--ui-control-h is global since 25/07/2026) */
    height: var(--ui-control-h);
    padding: 0 1rem;
}

/* small radzen buttons = same metrics as our bootstrap .btn-sm */
.rz-button.rz-button-sm {
    height: 1.875rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
}

/* the content actually sits inside .rz-button-box — that's where the icon-text gap lives */
.rz-button .rz-button-box { gap: 0.5rem; }

/* radzen icons: match our icon scale (1rem), and pin the variable-font weight —
   otherwise the icon inherits the button's 600 and gets fat */
.rz-button .rzi {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    font-weight: 400;
}

/* ============================================================================================
   THE HOUSE PALETTE (approved 19/07/2026) — applied globally through radzen's own variables,
   so every component follows: buttons, dialogs, toasts, grid, focus states.
   Single source since 28/07/2026: the --state-* tokens in 10-main. base/dark/darker map to
   base/hover/active; the light/lighter derivatives stay radzen-only literals.
   ============================================================================================ */

:root {
    /* disabled look identical to our bootstrap buttons (theme default is a washed-out 0.2) */
    --rz-button-disabled-opacity: 0.5;

    --rz-primary: var(--state-primary);            /* smoked teal (AA-darkened) */
    --rz-primary-light: #6f8d93;
    --rz-primary-lighter: rgba(78, 115, 122, 0.16);
    --rz-primary-dark: var(--state-primary-hover);
    --rz-primary-darker: var(--state-primary-active);
    --rz-on-primary-lighter: var(--state-primary);

    --rz-secondary: var(--state-secondary);          /* quiet slate */
    --rz-secondary-light: #8b98af;
    --rz-secondary-lighter: rgba(116, 131, 158, 0.16);
    --rz-secondary-dark: var(--state-secondary-hover);
    --rz-secondary-darker: var(--state-secondary-active);
    --rz-on-secondary-lighter: var(--state-secondary);

    --rz-success: var(--state-success);            /* deep mint-sage */
    --rz-success-light: #4fa585;
    --rz-success-lighter: rgba(46, 143, 110, 0.16);
    --rz-success-dark: var(--state-success-hover);
    --rz-success-darker: var(--state-success-active);
    --rz-on-success-lighter: var(--state-success);

    --rz-danger: var(--state-danger);             /* the site's existing danger */
    --rz-danger-light: #de6a6a;
    --rz-danger-lighter: rgba(214, 69, 69, 0.16);
    --rz-danger-dark: var(--state-danger-hover);
    --rz-danger-darker: var(--state-danger-active);
    --rz-on-danger-lighter: var(--state-danger);

    --rz-warning: var(--state-warning);            /* amber from the brand yellow — dark text */
    --rz-warning-light: #f1d573;
    --rz-warning-lighter: rgba(237, 201, 83, 0.16);
    --rz-warning-dark: var(--state-warning-hover);
    --rz-warning-darker: var(--state-warning-active);
    --rz-on-warning: var(--ink);
    --rz-on-warning-light: var(--ink);
    --rz-on-warning-dark: var(--ink);
    --rz-on-warning-darker: var(--ink);
    --rz-on-warning-lighter: #b78d10;

    --rz-info: var(--state-info);               /* bootstrap blue (aligned with .btn-info, 24/07/2026) */
    --rz-info-light: #3d8bfd;
    --rz-info-lighter: rgba(13, 110, 253, 0.16);
    --rz-info-dark: var(--state-info-hover);
    --rz-info-darker: var(--state-info-active);
    --rz-on-info-lighter: var(--state-info);
}

/* button roles the palette vars don't cover:
   base keeps the theme's soft gray (#dadfe2 — the dialogs' cancel) + the house #bbb contour;
   light = the quiet white house button; dark = near-black gray (aligned with .btn-dark, 24/07/2026) */
.rz-button.rz-base { border: 1px solid var(--line-strongX1); }
.rz-button.rz-light {
    background: var(--state-light);
    border: 1px solid var(--line-strong);
    color: var(--state-light-text);
}
.rz-button.rz-light:hover:not(:disabled):not(.rz-state-disabled) {
    background: var(--state-light-hover);
    border-color: var(--state-light-border-hover);
    color: var(--state-light-text);
    filter: none;
}
.rz-button.rz-dark { background: var(--state-dark); color: #fff; }

/* gentle uniform hover for the colored buttons (software theme has no bg hover of its own) */
.rz-button:hover:not(:disabled):not(.rz-state-disabled) { filter: brightness(0.92); }

/* ============================================================================================
   THE focus — radzen mirror (11/08/2026): the same two focus tokens as 10-main. a separate
   block exists only because the radzen theme loads after 10-main and would win otherwise.
   ============================================================================================ */

.rz-textbox:focus,
.rz-textarea:focus,
.rz-inputtext:focus,
.rz-dropdown.rz-state-focused,
.rz-multiselect.rz-state-focused,
.rz-spinner:focus-within {
    outline: none;
    border-color: var(--focus-border);
    box-shadow: var(--focus-glow);
}

/* ============================================================================================
   Dialogs — separator under the gray title bar
   ============================================================================================ */

.rz-dialog-titlebar { border-bottom: 1px solid var(--line-strong); }

/* the mask must dim EVERYTHING (11/08/2026): radzen ships z-index 1000/1001, but our chrome
   sits higher (sidebar 1045, topbar 1050, its dropdown 1055) — so the bars stayed lit and the
   gray looked like it covered only the body. lift the dialog layer above the whole chrome */
:root {
    --rz-dialog-mask-zindex: 1060;
    --rz-dialog-zindex: 1061;
}

/* a centered dialog (alert/confirm/journal) must float ABOVE an open side panel — both ship
   at the same dialog level, so an alert fired from inside a panel was half-hidden behind it.
   the side panel stays at the base level; the modal wrapper rides above it, under the toasts */
.rz-dialog-wrapper { z-index: 1065; }

/* toasts must float above open dialogs too (radzen ships 1002 — below our raised mask,
   so "הועתק"/"הסטטוס עודכן" fired invisibly behind the gray) */
.rz-notification { z-index: 1070; }

/* house anatomy (10/08/2026): dialogs anchor to the top of the viewport — a centered dialog
   jumps vertically whenever its content grows (adding a journal line), a top-anchored one is stable */
.rz-dialog-wrapper {
    align-items: flex-start;
    padding-top: 4rem;
}

/* height cap: the dialog may reach down to one third above the viewport bottom (the bottom
   third stays clear, mirroring the top gap); longer content scrolls inside the body */
.rz-dialog {
    max-height: calc(66.667vh - 4rem);
    display: flex;
    flex-direction: column;
}
.rz-dialog-content { overflow-y: auto; }

/* the three popup widths (InnerWin, 08/10/2026 from psycho) - the service hands radzen the class only, like the
   side window: sm = a short detail / a one-column form, lg = a full detail, a short form, xl = the object journal.
   !important on purpose: radzen writes its own width on the dialog as an INLINE style (600px by default), and an
   inline width beats any class - this is the one place the house wins */
.rz-dialog.popup-sm { width: min(37.5rem, 96vw) !important; }
.rz-dialog.popup-lg { width: min(50rem, 96vw) !important; }
.rz-dialog.popup-xl { width: min(75rem, 96vw) !important; }

/* InnerWin.Pos.Center: a short form sits in the middle of the screen; the top anchor stays the default.
   the height cap follows: an equal gap above and below */
.rz-dialog-wrapper.popup-center {
    align-items: center;
    padding-top: 0;
}
.rz-dialog-wrapper.popup-center .rz-dialog { max-height: calc(100vh - 8rem); }

/* soft entrance (settled 11/08/2026 after the popup lab): radzen ships its own open animation
   (.rz-dialog.rz-open — opacity + scale) — we only slow its pace from the stock 0.1s. the mask
   gets a matching fade of ours (radzen has none). reduced-motion users get none of it, by the
   blanket rule in 10-main — that is correct behavior, not a bug (RDP sessions included). */
:root { --rz-dialog-transition: 0.3s ease-out; }
@keyframes rz-dialog-mask-in {
    from { opacity: 0; }
}
.rz-dialog-mask { animation: rz-dialog-mask-in 0.3s ease-out; }

/* dialog typography follows the page that opened it by PLACEMENT: the RadzenComponents host
   sits inside .mgr-root in the mgr layout (10/08/2026), so mgr dialogs inherit the mgr tokens
   naturally — no per-dialog CSS override here */

/* ============================================================================================
   DatePicker — the house calendar: compact, quiet, single-letter day names,
   month/year dropdowns kept but slimmed. Selected day = primary circle, today = thin outline.
   ============================================================================================ */

:root {
    --rz-datepicker-popup-width: 19rem;
    --rz-datepicker-month-dropdown-width: 6.5rem;
    --rz-datepicker-year-dropdown-width: 5.5rem;
    --rz-datepicker-panel-border: 1px solid var(--line-strong);
    --rz-datepicker-calendar-border: 1px solid #eee;       /* soft row lines, like the reference */
    --rz-datepicker-calendar-header-color: #74839e;        /* quiet day names instead of blue */
    --rz-datepicker-calendar-selected-background-color: var(--state-warning);   /* amber "marker" — dark digit */
    --rz-datepicker-calendar-selected-hover-background-color: var(--state-warning-hover);
    --rz-datepicker-calendar-selected-hover-color: var(--ink);
    --rz-datepicker-calendar-selected-color: var(--ink);
    --rz-datepicker-calendar-today-background-color: transparent;
    --rz-datepicker-calendar-today-color: var(--state-primary);
    --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--state-primary);
}

/* THE HOUSE FIELD SKIN for the radzen inputs — one group for all three kinds (unified 31/07/2026;
   aligned with the bootstrap fields 30/07/2026). Values come from the --field-* tokens in 10-main,
   the same source .app-form and .imgpick__trigger drink from, so a radzen field next to a
   .form-control always matches. Per-component extras (metrics, cursor) stay in their own blocks.
   Must live here, after RadzenTheme, to win over the theme's own input rules. */
.rz-datepicker > .rz-inputtext.form-control,
.rz-autocomplete,
.rz-cell-filter .rz-inputtext,
.rz-cell-filter .rz-textbox {
    background-color: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    transition: border-color var(--ui-fast), background-color var(--ui-fast);
}
/* autocomplete is the wrapper, so it reacts to focus-within instead of :focus */
.rz-datepicker > .rz-inputtext.form-control:hover:not(:disabled),
.rz-autocomplete:hover,
.rz-cell-filter .rz-inputtext:hover,
.rz-cell-filter .rz-textbox:hover {
    background-color: var(--field-bg-hover);
}
.rz-datepicker > .rz-inputtext.form-control:focus,
.rz-datepicker.rz-state-focused > .rz-inputtext.form-control,
.rz-autocomplete:focus-within,
.rz-cell-filter .rz-inputtext:focus,
.rz-cell-filter .rz-textbox:focus {
    outline: none;
    background-color: var(--field-bg);
    border-color: var(--field-border-focus);
    box-shadow: var(--field-glow);
}
.rz-datepicker > .rz-inputtext.form-control.is-invalid {
    border-color: var(--field-border-invalid);
}
.rz-datepicker.rz-state-focused > .rz-inputtext.form-control.is-invalid {
    border-color: var(--focus-border-danger);
    box-shadow: var(--focus-glow-danger);
}

/* datepicker extras: the textbox carries form-control (InputClass in DatePicker.razor),
   so mgr-root field tokens size it — here we neutralize radzen's own input metrics that
   fight it, plus the click-to-open cursor. the theme writes its padding-block/inline and
   font-size on `.rz-datepicker > .rz-inputtext` AFTER 10-main, which made the field taller
   than a text box (09/10/2026) — the --field-* tokens are restated here so both match exactly */
.rz-datepicker > .rz-inputtext.form-control {
    color: var(--ui-deep);
    font-family: var(--font);
    font-size: var(--field-font-size);
    line-height: 1.5;
    height: auto;
    padding-block: var(--field-padding-y);
    padding-inline: var(--field-padding-x);
    cursor: pointer;
}

/* autocomplete is two layers: the WRAPPER carries the box (it wears the shared field skin above);
   the inner input stays naked (transparent, borderless) so there is only one frame */
.rz-autocomplete .rz-inputtext {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--ui-deep);
    font-family: var(--font);
    font-size: 0.875rem;
    line-height: 1.5;
    height: auto;
    padding: 0.25rem 0.5rem;
}
.rz-autocomplete .rz-inputtext:focus { outline: none; }
.rz-autocomplete-panel { border: 1px solid var(--line-strong); }
.rz-autocomplete-panel .rz-state-highlight,
.rz-autocomplete-items li.rz-state-highlight {
    background-color: var(--rz-secondary-light);   /* secondary, light shade */
    color: #fff;
}

/* tablegrid head — redesigned 30/07/2026: the centered title band retired (it duplicated the
   page H1); now a quiet status toolbar — count at the start side, filter state at the end side */
/* radzen shrink-wraps the HeaderTemplate (.rz-custom-header, a flex child of .rz-group-header) —
   stretch it so the bar owns the whole row */
.rz-group-header .rz-custom-header { flex: 1 1 auto; }

/* the toolbar row: no fill (sits on the table's own paper), slim, separated from the column
   headers by the house hard line. :has(.tablegrid-head) keeps grouping drag-panels
   (also .rz-group-header) untouched */
.rz-group-header:has(.tablegrid-head) {
    background-color: transparent;
    border-bottom: 1px solid var(--line-strong);
    padding: 0.375rem 0.75rem;
}

/* tablegrid zebra — the theme's dark stripe is too heavy; whisper-light instead.
   column headers: neutral light gray instead of the theme's blue-gray */
.tablegrid {
    --rz-grid-stripe-background-color: var(--row-stripe);
    --rz-grid-header-background-color: #eee;
    /* cell + column-header text on the house ink instead of the theme's washed slate */
    --rz-grid-cell-color: var(--ink);
    --rz-grid-header-color: var(--ink);
    /* one frame around the whole table (title band + data + pager); rounded 28/07/2026 —
       overflow clips the title band and pager into the rounded corners */
    border: 1px solid var(--line-strong);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}
/* the theme's own inner outline on the data area would double the frame — off */
.tablegrid .rz-data-grid-data { outline: none; }

/* compact mode (11/08/2026, TableGrid Compact="true") — narrow compressed rows for dense
   operational lists: slimmer cell padding via radzen's own token */
.tablegrid--compact { --rz-grid-cell-padding: 0.25rem 0.5rem; }

/* natural HTML sizing: radzen locks the table to table-layout:fixed (for resize/frozen
   features we do not use), which splits width equally and crushes long cells. auto lets the
   browser size columns by content; the floor keeps a horizontal scroll on narrow screens */
.tablegrid .rz-grid-table {
    table-layout: auto;
    min-width: 48rem;
}

/* filter popup lists (checkbox values, operator menus) — hover/highlight in the house
   hover color instead of the theme's dark slate */
.rz-grid-filter .rz-multiselect-item:hover,
.rz-grid-filter .rz-multiselect-item.rz-state-highlight,
.rz-filter-menu-item:hover,
.rz-filter-menu-item.rz-state-highlight {
    background-color: var(--row-hover);
    color: var(--ink);
}

/* the current row (arrived-from-edit or clicked) — warm yellow (hover↔current swap 29/07/2026) */
.tablegrid .rz-grid-table tbody tr[data-current] > td {
    background-color: var(--row-hover);
}

/* tablegrid row hover — the bootstrap-table look (house soft fill), eased in softly
   rather than snapping (same house pace as everything else).
   written ourselves: the theme only hovers .rz-selectable grids (row-selection mode) */
.tablegrid .rz-grid-table tbody tr.rz-data-row:not([data-current]):hover > td {
    background-color: var(--ui-blue-soft);
}
.tablegrid .rz-grid-table tr,
.tablegrid .rz-grid-table td { transition: background-color var(--ui-fast); }

/* tablegrid horizontal lines — the house hard line under the column headers and above the pager */
.tablegrid .rz-grid-table thead th { border-bottom: 1px solid var(--line-strong); }
.tablegrid .rz-pager {
    border-top: 1px solid var(--line-strong);
    background-color: var(--ui-bg-soft);
}
/* pager buttons (arrows + page numbers) — a quiet contour, square (height = width) */
.tablegrid .rz-pager .rz-pager-element {
    border: 1px solid var(--line-strong);
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tablegrid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    /* stable height: the row must not jump when the filter chip appears/disappears */
    min-height: 1.75rem;
}
.tablegrid-head__info {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
}
/* optional small title — only for pages with more than one table; quiet, start-aligned */
.tablegrid-head__title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ui-heading);
}
/* the count — the row's permanent tenant (soft voice retired 31/08/2026 — too faint) */
.tablegrid-head__count {
    font-weight: 400;
    color: var(--ui-heading);
    font-size: 0.8125rem;
}
/* the side slot holds the active-filter chips */
.tablegrid-head__side {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* grid sort indicator — quiet headers: no "three lines" icon on unsorted columns.
   bold title = sortable column (the visual cue); the active sort shows its direction arrow */
.rz-sortable-column-icon.rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) { display: none; }
.rz-data-grid th.rz-sortable-column .rz-column-title { font-weight: 700; }

/* datagrid filter row — the filter textboxes wear the shared house field skin defined above;
   only their compact metrics live here (this radzen version classes them rz-textbox;
   rz-inputtext kept for the other input kinds) */
.rz-cell-filter .rz-inputtext,
.rz-cell-filter .rz-textbox {
    color: var(--ui-deep);
    font-family: var(--font);
    font-size: 0.875rem;
    line-height: 1.5;
    height: auto;
    padding: 0.25rem 0.5rem;
}

/* numeric fields — no spin arrows anywhere: numbers are typed, not clicked */
.rz-numeric-button { display: none; }

/* mgr's `button { font: inherit }` reset must not strip the icon font off radzen icon-buttons
   (radzen puts .rzi directly on <button> — e.g. the grid's filter funnel) */
.mgr-root .rzi {
    font-family: var(--rz-icon-font-family);
    font-size: var(--rz-icon-size);
    font-weight: var(--rz-icon-weight, normal);
    font-style: normal;
}

/* the grid's filter micro-buttons (operator menu, clear, date picker trigger) must not
   inherit the big global rz-button metrics — they stretch to the filter field's own height */
.rz-data-grid .rz-cell-filter .rz-button.rz-button-md,
.rz-data-grid .rz-cell-filter .rz-button {
    height: auto;
    align-self: stretch;
    padding: 0 0.5rem;
}

/* day cells as circles (selected included — it doesn't always carry rz-state-default) */
.rz-calendar-view td .rz-state-default,
.rz-calendar-view td .rz-state-active {
    width: 2.125rem;
    height: 2.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0.125rem auto;
    border-radius: 50%;
}
.rz-calendar-view td .rz-state-active,
.rz-calendar-view td .rz-state-active.rz-calendar-today {
    padding: 0;
    background-color: var(--state-warning);
    color: var(--ink);
}

/* keyboard-focus day: thin gray outline — present but never impersonating hover or selection */
.rz-calendar-view td .rz-state-default.rz-state-focused:not(:hover):not(.rz-state-active) {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--line-strongX1);
    color: inherit;
}

/* single-letter day names (rtl: first column = sunday on the right) */
.rz-calendar-view th { font-size: 0; }
.rz-calendar-view th::before { font-size: 0.8125rem; }
.rz-calendar-view tr th:nth-child(1)::before { content: "א"; }
.rz-calendar-view tr th:nth-child(2)::before { content: "ב"; }
.rz-calendar-view tr th:nth-child(3)::before { content: "ג"; }
.rz-calendar-view tr th:nth-child(4)::before { content: "ד"; }
.rz-calendar-view tr th:nth-child(5)::before { content: "ה"; }
.rz-calendar-view tr th:nth-child(6)::before { content: "ו"; }
.rz-calendar-view tr th:nth-child(7)::before { content: "ש"; }

/* column lines — full soft grid */
.rz-calendar-view td + td { border-inline-start: 1px solid #eee; }

/* compact header, separated like the dialog title bar */
.rz-calendar-header {
    padding: 0.5rem 0.5rem 0.25rem;
    border-bottom: 1px solid var(--line-strong);
}

/* ============================================================================================
   HTML editor (RadzenHtmlEditor) — house field behavior
   ============================================================================================ */

/* focus = the shared field focus (teal border + glow), like every mgr text field */
.rz-html-editor:focus-within {
    border-color: var(--field-border-focus);
    outline: none;
    box-shadow: var(--field-glow);
}
/* the editor signals focus with its blue border — the mgr global focus ring on the
   contenteditable body drew a second, thicker line right under the toolbar */
.mgr-root .rz-html-editor-content:focus-visible {
    outline: none;
}
/* free vertical resize by dragging the bottom corner handle (in addition to the toolbar grow button) */
.rz-html-editor {
    resize: vertical;
    min-height: 10rem;
}

/* ============================================================================================
   Context menu (the dots menu) — house refinement: compact, rounded, soft hover
   ============================================================================================ */
.rz-context-menu {
    --rz-navigation-item-hover-background-color: var(--ui-bg-soft);
    --rz-navigation-item-hover-color: var(--ui-deep);
    /* RTL: hang the panel to the left of the click point (radzen positions it to the right) */
    transform: translateX(-100%);
}
.rz-context-menu .rz-menu {
    min-width: 6rem;
    padding: 0.25rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-md);
}
.rz-context-menu .rz-navigation-item-wrapper {
    border-radius: 0.375rem;
    overflow: hidden;
}
.rz-context-menu .rz-navigation-item-link {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--ui-deep);
}

/* radzen text inputs in mgr — match the house field size (form-select-sm metrics) */
.mgr-root input.rz-inputtext { font-size: var(--field-font-size); }

/* toolbar wears the soft gray of the field-hover hint, separated by the house hard line.
   the tool buttons/dropdowns are white in the theme — flatten them to transparent so the
   header reads as one gray strip (their white row + the gray sliver looked like a double line) */
.rz-html-editor-toolbar {
    background: var(--ui-bg-soft);
    border-bottom: 1px solid var(--line-strong);
}
.rz-html-editor-toolbar .rz-html-editor-button,
.rz-html-editor-toolbar .rz-dropdown {
    background: transparent;
}
.rz-html-editor-toolbar .rz-html-editor-button:hover {
    background: var(--ui-hover);
}
/* group separators — the theme's #e9edf0 vanishes on the gray toolbar; use the house hard line */
.rz-html-editor-separator {
    background-color: var(--line-strong);
}

/* ============================================================
   side dialog geometry (ibook 23/08/2026)
   the software theme gives .rz-dialog-side `position: fixed` and NOTHING else — no insets,
   no width, no height — so a side panel opens with zero size and only its mask shows.
   these rules supply the missing box. positions are PHYSICAL here, matching radzen's own
   resize-bar rules (DialogPosition.Left = the visual left edge, also in an rtl page).
   ============================================================ */
.rz-dialog-side {
    display: flex;
    top: 0;
    bottom: 0;
    height: 100%;
    width: min(46rem, 96vw);
    max-width: 100vw;
    border-radius: 0;
}

/* the three house widths (InnerWin, 08/10/2026 from psycho) - the service hands radzen the class only:
   sm = one field per row, lg = two columns (the default), xl = a document with lines.
   on a phone every panel is a full-screen sheet. */
.rz-dialog-side.side-panel-sm { width: min(28rem, 96vw); }
.rz-dialog-side.side-panel-lg { width: min(48rem, 96vw); }
.rz-dialog-side.side-panel-xl { width: min(90rem, 96vw); }

@media (max-width: 767.98px) {
    .rz-dialog-side,
    .rz-dialog-side.side-panel-sm,
    .rz-dialog-side.side-panel-lg,
    .rz-dialog-side.side-panel-xl {
        width: 100vw;
    }
}

.rz-dialog-side-position-left { left: 0; right: auto; }
.rz-dialog-side-position-right { right: 0; left: auto; }

.rz-dialog-side-position-top,
.rz-dialog-side-position-bottom {
    left: 0;
    right: auto;
    width: 100%;
    height: auto;
    max-height: 90vh;
}

.rz-dialog-side-position-top { top: 0; bottom: auto; }
.rz-dialog-side-position-bottom { bottom: 0; top: auto; }

/* the theme lays a left/right panel out as a ROW, which drops the title into a narrow column
   beside the form. the resize bar is position:absolute anyway, so a column stacks correctly:
   title on top, form below. */
.rz-dialog-side,
.rz-dialog-side-position-left,
.rz-dialog-side-position-right { flex-direction: column; }

.rz-dialog-side > .rz-dialog-side-titlebar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--ui-border);
}

.rz-dialog-side > .rz-dialog-side-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
}

/* the form fills what is left and scrolls inside the panel */
.rz-dialog-side > .rz-dialog-side-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* the dirty dot (08/10/2026 from psycho): while the form inside the window has unsaved edits, the wrapper
   wears .side-panel--dirty (side) or .popup--dirty (popup) and a red dot appears beside the window title.
   the title lives in radzen's titlebar ABOVE our wrapper, so :has() looks up from the dialog to find the flag */
.rz-dialog-side:has(.side-panel--dirty) .rz-dialog-side-title::after,
.rz-dialog:has(.popup--dirty) .rz-dialog-title::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-start: 0.5rem;
    border-radius: 50%;
    background: var(--ui-danger, #dc3545);
    vertical-align: middle;
}

/* ============================================================
   scheduler (the occupancy calendar) — house colours, 23/08/2026.
   radzen exposes both bars as tokens, so this is a mapping and not an override war.
   ============================================================ */
.rz-scheduler {
    /* the month title bar ("אוגוסט 2026") sits on paper white */
    --rz-scheduler-toolbar-background-color: #fff;
    /* the weekday strip is the quiet band that separates the title from the grid */
    --rz-scheduler-header-background-color: #f3f3f3;
}

.rz-view-header .rz-slot-header {
    color: #555;
    font-weight: 700;
}

/* ---- mobile size layer (31/08/2026) — grid rows grow to thumb height, cell text to 16px ---- */
@media (max-width: 767.98px) {
    .tablegrid { --rz-grid-cell-padding: 0.75rem 0.625rem; }
    .tablegrid--compact { --rz-grid-cell-padding: 0.5rem 0.5rem; }
    .tablegrid .rz-grid-table tbody td { font-size: 1rem; }
}