/* ============================================================================
   responsive.css — global mobile / tablet layer
   ----------------------------------------------------------------------------
   Loaded LAST in _Layout.cshtml (after Bootstrap and the Kendo theme) so it can
   override widget defaults without every rule needing !important. Page-level
   <style> blocks live in the body and still win, so anything that has to beat an
   inline width from a view is marked !important deliberately.

   Breakpoints (matched to Bootstrap 5 so the col-* classes already in the views
   line up with these rules):
       <= 1199.98px  small laptop / large tablet landscape
       <= 991.98px   tablet
       <= 767.98px   large phone / small tablet portrait
       <= 575.98px   phone
   ========================================================================== */


/* ── 1. Overflow guard ─────────────────────────────────────────────────────
   The app shell is a Kendo Drawer whose content pane is loaded by AJAX. A single
   over-wide child used to widen the whole document and produce a page that
   scrolls sideways with the header stuck off-screen. Contain it at the shell
   instead of on <body>, so genuinely wide content (grids) can still scroll
   inside its own wrapper.                                                     */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* .k-drawer-content is the flex item that holds the page, and Kendo's theme already
   gives it `overflow: auto`. A flex item defaults to min-width:auto and so refuses
   to shrink below its widest child — which is how one over-wide grid used to
   stretch the whole shell and push the app bar off-screen. Letting it shrink turns
   the pane into the horizontal scroller instead.

   Note this pairs with `body { overflow-x: hidden }` above: the page itself never
   scrolls sideways, but anything wider than the pane stays reachable by scrolling
   the pane. Do NOT add a blanket `max-width: 100%` to the pane's descendants —
   that clips wide content with nothing left to scroll. */
.k-drawer-container > .k-drawer-content,
#drawer-content,
#drawer-content > main {
    min-width: 0;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}


/* ── 2. App shell: drawer ──────────────────────────────────────────────────
   Kendo wraps #drawer like this:

       .k-drawer-container.k-drawer-push[.k-drawer-expanded]
         └ #drawer.k-drawer.k-drawer-start
             └ .k-drawer-wrapper        (width animated 0 <-> 240)
         └ .k-drawer-content
             └ #drawer-content

   The drawer is created with mode:"push" and width 240. On a 360px phone that
   leaves ~120px of usable page, so below the tablet breakpoint the panel is
   lifted out of the flow and floated over the content instead. Only positioning
   changes, so Kendo's width animation and swipe-to-open still work.
   `.k-drawer-push .k-drawer` sets position:relative, hence the id here.        */

@media (max-width: 991.98px) {
    #drawer.k-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        height: auto;
        /* Kendo Windows start at z-index 10001, so the floating drawer sits just
           under them: a modal must never end up behind the side menu. */
        z-index: 9800;
        box-shadow: 0 0 44px rgba(0, 0, 0, .55);
    }

        #drawer.k-drawer > .k-drawer-wrapper {
            max-width: 84vw;
        }

    /* With the drawer floating, the content pane owns the full width. */
    .k-drawer-container > .k-drawer-content {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* Scrim behind the floating drawer — tapping it closes the menu. Added and
   toggled by _AppLayout; inert (and never painted) above the breakpoint. */
.mz-drawer-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9790; /* just under the drawer panel, well under Kendo's modal layer */
    background: rgba(2, 6, 23, .45);
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 991.98px) {
    .mz-drawer-scrim.is-visible {
        display: block;
    }
}

/* The page's only horizontal breathing room is main.p-2 (8px); .k-drawer-content
   carries no padding of its own. Tighten it a notch on phones so grids and cards
   get the width back. */
@media (max-width: 575.98px) {
    #drawer-content > main.p-2 {
        padding: 4px !important;
    }
}


/* ── 3. App shell: top bar ─────────────────────────────────────────────────
   #appbar is a Kendo AppBar holding [menu toggle][title][spacer][Sign Out]. The
   title is free text and long page names used to push Sign Out off the edge.   */

