/*
 * ============================================================
 *  IRIS Portal — mobile.css
 *  Drop this file in /css/ and add to _Layout.cshtml AFTER
 *  site.css:
 *    <link rel="stylesheet" href="/css/mobile.css" />
 *
 *  Contains three sections:
 *    1. PRINT & PDF EXPORT  — white background, black text,
 *       full-width tables, no scrollbars
 *    2. TABLET  (max-width: 1024px)
 *    3. MOBILE  (max-width: 768px)
 * ============================================================
 */


/* ============================================================
   1. PRINT & PDF EXPORT
   Applies when:
     - User clicks browser Print
     - Export as PDF (which uses the browser print engine)
   Goal: white background, black text, no dark mode,
         tables fully expanded (no horizontal scroll),
         all content visible.
   ============================================================ */

@media print {

  /* ── Reset all dark-mode colour variables to light ── */
  :root {
    --bg:          #FFFFFF !important;
    --bg2:         #F8F8F8 !important;
    --card:        #FFFFFF !important;
    --card2:       #F4F4F4 !important;
    --border:      #DDDDDD !important;
    --border2:     #CCCCCC !important;
    --accent:      #2C3E50 !important;
    --accent-dim:  rgba(44,62,80,0.06) !important;
    --accent-glow: rgba(44,62,80,0.2) !important;
    --green:       #16A34A !important;
    --amber:       #B45309 !important;
    --red:         #B91C1C !important;
    --red-dim:     rgba(185,28,28,0.08) !important;
    --t1:          #111111 !important;
    --t2:          #444444 !important;
    --t3:          #666666 !important;
  }

  /* ── Page setup ── */
  @page {
    size: A4 landscape;
    margin: 1.5cm 1.5cm 2cm 1.5cm;
  }

  /* ── Hide elements that make no sense in print ── */
  .sidebar,
  .topbar,
  .nav-demo,
  .filter-bar,
  .title-actions,
  .btn-sm,
  .btn-filter,
  .export-wrap,
  .replay-backdrop,
  .confirm-backdrop,
  .error-backdrop,
  #toast-container,
  .page-subtitle[onclick],
  .tbl-footer,
  .driver-tab-bar,
  .session-type-switcher,
  .parts-cat-header .parts-cat-count,
  .cc-chevron,
  .cc-cat-chip,
  .row-actions,
  .row-btn {
    display: none !important;
  }

  /* ── Shell layout — remove sidebar, fill full width ── */
  .shell {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .main {
    display: block !important;
    overflow: visible !important;
    margin-left: 0 !important;
  }
  .page-scroll {
    overflow: visible !important;
    height: auto !important;
  }

  /* ── Show the active page only ── */
  .page {
    display: none !important;
    padding: 0 !important;
  }
  .page.active {
    display: block !important;
  }

  /* ── Body & background ── */
  body, html {
    background: #FFFFFF !important;
    color: #111111 !important;
    font-size: 11pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Cards ── */
  .card {
    background: #FFFFFF !important;
    border: 1px solid #DDDDDD !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  /* ── Tables — expand fully, no horizontal scroll ── */
  .tbl-wrap {
    overflow: visible !important;
    width: 100% !important;
  }
  .tbl {
    width: 100% !important;
    font-size: 9pt !important;
    border-collapse: collapse !important;
  }
  .tbl th,
  .tbl td {
    background: #FFFFFF !important;
    color: #111111 !important;
    border: 1px solid #DDDDDD !important;
    padding: 5px 8px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
  .tbl thead th {
    background: #1E293B !important;
    color: #FFFFFF !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tbl tbody tr:nth-child(even) td {
    background: #F8F8F8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Driving detail — rotated column headers */
  .tbl th[style*="rotate"] {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: 8pt !important;
    white-space: normal !important;
    max-width: 60px !important;
  }

  /* ── KPI row — keep as grid but allow wrap ── */
  .kpi-row {
    display: grid !important;
    break-inside: avoid;
  }
  .kpi {
    background: #F8F8F8 !important;
    border: 1px solid #DDDDDD !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .kpi-value {
    color: #111111 !important;
    font-size: 22pt !important;
  }

  /* ── Chips & badges — visible in print ── */
  .chip, .cond-badge, .cc-defect {
    border: 1px solid #AAAAAA !important;
    background: #F4F4F4 !important;
    color: #333333 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .chip-green  { background: #F0FDF4 !important; color: #166534 !important; border-color: #BBF7D0 !important; }
  .chip-amber  { background: #FFFBEB !important; color: #92400E !important; border-color: #FDE68A !important; }
  .chip-red, .chip-muted[style*="red"] { background: #FEF2F2 !important; color: #991B1B !important; border-color: #FECACA !important; }

  /* ── Circle check detail ── */
  .cc-section-body  { display: block !important; }
  .cc-items-grid    { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
  .cc-item          { background: #FFFFFF !important; border: 1px solid #EEEEEE !important; }
  .cc-defect-major  { background: #FEF2F2 !important; color: #991B1B !important; border-color: #FECACA !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* ── Session detail driving table — landscape A4 helps here ── */
  .session-data-table { font-size: 8pt !important; }

  /* ── Inspection header ── */
  .inspection-header { grid-template-columns: repeat(4, 1fr) !important; }

  /* ── Score circle — simplified for print ── */
  .score-circle {
    background: #F4F4F4 !important;
    border: 3px solid #AAAAAA !important;
  }
  .score-circle-inner { color: #111111 !important; }

  /* ── Page breaks ── */
  .card          { break-inside: avoid; }
  h2, h3         { break-after: avoid; }
  .kpi-row       { break-inside: avoid; }
  .parts-cat-group { break-inside: avoid; }

  /* ── Parts grid ── */
  .parts-grid    { grid-template-columns: repeat(3, 1fr) !important; }
  .part-row      { background: #FFFFFF !important; border: 1px solid #EEEEEE !important; }
  .part-select   { border: 1px solid #CCCCCC !important; background: #FFFFFF !important; color: #111111 !important; }
  .part-select.has-defect { background: #FFFBEB !important; color: #92400E !important; }

  /* ── Forms ── */
  .form-input, .form-select {
    background: #FFFFFF !important;
    border: 1px solid #CCCCCC !important;
    color: #111111 !important;
  }

  /* ── Typography overrides ── */
  .t-muted, .t-strong, .t-mono { color: #111111 !important; }
  .page-title  { color: #111111 !important; font-size: 22pt !important; }
  .card-title  { color: #111111 !important; }
  .form-label  { color: #333333 !important; }

}


/* ============================================================
   2. TABLET  (769px – 1024px)
   Tighten spacing, collapse some grids from 4 to 2 columns
   ============================================================ */

@media (max-width: 1024px) {

  .kpi-row-4  { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-row-5  { grid-template-columns: repeat(3, 1fr) !important; }
  .quick-actions { grid-template-columns: repeat(2, 1fr) !important; }

  .replay-stat-strip { flex-wrap: wrap; gap: 8px; }
  .replay-bar        { flex-wrap: wrap; gap: 10px; }

  /* Driving detail table — allow horizontal scroll on tablet */
  .tbl-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Task edit two-column → single */
  #page-task-edit > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

}


/* ============================================================
   3. MOBILE  (max-width: 768px)
   Full responsive reflow for phones
   ============================================================ */

@media (max-width: 768px) {

  /* ── Prevent any horizontal overflow on the page ── */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ── Shell — sidebar becomes bottom bar or hidden ── */
  .shell {
    flex-direction: column !important;
    height: 100vh !important;
  }
  .sidebar {
    width: 100% !important;
    height: 56px !important;
    flex-direction: row !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    order: 2 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 8px !important;
    justify-content: space-around !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
  }
  .sb-item {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  .sb-tooltip { display: none !important; }
  .sb-flyout  { display: none !important; }  /* flyouts don't work on touch — handle via tap */
  .sb-sep, .sb-bottom { display: none !important; }

  .main {
    margin-left: 0 !important;
    order: 1 !important;
    height: calc(100vh - 56px) !important;
  }

  /* ── Topbar ── */
  .topbar { padding: 0 12px !important; }
  .topbar-breadcrumb { font-size: 11px !important; }
  .topbar-breadcrumb .crumb { display: none !important; } /* hide ancestor crumbs, show current only */
  .topbar-breadcrumb .sep   { display: none !important; }
  .topbar-breadcrumb .current { display: block !important; font-size: 13px !important; }

  /* ── Page padding ── */
  .page { padding: 16px 12px 80px !important; } /* 80px bottom = clear of fixed sidebar */
  .page-scroll { padding-bottom: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; }

  /* ── Page title row ── */
  .title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .title-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .page-title { font-size: 20px !important; }

  /* ── KPI rows — all single or double column ── */
  .kpi-row-3,
  .kpi-row-4,
  .kpi-row-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-row-4 .kpi:last-child { grid-column: span 2 !important; } /* centre lone card */

  /* ── Quick actions — 2×2 grid ── */
  .quick-actions { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Profile page ── */
  /* Two-column profile layout → single column */
  .fg-2, .fg-3 { grid-template-columns: 1fr !important; }

  /* Phone field — flag + input stacks better at full width */
  .phone-field-wrap { width: 100% !important; }

  /* ── Inspection header (session/circle detail) ── */
  .inspection-header {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Score circle cell spans full width at bottom */
  .inspection-header > div[style*="grid-column:span"] {
    grid-column: span 2 !important;
  }

  /* ── Filter bar — stack vertically ── */
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .filter-select,
  .filter-input { width: 100% !important; max-width: 100% !important; }
  .btn-filter { width: 100% !important; }
  .export-wrap { width: 100% !important; }
  .export-btn  { width: 100% !important; justify-content: center !important; }

  /* ── Tables — horizontal scroll with touch ── */
  .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* show subtle scroll hint shadow */
    background:
      linear-gradient(to right, var(--card) 30%, transparent),
      linear-gradient(to left, var(--card) 30%, transparent) right,
      linear-gradient(to right, rgba(0,0,0,0.15), transparent) left,
      linear-gradient(to left,  rgba(0,0,0,0.15), transparent) right;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
    background-repeat: no-repeat;
  }
  .tbl th, .tbl td { white-space: nowrap !important; }

  /* ── Driving detail table — needs horizontal scroll, nothing squished ── */
  .session-data-table { min-width: 900px !important; }

  /* ── Card ── */
  .card { border-radius: 8px !important; }

  /* ── Driver tabs ── */
  .driver-tab-bar { overflow-x: auto !important; }
  .driver-tab-bar .tab { flex-shrink: 0 !important; white-space: nowrap !important; }

  /* ── Category summary chips (circle check) ── */
  .cc-cat-chip { font-size: 10px !important; padding: 4px 8px !important; }

  /* ── Circle check items grid — single column ── */
  .cc-items-grid { grid-template-columns: 1fr !important; }

  /* ── Parts grid — single column ── */
  .parts-grid { grid-template-columns: 1fr !important; }

  /* ── Task edit — single column ── */
  #page-task-edit > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* ── Assign task — dual listbox stacks vertically ── */
  #page-task-assign .card > div[style*="grid-template-columns:1fr 160px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Transfer buttons become horizontal row between the two lists */
  #page-task-assign .card > div > div[style*="flex-direction:column"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* ── Replay modal ── */
  .replay-modal { width: 95vw !important; }
  .replay-stat-strip {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .replay-stat { padding: 0 8px !important; }
  .replay-stat-div { display: none !important; }
  .replay-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .replay-header { flex-wrap: wrap !important; gap: 8px !important; }

  /* ── Support page — single column ── */
  #page-manuals > div[style*="grid-template-columns:1fr 320px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Note edit form ── */
  #page-note-edit .fg-2 { grid-template-columns: 1fr !important; }

  /* ── Update parts page filter bar ── */
  #page-task-parts .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #page-task-parts .form-select { width: 100% !important; }

  /* ── Score circle — smaller on mobile ── */
  .score-circle {
    width: 56px !important;
    height: 56px !important;
  }
  .score-circle-inner { font-size: 11px !important; }

  /* ── Modals — full width on mobile ── */
  .modal-box {
    width: 92vw !important;
    border-radius: 10px !important;
  }
  .confirm-box, .error-box {
    width: 92vw !important;
  }

  /* ── Export dropdown — full width ── */
  .export-menu {
    right: auto !important;
    left: 0 !important;
    width: 100% !important;
  }

  /* ── Text overflow prevention ── */
  * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* But NOT table cells — they need nowrap for horizontal scroll to work */
  .tbl th, .tbl td {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
  }

  /* ── Login page ── */
  .login-box {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 24px 16px !important;
    border-radius: 10px !important;
  }

  /* ── Home activity feed ── */
  .activity-feed { font-size: 12px !important; }
  .activity-item { flex-wrap: wrap !important; gap: 4px !important; }
  .activity-time { margin-left: 0 !important; }

}


/* ============================================================
   4. VERY SMALL PHONES  (max-width: 380px)
   Extra adjustments for SE-size screens
   ============================================================ */

@media (max-width: 380px) {

  .kpi-row-3,
  .kpi-row-4,
  .kpi-row-5 { grid-template-columns: 1fr !important; }

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

  .page { padding: 12px 10px 80px !important; }

  .page-title { font-size: 18px !important; }

  .kpi-value { font-size: 22px !important; }

}