/* MudBlazor wizard overrides — kreirajui */

/* ─────────────────────────────────────────────────────────────────
   BT-code chip overlay for MudBlazor input fields.
   .mud-bt-wrap is the positioning context wrapping each Mud input;
   .mud-bt-pin is the floating chip in the top-right corner.
   Mirrors the native wizard's .bt-pin look (blue palette, monospace).
   Class names are NEW (not .bt-pin) to avoid colliding with the native
   .bt-pin rules from wizard-native.css which target a different DOM. */
.mud-bt-wrap {
    position: relative;
}
.mud-bt-wrap .mud-bt-pin {
    position: absolute;
    top: -7px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #1565c0;
    background: #fff;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid #bbdefb;
    font-family: 'DM Mono', 'Roboto Mono', monospace;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.5;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s, transform 0.1s;
}
/* Chip is now a clickable button — opens the BT help dialog. */
.mud-bt-wrap .mud-bt-pin-button {
    cursor: help;
}
.mud-bt-wrap .mud-bt-pin-button:hover {
    background: #e3f2fd;
    border-color: #64b5f6;
    color: #0d47a1;
    transform: translateY(-1px);
}
.mud-bt-wrap .mud-bt-pin-button:focus-visible {
    outline: 2px solid #0EA5E9;
    outline-offset: 1px;
}

/* Decorative BT/BG chip in section headers — also clickable, opens the help dialog.
   All sizing/styling lives here (not on the .razor inline style) so future tweaks
   are CSS-only and don't require a WASM rebuild. white-space:nowrap + flex-shrink:0
   prevent the chip from collapsing into a circle when a flex parent squeezes it. */
.bt-chip-decor {
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    cursor: help;
    transition: all 0.15s;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}
.bt-chip-decor:hover {
    background: rgba(14, 165, 233, 0.10) !important;
    border-color: #0EA5E9 !important;
    color: #0EA5E9 !important;
    transform: translateY(-1px);
}
.bt-chip-decor:focus-visible {
    outline: 2px solid #0EA5E9;
    outline-offset: 1px;
}
/* Focus: chip darkens to match native focus state */
.mud-bt-wrap:focus-within .mud-bt-pin {
    color: #0d47a1;
    background: #bbdefb;
    border-color: #90caf9;
}
/* Error: chip turns red, parent adds .bt-error when the input has Error="true" */
.mud-bt-wrap.bt-error .mud-bt-pin {
    color: #c62828;
    background: #ffebee;
    border-color: #ef9a9a;
}
/* Force the inner outlined input border to stay red while .bt-error is set, even
   on focus. MudBlazor swaps the border colour to the focus colour on focus when
   ErrorText is empty, leaving only the chip red — this rule overrides that so
   the validator's red state is always visible without needing fake ErrorText. */
.mud-bt-wrap.bt-error .mud-input-outlined-border,
.mud-bt-wrap.bt-error.mud-focused .mud-input-outlined-border,
.mud-bt-wrap.bt-error :focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-error) !important;
}
.mud-bt-wrap.bt-error label.mud-input-label {
    color: var(--mud-palette-error) !important;
}

/* Validation error bar at the bottom — its inline style sets left:0, which means
   it slides under the left sidebar (200px expanded / 56px mini). Push it right by
   the sidebar width so the bar starts where the content area starts. */
.wizard-mud-error-bar {
    left: var(--mud-drawer-width-left, 200px) !important;
}
@media (max-width: 960px) {
    .wizard-mud-error-bar {
        left: var(--mud-drawer-width-mini-left, 56px) !important;
    }
}
@media (max-width: 600px) {
    .wizard-mud-error-bar {
        left: 0 !important;
    }
}
/* Dark theme: keep the chip readable on dark background */
.mud-theme-dark .mud-bt-wrap .mud-bt-pin {
    background: var(--mud-palette-surface);
    color: #64b5f6;
    border-color: #1e88e5;
}
.mud-theme-dark .mud-bt-wrap:focus-within .mud-bt-pin {
    color: #90caf9;
    background: #1e3a5f;
    border-color: #42a5f5;
}
.mud-theme-dark .mud-bt-wrap.bt-error .mud-bt-pin {
    color: #ef9a9a;
    background: #3e1d1d;
    border-color: #c62828;
}
/* Mobile: chip STRADDLES the input's bottom border line, mirroring how the
   desktop chip straddles the TOP border. The trick: pull the helper text OUT
   of the wrapper's flow (position: absolute below) so the wrapper height now
   equals the input height. Then bottom:-7px reliably anchors the chip half-
   above / half-below the input's bottom border, regardless of whether a field
   has helper text. */
