/* ===== VARIABLES — Slate Blue (Light) ===== */
:root{
  --bg:#F1F5F9; --bg2:#F7F9FC; --bg3:#EDF1F5;
  --card:#FFFFFF; --card2:#F8FAFC;
  --primary:#4F6D92; --primary2:#3A5275; --primary3:#6B8AB5;
  --text:#1E293B; --text2:#334155; --muted:#8494A7;
  --border:#DEE5ED; --border2:#CBD5E1;
  --shadow:0 4px 24px rgba(0,0,0,0.06);
  --shadow2:0 2px 8px rgba(0,0,0,0.04);
  --green:#16A34A; --green-bg:rgba(22,163,74,0.08); --green-border:rgba(22,163,74,0.25);
  --amber:#D97706; --amber-bg:rgba(217,119,6,0.08); --amber-border:rgba(217,119,6,0.25);
  --red:#DC2626; --red-bg:rgba(220,38,38,0.08); --red-border:rgba(220,38,38,0.25);
  --blue:#0284C7; --blue-bg:rgba(2,132,199,0.08);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;margin:0;
}

/* ===== BOOTSTRAP OVERRIDES ===== */
.form-control,.form-select{background-color:var(--card)!important;border-color:var(--border)!important;color:var(--text)!important;font-family:'DM Sans',sans-serif;font-size:.88rem;}
.form-control::placeholder{color:var(--muted)!important;}
.form-control:focus,.form-select:focus{background-color:var(--card)!important;border-color:var(--primary)!important;box-shadow:0 0 0 .2rem rgba(79,109,146,0.18)!important;color:var(--text)!important;}
.form-select option{background-color:var(--card);color:var(--text);}
.form-label{font-size:.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:5px;}
.modal-content{background:var(--card)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:16px!important;}
.modal-header{border-bottom-color:var(--border)!important;}
.modal-footer{border-top-color:var(--border)!important;}
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:3px;color:var(--primary);}
.modal-backdrop.show{opacity:0.4!important;}

