/* ============================================================================
 * Infinity CMMS - Mobile / Responsive styles
 * ============================================================================
 *
 * Layered ON TOP OF app.css. Loaded AFTER app.css via a second <link> in
 * index.html so its rules win specificity ties.
 *
 * Phase 1 scope (this file at v1):
 *   - Sidebar (.sb) becomes a slide-in drawer below 900px
 *   - Hamburger button visible only on mobile
 *   - Backdrop overlay shown when drawer is open
 *   - Body scroll locked when drawer is open
 *   - Touch-target sizing (min-height 44px on tap-able elements)
 *   - Stats tiles stack 1-up below 600px
 *   - Modal .x-wide capped at 95vw
 *   - Detail panel becomes full-screen below 700px
 *
 * Later phases will add per-screen rules (WO list column hiding, etc.).
 *
 * Breakpoints:
 *   tablet / small desktop: >= 900px  (default desktop behavior unchanged)
 *   phone landscape / small tablet: 600px - 899px (drawer + lightly stacked)
 *   phone portrait:        < 600px   (fully stacked, large touch targets)
 * ============================================================================ */


/* ─────────────────────────────────────────────────────────────────────────
   Hamburger button + backdrop — always in DOM, only VISIBLE on mobile
   ───────────────────────────────────────────────────────────────────────── */

/* Default desktop: both hidden */
.mobile-nav-btn,
.mobile-nav-backdrop {
    display: none;
}

/* Hamburger button — visible below 900px */
.mobile-nav-btn {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1001;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--text2);
    padding: 0;
}

.mobile-nav-btn:hover,
.mobile-nav-btn:focus-visible {
    background: var(--bg);
    color: var(--text);
    outline: none;
}

.mobile-nav-btn svg {
    width: 22px;
    height: 22px;
}

/* Backdrop — covers the page when drawer is open, click to close */
.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.mobile-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}


