/*
    Radzen → HaiKom mapping.

    HkDynamicForm has to render whatever field types a tenant's XML declares, and for two of them no
    native HTML control will do: a multi-select (a native <select multiple> is a scrolling listbox) and
    a date input that greys out individual days (weekends / holidays). Those two go to Radzen —
    RadzenDropDown and RadzenDatePicker — while every other field stays a Bootstrap control. So a single
    form routinely mixes the two libraries, and the two must be indistinguishable.

    This file is what makes them indistinguishable. It re-points Radzen's own design tokens at HaiKom's:

      1. Palette  — brand and semantic colours, so Radzen follows a tenant's runtime --bs-primary.
      2. Metrics  — control height, type size, padding, radius and states, so a Radzen dropdown and a
                    native <select> are the same box. Radzen's Material defaults are much roomier than
                    this app (2.5rem tall, 1rem text against 0.8125rem), which is what made a filter row
                    ragged: three fields a third taller than their neighbours.
      3. Two rules — the only metrics the theme hardcodes instead of exposing as tokens.

    Nothing here restates a value: the palette reads --bs-*, the metrics read the --hk-control-* tokens
    added to site.css §1, and those same tokens drive .form-control / .form-select. Change a control's
    density in one place and both libraries follow.

    Load order: this file must come AFTER <RadzenTheme> in App.razor. Radzen declares its variables at
    :root, so a :root block here wins on source order alone — no !important needed. RadzenTheme resolves
    to `{theme}-base.css` (ThemeService.Href), the variant that carries no global element rules, so
    nothing here has to undo a reset. color-mix is already relied on by site.css, so it is safe here too.
*/

/* ── 1. Palette ─────────────────────────────────────────────────────────── */

:root {
    /* Primary scale — drives selected / active / focus states, checkboxes, and the selection highlight
       (the theme's --rz-text-selection-background-color already derives from --rz-primary-lighter). */
    --rz-primary: var(--bs-primary);
    --rz-primary-dark: color-mix(in srgb, var(--bs-primary) 85%, black);
    --rz-primary-darker: color-mix(in srgb, var(--bs-primary) 70%, black);
    --rz-primary-light: color-mix(in srgb, var(--bs-primary) 70%, white);
    --rz-primary-lighter: color-mix(in srgb, var(--bs-primary) 12%, transparent);

    /* Material treats "secondary" as an accent and ships it magenta. It reaches this app through the
       selected day in the date picker, the active button in the rich-text toolbar and
       --rz-link-color. The app marks selection with the brand everywhere else
       (--bs-dropdown-link-active-bg), so secondary follows primary rather than introducing a second
       accent. */
    --rz-secondary: var(--bs-primary);
    --rz-secondary-dark: color-mix(in srgb, var(--bs-primary) 85%, black);
    --rz-secondary-darker: color-mix(in srgb, var(--bs-primary) 70%, black);
    --rz-secondary-light: color-mix(in srgb, var(--bs-primary) 70%, white);
    --rz-secondary-lighter: color-mix(in srgb, var(--bs-primary) 12%, transparent);

    /* Text drawn ON the light primary / secondary tint — the SELECTED dropdown item's text
       (--rz-dropdown-item-selected-color) and the rich-text toolbar's active button
       (--rz-editor-button-selected-color). These two are the only variables in the theme that hardcode
       its own palette instead of referencing var(--rz-primary*) / var(--rz-secondary*), so they have to
       be remapped by hand or selected items keep the theme's indigo / magenta text on a HaiKom-tinted
       background. The remaining --rz-on-* values are white and stay correct on HaiKom's colours (as
       Bootstrap's .btn-primary does), so they are deliberately left untouched. */
    --rz-on-primary-lighter: var(--bs-primary);
    --rz-on-secondary-lighter: var(--bs-primary);

    /* Semantic colours track HaiKom's Bootstrap semantic tokens. */
    --rz-success: var(--bs-success);
    --rz-danger: var(--bs-danger);
    --rz-warning: var(--bs-warning);
    --rz-info: var(--bs-info);
}

