/*
    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;
        }

        /* 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 operator dropdowns and value inputs should use the full sheet */
        .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: 100% !important;
            box-sizing: border-box;
        }

        /* 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;
        width: auto !important;
        padding: 9px 14px;
        border-width: 0;
        font-size: .875rem;
        text-align: right;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        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;
        }

            /* _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;
    }

    /* Kendo Windows are handled in mobile.css — keeping a second set of rules
       here only made it harder to see which one was winning. */
}