/*
    Mobile card layout for Kendo grids.

    Below the breakpoint every Kendo Grid stops being a horizontally scrolling
    table: each row becomes a card with one "Label: value" line per visible
    column, and the command buttons become an action row at the bottom of the
    card.

    ~/js/mobile-grid.js does the marking: .smvdb-cards on the grid wrapper,
    .smvdb-cards-table on the data table, and a data-title attribute on every
    cell holding its column header. Without that script the grid simply keeps
    its normal desktop layout.

    Breakpoint matches Bootstrap's md.
*/

/* The filter strip is built into every grid but only exists on phones — on a
   desktop the real column headers do this job. */
.smvdb-filterbar {
    display: none;
}

@media (max-width: 767.98px) {

    /* ---------- filter chips ---------- */

    .k-grid.smvdb-cards .smvdb-filterbar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #e2e5e8;
        border-radius: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .smvdb-filterbar-label {
        flex: 0 0 auto;
        font-size: .8rem;
        font-weight: 600;
        color: #1473BA;
    }

    .smvdb-chip {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 6px 12px;
        font-size: .8rem;
        color: #333;
        white-space: nowrap;
        background: #f7f8fb;
        border: 1px solid #d7dbe3;
        border-radius: 999px;
    }

        .smvdb-chip::after {
            content: " \25be";
            opacity: .6;
        }

        /* the column is currently filtering something */
        .smvdb-chip.is-active {
            color: #fff;
            background: #1473ba;
            border-color: #1473ba;
        }

            .smvdb-chip.is-active::after {
                opacity: 1;
            }

    /* Kendo anchors the filter popup to the header cell, which in card mode is
       clipped and can sit far off to the right; show it as a centred sheet.

       Centred with left+right rather than translateX: the popup's open
       animation writes `transform` inline, which beats a plain transform here
       and leaves the sheet starting at the 50% mark instead of straddling it. */
    .k-animation-container.smvdb-filter-sheet {
        position: fixed !important;
        left: 4vw !important;
        right: 4vw !important;
        top: 12vh !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 12000;
    }

        .k-animation-container.smvdb-filter-sheet > * {
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            /* Kendo writes a px height here while animating, which left the
               column menu as a tall empty box */
            height: auto !important;
            max-height: 84vh;
            overflow-y: auto;
            box-sizing: border-box;
            /* Kendo's slide animation leaves a `transform: translateY(0px)`
               standing here, and a transformed element becomes the containing
               block for every fixed-position descendant — which put the date
               filter's calendar back inside this box and its `overflow-y: auto`
               clipped the month navigation off the top. Same reason the
               container above is pinned to transform: none. */
            transform: none !important;
        }

        /* A column menu's filter is a submenu, so two sheets can be open at
           once. The later one is the one the user drilled into, so let it sit
           on top with its own background rather than showing through. */
        .k-animation-container.smvdb-filter-sheet .k-column-menu,
        .k-animation-container.smvdb-filter-sheet .k-filter-menu {
            background: #fff;
        }

        /* the menu items were rendering as blank rows */
        .k-animation-container.smvdb-filter-sheet .k-column-menu .k-link,
        .k-animation-container.smvdb-filter-sheet .k-column-menu .k-item,
        .k-animation-container.smvdb-filter-sheet .k-filter-menu {
            color: #333;
        }

        .k-animation-container.smvdb-filter-sheet .k-column-menu .k-link {
            min-height: 44px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* the submenu must not fly out sideways — it has nowhere to go */
        .k-animation-container.smvdb-filter-sheet .k-group,
        .k-animation-container.smvdb-filter-sheet .k-menu-group {
            position: static !important;
            width: 100% !important;
            max-width: none !important;
            background: #fff;
        }

        /* "Kolonat" is a checkbox list — one comfortable row per column */
        .k-animation-container.smvdb-filter-sheet .k-menu-group .k-item {
            width: 100% !important;
        }

        .k-animation-container.smvdb-filter-sheet .k-menu-group .k-link {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 44px;
            padding: 4px 12px;
            color: #333;
            white-space: normal;
        }

        .k-animation-container.smvdb-filter-sheet .k-menu-group .k-checkbox,
        .k-animation-container.smvdb-filter-sheet .k-menu-group input[type="checkbox"] {
            flex: 0 0 auto;
            width: 18px !important;
            height: 18px;
        }

        /* The theme pins the form's inner container to a flat 250px
           (`.k-filter-menu.k-popup .k-filter-menu-container` in MVC_Theme.css).
           The sheet is already only 92vw, so that left a dead strip down its
           right edge with the fields — the two date inputs worst of all —
           squeezed into what was left.

           A flex column rather than `width: 100%` on each field: the container
           is padded, and a percentage width resolves against a box the padding
           is not taken out of, so the date rows ended up 16px wider than the
           sheet and the calendar button was cut in half at the right edge.
           align-items: stretch has no such arithmetic to get wrong. */
        .k-animation-container.smvdb-filter-sheet .k-filter-menu-container {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: auto !important;
            min-width: 0 !important;
            box-sizing: border-box;
        }

        /* stretch does the widening now; these only have to stop carrying the
           fixed widths the theme gives them */
        .k-animation-container.smvdb-filter-sheet .k-textbox,
        .k-animation-container.smvdb-filter-sheet .k-widget,
        .k-animation-container.smvdb-filter-sheet input.k-input {
            width: auto !important;
            min-width: 0 !important;
            box-sizing: border-box;
        }

        /* The date field itself is a flex row of input + calendar button, and
           the rule above leaves the input sized to its text — which on an empty
           filter is nothing, so the button sat stranded in the middle of the
           row. Let the input take the slack instead. */
        .k-animation-container.smvdb-filter-sheet .k-picker-wrap > .k-input {
            flex: 1 1 auto;
        }

        /* That popup is a child of the form, which scrolls (max-height above),
           and an absolutely positioned popup is clipped by its scrolling
           ancestor: the calendar lost its bottom rows and the sheet's own
           Filtro / Pastro buttons disappeared underneath it. Kendo also anchors
           it to the input's document offset, which on a phone put it past the
           right edge.

           position: fixed takes it out of the scroller and off the anchor. It
           is safe here because the sheet above forces transform: none — a
           transformed ancestor would become the containing block and put the
           popup right back inside the clip. */
        .k-animation-container.smvdb-filter-sheet .k-animation-container {
            position: fixed !important;
            left: 4vw !important;
            right: 4vw !important;
            top: auto !important;
            bottom: 2vh !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            height: auto !important;
            /* both !important: Kendo writes an inline height and an inline
               overflow on this element, so without it a popup taller than the
               screen would have no way to scroll */
            max-height: 76vh !important;
            overflow-y: auto !important;
            margin: 0 !important;
            /* not display: flex — Kendo shows and hides the popup by toggling
               display on this very element */
            text-align: center;
            transform: none !important;
        }

        /* centred inside the sheet above, which is wider than the calendar
           once the rules further down have stacked it */
        .k-animation-container.smvdb-filter-sheet .k-calendar {
            display: inline-flex !important;
            text-align: left;
        }

        /* the operator list, on the other hand, should fill it */
        .k-animation-container.smvdb-filter-sheet .k-animation-container .k-list-container {
            width: 100% !important;
            text-align: left;
        }

        /* Filtro / Pastro share the row instead of each taking a full line */
        .k-animation-container.smvdb-filter-sheet .k-action-buttons {
            display: flex;
            gap: 8px;
        }

        .k-animation-container.smvdb-filter-sheet .k-button {
            flex: 1 1 0;
            width: auto !important;
            min-width: 0;
            min-height: 44px;
        }

    /* ---------- grid shell: drop the fixed height and the inner scrollers ---------- */

    .k-grid.smvdb-cards {
        height: auto !important;
        border-width: 0;
        background: transparent;
    }

    /* Not display:none. Kendo re-measures the grid on resize and reads the
       header cell widths; a display:none header measures 0 and it writes
       nonsense inline sizes that are still there when you widen the window
       again. visibility:hidden keeps the metrics intact, and position:absolute
       keeps the header out of the card stack. */
    .k-grid.smvdb-cards .k-grid-header {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        pointer-events: none;
    }

    /* Kendo writes width/height inline on all of these, and in card mode those
       values are measured off a layout that is no longer a table — so every one
       of them has to be neutralised rather than merely overridden. */
    .k-grid.smvdb-cards .k-grid-content {
        height: auto !important;
        max-height: none !important;
        width: auto !important;
        overflow: visible !important;
    }

    .smvdb-cards-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        table-layout: auto;
    }

        .smvdb-cards-table > colgroup,
        .smvdb-cards-table > thead {
            display: none;
        }

        .smvdb-cards-table > tbody {
            display: block;
            width: auto !important;
            height: auto !important;
        }

    /* ---------- one card per row ---------- */

    .smvdb-cards-table > tbody > tr {
        display: block;
        width: auto !important;
        height: auto !important;
        margin: 0 0 12px;
        background: #fff;
        border: 1px solid #e2e5e8;
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
        /* not overflow:hidden — that clips the validation tooltip Kendo puts
           inside the cell while editing */
        overflow: visible;
    }

        .smvdb-cards-table > tbody > tr:last-child {
            margin-bottom: 0;
        }

        /* alternating rows would make every second card look disabled */
        .smvdb-cards-table > tbody > tr.k-alt {
            background: #fff;
        }

    /* ---------- cells become "Label            value" lines ---------- */

    .smvdb-cards-table > tbody > tr > td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        /* All three, not just width: several views pin grid columns with
           `width/min-width/max-width: 220px !important` for the desktop table.
           Overriding width alone leaves max-width standing — and max-width wins
           over width — so the cells stayed 220px wide inside a full-width card,
           with the labels wrapping against a half-empty card. */
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 9px 14px;
        border-width: 0;
        font-size: .875rem;
        text-align: right;
        /* !important for the same reason as the widths above, and it has to be
           stronger than specificity alone can manage: Reports/ShowReports
           truncates its cells with `#gridReports td { white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis }`, and an id selector
           outranks anything written here. A card has the whole width of the
           screen to wrap into, so a value cut down to an ellipsis in it is
           text the reader simply cannot get at. */
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
    }

        /* No `display` value on the rule above may be !important: Kendo hides
           columns with an inline display:none that has to keep winning. */
        .smvdb-cards-table > tbody > tr > td.k-hidden,
        .smvdb-cards-table > tbody > tr > td.k-group-cell,
        .smvdb-cards-table > tbody > tr > td.k-hierarchy-cell {
            display: none !important;
        }

        .smvdb-cards-table > tbody > tr > td + td {
            border-top: 1px solid #f1f2f6;
        }

        .smvdb-cards-table > tbody > tr > td[data-title]::before {
            content: attr(data-title);
            flex: 0 0 42%;
            font-weight: 600;
            color: #1473BA;
            text-align: left;
        }

    /* ---------- editing ----------

       Two modes are in use: InLine (the whole row becomes .k-grid-edit-row)
       and InCell (the clicked cell alone gets .k-edit-cell). In both the
       "label left / value right" split has to give way, or the editor is
       squeezed into the 58% the label leaves it. Label goes above, editor
       takes the full width of the card.
    */

    .smvdb-cards-table > tbody > tr.k-grid-edit-row > td,
    .smvdb-cards-table > tbody > tr > td.k-edit-cell {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

        .smvdb-cards-table > tbody > tr.k-grid-edit-row > td[data-title]::before,
        .smvdb-cards-table > tbody > tr > td.k-edit-cell[data-title]::before {
            flex: none;
            margin-bottom: 4px;
        }

    /* the cell being edited, so a tap has visible feedback on a phone */
    .smvdb-cards-table > tbody > tr > td.k-edit-cell {
        background: #f4f8ff;
    }

    .smvdb-cards-table > tbody > tr.k-grid-edit-row .k-widget,
    .smvdb-cards-table > tbody > tr.k-grid-edit-row .k-textbox,
    .smvdb-cards-table > tbody > tr.k-grid-edit-row input,
    .smvdb-cards-table > tbody > tr.k-grid-edit-row select,
    .smvdb-cards-table > tbody > tr.k-grid-edit-row textarea,
    .smvdb-cards-table > tbody > tr.k-grid-edit-row .text-box,
    .smvdb-cards-table > tbody > tr > td.k-edit-cell .k-widget,
    .smvdb-cards-table > tbody > tr > td.k-edit-cell .k-textbox,
    .smvdb-cards-table > tbody > tr > td.k-edit-cell input,
    .smvdb-cards-table > tbody > tr > td.k-edit-cell select,
    .smvdb-cards-table > tbody > tr > td.k-edit-cell textarea,
    .smvdb-cards-table > tbody > tr > td.k-edit-cell .text-box {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* comfortable tap target for the editors themselves */
    .smvdb-cards-table > tbody > tr.k-grid-edit-row input.k-input,
    .smvdb-cards-table > tbody > tr.k-grid-edit-row .k-picker-wrap,
    .smvdb-cards-table > tbody > tr.k-grid-edit-row .k-dropdown-wrap,
    .smvdb-cards-table > tbody > tr > td.k-edit-cell input.k-input,
    .smvdb-cards-table > tbody > tr > td.k-edit-cell .k-picker-wrap,
    .smvdb-cards-table > tbody > tr > td.k-edit-cell .k-dropdown-wrap {
        min-height: 40px;
    }

    /* Checkbox editors must not stretch to the full card width — but they need
       an explicit box, not `auto`: these are drawn with appearance:none and an
       explicit width, so `auto` collapses them to a sliver. */
    .smvdb-cards-table > tbody > tr.k-grid-edit-row input[type="checkbox"],
    .smvdb-cards-table > tbody > tr > td.k-edit-cell input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px;
    }

    /* let the validation message flow under the editor instead of being
       absolutely positioned over the next line of the card */
    .smvdb-cards-table > tbody > tr .k-tooltip-validation,
    .smvdb-cards-table > tbody > tr .k-invalid-msg {
        position: static !important;
        display: block !important;
        margin-top: 4px;
        white-space: normal;
    }

    /* ---------- command buttons: action row at the bottom of the card ---------- */

    .smvdb-cards-table > tbody > tr > td.k-command-cell {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        padding: 10px 14px;
        background: #fafbfd;
        border-top: 1px solid #eceef4;
    }

        /* the card no longer clips, so the tinted command cell has to round its
           own outer corners */
        .smvdb-cards-table > tbody > tr > td.k-command-cell:first-child {
            border-radius: 12px 12px 0 0;
        }

        .smvdb-cards-table > tbody > tr > td.k-command-cell:last-child {
            border-radius: 0 0 12px 12px;
        }

        .smvdb-cards-table > tbody > tr > td.k-command-cell .k-button {
            min-width: 44px;
            min-height: 44px;
            margin: 0;
            padding: 6px 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-content: center;
        }

            /* _Layout hides .k-button .k-icon globally; on a card the icon is
               all these buttons have, so bring it back */
            .smvdb-cards-table > tbody > tr > td.k-command-cell .k-button .custom_icons {
                display: block;
            }

    /* ---------- toolbar / pager ---------- */

    .k-grid.smvdb-cards .k-grid-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
    }

        .k-grid.smvdb-cards .k-grid-toolbar > .k-button,
        .k-grid.smvdb-cards .k-grid-toolbar > .AddButton {
            flex: 1 1 auto;
            min-height: 44px;
            padding: 8px 16px !important;
            align-items:center;
        }

    .k-grid.smvdb-cards .k-pager-wrap {
        flex-wrap: wrap;
        row-gap: 6px;
        height: auto;
        padding: 8px;
    }

    .k-grid.smvdb-cards .k-pager-info {
        display: none;
    }

    /* ---------- popups (filter menu, column menu, kendo window) ---------- */

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

    .k-filter-menu,
    .k-column-menu {
        max-width: 92vw;
    }

    /* ---------- date picker calendar ---------- */

    /* The theme lays a calendar out as a single flex *row*: month navigation
       down the left, the day grid in the middle, the "today" link down the
       right. That comes to 489px before any popup padding — wider than the
       phone itself, so the last weekday columns fell off the side of the
       screen with no way to scroll to them.

       Not scoped to the filter sheet: the same calendar is behind every date
       field in the app, and it was the same 489px wide in a form as it was in
       a grid's date filter. Stack the three parts instead. */
    .k-calendar {
        display: flex !important;
        flex-direction: column;
        width: auto !important;
        max-width: 100%;
    }

        /* was a vertical strip beside the days; now a bar above them */
        .k-calendar > .k-header {
            width: auto !important;
            height: auto !important;
            align-items: center;
            justify-content: space-between;
        }

        /* these stretched to the full height of the strip they used to be in */
        .k-calendar > .k-header > .k-link {
            height: auto !important;
            min-height: 44px;
        }

            .k-calendar > .k-header > .k-nav-prev,
            .k-calendar > .k-header > .k-nav-next {
                min-width: 44px;
                justify-content: center;
            }

        .k-calendar > .k-calendar-view,
        .k-calendar > .k-footer {
            width: auto !important;
            height: auto !important;
        }

        .k-calendar > .k-footer > .k-nav-today {
            display: block;
            min-height: 44px;
            text-align: center;
        }

    /* ---------- plain (non-grid) tables ---------- */

    /* mobile-grid.js tags every table outside a .k-grid or .k-calendar. The card layout does
       not apply to them, so let them scroll sideways inside their own box
       instead of pushing the page wider than the screen. */
    /* The width trio is !important because the point of this rule is to make
       the *box* fit the screen while its contents scroll inside it. A view that
       declares its own width on the table — PlanChangeBudget/_PlanChangeBudget
       sets `.totals-container table { min-width: 990px }` — otherwise wins on
       specificity, and min-width beats max-width, so the block itself became
       990px wide and pushed the whole page into a horizontal scroll instead of
       scrolling within its own box. */
    .smvdb-scroll-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Sideways scrolling is a fair fallback for a table you only read, but not
       for one you have to fill in: a two-column "label | field" table is a form
       wearing a table's clothes, and scrolling the field out of view while
       typing makes it unusable. Add this class in the view and each row becomes
       label above, full-width field below.

       Opt-in rather than automatic, and it must stay below .smvdb-scroll-table:
       mobile-grid.js puts that class on every plain table, so both end up on
       the same element and this one only wins by coming later. */
    .smvdb-stacked-table {
        display: block;
        width: 100%;
        overflow-x: visible;
    }

        /* A two-column header reads as nonsense once the columns are stacked,
           so it is hidden here and mobile-grid.js copies each header onto the
           cells below it instead — same as a grid card. */
        .smvdb-stacked-table > thead {
            display: none;
        }

        .smvdb-stacked-table > tbody,
        .smvdb-stacked-table > tbody > tr,
        .smvdb-stacked-table > tbody > tr > td {
            display: block;
            width: auto;
        }

        .smvdb-stacked-table > tbody > tr {
            padding: 8px 0;
            border-bottom: 1px solid #dee2e6;
        }

            .smvdb-stacked-table > tbody > tr:last-child {
                border-bottom: 0;
            }

            .smvdb-stacked-table > tbody > tr > td {
                padding: 6px 12px;
                border: 0;
                /* The theme puts `white-space: nowrap` on every `.table td`
                   (assets/css/style.css). A cell that cannot wrap is as wide as
                   its longest line, so the Indicators questions — full sentences
                   — ran straight out of the card and were cut off at the edge,
                   the labels above them dragged sideways with the scroll.
                   Sideways scrolling is what .smvdb-scroll-table is for; a
                   stacked cell is a form field and has to wrap.

                   break-word as well: the sentences wrap on their spaces, but a
                   long unbroken token — a URL in an answer, a reference number —
                   would still push the cell out on its own. */
                white-space: normal;
                overflow-wrap: break-word;
            }

                /* A view that right-aligns or centres a cell is arranging a
                   *column* — money under money, an icon button under its
                   header. Stacked, every cell is a full-width block of its own,
                   so that alignment only drags the value away from the label
                   sitting right above it: in Application Summary's budget rows
                   the amounts and their labels drifted to the right edge while
                   the rest of the row stayed left.

                   The alignment classes have to be named rather than just
                   overridden from the cell: the theme ships them as
                   `[data-pc-direction=ltr] .text-end { text-align: right
                   !important }`, and two compound selectors outrank the one
                   class plus three elements above no matter the !important.

                   `start`, not `left`, so the page stays correct if it is ever
                   rendered RTL. */
                .smvdb-stacked-table > tbody > tr > td,
                .smvdb-stacked-table > tbody > tr > td.text-end,
                .smvdb-stacked-table > tbody > tr > td.text-right,
                .smvdb-stacked-table > tbody > tr > td.text-center {
                    text-align: start !important;
                }

                /* the column header, put here by stampStackedTables() */
                .smvdb-stacked-table > tbody > tr > td[data-title]::before {
                    content: attr(data-title);
                    display: block;
                    margin-bottom: 3px;
                    font-size: .78rem;
                    font-weight: 600;
                    color: #1473BA;
                }

        .smvdb-stacked-table .form-control,
        .smvdb-stacked-table .k-widget,
        .smvdb-stacked-table input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
        .smvdb-stacked-table select,
        .smvdb-stacked-table textarea {
            width: 100%;
            box-sizing: border-box;
        }

    /* ---------- kendo window ---------- */

    /* Windows are opened with a px width measured for a desktop; on a phone
       that hangs off the side of the screen.

       min-width has to be reset too, and it is the one that actually matters:
       several of the views loaded into a window over ajax ship a
       `.k-window { min-width: 600px !important }` in their own <style>
       (NGOStaffCV, ContractDetailsCriteria, AddEditNGOStaff, _AddComplaints).
       That style lands on the parent page when the content loads, and
       min-width beats both width and max-width — so without this the window
       stays 600px wide on a 390px screen no matter what is set below.
       .k-widget.k-window outranks their plain .k-window, both being
       !important. */
    /* position: fixed, not Kendo's absolute. A Kendo Window is positioned
       against the document, so a `.Position(Top "10%")` set on the server means
       10% down the *page* — open it after scrolling and the dialog sits far
       above the viewport, and the user has to scroll back up to find it. Its
       own modal overlay is already position: fixed (MVC_Theme.css), so the
       backdrop covered the screen while the dialog did not. Fixed puts the two
       back in agreement and makes top/left below mean what they look like they
       mean, matching how the Bootstrap modals on the same pages behave. */
    .k-widget.k-window {
        position: fixed !important;
        left: 2vw !important;
        top: 4vh !important;
        width: 96vw !important;
        min-width: 0 !important;
        max-width: 96vw !important;
        max-height: 90vh;
        box-sizing: border-box;
    }

    .k-widget.k-window > .k-window-content {
        width: auto !important;
        max-height: 78vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    /* Kendo's own edit-form wrapper, used by every popup editor and by the
       hand-written forms that copy the class. The theme declares
       `width: 400px; min-width: 400px` (MVC_Theme.css) — views that already
       override the width leave the min-width standing, and the form then runs
       off the side of a window narrower than 400px, taking the Cancel button
       with it. Same trap as the window's own min-width above. */
    .k-edit-form-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}