/* ── 2. Metrics ─────────────────────────────────────────────────────────────
   --rz-input-* drives one shared rule in the theme covering .rz-dropdown,
   .rz-datepicker > .rz-inputtext, .rz-textbox, .rz-textarea and the rest, so remapping the tokens is
   enough — no component needs a rule of its own. (.rz-textarea re-declares height:auto afterwards, so
   multi-line inputs keep growing.) */

:root {
    /* The single-line control box — identical to .form-control / .form-select in site.css §3. */
    --rz-input-height: var(--hk-control-height);
    --rz-input-font-size: var(--hk-control-font-size);
    --rz-input-line-height: var(--hk-control-line-height);
    --rz-input-padding-block: var(--hk-control-padding-y);
    --rz-input-padding-inline: var(--hk-control-padding-x);
    --rz-input-border-radius: var(--bs-border-radius);

    /* Resting, hover, focus and disabled, mirroring .form-control's states. Two Material behaviours are
       deliberately dropped: the border does NOT turn near-black on hover, and focus draws the app's
       ring instead of an inset 1px line. */
    --rz-input-background-color: var(--bs-body-bg);
    --rz-input-value-color: var(--bs-body-color);
    --rz-input-placeholder-color: var(--hk-n-400);
    --rz-input-border: var(--bs-border-width) solid var(--hk-control-border-color);
    --rz-input-border-block-end: var(--rz-input-border);
    --rz-input-hover-border: var(--rz-input-border);
    --rz-input-hover-border-block-end: var(--rz-input-border);
    --rz-input-focus-border: var(--bs-border-width) solid var(--hk-focus-border-color);
    --rz-input-focus-border-block-end: var(--rz-input-focus-border);
    --rz-input-focus-shadow: var(--hk-control-shadow), var(--hk-focus-ring);
    /* The same carve .form-control gets in site.css §3 — without it a Radzen dropdown sits flat beside a
       native <select> on the section body's ground, which is the one difference this file exists to prevent. */
    --rz-input-shadow: var(--hk-control-shadow);
    --rz-input-hover-shadow: var(--hk-control-shadow);
    --rz-input-disabled-background-color: var(--bs-secondary-bg);
    --rz-input-disabled-border: var(--bs-border-width) solid var(--bs-border-color);
    --rz-input-disabled-border-block-end: var(--rz-input-disabled-border);
    /* Disabled too: Bootstrap's :disabled rules set only a background, so a disabled .form-control keeps
       the carve, while material-base defaults this token to none. Left unmapped, a disabled dropdown would
       render flat beside a disabled native <select> in the same form. */
    --rz-input-disabled-shadow: var(--hk-control-shadow);
    --rz-input-disabled-color: var(--hk-n-500);
    --rz-input-disabled-placeholder-color: var(--hk-n-400);

    /* Trigger glyphs default to --rz-icon-size (1.5rem), which does not fit a control this tall. Set
       per control rather than through --rz-icon-size: that token is global and would reach controls this
       rule was never written for. The dropdown's label
       reserves room for its glyph, so that reservation follows the smaller size. */
    --rz-dropdown-trigger-icon-width: 1rem;
    --rz-dropdown-trigger-icon-height: 1rem;
    /* The chevron sits where .form-select paints its own: 0.75rem from the right edge (§6). */
    --rz-dropdown-trigger-icon-margin-inline: 0 0.75rem;
    --rz-dropdown-label-padding-inline: 0 1.375rem;
    --rz-datepicker-trigger-icon-width: 1rem;
    --rz-datepicker-trigger-icon-height: 1rem;

    /* The date picker is the one control that does NOT take --rz-input-line-height: its own rule
       (.rz-datepicker > .rz-inputtext) hard-sets a length, tuned so the line box exactly fills Radzen's
       2.5rem control. Left at 1.5rem the text would be taller than the content box of a control this
       size, so it is expressed the same way here: one line at the app's control type size. */
    --rz-datepicker-line-height: calc(var(--hk-control-line-height) * var(--hk-control-font-size));

    /* The open panel, matched to .dropdown-menu in site.css §3. Material swaps the resting border for a
       2px one while open, which shifts the label by a pixel; the focus border keeps the box still. */
    --rz-dropdown-item-padding: 0.3125rem 1rem;
    --rz-dropdown-items-padding: 0.25rem 0;
    --rz-dropdown-filter-padding: 0.5rem 0 0.375rem;
    --rz-dropdown-panel-shadow: var(--hk-shadow-md);
    --rz-dropdown-open-border: var(--rz-input-focus-border);
    --rz-datepicker-panel-shadow: var(--hk-shadow-md);
    --rz-datepicker-calendar-font-size: var(--hk-control-font-size);

    /* Multi-select chips. A chips control has no fixed height (see §3), so its chips set it: at the
       theme's defaults one chip is ~34px — its 1.25rem remove button plus 0.375rem padding and a
       border — which with the container's own 0.4375rem padding makes the control ~50px, against 31px
       for the plain <select> beside it. Sized down, one chip row lands on the control height exactly. */
    --rz-dropdown-chips-padding-block: 0.125rem;
    --rz-dropdown-chips-padding-inline: 0.1875rem var(--hk-control-padding-x);
    --rz-chip-font-size: 0.75rem;
    --rz-chip-padding-block: 0.0625rem;
    --rz-chip-padding-inline: 0.375rem;
    --rz-chip-gap: 0.25rem;
    --rz-chip-icon-size: 0.875rem;
    --rz-chip-border-radius: var(--bs-border-radius-sm);
    --rz-chip-background-color: var(--hk-n-100);
    --rz-chip-color: var(--bs-body-color);
}

