/* ============================================================================
   TABLET RESPONSIVE REFINEMENTS (max-width 768px)
   Additional tweaks for tablet-sized screens.
   ============================================================================ */

/* --- Tablet & below (≤ 768px) --- */
@media screen and (max-width: 768px) {

    #ContainerVMLeftDock {
        /* Allow left dock to shrink fully on tablet */
        width: 100% !important;
        max-width: 100vw !important;
    }

    #OrderRenewalButtons {
        grid-template-columns: 36px 36px 36px 36px 1fr auto !important;
    }

    #OrderCreateFormFooter,
    #OrderEditFormFooter {
        grid-template-columns: auto 1fr auto !important;
        overflow-x: auto !important;
    }

    /* Order form: tighter on tablet */
    #OrderCreateForm #scrollContainer > .grid:first-child,
    #OrderEditForm #scrollContainer > .grid:first-child {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Address email row: stack on tablet */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-auto-rows"],
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-auto-rows"] {
        grid-template-columns: 1fr !important;

    }

    /* ── Phase 2: Tablet order card tweaks ── */
    .orderListRow {
        padding: var(--space-sm) var(--space-md) !important;
    }

}