@media (max-width: 600px) {
    /* Float the helper text BELOW the wrapper instead of inside it, so the
       wrapper bottom edge = input bottom edge for every field. Reserve space
       in the parent MudItem with margin-bottom on the wrapper so subsequent
       fields aren't clipped by the floated helper. */
    .mud-bt-wrap .mud-input-helper-text,
    .mud-bt-wrap .mud-form-helper-text {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 2px;
        padding: 0 12px;
    }
    /* Wrappers that have helper text need extra bottom margin so the floated
       text doesn't overlap the next field. ~22px covers the helper-text height
       at the default caption typography. */
    .mud-bt-wrap:has(.mud-input-helper-text),
    .mud-bt-wrap:has(.mud-form-helper-text) {
        margin-bottom: 22px;
    }

    .mud-bt-wrap .mud-bt-pin {
        font-size: 0.55rem;
        padding: 0 6px;
        line-height: 1.4;
        top: auto;
        bottom: -7px;
        right: 6px;
        background: #fff;
        border: 1px solid #bbdefb;
    }
    /* Inline variant (checkboxes / radios): chip already sits beside the label
       on the right; restore the centred-vertical position. */
    .mud-bt-wrap.bt-inline .mud-bt-pin {
        top: 50%;
        bottom: auto;
        background: var(--mud-palette-background-gray);
    }
    /* Numeric spinner arrows eat ~22 px on a 160-px field — hide them on mobile
       so the value gets the full width and stays away from the chip area. */
    .mud-bt-wrap .mud-input-numeric-button {
        display: none !important;
    }
    /* Dark theme: chip flips to surface colour so it stays visible against the
       dark input border. */
    .mud-theme-dark .mud-bt-wrap .mud-bt-pin {
        background: var(--mud-palette-surface);
        border-color: #1e88e5;
    }
}

/* Always-shrunk label for every wizard input.
   MudBlazor's outlined variant centers the label inside the cell as a placeholder
   when the field is empty + unfocused, which the team finds noisy ("Pravni
   identifikator" sitting visually identical to user-typed content). Force every
   label inside .mud-bt-wrap into the shrunk floating position regardless of state,
   and open the outlined-border notch permanently so the border doesn't draw
   through the label text. */