/* ===== BUTTONS ===== */
.btn-sims{background:linear-gradient(135deg,var(--primary2),var(--primary));color:#fff;font-weight:700;border:none;transition:all .2s;font-size:.85rem;}
.btn-sims:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(79,109,146,0.35);color:#fff;}
.btn-sims:disabled{opacity:.45;color:#fff;}
.btn-sims-outline{background:transparent;border:1px solid var(--border);color:var(--muted);transition:all .2s;font-size:.85rem;}
.btn-sims-outline:hover:not(:disabled){border-color:var(--primary);color:var(--primary);}
.btn-sims-green{background:linear-gradient(135deg,#117A38,var(--green));color:#fff;font-weight:700;border:none;transition:all .2s;font-size:.85rem;}
.btn-sims-green:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(22,163,74,0.3);color:#fff;}
.btn-sims-red{background:linear-gradient(135deg,#991B1B,var(--red));color:#fff;font-weight:700;border:none;transition:all .2s;font-size:.85rem;}
.btn-sims-red:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(220,38,38,0.3);color:#fff;}
.btn-sims-amber{background:linear-gradient(135deg,#92400E,var(--amber));color:#fff;font-weight:700;border:none;transition:all .2s;font-size:.85rem;}
.btn-sims-amber:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(217,119,6,0.3);color:#fff;}
.btn-sims-blue{background:linear-gradient(135deg,#0369A1,var(--blue));color:#fff;font-weight:700;border:none;transition:all .2s;font-size:.85rem;}
.btn-sims-blue:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(2,132,199,0.3);color:#fff;}

/* ===== LOGIN ===== */
.login-card{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--primary);border-radius:16px;padding:40px 36px 36px;width:100%;max-width:440px;box-shadow:0 24px 60px rgba(0,0,0,0.08);animation:fadeUp .4s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.login-logo{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;letter-spacing:4px;color:var(--primary);line-height:1;}
.login-logo-sep{color:var(--primary);font-size:2rem;margin:0 4px;font-weight:bold;}
.login-tagline{font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:#000;font-weight:600;}
.login-divider{border:none;border-top:1px solid var(--border);margin:22px 0;}
.login-error{background:var(--red-bg);border:1px solid var(--red-border);border-radius:8px;padding:10px 14px;font-size:.84rem;color:var(--red);display:none;}

/* ===== APP LAYOUT (Sidebar + Main) ===== */
.app-layout{display:flex;min-height:100vh;}
.app-sidebar{width:220px;background:var(--card);border-right:2px solid var(--primary);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;flex-shrink:0;z-index:1030;}
.app-main{flex:1;min-width:0;overflow-y:auto;background:var(--bg);}

/* Sidebar logo */
.sidebar-logo{padding:16px 18px;border-bottom:1px solid var(--border);}
.logo-main{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:3px;color:var(--primary);line-height:1;}
.logo-sep{color:var(--primary);font-weight:bold;margin:0 3px;font-size:1.1rem;}
.logo-sub{font-size:.47rem;letter-spacing:1.5px;text-transform:uppercase;color:#000;font-weight:600;white-space:nowrap;}

/* Sidebar nav items */
.sidebar-nav{flex:1;padding:10px 0;}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:11px 18px;font-size:.82rem;font-weight:600;color:var(--text2);cursor:pointer;border-left:3px solid transparent;transition:all .15s;text-decoration:none;white-space:nowrap;}
.sidebar-item:hover{background:rgba(79,109,146,0.06);color:var(--primary);}
.sidebar-item.active{background:rgba(79,109,146,0.1);color:var(--primary);border-left-color:var(--primary);}
.sidebar-item i{font-size:1rem;width:20px;text-align:center;flex-shrink:0;}
.sidebar-sep{border-top:1px solid var(--border);margin:8px 18px;}
.sidebar-group-label{padding:8px 18px 2px 50px;font-size:.5rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:800;}

/* Sidebar footer */
.sidebar-footer{border-top:1px solid var(--border);padding:12px 18px;display:flex;flex-direction:column;gap:8px;}
.user-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(79,109,146,0.08);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:.75rem;color:var(--primary);font-weight:600;}

/* ===== STAT BAR ===== */
.stat-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.stat-item{flex:1 1 120px;min-width:100px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:9px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow2);}
.stat-icon2{font-size:1.2rem;flex-shrink:0;}
.stat-label2{font-size:.57rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600;line-height:1.3;}
.stat-val2{font-family:'Bebas Neue',sans-serif;font-size:1.65rem;letter-spacing:2px;line-height:1;}
.sv2-primary{color:var(--primary);}
.sv2-green{color:var(--green);}
.sv2-amber{color:var(--amber);}
.sv2-red{color:var(--red);}

/* ===== CARDS & PANELS ===== */
.sims-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:var(--shadow2);margin-bottom:16px;}
.sims-panel-title{font-size:.74rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:6px;}

/* ===== TABLE ===== */
.table-wrap{border:1px solid var(--border);border-radius:12px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow2);}
.k-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.k-table thead th{background:var(--bg3);padding:9px 10px;font-size:.6rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--primary);border-bottom:2px solid var(--border);white-space:nowrap;text-align:center;}
.k-table thead th.th-l{text-align:left;}
.k-table tbody tr{border-bottom:1px solid var(--border);transition:background .15s;background:var(--card);}
.k-table tbody tr:last-child{border-bottom:none;}
.k-table tbody tr:hover{background:var(--bg2);}
.k-table tbody td{padding:8px 10px;vertical-align:middle;}
.k-table tbody td.td-c{text-align:center;}

/* ===== STATUS BADGES — info only, not clickable ===== */
.badge-status{font-size:.65rem;padding:3px 10px;border-radius:20px;font-weight:700;letter-spacing:.5px;display:inline-flex;align-items:center;gap:4px;}
.badge-active{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.badge-inactive{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}

/* ===== ORDERING TOGGLES — clickable action, distinct from info badges ===== */
.ordering-toggle{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:.65rem;font-weight:700;cursor:pointer;user-select:none;transition:all .15s;border:none;letter-spacing:.3px;}
.ordering-toggle:hover{filter:brightness(1.1);transform:translateY(-1px);}
.ordering-on{background:var(--green);color:#fff;}
.ordering-off{background:var(--surface);color:var(--muted);border:1.5px dashed var(--border2);}
.ordering-off:hover{background:var(--red-bg);color:var(--red);border-color:var(--red-border);}
.badge-cod{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.badge-prepaid{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);}
.badge-credit{background:var(--blue-bg);color:var(--blue);border:1px solid rgba(2,132,199,0.25);}
.badge-preferred{background:rgba(79,109,146,0.1);color:var(--primary);border:1px solid rgba(79,109,146,0.3);font-size:.6rem;padding:2px 8px;}
.badge-kitchen{background:var(--amber-bg);color:var(--amber);}
.badge-bar{background:var(--blue-bg);color:var(--blue);}
.badge-misc{background:rgba(147,51,234,0.08);color:#9333EA;}

/* ===== FILTER BAR ===== */
.filter-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:flex-end;}
.filter-bar .form-select,.filter-bar .form-control{font-size:.8rem;padding:5px 10px;min-width:140px;}
.filter-bar label{font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600;}
.filter-bar > div{display:flex;flex-direction:column;gap:2px;}
/* Preset button groups inside filter-bar must stay horizontal */
#presetBtns{flex-direction:row!important;flex-wrap:wrap!important;gap:6px!important;}

/* ===== DELIVERY DAY PILLS ===== */
.day-pills{display:inline-flex;gap:2px;}
.day-pill{width:20px;height:20px;border-radius:50%;font-size:.5rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--muted);background:var(--bg);}
.day-pill.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ===== VENDOR CARD (Assignment Page) ===== */
.vendor-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow2);transition:all .2s;}
.vendor-card:hover{border-color:var(--border2);box-shadow:var(--shadow);}
.vendor-card.changed{border-left:4px solid var(--amber);}
.vendor-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.vendor-card-title{font-weight:700;font-size:.92rem;color:var(--text);}
.vendor-card-meta{font-size:.7rem;color:var(--muted);}
.vendor-option{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;transition:background .1s;cursor:pointer;}
.vendor-option:hover{background:var(--bg2);}
.vendor-option label{cursor:pointer;display:flex;align-items:center;gap:8px;flex:1;font-size:.82rem;}
.vendor-option .price-tag{font-family:'DM Mono',monospace;font-size:.78rem;color:var(--green);font-weight:500;}
.vendor-option .price-age{font-size:.65rem;color:var(--muted);}

/* ===== TOM SELECT — Create Order dropdown (+30% size) ===== */
.ts-dropdown{font-size:.97rem!important;border-radius:8px!important;box-shadow:0 6px 20px rgba(0,0,0,.12)!important;}
.ts-dropdown-content{max-height:260px!important;}
.ts-dropdown .option{padding:8px 14px!important;font-size:.95rem!important;line-height:1.45!important;}
.ts-dropdown .optgroup-header{font-size:.65rem!important;padding:7px 14px 4px!important;letter-spacing:1.5px;}
.ts-wrapper .ts-control{font-size:.95rem!important;min-height:38px!important;}
.ts-wrapper .ts-control input{font-size:.95rem!important;}

/* ===== VENDOR "BY VENDOR" VIEW ===== */
.va-vendor-section{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow2);}
.va-vendor-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--border);}
.va-vendor-count{font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);background:var(--bg);border:1px solid var(--border);padding:3px 10px;border-radius:20px;}
.va-vendor-body{padding:0;}
.va-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;border-bottom:1px solid var(--border);transition:background .1s;}
.va-row:last-child{border-bottom:none;}
.va-row:hover{background:var(--bg2);}
.va-row-changed{border-left:4px solid var(--green);background:rgba(22,163,74,.04);}
.va-row-name{flex:1;min-width:0;}
.va-row-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.va-switch-select{border-radius:8px!important;}