@media (max-width: 991.98px) {
    #appbar {
        padding: 0 6px !important;
        margin: 6px 4px 10px !important;
        border-radius: 12px;
        min-height: 46px;
    }

        #appbar .k-appbar-section,
        #appbar .k-appbar-content {
            min-width: 0;
        }

        #appbar .appTitle {
            font-size: 15px !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        #appbar .app-bar-link,
        #appbar .signout-link {
            white-space: nowrap;
            font-size: 13px;
        }
}

@media (max-width: 575.98px) {
    #appbar .appTitle {
        font-size: 14px !important;
        max-width: 42vw;
    }
}


/* ── 4. Kendo Window ───────────────────────────────────────────────────────
   Widths are passed as fixed pixels at the call sites (1400 / 1200 / 950 / 850 …).
   ControlHelper now clamps those to the viewport and full-screens them on
   phones; these rules are the safety net for windows created directly with
   $().kendoWindow(). .k-dialog is excluded — kendo.alert/confirm size themselves
   and full-screening a one-line confirm looks broken.                          */

.k-window:not(.k-dialog) {
    max-width: 100vw;
    max-height: 100vh;
    box-sizing: border-box;
}

.k-window-content {
    max-width: 100%;
}

/* kendo.alert / kendo.confirm / kendo.prompt */
.k-dialog {
    max-width: calc(100vw - 24px);
}

