/* ================================================================
   FLEET MOT CONTROL PANEL — MOBILE SUPPLEMENT
   Add AFTER all other stylesheets on every page:
     <link rel="stylesheet" href="mobile.css">

   Breakpoints used:
     768px  — tablet / small laptop (nav collapses)
     540px  — large phone (grids go 2-col)
     400px  — small phone (grids go 1-col, tightest padding)
================================================================ */


/* ================================================================
   1. NAV BAR — hamburger menu pattern
================================================================ */

/* The toggle checkbox — hidden, drives the mobile menu open/close */
#nav-mobile-toggle {
  display: none;
}

/* mobile-nav.js button — suppressed; sidebar #nav-burger handles mobile nav */
.nav-mobile-burger { display: none !important; }

@media (max-width: 768px) {

  /* Nav bar: logo + title on left, hamburger on right */
  .top-nav {
    flex-wrap: nowrap;
    padding: 10px 14px;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .top-nav-left {
    flex: 1;
    min-width: 0;           /* allow shrink */
    gap: 8px;
  }

  /* Hide the large title text on small screens to save space */
  .top-nav-left .govuk-header__title {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }

  /* Keep the logo a sensible size */
  .mot-logo {
    height: 28px;
  }

  /* Scale down the white badge in the nav on mobile */
  .top-nav .mot-logo {
    height: 34px;
    padding: 2px 5px;
  }

  /* Hide the help sidebar burger from desktop — replaced by nav-mobile-burger label */
  .help-burger {
    display: none !important;
  }

  /* Sidebar hamburger #nav-burger is the trigger on mobile */

  /* Sidebar drawer — full-screen width on mobile */
  #help-sidebar {
    width: 100%;
    max-width: 100%;
  }

  /* No sidebar offset on mobile — drawer overlays */
  .top-nav,
  body.drawer-open #nav-mount,
  body.drawer-open #main-content,
  body.drawer-open #footer-mount,
  body.drawer-open .mot-footer {
    margin-left: 0 !important;
  }

}


/* ================================================================
   2. PAGE WRAPPERS — reduce padding
================================================================ */

@media (max-width: 768px) {
  .app       { padding: 12px 14px; }
  .fe-app    { padding: 12px 14px; }
  .pe-app    { padding: 12px 14px; }
}

@media (max-width: 400px) {
  .app       { padding: 8px 10px; }
  .fe-app    { padding: 8px 10px; }
  .pe-app    { padding: 8px 10px; }
}


/* ================================================================
   3. CARDS — tighter padding on mobile
================================================================ */

@media (max-width: 768px) {
  .card,
  .fe-card {
    padding: 16px;
  }
}

@media (max-width: 400px) {
  .card,
  .fe-card {
    padding: 12px;
  }
}


/* ================================================================
   4. STAT GRIDS — collapse to 2-col then 1-col
================================================================ */

@media (max-width: 768px) {
  .mot-stats-grid        { grid-template-columns: repeat(2, 1fr); }
  .hd-stats-grid         { grid-template-columns: repeat(2, 1fr); }
  .expiry-heatmap        { grid-template-columns: repeat(2, 1fr); }
  .ov-ved-grid           { grid-template-columns: repeat(2, 1fr); }
  #periodResults .expiry-heatmap { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .mot-stats-grid        { grid-template-columns: 1fr; }
  .hd-stats-grid         { grid-template-columns: 1fr; }
  .expiry-heatmap        { grid-template-columns: repeat(2, 1fr); } /* keep 2 — they're colourful tiles */
  .ov-ved-grid           { grid-template-columns: repeat(2, 1fr); }
}


/* ================================================================
   5. FORM ROWS — stack vertically
================================================================ */

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .form-row input[type="text"],
  .form-row .govuk-input,
  .form-row button,
  .form-row .btn {
    width: 100%;
    min-width: unset;
  }

  /* VRM input wrapper */
  .vrm-input-wrapper {
    width: 100%;
  }

  /* Buttons: full width but normal height */
  button, .btn, .govuk-button {
    min-width: unset;
  }

  /* Stats bar — stack vertically */
  .stats-bar {
    flex-direction: column;
    gap: 10px;
  }
}


/* ================================================================
   6. TABLES — horizontal scroll with sticky first column
================================================================ */