/* ── 3. The two metrics the theme hardcodes ─────────────────────────────────
   Everything above is a token remap. These two are rules because the theme exposes no token for them.
   Both are plain class selectors, so loading after the theme is enough to win. */

/* A multi-select that has a selection carries .rz-dropdown-chips on the SAME element as .rz-dropdown
   (RadzenDropDown.GetComponentCssClass), and that class replaces the fixed height with height:inherit —
   which resolves to auto, so the control sizes to its chips. Left alone it would now be SHORTER than
   its neighbours, having just been given smaller chips. A floor of one control-height keeps it in line
   with the rest of the row, and it still grows when chips wrap to a second line. */
.rz-dropdown-chips {
    min-height: var(--rz-input-height);
    justify-content: center;
}

/* The chip's remove button is hardcoded 1.25rem square with a 1rem glyph, and at that size it — not the
   text — sets the chip's height, leaving the chip taller than the control that holds it. */
.rz-chip .rz-button {
    min-width: 1rem;
    width: 1rem;
    height: 1rem;
}

.rz-chip .rz-button .rzi {
    font-size: 0.875rem;
}

/* ── 6. Dropdown — the same control as <select class="form-select"> ─────────
   HkDropDown (Components/Shared/HkForm/) sets the behaviour defaults — no filter box, no "select all",
   a multi-select's choices comma-separated on one line rather than chips (chips are opt-in; §2–3 size
   them for that case). What a parameter cannot reach is fixed here, for every Radzen dropdown. */

/* The trigger is Material's "arrow_drop_down" glyph from the icon font; .form-select draws a stroked
   chevron as a background image. Same image, same size (16×12), same colour, so the two are one icon. */
