/* ============================================================
   AK TRADING ERP — Universal Mobile Polish
   Targets the patterns that repeat across ALL pages:
   - #ak-minibar (top bar)
   - .ak-header (orange/colored hero banner)
   - .stats-row / .stat-card (stat grids)
   - .search-box, .tbtn, toolbars
   - .sp / side panels, modals
   - chat-widget repositioning
   - bottom nav reserved space

   Loaded AFTER mobile.css so this wins specificity battles.
   ============================================================ */

/* ---------- PHONE (≤ 768px) ---------- */
@media (max-width: 768px) {

  /* ===== AK MINIBAR (top inline bar with brand + search) ===== */
  #ak-minibar {
    padding: 6px 10px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  #ak-minibar > div:first-child {
    gap: 6px !important;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  /* Brand block: keep AK badge + page title, drop subtitle */
  #ak-minibar > div:first-child > div:nth-child(2) > div:nth-child(2) {
    display: none !important; /* "Centre de Réparation & Vente" subtitle */
  }
  #ak-minibar > div:first-child > div:nth-child(2) > div:first-child {
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Page-context label (e.g. "Réparations") — keep but tight */
  #ak-minibar > div:first-child > div:last-child {
    font-size: 12px !important;
    padding-left: 6px !important;
    margin-left: 2px !important;
    white-space: nowrap;
  }
  /* Right-side: hide search input on phone (use page's own search) */
  #ak-minibar > div:last-child {
    gap: 6px !important;
    flex-shrink: 0;
  }
  #ak-minibar > div:last-child > div:first-child {
    display: none !important; /* the inline "Rechercher..." input */
  }
  /* User avatar circle — shrink slightly */
  #ak-minibar > div:last-child > div:last-child {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
  /* Logo circle */
  #ak-minibar > div:first-child > div:first-child {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  /* ===== AK HEADER (orange/colored hero banner) ===== */
  .ak-header {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .ak-header-left {
    gap: 8px !important;
    min-width: 0;
    flex: 1 1 100%;
  }
  .ak-logo {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    flex-shrink: 0;
  }
  .ak-header-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ak-header-sub {
    font-size: 11px !important;
    display: none; /* often redundant on mobile */
  }
  /* Header right-side action buttons → wrap */
  .ak-header-right,
  .ak-header > div:last-child {
    flex: 1 1 100%;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .header-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* ===== STATS ROW / STATS GRID — force 2 cols, compact cards ===== */
  /* Override the global mobile.css 1-col rule and the desktop 6-col rule */
  .stats-row,
  .stats-grid,
  .kpi-grid,
  #stats,
  .stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }
  /* When stats-row is also flex on desktop, kill the flex */
  .stats-row.fu {
    display: grid !important;
  }

  .stat-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    min-height: 0 !important;
    cursor: pointer;
  }
  .stat-card .stat-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
  }
  .stat-card .stat-icon i,
  .stat-card .stat-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
  .stat-card .stat-value {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 2px 0 !important;
  }
  .stat-card .stat-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #6b7280;
  }

  /* ===== TOOLBAR / FILTERS BAR ===== */
  .search-box,
  .toolbar,
  .filters-bar,
  .filter-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .search-box {
    width: 100% !important;
    flex: 1 1 100%;
  }
  .search-box input {
    width: 100% !important;
    font-size: 14px !important; /* override global iOS 16px from mobile.css */
    padding: 8px 12px 8px 32px !important;
  }
  .tbtn,
  .filter-btn,
  button.tbtn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
    justify-content: center;
  }
  .tbtn i,
  .tbtn svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* Inline selects/date inputs in toolbars */
  .filters-bar select,
  .filters-bar input[type="date"],
  [class*="filter"] select,
  [class*="filter"] input[type="date"] {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 14px !important; /* prevent iOS zoom but stay readable */
  }

  /* ===== TABLES — already handled by mobile.css, but force readable ===== */
  table {
    font-size: 12px !important;
  }

  /* ===== SIDE PANELS (.sp) — full-width slide-in ===== */
  .sp.open,
  .side-panel.open,
  .drawer.open,
  .slide-panel.open {
    width: 100vw !important;
    max-width: 100vw !important;
    right: 0 !important;
    left: auto !important;
  }

  /* ===== CHAT WIDGET — TOP-RIGHT on mobile, clear of pagination/nav ===== */
  /* On apps.html the AI button is bottom-right, so chat goes to TOP-RIGHT
     where it's out of the way of bottom interactions (pagination, action
     bars, keyboard inputs) on every page. */
  #ak-chat-widget {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 9998 !important;
  }
  #ak-chat-widget #ak-chat-btn {
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  }
  #ak-chat-widget #ak-chat-btn svg,
  #ak-chat-widget #ak-chat-btn i {
    width: 18px !important;
    height: 18px !important;
  }
  /* Panel slides DOWN from the button (top anchor) instead of UP */
  #ak-chat-widget #ak-chat-panel {
    width: calc(100vw - 16px) !important;
    max-width: 420px !important;
    right: 0 !important;
    left: auto !important;
    top: 48px !important;
    bottom: auto !important;
    max-height: calc(100vh - 80px) !important;
  }
  #ak-chat-widget #ak-chat-mini {
    width: 28px !important;
    height: 28px !important;
  }
  /* Unread badge on the small button */
  #ak-chat-widget [class*="badge"],
  #ak-chat-widget .unread-badge {
    z-index: 10001 !important;
  }

  /* ===== BODY — reserve space for the bottom nav ===== */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ---------- TINY PHONE (≤ 380px) ---------- */
