/* =============================================================================
   forms.css — ONE LOOK FOR EVERY FIELD: METRONIC "SOLID"

   Ported wholesale from the Onwann Construction dashboard, which solved this
   exact problem against this exact template pair. Ported rather than rewritten
   because the value of these rules is that every number in them was READ OUT OF
   METRONIC'S OWN BUNDLE — retyping them from memory is how two dashboards built
   from one template end up almost matching.

   Loaded AFTER site.css so it wins over the Radzen grid restyle there, and after
   material-base.css so it wins over Radzen's own Material theme.
   ============================================================================= */

/* =============================================================================
   FORM CONTROLS — ONE LOOK FOR EVERY FIELD: METRONIC "SOLID"

   Three kinds of control had three different looks on the same dialog: plain
   Bootstrap inputs (white, bordered), Radzen inputs (Material underline) and
   Radzen dropdowns (Material again). This section makes all of them the solid
   Metronic field.

   IT IS WRITTEN IN METRONIC'S TOKENS, NOT IN COLOURS COPIED OUT OF THEM. Every
   value comes from .form-control.form-control-solid / .form-select.form-select-
   solid / .select2-container--bootstrap5 .select2-dropdown in style.bundle, and
   is referenced as a variable — Metronic redefines the whole --bs-gray-* scale
   under [data-bs-theme=dark] (gray-100 is #F9F9F9 light, #1B1C22 dark), so ONE
   set of rules serves both themes and cannot drift from the rest of the app.
   There is deliberately NO [data-bs-theme="dark"] section below; needing one
   would mean a colour was hardcoded that should have been a token.

   THE SHARED GEOMETRY, which every field below matches exactly:
     padding .775rem 1rem · font 1.1rem/500 · line-height 1.5 · radius .475rem
     rest: --bs-gray-100      hover / focus / open: --bs-gray-200
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Plain Bootstrap fields: solid by default
   -------------------------------------------------------------------------- */

/* The markup writes `class="form-control"`, which is Metronic's BORDERED input.
   Rather than append `form-control-solid` at a hundred call sites, the solid
   treatment becomes the default here — the two declarations are Metronic's own.
   Fields that deliberately opt out (transparent, flush, or the search box inside
   a dropdown panel) are excluded rather than fought with later. */
.form-control:not(.form-control-transparent):not(.form-control-flush),
.form-select:not(.form-select-transparent) {
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-100);
    color: var(--bs-gray-700);
    transition: color .2s ease, background-color .2s ease;
}

.form-control:not(.form-control-transparent):not(.form-control-flush):focus,
.form-control:not(.form-control-transparent):not(.form-control-flush):active,
.form-select:not(.form-select-transparent):focus,
.form-select:not(.form-select-transparent):active {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-200);
    color: var(--bs-gray-700);
    box-shadow: none;
}

