/* Tasks in schedule cells */
.sch-task-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin:0 1px;flex-shrink:0}
.sch-task-dots{display:flex;gap:1px;justify-content:center;margin-top:2px}
.sch-task-badge{position:absolute;top:2px;right:2px;background:#8b5cf6;color:#fff;font-size:9px;font-weight:800;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.sch-day-cell,.sch-day-cell-week{position:relative}
/* Template pattern preview */
.tpl-pattern-day{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;border:2px solid transparent;transition:.15s}
.tpl-pattern-day:hover{transform:scale(1.1)}
.tpl-pattern-day.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(37,99,235,.2)}
/* Task list styles */
.task-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;margin-bottom:6px;transition:.15s;cursor:pointer}
.task-item:hover{border-color:var(--accent);background:rgba(37,99,235,.02)}
.task-item.done{opacity:.5}
.task-item.done .task-title{text-decoration:line-through}
.task-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px;transition:.15s}
.task-check:hover{border-color:var(--accent)}
.task-check.checked{background:var(--success);border-color:var(--success);color:#fff}
.task-priority{font-size:9px;font-weight:800;padding:2px 6px;border-radius:4px}

/* ======================================================
   POSTINGS COLUMN-FILTER ROW (2026-04-29)
   Compact filter inputs/selects under table headers.
   Без этих правил chevron у <select> наезжал на соседнюю
   ячейку при узких колонках, потому что .input родитель
   получал inline min-width:94px и расширялся за th.
====================================================== */
.postings-filter-row th{
  padding:2px 4px !important;
  vertical-align:middle;
  overflow:hidden;
}
/* AUDIT 2026-04-29: гарантируем минимальную ширину для th с селектами,
   чтобы chevron не налезал на текст (например "Кол-во▼" в узкой колонке).
   :has() поддерживается во всех современных браузерах (Chrome 105+, FF 121+). */
.postings-filter-row th:has(> select.input){ min-width:96px; }
.postings-filter-row .input{
  min-width:0 !important;
  max-width:100%;
  box-sizing:border-box;
}
.postings-filter-row select.input{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
  /* AUDIT 2026-04-29: пододвинули chevron к правому краю (с 11/6px до 7/2px),
     чтобы в узких колонках типа "Кол-во" стрелка не налезала на букву "о". */
  background-position:calc(100% - 7px) 12px,calc(100% - 2px) 12px;
  background-size:4px 4px,4px 4px;
  background-repeat:no-repeat;
  text-overflow:ellipsis;
}
html.theme-dark .postings-filter-row select.input{
  background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
}


/* ======================================================
   MOBILE FONT & TOUCH OPTIMIZATION (2026-02-21)
   Comfortable fonts, proper touch targets, readable UI
====================================================== */

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

  /* Base font bump */
  body{ font-size:15px; -webkit-text-size-adjust:100%; }

  /* Page title */
  h2{ font-size:20px !important; }
  .crumb b{ font-size:17px !important; }
  .crumb span{ font-size:13px !important; }

  /* Inputs, selects, textareas — 16px prevents iOS zoom */
  .input, select, textarea,
  .card .input, .card select, .card textarea,
  .pp-input, .searchbox input, input[type="text"],
  input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="search"]{
    font-size:16px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
    min-height:44px;
    border-radius:10px;
  }
  .card textarea{ min-height:70px !important; }

  /* Buttons — larger touch targets */
  .btn, .btn2, .btn-success, button{
    font-size:14px !important;
    min-height:44px;
    padding:10px 14px !important;
  }

  /* Tabs — readable and tappable */
  .tab{
    font-size:14px !important;
    padding:10px 14px !important;
    min-height:40px;
  }

  /* Table text */
  table{ font-size:14px !important; }
  td, th{ padding:10px 8px !important; }
  th{ font-size:12px !important; }

  /* Card content */
  .card{ padding:14px !important; }
  .card h3{ font-size:15px !important; }

  /* KPI boxes */
  .kpi .box b{ font-size:22px !important; }
  .kpi .box{ padding:14px !important; font-size:14px; }

  /* Small text readable */
  .small{ font-size:13px !important; }
  .badge, .pill{ font-size:12px !important; padding:4px 10px !important; }

  /* Link/action text */
  .link{ font-size:14px !important; }

  /* Modals full-width */
  .ls-modal{ min-width:auto !important; width:94vw !important; max-width:94vw !important; }
  .ls-modal-head h3{ font-size:17px !important; }
  .ls-modal-body{ padding:16px !important; font-size:15px; }
  .ls-modal-body label{ font-size:14px !important; }
  .ls-modal-footer{ padding:14px 16px !important; }
  .ls-modal-footer .btn,
  .ls-modal-footer .btn2{ font-size:14px !important; }

  /* Topbar */
  .topbar-inner{ padding:10px 12px !important; }
  .searchbox{ padding:8px 12px !important; }
  .searchbox input{ font-size:15px !important; }
  .locpill{ font-size:14px !important; padding:8px 12px !important; }
  .topselect{ font-size:14px !important; }

  /* Content padding */
  .content{ padding:12px !important; }

  /* Breadcrumb / page header */
  .row .btn, .row .btn2{ width:auto !important; }

  /* Labels in forms */
  label{ font-size:14px; }

  /* POS elements */
  .pos-product-name{ font-size:16px !important; }
  .pos-product-price{ font-size:20px !important; }
  .pos-product-stock{ font-size:13px !important; }
  .pos-search input{ font-size:16px !important; }

  /* Customer/order forms */
  .order-drawer-body{ font-size:15px; }
  .order-drawer-body label{ font-size:14px !important; }
  .order-drawer-body .input,
  .order-drawer-body select,
  .order-drawer-body textarea{
    font-size:16px !important;
    padding:10px 12px !important;
  }

  /* Settings */
  .st-section-title{ font-size:18px !important; }
  .st-section-desc{ font-size:14px !important; }
  .st-field-label{ font-size:13px !important; }
  .st-field-hint{ font-size:12px !important; }
  .st-info-value{ font-size:16px !important; }
  .st-form-label{ font-size:14px !important; }
  .st-form-input{ font-size:15px !important; }
  .st-form-value{ font-size:15px !important; }

  /* Posting table */
  .pp-table td{ padding:10px 8px !important; font-size:14px !important; }
  .pp-table th{ font-size:12px !important; }
  .pp-input{ font-size:15px !important; padding:10px !important; min-height:40px; }

  /* Staff table */
  .staff-slide-body{ font-size:15px; }
  .staff-perm-row{ font-size:14px !important; padding:10px 8px !important; min-height:44px; }

  /* Toast / notifications */
  .toast{ font-size:14px !important; }

  /* Dashboard */
  .dash-greet-hello{ font-size:17px !important; }
  .dash-greet-date{ font-size:13px !important; }
  .dash-kpi-value{ font-size:18px !important; }
  .dash-kpi-label{ font-size:12px !important; }
  .dash-section-title{ font-size:15px !important; }
  .dash-order-num{ font-size:13px !important; }
  .dash-order-info span{ font-size:13px !important; }
  .dash-order-price{ font-size:14px !important; }
  .dash-pipe-cnt{ font-size:22px !important; }
  .dash-pipe-lbl{ font-size:12px !important; }
  .dash-alert b{ font-size:14px !important; }

  /* Generic inline styles override */
  [style*="font-size:11px"]{ font-size:13px !important; }
  [style*="font-size:12px"]{ font-size:13px !important; }
  [style*="font-size: 11px"]{ font-size:13px !important; }
  [style*="font-size: 12px"]{ font-size:13px !important; }

  /* Checkbox/radio larger */
  input[type="checkbox"], input[type="radio"]{
    width:20px !important; height:20px !important;
    min-width:20px; min-height:20px;
  }

  /* Select dropdown */
  select{ appearance:auto; padding-right:30px !important; }
}