@media (max-width: 380px) {
  #ak-minibar > div:first-child > div:last-child {
    /* Hide page-context label if too cramped */
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .ak-header-title {
    font-size: 14px !important;
  }
  .stat-card {
    padding: 8px 10px !important;
  }
  .stat-card .stat-value {
    font-size: 18px !important;
  }
  .tbtn,
  .filter-btn,
  .filters-bar select,
  .filters-bar input[type="date"] {
    flex: 1 1 100% !important;
  }
  #ak-chat-widget {
    right: 6px !important;
    top: calc(6px + env(safe-area-inset-top, 0px)) !important;
  }
  #ak-chat-widget #ak-chat-btn {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ============================================================
   BOTTOM NAV — injected by mobile-nav.js
   ============================================================ */
.ak-mobile-nav {
  display: none;
}
@media (max-width: 768px) {
  .ak-mobile-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
  }
  .ak-mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    text-decoration: none;
    color: #6b7280;
    font-size: 10px;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.15s;
    min-height: 48px;
    line-height: 1;
  }
  .ak-mobile-nav a.active {
    color: #ea580c;
    background: rgba(249,115,22,0.08);
  }
  .ak-mobile-nav a:active {
    transform: scale(0.94);
    background: rgba(0,0,0,0.04);
  }
  .ak-mobile-nav a svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ak-mobile-nav a.fab {
    color: white !important;
    background: linear-gradient(135deg, #ea580c, #d63384);
    margin: -8px 4px 4px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(232,89,12,0.4);
    min-height: 56px;
  }
  .ak-mobile-nav a.fab svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.5;
  }
  .ak-mobile-nav a.fab span {
    color: white !important;
  }
}

/* Dark mode for bottom nav */
.dark .ak-mobile-nav {
  background: rgba(31,41,55,0.95) !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}
.dark .ak-mobile-nav a {
  color: #9ca3af !important;
}
.dark .ak-mobile-nav a.active {
  color: #fb923c !important;
  background: rgba(251,146,60,0.12) !important;
}

/* Hide bottom nav on print */
@media print {
  .ak-mobile-nav,
  #ak-chat-widget,
  #aiFloatingBtn,
  #aiChatPopup { display: none !important; }
}

/* ============================================================
   REPAIR-LIST SIDE PANEL — mobile polish
   The .sp side panel has its own action bar (Diagnostic/Réparer/...)
   that needs to stack ABOVE the bottom nav, not overlap it.
   ============================================================ */
