/* ─────────────────────────────────────────────────────────────────
   MudBlazor overrides.

   This file exists SEPARATELY from app.css because of load order: app.css is
   linked before MudBlazor.min.css, so an equal-specificity rule there loses
   the tie. Everything here is linked AFTER MudBlazor and therefore wins on
   source order, without needing !important and without having to out-specify
   MudBlazor's own state rules — which must keep winning.

   Mirrored verbatim in Admin.Client/wwwroot/css/mud-overrides.css. Edit BOTH.
   ───────────────────────────────────────────────────────────────── */

/* An empty field's label sits INSIDE the box, in the same place a value would
   be. MudBlazor paints it TextSecondary (#4B5675 in our palette) — the same
   weight of ink as real content — so an empty form reads as a filled one.
   Drop the resting state to the disabled tone, which is what "nothing here
   yet" is supposed to look like.

   Deliberately matched at the same specificity as MudBlazor's base rule
   (0,3,0) rather than higher: its shrink rule (.mud-shrink~label…, 0,3,1) and
   its focus, error and disabled rules are all more specific and keep winning.
   Once the label floats into the notch it is a heading for real content and
   goes back to being dark. */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    color: var(--mud-palette-text-disabled);
}

/* Export options in the archive tab (DocumentExportSection): a MudCheckBox is inline-flex and
   shrinks to its label, so a two-line option (title + caption) wrapped at an arbitrary width
   instead of using the card's full width. Stretch the control and its label to the container. */
.export-option,
.export-option > .mud-input-control-input-container,
.export-option label.mud-checkbox {
    display: flex !important;
    width: 100%;
}
.export-option label.mud-checkbox > p,
.export-option label.mud-checkbox > .mud-typography,
.export-option label.mud-checkbox > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* Page numbers under the documents and fiscalization lists (07.10.2026): at 360px MudPagination's
   own 6px gap pushed the "next" arrow onto a second line; 2px keeps first + three + last + both
   arrows on one. */
@media (max-width: 600px) {
    .mud-pagination {
        gap: 2px;
    }
}

/* ═══ Phones and touch screens (mobile audit 09.10.2026) ═════════════════════════════
   Every rule below sits inside an xs (max-width: 599.98px), a no-hover (hover: none) or a
   coarse-pointer (pointer: coarse) media query. A desktop with a mouse matches none of
   them, so nothing here moves a desktop pixel. Client-only for now (not mirrored into
   Admin.Client, which has its own mobile backlog). */