.form-control:not(.form-control-transparent):not(.form-control-flush)::placeholder {
    color: var(--bs-gray-500);
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   2. Radzen fields
   -------------------------------------------------------------------------- */

/*
   TWO THINGS RADZEN DOES THAT HAVE TO BE UNDONE FIRST, both of them the cause of
   a visible defect rather than a matter of taste:

   · `height: var(--rz-input-height)` is set on EVERY input it owns. A fixed
     height beats the padding below, so a Radzen field came out a different
     height from the Metronic field next to it. Height must come from content
     plus padding, the way Bootstrap sizes its own controls — hence
     `height: auto` everywhere, with a min-height matching Metronic's.

   · its :hover and :focus rules re-apply a Material `box-shadow` AND an
     `outline` with a positive `outline-offset` — a ring drawn OUTSIDE the
     control. That is the halo that appeared to float off the field on hover. A
     solid field has no ring: the background step IS the feedback, so shadow and
     outline are cleared in every state, not just at rest.

   AND "THE FIELD" IS A DIFFERENT ELEMENT PER COMPONENT. Painting the wrong one
   gives a box inside a box:
     · TextBox / TextArea — the element IS the input. Paint it.
     · Numeric — .rz-numeric is a WRAPPER around a borderless transparent input
       plus two absolutely positioned spinners. Paint the WRAPPER.
     · DatePicker / DropDown — see §2a below: these two are ONLY ever rendered
       through the AppDatePicker/AppSelect wrapper components, so their rules
       are scoped to the class the wrapper always applies rather than to the
       bare Radzen element.

   Not styled: bare .rz-inputtext. That class is also worn by the search box
   inside a dropdown panel, which is deliberately a bordered field (see §3).
*/

.rz-textbox,
.rz-textarea,
.rz-numeric {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: calc(1.5em + 1.55rem + 2px);   /* line-height + padding + border */
    padding: 0.775rem 1rem !important;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5 !important;
    text-align: start;
    color: var(--bs-gray-700) !important;
    background-color: var(--bs-gray-100) !important;
    background-image: none !important;
    background-clip: padding-box;
    border: 1px solid var(--bs-gray-100) !important;
    border-radius: 0.475rem !important;
    box-shadow: none !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    transition: background-color .2s ease, color .2s ease;
}

.rz-textbox:hover,
.rz-textarea:hover,
.rz-numeric:hover,
.rz-textbox:focus,
.rz-textarea:focus,
.rz-numeric:focus-within {
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-200) !important;
    color: var(--bs-gray-700) !important;

    /* The ring, again: Radzen sets it on hover and focus, not only at rest. */
    box-shadow: none !important;
    outline: 0 !important;
    outline-offset: 0 !important;
}

.rz-textbox::placeholder,
.rz-textarea::placeholder,
.rz-numeric input::placeholder {
    color: var(--bs-gray-500) !important;
    opacity: 1;
    text-align: start;
}

/* Radzen fades a disabled field with opacity, which washes out the background
   too and makes it read as a different kind of control. Metronic recolours. */
.rz-textbox:disabled,
.rz-textarea:disabled,
.rz-numeric.rz-state-disabled {
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-200) !important;
    color: var(--bs-gray-500) !important;
    opacity: 1 !important;
}

/* A textarea grows, so it must not keep the single-line minimum. */
.rz-textarea {
    min-height: calc(1.5em * 3 + 1.55rem + 2px);
    resize: vertical;
}

/* -----------------------------------------------------------------------------
   2a. AppSelect / AppDatePicker — the ONLY styled RadzenDropDown / RadzenDatePicker

   Every select list and date picker in the app renders through the AppSelect /
   AppDatePicker wrapper components (Components/Shared), which always add the
   .app-select / .app-datepicker class alongside Radzen's own. Scoping every
   rule below to that class — instead of the bare .rz-dropdown / .rz-datepicker
   this file used before — means there is exactly one CSS author for these two
   fields: a page that reaches for the raw Radzen component gets Radzen's own
   unstyled look, which is a visible, immediate signal to use the wrapper
   instead of a silent style clash between two rule sets fighting the same
   element.
   -------------------------------------------------------------------------- */

.app-select {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: calc(1.5em + 1.55rem + 2px);
    padding: 0.775rem 1rem !important;
    padding-inline-end: 3rem !important;       /* the gutter the absolute trigger sits in */
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5 !important;
    color: var(--bs-gray-700) !important;
    background-color: var(--bs-gray-100) !important;
    background-image: none !important;
    border: 1px solid var(--bs-gray-100) !important;
    border-radius: 0.475rem !important;
    box-shadow: none !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    transition: background-color .2s ease, color .2s ease;
}

.app-select:hover,
.app-select:focus,
.app-select:focus-within,
.app-select.rz-state-focused,
.app-select[aria-expanded="true"] {
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-200) !important;
    color: var(--bs-gray-700) !important;
    box-shadow: none !important;
    outline: 0 !important;
    outline-offset: 0 !important;
}