@media (max-width: 767.98px) {
    /* Windows are maximized by ControlHelper on phones; drop the rounding and
       the drag affordance so the sheet reads as full-screen. */
    .k-window.k-window-maximized {
        border-radius: 0 !important;
    }

    .k-window:not(.k-dialog) .k-window-titlebar {
        padding-block: 6px;
        padding-inline: 10px;
    }

    .k-window:not(.k-dialog) .k-window-title {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .k-window:not(.k-dialog) > .k-window-content {
        padding: 10px;
    }

    /* Kendo's action bar stacks awkwardly at narrow widths. */
    .k-dialog .k-dialog-actions,
    .k-window .k-dialog-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
}


/* ── 5. Kendo Grid ─────────────────────────────────────────────────────────
   Grids keep their pixel column widths and scroll sideways — collapsing columns
   would hide data the staff rely on. What changes on small screens is the
   chrome: toolbar wraps, search box goes full width, pager loses its optional
   parts, cells tighten up.                                                     */

.k-grid {
    max-width: 100%;
}

/* Kendo's .k-grid-content is the grid's own horizontal scroller and keeps the
   header in sync with the body, so it should be the ONLY horizontal scroller
   around a grid. Do not pin a grid to a hand-counted `min-width` inside another
   `overflow-x: auto` wrapper: the two nest, fight each other on touch, and the
   right-hand columns become unreachable. Momentum scrolling for older iOS. */
.k-grid .k-grid-content {
    -webkit-overflow-scrolling: touch;
}

/* Several views drop a grid straight into a `d-flex` row. A flex item defaults to
   min-width:auto, i.e. it refuses to shrink below its content — so an over-wide
   grid stretched the panel (and the page) instead of scrolling inside it. */
.d-flex > .k-grid,
.form-panel .d-flex > div {
    min-width: 0;
}

.k-grid-toolbar,
.k-grid .k-toolbar {
    flex-wrap: wrap;
    row-gap: 6px;
}

@media (max-width: 767.98px) {
    /* site.css pins the grid search box to 300px; give it the row instead. */
    .k-grid .k-grid-toolbar .k-searchbox,
    .k-grid .k-toolbar .k-searchbox {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .k-grid-toolbar > * {
        max-width: 100%;
    }

    .k-grid .k-grid-header th.k-header,
    .k-grid .k-grid-content td,
    .k-grid .k-grid-footer td {
        padding-block: 7px;
        padding-inline: 8px;
        font-size: .8rem;
    }

    .k-grid .k-grid-header th.k-header {
        font-size: .68rem;
    }

    /* Row command buttons: keep a 34px tap target but drop the label. */
    .k-grid .k-command-cell .k-button {
        padding: 4px 6px;
        min-width: 34px;
        min-height: 34px;
    }

    .k-grid .k-command-cell {
        white-space: nowrap;
    }

    /* Pager: page numbers and the prev/next arrows are the only parts that earn
       their space on a phone. */
    .k-pager .k-pager-info,
    .k-pager .k-pager-sizes {
        display: none;
    }

    .k-pager {
        flex-wrap: wrap;
        row-gap: 4px;
        padding: 4px;
    }

    /* Column filter/menu popups spill off-screen at their default width. */
    .k-animation-container .k-filter-menu,
    .k-animation-container .k-column-menu {
        max-width: calc(100vw - 16px);
    }
}

/* Grids that opt out of Kendo's own scrolling (scrollable:false) need a wrapper
   that scrolls, otherwise the widest column decides the page width.
   `.grid-container` is the same idea: an empty hook in site.css that the modal
   partials already wrap their grids in — make it the scroller it was meant to be. */
.mz-grid-scroll,
.grid-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mz-grid-scroll {
    width: 100%;
}

/* Most list pages open with `<div class="form-panel mt-5 pt-2">`. That 3rem of
   dead space costs a phone a fifth of its screen before the first row. */
@media (max-width: 767.98px) {
    .form-panel.mt-5 {
        margin-top: 1rem !important;
    }
}


/* ── 6. Forms, toolbars and inputs ─────────────────────────────────────────  */

/* Several views hard-code style="width:300px" / "width:170px" on filter inputs
   inside a Kendo ToolBar. Those beat any non-important rule, hence !important. */
@media (max-width: 767.98px) {
    .k-toolbar {
        flex-wrap: wrap;
        row-gap: 6px;
        height: auto;
    }

        .k-toolbar > .k-toolbar-item,
        .k-toolbar > .k-toolbar-items,
        .k-toolbar .k-toolbar-item {
            max-width: 100%;
        }

    /* Kendo separators are noise once the toolbar wraps to several rows. */
    .k-toolbar > .k-separator,
    .k-toolbar > .k-toolbar-separator {
        display: none;
    }

    /* Kendo moves the element's inline width onto the widget wrapper it generates,
       and the wrapper class differs per widget (pickers vs. inputs), so both
       families are listed. */
    .k-toolbar input[style*="width"],
    .k-toolbar .k-picker,
    .k-toolbar .k-input,
    .k-toolbar .k-dropdownlist,
    .k-toolbar .k-combobox,
    .k-toolbar .k-datepicker,
    .k-toolbar .k-datetimepicker,
    .k-toolbar .k-numerictextbox,
    /* Same treatment for stray fixed-width filter inputs outside a toolbar. */
    .rpt-filter-bar input[style*="width"],
    .rpt-filter-bar .k-picker,
    .rpt-filter-bar .k-input,
    .rpt-filter-bar .k-dropdownlist,
    .rpt-filter-bar .k-datepicker,
    .kpi-filter-bar input[style*="width"],
    .kpi-filter-bar .k-picker,
    .kpi-filter-bar .k-input,
    .kpi-filter-bar .k-datepicker {
        width: 100% !important;
        max-width: 100% !important;
    }

    .rpt-filter-group,
    .kpi-filter-group {
        flex: 1 1 100%;
        min-width: 0;
    }

        .rpt-filter-group > .k-widget,
        .rpt-filter-group > .k-picker,
        .rpt-filter-group > .k-input,
        .rpt-filter-group > input {
            flex: 1 1 auto;
            min-width: 0;
        }
}

/* iOS Safari zooms the viewport whenever a focused field is under 16px. Bump the
   font only on phones so the desktop density is untouched. */
@media (max-width: 767.98px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .k-input-inner,
    .k-textbox,
    .k-picker .k-input-inner {
        font-size: 16px !important;
    }
}

/* Button groups used as segmented filters (branch / status pills) must wrap. */
@media (max-width: 767.98px) {
    .k-button-group {
        flex-wrap: wrap;
    }

    .rpt-filter-bar .k-button-group .k-button,
    .rpt-filter-right .k-button-group .k-button {
        padding: 6px 12px !important;
    }
}

/* Kendo Form / editor rows: site.css pins labels to 100px and 400px. */
@media (max-width: 767.98px) {
    .field-label,
    .modal-label {
        width: auto !important;
        max-width: 100%;
    }

    /* Kendo Forms created with orientation:"horizontal" (the edit modals for
       customers, machines, expenses, payment types) put a fixed-width label
       beside the editor. Below md the label goes above it, which is the only way
       both fit. */
    .k-form-horizontal .k-form-field {
        flex-direction: column;
        align-items: stretch;
    }

        .k-form-horizontal .k-form-field > .k-label,
        .k-form-horizontal .k-form-field > .k-form-label {
            width: auto;
            max-width: 100%;
            text-align: left;
            margin-bottom: 2px;
        }

        .k-form-horizontal .k-form-field > .k-form-field-wrap {
            max-width: 100%;
            width: 100%;
        }

    .k-form .k-form-buttons {
        flex-wrap: wrap;
        gap: 8px;
    }

        .k-form .k-form-buttons > .k-button {
            flex: 1 1 auto;
        }
}


/* ── 7. Plain tables ───────────────────────────────────────────────────────
   Several partials render hand-written tables with per-column min-widths. Wrap
   them so the overflow belongs to the table, not the page.                     */

.table-responsive,
.mz-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .table-responsive > table,
    .mz-table-scroll > table {
        margin-bottom: 0;
    }

    table.ds-table th,
    table.ds-table td {
        padding: 6px 8px;
        font-size: 12px;
    }
}


/* ── 8. Floating action buttons ────────────────────────────────────────────
   The voice-command button is fixed bottom-right at 60px. On a phone it lands on
   top of the last grid row and, in modals, on the Save button. Shrink it, tuck it
   into the safe area, and hide it entirely while a modal is open.               */

/* `body` prefix only to out-specify the #voiceCommandBtn block that _AppLayout
   renders inside <body>, which would otherwise win on source order. */
@media (max-width: 991.98px) {
    body #voiceCommandBtn {
        width: 48px;
        height: 48px;
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(14px + env(safe-area-inset-bottom));
    }

        body #voiceCommandBtn .vcb-icon {
            font-size: 21px;
        }

        body #voiceCommandBtn .vcb-pulse {
            width: 48px;
            height: 48px;
        }
}

