.segbtn.on{background:rgba(0,0,0,.06);opacity:1;font-weight:700}
.groupRow td{background:rgba(0,0,0,.03)}
.mob-back-btn{display:none}


/* ===============================
   Mobile layout (Smartphone)
================================= */

/* Sidebar close button — mobile only */
.sidebar-close-btn{
  display:none;
}
@media (max-width: 768px){
  .sidebar-close-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:12px; right:12px;
    width:36px; height:36px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.1);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    z-index:5;
    -webkit-tap-highlight-color:transparent;
  }
  .sidebar-close-btn:active{
    background:rgba(255,255,255,.2);
    transform:scale(.95);
  }
}

/* Burger visible only on small screens */
.burger{
  display:none;
  border:1px solid var(--border);
  background:#fff;
  border-radius: 12px;
  width:40px; height:40px;
  cursor:pointer;
  font-size:18px;
  box-shadow: var(--shadow);
  flex:0 0 auto;
}

/* Backdrop for off-canvas sidebar */
.side-backdrop{
  display:none;
}

@media (max-width: 768px){
  .burger{ display:inline-flex; align-items:center; justify-content:center; }

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

  /* Off-canvas sidebar */
  .sidebar{
    position: fixed !important;
    top:0; left:0;
    height: 100vh !important;
    height: 100dvh !important;
    width: 84vw;
    max-width: 320px;
    transform: translateX(-110%);
    transition: transform .22s cubic-bezier(.16,1,.3,1);
    z-index: 220;
    border-right: 1px solid rgba(255,255,255,.08);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.open{ transform: translateX(0); }

  .side-backdrop{
    display:block;
    position: fixed;
    inset:0;
    background: rgba(17,24,39,.35);
    z-index: 210;
    opacity:0;
    pointer-events:none;
    transition: opacity .18s;
  }
  .side-backdrop.show{
    opacity:1;
    pointer-events:auto;
  }

  /* Main area full width */
  .main{ min-width: 0; }
  .topbar-inner{ padding: 10px 10px; gap:8px; }
  .search{ width: 100%; min-width: 0; max-width: none; }
  .searchbox{ width:100%; }
  .locpill{ margin-left: 0; }
  .cashpill{ display:none; }

  .content{ padding: 10px; }

  /* Cards and tables */
  .card{ border-radius: 14px; }
  .card{ overflow-x:hidden !important; }
  table{ min-width:0 !important; width:100% !important; }

  /* Order footer always visible */
  .order-footer-bar{ bottom: 8px; }
  .order-footer-inner{ border-radius: 16px; }
}

/* ═══ TABLET SIDEBAR (769-1100px): collapsed with hover expand ═══ */
@media (min-width: 769px) and (max-width: 1100px){
  .sidebar {
    width: 60px;
    overflow: hidden;
    transition: width .2s ease;
  }
  .sidebar:hover {
    width: 280px;
    overflow: visible;
  }
  .sidebar .nav-label, .sidebar .hide-sm {
    display: none;
  }
  .sidebar:hover .nav-label, .sidebar:hover .hide-sm {
    display: inline;
  }
  .main-content, .main {
    margin-left: 60px;
  }
}

/* Very small phones */
@media (max-width: 420px){
  .sidebar{ width: 92vw; max-width: 340px; }
  .topbar-inner{ padding: 8px 8px; }
  .btn, .btn2{ padding: 10px 12px; }
  .input, select, textarea{ font-size: 14px; }
}



/* ======================================
   UNIVERSAL RESPONSIVE FIX (2026 PRO)
   Auto-added for better mobile/tablet UX
====================================== */

/* 1) Correct viewport height on mobile browsers */
html, body { height: 100%; }
body { min-height: 100dvh; }

/* 2) Prevent horizontal scrolling */
body { overflow-x: hidden; }
.app { width: 100%; max-width: 100%; }

/* 3) Tables: fit screen width, no horizontal scroll */
.table-wrapper{ width:100%; overflow-x:hidden; }
table{ min-width:0; width:100%; }

/* 4) Grids never exceed screen width */
.grid2, .grid3, .grid4{ width:100%; }
.grid2 > div, .grid3 > div, .grid4 > div{ min-width:0; overflow:hidden; }

/* 5) Cards don't stretch page but allow internal scroll */
.card{ max-width: 100%; overflow: auto; }
.tx-filter-card{ overflow: visible; }
.card .input,
.card select,
.card textarea{
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.card .grid2,
.card .grid3{
  max-width: 100%;
}
.card .grid2 > div,
.card .grid3 > div{
  min-width: 0;
  overflow: hidden;
}
.card h2, .card h3{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 6) POS: avoid hard-cropped heights */
.pos-container{
  /* height managed by pos-mode flex layout */
}
.pos-cart{ /* max-height managed by pos-mode flex layout */ }

/* 7) Mobile layout improvements */
@media (max-width: 768px){
  /* Buttons: do NOT force width:100% globally — it breaks inline action buttons */
  .topbar-inner{ flex-wrap: nowrap; }
  .search{ width:100% !important; min-width:0 !important; max-width:none !important; }
  .order-footer-inner{ flex-direction: column; }
}

/* 8) Very small screens: prevent input zoom (iOS/Android WebView) */
@media (max-width: 380px){
  table:not(.sch-table){ min-width: 0 !important; width:100% !important; }
  .input, select, textarea{ font-size: 16px; }
}


/* ======================================
   MOBILE OPEN FIX (2026-02-19)
   Prevent auto-zoom / left-shift on phones
====================================== */
@media (max-width: 768px){
  html, body{ overflow-x:hidden !important; max-width:100% !important; }
  .app, .main, .topbar, .topbar-inner, .content, #appRoot{ max-width:100% !important; }
  /* Tables: fit screen, no horizontal scroll */
  table{ min-width:0 !important; width:100% !important; }
  .card{ overflow-x:hidden !important; }
  /* Settings tables: also fit screen */
  #settingsPane table{ min-width:0 !important; }
}



/* ======================================
   MOBILE SIDEBAR TEXT REWORK (2026-02-19)
   Bigger text, visible labels, better hierarchy
====================================== */
@media (max-width: 768px){

  /* Make hidden labels visible on mobile (sidebar + nav) */
  .sidebar .hide-sm{ display:inline !important; }
  .sidebar .brand .hide-sm{ display:inline !important; }

  /* Section titles */
  .sidebar .side-title{
    font-size:12px;
    opacity:.75;
    padding:10px 8px 6px;
    font-weight:800;
    letter-spacing:.6px;
  }

  /* Separate groups visually */
  .sidebar .side-section{
    margin-top:16px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.08);
  }

  /* Brand block readability */
  .sidebar .brand b{ font-size:16px; }
  .sidebar .brand .small{ font-size:13px; opacity:.8; }

  /* Nav buttons: finger-friendly + readable */
  .sidebar .navbtn{
    padding:14px 14px;
    font-size:15px;
    font-weight:700;
    gap:14px;
    border-radius:14px;
  }

  .sidebar .navbtn .ico{
    width:22px;
    height:22px;
    font-size:18px;
    opacity:1;
  }

  .sidebar .navbtn.active{
    background: rgba(16,185,129,.28);
    outline:1px solid rgba(255,255,255,.10);
  }

  /* Chevron visibility */
  .sidebar .navbtn .chev{
    font-size:16px;
    opacity:.9;
  }

  /* Subnav */
  .sidebar .subnav{
    margin-left:16px;
    padding-left:10px;
    border-left:1px solid rgba(255,255,255,.14);
  }
  .sidebar .subnav .navbtn{
    padding:12px 12px;
    font-size:14px;
    font-weight:650;
    border-radius:12px;
  }

  /* Keep sidebar scroll usable */
  .sidebar{ -webkit-overflow-scrolling: touch; }
}



/* ======================================
   SETTINGS PAGE RESPONSIVE LAYOUT
   Fix 2-column view on phones
====================================== */
/* Settings Layout */
.settings-layout{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start;height:calc(100vh - 120px);overflow:hidden;min-width:0}
.settings-menu-card{padding:14px 10px;position:sticky;top:78px;border:none;box-shadow:none;background:transparent;max-height:calc(100vh - 130px);overflow-y:auto}
#settingsPane{overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 130px);padding-right:4px;min-width:0;max-width:100%}
#settingsPane>*{max-width:100%;overflow:hidden;box-sizing:border-box}
#settingsPane::-webkit-scrollbar{width:5px}
#settingsPane::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
#settingsPane .card{margin-bottom:0}
.st-nav-group{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:20px 0 6px;padding:0 10px}
.st-nav-group:first-child{margin-top:4px}
.st-nav-btn{position:relative;display:block;width:100%;padding:8px 12px 8px 40px;border:none;border-radius:8px;background:none;cursor:pointer;font-size:13px;font-weight:500;color:var(--text);transition:all .15s;letter-spacing:-.1px;text-align:left}
.st-nav-btn:hover{background:var(--bg)}
.st-nav-btn.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 1px 4px rgba(37,99,235,.25)}
.st-nav-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;font-size:14px;text-align:center;line-height:1;pointer-events:none}
/* Settings Sections */
.st-section{margin-bottom:0}
.st-section-title{font-size:17px;font-weight:700;color:var(--text);margin:0 0 2px;letter-spacing:-.2px}
.st-section-desc{font-size:13px;color:var(--muted);margin:0 0 20px;line-height:1.4}
.st-group-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
/* Settings Fields */
.st-field{margin-bottom:16px}
.st-field-label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px;letter-spacing:.1px}
.st-field-hint{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.3}
.st-field .input{width:100%}
.st-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.st-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
/* Settings Info Boxes */
.st-info-box{padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-radius:10px}
.st-info-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.st-info-value{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.2px}
/* Settings Divider & Actions */
.st-divider{height:1px;background:var(--border);margin:24px 0}
.st-actions{display:flex;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap}
/* Settings Card Block */
.st-block{padding:14px;border:1px solid var(--border);border-radius:12px;background:#fff;margin-bottom:10px}
.st-block-title{font-size:13px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
/* Settings Toggle */
.st-toggle{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s}
.st-toggle:hover{border-color:var(--accent)}
.st-toggle input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}
.st-toggle-label{font-size:13px;font-weight:600}
.st-toggle-hint{font-size:11px;color:var(--muted);margin-top:2px}
/* Settings Tag/Pill */
.st-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid var(--border);border-radius:99px;background:var(--bg);font-size:12px;font-weight:500}
.st-tag .st-tag-x{border:none;background:none;cursor:pointer;font-size:12px;opacity:.4;padding:0 2px;line-height:1}
.st-tag .st-tag-x:hover{opacity:1;color:#ef4444}
/* Settings Preview */
.st-preview{margin-top:16px;padding:20px;border:2px dashed var(--border);border-radius:12px;background:var(--bg);text-align:center}
.st-preview-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.st-preview-value{font-size:28px;font-weight:800;letter-spacing:-.5px}
@media(max-width:768px){
  .settings-layout{grid-template-columns:1fr!important;height:auto}
  #settingsPane{max-height:none;overflow-y:visible}
  .settings-menu-card{position:relative!important;top:auto!important;padding:10px;background:var(--bg);border-radius:12px;display:flex;flex-wrap:wrap;gap:4px;max-height:none;overflow-y:visible}
  .st-nav-group{display:none}
  .st-nav-btn{flex:0 0 auto;white-space:nowrap;font-size:12px;padding:6px 10px}
  .st-row,.st-row-3{grid-template-columns:1fr}
  .pt-layout{grid-template-columns:1fr!important;height:auto}
  .fe-layout{grid-template-columns:1fr!important;height:auto}
}