@media (max-width: 768px) {
  /* Give all table wrappers horizontal scroll */
  .fe-table-wrap,
  .pe-table-wrap,
  .bulk-results-wrapper,
  #periodVehicleList {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure tables don't shrink below content */
  #fleetTable,
  #periodsTable,
  #bulkResultsTable,
  #incTable {
    min-width: 600px;
  }

  /* Fixed layout so columns don't collapse unpredictably */
  #bulkResultsTable {
    table-layout: auto;
  }

  /* Fleet table toolbar — stack vertically */
  .fe-table-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .fe-page-controls {
    flex-wrap: wrap;
  }

  /* Fleet filters — stack */
  .fe-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .fe-filters input[type="text"],
  .fe-filters select {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  /* Add-vehicle row */
  .fe-row {
    flex-direction: column;
    align-items: stretch;
  }

  .fe-row input,
  .fe-row select,
  .fe-row button {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
    min-width: unset;
  }

  /* Period editor toolbar */
  .pe-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .pe-toolbar-actions {
    flex-wrap: wrap;
  }

  .pe-toolbar-actions button {
    flex: 1 1 calc(50% - 5px);
  }

  /* Upload row */
  .pe-upload-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pe-file-input {
    width: 100%;
    min-width: unset;
  }
}


/* ================================================================
   7. POPUPS — full-screen on mobile
================================================================ */

@media (max-width: 768px) {
  .popup-card,
  #periodAnalysisPopup,
  #cacheEditorPopup,
  #refreshPopup {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    top: 4vh !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* The desktop popupFadeIn keyframes use transform: translate(-50%) which
       fights the mobile left:0/right:0 positioning while the animation runs.
       CSS animations override static !important during playback, so the popup
       flies off-screen for 0.25s. Kill the animation on mobile entirely. */
    animation: none !important;
  }

  /* Period results heatmap — 2 columns */
  #periodResults .expiry-heatmap {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Historical stats in popup */
  #historicalSummaryPopup .mot-stats-grid,
  .hd-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Period vehicle list table */
  #periodVehicleList table {
    min-width: 420px;
  }

  /* Popup actions — stack */
  .popup-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .popup-actions button {
    width: 100%;
  }
}


/* ================================================================
   8. VEHICLE CARD (single MOT lookup)
================================================================ */

@media (max-width: 600px) {
  .vc-body {
    grid-template-columns: 1fr;
  }

  .vc-section + .vc-section {
    border-left: none;
    border-top: 1px solid var(--card-border);
  }

  .vc-vrm {
    font-size: 1.2rem;
  }
}


/* ================================================================
   9. FOOTER — stack logo above attribution cards on mobile
================================================================ */

@media (max-width: 768px) {
  .mot-footer {
    padding: 20px 16px 16px;
    margin-left: 0 !important;  /* never shifts on mobile */
  }

  .mot-footer__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .mot-footer__logo {
    width: 140px;
  }

  .mot-footer__right {
    width: 100%;
    justify-content: flex-start;
  }

  .mot-footer__api-card {
    min-width: unset;
    flex: 1 1 calc(50% - 8px);
  }
}

@media (max-width: 400px) {
  .mot-footer__api-card {
    flex: 1 1 100%;
  }
}


/* ================================================================
   10. EXPORT ROW — wrap buttons
================================================================ */

@media (max-width: 768px) {
  .export-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .export-row button {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
  }
}


/* ================================================================
   11. LOGIN PAGE — tighter card
================================================================ */

@media (max-width: 540px) {
  /* .login-card padding is inline — override it */
  .login-card {
    padding: 20px 16px !important;
  }

  .lf-row {
    grid-template-columns: 1fr !important;
  }

  .opco-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   12. BULK RESULTS TABLE — hide less-critical columns on small screens
================================================================ */

@media (max-width: 540px) {
  /* Keep VRM, Make/Model, Status, Expiry — hide extras */
  #bulkResultsTable th:nth-child(4),
  #bulkResultsTable td:nth-child(4) {
    display: none;
  }
}


/* ================================================================
   13. QUICK LOOKUP FAB — reposition above footer thumb zone
================================================================ */

@media (max-width: 768px) {
  .quick-lookup-btn {
    bottom: 16px;
    right: 16px;
    padding: 12px 16px;
    font-size: 0.9rem;
  }
}


/* ================================================================
   14. ADMIN USERS PAGE — assumed table/form pattern
================================================================ */