.app-select.rz-state-disabled {
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-200) !important;
    color: var(--bs-gray-500) !important;
    opacity: 1 !important;
}

.app-select .rz-dropdown-label {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* THE VALUE STARTS AT THE START. Radzen renders it in a span that also carries
   .rz-inputtext, and an inputtext is centred by the theme — which is why "All"
   and "Select..." sat in the middle of the field. */
.app-select > *,
.app-select .rz-inputtext,
.app-select .rz-placeholder {
    text-align: start !important;
}

.app-select .rz-placeholder {
    color: var(--bs-gray-500) !important;
}

/* Metronic's own chevron, in the grey it uses on .form-select. Radzen's trigger
   is position:absolute pinned to the inline end (not a flex child), and its
   arrow is a Material Icons ligature — so the glyph is hidden and the chevron
   drawn on the trigger itself. */
.app-select .rz-dropdown-trigger {
    justify-content: center;
    width: 3rem;
    background-color: transparent !important;
    border: 0 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%2378829D%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 12px;
    pointer-events: none;                      /* the field itself opens the panel */
}

.app-select .rz-dropdown-trigger .rzi {
    display: none !important;
}

/* Radzen offsets the clear "x" by ITS OWN trigger-width variable, which is no
   longer what the trigger measures — it would land on top of the chevron. */
.app-select .rz-dropdown-clear-icon {
    inset-inline-end: 3rem;
    color: var(--bs-gray-500);
}

.app-select .rz-dropdown-clear-icon:hover {
    color: var(--bs-gray-700);
}

/* ---------- AppDatePicker: the wrapper carries only the layout, the inner
   .rz-inputtext is the visible field ---------- */

.app-datepicker {
    display: block;
    width: 100%;
    height: auto !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.app-datepicker .rz-inputtext {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: calc(1.5em + 1.55rem + 2px);
    padding: 0.775rem 1rem !important;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5 !important;
    text-align: start;
    color: var(--bs-gray-700) !important;
    background-color: var(--bs-gray-100) !important;
    background-image: none !important;
    background-clip: padding-box;
    border: 1px solid var(--bs-gray-100) !important;
    border-radius: 0.475rem !important;
    box-shadow: none !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    transition: background-color .2s ease, color .2s ease;
}

.app-datepicker .rz-inputtext:hover,
.app-datepicker .rz-inputtext:focus {
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-200) !important;
    color: var(--bs-gray-700) !important;
    box-shadow: none !important;
    outline: 0 !important;
    outline-offset: 0 !important;
}

.app-datepicker .rz-inputtext::placeholder {
    color: var(--bs-gray-500) !important;
    opacity: 1;
    text-align: start;
}

.app-datepicker.rz-state-disabled .rz-inputtext {
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-200) !important;
    color: var(--bs-gray-500) !important;
    opacity: 1 !important;
}