/* ===== TOAST ===== */
.sims-toast{position:fixed;bottom:20px;right:20px;z-index:9999;min-width:280px;max-width:400px;animation:fadeUp .3s ease;}

/* ===== ACTS FLOATING TASK BUTTON ===== */
.acts-fab{position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#4f6d92,#3b5578);color:#fff;border:none;font-size:1.3rem;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(79,109,146,0.4);cursor:pointer;z-index:1050;transition:all .2s;}
.acts-fab:hover{transform:scale(1.08);box-shadow:0 8px 28px rgba(79,109,146,0.5);}
.acts-fab.acts-fab-active{transform:rotate(45deg);background:#dc2626;}
.acts-fab-menu{position:fixed;bottom:88px;right:24px;flex-direction:column;gap:8px;z-index:1050;animation:actsFadeUp .2s ease;}
@keyframes actsFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.acts-fab-menu-item{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:none;font-size:.78rem;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:all .15s;white-space:nowrap;}
.acts-fab-menu-item:hover{transform:translateX(-4px);box-shadow:0 6px 20px rgba(0,0,0,.18);}
.acts-fab-staff{background:#0284c7;color:#fff;}
.acts-fab-boss{background:#92400e;color:#fff;}

/* ===== SPINNER ===== */
@keyframes spin{to{transform:rotate(360deg);}}
.spinner-sm{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite;display:inline-block;}

/* ===== EMPTY STATE ===== */
.empty-state{text-align:center;padding:40px 20px;color:var(--muted);}
.empty-state i{font-size:2.5rem;margin-bottom:10px;opacity:.4;}
.empty-state p{font-size:.88rem;}

/* ===== INLINE EDIT ROW ===== */
.row-editing{background:var(--bg2)!important;border:2px solid var(--primary)!important;}
.row-editing td{padding:4px 6px!important;}
.row-editing .form-control,.row-editing .form-select{font-size:.8rem;padding:4px 8px;}

/* ===== VENDOR PANEL (inline expand in Products) ===== */
.vendor-panel{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:8px;animation:fadeUp .2s ease;}
.vendor-panel-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);}
.vendor-panel-row:last-child{border-bottom:none;}

/* ===== RESPONSIVE ===== */

/* Hamburger button — hidden on desktop */
.mob-hamburger{display:none;}
/* Overlay — hidden on desktop */
.mob-overlay{display:none;}

/* ── Tablet (768px) ── */
@media(max-width:768px){
  .app-sidebar{width:56px;}
  .app-sidebar .sidebar-label,.app-sidebar .logo-sub,.app-sidebar .sidebar-group-label{display:none;}
  .app-sidebar .logo-main{font-size:.9rem;letter-spacing:1px;}
  .app-sidebar .logo-sep{display:none;}
  .sidebar-logo{padding:12px 8px;text-align:center;}
  .sidebar-item{padding:12px 0;justify-content:center;gap:0;}
  .sidebar-item i{width:auto;font-size:1.1rem;}
  .sidebar-footer{padding:8px;align-items:center;}
  .sidebar-footer .user-chip{padding:4px 6px;font-size:0;gap:0;}
  .sidebar-footer .user-chip i{font-size:.85rem;}
  .sidebar-footer .btn{padding:4px 6px;font-size:.7rem;}
  .sims-panel{padding:14px;}
  .stat-bar{gap:6px;}
}

/* ── Mobile (600px) — full hamburger drawer ── */
@media(max-width:600px){
  /* ── Layout: sidebar hidden off-screen, main full width ── */
  .app-layout{display:block;}
  .app-main{width:100%;min-width:0;}

  /* Sidebar: slide-in drawer */
  .app-sidebar{
    position:fixed!important;
    left:0;top:0;
    width:240px!important;
    height:100vh;
    z-index:1200;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    box-shadow:none;
  }
  .app-sidebar.mob-open{
    transform:translateX(0);
    box-shadow:4px 0 30px rgba(0,0,0,0.18);
  }
  /* Restore all labels inside drawer */
  .app-sidebar .sidebar-label,
  .app-sidebar .logo-sub,
  .app-sidebar .sidebar-group-label{display:block!important;}
  .app-sidebar .sidebar-group-label{padding:8px 18px 2px 50px!important;}
  .app-sidebar .logo-main{font-size:1.4rem!important;letter-spacing:3px!important;}
  .app-sidebar .logo-sep{display:inline!important;}
  .app-sidebar .sidebar-logo{padding:16px 18px!important;text-align:left!important;}
  .app-sidebar .sidebar-item{padding:11px 18px!important;justify-content:flex-start!important;gap:10px!important;}
  .app-sidebar .sidebar-item i{width:20px!important;font-size:1rem!important;}
  .app-sidebar .sidebar-footer{padding:12px 18px!important;align-items:flex-start!important;}
  .app-sidebar .sidebar-footer .user-chip{padding:4px 12px!important;font-size:.75rem!important;gap:6px!important;}
  .app-sidebar .sidebar-sep{margin:8px 18px!important;}

  /* ── Hamburger button ── */
  .mob-hamburger{
    display:flex!important;
    align-items:center;justify-content:center;
    position:fixed;
    top:10px;left:10px;
    z-index:1100;
    width:42px;height:42px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    cursor:pointer;
    box-shadow:0 2px 12px rgba(0,0,0,0.1);
    color:var(--primary);
    font-size:1.25rem;
    line-height:1;
  }

  /* ── Overlay backdrop ── */
  .mob-overlay{
    display:block!important;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    z-index:1199;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s;
  }
  .mob-overlay.active{opacity:1;pointer-events:all;}

  /* ── Page container padding for hamburger button ── */
  .app-main .container-fluid{padding:16px!important;padding-top:64px!important;}

  /* ── Page header row ── */
  .app-main .d-flex.justify-content-between{
    flex-wrap:wrap;
    gap:8px;
  }
  .app-main .d-flex.justify-content-between > h5{
    font-size:1.3rem!important;
  }

  /* ── Stat bar: horizontal scroll on tiny screens ── */
  .stat-bar{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    gap:8px;
  }
  .stat-bar::-webkit-scrollbar{height:3px;}
  .stat-bar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
  .stat-item{flex:0 0 auto;min-width:120px;}

  /* ── Tables: scrollable wrapper ── */
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  .k-table{min-width:480px;}

  /* ── Filter bar ── */
  .filter-bar{flex-direction:column;gap:8px;}
  .filter-bar .form-select,.filter-bar .form-control{min-width:100%!important;}
  .filter-bar > div{width:100%;}

  /* ── Modals ── */
  .modal-footer{flex-direction:column;gap:8px!important;}
  .modal-footer .btn{width:100%;justify-content:center;}
  .modal-dialog{margin:10px!important;}

  /* ── Create Order: item rows as stacked cards ── */
  /* Must override table display so grid works on <tr> */
  .mob-item-table{display:block!important;width:100%;}
  .mob-item-table tbody{display:block!important;}
  .mob-item-table thead{display:none!important;}
  .mob-item-table tbody tr.item-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px;
    margin-bottom:10px;
  }
  .mob-item-table tbody tr.item-row td{
    display:flex;
    flex-direction:column;
    border:none!important;
    padding:0!important;
    vertical-align:top;
  }
  .mob-item-table tbody tr.item-row td::before{
    content:attr(data-label);
    font-size:.55rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:700;
    margin-bottom:3px;
  }
  /* Product + Vendor span full width */
  .mob-item-table tbody tr.item-row td[data-label="PRODUCT"],
  .mob-item-table tbody tr.item-row td[data-label="VENDOR"]{
    grid-column:span 2;
  }
  /* Remove button: top-right */
  .mob-item-table tbody tr.item-row td[data-label=""]{
    grid-column:span 2;
    align-items:flex-end;
    flex-direction:row;
    justify-content:flex-end;
  }
  /* Override choices.js dropdowns */
  .mob-item-table .choices{width:100%!important;}
  .mob-item-table .choices__inner{padding:4px 8px!important;min-height:36px!important;}

  /* ── Products page header: icon-only secondary buttons ── */
  .products-header-actions .btn-sims-outline .btn-label{display:none;}
  .products-header-actions{gap:6px!important;}

  /* ── Order detail: workflow steps scroll ── */
  .workflow-steps{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:4px;}
  .workflow-step{flex:0 0 auto;}

  /* ── Payment queue: card view ── */
  .pq-mob-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px 14px;
    margin-bottom:8px;
  }

  /* ── Sales analytics: date preset pills wrap ── */
  .date-preset-row{flex-wrap:wrap!important;gap:6px!important;}
  .date-preset-row .btn{flex:1 1 calc(33% - 6px);min-width:80px;font-size:.75rem;}
  /* #presetBtns sits inside .filter-bar; keep it in row mode so buttons tile 3-across */
  #presetBtns{flex-direction:row!important;flex-wrap:wrap!important;width:100%;gap:5px!important;}
  #presetBtns .btn{flex:1 1 calc(33% - 5px);min-width:90px;font-size:.75rem;text-align:center;padding:6px 4px!important;}

  /* ── Analytics stat bar items ── */
  .stat-item{padding:8px 10px;}
  .stat-val2{font-size:1.35rem!important;}
  .stat-label2{font-size:.5rem!important;}

  /* ── General panel spacing ── */
  .sims-panel{padding:12px!important;}
  .card-sims{padding:12px!important;}

  /* ── Products: category header wraps on small screens ── */
  .cat-hdr{flex-wrap:wrap;gap:6px;}
  .cat-hdr-name{min-width:0;flex:1 1 auto;}
  .cat-hdr-actions{margin-left:auto;}
  /* Hide the verbose count badges to make room */
  .cat-prod-count{display:none!important;}
  /* Product table inside category: scrollable */
  .cat-body{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* ── Very small (360px) extra tweaks ── */
@media(max-width:360px){
  .app-main .container-fluid{padding:12px!important;padding-top:62px!important;}
  .stat-item{min-width:100px;}
}

/* ===== ORDER PAGES ===== */
.card-sims{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;box-shadow:var(--shadow2);margin-bottom:12px;}

/* Stat items for order stats (simpler, text-only) */
.stat-item{flex:1 1 100px;min-width:90px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:7px 12px;text-align:center;flex-direction:column!important;align-items:center!important;}
.stat-value{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:2px;line-height:1;color:var(--primary);}
.stat-label{font-size:.58rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:3px;white-space:nowrap;}

/* Department badge */
.badge-dept{font-size:.65rem;padding:2px 8px;border-radius:20px;font-weight:700;letter-spacing:.5px;}
.badge-dept[class*="Kitchen"],.badge-dept:not([style]){background:var(--amber-bg);color:var(--amber);}
span.badge-dept{background:var(--amber-bg);color:var(--amber);}

/* Status badge variants — generic colours (kept for legacy/product/vendor use) */
.badge-primary{background:rgba(79,109,146,0.1);color:var(--primary);border:1px solid rgba(79,109,146,0.3);}
.badge-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.badge-amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);}
.badge-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}
.badge-blue{background:var(--blue-bg);color:var(--blue);border:1px solid rgba(2,132,199,0.25);}
.badge-muted{background:rgba(132,148,167,0.1);color:var(--muted);border:1px solid rgba(132,148,167,0.2);}
.badge-purple{background:rgba(147,51,234,0.08);color:#7c3aed;border:1px solid rgba(147,51,234,0.25);}
.badge-teal{background:rgba(13,148,136,0.08);color:#0d9488;border:1px solid rgba(13,148,136,0.25);}

/* ── Order status badges (per-status colours chosen by user) ── */
.badge-pending_approval{background:#e0e7ff;color:#3730a3;border:1px solid rgba(55,48,163,.22);}
.badge-approved        {background:#ccfbf1;color:#134e4a;border:1px solid rgba(19,78,74,.22);}
.badge-auto_approved   {background:#e0e7ff;color:#3730a3;border:1px solid rgba(55,48,163,.22);}
.badge-replenished     {background:#fff7ed;color:#9a3412;border:1px solid rgba(154,52,18,.22);}
.badge-payment_pending {background:#fee2e2;color:#991b1b;border:1px solid rgba(153,27,27,.22);}
.badge-paid            {background:#f0fdf4;color:#15803d;border:1px solid rgba(21,128,61,.22);}
.badge-rejected        {background:#fee2e2;color:#991b1b;border:1px solid rgba(153,27,27,.22);}
.badge-cancelled       {background:#f1f5f9;color:#475569;border:1px solid rgba(71,85,105,.22);}
.badge-reps_pending    {background:#fff7ed;color:#c2410c;border:1px solid rgba(194,65,12,.22);}
.badge-reps_rejected   {background:#fee2e2;color:#991b1b;border:1px solid rgba(153,27,27,.22);}

/* ── Vendor payment type badges ── */
.badge-cod     {background:#fef3c7;color:#92400e;border:1px solid rgba(146,64,14,.22);}
.badge-credit  {background:#dcfce7;color:#166534;border:1px solid rgba(22,101,52,.22);}
.badge-prepaid {background:#ecfeff;color:#164e63;border:1px solid rgba(22,78,99,.22);}

/* Timeline (order history) */
.timeline{position:relative;padding-left:24px;}
.timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--border);}
.timeline-item{position:relative;margin-bottom:20px;}
.timeline-dot{position:absolute;left:-20px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--primary);border:2px solid var(--card);}
.timeline-content{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;}

/* Nav tabs override */
.nav-tabs{border-bottom:2px solid var(--border);}
.nav-tabs .nav-link{color:var(--muted);font-size:.82rem;font-weight:600;border:none;padding:8px 16px;border-radius:0;cursor:pointer;background:none;text-decoration:none;}
.nav-tabs .nav-link:hover{color:var(--primary);}
.nav-tabs .nav-link.active{color:var(--primary);border-bottom:2px solid var(--primary);margin-bottom:-2px;}

/* Approval card */
.order-approval-card{border-left:4px solid var(--amber);}

/* Settings row */
.setting-row{padding:10px 0;border-bottom:1px solid var(--border);}
.setting-row:last-child{border-bottom:none;}

/* Table styles for order pages */
.table thead th,.table thead td{background:var(--bg3);color:var(--muted);font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;}
.table tbody tr:hover{background:var(--bg2);}

/* Mobile replenishment friendly */
@media(max-width:768px){
  .card-sims{padding:12px;}
  #repTable input{width:70px!important;}
}

/* ── Department Tabs ── */
.dept-tabs{display:flex;gap:8px;margin-bottom:16px;}
.dept-tab{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 22px;font-weight:600;font-size:.85rem;cursor:pointer;color:var(--muted);transition:all .2s;}
.dept-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.dept-tab:hover:not(.active){border-color:var(--primary);color:var(--primary);}

/* ── Category Accordion ── */
.cat-block{background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden;}
.cat-hdr{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;user-select:none;transition:background .15s;}
.cat-hdr:hover{background:var(--bg2);}
.cat-hdr-name{font-weight:700;font-size:.9rem;flex:1;color:var(--text);}
.cat-hdr-actions{display:flex;gap:4px;}
.cat-chev{font-size:.75rem;color:var(--muted);transition:transform .2s;flex-shrink:0;}
.cat-chev.open{transform:rotate(90deg);}
.cat-prod-count{font-size:.72rem;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.cat-body{border-top:1px solid var(--border);}

/* ===== MOBILE ADDITIONS (600px) ===== */
@media(max-width:600px){

  /* ── vendor_assignment: card grid stacks to single column ── */
  #cardView{grid-template-columns:1fr!important;}

  /* ── orders_create: header dept select goes full width ── */
  #deptSelect{width:100%!important;}
  .orders-create-header{flex-wrap:wrap;gap:8px;}
  .orders-create-header > div{width:100%;}

  /* ── custom date range inputs go full width ── */
  #customDateInputs{flex-direction:column!important;align-items:stretch!important;}
  #customDateInputs input[type="date"]{width:100%!important;}

  /* ── orders_create confirm modal: scrollable ── */
  #confirmModal .modal-dialog{max-height:90vh;}
  #confirmModal .modal-body{overflow-y:auto;max-height:60vh;}

  /* ── products page: sync modal scrollable ── */
  #syncModal .modal-body{max-height:60vh;overflow-y:auto;}

  /* ── payment queue: view toggle wraps under filters ── */
  .filter-bar > div[style*="align-items:flex-end"]{width:100%;}

  /* ── order detail: nav tabs scroll horizontally ── */
  #detailTabs{overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
  #detailTabs .nav-item{flex-shrink:0;}

  /* ── order detail: header action buttons stack ── */
  #orderActions{flex-wrap:wrap;justify-content:flex-end;}

  /* ── header button groups: ensure min touch height ── */
  .btn-sims,.btn-sims-outline,.btn-sims-green,.btn-sims-red,.btn-sims-amber,.btn-sims-blue{min-height:38px;}
  .btn-sm.btn-sims,.btn-sm.btn-sims-outline,.btn-sm.btn-sims-green,.btn-sm.btn-sims-red{min-height:32px;}

  /* ── analytics: chart containers don't overflow ── */
  #monthlyChart,#trendChartBody canvas{max-width:100%!important;}

  /* ── vendor assignment table view: scrollable ── */
  #tableView .table-wrap{overflow-x:auto!important;}

  /* ── settings body: full width & table scrollable ── */
  #settingsBody .row{--bs-gutter-x:0.5rem;}
  #settingsBody table{min-width:360px;}
  #settingsBody .card-sims{overflow-x:auto;}

  /* ── orders list lanes: full width on mobile ── */
  #laneReplenish,#laneApproval,#lanePayment{min-height:auto;}

  /* ── archive tabs: pill buttons wrap ── */
  .archive-tab-row{flex-wrap:wrap;gap:6px;}

  /* ── channel sales entry card: full width ── */
  #panelEntry .card-sims{max-width:100%!important;}

  /* ── vendors table: min-width so it scrolls rather than squishes ── */
  .table-wrap .k-table{min-width:520px;}

  /* ── products header: stack buttons ── */
  .products-header-actions{flex-direction:row!important;flex-wrap:wrap!important;}

  /* ── kb_analytics / analytics: period select goes full row ── */
  #monthsSelect{width:100%!important;}

  /* ── modal dialogs: full width with small margins ── */
  .modal-dialog.modal-lg,.modal-dialog.modal-xl{margin:8px!important;max-width:calc(100vw - 16px)!important;}
  .modal-dialog{margin:8px!important;max-width:calc(100vw - 16px)!important;}
  .modal-content{max-height:92vh;overflow-y:auto;}

  /* ── va-row in by-vendor view: stack on narrow ── */
  .va-row{flex-wrap:wrap;gap:6px;}
  .va-row-name{min-width:100%;flex:1 1 100%;}
  .va-row-actions{width:100%;justify-content:flex-end;}

  /* ── Vendor card header: wrap actions ── */
  .vendor-card-header{flex-wrap:wrap;gap:4px;}
}