@media (max-width: 768px) {
  .admin-table-wrap,
  .admin-users-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ================================================================
   15. CACHE MANAGER PAGE — assumed table
================================================================ */

@media (max-width: 768px) {
  .cache-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ================================================================
   16. TOUCH TARGETS — ensure all interactive elements are
   at least 44×44px on mobile (WCAG 2.5.5 guideline)
================================================================ */

@media (max-width: 768px) {
  button,
  .btn,
  .govuk-button,
  .nav-btn,
  .fe-page-btn,
  .fe-delete-btn,
  .pe-clear-btn,
  .history-btn,
  select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  .govuk-input,
  .govuk-select {
    min-height: 44px;
  }

  /* Checkbox rows — more generous tap area */
  .checkbox-row,
  .period-depot-row,
  .opco-grid label {
    padding: 4px 0;
    min-height: 36px;
    align-items: center;
  }
}


/* ================================================================
   17. TYPOGRAPHY — scale down large headings
================================================================ */

@media (max-width: 540px) {
  .section-title  { font-size: 1.2rem; }
  .card h2        { font-size: 1.2rem; }
  .popup-header h2 { font-size: 1.2rem; }
  .govuk-header__title { font-size: 0.9rem !important; }
}


/* ================================================================
   18. MISC FIXES
================================================================ */

/* ================================================================
   19. FLEET OVERVIEW TABLE — mobile column visibility
================================================================ */

/* Hide on mobile: VRM, Depot, Fuel, Days, Tax Status, Tax Due */
@media (max-width: 768px) {
  .ov-col-vrm,
  .ov-col-depot,
  .ov-col-fuel,
  .ov-col-days,
  .ov-col-tax-status,
  .ov-col-tax-due { display: none; }

  /* Expired row — red tint */
  #overviewVehicleTable tbody tr.ov-row-expired td { background: #FEF2F2 !important; }
  #overviewVehicleTable tbody tr.ov-row-due    td { background: #FFFBEB !important; }

  /* EXP badge — hidden on desktop, visible here */
  .ov-exp-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: #991B1B;
    color: #fff;
    vertical-align: middle;
  }
}

/* Keep the badge hidden on desktop */
.ov-exp-badge { display: none; }

/* Wrap the overview vehicle table so it scrolls if any cols remain wide */
@media (max-width: 768px) {
  .ov-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ================================================================
   20. PERIOD ANALYSIS — weekly breakdown mobile columns
================================================================ */

@media (max-width: 768px) {
  /* Weekly table: show only Week label + dates + Total + FTP */
  .pa-wk-pass,
  .pa-wk-pwd,
  .pa-wk-prs,
  .pa-wk-fail { display: none; }

  /* Inline vehicle list: show Fleet + date + result; hide VRM/depot/expiry */
  .pa-vl-vrm,
  .pa-vl-depot,
  .pa-vl-expiry { display: none; }

  /* Main heatmap-bucket vehicle list — redundant on mobile now */
  #periodVehicleList { display: none; }
}


/* ================================================================
   22. ANALYTICS DASHBOARD — mobile layout
================================================================ */

@media (max-width: 768px) {
  /* Period chips — horizontal scroll, single row */
  .period-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 4px;
  }
  .period-chip { flex-shrink: 0; font-size: 0.68rem; padding: 2px 8px; }

  /* Charts — single column, capped height */
  #dashRow1,
  #dashRow2 { grid-template-columns: 1fr; gap: 14px; }

  .dash-chart-wrap      { height: 180px; }
  .dash-chart-wrap-tall { height: 220px; }

  /* Defect-by-depot chart is wide bar; hide on mobile */
  #dashDepotDefectCard { display: none !important; }

  /* FTP by model: hide matrix table, show class cards */
  .dash-ftp-table-wrap { display: none; }
  .dash-ftp-mobile-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 8px 0 4px;
  }

  /* Defect table — Code + Category only */
  .def-col-desc,
  .def-col-count,
  .def-col-vrms,
  .def-col-periods,
  .def-col-opcos,
  .def-col-pct { display: none; }

  /* Detail drill-down — Date + Fleet + Depot only */
  .def-dd-hide-vrm,
  .def-dd-hide-result,
  .def-dd-hide-text { display: none; }

  /* Period breakdown — Period + Tests + Fail + FTP Rate only */
  .dash-pt-pass,
  .dash-pt-pwd,
  .dash-pt-prs,
  .dash-pt-fr { display: none; }

  /* Card header: stack buttons below title instead of squeezing it */
  .card-hd {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  /* Buttons group: un-pin flex-shrink so it can use full width */
  .card-hd > div { flex-shrink: 1 !important; }
}




@media (max-width: 768px) {
  /* Prevent horizontal overflow on the whole page */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* background-attachment:fixed causes blur/flicker on iOS */
  html {
    background-attachment: scroll;
  }

  /* Hide result row grid on tiny screens — too wide */
  .result-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* Summary list — stack on mobile */
  .govuk-summary-list__row {
    grid-template-columns: 1fr;
  }

  .govuk-summary-list__key {
    padding-bottom: 0;
  }

  /* Pagination */
  .fe-pagination {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* hd-advisory-grid already uses auto-fit — shrink minwidth */
  .hd-advisory-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  /* Section bar */
  .section-bar {
    padding: 10px 14px;
  }

  .section-bar h2 {
    font-size: 1.1rem;
  }
}