/* ─────────────────────────────────────────────────────────────────────────
   Below 900px: sidebar becomes drawer + hamburger appears
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {

    /* Show the hamburger */
    .mobile-nav-btn {
        display: flex;
    }

    /* Show the backdrop (still controlled by .is-open for opacity) */
    .mobile-nav-backdrop {
        display: block;
    }

    /* Sidebar becomes a fixed-position drawer, off-screen by default */
    .sb {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        width: 280px;
        max-width: 80vw;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 4px 0 16px rgba(15, 23, 42, 0.18);
        /* Slightly more comfortable padding for touch use */
        padding-top: 64px; /* leave room for the hamburger button overlap */
    }

    .sb.is-open {
        transform: translateX(0);
    }

    /* When drawer is open, lock body so the page underneath doesn't scroll */
    body.mobile-nav-open {
        overflow: hidden;
    }

    /* Sidebar items: larger touch targets */
    .sb-item {
        padding: 12px 12px;
        font-size: 14px;
        min-height: 44px;
    }

    .sb-item svg {
        width: 18px;
        height: 18px;
    }

    /* The .page (main content) takes full width since sidebar is overlaid */
    .page {
        width: 100%;
    }

    /* Header / breadcrumb area: leave room for the hamburger button on the left */
    .bc,
    .top-bar,
    .topbar,
    .header-bar,
    .hdr {
        padding-left: 64px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Below 600px: phone portrait — tighter spacing, stacked stats
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
    /* Stats tiles in a 2-up grid - more efficient than 1-up vertical stack.
       Saves a lot of vertical real estate, important because a phone screen
       fills up fast and the user needs to reach the table beneath. */
    .stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 12px 0;
    }

    .stat {
        min-width: 0;
        width: auto;
        padding: 10px 12px;
    }

    .stat-n {
        font-size: 20px;
    }

    .stat-lbl {
        font-size: 10.5px;
    }

    /* Detail panel goes full-screen instead of 320px slide */
    .dpanel.open {
        width: 100vw !important;
        max-width: 100vw;
        left: 0;
        right: 0;
    }

    .dp-inner {
        width: 100% !important;
    }

    /* Modals fit comfortably */
    .modal,
    .modal.narrow,
    .modal.wide,
    .modal.x-wide {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh;
    }

    /* General table body: shrink padding so even unmodified tables fit better */
    table th,
    table td {
        padding: 6px 8px;
        font-size: 12px;
    }

    /* Forms: stack labels above inputs, full-width inputs */
    form input[type="text"],
    form input[type="email"],
    form input[type="password"],
    form input[type="date"],
    form input[type="number"],
    form select,
    form textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Filter row: wrap horizontally rather than stack vertically -
       stacking each filter button on its own row eats too much vertical space.
       Wrap is a better compromise: fits more filters per row. */
    .frow,
    .tbar {
        flex-wrap: wrap;
        gap: 6px;
    }

    .frow > *,
    .tbar > * {
        flex: 0 1 auto;
        min-width: 0;
    }

    /* Search inputs full width on phone */
    input[id$="-search"] {
        width: 100% !important;
    }

    /* Breadcrumb / current-section indicator: smaller */
    .bc {
        font-size: 13px;
    }

    .bc .cur {
        font-size: 14px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Catch-all defensive rules for mobile
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {

    /* Prevent horizontal page scroll - common landmines */
    html,
    body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Modal x-wide gets a safe cap even at the 600-899 range */
    .modal.x-wide {
        max-width: 95vw;
    }

    /* Stats - already responsive but ensure flex-wrap works */
    .stats {
        flex-wrap: wrap;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Reports section: refine the existing rpt-layout breakpoint
   The reports.css already has rpt-sidebar / rpt-pane side-by-side;
   on phones we want them stacked.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {

    .rpt-layout {
        flex-direction: column;
        gap: 12px;
    }

    .rpt-sidebar {
        flex: 0 0 auto;
        max-height: 240px;
        overflow-y: auto;
        width: 100%;
    }

    .rpt-pane {
        max-height: none;
    }

    .rpt-chart {
        height: 260px;
    }

    .rpt-chart canvas {
        max-height: 260px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Touch hint: pointer:coarse devices get even larger targets
   (this catches actual touch devices including some "desktops" with
   touch screens — pointer media is more reliable than viewport width)
   ───────────────────────────────────────────────────────────────────────── */

@media (pointer: coarse) {

    /* Standard CTA buttons need finger-sized targets */
    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }

    /* Form controls also benefit from comfortable touch */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="number"],
    select {
        min-height: 40px;
    }
}


/* ============================================================================
   PHASE 2: per-screen polish on priority screens
   ============================================================================
   - Work Orders list: hide low-priority columns at narrow widths
   - Assets list: same column-hide strategy
   - Dashboard KPI rows: stack to 1-up below 600px
   - WO detail tabs: shrink and allow horizontal scroll
   - Table action targets: comfortable for touch
   ============================================================================ */


/* ─────────────────────────────────────────────────────────────────────────
   Work Orders list — column hiding (Option A)

   Table structure (11 cols):
     1 WO No   2 Title    3 Asset      4 Priority   5 Status
     6 Assigned 7 Raised  8 Due        9 Labour    10 Spares    11 Actions

   Tablet (600-899px) keep: 1, 2, 4, 5, 8, 11      (6 cols visible)
   Phone  (< 600px)   keep: 1, 2, 5, 11            (4 cols visible)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 899px) and (min-width: 600px) {
    /* Hide columns 3, 6, 7, 9, 10 on tablet-width screens */
    #sec-wo table thead th:nth-child(3),
    #sec-wo table thead th:nth-child(6),
    #sec-wo table thead th:nth-child(7),
    #sec-wo table thead th:nth-child(9),
    #sec-wo table thead th:nth-child(10),
    #sec-wo table tbody td:nth-child(3),
    #sec-wo table tbody td:nth-child(6),
    #sec-wo table tbody td:nth-child(7),
    #sec-wo table tbody td:nth-child(9),
    #sec-wo table tbody td:nth-child(10) {
        display: none;
    }
}

@media (max-width: 599px) {
    /* Hide columns 3, 4, 6, 7, 8, 9, 10 on phone — keep WO No / Title / Status / Actions */
    #sec-wo table thead th:nth-child(3),
    #sec-wo table thead th:nth-child(4),
    #sec-wo table thead th:nth-child(6),
    #sec-wo table thead th:nth-child(7),
    #sec-wo table thead th:nth-child(8),
    #sec-wo table thead th:nth-child(9),
    #sec-wo table thead th:nth-child(10),
    #sec-wo table tbody td:nth-child(3),
    #sec-wo table tbody td:nth-child(4),
    #sec-wo table tbody td:nth-child(6),
    #sec-wo table tbody td:nth-child(7),
    #sec-wo table tbody td:nth-child(8),
    #sec-wo table tbody td:nth-child(9),
    #sec-wo table tbody td:nth-child(10) {
        display: none;
    }

    /* Allow the Title column to wrap nicely since it now has more room */
    #sec-wo table tbody td:nth-child(2) {
        word-break: break-word;
    }

    /* On phone, the .idesc subtitle on each row consumes space — shrink it */
    #sec-wo table tbody td .idesc {
        font-size: 11px;
        opacity: 0.85;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Assets list — column hiding (Option A)

   Table structure (10 cols):
     1 Asset Tag   2 Name/Desc   3 Type        4 Location    5 Make/Model
     6 Condition   7 Active PMs  8 Open WOs    9 Last/Next   10 Actions

   Tablet (600-899px) keep: 1, 2, 3, 4, 6, 8, 10
   Phone  (< 600px)   keep: 1, 2, 8, 10
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 899px) and (min-width: 600px) {
    /* Hide columns 5, 7, 9 on tablet */
    #sec-assets table thead th:nth-child(5),
    #sec-assets table thead th:nth-child(7),
    #sec-assets table thead th:nth-child(9),
    #sec-assets table tbody td:nth-child(5),
    #sec-assets table tbody td:nth-child(7),
    #sec-assets table tbody td:nth-child(9) {
        display: none;
    }
}