.mud-bt-wrap .mud-input-control .mud-input-label,
.mud-bt-wrap .mud-input-control .mud-input-label-outlined {
    transform: translate(12px, -7px) scale(0.75) !important;
    transform-origin: top left !important;
    background: var(--mud-palette-surface, #FFFFFF);
    padding: 0 4px !important;
    pointer-events: none;
}
/* Some MudBlazor 9 builds use a fieldset legend for the notch. Force it open
   so the border has a gap for the label rather than running through it. */
.mud-bt-wrap .mud-input-outlined-border legend {
    max-width: 100% !important;
}
.mud-bt-wrap .mud-input-outlined-border legend > span {
    padding: 0 4px !important;
    display: inline-block !important;
    visibility: hidden;
}
/* Dark theme — match the floating-label background to the dark surface. */
.mud-theme-dark .mud-bt-wrap .mud-input-control .mud-input-label,
.mud-theme-dark .mud-bt-wrap .mud-input-control .mud-input-label-outlined {
    background: var(--mud-palette-surface, #1E293B);
}

/* Inline variant — wraps a narrow control (checkbox, radio) so the chip hugs
   the label instead of floating at the right edge of the grid item.
   The chip is taken out of flow; padding-right reserves space wider than the
   chip itself (~60-70px depending on code length) so the label can't be overlapped. */
.mud-bt-wrap.bt-inline {
    display: inline-flex;
    align-items: center;
    padding-right: 80px;
}
.mud-bt-wrap.bt-inline .mud-bt-pin {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
}

/* ─────────────────────────────────────────────────────────────────
   XML upload row (DocumentTypeStepMud) — compact single-line per file.
   Click a row with errors to toggle the inline error panel. */
.xml-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    min-height: 40px;
    border-radius: 4px;
    transition: background 0.1s;
}
.xml-upload-row.is-error {
    cursor: pointer;
    color: #B91C1C;
}
.xml-upload-row.is-error:hover { background: rgba(239,68,68,0.10) !important; }
.mud-theme-dark .xml-upload-row.is-error { color: #FCA5A5; }
.xml-upload-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xml-upload-row.is-error .xml-upload-name,
.xml-upload-row.is-error .xml-upload-err-count { color: inherit; }
.xml-upload-err-count {
    font-size: 0.78rem;
    font-weight: 600;
}
.xml-upload-spacer { flex: 0 1 0; }
.xml-upload-actions {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.xml-upload-err-panel {
    background: rgba(239,68,68,0.06);
    border-left: 4px solid #EF4444;
    padding: 8px 12px 8px 36px;
    margin-top: -2px;
    border-radius: 0 4px 4px 0;
}
.xml-upload-err-line {
    color: #B91C1C;
    font-size: 0.78rem;
    line-height: 1.4;
    word-break: break-word;
    padding: 1px 0;
}
.mud-theme-dark .xml-upload-err-line { color: #FCA5A5; }

/* Mobile: name truncates harder; let icon-buttons stay inline (small enough) */
@media (max-width: 575.98px) {
    .xml-upload-row { padding: 6px 8px; }
    .xml-upload-name { font-size: 0.82rem; }
    .xml-upload-err-count { font-size: 0.72rem; }
    .xml-upload-err-panel { padding-left: 16px; }
}

/* Toolbar at the top — slightly recessed surface */
.wizard-mud-toolbar {
    background: var(--mud-palette-surface);
}

/* Custom horizontal stepper */
.wizard-mud-steps {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 8px 0;
    align-items: flex-start;
}

.wizard-mud-step {
    flex: 1 1 auto;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 8px;
    transition: background 0.12s;
    user-select: none;
}

.wizard-mud-step:hover {
    background: var(--mud-palette-action-default-hover, rgba(0,0,0,0.04));
}

.wizard-mud-step-circle {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin: 0 auto 4px;
    border: 2px solid transparent;
    font-size: 0.85rem;
}

/* Active step uses sky-blue, not theme primary (red), so red is reserved for errors. */
.wizard-mud-step.active .wizard-mud-step-circle {
    background: #0EA5E9;
    color: #fff;
    border-color: #0EA5E9;
}

.wizard-mud-step.visited .wizard-mud-step-circle {
    background: var(--mud-palette-success);
    color: #fff;
    border-color: var(--mud-palette-success);
}

.wizard-mud-step.has-errors .wizard-mud-step-circle {
    background: var(--mud-palette-error);
    color: #fff;
    border-color: var(--mud-palette-error);
}

.wizard-mud-step-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--mud-palette-error);
    color: #fff;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 14px;
    padding: 0 4px;
    border: 2px solid var(--mud-palette-surface);
}

.wizard-mud-step-check {
    position: absolute !important;
    top: -4px;
    right: -4px;
    background: var(--mud-palette-success);
    color: #fff;
    border-radius: 50%;
    padding: 1px;
    width: 14px !important;
    height: 14px !important;
    font-size: 0.7rem !important;
    border: 2px solid var(--mud-palette-surface);
}

.wizard-mud-step-label {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wizard-mud-step.active .wizard-mud-step-label {
    color: #0EA5E9;
    font-weight: 700;
}

.wizard-mud-step.has-errors .wizard-mud-step-label {
    color: var(--mud-palette-error);
}

/* Bottom validation drawer */
.wizard-mud-error-bar {
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

/* BT codes inside the validation-error message text are inline links — same colour as the
   existing BT pins so users recognise them. Underlined on hover so they look obviously
   clickable. Styled as a bare button to keep tab order + accessibility without dragging in
   a real <a href>. */
.wizard-mud-bt-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #1565c0;
    font-family: 'DM Mono', 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: inherit;
    letter-spacing: 0.2px;
}
.wizard-mud-bt-link:hover {
    color: #0d47a1;
    text-decoration: underline;
}
.wizard-mud-bt-link:focus-visible {
    outline: 2px solid #0EA5E9;
    outline-offset: 1px;
    border-radius: 2px;
}

/* Validation error cards are clickable — whole card jumps to the offending step.
   Rules we can't map to a step skip this class and stay static. */
.wizard-mud-error-card {
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.wizard-mud-error-card:hover {
    background-color: var(--mud-palette-action-hover, rgba(0, 0, 0, 0.04));
}

/* BT-130 unit autocomplete sits in a 1-col grid cell at lg breakpoint, but its display
   string is "CODE · symbol · Croatian name · (English)" — easily 30+ chars. Shrink the
   input font and let it wrap to two lines so the value stays readable without making
   the column wider. The dropdown list below uses its own ItemTemplate styling and is
   handled by .kai-unit-popover. */
.kai-unit-autocomplete input {
    /* Single-line short symbol ("mg", "kom", "kg") — match the numeric field height
       so Kol. and Jed. line up. Was 2-line clamped with min-height: 2.4em because the
       display string used to be "CODE · symbol · Croatian · (English)"; once
       UnitCodeRegistry.DisplayFor() collapsed to just the symbol the clamp became
       cosmetic noise that pushed Jed. taller than the neighbouring numeric input. */
    font-size: 0.85rem !important;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* When the autocomplete is open, widen the popover so users can see the full
   "CODE · symbol · Croatian · (English)" string and pick correctly. Anchored to the
   input's left edge, capped at viewport width so it doesn't overflow. */
.kai-unit-popover {
    min-width: 420px !important;
    max-width: min(640px, calc(100vw - 32px)) !important;
}

/* ISO 4217 currency picker — same idea as the units popover, tuned for the longer
   "CODE (NNN) — Croatian · English" format so the full label fits without truncation. */
.kai-currency-popover {
    min-width: 460px !important;
    max-width: min(680px, calc(100vw - 32px)) !important;
}

/* VATEX exemption-reason picker — descriptions cite EU directive articles and the HR
   PDV law in one line ("Izuzeće na temelju članka 132… / čl. 39. st. 1. točke a)…"),
   easily 100+ chars. Allow the popover to span most of the viewport and let items wrap. */
.kai-vatex-popover {
    min-width: 600px !important;
    max-width: min(900px, calc(100vw - 32px)) !important;
}
.kai-vatex-popover .mud-list-item {
    white-space: normal !important;
    align-items: flex-start;
}

/* Compact density adjustments */
.wizard-mud-content .mud-input-control {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Make MudExpansionPanel headers a bit denser */
.wizard-mud-content .mud-expand-panel-header {
    min-height: 44px;
}

/* Mobile responsive: shrink stepper so all 10 steps fit one row.
   The original 44-px min-width × 10 steps + gaps overflowed any phone viewport,
   forcing the row to horizontal-scroll and hiding steps 7-10. Switching to
   flex: 1 1 0 lets the row distribute available width evenly across every step,
   and the labels keep ellipsis truncation when there's no room. */
@media (max-width: 600px) {
    .wizard-mud-steps {
        gap: 2px;
        padding: 6px 0;
        overflow-x: visible;
    }
    .wizard-mud-step {
        flex: 1 1 0;
        min-width: 0;
        padding: 4px 1px;
    }
    .wizard-mud-step-circle {
        width: 26px;
        height: 26px;
        font-size: 0.72rem;
        margin-bottom: 2px;
    }
    .wizard-mud-step-label {
        font-size: 0.52rem;
        letter-spacing: 0.2px;
    }
}

/* Very narrow phones (≤ 400 px): drop the labels entirely — the active step's
   meaning is shown in the title bar / step content; numbered circles alone
   are enough for orientation and let every step fit cleanly. */
@media (max-width: 400px) {
    .wizard-mud-step-circle {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
        border-width: 1px;
    }
    .wizard-mud-step-label {
        display: none;
    }
}

/* Step-content headers (LinesStepMud "Stavke računa", etc.) shrink on mobile so the
   title, BT chip and primary action button fit one row without wrapping the title
   onto two lines. The Stack inside each step uses MudText Typo="h6" by default which
   is 1.25 rem — that pushes a 7-char "Stavke računa" string onto two lines on a
   360-px viewport once an icon + chip + button share the row. */
@media (max-width: 600px) {
    .wizard-mud-content .mud-paper {
        padding: 12px;
    }
    .wizard-mud-content .mud-typography-h6 {
        font-size: 0.95rem;
        line-height: 1.25;
    }
    .wizard-mud-content .mud-typography-subtitle1 {
        font-size: 0.85rem;
    }
    .wizard-mud-content .mud-button.mud-button-filled,
    .wizard-mud-content .mud-button.mud-button-outlined {
        font-size: 0.7rem;
        padding: 4px 8px;
        min-width: 0;
        text-transform: none;
    }
    .wizard-mud-content .mud-button .mud-button-label {
        line-height: 1.1;
    }
    .wizard-mud-content .mud-icon-root.mud-svg-icon {
        font-size: 1.05rem;
    }
}

@media (max-width: 400px) {
    .wizard-mud-content .mud-typography-h6 {
        font-size: 0.88rem;
    }
    .wizard-mud-content .mud-paper {
        padding: 10px;
    }
    /* On the narrowest phones, shrink the BT chip too so it can sit on the same row
       as the title without forcing wrap. */
    .wizard-mud-content .mud-chip {
        font-size: 0.6rem;
        height: 18px;
        padding: 0 6px;
    }
}

/* Wizard top toolbar (doc-type icon + title + BT chip + status dot + errors badge)
   — on mobile the default MudPaper padding (12 px) + Typo.h6 (1.25 rem) made the
   header eat ~80 px before the user reached the first form field. Tighten paddings,
   shrink the title font, and drop the icon size so the bar is closer to ~48 px tall. */
/* Mobile-only prev/next arrows flanking the step circles. Hidden on desktop —
   there the bottom Prethodno/Sljedeće buttons are always in viewport. On mobile
   those buttons sit below the fold once the user touches a field, so mirroring
   them in the step row saves a scroll. `pointer-events: none` on .disabled is
   what actually blocks the click; opacity is just the visual cue. */
.wizard-mud-step-arrow { display: none; }

@media (max-width: 600px) {
    .wizard-mud-step-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Match the numbered step circle size at this breakpoint (.wizard-mud-step-circle
           is 26 here, 22 below 400px) — see the matching rule further down. */
        width: 26px;
        height: 26px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-lines-default);
        cursor: pointer;
        user-select: none;
        /* The step circle sits inside .wizard-mud-step which has padding-top 6.
           Mirror that offset so the arrow's center lines up with the circle's. */
        margin-top: 6px;
        /* Sticky pinning — keeps arrows in viewport while the inner step circles
           scroll horizontally (9 circles + 2 arrows overflow on 360-px phones).
           z-index lifts them above the scrolling step row; left:0 / right:0 stick
           to the parent's content-box edges. */
        position: sticky;
        z-index: 2;
    }
    .wizard-mud-step-arrow .mud-icon-root {
        font-size: 0.95rem;  /* fits inside the smaller circle without crowding */
    }
    .wizard-mud-step-arrow:first-child { left: 0; }
    .wizard-mud-step-arrow:last-child  { right: 0; }
    .wizard-mud-step-arrow:active {
        background: var(--mud-palette-action-default-hover, rgba(0,0,0,0.08));
    }
    .wizard-mud-step-arrow.disabled {
        opacity: 0.3;
        pointer-events: none;
    }
}

/* Even narrower phones: step circles drop to 22 px, arrows follow. */
@media (max-width: 400px) {
    .wizard-mud-step-arrow {
        width: 22px;
        height: 22px;
    }
    .wizard-mud-step-arrow .mud-icon-root {
        font-size: 0.85rem;
    }
}

@media (max-width: 600px) {
    .wizard-mud-toolbar {
        padding: 6px 8px !important;
        margin-bottom: 8px !important;
    }
    /* Keep icon + title + chips + status dot on a single line on mobile.
       Title shrinks first (ellipsis) so the BT-3 / Valjano badges stay visible —
       the chips carry the per-doc info the user actually scans for.
       Targets the explicit wizard-mud-toolbar-row class on MudStack (MudBlazor 9
       doesn't emit a stable `.mud-stack-row` selector, just inline flex styles). */
    .wizard-mud-toolbar-row {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        min-width: 0;
    }
    .wizard-mud-doc-title {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        min-width: 0;
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .wizard-mud-toolbar .mud-icon-root.mud-svg-icon {
        font-size: 1.05rem;
        flex-shrink: 0;
    }
    .wizard-mud-toolbar .mud-chip {
        height: 20px;
        font-size: 0.6rem;
        padding: 0 6px;
        flex-shrink: 0;
    }
    .wizard-mud-toolbar .mud-tooltip-root {
        flex-shrink: 0;
    }
}

/* Wizard footer (Prethodno / Sljedeće / Natrag na popis) — at mobile width "Natrag
   na popis" was wrapping onto two lines because the default MudButton padding +
   font-size combo is sized for desktop. Shrink the type + padding so both buttons
   sit on one line on a 360-px viewport. */
@media (max-width: 600px) {
    .wizard-mud-footer .mud-button {
        font-size: 0.72rem;
        padding: 6px 10px;
        min-width: 0;
        text-transform: none;
        white-space: nowrap;
    }
    .wizard-mud-footer .mud-button .mud-button-label {
        line-height: 1.15;
    }
    .wizard-mud-footer .mud-icon-root.mud-svg-icon {
        font-size: 1rem;
    }
}

@media (max-width: 400px) {
    .wizard-mud-footer .mud-button {
        font-size: 0.65rem;
        padding: 5px 8px;
    }
}

/* Predlošci dropdown panel — shared between the two MudHidden branches.
   Desktop anchors under the trigger button (top:100%, right:0 grows leftward).
   Mobile anchors as a fixed bottom sheet — the trigger lives in the footer rail
   so anchoring relative to the (hidden) header button would render the menu
   off-screen at the top. */
.kai-template-menu {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    min-width: 200px;
    max-width: 90vw;
    overflow: hidden;
    z-index: 1500;
}
.kai-template-menu-desktop {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
}
.kai-template-menu-mobile {
    position: fixed;
    /* Bottom nav is ~68px tall; gap of 8px above it places the menu in the
       comfortable reach zone above the user's tapping thumb. */
    bottom: 76px;
    right: 12px;
    left: auto;
}

/* Tax summary totals — right-align the numeric value column so amounts and
   currency suffixes line up on the right edge. Targets only spans whose inline
   style carries `DM Mono` (the value spans) — label spans use the default body
   font and stay left-aligned next to their BT chip. */
.tax-summary-totals > span[style*="DM Mono"] {
    text-align: right;
}

/* Tax summary (TaxSummaryStepMud) — desktop renders RAZRADA POREZA on the left
   and UKUPNI IZNOSI on the right via inline `grid-template-columns: 1fr 1fr`.
   Stack vertically at SmAndDown (≤960px) so the BG-22 table and BG-23 totals
   each get full viewport width — at iPad-portrait (768px) the two-column grid
   gave each side ~370px which still squeezed the BT-chip labels next to long
   amounts. Mobile (≤600px) inherits this stack and adds further chip shrinking
   below. */
@media (max-width: 960px) {
    .tax-summary-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* HR-BT-13: uputa "odaberite ili upišite" USJEČENA u DONJI rub okvira polja —
   isti vizualni tretman kao gornji label (legend notch), samo na dnu. Tekst
   dolazi kroz CSS varijablu --edge-hint (razor je puni preko L.T za HR/EN).
   ::after je usidren na fieldset okvira pa stoji točno na border liniji
   neovisno o helper/error redku ispod polja; background maskira segment
   bordera i stvara "urez". */
.hrbt13-edge-hint fieldset.mud-input-outlined-border {
    overflow: visible;
}
.hrbt13-edge-hint fieldset.mud-input-outlined-border::after {
    content: var(--edge-hint, 'odaberite ili upišite');
    position: absolute;
    bottom: -0.65em;
    left: 10px;
    padding: 0 5px;
    font-size: 0.62rem;
    line-height: 1;
    font-family: 'DM Sans', sans-serif;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    pointer-events: none;
    white-space: nowrap;
}
/* Dok je polje fokusirano (autocomplete meni otvoren), popover prekriva donji rub —
   sakrij hint da ga meni ne "gazi"; vraća se čim se meni zatvori. Uputa tada ionako
   više ne treba (korisnik je već u odabiru/tipkanju). */
.hrbt13-edge-hint:focus-within fieldset.mud-input-outlined-border::after {
    display: none;
}

/* Vizualna granica između RAZRADE POREZA (lijevo) i UKUPNIH IZNOSA (desno) —
   bez nje panel izgleda kao jedna nepodijeljena masa. Na desktopu okomita
   crta + odmak; kad se stupci slože (≤960px) granica postaje vodoravna. */
.tax-summary-right {
    border-left: 1px solid var(--mud-palette-lines-default);
    padding-left: 20px;
}
@media (max-width: 960px) {
    .tax-summary-right {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--mud-palette-lines-default);
        padding-top: 12px;
    }
}

@media (max-width: 600px) {
    /* The inner totals grid (`1fr auto` label/amount) stays as-is — full viewport
       width now lets labels keep their BT chip inline and amounts fit without
       truncation. Tighten the gap a hair so the amount sits closer to its label. */
    .tax-summary-totals {
        column-gap: 8px !important;
    }

    /* BG/BT decorative chips (BtChip component) used in section headers and
       totals labels — desktop default is 0.65rem with 2/8 px padding which on
       a phone consumes 40+ px per chip. Shrink to a tight 0.45rem + 1/4 px
       padding so a chip + adjacent text fits one line and the chip stays a
       thin pill (not a wrapped circle). */
    .bt-chip-decor {
        font-size: 0.45rem !important;
        padding: 1px 4px !important;
        line-height: 1.2 !important;
    }
    /* Floating BT chip pinned in the corner of every input field (.mud-bt-pin).
       Already 0.6rem on desktop; squeeze to 0.5rem so it doesn't dominate the
       small mobile fields. */
    .mud-bt-pin {
        font-size: 0.5rem !important;
        padding: 0 4px !important;
    }
    /* Generic MudChip inside wizard step content (status/category badges).
       Toolbar already has its own override; this catches everything in the
       step body — Stavka N "Više" toggle area, AMS alerts, allowance type
       chips, etc. */
    .wizard-mud-content .mud-chip,
    .wizard-mud-stepper-host .mud-chip {
        height: auto;
        min-height: 18px;
        font-size: 0.58rem;
        padding: 1px 6px;
    }

    /* ReviewStepMud (Pregled i izvoz, step 9) — desktop default MudText sizes
       (~16px body) chew vertical space on a phone where the user just wants a
       quick scan of "Sažetak dokumenta" before tapping Pošalji. Shrink body
       text to ~12px, tighten paddings + grid gutters. Scoped via
       .kai-review-step so other wizard steps aren't affected. */
    .kai-review-step.mud-paper {
        padding: 10px !important;
    }
    .kai-review-step .mud-typography-subtitle1 {
        font-size: 0.85rem !important;
    }
    .kai-review-step .mud-typography-h6 {
        font-size: 1rem !important;
    }
    /* Don't override .mud-grid-item padding — MudGrid uses negative container
       margins to compensate for item padding, and shrinking the padding without
       matching the margin pulls items up over the section heading ("Sažetak
       dokumenta" was rendering BEHIND the first row "Vrsta:"). Font shrink +
       very tight line-height reclaims vertical space safely. */
    .kai-review-step .mud-grid-item .mud-typography {
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
    }
    /* Tighten the inner Sažetak grid (Spacing="1") item padding too — the inner
       grid uses 4px gutters so trimming items to 1px each only shifts items by
       3px, well within the negative-margin compensation and safe from overlap. */
    .kai-review-step .mud-grid .mud-grid .mud-grid-item {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }
    /* Hide MudDividers entirely on mobile — both the in-step ones inside the
       review panel AND the wizard-footer divider just above Prethodno / Pošalji.
       Each divider eats ~25px of vertical space and the visual section split is
       already obvious from spacing + MudPaper borders. */
    .kai-review-step .mud-divider,
    .wizard-mud-footer + .mud-divider,
    .mud-divider + .wizard-mud-footer {
        /* belt-and-suspenders selector — covers both orderings */
    }
    .kai-review-step .mud-divider {
        display: none !important;
    }
    /* The wizard footer divider lives just before .wizard-mud-footer in the DOM.
       Use the adjacent-sibling preceding selector via :has() to hide it. */
    .mud-paper:has(> .wizard-mud-footer) > .mud-divider {
        display: none !important;
    }
    .kai-review-step .mud-alert {
        padding: 4px 6px !important;
    }
    /* Single line via white-space:nowrap; font scaled to ~0.78rem so the
       longest message ("Dokument je ispravan i spreman za slanje.") fills the
       full alert width on a 360px viewport without wrapping. word-break:normal
       cancels any inherited wrapping. */
    .kai-review-step .mud-alert .mud-typography,
    .kai-review-step .mud-alert .mud-alert-message {
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        word-break: normal !important;
    }
    /* Shrink the alert's leading icon + trim its right margin so the message
       column gets the maximum width before nowrap kicks in. */
    .kai-review-step .mud-alert .mud-alert-icon {
        padding-right: 4px !important;
    }
    .kai-review-step .mud-alert .mud-alert-icon .mud-icon-root {
        font-size: 0.9rem !important;
    }
    /* Hide the "Pregled XML-a" expansion panel on phones — most mobile users
       just review summary + send; the raw XML inspection is a desktop concern. */
    .kai-xml-preview {
        display: none !important;
    }

    /* Line-item row reorder on phone: desktop source order is
       Naziv | Kol.(BT-129) | Jed.(BT-130) | Cijena(BT-146) | Popust | Ukupno(BT-131).
       On mobile the user wants Popust % to appear right after the BT-129/BT-130
       row, before Cijena/Ukupno. MudGrid renders MudItems in a flex container, so
       bumping Cijena+Ukupno to order:1 floats them after the default-order Popust
       without touching source order (which keeps desktop layout intact). */
    .kai-line-cijena,
    .kai-line-ukupno {
        order: 1;
    }

    /* Document-level allowance/charge tab header: description + "Dodaj popust"/
       "Dodaj naknadu" button. MudStack Row keeps them on one line on desktop;
       on mobile the button text wraps into two lines next to the squeezed
       description. Stack vertically + right-align the button so it gets its
       natural width back. */
    .kai-doc-allowance-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .kai-doc-allowance-header .mud-button {
        align-self: flex-end;
    }

    /* AllowanceChargesStepMud (BG-20/BG-21 popusti & naknade panel) — mobile
       compact + slim tab variant chosen from the popust-mobile-sandbox.
       Scoped via .kai-allowance-step (outer paper) and .kai-allowance-card
       (per-allowance card) so the overrides don't bleed into other wizard
       steps that share MudPaper.pa-4 / pa-3. BT pin chips stay visible. */
    .kai-allowance-step.mud-paper {
        padding: 8px !important;
    }
    .kai-allowance-card.mud-paper {
        padding: 8px !important;
        margin-bottom: 6px !important;
    }
    .kai-allowance-step .mud-grid > .mud-grid-item {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    /* Slim tabs: shrink the toolbar height and tab buttons, drop the scroll
       arrows (two tabs always fit), thin out the slider so it stops eating
       vertical space at the top of the panel. */
    .kai-allowance-step .mud-tabs-toolbar,
    .kai-allowance-step .mud-tabs-tabbar-inner {
        min-height: 36px !important;
    }
    .kai-allowance-step .mud-tab {
        min-height: 36px !important;
        min-width: 0 !important;
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
    }
    .kai-allowance-step .mud-tab-slider {
        height: 2px !important;
    }
    .kai-allowance-step .mud-tab-scroll-button {
        display: none !important;
    }

    /* Mobile vertical-space squeeze: MudGrid's default Spacing="6" produces ~24px
       row gaps which stack up fast on a phone — one column of 5 fields can add
       ~120px of empty space. We compress to ~12px so the form stays compact
       without crowding helper text into the next field's label (the previous
       6px setting let BT-1's helper overlap BT-23's outline). */
    .wizard-mud-content .mud-grid > .mud-grid-item,
    .wizard-mud-stepper-host .mud-grid > .mud-grid-item {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .wizard-mud-content .mud-grid,
    .wizard-mud-stepper-host .mud-grid {
        margin-top: -10px !important;
        margin-bottom: -10px !important;
    }
    /* Keep the bottom margin around BtField wrappers tight but non-zero so the
       helper text under BT-1 ("Najčešće u obliku npr. 1/1/1") doesn't crash
       into BT-23's outline border on the next row. */
    .wizard-mud-content .mud-bt-wrap,
    .wizard-mud-stepper-host .mud-bt-wrap {
        margin-bottom: 4px !important;
    }

    /* HR-BT-1 (Kopija računa) — the long Croatian label "Kopija računa (ponovno
       slanje ISPRAVLJENOG računa s istim brojem)" wraps to 4 lines next to the
       checkbox on a phone, eating the BT-2 row's vertical space. Shrink the
       label so it fits in ~2 lines. Mobile only — desktop has room. */
    .mud-bt-wrap.hr-bt-1-compact .mud-checkbox .mud-typography {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
    }

    /* VAT-status toggles on the supplier step — "Prodavatelj NIJE u sustavu PDV-a"
       and "Obračun PDV-a po naplati (HR-BT-15)" are long labels that wrap to two
       lines on a phone (the HR-BT-15 chip eats into the available width). Shrink
       the label font and force single-line so both fit cleanly. nowrap is safe
       here because the paper sits on its own row and there's enough horizontal
       room at the shrunk size. */
    .kai-vat-toggles .mud-checkbox .mud-typography {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }
}