.app-datepicker .rz-datepicker-trigger {
    color: var(--bs-gray-500) !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.app-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger {
    color: var(--bs-gray-700) !important;
}

/* ---------- Numeric: the wrapper is the field, so the input inside is bare ---------- */

.rz-numeric {
    position: relative;
    padding-inline-end: 2.5rem !important;     /* the gutter the spinners sit in */
}

.rz-numeric input[type=text],
.rz-numeric input[type=number] {
    width: 100%;
    height: auto !important;
    padding: 0 !important;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: start;
    color: inherit !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.rz-numeric .rz-numeric-button {
    inset-inline-end: 0.75rem;
    color: var(--bs-gray-500) !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.rz-numeric .rz-numeric-button:hover {
    color: var(--bs-gray-700) !important;
    background-color: transparent !important;
}

/* -----------------------------------------------------------------------------
   3. The panel under a dropdown
   -------------------------------------------------------------------------- */

/*
   ONE ELEMENT CLIPS THE CORNERS AND SCROLLS THE LIST — deliberately not split
   across the panel and an inner items-wrapper. A two-element split (the panel
   clipping via overflow:hidden, an inner wrapper scrolling via its own
   max-height) is exactly the shape of bug this replaced: if the two heights
   are a pixel out of step, or the inner wrapper's max-height fails to resolve
   (e.g. because Radzen changed how it nests the wrapper), the panel's own
   overflow:hidden wins and the scrollbar silently never appears, with no
   visual sign that anything is wrong. Doing both jobs on the SAME element
   removes that failure mode entirely: whatever the list's real height is,
   this box is shorter, so a scrollbar is the only possible outcome.

   Radzen puts an inline `max-height: 200px` on this element and computes its
   width content-box; both are overridden here — the max-height because 200px
   shows barely three rows, and box-sizing because a content-box width plus
   padding is what let a highlighted row's background paint past the rounded
   corner.
*/
.rz-dropdown-panel,
.rz-multiselect-panel {
    box-sizing: border-box !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;               /* the page does not scroll when the list ends */
    padding: 0.5rem 0 !important;
    background-color: var(--bs-dropdown-bg) !important;
    border: 0 !important;
    border-radius: 0.475rem !important;
    box-shadow: var(--bs-dropdown-box-shadow) !important;
}

.rz-dropdown-items-wrapper,
.rz-multiselect-items-wrapper {
    /* The panel itself is now the scrolling element (above); the wrapper just
       needs to get out of the way and let it. */
    max-height: none !important;
    overflow: visible !important;
    background-color: transparent !important;
}

.rz-dropdown-item,
.rz-multiselect-item {
    padding: 0.75rem 2.25rem !important;
    margin: 0 !important;
    font-size: 1.05rem;
    font-weight: 500;
    text-align: start;
    color: var(--bs-gray-700) !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    transition: color .2s ease;
}

/* Hover and keyboard highlight are ONE state visually, because to the person
   using it they are one thing: "the row I am about to pick". */
.rz-dropdown-item:hover,
.rz-multiselect-item:hover,
.rz-dropdown-item.rz-state-highlight,
.rz-multiselect-item.rz-state-highlight,
.rz-dropdown-item.rz-state-highlight:hover,
.rz-multiselect-item.rz-state-highlight:hover {
    background-color: var(--bs-component-hover-bg) !important;
    color: var(--bs-component-hover-color) !important;
}

.rz-dropdown-item.rz-state-disabled,
.rz-multiselect-item.rz-state-disabled {
    color: var(--bs-gray-400) !important;
    opacity: 1 !important;
}

/*
   THE SEARCH BOX IS ONE SOLID CONTROL, ICON INCLUDED.

   Radzen builds this row as `display:flex; flex-direction:row-reverse` holding a
   borderless input and an .rzi-search glyph. The first attempt here styled the
   INPUT as the field and pulled the icon over it with a negative margin — which
   is why the magnifier ended up sitting outside the box in the screenshot: a
   negative inline-start margin on a row-reverse child moves it AWAY from the
   input, not over it.

   So the CONTAINER becomes the field instead: it takes the solid background, the
   padding and the radius, and the icon and the input are simply its two children
   — the icon inside the box by construction, with nothing to position. The outer
   inset that used to be the container's padding becomes its margin, so the field
   still sits in from the panel's edge.

   It is solid like every other control (that was the request), and it is the one
   place a solid fill needs a step of contrast against the panel it sits on:
   --bs-gray-200 on --bs-dropdown-bg, one shade up from the fields on the page.
*/
.rz-dropdown-filter-container,
.rz-multiselect-filter-container {
    box-sizing: border-box;

    /* The panel (§3 above) is now the single scrolling element, carrying the
       search box and the item list together — so without this, the search box
       would scroll out of view along with the list it filters. Sticky pins it
       to the top of that same scroll container instead, the way a search box
       above a long list is expected to behave. */
    position: sticky;
    top: 0;
    z-index: 1;

    padding: 0.55rem 0.75rem !important;
    margin: 0 1.25rem 0.75rem !important;
    color: var(--bs-gray-700);
    background-color: var(--bs-gray-200) !important;
    border: 1px solid var(--bs-gray-200) !important;
    border-bottom: 1px solid var(--bs-gray-200) !important;
    border-radius: 0.425rem !important;
    box-shadow: none !important;
}

.rz-dropdown-filter-container:focus-within,
.rz-multiselect-filter-container:focus-within {
    background-color: var(--bs-gray-300) !important;
    border-color: var(--bs-gray-300) !important;
}

.rz-dropdown-filter-container .rz-inputtext,
.rz-multiselect-filter-container .rz-inputtext {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.95rem;
    line-height: 1.5 !important;
    text-align: start !important;
    color: var(--bs-gray-700) !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.rz-dropdown-filter-container .rz-inputtext::placeholder,
.rz-multiselect-filter-container .rz-inputtext::placeholder {
    color: var(--bs-gray-500) !important;
    opacity: 1;
}

/* A child of the box now, not something floated over it: it only needs a gap
   between itself and the text. Radzen's row-reverse already puts it at the
   visual start in both directions. */
.rz-dropdown-filter-container .rzi-search,
.rz-multiselect-filter-container .rzi-search {
    flex: 0 0 auto;
    margin: 0 !important;
    margin-inline-end: 0.5rem !important;
    font-size: 1.1rem;
    color: var(--bs-gray-500);
}

/* -----------------------------------------------------------------------------
   4. Switches — Metronic's "default switch"
   -------------------------------------------------------------------------- */

/*
   The markup is `form-check form-switch`, which is Bootstrap's switch: 1.75rem
   tall, a 1px border, a transparent track and a translucent black knob.
   Metronic's default switch is the same element with `form-check-custom
   form-check-solid` added — 2.25rem tall, no border, a solid grey track and a
   WHITE knob. Those declarations are lifted here so the twenty-one call sites
   need no edit. The knob is white in both themes by design: it is the moving
   part, and it has to read against the grey track and against the blue alike.
*/
.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23ffffff%27/%3e%3c/svg%3e");
    height: 2.25rem;
    border: 0;
}

.form-switch .form-check-input:not(:checked) {
    background-color: var(--bs-gray-200);
}

/* -----------------------------------------------------------------------------
   5. Radzen's OWN design tokens, remapped onto Metronic's
   -------------------------------------------------------------------------- */

/*
   Everything above restyles elements one selector at a time. That works for the
   parts of a control that are visible on the page, and it does NOT work for the
   surfaces Radzen renders on its own — the calendar popup being the one that
   showed it: a white sheet in the middle of a dark screen, because its colour
   comes from --rz-datepicker-panel-background-color, a Radzen variable that
   knows nothing about data-bs-theme.

   Chasing those with more `!important` selectors would be an endless list, and
   every Radzen component added later would arrive un-themed again. Radzen's
   whole design system is variable-driven, so the fix is to point its variables
   at Metronic's: one mapping, applied to every Radzen surface that exists now or
   later, and — because the --bs-* values are themselves theme-scoped — correct
   in light and dark with no second copy.
*/

:root {
    /* Surfaces and text */
    --rz-text-color: var(--bs-gray-800);
    --rz-base-background-color: var(--bs-dropdown-bg);
    --rz-panel-background-color: var(--bs-dropdown-bg);
    --rz-border-radius: 0.475rem;

    /* Inputs (Radzen still reads these for components not restyled above) */
    --rz-input-background-color: var(--bs-gray-100);
    --rz-input-color: var(--bs-gray-700);
    --rz-input-placeholder-color: var(--bs-gray-500);
    --rz-input-disabled-color: var(--bs-gray-500);
    --rz-input-disabled-background-color: var(--bs-gray-200);

    /* The ring Radzen draws around a hovered or focused field. A solid control
       has none: the background step is the whole feedback. */
    --rz-input-shadow: none;
    --rz-input-hover-shadow: none;
    --rz-input-focus-shadow: none;
    --rz-input-focus-outline: 0;
    --rz-input-focus-outline-offset: 0;
    --rz-input-border: 1px solid var(--bs-gray-100);
    --rz-input-hover-border: 1px solid var(--bs-gray-200);
    --rz-input-focus-border: 1px solid var(--bs-gray-200);

    /* The calendar popup */
    --rz-datepicker-panel-background-color: var(--bs-dropdown-bg);
    --rz-datepicker-panel-border: 0;
    --rz-datepicker-panel-shadow: var(--bs-dropdown-box-shadow);
    --rz-datepicker-header-background-color: var(--bs-dropdown-bg);
    --rz-datepicker-header-color: var(--bs-gray-800);
    --rz-datepicker-header-border: 0;
    --rz-datepicker-calendar-color: var(--bs-gray-700);
    --rz-datepicker-calendar-header-color: var(--bs-gray-500);
    --rz-datepicker-calendar-border: 0;
    --rz-datepicker-calendar-hover-background-color: var(--bs-component-hover-bg);
    --rz-datepicker-calendar-hover-color: var(--bs-component-hover-color);
    --rz-datepicker-calendar-selected-background-color: var(--bs-primary);
    --rz-datepicker-calendar-selected-color: var(--bs-primary-inverse);
    --rz-datepicker-calendar-selected-hover-background-color: var(--bs-primary);
    --rz-datepicker-calendar-selected-hover-color: var(--bs-primary-inverse);
    --rz-datepicker-calendar-today-background-color: transparent;
    --rz-datepicker-calendar-today-color: var(--bs-primary);
    --rz-datepicker-focus-outline: 0;
    --rz-datepicker-focus-outline-offset: 0;

    /* Panels under a dropdown */
    --rz-dropdown-panel-background-color: var(--bs-dropdown-bg);
    --rz-dropdown-item-color: var(--bs-gray-700);
}

/* The popup itself: Radzen sizes it content-box and leaves it un-clipped, so a
   full-width highlighted row painted past the rounded corner — which is the
   "hovered item outside the box" in the screenshots. Clipping to the radius is
   what keeps every row inside the sheet. */
.rz-datepicker-popup-container,
.rz-datepicker-inline {
    box-sizing: border-box !important;
    overflow: hidden;
    background-color: var(--bs-dropdown-bg) !important;
    border: 0 !important;
    border-radius: 0.475rem !important;
    box-shadow: var(--bs-dropdown-box-shadow) !important;
}

/* The month and year pickers inside the calendar header are ordinary Radzen
   dropdowns, but they are never wrapped in AppSelect — nobody hand-builds a
   calendar header, Radzen renders it internally — so they get their own
   complete, self-contained "solid field" look here at a smaller size, rather
   than relying on the .app-select rule above (§2a), which only ever reaches
   a dropdown rendered through the wrapper component. */
.rz-datepicker-popup-container .rz-dropdown,
.rz-datepicker-inline .rz-dropdown {
    display: flex !important;
    align-items: center;
    position: relative;
    min-height: 0 !important;
    padding: 0.35rem 0.65rem !important;
    padding-inline-end: 2rem !important;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--bs-gray-700) !important;
    background-color: var(--bs-gray-100) !important;
    border: 1px solid var(--bs-gray-100) !important;
    border-radius: 0.475rem !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.rz-datepicker-popup-container .rz-dropdown:hover,
.rz-datepicker-inline .rz-dropdown:hover,
.rz-datepicker-popup-container .rz-dropdown[aria-expanded="true"],
.rz-datepicker-inline .rz-dropdown[aria-expanded="true"] {
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-200) !important;
}

.rz-datepicker-popup-container .rz-dropdown .rz-dropdown-label,
.rz-datepicker-inline .rz-dropdown .rz-dropdown-label {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
    color: inherit !important;
    background: transparent !important;
}

.rz-datepicker-popup-container .rz-dropdown .rz-dropdown-trigger,
.rz-datepicker-inline .rz-dropdown .rz-dropdown-trigger {
    width: 2rem;
    justify-content: center;
    background-color: transparent !important;
    border: 0 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%2378829D%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 10px;
    pointer-events: none;
}

.rz-datepicker-popup-container .rz-dropdown .rz-dropdown-trigger .rzi,
.rz-datepicker-inline .rz-dropdown .rz-dropdown-trigger .rzi {
    display: none !important;
}

/* The hour/minute/second spinners on a ShowTime picker ARE .rz-numeric underneath
   (Radzen's own CSS has `.rz-timepicker .rz-numeric{flex:1}`), so the generic
   "every .rz-numeric is a full-width Metronic field" rule far above (§2) was
   reaching them too — forcing full-width, 1.1rem/500 text and a 1rem gutter
   for the up/down buttons onto what needs to be three compact, same-sized boxes
   sitting in a row. That is the misplaced, oversized spinners in the screenshot.
   This resets them back to a small, natural size instead of the full-field one. */
.rz-timepicker .rz-numeric {
    width: 3rem;
    min-height: 0;
    padding: 0.35rem 1.5rem 0.35rem 0.35rem !important;
    background-color: var(--bs-gray-100) !important;
    border: 1px solid var(--bs-gray-100) !important;
}

.rz-timepicker .rz-numeric input[type=text],
.rz-timepicker .rz-numeric input[type=number] {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

.rz-timepicker .rz-numeric .rz-numeric-button {
    inset-inline-end: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rz-timepicker .rz-separator {
    padding: 0 0.25rem;
    font-weight: 600;
}

/* The "Today"/"Now" button in the calendar footer, and the hour/minute/AM-PM
   confirm button on a ShowTime picker, are plain RadzenButtons that inherited
   Radzen's own Material button look — flat, no fill, a different shape and
   colour from every primary button in Metronic. This makes it the same
   filled, rounded, brand-coloured button as the rest of the panel. */
.rz-datepicker-footer .rz-button,
.rz-datepicker-time-actions .rz-button,
.rz-timepicker .rz-button {
    padding: 0.5rem 1rem !important;
    font-weight: 500;
    color: var(--bs-primary-inverse) !important;
    background-color: var(--bs-primary) !important;
    border: 1px solid var(--bs-primary) !important;
    border-radius: 0.475rem !important;
    box-shadow: none !important;
}

.rz-datepicker-footer .rz-button:hover,
.rz-datepicker-time-actions .rz-button:hover,
.rz-timepicker .rz-button:hover {
    color: var(--bs-primary-inverse) !important;
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active) !important;
}

/* -----------------------------------------------------------------------------
   6. AppImageUpload — one box that is either the preview or the empty hint

   The real <InputFile> sits invisibly (opacity: 0) over the whole box, so both a click and a
   native OS drag-and-drop land on the same target with no JS interop needed for either gesture.
   -------------------------------------------------------------------------- */

.app-image-upload-box {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-gray-100);
    border: 1px dashed var(--bs-gray-300);
    border-radius: 0.625rem;
    transition: border-color .15s ease;
}

.app-image-upload-box:hover {
    border-color: var(--bs-primary);
}

.app-image-upload-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.app-image-upload-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem;
    color: var(--bs-gray-500);
    text-align: center;
    pointer-events: none;
}

.app-image-upload-empty-icon {
    font-size: 2rem;
    line-height: 1;
}

.app-image-upload-empty-text {
    font-size: 0.8rem;
}

.app-image-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.app-image-upload-remove {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 2;
}