@media (max-width: 599.98px) {
    /* Dialogs: one rule for every non-full-screen dialog on a phone - 16px from each edge.
       MudBlazor kept a FullWidth dialog 32px in on each side (296px wide at 360) and let a
       content-sized one run edge to edge; now they all match. Title and content lose 8px
       of side padding each, so a field gets 296px instead of 248px at 360. The title's
       64px end padding beside the close button (a more specific MudBlazor rule) stays. */
    /* Not a date picker opened as a dialog (PickerVariant.Dialog): its paper carries .mud-dialog
       too, but its calendar is a fixed 310px and "100% - 32px" of its 310px wrapper cut it to
       278px - the Sunday column was lost (phone filter panel, 09.10.2026). */
    .mud-dialog:not(.mud-dialog-fullscreen):not(.mud-picker) {
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
    }
    .mud-dialog .mud-dialog-title,
    .mud-dialog .mud-dialog-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* A dialog body that keeps a desktop floor in an inline style (Style="min-width:420px",
       class "dlg-body") would be clipped on a phone - there the floor goes and the body
       takes the dialog's width. Desktop keeps the inline min-width untouched. */
    .dlg-body {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
    }

    /* The stepper's own header cuts its titles at 360px - StepperCompactHeader
       ("Korak 2/4 · Poslovni subjekt", app.css) replaces it on a phone. Specific enough to
       beat MudBlazor's .mud-stepper.mud-stepper__horizontal > .mud-stepper-nav. */
    .mud-stepper.stepper--compact-xs > .mud-stepper-nav,
    .mud-stepper.mud-stepper__horizontal.stepper--compact-xs > .mud-stepper-nav {
        display: none;
    }

    /* iOS Safari zooms the page into any input whose text is under 16px and never zooms
       back out. Inputs here are 14-15px - 16px on a phone. The :not() list keeps tick
       boxes and radios out of it (and outweighs component rules such as the documents
       search box's 14px !important). */
    .mud-input {
        font-size: 16px;
    }
    .mud-input > input.mud-input-root,
    .mud-input > textarea.mud-input-root,
    div.mud-input-slot.mud-input-root,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

@media (max-width: 599.98px) {
    /* Popovers (menus, pickers, select lists) on a phone: never wider than the screen, 8px
       clear of each edge (operator 09.10.2026). Select and autocomplete lists are unaffected -
       they take their input's width, which MudBlazor writes inline. A content-sized menu that
       would overflow now wraps inside the screen; MudBlazor's own flip and left-edge clamp
       (mudPopover.js) keep it from starting off-screen. */
    .mud-popover {
        max-width: calc(100vw - 16px);
    }

    /* Notifications bell (NotificationsBell.razor): a full-width panel along the right edge
       instead of a 360px-wide list hanging off a 360px screen. `left` beats the position
       MudBlazor writes inline (anchored at the bell, which is not the rightmost icon); the
       popover is absolutely positioned against the page, which never scrolls sideways. */
    .mud-popover.mud-popover-open.notifications-popover {
        left: 8px !important;
        width: calc(100vw - 16px);
    }
    .notifications-panel {
        min-width: 0 !important;
        max-width: none !important;
        max-height: min(480px, calc(100dvh - 120px)) !important;
    }
}

/* Tooltips on a touch screen: a tap "hovers" the element and the bubble stays stuck over
   whatever opens next (the Export menu's "Izvezi sve…" sat on top of the menu; the
   fiscalization row chevron's ran off-screen). Without hover they are hidden. FieldHelp's
   "?" bubble is the exception - it is made to be tapped - and carries .tooltip-touch-keep.
   The class sits on the popover element itself (MudTooltip.Class goes there; RootClass is
   the wrapper). */
@media (hover: none) {
    .mud-tooltip:not(.tooltip-touch-keep) {
        display: none !important;
    }
}

/* Touch targets: icon buttons are 26x26 (row menu, copy, delete, clear, pager arrows) and
   page numbers 32px - under the ~40px a finger needs. An invisible ::before grows the
   tappable area to at least 40x40 around the button WITHOUT changing its size, position or
   the layout (absolutely positioned, negative inset only where the button is smaller than
   40px - min(0px, ...) - never shrinking a bigger one).
   MudBlazor clips ripples with overflow:hidden, which would also clip the ::before for
   hit-testing, so these buttons get overflow:visible on touch screens; the price is that
   the tap ripple is unbounded there (Material's own default for icon buttons).
   ::before rather than ::after: MudBlazor's .mud-ripple-icon:after scales its own ::after
   10x. The icon label is lifted above the neighbours' ::before so a neighbouring button's
   enlarged area never steals a tap on the icon itself. */
@media (pointer: coarse) {
    .mud-button-root.mud-icon-button,
    .mud-pagination-item > .mud-button-root {
        overflow: visible;
    }
    .mud-button-root.mud-icon-button::before,
    .mud-pagination-item > .mud-button-root::before {
        content: "";
        position: absolute;
        top: min(0px, calc((100% - 40px) / 2));
        bottom: min(0px, calc((100% - 40px) / 2));
        left: min(0px, calc((100% - 40px) / 2));
        right: min(0px, calc((100% - 40px) / 2));
    }
    .mud-button-root.mud-icon-button > .mud-icon-button-label {
        position: relative;
        z-index: 1;
    }
    /* Numeric-field spinners are stacked (19px each): grow them sideways only, so the up
       arrow's area never covers the down arrow's. */
    .mud-input-numeric-spin .mud-button-root.mud-icon-button::before {
        top: 0;
        bottom: 0;
        left: -8px;
        right: -8px;
    }
}

/* Sign-up wizards (/register, /companies/register): a step header can be clicked once the step has been
   reached (NonLinear stepper); the ones after the furthest reached step stay inert. The page adds
   stepper-reached-N to the header row, N = the furthest reached step index. The page also refuses
   the click (OnStepperPreview) - this only keeps the pointer and ripple honest. */
.mud-stepper-nav.stepper-reached-0 > .mud-step:nth-of-type(n+2) {
    pointer-events: none;
    cursor: default;
}
.mud-stepper-nav.stepper-reached-1 > .mud-step:nth-of-type(n+3) {
    pointer-events: none;
    cursor: default;
}
.mud-stepper-nav.stepper-reached-2 > .mud-step:nth-of-type(n+4) {
    pointer-events: none;
    cursor: default;
}
.mud-stepper-nav.stepper-reached-3 > .mud-step:nth-of-type(n+5) {
    pointer-events: none;
    cursor: default;
}

/* reCAPTCHA v3 badge: shown only on the registration pages (js/recaptcha.js toggles the body class).
   Hidden, not removed - the script keeps minting tokens. */
body:not(.recaptcha-badge-visible) .grecaptcha-badge {
    visibility: hidden !important;
}

/* Invoice wizard line total (Ukupno, BT-131): the row result, so a darker 2px border and a bold value. */
.line-total-field .mud-input.mud-input-outlined:hover .mud-input-outlined-border,
.line-total-field .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-width: 2px;
    border-color: var(--mud-palette-text-primary);
}
.line-total-field input {
    font-weight: 700;
}