/* ==========================================================================
   vOps — mobile theme
   ==========================================================================
   One place for how the app behaves on a phone. Every page loads this after
   app.css (see layouts/base.html), so a rule added here reaches all pages;
   nothing in here should need repeating page by page.

   Breakpoints match Tailwind: "phone" means below `sm` (640px). Touch rules
   key off the input device rather than the width, so a tablet with a finger
   gets big targets and a laptop with a trackpad keeps its hover reveals.

   Sections
     1. Card + section padding
     2. Touch targets (buttons, inputs, Leaflet controls)
     3. Squished headers — card title rows wrap instead of crushing
     4. Wide tables scroll sideways instead of clipping
     5. Hover-only affordances made visible on touch
     6. Opt-in utilities for page authors (.vops-m-*)
   ========================================================================== */

/* ---------- 1. Card + section padding ----------------------------------- */
/* Desktop cards breathe with 1.5rem gutters; on a 390px screen that eats a
   fifth of the width. Pull Tailwind's wider paddings in to 1rem. */
@media (max-width: 639px) {
    [class~="px-6"], [class~="px-5"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    [class~="p-6"], [class~="p-5"] {
        padding: 1rem !important;
    }
    [class~="px-8"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

/* ---------- 2. Touch targets -------------------------------------------- */
@media (pointer: coarse) {
    /* Button-styled controls: the app's buttons are inline-flex + rounded.
       Bare icon buttons (pencils, ✓/✕) are left alone. */
    button[class~="inline-flex"],
    button[class~="rounded-md"],
    button[class~="rounded-lg"],
    button[class~="rounded-full"],
    a[class~="inline-flex"][class~="rounded-md"],
    a[class~="inline-flex"][class~="rounded-lg"],
    a[class~="inline-flex"][class~="rounded-full"] {
        min-height: 2.5rem;
    }

    /* Form controls: tall enough for a thumb… */
    select,
    textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]) {
        min-height: 2.5rem;
    }
    /* …and never smaller than 16px, or iOS zooms the page on every focus. */
    select, textarea, input {
        font-size: max(16px, 1em);
    }
    input[type="checkbox"], input[type="radio"] {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Filter bars: a row of fixed-width selects turns ragged once it wraps on a
   phone. Standalone (rounded) selects go full width; selects inside a table
   cell keep the cell's width. */
@media (max-width: 639px) {
    select[class~="rounded-md"] {
        width: 100%;
    }
    td select, th select {
        width: auto;
    }

    /* Leaflet's 30px controls are a miss on a truck seat. */
    .leaflet-bar a,
    .leaflet-bar a:hover {
        width: 36px;
        height: 36px;
        line-height: 36px;
    }
    .leaflet-touch .leaflet-control-zoom-in,
    .leaflet-touch .leaflet-control-zoom-out {
        font-size: 22px;
    }
}

/* ---------- 3. Squished headers ----------------------------------------- */
/* The standard card header is `flex items-center justify-between` holding a
   title and a cluster of controls. On a phone the controls crush the title
   into a word-per-line column. Let the row wrap: title first, controls on
   the line below, full width. */
@media (max-width: 639px) {
    [class~="shadow"] > [class~="border-b"][class~="flex"][class~="items-center"][class~="justify-between"] {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    /* A control cluster that is itself a flex row wraps too. */
    [class~="shadow"] > [class~="border-b"][class~="flex"][class~="items-center"][class~="justify-between"] > [class~="flex"] {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
}

/* ---------- 4. Wide tables ---------------------------------------------- */
/* Operational tables are 5–8 columns and were being clipped by their card's
   overflow-hidden. Let the table itself scroll sideways on a phone; the
   card keeps its rounded corners and the rest of the page never scrolls
   horizontally. */
@media (max-width: 639px) {
    table[class~="min-w-full"],
    table[class~="w-full"] {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- 5. Hover-only affordances ----------------------------------- */
/* Inline-edit pencils reveal on hover; a phone has no hover. Keep them
   faintly visible so editing stays discoverable. */
@media (hover: none) {
    .edit-pencil { opacity: 0.45 !important; }
}

/* ---------- 6. Opt-in utilities ----------------------------------------- */
/* For the cases the global rules cannot infer. Add the class in the markup
   once; the behaviour is defined here.

   .vops-m-stack    flex row → column of full-width children on a phone
   .vops-m-full     full-width on a phone (buttons, selects)
   .vops-m-hide     hidden on a phone
   .vops-m-only     shown only on a phone
   .vops-m-sheet    modal panel → edge-to-edge sheet on a phone           */
@media (max-width: 639px) {
    .vops-m-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .vops-m-stack > * {
        width: 100%;
    }
    .vops-m-full {
        width: 100% !important;
    }
    .vops-m-hide {
        display: none !important;
    }
    .vops-m-sheet {
        min-height: 100%;
        max-width: none !important;
        border-radius: 0 !important;
    }
}
@media (min-width: 640px) {
    .vops-m-only {
        display: none !important;
    }
}