/* --- VERY SMALL PHONES (≤420px) --- */
@media (max-width: 420px){
  body{ font-size:15px; }
  h2{ font-size:18px !important; }
  .crumb b{ font-size:16px !important; }

  .btn, .btn2{ padding:10px 10px !important; font-size:13px !important; }
  .tab{ font-size:13px !important; padding:8px 10px !important; }

  .dash-kpi-value{ font-size:20px !important; }
  .dash-greet-hello{ font-size:18px !important; }

  .ls-modal{ width:98vw !important; max-width:98vw !important; }
  .sidebar{ width:94vw !important; }
}

/* ── Pricing Page ── */
.pricing-header{text-align:center;margin-bottom:10px}
.pricing-header h2{font-size:18px;font-weight:800;color:var(--text);margin-bottom:2px}
.pricing-header p{font-size:12px;color:var(--muted)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:960px;margin:0 auto}
.pricing-card{background:#fff;border:2px solid var(--border);border-radius:14px;padding:14px 14px;position:relative;transition:all .25s;display:flex;flex-direction:column}
.pricing-card:hover{border-color:var(--primary);box-shadow:0 6px 20px rgba(0,0,0,.07);transform:translateY(-2px)}
.pricing-card.popular{border-color:var(--primary);box-shadow:0 4px 16px rgba(37,99,235,.1)}
.pricing-pop-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:10px;font-weight:700;padding:3px 12px;border-radius:20px;white-space:nowrap}
.pricing-name{font-size:16px;font-weight:800;margin-bottom:1px}
.pricing-desc{font-size:11px;color:var(--muted);margin-bottom:6px;min-height:20px}
.pricing-price{font-size:22px;font-weight:900;line-height:1;margin-bottom:1px}
.pricing-price small{font-size:11px;font-weight:500;color:var(--muted)}
.pricing-period{font-size:10px;color:var(--muted);margin-bottom:8px}
.pricing-divider{height:1px;background:var(--border);margin:0 -14px 8px}
.pricing-features{list-style:none;margin-bottom:8px;flex:1}
.pricing-features li{padding:2px 0;font-size:11px;display:flex;align-items:center;gap:5px}
.pricing-features li::before{content:"✓";color:var(--success);font-weight:700;font-size:12px;flex-shrink:0}
.pricing-limits{background:var(--bg);border-radius:8px;padding:6px 10px;margin-bottom:8px;font-size:11px}
.pricing-limits div{display:flex;justify-content:space-between;padding:2px 0}
.pricing-limits span{font-weight:700}
.pricing-btn{width:100%;padding:8px;border:2px solid var(--primary);border-radius:10px;background:transparent;color:var(--primary);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;margin-top:auto}
.pricing-btn:hover{background:var(--primary);color:#fff}
.pricing-card.popular .pricing-btn{background:var(--primary);color:#fff}
.pricing-card.popular .pricing-btn:hover{background:#1d4ed8}
.pricing-current{background:var(--bg);border-radius:14px;padding:14px 20px;max-width:960px;margin:0 auto 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pricing-current-info{display:flex;align-items:center;gap:12px}
.pricing-current-badge{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}
.pricing-current-text h4{font-size:14px;font-weight:700;margin-bottom:1px}
.pricing-current-text p{font-size:11px;color:var(--muted)}
.pricing-off{text-align:center;padding:40px 20px;color:var(--muted)}
.pricing-off-ico{font-size:40px;margin-bottom:10px}
@media(max-width:640px){
  .pricing-grid{grid-template-columns:1fr;gap:12px}
  .pricing-card{padding:16px 14px}
  .pricing-price{font-size:22px}
  .pricing-current{flex-direction:column;text-align:center}
}
.theme-dark .pricing-card{background:var(--card,#1e293b);border-color:var(--border,#334155)}
.theme-dark .pricing-card:hover{border-color:var(--primary);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.theme-dark .pricing-limits{background:var(--bg,#0f172a)}
.theme-dark .pricing-current{background:var(--bg,#0f172a)}

/* ======================================================================
   🔧 COMPREHENSIVE FIX PACK (2026-03 AUDIT)
   Fixes: overflow in modals, dark-mode inline colors, responsive grids,
   FAB safety, POS fixed widths, min-width overflow on mobile
====================================================================== */

/* ── 1. MODAL INLINE GRIDS: force responsive on mobile ── */
@media (max-width: 768px){
  /* Any inline grid inside modals → max 2 columns */
  .modal-box [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  .modal-box [style*="grid-template-columns: 1fr 1fr 1fr 1fr"]{
    grid-template-columns: 1fr 1fr !important;
  }
  .modal-box [style*="grid-template-columns:1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]),
  .modal-box [style*="grid-template-columns: 1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]){
    grid-template-columns: 1fr 1fr !important;
  }
  /* 2-col grids in modals stack on very small screens */
  .modal-box [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  .modal-box [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]){
    grid-template-columns: 1fr 1fr !important;
  }
  .modal-box .grid2,
  .modal-box .grid3,
  .modal-box .grid4{
    grid-template-columns: 1fr !important;
  }
  /* flex children with min-width inside modals — prevent overflow */
  .modal-box [style*="min-width:240px"],
  .modal-box [style*="min-width: 240px"],
  .modal-box [style*="min-width:220px"],
  .modal-box [style*="min-width: 220px"],
  .modal-box [style*="min-width:200px"],
  .modal-box [style*="min-width: 200px"]{
    min-width: 0 !important;
    width: 100% !important;
  }
  /* flex rows inside modals wrap properly */
  .modal-box .row,
  .modal-box [style*="display:flex"][style*="gap"]{
    flex-wrap: wrap !important;
  }
  .modal-box [style*="display:flex"] > [style*="flex:1"]{
    min-width: 0 !important;
    flex-basis: 100% !important;
  }
}

@media (max-width: 480px){
  /* On very small phones: all modal grids → single column */
  .modal-box [style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
  .modal-box .grid2,
  .modal-box .grid3,
  .modal-box .grid4{
    grid-template-columns: 1fr !important;
  }
}

/* ── 2. DOC-HEADER-COMPACT: fix 768-900px gap ── */
@media (max-width: 900px) and (min-width: 769px){
  .doc-header-compact{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ── 3. LS-TRANSFER-GRID: tablet fix ── */
@media (max-width: 980px) and (min-width: 769px){
  .ls-transfer-grid{
    grid-template-columns: 200px 1fr !important;
  }
}
@media (max-width: 768px){
  .ls-transfer-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ── 4. POS FIXED-WIDTH BUTTONS: make flexible on mobile ── */
@media (max-width: 768px){
  .pos-cart-header [style*="width:180px"],
  .pos-container [style*="width:180px"]{
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  /* POS discount inputs: keep compact but allow shrink */
  #posDiscountValue{
    width: 60px !important;
    min-width: 50px !important;
    max-width: 70px !important;
  }
  #posDiscountType{
    width: 50px !important;
    min-width: 44px !important;
    max-width: 56px !important;
  }
}

/* ── 5. DARK MODE: override common inline colors ── */
html.theme-dark [style*="background:#fff"]{
  background: var(--card) !important;
}
html.theme-dark [style*="background: #fff"]{
  background: var(--card) !important;
}
html.theme-dark [style*="background:#fafbfc"],
html.theme-dark [style*="background: #fafbfc"],
html.theme-dark [style*="background:#fafafa"],
html.theme-dark [style*="background: #fafafa"],
html.theme-dark [style*="background:#f8fafc"],
html.theme-dark [style*="background: #f8fafc"]{
  background: var(--bg) !important;
}
html.theme-dark [style*="background:#f3f4f6"],
html.theme-dark [style*="background: #f3f4f6"],
html.theme-dark [style*="background:#f9fafb"],
html.theme-dark [style*="background: #f9fafb"]{
  background: var(--bg) !important;
}

/* Dark mode: error/warning background colors */
html.theme-dark [style*="background:#fef2f2"],
html.theme-dark [style*="background: #fef2f2"]{
  background: rgba(239,68,68,.1) !important;
}
html.theme-dark [style*="background:#fef3c7"],
html.theme-dark [style*="background: #fef3c7"]{
  background: rgba(245,158,11,.1) !important;
}
html.theme-dark [style*="background:#fde68a"],
html.theme-dark [style*="background: #fde68a"]{
  background: rgba(245,158,11,.15) !important;
}
html.theme-dark [style*="background:#d1fae5"],
html.theme-dark [style*="background: #d1fae5"]{
  background: rgba(16,185,129,.1) !important;
}
html.theme-dark [style*="background:#fee2e2"],
html.theme-dark [style*="background: #fee2e2"]{
  background: rgba(239,68,68,.1) !important;
}
html.theme-dark [style*="background:#ecfdf5"],
html.theme-dark [style*="background: #ecfdf5"]{
  background: rgba(16,185,129,.08) !important;
}
html.theme-dark [style*="background:#eff6ff"],
html.theme-dark [style*="background: #eff6ff"]{
  background: rgba(59,130,246,.08) !important;
}
html.theme-dark [style*="background:#dbeafe"],
html.theme-dark [style*="background: #dbeafe"]{
  background: rgba(59,130,246,.12) !important;
}
html.theme-dark [style*="background:#f5f3ff"],
html.theme-dark [style*="background: #f5f3ff"]{
  background: rgba(139,92,246,.08) !important;
}
html.theme-dark [style*="background:#f0fdf4"],
html.theme-dark [style*="background: #f0fdf4"]{
  background: rgba(16,185,129,.08) !important;
}
html.theme-dark [style*="background:#eef2ff"],
html.theme-dark [style*="background: #eef2ff"]{
  background: rgba(59,130,246,.08) !important;
}

/* Dark mode: text colors that become invisible on dark bg */
html.theme-dark [style*="color:#111827"],
html.theme-dark [style*="color: #111827"]{
  color: var(--text) !important;
}
html.theme-dark [style*="color:#374151"],
html.theme-dark [style*="color: #374151"]{
  color: var(--text) !important;
}
html.theme-dark [style*="color:#1f2937"],
html.theme-dark [style*="color: #1f2937"]{
  color: var(--text) !important;
}
html.theme-dark [style*="color:#666"]{
  color: var(--muted) !important;
}
html.theme-dark [style*="color:#999"]{
  color: var(--muted) !important;
}
html.theme-dark [style*="color:#6b7280"],
html.theme-dark [style*="color: #6b7280"]{
  color: var(--muted) !important;
}
html.theme-dark [style*="color:#9ca3af"],
html.theme-dark [style*="color: #9ca3af"]{
  color: var(--muted) !important;
}
html.theme-dark [style*="color:#64748b"],
html.theme-dark [style*="color: #64748b"]{
  color: var(--muted) !important;
}
html.theme-dark [style*="color:#94a3b8"],
html.theme-dark [style*="color: #94a3b8"]{
  color: var(--muted) !important;
}

/* Dark mode: border colors on inline-styled elements */
html.theme-dark [style*="border:1px solid #e5e7eb"],
html.theme-dark [style*="border: 1px solid #e5e7eb"],
html.theme-dark [style*="border-color:#e5e7eb"],
html.theme-dark [style*="border-color: #e5e7eb"]{
  border-color: var(--border) !important;
}
html.theme-dark [style*="border:1px solid #ccc"],
html.theme-dark [style*="border: 1px solid #ccc"]{
  border-color: var(--border) !important;
}
html.theme-dark [style*="border:1px solid #fecaca"],
html.theme-dark [style*="border: 1px solid #fecaca"]{
  border-color: rgba(239,68,68,.3) !important;
}

/* Dark mode: inline white backgrounds in modals/drawers */
html.theme-dark .modal-box [style*="background:#fff"],
html.theme-dark .modal-box [style*="background: #fff"],
html.theme-dark .order-drawer [style*="background:#fff"],
html.theme-dark .order-drawer [style*="background: #fff"],
html.theme-dark .pos-drawer [style*="background:#fff"],
html.theme-dark .pos-drawer [style*="background: #fff"]{
  background: var(--card) !important;
}

/* Dark mode: verification/login overlay cards */
html.theme-dark [style*="background:#fff"][style*="border-radius:24px"],
html.theme-dark [style*="background:#fff"][style*="border-radius:20px"]{
  background: var(--card) !important;
  color: var(--text) !important;
}

/* Dark mode: inline bg var(--bg) areas with white text */
html.theme-dark [style*="background:var(--bg)"] [style*="color:#111827"],
html.theme-dark [style*="background:var(--bg)"] [style*="color:#374151"]{
  color: var(--text) !important;
}

/* Dark mode: code digit inputs in verification */
html.theme-dark .al-code-digit,
html.theme-dark [style*="border:2px solid #e5e7eb"][style*="background:#fafafa"]{
  background: #1e293b !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Dark mode: pricing cards */
html.theme-dark .pricing-card{
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
html.theme-dark .pricing-limits{
  background: var(--bg);
}
html.theme-dark .pricing-current{
  background: var(--card);
}
html.theme-dark .pricing-btn{
  border-color: var(--accent);
  color: var(--accent);
}

/* Dark mode: task items */
html.theme-dark .task-item{
  background: var(--card);
  border-color: var(--border);
}

/* Dark mode: schedule table */
html.theme-dark .sch-table th{
  background: #1e293b;
  color: var(--muted);
}
html.theme-dark .sch-table td{
  border-color: var(--border);
}
html.theme-dark .sch-table th{
  border-color: var(--border);
}
html.theme-dark .sch-day-cell:hover{
  background: rgba(59,130,246,.1);
}

/* ── 6. GENERAL OVERFLOW SAFETY ── */
/* Text in badges/pills never overflows */
.badge, .pill, .dash-order-status{
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Buttons with long text in modals */
.modal-box .btn,
.modal-box .btn2{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 480px){
  .modal-box .btn,
  .modal-box .btn2{
    white-space: normal;
    text-align: center;
  }
}

/* Modal footer buttons row: wrap on mobile */
@media (max-width: 768px){
  .modal-box .row:last-child{
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .modal-box .row:last-child .btn,
  .modal-box .row:last-child .btn2{
    flex: 1 1 auto;
    min-width: 100px;
  }
}

/* Labels inside grids: prevent text clipping */
.modal-box label,
.order-drawer-body label{
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Long select options: don't stretch container */
.modal-box select,
.order-drawer-body select{
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── 7. CONTENT AREA: prevent any child from exceeding viewport ── */
.content > *{
  max-width: 100%;
  box-sizing: border-box;
}

/* ── 8. ORDER DRAWER: inline min-width fix ── */
@media (max-width: 768px){
  .order-drawer-body [style*="min-width:220px"],
  .order-drawer-body [style*="min-width: 220px"],
  .order-drawer-body [style*="min-width:240px"],
  .order-drawer-body [style*="min-width: 240px"]{
    min-width: 0 !important;
    width: 100% !important;
  }
  .order-drawer-body [style*="display:flex"][style*="gap"] > [style*="flex:1"]{
    min-width: 0 !important;
    flex-basis: 100% !important;
  }
}

/* ── 9. SETTINGS LAYOUT: consolidated tablet fix ── */
@media (max-width: 980px) and (min-width: 769px){
  .settings-layout{
    grid-template-columns: 180px 1fr !important;
    gap: 14px !important;
  }
}

/* ── 10. PRINT TEMPLATE / FORM EDITOR LAYOUT: tablet ── */
@media (max-width: 980px){
  .pt-layout{
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .fe-layout{
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
}

/* ── 11. KPI 4-COLUMN INLINE GRIDS: responsive ── */
@media (max-width: 768px){
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"]{
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px){
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"]{
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]),
  [style*="grid-template-columns: 1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]){
    grid-template-columns: 1fr !important;
  }
}

/* ── 12. ORDER EDIT GRID: fix on tablets ── */
@media (max-width: 1200px) and (min-width: 769px){
  .order-edit-grid{
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }
  .order-edit-main{
    overflow: visible !important;
  }
  .order-edit-history{
    position: static !important;
    height: auto !important;
    max-height: 400px;
    overflow-y: auto !important;
  }
}

/* ── 13. LONG TEXT IN TABLE CELLS: ellipsis safety ── */
table td:not(:last-child):not(.chk-col):not(:has(.pp-dd)){
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 14. DARK MODE: toast with inline bg ── */
html.theme-dark .toast[style]{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ── 15. DARK MODE: schedule cell tags ── */
html.theme-dark .sch-cell-tag[style*="background"]{
  opacity: 0.85;
}

/* ── 16. MOBILE: scrollable tabs that overflow ── */
@media (max-width: 768px){
  .tabs{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tabs::-webkit-scrollbar{
    display: none;
  }
  .tabs .tab{
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* ── 17. SIDEBAR PROFILE: long names ── */
.side-profile-name{
  max-width: 140px;
}
@media (max-width: 768px){
  .side-profile-name{
    max-width: 200px;
    font-size: 15px !important;
  }
}

/* ── 18. INLINE FONT-SIZE OVERRIDES IN DARK MODE ── */
html.theme-dark [style*="color:#991b1b"],
html.theme-dark [style*="color: #991b1b"]{
  color: #fca5a5 !important;
}
html.theme-dark [style*="color:#92400e"],
html.theme-dark [style*="color: #92400e"]{
  color: #fcd34d !important;
}
html.theme-dark [style*="color:#a16207"],
html.theme-dark [style*="color: #a16207"]{
  color: #fbbf24 !important;
}
html.theme-dark [style*="color:#166534"],
html.theme-dark [style*="color: #166534"]{
  color: #6ee7b7 !important;
}
html.theme-dark [style*="color:#1e40af"],
html.theme-dark [style*="color: #1e40af"]{
  color: #93c5fd !important;
}

/* ── 19. STOCKTAKE / WRITEOFF / TRANSFER MODALS: responsive ── */
@media (max-width: 768px){
  .modal-box .row[style*="flex-wrap:wrap"] > div[style*="min-width:240px"],
  .modal-box .row[style*="flex-wrap: wrap"] > div[style*="min-width:240px"]{
    min-width: 0 !important;
    flex-basis: 100% !important;
  }
}

/* ── 20. PP-TABLE (POSTING) RESPONSIVE TWEAKS ── */
@media (max-width: 768px){
  .pp-table td,
  .pp-table th{
    white-space: normal !important;
    word-break: break-word;
  }
  .pp-name-text{
    max-width: 150px;
    white-space: normal !important;
    word-break: break-word;
  }
}

/* ── 21. LS-KV GRID: handle long labels ── */
@media (max-width: 480px){
  .ls-kv{
    grid-template-columns: 1fr !important;
    gap: 2px 0 !important;
  }
  .ls-kv .k{
    font-weight: 600;
  }
}

/* ── 22. VERIFICATION CODE DIGITS: responsive sizing ── */
@media (max-width: 380px){
  .al-code-digit,
  .al-input.al-code-digit{
    width: 36px !important;
    height: 44px !important;
    font-size: 18px !important;
    padding: 0 !important;
    min-height: auto !important;
    border-radius: 8px !important;
  }
  /* Verification overlay code digits */
  [data-idx].al-code-digit{
    width: 38px !important;
    height: 46px !important;
    font-size: 20px !important;
  }
}

/* ── 23. NOTIFICATION/ERROR MESSAGES: don't exceed container ── */
[id$="Msg"][style*="font-size"],
[id$="Warn"][style*="font-size"]{
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── 24. POSTING PP-DD DROPDOWN: dark mode ── */
html.theme-dark .pp-dd{
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.4) !important;
}
html.theme-dark .pp-dd .pp-opt:hover,
html.theme-dark .pp-dd .pp-opt.active{
  background: rgba(16,185,129,.12) !important;
}

/* ── 25. DARK MODE: print menu dropdown ── */
html.theme-dark #printMenu{
  background: var(--card) !important;
  border-color: var(--border) !important;
}

/* ── 26. DARK MODE: POS customer dropdown ── */
html.theme-dark #posCustomerDD{
  background: var(--card) !important;
  border-color: var(--border) !important;
}

/* ── 27. DARK MODE: barcode print dialog ── */
html.theme-dark [style*="border:1px solid #ccc"]{
  border-color: var(--border) !important;
}

/* ── 28. GENERAL: long product/customer names in all contexts ── */
.pos-product-name,
.pos-cart-item-name,
.sr-items,
.dash-order-info span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── 29. MOBILE: prevent layout shift from select elements ── */
@media (max-width: 768px){
  .topselect{
    max-width: 120px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ======================================================================
   30. FULL MOBILE/TABLET RESPONSIVE — CRM, POS, Shop (2026-03)
   All windows fit on phones (320px+) and tablets without overflow
====================================================================== */

/* ── 30A. INLINE GRID COLUMNS: force responsive on phones ── */
@media (max-width: 768px){
  /* 4-col inline grids → 2 cols */
  .content [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  .content [style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  .content [style*="grid-template-columns:repeat(4,1fr)"],
  .content [style*="grid-template-columns:repeat(4, 1fr)"],
  .content [style*="grid-template-columns: repeat(4,1fr)"],
  .content [style*="grid-template-columns: repeat(4, 1fr)"],
  .card [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  .card [style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  .card [style*="grid-template-columns:repeat(4,1fr)"],
  .card [style*="grid-template-columns: repeat(4,1fr)"]{
    grid-template-columns: 1fr 1fr !important;
  }
  /* 3-col inline grids → 2 cols */
  .content [style*="grid-template-columns:1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]),
  .content [style*="grid-template-columns: 1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]),
  .content [style*="grid-template-columns:repeat(3,1fr)"],
  .content [style*="grid-template-columns: repeat(3,1fr)"],
  .content [style*="grid-template-columns:repeat(3, 1fr)"],
  .card [style*="grid-template-columns:1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]),
  .card [style*="grid-template-columns: 1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]){
    grid-template-columns: 1fr 1fr !important;
  }
  /* Fixed-px column grids → single col */
  .content [style*="grid-template-columns:1fr 190px"],
  .content [style*="grid-template-columns:1fr 180px"],
  .content [style*="grid-template-columns:180px 1fr"],
  .content [style*="grid-template-columns:120px 1fr"],
  .content [style*="grid-template-columns: 180px 1fr"],
  .content [style*="grid-template-columns: 120px 1fr"],
  .card [style*="grid-template-columns:180px 1fr"],
  .card [style*="grid-template-columns: 180px 1fr"]{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px){
  /* On small phones: all 2-col inline grids → single col */
  .content [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  .content [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  .card [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  .card [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]){
    grid-template-columns: 1fr !important;
  }
  /* repeat(auto-fill,minmax(160px,...)) → 1fr on tiny screens */
  .content [style*="grid-template-columns:repeat(auto-fill"]{
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 380px){
  .content [style*="grid-template-columns:repeat(auto-fill"]{
    grid-template-columns: 1fr !important;
  }
}

/* ── 30B. INLINE MIN-WIDTH / WIDTH on select/input/div: prevent overflow ── */
@media (max-width: 768px){
  /* Large min-width flex children */
  .content [style*="min-width:240px"],
  .content [style*="min-width: 240px"],
  .content [style*="min-width:220px"],
  .content [style*="min-width: 220px"],
  .content [style*="min-width:200px"],
  .content [style*="min-width: 200px"]{
    min-width: 0 !important;
    flex-basis: 100% !important;
  }
  /* Filter selects/inputs with fixed widths */
  .content select[style*="min-width:140px"],
  .content select[style*="min-width:150px"],
  .content select[style*="min-width:160px"],
  .content select[style*="min-width:180px"],
  .content select[style*="min-width: 140px"],
  .content select[style*="min-width: 150px"],
  .content select[style*="min-width: 160px"],
  .content select[style*="min-width: 180px"],
  .content div[style*="min-width:180px"],
  .content div[style*="min-width: 180px"]{
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 calc(50% - 4px) !important;
  }
  /* Flex containers in content: ensure wrapping */
  .content > div[style*="display:flex"][style*="gap"],
  .card > div[style*="display:flex"][style*="gap"]{
    flex-wrap: wrap !important;
  }
  /* Tables inside JS: fit screen width, no horizontal scroll */
  .content table[style*="min-width:600px"],
  .content table[style*="min-width:700px"],
  .content table[style*="min-width: 600px"],
  .content table[style*="min-width: 700px"]{
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 480px){
  /* On small phones: all filter elements go full-width */
  .content select[style*="min-width:100px"],
  .content select[style*="min-width:120px"],
  .content select[style*="min-width:130px"],
  .content select[style*="min-width: 120px"],
  .content select[style*="min-width: 130px"]{
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .content input[type="date"][style*="width:130px"],
  .content input[type="date"][style*="width:140px"],
  .content input[type="date"][style*="width: 130px"],
  .content input[type="date"][style*="width: 140px"]{
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .content input[style*="min-width:220px"],
  .content input[style*="min-width: 220px"]{
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── 30C. SCHEDULE TABLE: scroll container + today highlight + sticky columns ── */
.sch-scroll-wrap{
  width:100%;
  max-width:100%;
  min-height:0;
  max-height:min(720px, calc(100vh - 260px));
  overflow:auto;
  overscroll-behavior:contain;
  background:var(--card);
  border:1px solid rgba(17,24,39,.04);
  border-radius:10px;
  box-shadow:var(--shadow);
  scrollbar-gutter:stable;
}
.sch-calendar-card{
  display:inline-block;
  width:max-content;
  min-width:100%;
  padding:0 !important;
  overflow:visible;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.sch-table{
  --sch-name-col:300px;
  --sch-hours-col:74px;
  background:var(--card);
}
.sch-table th,
.sch-table td{ background:var(--card); }
.sch-table thead th{ background:#fafbfc; }
.sch-table .sch-weekend{ background:rgba(148,163,184,.04); }
.sch-today{ background:rgba(239,68,68,.1)!important; }
th.sch-today{ border-bottom:3px solid #ef4444; background:rgba(239,68,68,.15)!important; }
th.sch-today .sch-day-num{ color:#ef4444; font-weight:800; font-size:14px; }
th.sch-today .sch-day-dow{ color:#ef4444; font-weight:700; }
.sch-table thead th{ position:sticky; top:0; z-index:1; }
.sch-name-col, .sch-name-cell{
  position:sticky !important; left:0 !important; z-index:2;
  min-width:var(--sch-name-col) !important;
  width:var(--sch-name-col) !important;
  max-width:var(--sch-name-col) !important;
  background:#fff !important; box-shadow:3px 0 6px rgba(0,0,0,.12);
}
.sch-hours-col,
.sch-hours-cell{
  min-width:var(--sch-hours-col) !important;
  width:var(--sch-hours-col) !important;
  max-width:var(--sch-hours-col) !important;
}
.sch-hours-sticky{
  position:sticky !important;
  left:var(--sch-name-col) !important;
  z-index:2;
  background:#fff !important;
  box-shadow:3px 0 6px rgba(0,0,0,.08);
}
html.theme-dark .sch-name-col,
html.theme-dark .sch-name-cell,
html.theme-dark .sch-hours-sticky{ background:var(--card) !important; }
.sch-table thead .sch-name-col,
.sch-table thead .sch-hours-col{
  z-index:5 !important;
  background:#fafbfc !important;
}
.sch-name-cell{
  overflow:hidden;
}
.sch-name-cell > div{
  min-width:0;
}
.sch-name-cell div[style*="font-weight:600"]{
  overflow:hidden;
  text-overflow:ellipsis;
}
.sch-summary-card{
  margin-top:16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.sch-summary-card table{
  min-width:760px;
}
html.theme-dark .sch-table thead .sch-name-col,
html.theme-dark .sch-table thead .sch-hours-col{
  background:var(--card) !important;
}

@media (max-width: 480px){
  .sch-hours-col,
  .sch-hours-cell{
    display: none !important;
  }
}
@media (max-width: 380px){
  .sch-day-col{
    min-width: 40px !important;
    width: 40px !important;
  }
}
@media (max-width: 980px){
  .sch-table{
    --sch-name-col:220px;
    --sch-hours-col:58px;
  }
}

/* ── 30D. BULK ACTION BAR: above bottom nav + safe area ── */
@media (max-width: 768px){
  .bulk-bar{
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  .bulk-bar .btn,
  .bulk-bar .btn2{
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

/* ── 30E. TEXT OVERFLOW PROTECTION: all contexts ── */
/* Headings inside cards/content */
.content h3,
.content h4,
.card h3,
.card h4{
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Inline block titles */
.content > div > b,
.content > div > h2{
  word-break: break-word;
}
/* Customer/product names in lists */
td a,
td span:not(.badge):not(.pill){
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Long values in forms */
@media (max-width: 768px){
  .content [style*="font-weight:900"][style*="text-align:right"],
  .content [style*="font-weight:800"][style*="text-align:right"]{
    font-size: 14px !important;
    min-width: 0 !important;
  }
}

/* ── 30F. LOGIN MODALS: location picker, shift open on small screens ── */
@media (max-width: 480px){
  [style*="border-radius:24px"][style*="max-width:460px"],
  [style*="border-radius:20px"][style*="max-width:440px"],
  [style*="border-radius:20px"][style*="max-width:400px"]{
    padding: 20px 14px !important;
    max-width: 96vw !important;
    margin: 0 auto !important;
  }
  [style*="border-radius:24px"][style*="max-width:460px"] h2,
  [style*="border-radius:20px"][style*="max-width:440px"] h2,
  [style*="border-radius:20px"][style*="max-width:400px"] h2{
    font-size: 18px !important;
  }
}

/* ── 30G. INVENTORY: 7-col grid (week overview) ── */
@media (max-width: 480px){
  .content [style*="grid-template-columns:repeat(7"]{
    gap: 2px !important;
    font-size: 11px !important;
  }
}

/* ── 30H. BUTTONS WITH FIXED min-width IN MODALS/CONTENT ── */
@media (max-width: 480px){
  .content button[style*="min-width:120px"],
  .content button[style*="min-width:160px"],
  .content button[style*="min-width: 120px"],
  .content button[style*="min-width: 160px"],
  .modal-box button[style*="min-width:120px"],
  .modal-box button[style*="min-width:160px"]{
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── 30I. POS (CRM-embedded): location select overflow ── */
@media (max-width: 480px){
  .pos-search select[style*="min-width:120px"]{
    min-width: 0 !important;
    max-width: 90px !important;
    font-size: 11px !important;
  }
}

/* ── 30J. WORKS CATALOG: group select on mobile ── */
@media (max-width: 480px){
  select[style*="min-width:140px"]{
    min-width: 0 !important;
    max-width: 130px !important;
  }
}

/* ── 30K. PAYROLL/DASHBOARD: flex:1 min-width:200px divs ── */
@media (max-width: 768px){
  [style*="flex:1"][style*="min-width:200px"],
  [style*="flex:1"][style*="min-width: 200px"],
  [style*="flex: 1"][style*="min-width:200px"]{
    min-width: 0 !important;
    flex-basis: 100% !important;
  }
}

/* Server-First */
.sf-bar{display:none!important}
.sf-bar.on{display:none!important}
@keyframes sf-s{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ======================================================================
   TOUCH & PERFORMANCE UX (PWA Mobile Pack)
====================================================================== */

/* ── 1. Touch-action: remove 300ms tap delay on all interactive elements ── */
a, button, .btn, .btn2, .navbtn, .tab, .link, .clickable-row,
.mob-bottomnav-btn, .mob-fab, .dash-kpi-card, .dash-pipe-seg,
.dash-order-row, .dash-alert, [role="button"], [onclick] {
  touch-action: manipulation;
}

/* ── 2. Remove tap highlight on touch devices ── */
@media (pointer: coarse) {
  a, button, .btn, .btn2, .navbtn, .tab, .link,
  .mob-bottomnav-btn, .mob-fab, [role="button"], [onclick] {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── 3. Hover styles only on devices that support hover ── */
@media (hover: hover) and (pointer: fine) {
  .navbtn:hover{ background: rgba(255,255,255,.08); }
  .btn:hover{ background: var(--accent2); }
  .btn-success:hover{ background: #059669; }
  .clickable-row:hover td{ background: rgba(37,99,235,.03); }
  .dash-kpi-card:hover{ box-shadow: 0 3px 14px rgba(0,0,0,.06); transform: translateY(-1px); }
  .dash-pipe-seg:hover{ filter: brightness(0.92); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.10); }
  .dash-order-row:hover{ background: var(--bg); }
  .dash-alert:hover{ transform: translateY(-1px); }
  .link:hover{ text-decoration: underline; }
  .side-profile-avatar:hover{ transform: scale(1.05); box-shadow: 0 0 20px rgba(16,185,129,.4); }
  .side-profile-avatar:hover .avatar-overlay{ opacity: 1; }
  .side-profile:hover .side-profile-remove-avatar{ opacity: 1; }
  .sch-day-cell:hover{ background: rgba(59,130,246,.06); }
}

/* Remove hover effects on touch-only devices */
@media (hover: none) {
  .navbtn:hover{ background: transparent; }
  .btn:hover{ background: var(--accent); }
  .btn-success:hover{ background: var(--success); }
  .clickable-row:hover td{ background: transparent; }
  .dash-kpi-card:hover{ box-shadow: none; transform: none; }
  .dash-pipe-seg:hover{ filter: none; transform:none; box-shadow:none; }
  .dash-order-row:hover{ background: transparent; }
  .dash-alert:hover{ transform: none; }
  .link:hover{ text-decoration: none; }
  .side-profile-avatar:hover{ transform: none; box-shadow: none; }
}

/* ── 4. Reduced motion: respect user preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sidebar { transition: none !important; }
  .side-backdrop { transition: none !important; }
  .mob-bottomnav { transition: none !important; }
  .mob-fab { transition: none !important; }
}

/* ── 5. will-change for animated elements (GPU acceleration) ── */
.sidebar { will-change: transform; }
.side-backdrop { will-change: opacity; }
.mob-bottomnav { will-change: transform; }
.mob-fab { will-change: transform; }
.modal { will-change: opacity; }
.modal-box { will-change: transform, opacity; }

/* ── 6. overscroll-behavior on modals and drawers ── */
.modal-box,
.modal-scroll,
.pos-drawer,
.order-drawer,
.staff-slide {
  overscroll-behavior: contain;
}

/* ── 7. Prevent double-tap zoom on interactive areas ── */
@media (max-width: 768px) {
  .topbar, .mob-bottomnav, .sidebar, .order-footer-bar {
    touch-action: manipulation;
  }
}

/* ══════════════════════════════════════════════
   MOBILE OVERLAP FIX (2026-04-01)
   Fix elements overlapping on phone screens
   by tightening padding/sizing inside mob-cards
   and compact table views
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── 1. mob-cards: compact buttons inside card rows ── */
  .mob-cards .btn2.mini,
  .mob-cards .btn2,
  .mob-cards td .btn2{
    min-height:32px !important;
    padding:5px 8px !important;
    font-size:12px !important;
  }
  .mob-cards td button{
    min-height:32px !important;
    min-width:32px !important;
    padding:4px 6px !important;
  }

  /* ── 2. mob-cards: card rows tighter ── */
  .mob-cards table tr{
    padding:8px 10px !important;
    margin-bottom:6px !important;
  }
  .mob-cards table td{
    padding:1px 0 !important;
    font-size:13px !important;
    line-height:1.3;
  }

  /* ── 3. Topbar: prevent crumb from pushing elements off-screen ── */
  .topbar-inner{
    overflow:hidden !important;
    max-width:100vw !important;
  }
  .crumb{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:140px;
  }
  .crumb b{
    font-size:14px !important;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* ── 4. Page header rows: wrap properly ── */
  .content > .row:first-child{
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  .content > .row:first-child h2{
    flex:1 1 100%;
    font-size:17px !important;
  }
  .content > .row:first-child > div[style*="flex:1"]{
    flex:1 1 100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  /* ── 5. KPI boxes: prevent overlap ── */
  .kpi{
    flex-wrap:wrap !important;
  }
  .kpi .box{
    min-width:calc(50% - 6px) !important;
    flex:1 1 calc(50% - 6px) !important;
    padding:8px !important;
  }
  .kpi .box b{
    font-size:16px !important;
  }

  /* ── 6. Tabs row: horizontal scroll, no wrap overflow ── */
  .tabs{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:4px !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs .tab{
    flex-shrink:0 !important;
    padding:8px 10px !important;
    font-size:12px !important;
    min-height:34px !important;
  }

  /* ── 7. Order list on mobile: search+button row ── */
  .content > .row:first-child > div[style*="display:flex"][style*="gap"]{
    flex-wrap:wrap !important;
  }

  /* ── 8. Table inside mob-cards: no min-width ── */
  .mob-cards table{
    min-width:0 !important;
    width:100% !important;
    table-layout:auto !important;
  }

  /* ── 9. GLOBAL COMPACT: reduce ALL page chrome on mobile ── */

  /* All secondary buttons: compact everywhere */
  .btn2, button.btn2, .btn2.mini{
    padding:5px 10px !important;
    font-size:12px !important;
    min-height:34px !important;
  }
  /* Primary action buttons: still touch-friendly but smaller */
  .btn, .btn-success{
    padding:8px 12px !important;
    font-size:13px !important;
    min-height:38px !important;
  }
  /* Generic buttons (not .btn/.btn2): compact */
  button:not(.btn):not(.btn2):not(.btn-success):not(.mob-bottomnav-btn):not(.mob-fab):not(.burger):not(.navbtn):not(.tab):not(.pos-checkout-btn){
    min-height:34px !important;
    padding:5px 8px !important;
  }

  /* Page titles */
  h2{ font-size:16px !important; margin:0 !important; }
  h3{ font-size:14px !important; }

  /* Row containers: tighter */
  .row{ gap:6px !important; }

  /* Cards: less padding */
  .card{ padding:10px !important; }
  .card h3{ margin-bottom:6px !important; }

  /* Inputs: slightly smaller (but still 16px to prevent iOS zoom) */
  .input, select, textarea, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"]{
    padding:8px 10px !important;
    min-height:38px !important;
    font-size:14px !important;
  }

  /* Labels compact */
  label{ font-size:13px !important; margin-bottom:3px !important; }

  /* Small text */
  .small{ font-size:12px !important; }

  /* Badges/pills compact */
  .badge, .pill{ font-size:11px !important; padding:2px 7px !important; }

  /* All flex rows with inline styles: wrap on mobile */
  [style*="display:flex"][style*="gap"]{
    flex-wrap:wrap !important;
  }

  /* Inline grids: stack on mobile */
  .content [style*="grid-template-columns:1fr 1fr 1fr"]:not(.dash-kpi):not(.pricing-grid):not(.settings-menu-card){
    grid-template-columns:1fr !important;
  }

  /* Reduce margins between sections */
  .content > .card + .card,
  .content > div + .card,
  .content > .card + div{ margin-top:6px !important; }

  /* Filters/controls rows: compact */
  .content > div[style*="display:flex"]{
    gap:6px !important;
  }
  .content > div[style*="display:flex"] .btn2,
  .content > div[style*="display:flex"] select.input{
    font-size:12px !important;
    padding:5px 8px !important;
    min-height:32px !important;
  }

  /* Table header text */
  th{ font-size:11px !important; padding:6px 4px !important; }
  td{ padding:6px 4px !important; font-size:13px !important; }

  /* ── 10. Schedule page: compact controls ── */
  /* Sub-tabs row (Расписание/Задачи/Штрафы/Шаблоны/Входы) */
  .content > div[style*="flex-wrap:wrap"][style*="border-bottom"]{
    padding:4px 8px !important;
    gap:2px !important;
    overflow-x:auto;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .content > div[style*="flex-wrap:wrap"][style*="border-bottom"]::-webkit-scrollbar{ display:none; }
  .content > div[style*="flex-wrap:wrap"][style*="border-bottom"] button{
    padding:5px 10px !important;
    font-size:12px !important;
    min-height:32px !important;
    flex-shrink:0;
  }

  /* Schedule controls row (Месяц/Неделя/Все локации/title/nav) */
  .content > div[style*="margin-bottom:16px"]{
    gap:6px !important;
    margin-bottom:8px !important;
  }
  .content > div[style*="margin-bottom:16px"] .btn2{
    padding:5px 8px !important;
    font-size:11px !important;
    min-height:32px !important;
  }
  .content > div[style*="margin-bottom:16px"] h2{
    font-size:14px !important;
  }
  .content > div[style*="margin-bottom:16px"] select.input{
    min-width:100px !important;
    font-size:12px !important;
    padding:4px 8px !important;
    min-height:32px !important;
  }
  /* Hide "Применить шаблон" text on mobile, keep icon */
  .content > div[style*="margin-bottom:16px"] .right{
    gap:4px !important;
  }
  .content > div[style*="margin-bottom:16px"] .right .btn2{
    padding:4px 6px !important;
    font-size:14px !important;
  }

  /* ── 10b. Schedule summary: horizontal scroll with sticky first col ── */
  .sch-summary-card{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    margin-top:12px !important;
  }
  .sch-summary-card table{
    min-width:max-content !important; width:max-content !important;
  }
  .sch-summary-card table th,
  .sch-summary-card table td{
    padding:4px 6px !important; font-size:11px !important;
    white-space:nowrap !important; text-align:center !important; vertical-align:top;
  }
  /* Sticky first column (Сотрудник) */
  .sch-summary-card table th:first-child,
  .sch-summary-card table td:first-child{
    position:sticky !important; left:0 !important; z-index:2;
    background:#fff !important; text-align:left !important;
    font-size:10px !important; min-width:80px; max-width:100px;
    white-space:normal !important; word-break:break-word;
    box-shadow:2px 0 4px rgba(0,0,0,.1);
  }
  .sch-summary-card h3{ font-size:13px !important; }

  /* ── 10c. Schedule sub-tabs (Расписание/Задачи/Штрафы/Шаблоны) compact ── */
  .content > div[style*="flex-shrink:0"][style*="border-bottom"] button{
    font-size:11px !important; padding:5px 10px !important; min-height:28px !important;
  }

  /* ── 11. Schedule toolbar: compact ── */
  .content > div[style*="margin-bottom:16px"][style*="display:flex"]{
    gap:4px !important; margin-bottom:8px !important;
  }
  .content > div[style*="margin-bottom:16px"] h2{
    font-size:13px !important; margin:0 !important; white-space:nowrap;
  }
  .content > div[style*="margin-bottom:16px"] .btn2{
    padding:4px 8px !important; font-size:11px !important; min-height:30px !important;
  }
  .content > div[style*="margin-bottom:16px"] select.input{
    min-width:0 !important; font-size:12px !important; padding:4px 6px !important; min-height:30px !important;
  }
  /* Hide spacers */
  .content > div[style*="margin-bottom:16px"] > div[style*="flex:1"]:empty{
    display:none !important;
  }

  /* ── 11b. Schedule table: compact for mobile ── */
  .sch-table th, .sch-table td{ padding:3px 2px !important; }
  .sch-name-col{ min-width:100px !important; max-width:120px !important; }
  .sch-name-cell{ padding:4px 6px !important; }
  .sch-name-cell div[style*="font-size:13px"]{ font-size:11px !important; }
  .sch-day-num{ font-size:12px !important; }
  .sch-day-dow{ font-size:8px !important; }
  .sch-day-col{ min-width:36px !important; width:36px !important; }
  .sch-hours-col{ min-width:40px !important; }
  .sch-cell-tag{ min-width:28px !important; min-height:24px !important; padding:2px 3px !important; font-size:9px !important; }

  /* Schedule scroll wrapper */
  .sch-scroll-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    margin:0; padding:0;
  }

  /* ── 12. Schedule: hide "Применить шаблон" text, keep icons ── */
  .content > div[style*="margin-bottom"] .right .btn2{
    overflow:hidden;
    max-width:36px;
    white-space:nowrap;
  }
  /* Employee names in schedule: truncate */
  .sch-name-cell div[style*="display:flex"] div[style*="font-size"]{
    max-width:100px !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* Schedule avatars smaller */
  .sch-name-cell div[style*="width:28px"]{
    width:22px !important; height:22px !important;
    font-size:9px !important;
  }

  /* ── 13. POS mobile: compact cart area ── */
  .pos-cart{
    max-height:55vh !important;
  }
  .pos-cart-header{
    padding:6px 10px !important;
  }
  .pos-cart-header h3{ font-size:13px !important; }
  .pos-cart-items{
    padding:4px !important;
    padding-bottom:4px !important;
  }
  .pos-cart-item{
    padding:4px 6px !important;
    margin-bottom:4px !important;
    gap:4px !important;
  }
  .pos-cart-item-name{ font-size:12px !important; }
  .pos-cart-item-price{ font-size:10px !important; }
  /* POS checkout button always visible */
  .pos-cart-total{
    padding:8px 10px !important;
  }
  .pos-total-row{ font-size:12px !important; margin-bottom:4px !important; }
  .pos-total-row.main{ font-size:16px !important; margin-bottom:6px !important; }
  .pos-checkout-btn{
    padding:10px !important;
    font-size:15px !important;
    min-height:44px !important;
  }

  /* ── 14. Sales page: fix left text cutoff ── */
  .content{ overflow-x:hidden !important; }
  .content > *{ max-width:100% !important; overflow-x:hidden; }
  /* Pulse animation для заказов ожидающих внимания менеджера */
  @keyframes rmcrmAttentionPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.55; }
  }
  .rmcrm-attn-pulse {
    display: inline-block;
    animation: rmcrmAttentionPulse 1.2s ease-in-out infinite;
    transform-origin: center;
  }
  @keyframes rmcrmRowPulse {
    0%, 100% { background-color: transparent; }
    50%      { background-color: rgba(16,185,129,0.08); }
  }
  @keyframes rmcrmRowPulseRed {
    0%, 100% { background-color: transparent; }
    50%      { background-color: rgba(239,68,68,0.10); }
  }
  .rmcrm-row-attn-approved { animation: rmcrmRowPulse 1.8s ease-in-out infinite; }
  .rmcrm-row-attn-rejected { animation: rmcrmRowPulseRed 1.8s ease-in-out infinite; }

  /* Kanban-specific: rule above kills horizontal scroll — restore it. */
  .content .kb-board,
  .content .kb-board *{ overflow-x:auto !important; max-width:none !important; }
  .content .kb-board .kb-cards{ overflow-x:hidden !important; }
  .kb-board{ scrollbar-width:thin; }
  .kb-board::-webkit-scrollbar{ height:10px; }
  .kb-board::-webkit-scrollbar-track{ background:var(--bg); border-radius:5px; }
  .kb-board::-webkit-scrollbar-thumb{ background:var(--muted); border-radius:5px; opacity:.5; }
  .kb-board::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

  /* ── 15. KPI row on sales/dashboard: 2 cols ── */
  .kpi{ gap:6px !important; }
  .kpi .box{
    min-width:calc(50% - 4px) !important;
    flex:1 1 calc(50% - 4px) !important;
    padding:8px !important;
  }
  .kpi .box b{ font-size:15px !important; }
  .kpi .box .small{ font-size:10px !important; }

  /* ── 16. Scroll-to-top button: move above order footer ── */
  #scrollTopBtn{
    bottom:70px !important;
    right:12px !important;
    width:36px !important;
    height:36px !important;
    font-size:16px !important;
    z-index:90 !important;
  }

  /* ── 17. Order footer: ensure buttons don't get cut ── */
  .order-footer-bar{
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0)) !important;
  }
  .order-footer-inner{
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }
  .order-footer-inner .btn,
  .order-footer-inner .btn2{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  /* ── 18. Page header action buttons: horizontal scroll ── */
  .content > .row:first-child{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    align-items:center !important;
  }
  .content > .row:first-child::-webkit-scrollbar{ display:none; }
  .content > .row:first-child h2{
    flex:0 0 auto !important;
    font-size:15px !important;
  }
  .content > .row:first-child .btn,
  .content > .row:first-child .btn2{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    padding:5px 8px !important;
    font-size:11px !important;
    min-height:32px !important;
  }
  /* Search input in header: shrink but keep usable */
  .content > .row:first-child > div[style*="flex:1"]{
    flex:1 1 120px !important;
    min-width:100px !important;
    max-width:180px !important;
    margin:0 4px !important;
  }
  .content > .row:first-child > div[style*="flex:1"] .input{
    padding:6px 8px !important;
    font-size:13px !important;
    min-height:32px !important;
  }

  /* ── 19. Payroll tabs: horizontal scroll ── */
  .settings-payroll .tabs,
  #settingsPane .tabs,
  .content .tabs{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:4px !important;
    padding-bottom:2px;
  }
  .settings-payroll .tabs::-webkit-scrollbar,
  #settingsPane .tabs::-webkit-scrollbar,
  .content .tabs::-webkit-scrollbar{ display:none; }

  /* ── 20. Sales: fix left text clipping on pagination ── */
  .mob-cards{
    overflow:visible !important;
  }
  .mob-cards > div,
  .mob-cards > span{
    overflow:hidden;
    max-width:100%;
  }

  /* ── 21. Supplier/Customer: select + buttons row compact ── */
  .content > .row:first-child select{
    max-width:120px !important;
    font-size:12px !important;
    padding:5px 8px !important;
    min-height:32px !important;
  }
}

/* ======================================================================
   📱 SUPER-MOBILE ANTI-OVERLAP FIXES (< 420px & < 380px)
   Ensuring all flex and grid containers wrap safely on small screens
====================================================================== */

@media (max-width: 420px) {
  /* 1. Global Flex Safety: Force wrapping on small screens to prevent squishing */
  .card .row,
  .modal-box .row,
  .order-drawer-body .row,
  .content > .row {
    flex-wrap: wrap !important;
  }
  
  /* Buttons in forms expand to full width if they stack */
  .card .row > .btn, 
  .card .row > .btn2,
  .modal-box .row > .btn, 
  .modal-box .row > .btn2,
  .order-drawer-body .row > .btn, 
  .order-drawer-body .row > .btn2 {
    flex: 1 1 100% !important; 
    min-width: 100% !important;
    margin-bottom: 6px;
    text-align: center;
  }

  /* 2. Topbar inner prevents overlap with search and pills */
  .topbar-inner {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: space-between;
  }
  .search {
    flex: 1 1 100% !important; 
    min-width: 100% !important;
    margin-top: 4px;
  }

  /* 3. Global Tabs Scroll (Any remaining tabs without scrollbar) */
  .tabs, .al-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    justify-content: flex-start !important;
  }
  .tabs::-webkit-scrollbar, .al-tabs::-webkit-scrollbar { display: none; }
  .tabs .tab, .al-tabs .al-tab, .al-tabs .tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* 4. Generic form layout fix */
  .input, select, textarea {
    max-width: 100% !important;
  }

  /* ── 5. Product groups tree: mobile compact ── */
  .content div[style*="padding-left"]{
    padding-left:8px !important;
  }
  .content div[style*="padding-left"] div[style*="flex:1"]{
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* ── 6. Scrollable lists: limit max-height to viewport ── */
  div[style*="max-height:300px"],
  div[style*="max-height: 300px"],
  div[style*="max-height:400px"],
  div[style*="max-height: 400px"]{
    max-height:50vh !important;
  }

  /* ── 7. Debts/Sales tables with inline min-width ── */
  table[style*="min-width:600px"],
  table[style*="min-width: 600px"],
  table[style*="min-width:700px"],
  table[style*="min-width: 700px"],
  table[style*="min-width:900px"],
  table[style*="min-width: 900px"]{
    min-width:0 !important;
    width:100% !important;
  }
}

/* ── BARCODE SCANNER OVERLAY ── */
.imei-scanner-overlay{
  position:fixed;inset:0;z-index:9999;background:#000;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.imei-scanner-overlay.open{opacity:1;pointer-events:auto}
.imei-scanner-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;color:#fff;font-size:15px;font-weight:700;
  background:rgba(0,0,0,.6);flex-shrink:0;
}
.imei-scanner-close{
  background:none;border:none;color:#fff;font-size:28px;cursor:pointer;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:background .15s;
}
.imei-scanner-close:hover{background:rgba(255,255,255,.15)}
#imeiScannerReader{flex:1;min-height:0;overflow:hidden}
#imeiScannerReader video{width:100%;height:100%;object-fit:cover}
.imei-scanner-hint{
  text-align:center;padding:14px;color:rgba(255,255,255,.7);
  font-size:13px;background:rgba(0,0,0,.6);flex-shrink:0;
}

/* ── FIX: .card inside .modal-box clips dropdowns (2026-04-14) ── */
/* .card has overflow-x:hidden which clips popovers/dropdowns inside modals.
   Target .card-inside-modal specifically — не трогаем саму .modal-box,
   иначе ломается вертикальная прокрутка длинных модалок (напр., редактор роли). */
.modal-box .card {
  overflow: visible !important;
}