.rz-dropdown-trigger .rzi-chevron-down,
.rz-multiselect-trigger .rzi-chevron-down {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rz-dropdown-trigger .rzi-chevron-down::before,
.rz-multiselect-trigger .rzi-chevron-down::before {
    content: "";
    display: block;
    width: 16px;
    height: 12px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat center / 16px 12px;
}

/* The popup fades in and out over --rz-expander-transition (0.2s), which reads as lag next to a native
   select that opens at once. Radzen hides the panel on animationend, so the animation must still run:
   one millisecond is instant to the eye and keeps the close working. Scoped to the panels; the token
   also drives the expander components, which keep their motion. */
.rz-dropdown-panel,
.rz-multiselect-panel {
    --rz-expander-transition: 1ms linear;
    /* The popup opens as wide as its entries, not as wide as the control that opened it.
       Radzen positions the popup from JavaScript and pins it to the trigger — openPopup writes BOTH
       `width` and `min-width` as inline styles from parentRect.width, on every open. For the order's
       customer field the trigger is a dropdown sharing an input-group with four buttons, so it measures
       about 233px and the customer register opened into a sliver with the names wrapped onto two lines.
       Nothing in a stylesheet outranks an inline style, and the items wrapper is `overflow: auto`, so it
       will not push the panel open either — it just scrolls. Hence the one `!important` in this file, a
       deliberate exception to design.md §12 for a third party that styles from script: it is the only
       lever there is. It overrides only `width`; Radzen's inline `min-width` is deliberately left alone
       and keeps working as the floor, so the popup is never narrower than the control it belongs to.
       max-width needs no override — nothing sets it inline — and caps a long name before it leaves the
       screen. (Not `fit-content`: that resolves against available space, and an absolutely positioned
       popup's available space is the whole viewport, which makes the cap the only thing holding it back.) */
    width: max-content !important;
    max-width: min(48rem, calc(100vw - 2rem));
}

/* A dropdown as the control of an input-group (the order's customer field): it takes the room the way
   .form-select does, and Bootstrap's own input-group rules then fuse the corners with the buttons. */
.input-group > .rz-dropdown {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* ── 5. Data grid ───────────────────────────────────────────────────────────
   The interactive tables (order items, attachments) run on the Radzen grid, dressed as the hand-written
   .hk-table family (site.css §8): the same row rhythm, header micro-caps and hairlines, so both kinds sit on
   one page without a seam. Variables only — the grid follows the palette in §1. */
.hk-rz-grid {
    --rz-grid-border: 1px solid var(--bs-border-color);
    --rz-grid-border-radius: var(--bs-border-radius);
    --rz-grid-background-color: var(--hk-surface-raised);
    --rz-grid-cell-font-size: var(--hk-grid-font-size);
    --rz-grid-cell-padding: var(--hk-row-py) var(--hk-row-px);
    --rz-grid-header-background-color: var(--hk-surface-raised);
    --rz-grid-header-color: var(--bs-secondary-color);
    --rz-grid-header-font-size: 0.6875rem;
    --rz-grid-header-font-weight: 650;
    --rz-grid-header-text-transform: uppercase;
    --rz-grid-header-cell-padding: 0.4375rem 0;
    --rz-grid-header-title-padding-inline: var(--hk-row-px);
    --rz-grid-foot-background-color: var(--hk-surface-sunken);
    --rz-grid-foot-cell-color: var(--bs-body-color);
    /* The shared selected-row colour (site.css §1), so the Radzen grid and HkGrid mark a picked row the
       same way — design.md §6 asks for one selection behaviour and one selection look across both. */
    --rz-grid-selected-background-color: var(--hk-row-selected-bg);
    --rz-grid-selected-color: var(--bs-body-color);
    --rz-grid-hover-background-color: var(--bs-tertiary-bg);
    --rz-grid-detail-template-background-color: var(--hk-surface-sunken);
    --rz-grid-detail-template-padding: 0.5rem var(--hk-row-px);
}

/* A grid that has to share a narrow column. Radzen always lays its table out fixed, which gives two bad
   answers on the job page: with column Widths the table's minimum is their sum (measured 584px inside a 351px
   column at a 1024px viewport, three columns already dropped), and with no Widths every column gets the same
   slice — a 34px name box beside a 50px page count. `auto` sizes the columns from what is in them, which is
   what the hand-written tables these replaced did, and what design.md §6's "never sideways scroll" needs.
   Opt-in, because the order-items and jobs grids do want their fixed widths. */
.hk-rz-fit .rz-grid-table {
    table-layout: auto;
}

/* Row kinds set by the grid's RowRender: sub-items read as children, read-only rows do not invite a click. */
.hk-rz-grid tr[data-hk-row~="sub"] .rz-cell-data {
    color: var(--bs-secondary-color);
}

.hk-rz-grid tr[data-hk-row~="static"] {
    cursor: default;
}

/* Command cells: a tight inline row that never wraps. */
.hk-rz-grid .hk-rz-cmd-cell {
    white-space: nowrap;
}

/* The body cell hands its padding to the row of controls inside it. A grid that selects on row click
   (design.md §6) lets only those controls stop the click, so padding left on the cell is a strip where a
   near-miss on a checkbox reads as a click on the row and collapses the selection. Descendant, not child:
   Radzen wraps a column template in its own span.rz-cell-data. Only where the wrapper exists — a command
   cell that puts its buttons straight in the cell still needs the cell's own padding. */
.hk-rz-grid td.hk-rz-cmd-cell:has(.hk-rz-cmd) {
    padding: 0;
}

.hk-rz-cmd {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--rz-grid-cell-padding);
}

.hk-rz-cmd .form-check-input {
    margin: 0;
}

.hk-rz-total,
.hk-rz-total-label {
    font-weight: 650;
}

/* The totals ladder in the grid's footer: total excl. VAT, a line per VAT rate, total incl. VAT. The name
   column and the Total price column each stack the same number of lines in the same order, so the two read
   as rows across even though the footer is one row. The cells align to the top rather than centring, or a
   column with a single value (cost, margin) would float against the middle of a three-line ladder.
   The gap is a row's worth of air rather than a hairline: these read as three separate statements about the
   order, and set solid they looked like one wrapped paragraph. */
.hk-rz-totals {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}

/* A VAT line is a step quieter than the two totals it sits between. */
.hk-rz-totals > span:not(.hk-rz-total):not(.hk-rz-total-label) {
    color: var(--bs-secondary-color);
}

/* The footer carries a stack now, not a single figure: top-aligned so a column with one value (cost,
   margin) sits on the first line of the ladder rather than against its middle, and given room above and
   below so the block does not sit flush against the last row or the card's edge. */
.hk-rz-grid .rz-datatable-footer td,
.hk-rz-grid tfoot td {
    vertical-align: top;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Order item rows: the name block and the thumbnail column beside it. */
.hk-rz-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hk-rz-name-body {
    min-width: 0;
    flex: 1;
}

/* The name wraps in full. It used to clamp at two lines with the rest in the row's detail panel; the panel
   is gone, so a clamp here would simply lose the end of a long article name with nowhere to read it. */
.hk-rz-name-text {
    overflow-wrap: anywhere;
}

/* The thumbnail has its own column, centred in it, so the name column starts at the same place on every
   row whether or not the line has a picture. */
.hk-rz-thumb-cell .rz-cell-data {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The thumbnail is a preview button where a preview exists, plain otherwise. */
.hk-rz-thumb {
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-body-bg);
    line-height: 0;
    flex-shrink: 0;
}

.hk-rz-thumb img {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    border-radius: inherit;
}

.hk-rz-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* ── 7. Multi-select group rows ─────────────────────────────────────────────
   A multi-select that lists its options under group headers (the production page's process filter, as
   the WebForms combo's separator rows) renders each header as a DISABLED option. The theme dims a
   disabled row to a ghost; a header is a band instead: full colour, sunken surface, no checkbox. Global,
   because Radzen mounts the popup outside the page's markup, where scoped CSS cannot reach it. */

.rz-multiselect-items li.rz-state-disabled {
    opacity: 1;
    color: var(--bs-body-color);
    background: var(--hk-surface-sunken);
}

.rz-multiselect-items li.rz-state-disabled .rz-chkbox {
    display: none;
}