/* YABOX OS — Mobile / Responsive Styles V302 */

/* ════════════════════════════════════════════════════════════════
   MOBILE (≤768px) — Sidebar drawer + column layout
   ════════════════════════════════════════════════════════════════ */
#bottom-nav{display:none}

@media(max-width:768px){
  /* Layout */
  #app{flex-direction:column;height:100vh;overflow:hidden}
  .sidebar{transform:translateX(-100%);z-index:300;box-shadow:4px 0 20px rgba(0,0,0,.3)}

  /* Mobile: modals fit screen */
  .mbox{max-width:calc(100vw - 20px)!important;max-height:95vh!important;overflow-y:auto!important}
  .mbody{max-height:calc(85vh - 120px)!important;overflow-y:auto!important}
  
  /* Mobile: tables become scrollable */
  .data-table{font-size:11px!important}
  .data-table th,.data-table td{padding:6px 8px!important}
  
  /* Mobile: cbox padding */
  .cbox{padding:12px!important}
  
  /* Mobile: KPI grid */
  .kpis{gap:6px!important}
  .kpi{padding:8px 10px!important}
  .kpiv{font-size:20px!important}
  
  /* Mobile: grid collapse */
  div[style*="grid-template-columns:repeat(5"]{grid-template-columns:repeat(2,1fr)!important}
  div[style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  div[style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{z-index:299}
  .main-area{margin-left:0;height:100vh;overflow:hidden}
  .sidebar-toggle{display:block!important}

  /* Topbar */
  .topbar{padding:8px 12px;padding-top:max(8px,calc(var(--safe-top) + 4px));gap:6px;min-height:48px}
  .topbar-title{display:none}
  .topbar-btn span{display:none}
  .topbar-btn{padding:7px 10px;min-width:36px;gap:0}
  .topbar-btn-primary{padding:7px 10px}
  .search-wrap{flex:1}
  .sbadge{padding:4px 8px;font-size:11px}

  /* KPIs — 3×2 compact */
  .kpis{
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    padding:8px 10px;
    border-bottom:1px solid var(--border);
  }
  .kpi{padding:8px 10px;border-radius:10px}
  .kpi-icon{display:none}
  .kpil{font-size:8px}
  .kpiv{font-size:16px}
  .kpi-sub{display:none}

  /* Content */
  .content{flex:1;overflow-y:auto;padding:10px;padding-bottom:calc(68px + var(--safe-bottom));-webkit-overflow-scrolling:touch}

  /* Order cards */
  .ocard{padding:12px;margin-bottom:8px}
  .octas{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;min-width:unset}
  .octa{min-width:0;padding:7px 10px;font-size:12px;flex:1}
  .otop{grid-template-columns:1fr}

  /* Modal */
  #ov{align-items:flex-end}
  #mbox{width:100%;max-width:100%;border-radius:20px 20px 0 0;max-height:92vh}
  .mhdr{border-radius:20px 20px 0 0}
  .mfooter{padding-bottom:calc(12px + var(--safe-bottom))}

  /* Tables */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .data-table{min-width:600px}

  /* Filter */
  .filter-bar{gap:5px}
  .fsel{font-size:12px;padding:6px 8px}

  /* Bottom nav */
  #bottom-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;
    height:calc(56px + var(--safe-bottom));
    padding-bottom:var(--safe-bottom);
    background:var(--white);border-top:1.5px solid var(--border);
    z-index:200;box-shadow:0 -2px 12px rgba(0,0,0,.08);
  }
  .bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:none;cursor:pointer;font-family:inherit;color:var(--text2);font-size:10px;font-weight:600;padding:6px 2px;-webkit-tap-highlight-color:transparent}
  .bnav-btn .bnav-icon{font-size:20px;line-height:1}
  .bnav-btn.active{color:var(--blue)}

  .kpis-tab{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
  .kpis{gap:4px;padding:6px 8px}
  .kpiv{font-size:15px}
  .kpil{font-size:7px}
  .content{padding:8px;padding-bottom:calc(68px + var(--safe-bottom))}
}

/* ════════════════════════════════════════════════════════════════
   CUSTOMIZATION (applied via JS)
   ════════════════════════════════════════════════════════════════ */

/* ── LOGIN SCREEN ── */
#ls{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
.lbox{background:var(--white);border-radius:20px;padding:40px;width:100%;max-width:380px;box-shadow:0 10px 40px rgba(0,0,0,.1)}
.llogo{text-align:center;margin-bottom:24px}
.llogo-icon{font-size:40px;margin-bottom:8px}
.llogo-title{font-size:20px;font-weight:900;color:var(--text)}
.llogo-sub{font-size:12px;color:var(--text2);margin-top:2px}
.ll{display:block;font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-top:14px;margin-bottom:5px}
.linp{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:14px;outline:none;transition:border-color .15s;font-family:inherit}
.linp:focus{border-color:var(--blue);background:var(--white)}
.lbtn{width:100%;padding:13px;border-radius:10px;border:none;background:var(--red);color:var(--on-accent);font-size:15px;font-weight:700;cursor:pointer;margin-top:20px;font-family:inherit;transition:all .15s}
.lbtn:hover{background:#DC2626;transform:translateY(-1px)}
.lerr{color:var(--red);font-size:13px;margin-top:10px;text-align:center;padding:8px;background:var(--red)11;border-radius:8px}

#nav-finance-section,#nav-manage-section{display:block}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Enhanced Mobile — Tables as Cards ───────────────────────────────────────*/
@media(max-width:640px){
  /* Dispatch agent cards stack nicely */
  .kpis{grid-template-columns:repeat(2,1fr)!important}
  
  /* Modal body scrollable */
  .mbox{max-height:92vh!important;overflow-y:auto!important}
  .mbody{max-height:calc(88vh - 130px)!important;overflow-y:auto!important}
  
  /* Form grid collapse */
  div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  div[style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  
  /* Agent cards compact */
  div[style*="border-radius:14px"]{border-radius:10px!important}
  
  /* Tables horizontal scroll */
  .data-table{font-size:11px!important;min-width:600px}
  div[style*="overflow-x:auto"]{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  
  /* Buttons touch-friendly */
  .obtn,.obtn-primary{min-height:40px!important;padding:8px 14px!important}
  button[style*="padding:3px"]{padding:6px 10px!important;min-height:32px!important}
  
  /* Search wrap full width */
  .search-wrap{flex:1!important;min-width:0!important}
  #srch{width:100%!important}
  
  /* Hide non-essential columns on mobile via data attributes */
  .hide-mobile{display:none!important}
  
  /* Score gauge smaller */
  svg.score-gauge{width:40px!important;height:40px!important}
  
  /* Font size adjustments */
  .kpiv{font-size:20px!important}
  .kpil{font-size:10px!important}
}

@media(max-width:380px){
  .kpis{grid-template-columns:repeat(2,1fr)!important;gap:6px!important}
  .kpi{padding:8px!important}
  .kpiv{font-size:18px!important}
  .nav-item{font-size:12px!important;padding:7px 8px!important}
}

/* ── Touch interactions ───────────────────────────────────────────────────────*/
@media(hover:none){
  .nav-item:active{background:var(--bg-hover)!important}
  .obtn:active{opacity:.8!important}
  button:active{opacity:.75!important}
}

/* V223 hard mobile stabilization */
@media(max-width:768px){
  html,body{height:100%;overscroll-behavior:none}
  #ov{z-index:10000!important;pointer-events:auto!important}
  #ov.hidden{display:none!important;pointer-events:none!important}
  #mbox,.mbox,.mob-sheet{pointer-events:auto!important;touch-action:pan-y!important}
  .sidebar-overlay{pointer-events:auto}
  .sidebar-overlay:not(.open):not(.show){pointer-events:none}
  .ocard,[data-order-id],[data-conf-action],.cai-act,.octa,.obtn,button{
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent;
  }
  .ocard{cursor:pointer;position:relative;z-index:1}
  .confirmation-actions,.cai-action-bar,.mob-sheet .confirmation-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:10050!important;
    background:var(--white)!important;
  }
  .cai-act{min-height:44px!important}
  body.modal-open,.modal-open .content{overflow:hidden!important}
}

/* ════════════════════════════════════════════════════════════════
   REAL OPERATIONS SPRINT — Mobile UX optimizations (item 1)
   360px+ confirmation agent experience
   ════════════════════════════════════════════════════════════════ */

/* Confirmation AI — mobile-first card layout */
@media(max-width:768px){
  /* CAI root: stack list + detail vertically */
  #cai-root{display:flex;flex-direction:column!important;height:100%;}
  #cai-sidebar{display:none!important;} /* hide CAI sidebar on mobile — use filter chips */
  #cai-main{flex:1;overflow-y:auto;padding:8px!important;}
  #cai-detail{position:fixed!important;bottom:0;left:0;right:0;max-height:85vh;overflow-y:auto;z-index:200;background:var(--white);border-top:2px solid var(--border);border-radius:20px 20px 0 0;padding:12px;}
  #cai-detail.hidden{display:none!important;}

  /* Sticky action bar at bottom for confirmation agent */
  .cai-action-bar{
    position:sticky;bottom:0;background:var(--white);
    border-top:1px solid var(--border);padding:8px;
    display:flex;gap:6px;flex-wrap:wrap;z-index:100;
  }
  .cai-action-bar .obtn{flex:1;min-width:calc(33% - 4px);padding:10px 4px!important;font-size:12px!important;}

  /* Order cards — compact mobile */
  .cai-card{
    padding:10px 12px!important;border-radius:10px!important;
    border:1px solid var(--border);margin-bottom:6px;
  }
  .cai-card-header{font-size:12px!important;}
  .cai-card-meta{font-size:11px!important;}

  /* KPI bar — 2 columns on mobile */
  #cai-kpi-bar{
    grid-template-columns:repeat(2,1fr)!important;
    gap:6px!important;padding:8px!important;
    font-size:11px!important;
  }

  /* Blitz mode — full screen */
  #cai-blitz{padding:12px!important;}
  .blitz-order-card{padding:12px!important;}
  .blitz-actions{
    position:fixed;bottom:0;left:0;right:0;
    padding:10px;background:var(--white);
    border-top:2px solid var(--border);
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
  }
  .blitz-actions .obtn{padding:14px!important;font-size:13px!important;font-weight:700!important;}

  /* Topbar sync info — hide on mobile */
  .topbar-btn-text{display:none!important;}
  #last-sync-info{display:none!important;}

  /* Larger tap targets */
  .obtn{min-height:40px!important;min-width:40px!important;}
  .nav-item{min-height:44px!important;}

  .printing-head{align-items:flex-start;flex-direction:column;padding:8px 0!important}
  .printing-head-actions{width:100%;justify-content:stretch}
  .printing-head-actions .obtn{flex:1}
  .printing-grid{grid-template-columns:1fr!important;gap:10px!important}
  .printing-panel{padding:10px!important;border-radius:8px!important}
  .printing-filters{grid-template-columns:1fr 1fr!important;gap:7px!important}
  #printing-search{grid-column:1/-1}
  .printing-results{max-height:42vh!important}
  .printing-preview-panel{position:static!important}
  .printing-preview-wrap{height:520px!important;max-height:62vh!important;justify-content:flex-start!important}
  #printing-preview-frame{transform-origin:top left;transform:scale(.86);margin-right:-14mm;margin-bottom:-21mm}
  .cai-sb-item{min-height:40px!important;}

  /* Queue analytics — single column */
  #cai-list > .cbox > div[style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr!important;
  }
}

/* SLA visual indicators (item 3) */
.sla-ok      {color:#10B981;background:#ECFDF5;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:700;}
.sla-warn    {color:#F59E0B;background:#FFFBEB;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:700;}
.sla-critical{color:#EF4444;background:#FEF2F2;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:700;}

/* Offline banner styling */
#offline-banner{animation:slideUp .3s ease;}
@keyframes slideUp{from{transform:translate(-50%,20px);opacity:0;}to{transform:translate(-50%,0);opacity:1;}}

/* Loading skeleton (item 12) */
.skeleton{background:linear-gradient(90deg,var(--bg) 25%,var(--border) 50%,var(--bg) 75%);
  background-size:200% 100%;animation:shimmer2 1.5s infinite;border-radius:6px;}
@keyframes shimmer2{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* V222 FIX: order cards must be tappable on mobile */
.ocard {
  pointer-events: auto !important;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0.05);
}
.ocard .octa, .ocard button, .ocard a {
  pointer-events: auto !important;
  touch-action: manipulation;
}
/* V222 FIX: ensure confirmation action buttons are always tappable */
[data-conf-action] {
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
}
/* V222 FIX: bottom sheet confirmation actions sticky */
.mob-sheet .confirmation-actions {
  position: sticky;
  bottom: 0;
  background: white;
  z-index: 100000;
  padding: 12px 16px;
  border-top: 1px solid #f1f5f9;
}
.mob-sheet .confirmation-actions button {
  pointer-events: auto !important;
  z-index: 100000;
  cursor: pointer;
  touch-action: manipulation;
}

/* V225 confirmation actions clickability */
.conf-action-btn,
.cai-act,
.confirmation-actions button,
.mobile-order-sheet button,
.mob-sheet button,
.order-detail-panel button {
  pointer-events: auto !important;
  touch-action: manipulation;
  position: relative;
  z-index: 100001;
}
.mob-sheet,
.mobile-order-sheet,
.order-detail-panel {
  pointer-events: auto !important;
  z-index: 99999;
  padding-bottom: 90px;
}
.bottom-nav,
#bottom-nav {
  z-index: 1000;
}
.conf-action-btn.loading,
.cai-act.loading {
  opacity: .55;
  cursor: wait;
}

/* ════════════════════════════════════════════════════════════════
   V233 — MOBILE STABILIZATION GLOBAL
   Target: 360px–480px, COD agent daily use
   ════════════════════════════════════════════════════════════════ */

/* Global overflow-x prevention — prevent horizontal scroll everywhere */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}
/* Prevent any child from breaking layout */
@media(max-width:768px){
  .content > *, #cnt > *, .cbox {
    max-width: 100% !important;
    overflow-x: hidden;
  }
  /* Inline styles with wide fixed widths — cap them */
  [style*="min-width:800"], [style*="min-width:900"], [style*="min-width:1000"] {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* Flex rows that should wrap on mobile */
  .filter-bar, .topbar, .kpis, .cai-acts {
    flex-wrap: wrap !important;
  }
  /* Cards: no fixed width */
  .ocard, .cai-card, .cbox {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Safe area insets — notched phones */
@supports (padding-top: env(safe-area-inset-top)) {
  @media(max-width:768px){
    .topbar { padding-top: max(8px, env(safe-area-inset-top)) !important; }
    #bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; }
    .content { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
  }
}

/* Font rendering — prevent layout shift */
@media(max-width:768px){
  body, input, button, select, textarea {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  /* Prevent font size inflation on landscape */
  input, select, textarea { font-size: 16px !important; } /* prevents zoom on iOS */
}

/* Touch targets — min 44px per Apple/Google guidelines */
@media(max-width:768px){
  button, .obtn, [data-conf-action], .nav-item, .octa, .cai-act, .bnav-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  .nav-item { min-width: 0 !important; } /* nav items can be narrower in sidebar */
  /* Small action buttons in modals can be smaller */
  .mhdr .obtn, .mfooter .obtn { min-height: 36px !important; }
}

/* Confirmation AI mobile — 360px target */
@media(max-width:480px){
  /* Workspace panel — all sections single column */
  .cai-section .sec-body { padding: 8px !important; }
  .cai-acts { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .conf-action-btn, .cai-act {
    font-size: 11px !important;
    padding: 10px 6px !important;
  }
  /* Detail panel header compact */
  .cai-detail-header { font-size: 13px !important; }
  /* Field edits compact */
  .ninp { font-size: 14px !important; padding: 8px 10px !important; }
  .flbl { font-size: 10px !important; }
  /* KPI bar — 3 cols */
  #cai-kbar > div { flex-wrap: wrap !important; gap: 4px !important; }
  #cai-kbar .kpi { min-width: 70px !important; padding: 6px 8px !important; }
  #cai-kbar .kpiv { font-size: 15px !important; }
  #cai-kbar .kpil { font-size: 9px !important; }
}

/* Header responsive — prevent topbar overflow */
@media(max-width:400px){
  .topbar { gap: 4px !important; padding: 6px 8px !important; }
  .topbar-btn { padding: 6px 8px !important; min-width: 32px !important; }
  .dbtn { padding: 6px 8px !important; font-size: 14px !important; }
  #srch { font-size: 13px !important; }
}

/* Mobile modal full-screen on very small screens */
@media(max-width:360px){
  #mbox, .mbox {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  .mob-sheet { border-radius: 16px 16px 0 0 !important; }
}

/* Sidebar mobile — full height, no scroll bleed */
@media(max-width:768px){
  .sidebar {
    height: 100vh !important;
    height: -webkit-fill-available !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Prevent sidebar toggle from creating layout space */
  .sidebar:not(.open) { width: 0 !important; overflow: hidden !important; }
}

/* ════════════════════════════════════════════════════════════════
   V235 — FINAL MOBILE STABILIZATION
   Fixes: overflow-x, modals, dispatch, tickets, finance
   ════════════════════════════════════════════════════════════════ */

/* Overflow-x killer — aucune page ne doit scroller horizontalement */
@media(max-width:768px){
  #app, #ls, .main-area, .content, #cnt, .cbox,
  .ocard, .dispatch-panel, .ticket-panel {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* Tables inside content areas */
  .content table, #cnt table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Inline style widths from JS-generated HTML */
  [style*="min-width:700"],
  [style*="min-width:600"],
  [style*="width:700"],
  [style*="width:800"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Dispatch mobile */
@media(max-width:768px){
  .dispatch-grid, #dispatch-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .dispatch-col { width: 100% !important; min-width: 0 !important; }
  .dispatch-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }
  /* Dispatch action buttons */
  .dispatch-card .obtn, .dispatch-actions .obtn {
    flex: 1 !important;
    min-width: calc(50% - 4px) !important;
  }
}

/* Tickets mobile */
@media(max-width:768px){
  .printing-grid {
    grid-template-columns: 1fr !important;
  }
  .printing-preview-wrap {
    height: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
  #printing-preview-frame {
    transform: scale(0.8) !important;
    transform-origin: top left !important;
  }
  .printing-results {
    max-height: 40vh !important;
    overflow-y: auto !important;
  }
}

/* Finance mobile */
@media(max-width:768px){
  .finance-grid, .finance-summary {
    grid-template-columns: 1fr !important;
  }
  .finance-card {
    padding: 12px !important;
  }
}

/* Bottom sheet improvements — full-screen feel */
@media(max-width:768px){
  .mob-sheet {
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .mob-sheet .sh-body {
    padding: 12px !important;
    padding-bottom: 80px !important; /* room for sticky actions */
  }
  /* Sticky confirmation buttons at bottom of sheet */
  .mob-sheet .cai-acts,
  .mob-sheet .confirmation-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--white) !important;
    padding: 10px 12px !important;
    border-top: 1px solid var(--border) !important;
    z-index: 100002 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .mob-sheet .conf-action-btn {
    flex: 1 !important;
    min-width: calc(33% - 4px) !important;
    font-size: 11px !important;
    padding: 10px 4px !important;
  }
}

/* Detail panel — commandes */
@media(max-width:768px){
  /* V233 #cai-detail already handles this but ensure overflow */
  #cai-detail {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 80px !important;
  }
  /* Sections inside detail */
  .cai-section {
    margin-bottom: 8px !important;
  }
  .cai-section .sec-body {
    padding: 8px 10px !important;
  }
  /* Fields compact */
  .cai-acts {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
  }
}

/* Text clipping — no overflow text */
@media(max-width:768px){
  .ocard .oprod, .ocard .ometa,
  .ocard .otags span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .nav-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ══════════════════════════════════════════════════════════
   V258 — New design classes mobile overrides
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Sidebar new classes */
  .sidebar-logo-icon { width:28px; height:28px; font-size:12px; }
  .nav-section-title { padding: 6px 6px 3px; }
  .nav-divider { margin: 4px 6px; }

  /* ui.components classes */
  .sec-hdr { padding: 8px 10px; }
  .cai-acts { grid-template-columns: repeat(2, 1fr) !important; gap: 5px !important; }
  .cai-act { font-size: 11px !important; padding: 9px 6px !important; }
  .an-kpi-val { font-size: 18px; }
  .finance-grid { grid-template-columns: 1fr !important; }
  .dispatch-grid { grid-template-columns: 1fr !important; }

  /* Date picker */
  #dp-popup { min-width: calc(100vw - 40px); left: -10px; }
  .dp-grid { grid-template-columns: 1fr; }

  /* info banners */
  .info-banner, .success-banner, .warning-banner {
    font-size: 11px; padding: 7px 10px;
  }

  /* Topbar sync wrap */
  .topbar-sync-wrap { display: none; }
}
/* V298 mobile/layout stabilization */
html,
body,
#app,
.main-area,
.content{
  max-width:100%;
  overflow-x:hidden;
}

.sidebar .menu-icon{
  width:22px;
  min-width:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.sidebar .menu-label{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidebar,
.main-area,
.content,
.cbox,
.kpis,
.kpi,
.nav-item,
.topbar{
  min-width:0;
}

.card-icon{
  width:28px;
  height:28px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:currentColor;
  background:color-mix(in srgb, currentColor 14%, transparent);
}

.card-icon::before{
  font-size:14px;
  line-height:1;
}

.icon-urgent::before{content:"!";}
.icon-calls::before{content:"☎";}
.icon-delivery::before{content:"→";}
.icon-delivered::before{content:"✓";}
.icon-returned::before{content:"↩";}
.icon-exceptions::before{content:"!";}

.product-filter-bar{
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  max-width:100%;
  padding-bottom:4px;
  -webkit-overflow-scrolling:touch;
}

.product-filter-bar > *{
  flex:0 0 auto;
}

.ticket-preview{
  max-width:100%;
  max-height:58vh;
  overflow:auto;
  padding:12px;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:8px;
  -webkit-overflow-scrolling:touch;
}

#printing-preview-frame{
  max-width:100%;
}
/* V305 mobile hardening: prevent horizontal overflow and modal/sidebar collisions. */
html, body { max-width: 100%; overflow-x: hidden; }
.content, #cnt, .main-area { min-width: 0; }
.data-table, table { max-width: 100%; }
.yabox-card, .kpi, .ocard, .an-card { min-width: 0; }
.product-filter-bar, .filters { max-width: 100%; }
#mbox { max-width: min(96vw, 720px); max-height: 92vh; overflow: auto; }
@media (max-width: 720px) {
  .kpis, #kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .product-filter-bar, .filters { flex-direction: column; align-items: stretch !important; }
  .product-filter-bar > *, .filters > * { width: 100%; min-width: 0 !important; }
  .data-table { display: block; overflow-x: auto; }
}