/* mobile_app.css — native-app feel on Android/iOS phones. Loaded last; overrides only. */
html,body{touch-action:manipulation;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-tap-highlight-color:transparent;}
html.tl-standalone,html.tl-standalone body{overscroll-behavior-y:none;}
body{-webkit-touch-callout:none;}
input,textarea,[contenteditable]{-webkit-touch-callout:default;}
button,.btn,.nav-item,.icon-btn,.tl-tab{touch-action:manipulation; -webkit-user-select:none; user-select:none;}
.tl-tabbar{display:none;}

@media (max-width:980px){
  /* Notch / status bar (viewport-fit=cover + black-translucent) */
  .topbar{padding-top:calc(10px + env(safe-area-inset-top,0px)); padding-left:calc(12px + env(safe-area-inset-left,0px)); padding-right:calc(12px + env(safe-area-inset-right,0px));}
  /* Drawer menu */
  .sidebar{width:min(86vw,320px); flex-basis:auto; left:calc(-1 * min(86vw,320px) - 20px); height:100vh; height:100dvh;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); overscroll-behavior:contain; z-index:60;}
  .sidebar.open{left:0;}
  .sidebar-scrim{z-index:55; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);}
  .nav{-webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
  .nav-item{min-height:46px; font-size:14.5px;}
  .nav-sec-head{min-height:40px;}
  /* iOS zooms any focused field under 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.form-control,.form-select,.dataTables_filter input{font-size:16px !important;}
}

@media (max-width:760px){
  /* Native-style app bar */
  .topbar{gap:8px;}
  .menu-toggle{width:44px; height:44px; border-radius:12px;}
  .icon-btn{width:42px !important; height:42px !important; border-radius:12px;}
  .search-wrap input{min-height:44px; border-radius:12px;}
  .content{padding:12px 12px calc(84px + env(safe-area-inset-bottom,0px)) !important;}
  .btn,button.btn{min-height:44px;}
  .stat-card{padding:14px;}
  .panel{padding:14px !important; border-radius:16px;}
  .table-card{border-radius:16px;}
  /* Lists scroll smoothly, tables swipe sideways instead of breaking layout */
  .dataTables_wrapper,.table-card{-webkit-overflow-scrolling:touch;}
  .dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none !important; text-align:left !important; width:100%; margin:6px 0;}
  .dataTables_wrapper .dataTables_filter input{width:100% !important; margin:0 !important; min-height:44px;}

  /* Modals -> bottom sheets */
  .overlay{align-items:flex-end !important; padding:0 !important;}
  .overlay .modal,.overlay .modal.wide{max-width:100% !important; width:100%; max-height:92vh; max-height:92dvh; border-radius:20px 20px 0 0;
    animation:tlSheet .22s cubic-bezier(.2,.8,.2,1); padding-bottom:env(safe-area-inset-bottom,0px);}
  #orderModal .modal{height:100dvh; max-height:100dvh; border-radius:0;}
  .modal-head{position:relative;}
  .overlay .modal:not(#x) .modal-head::before{content:""; position:absolute; top:6px; left:50%; width:38px; height:4px; margin-left:-19px; border-radius:4px; background:var(--line);}
  #orderModal .modal-head::before{display:none !important;}
  .modal-body{-webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
  .modal-foot{padding-bottom:calc(11px + env(safe-area-inset-bottom,0px)) !important; gap:8px;}
  .modal-foot .btn{flex:1;}
  .modal-close{min-width:44px; min-height:44px;}
  .sa-modal{align-items:flex-end; padding:0;}
  .sa-modal-card{max-width:100% !important; width:100%; border-radius:20px 20px 0 0;}

  /* Toasts sit above the tab bar */
  #toasts{bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important;}
  #waWebFab{bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important;}

  /* Bottom tab bar */
  body.tl-has-tabbar .tl-tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; align-items:stretch; justify-content:space-around;
    background:var(--surface); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); box-shadow:0 -4px 20px rgba(0,0,0,.06);}
  .tl-tab{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:48px; border:0; background:none;
    color:var(--text-faint); font:inherit; font-size:10.5px; font-weight:600; border-radius:12px; position:relative; cursor:pointer; transition:transform .1s, color .12s;}
  .tl-tab svg{width:22px; height:22px;}
  .tl-tab span.l{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px;}
  .tl-tab:active{transform:scale(.92);}
  .tl-tab.active{color:var(--teal-dark,#087C89);}
  .tl-tab.active svg{stroke-width:2.6;}
  [data-theme="dark"] .tl-tab.active{color:#52D5D0;}
  .tl-tab .tl-badge{position:absolute; top:2px; left:calc(50% + 6px); background:var(--marigold,#E7A33E); color:#22190A; font-size:9.5px; line-height:1; padding:2px 5px; border-radius:10px;}
  .tl-tab.tl-fab{flex:0 0 58px; margin-top:-20px;}
  .tl-tab.tl-fab .fab{width:54px; height:54px; border-radius:50%; background:linear-gradient(155deg,#17A5B8,#087487); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(8,116,135,.45); border:3px solid var(--surface);}
  .tl-tab.tl-fab svg{width:26px; height:26px; stroke:#fff;}
  body.tl-kb .tl-tabbar{display:none !important;}   /* hide while keyboard is open */
}
@keyframes tlSheet{from{transform:translateY(40px); opacity:.4}to{transform:none; opacity:1}}

/* Phones in landscape: keep the bar slim */
@media (max-width:980px) and (orientation:landscape) and (max-height:500px){
  .tl-tab span.l{display:none;} .tl-tab{min-height:40px;} .tl-tab.tl-fab{margin-top:-10px;}
  .topbar{position:static;}
}
/* Touch devices: no sticky hover states */
@media (hover:none){
  .nav-item:hover,.icon-btn:hover,.btn:hover{filter:none;}
}
@media (prefers-reduced-motion:reduce){ .overlay .modal{animation:none !important;} }

/* ===== Order details popup — phone layout ===== */
@media (max-width:760px){
  #detailModal{padding:0 !important; align-items:flex-end !important;}
  #detailModal .modal{width:100% !important; max-width:100% !important; border-radius:20px 20px 0 0 !important;
    height:calc(100dvh - env(safe-area-inset-top,0px) - 10px); max-height:calc(100dvh - env(safe-area-inset-top,0px) - 10px); overflow:hidden;}
  #detailModal .modal-head{flex:0 0 auto; padding:16px 14px 10px !important; display:flex; align-items:center; justify-content:space-between;}
  #detailModal .modal-head h3{font-size:17px;}
  #detailModal .modal-body{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden !important; padding:12px 14px 18px !important;}
  #detailModal .detail-name{font-size:18px;}
  #detailModal .info-grid{grid-template-columns:1fr 1fr !important; gap:8px;}
  #detailModal .info-box{padding:9px 11px;}
  #detailModal .info-box .k{font-size:10px;}
  #detailModal .info-box .v{font-size:13.5px;}

  /* Items: 5-column table -> stacked rows */
  #detailModal .line-items{overflow:visible; border-radius:12px;}
  #detailModal .line-items table{display:block; min-width:0 !important; width:100%;}
  #detailModal .line-items thead{display:none;}
  #detailModal .line-items tbody{display:block;}
  #detailModal .line-items tr{display:grid; grid-template-columns:1fr auto auto auto; column-gap:10px; row-gap:2px; padding:10px 12px; border-bottom:1px solid var(--line);}
  #detailModal .line-items tr:last-child{border-bottom:0;}
  #detailModal .line-items td{display:block; padding:0 !important; border:0 !important; font-size:12.5px; color:var(--text-dim);}
  #detailModal .line-items td:nth-child(1){grid-column:1 / 4; grid-row:1; font-size:14px; font-weight:600; color:var(--text); overflow-wrap:anywhere;}
  #detailModal .line-items td:nth-child(5){grid-column:4; grid-row:1; text-align:right; font-size:14px; color:var(--text);}
  #detailModal .line-items td:nth-child(2){grid-column:1; grid-row:2; overflow-wrap:anywhere;}
  #detailModal .line-items td:nth-child(3){grid-column:2; grid-row:2;}
  #detailModal .line-items td:nth-child(4){grid-column:3 / 5; grid-row:2; text-align:right;}
  #detailModal .line-items td:nth-child(3)::before{content:"Qty ";}
  #detailModal .line-items td:nth-child(4)::before{content:"@ ";}

  /* Totals: one label/value per line */
  #detailModal .modal-body>div[style*="justify-content:flex-end"]{flex-direction:column; gap:6px !important; align-items:stretch;}
  #detailModal .modal-body>div[style*="justify-content:flex-end"]>div{flex:none; display:flex; justify-content:space-between; font-size:14px;}
  #detailModal .modal-body>div[style*="justify-content:flex-end"]>div:last-child{border-top:1px dashed var(--line); padding-top:8px; font-size:16px !important;}

  #detailModal .pay-figs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
  #detailModal .pay-fig{min-width:0;}
  #detailModal .pay-fig-v{font-size:16px;}
  #detailModal .pay-actions .btn,#detailModal .info-box .btn{flex:1 1 auto; justify-content:center;}
  #detailModal #detailBarcode{max-width:100%; height:auto;}
  #detailModal .status-actions .btn{min-height:48px; font-size:15px;}

  /* Footer: sticky action bar, compact (WhatsApp full row, rest in pairs) */
  #detailModal .modal-foot{flex:0 0 auto; display:flex; flex-wrap:wrap; gap:8px !important; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)) !important;
    border-top:1px solid var(--line); background:var(--surface); box-shadow:0 -6px 16px rgba(0,0,0,.05);}
  #detailModal .modal-foot .btn{flex:1 1 calc(50% - 8px) !important; min-height:44px; justify-content:center; padding:8px 10px; font-size:13.5px; white-space:nowrap;}
  #detailModal .modal-foot #detailWaBtn{flex-basis:100% !important; min-height:48px; font-size:15px;}
  #detailModal .modal-foot .btn-primary:last-child{display:none;}   /* Done: use the ✕ / swipe instead */
  #detailModal .modal-foot svg{margin-right:4px !important;}
}

/* Popups cover the tab bar (print invoice, preview, payment, alerts...) */
body.tl-modal-open .tl-tabbar{display:none !important;}
body:has(.overlay.show) .tl-tabbar{display:none !important;}
/* Set by index.php around window.print() (beforeprint/afterprint), so the tab
   bar stays hidden through the print dialog even though the preview modal
   itself already closed by then. */
body.tl-print-lock .tl-tabbar{display:none !important;}
@media (max-width:760px){
  body.tl-modal-open{overflow:hidden;}
  #previewModal .preview-head{padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px !important; gap:10px;}
  #previewModal .preview-head-actions{width:100%;}
  #previewModal .preview-head-actions .btn{flex:1 1 auto; justify-content:center;}
  #previewModal .preview-stage{padding:14px 10px calc(24px + env(safe-area-inset-bottom,0px)); -webkit-overflow-scrolling:touch;}
}

/* ===== Customers — card list on phones ===== */
.cust-mob-search{display:none;}
@media (max-width:760px){
  #view-customers .table-card{display:none !important;}
  #view-customers #customersCards{display:flex !important; flex-direction:column; gap:12px;}
  #view-customers .toolbar{margin-bottom:10px;}
  #view-customers .daterange{border-radius:14px; padding:8px 10px;}
  #view-customers .daterange .dr-label{flex:1 1 100%;}
  .cust-mob-search{display:block; width:100%; min-height:48px; margin:0 0 12px; padding:0 14px 0 42px; border-radius:14px; border:1px solid var(--line);
    background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9aa1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px 50%/18px; color:var(--text);}
  .cust-mob-search:focus{outline:none; border-color:var(--teal);}
  .cust-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:0 1px 2px rgba(10,30,40,.04);}
  .cust-card:active{background:var(--surface-2);}
  .cc-top{display:flex; align-items:center; gap:12px;}
  .cc-av{flex:0 0 44px; width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
    color:#fff; background:linear-gradient(155deg,#17A5B8,#087487);}
  .cc-id{flex:1; min-width:0;}
  .cc-name{font-weight:700; font-size:15.5px; line-height:1.25; display:flex; align-items:center; gap:6px; flex-wrap:wrap; overflow-wrap:anywhere;}
  .cc-reg{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:20px; background:var(--marigold-tint,#FFF3DC); color:#8A5A00;}
  .cc-sub{margin-top:2px; font-size:13px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .cc-badge{flex:0 0 auto; align-self:flex-start;}
  .cc-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px;}
  .cc-stats>div{background:var(--surface-2); border-radius:12px; padding:9px 10px; min-width:0;}
  .cc-stats span{display:block; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint);}
  .cc-stats b{display:block; margin-top:2px; font-size:14.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .cc-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px;}
  .cc-last{font-size:12px; color:var(--text-dim);}
  .cc-act{display:flex; gap:8px;}
  .cc-act .table-action{width:40px; height:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
  #view-customers .empty-state{padding:36px 16px;}
}

.tl-filter-btn,.tl-reset{display:none;}
/* ===== Orders — phone layout (tabs, filters, cards) ===== */
@media (max-width:760px){
  [hidden]{display:none !important;}
  /* Status tabs -> swipeable pills */
  #view-orders .tabs{gap:8px; border:0; margin:0 -12px 10px; padding:2px 12px 6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity;}
  #view-orders .tabs::-webkit-scrollbar{display:none;}
  #view-orders .tab{flex:0 0 auto; margin:0; padding:9px 14px; min-height:40px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px;
    background:var(--surface); font-size:13px; scroll-snap-align:start;}
  #view-orders .tab .count{margin:0; min-width:20px; padding:1px 6px; border-radius:99px; background:var(--surface-2); font-size:11px; text-align:center;}
  #view-orders .tab.active{background:var(--teal,#0C9BA7); border-color:var(--teal,#0C9BA7); color:#fff; box-shadow:0 4px 12px rgba(12,155,167,.3);}
  #view-orders .tab.active .count{background:rgba(255,255,255,.25); color:#fff;}

  /* Filters: collapsed behind one button */
  #view-orders .toolbar{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;}
  #view-orders .toolbar>.field-sm,#view-orders .toolbar>.daterange{display:none; width:100% !important; flex:none; min-height:44px; border-radius:12px; font-size:14px !important;}
  #view-orders .toolbar #orderSort{display:block; grid-column:2; grid-row:1;}
  #view-orders .toolbar.tl-open>.field-sm{display:block;}
  #view-orders .toolbar.tl-open>.field-sm#orderStatusFilter,#view-orders .toolbar.tl-open>.field-sm#orderDateFilter{grid-column:span 1;}
  #view-orders .toolbar.tl-open>.daterange:not([hidden]){display:flex; grid-column:1 / -1;}
  .tl-filter-btn{grid-column:1; grid-row:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-radius:12px; border:1px solid var(--line);
    background:var(--surface); color:var(--text); font:inherit; font-size:14px; font-weight:600; position:relative;}
  .tl-filter-btn svg{width:18px; height:18px;}
  .tl-filter-btn .n{min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--teal,#0C9BA7); color:#fff; font-size:11px; display:none; align-items:center; justify-content:center;}
  .tl-filter-btn.has .n{display:inline-flex;}
  .tl-filter-btn.on{border-color:var(--teal,#0C9BA7); color:var(--teal-dark,#087C89);}
  #view-orders .toolbar .tl-reset{display:none; grid-column:1 / -1; min-height:40px; border:0; background:none; color:var(--red,#D64545); font:inherit; font-weight:600; font-size:13px;}
  #view-orders .toolbar.tl-open .tl-reset.has{display:block;}

  /* Page header + tabs + filter row: tighter, so more orders fit on screen */
  #view-orders .page-head{margin-bottom:12px; gap:8px;}
  #view-orders .page-head h1{font-size:22px; line-height:1.15;}
  #view-orders .page-head .sub{font-size:12px; margin-top:2px; color:var(--text-faint);}
  #view-orders .head-actions{gap:8px;}
  #view-orders .head-actions .btn{min-height:40px; padding-top:0; padding-bottom:0; font-size:13px; border-radius:12px;}
  #view-orders .tab{padding:6px 12px; min-height:34px; font-size:12.5px; font-weight:600;}
  #view-orders .tab .count{min-width:18px; padding:1px 6px; font-size:10.5px;}
  #view-orders .toolbar{margin-bottom:10px;}
  #view-orders .toolbar>.field-sm,#view-orders .toolbar>.daterange{min-height:40px; font-size:13.5px !important;}
  .tl-filter-btn{min-height:40px; font-size:13.5px;}

  /* Total strip: one compact, always-visible summary above the cards */
  #view-orders .orders-mob-sum{grid-template-columns:auto auto; justify-content:space-between; gap:6px 0; margin:0 0 10px; padding:10px 14px 12px; border-radius:16px;
    background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%); border:1px solid var(--line); box-shadow:0 1px 2px rgba(10,30,40,.05);}
  #view-orders .orders-mob-sum.has-due{grid-template-columns:auto auto auto;}
  #view-orders .orders-mob-sum .oms-h{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:0 8px; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint);}
  #view-orders .orders-mob-sum .oms-h small{display:block; flex:1 1 100%; text-transform:none; letter-spacing:0; font-weight:500; font-size:10.5px; color:var(--text-faint);}
  #view-orders .orders-mob-sum .oms-c{min-width:0; padding:0 0 0 12px; border-left:1px solid var(--line);}
  #view-orders .orders-mob-sum .oms-c.oms-first{padding-left:0; border-left:0;}
  #view-orders .orders-mob-sum .oms-k{font-size:9.5px; letter-spacing:.07em;}
  #view-orders .orders-mob-sum .oms-v{margin-top:1px; font-size:15px; font-weight:700; line-height:1.25; font-variant-numeric:tabular-nums; white-space:nowrap;}
  #view-orders .orders-mob-sum .oms-v.oms-amt{font-family:var(--font-display); font-size:clamp(16px,5vw,19px); line-height:1.15;}
  #view-orders .orders-mob-sum .oms-dc .oms-v{color:var(--red,#D64545);}

  /* Order cards: compact + premium (status accent on the left edge) */
  #view-orders #ordersCards{gap:10px;}
  .ord-card{position:relative; overflow:hidden; padding:12px 14px 12px 17px !important; border-radius:16px !important; background:var(--surface);
    box-shadow:0 1px 2px rgba(10,30,40,.05), 0 8px 18px -12px rgba(10,30,40,.28);}
  .ord-card::before{content:""; position:absolute; left:0; top:11px; bottom:11px; width:3px; border-radius:0 3px 3px 0; background:var(--marigold);}
  .ord-card.ord-s-processing::before{background:var(--blue);}
  .ord-card.ord-s-ready::before{background:var(--teal);}
  .ord-card.ord-s-delivered::before{background:var(--green);}
  .ord-card.ord-s-cancelled::before{background:var(--red);}
  .ord-card.ord-s-cancelled{opacity:.82;}
  .ord-card:active{background:var(--surface-2);}
  .oc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
  .oc-id{min-width:0;}
  .oc-name{font-weight:700; font-size:14.5px; line-height:1.25; letter-spacing:.005em; overflow-wrap:anywhere;}
  .oc-meta{margin-top:1px; font-size:11px; color:var(--text-faint); font-family:var(--font-mono);}
  .oc-top .badge{flex:0 0 auto; font-size:10.5px; padding:3px 9px; border-radius:99px; font-weight:700;}
  .oc-chips{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px;}
  .ord-card .channel-chip{font-size:10.5px; padding:2px 8px 2px 7px;}
  .oc-assign{font-size:11px; color:var(--text-dim); background:var(--surface-2); padding:2px 8px; border-radius:99px;}
  .ord-card .oc-items{margin-top:6px; font-size:12.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .oc-tags{margin-top:3px; font-size:11.5px; font-weight:600;}
  .oc-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--line);}
  .oc-due span{display:block; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint);}
  .oc-due b{display:block; margin-top:1px; font-size:12.5px;}
  .oc-amt{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:2px 8px;}
  .oc-amt>b{order:2; font-family:var(--font-display); font-size:17px; line-height:1.1;}
  .oc-amt .badge{order:1; font-size:10.5px; padding:2px 8px; border-radius:99px; font-weight:700;}
  .oc-amt em{order:3; flex:0 0 100%; text-align:right; font-style:normal; font-size:11.5px; font-weight:700; color:var(--red,#D64545);}
}