@media (max-width: 768px) {

  /* Stepper: horizontal scroll instead of cutting off "Livré" */
  .stepper,
  .step-track,
  [class*="stepper"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  .stepper::-webkit-scrollbar { height: 0; }
  .step,
  .step-item,
  [class*="step-item"] {
    flex-shrink: 0 !important;
    min-width: max-content;
  }

  /* Side panel action bar (Diagnostic / Réparer / Terminé / SAV)
     Sits ABOVE the bottom nav, both share screen bottom */
  .sp-actions,
  .repair-actions,
  .panel-actions,
  .action-bar,
  [class*="action-bar"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 12px !important;
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
    z-index: 99 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .sp-actions::-webkit-scrollbar { height: 0; }

  /* Action buttons inside that bar */
  .sp-actions button,
  .repair-actions button,
  .panel-actions button,
  .action-bar button,
  [class*="action-bar"] button {
    flex-shrink: 0 !important;
    min-width: 100px;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    white-space: nowrap;
  }

  /* Side panel content: extra bottom padding so content doesn't
     hide under BOTH the action bar (~56px) AND the nav (~72px) */
  .sp.open,
  .side-panel.open,
  .drawer.open,
  .slide-panel.open {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* When side panel is open, push the chat widget UP so it doesn't
     overlap the price/notes fields. .sp.open → use a higher offset */
  .sp.open ~ #ak-chat-widget,
  body:has(.sp.open) #ak-chat-widget,
  body.sp-open #ak-chat-widget {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .sp.open ~ #aiFloatingBtn,
  body:has(.sp.open) #aiFloatingBtn,
  body.sp-open #aiFloatingBtn {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   REPAIR-LIST PAGE — mobile polish (≤ 768px)
   Compact hero, horizontal-scroll stats, tight filters,
   table-rows-as-cards layout
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Orange hero banner: compact + actions on second row ---- */
  .ak-header {
    padding: 8px 10px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .ak-header-left {
    flex: 0 0 auto !important;
    width: 100%;
  }
  .ak-header-title {
    font-size: 15px !important;
  }
  .ak-header-sub {
    display: block !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.85) !important;
  }
  /* Action buttons row: horizontal scroll, no wrap */
  .ak-header > div:last-child {
    width: 100% !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 2px;
  }
  .ak-header > div:last-child::-webkit-scrollbar { height: 0; }
  .ak-header .header-btn {
    flex-shrink: 0 !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    white-space: nowrap;
    min-height: 32px;
  }

  /* ---- Stats: horizontal scroll strip instead of 2-col grid ---- */
  .stats-row,
  .stats-row.fu {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding: 4px 0 6px !important;
    margin-bottom: 8px !important;
    scroll-snap-type: x mandatory;
  }
  .stats-row::-webkit-scrollbar { height: 0; }
  .stats-row .stat-card {
    flex: 0 0 auto !important;
    min-width: 96px !important;
    padding: 10px 12px !important;
    scroll-snap-align: start;
  }

  /* ---- Filters / toolbar: 2-column compact ---- */
  .toolbar.fu,
  .toolbar {
    padding: 8px !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
  }
  .search-box {
    width: 100% !important;
    margin-bottom: 6px !important;
  }
  .search-box input {
    width: 100% !important;
  }
  /* Aujourd'hui + En retard buttons: side by side */
  .toolbar .tbtn,
  .toolbar #btnToday,
  .toolbar #btnOverdue {
    flex: 1 1 calc(50% - 3px) !important;
    margin: 0 !important;
  }
  /* Tech + Receptionist dropdowns: side by side */
  .toolbar select,
  #filterTech,
  #filterRec {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    height: 36px !important;
  }
  /* Date inputs: side by side */
  .toolbar input[type="date"],
  #filterDateFrom,
  #filterDateTo {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    height: 36px !important;
  }
  /* Export + refresh buttons: smaller */
  .toolbar button:not(.tbtn) {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* ---- Table: convert rows to stacked CARDS on mobile ---- */
  .table-card.fu,
  .table-card {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  /* Hide table header */
  .table-card thead,
  .table-card .thead {
    display: none !important;
  }
  /* Each row becomes a card */
  .table-card table {
    display: block !important;
    width: 100% !important;
  }
  .table-card tbody {
    display: block !important;
    width: 100% !important;
  }
  .table-card tbody tr {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "code  name    actions"
      "code  device  actions"
      "stat  stat    stat"
      "meta  meta    meta" !important;
    gap: 4px 10px !important;
    background: white !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .table-card tbody tr > td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }
  /* Map columns to grid areas:
     1: checkbox (hide)
     2: code (REPxxxxx)
     3: customer (name + phone)
     4: device (brand + model)
     5: problem (hide on mobile to save space)
     6: status badge
     7: technician (hide on mobile)
     8: date
     9-11: actions (more, print, view)
  */
  .table-card tbody tr > td:nth-child(1) { display: none !important; } /* checkbox */
  .table-card tbody tr > td:nth-child(2) {
    grid-area: code;
    align-self: center;
  }
  .table-card tbody tr > td:nth-child(2) .rc {
    font-weight: 700 !important;
    font-size: 11px !important;
    background: #fff7ed !important;
    color: #c2410c !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
  }
  .table-card tbody tr > td:nth-child(3) {
    grid-area: name;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .table-card tbody tr > td:nth-child(3) .cn {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #111827 !important;
  }
  .table-card tbody tr > td:nth-child(3) .cp {
    font-size: 11px !important;
    color: #6b7280 !important;
  }
  .table-card tbody tr > td:nth-child(4) {
    grid-area: device;
    font-size: 12px !important;
    color: #4b5563 !important;
  }
  .table-card tbody tr > td:nth-child(4) .di {
    display: inline !important;
    font-weight: 500;
  }
  .table-card tbody tr > td:nth-child(4) .dm {
    display: inline !important;
    margin-left: 4px;
    color: #6b7280;
  }
  .table-card tbody tr > td:nth-child(5) { display: none !important; } /* problem text — too long */
  .table-card tbody tr > td:nth-child(6) {
    grid-area: stat;
    margin-top: 4px;
  }
  .table-card tbody tr > td:nth-child(6) .bg {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
  .table-card tbody tr > td:nth-child(7) { display: none !important; } /* technician */
  .table-card tbody tr > td:nth-child(8) {
    grid-area: meta;
    font-size: 11px !important;
    color: #9ca3af !important;
  }
  /* Actions column (colspan=3 in source) — compact icons */
  .table-card tbody tr > td[colspan="3"],
  .table-card tbody tr > td:nth-child(9),
  .table-card tbody tr > td:nth-last-child(1) {
    grid-area: actions;
    align-self: center;
    text-align: right !important;
  }
  .table-card tbody tr .ra {
    gap: 4px !important;
  }

  /* TKT-00020-grid: repair-list mobile card column re-map.
     OTP (col 9) and actions (last col) were BOTH grid-area:actions, so the
     big OTP number covered the ⋯ button. The old area map also predated the
     price/otp/chrono columns. Re-map every real column: OTP drops onto its
     own line next to price; eye/print/⋯ stay clear in the top-right. */
  .table-card tbody tr {
    grid-template-areas:
      "code  name    actions"
      "code  device  actions"
      "stat  stat    stat"
      "price price   otp"
      "date  date    chrono" !important;
  }
  .table-card tbody tr > td:nth-child(8) {        /* price */
    grid-area: price !important;
    font-size: 13px !important;
    margin-top: 4px !important;
  }
  .table-card tbody tr > td:nth-child(9) {        /* OTP */
    grid-area: otp !important;
    text-align: right !important;
    font-size: 11px !important;
    color: #6b7280 !important;
    overflow: visible !important;
    align-self: center !important;
  }
  .table-card tbody tr > td:nth-child(9) .oc::before {
    content: "OTP ";
    color: #9ca3af !important;
    font-weight: 400 !important;
  }
  .table-card tbody tr > td:nth-child(10) {       /* date */
    grid-area: date !important;
    font-size: 11px !important;
    color: #9ca3af !important;
  }
  .table-card tbody tr > td:nth-child(11) {       /* chrono */
    grid-area: chrono !important;
    text-align: right !important;
    align-self: center !important;
  }
  .table-card tbody tr > td:nth-last-child(1) {   /* actions */
    grid-area: actions !important;
    overflow: visible !important;
  }
  .table-card tbody tr .ra {
    overflow: visible !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }
  .table-card tbody tr .ra .rb { flex: 0 0 auto !important; }
  .table-card tbody tr .dot-menu { z-index: 100000 !important; }

  /* TKT-00020: keep the ⋯ quick-actions button visible on mobile
     (was clipped by overflow:hidden + min-width:0 on the actions cell) */
  .table-card tbody tr > td:nth-last-child(1),
  .table-card tbody tr > td:nth-child(9) {
    overflow: visible !important;
    min-width: max-content !important;
  }
  .table-card tbody tr .ra {
    overflow: visible !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }
  .table-card tbody tr .ra .rb { flex: 0 0 auto !important; }
  .table-card tbody tr .dot-menu { z-index: 100000 !important; }
  .table-card tbody tr .rb {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
  }
  .table-card tbody tr .rb svg {
    width: 16px !important;
    height: 16px !important;
  }
  /* Hide pagination footer's per-page selector — keep just prev/next */
  .pagination select { font-size: 12px !important; }

  /* hCount under header title — bigger so user knows count */
  #hCount {
    font-size: 12px !important;
    font-weight: 500;
  }
}

/* TKT-00019: global mobile overflow guard — no page should scroll sideways */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
}