/* A modal or the floating drawer is open — the button (z-index 9999) would
   otherwise sit on top of it. */
body.mz-modal-open #voiceCommandBtn,
body.mz-drawer-open #voiceCommandBtn {
    display: none !important;
}

@media (max-width: 767.98px) {
    /* Kendo FABs used as "New …" buttons */
    .k-fab {
        z-index: 900;
    }
}


/* ── 9. Utility: responsive page headers ───────────────────────────────────
   .page-header is used with d-flex + justify-content-between; on a phone the
   action buttons need their own row.                                           */

@media (max-width: 767.98px) {
    .page-header {
        flex-wrap: wrap;
        row-gap: 10px;
    }

        .page-header > div {
            min-width: 0;
        }

        .page-header .d-flex.gap-2 {
            flex-wrap: wrap;
            width: 100%;
        }

        .page-header h4 {
            font-size: 1.15rem;
        }
}

/* Bootstrap .row-based page toolbars that used fixed col widths. */
@media (max-width: 767.98px) {
    .mz-stack-sm {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
    }

        .mz-stack-sm > * {
            width: 100%;
        }
}


/* ── 10. Notifications ─────────────────────────────────────────────────────
   site.css fixes toast width at 300/320px, which overflows a 320px phone once
   the Kendo offset is added.                                                   */

@media (max-width: 575.98px) {
    .notification-success,
    .notification-error,
    .notification-clickable {
        width: calc(100vw - 32px) !important;
        max-width: 340px;
    }

    .k-notification-container {
        max-width: 100vw;
    }
}


/* ── 11. Print surfaces ────────────────────────────────────────────────────
   Receipt/invoice views are opened on tablets at the counter.                  */

@media (max-width: 767.98px) {
    .k-card.p-4 {
        padding: 12px !important;
    }
}