@media (max-width: 599px) {
    /* Hide columns 3, 4, 5, 6, 7, 9 on phone — keep Tag / Name / OpenWOs / Actions */
    #sec-assets table thead th:nth-child(3),
    #sec-assets table thead th:nth-child(4),
    #sec-assets table thead th:nth-child(5),
    #sec-assets table thead th:nth-child(6),
    #sec-assets table thead th:nth-child(7),
    #sec-assets table thead th:nth-child(9),
    #sec-assets table tbody td:nth-child(3),
    #sec-assets table tbody td:nth-child(4),
    #sec-assets table tbody td:nth-child(5),
    #sec-assets table tbody td:nth-child(6),
    #sec-assets table tbody td:nth-child(7),
    #sec-assets table tbody td:nth-child(9) {
        display: none;
    }

    #sec-assets table tbody td:nth-child(2) {
        word-break: break-word;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Dashboard — additional KPI row stacking below 600px

   The existing app.css has:
     @media (max-width: 1100px) { .dash-kpi-row { repeat(3, 1fr); } }
     @media (max-width: 700px)  { .dash-kpi-row { 1fr 1fr; } }
     @media (max-width: 800px)  { .kpi-row { 1fr 1fr; } }

   Add stacking at < 600 for both row classes.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
    .dash-kpi-row,
    .kpi-row {
        grid-template-columns: 1fr !important;
    }

    /* Generic dashboard widget tile spacing */
    .dash-wrap {
        padding: 8px 10px;
    }

    /* Charts inside the dashboard get a reasonable height on phone */
    .dash-wrap canvas,
    .dash-wrap .chart-area {
        max-height: 240px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Work Order detail — tabs & form behavior on mobile

   We don't know the exact tab class names (probe didn't find them), so
   apply defensive rules to any horizontally-scrolling tab strips and to
   the detail-panel inner forms.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
    /* Any common "tabs" container - allow horizontal scroll if too wide */
    .tabs,
    .tab-strip,
    .det-tabs,
    [role="tablist"] {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .tabs > *,
    .tab-strip > *,
    .det-tabs > *,
    [role="tab"] {
        flex-shrink: 0;
        min-height: 40px;
    }

    /* Detail-panel forms stack labels above inputs */
    .dp-inner form .row,
    .dp-inner form .form-row,
    .dp-inner .fld-row {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Table action chevrons / icons — make them tappable

   The last column in WO and Assets tables typically holds a chevron or
   action button. On touch devices it must be at least 40-44px tall.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
    table tbody td:last-child {
        min-width: 44px;
    }

    table tbody td:last-child button,
    table tbody td:last-child a,
    table tbody td:last-child svg {
        min-height: 36px;
        min-width: 36px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   CRITICAL: page-section scroll on mobile
   ─────────────────────────────────────────────────────────────────────────

   Desktop layout uses nested overflow containers (page-section is
   overflow:hidden, tbl-wrap inside it is overflow:auto). This works on
   desktop because the table area gets enough room. On mobile, the
   stacked stats tiles + filter row + search push the table area below
   the viewport, and the outer overflow:hidden traps the page so the
   user can't scroll to reach the table.

   Fix: on mobile, let the .page-section itself scroll vertically, and
   tell inner table containers to grow with their content instead of
   constraining themselves.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
    /* The active section must be vertically scrollable so users can reach
       all content (KPI tiles + filter bar + table + ...). */
    .page-section.active {
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* The table area inside each section: grow with content rather than
       being constrained to remaining flex space. */
    .tbl-area {
        flex: 0 0 auto;
        overflow: visible;
        display: block;
    }

    .tbl-wrap {
        flex: 0 0 auto;
        overflow-x: auto;   /* horizontal table scroll within wrap is fine */
        overflow-y: visible; /* but vertical scroll happens on page-section */
        padding: 0 12px 18px;
    }

    /* Stats strip stays at top but doesn't lock the rest in place */
    .stats {
        flex-shrink: 0;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Filter rows: wrap nicely on mobile (no full-width stacking)
   ───────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────
   HEADER FIT — keep the avatar (and its account menu) visible on mobile

   The default header at 375px would overflow because:
   - Logo "Infinity CMMS" with icon  ~120px
   - Breadcrumb "Dashboard / X"     ~150px
   - Back + Add buttons + gap       ~200px
   - Avatar                         ~32px
   - Total ~500px needed; only ~310px available after hamburger padding.

   The .hdr-r is flex-end-aligned via margin-left: auto, so when the row
   overflows, the rightmost items (including the avatar) are pushed off
   the right edge of the viewport.

   Fix: free up horizontal space by hiding/shrinking the less-essential
   header items. The breadcrumb is redundant on mobile (the hamburger
   drawer is the primary nav and the section is always visible as a
   page title). The logo text is decorative. The Add and Back button
   text labels can be hidden since the icons are clear.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
    /* Hide the divider next to the logo - cleaner look */
    .hdr-div {
        display: none;
    }

    /* Shrink button text labels on tablet width to make room for avatar */
    .hdr-btn {
        padding: 0 10px;
    }
}

@media (max-width: 599px) {
    /* On phone: hide breadcrumb entirely - hamburger drawer is the nav */
    .bc {
        display: none;
    }

    /* Hide "Infinity CMMS" text - keep just the colorful icon */
    .logo {
        font-size: 0;
        gap: 0;
    }

    .logo .logo-icon {
        font-size: 15px; /* restore icon's own sizing context */
    }

    /* Strip Back and Add button text labels - keep just icons */
    .hdr-btn {
        padding: 0;
        width: 36px;
        justify-content: center;
        gap: 0;
    }

    .hdr-btn span,
    .hdr-btn #hdr-add-label {
        display: none;
    }

    .hdr-btn svg {
        margin: 0;
    }

    /* Tighten the gap in .hdr-r so avatar fits comfortably */
    .hdr-r {
        gap: 6px;
    }

    /* Tighten header padding overall */
    .hdr {
        padding: 0 10px;
        gap: 8px;
    }

    /* Bump avatar to a touch-friendly size */
    .av {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
}