/* Prototype dashboard styles (kept minimal for the prototype) */
:root{
  --sidebar-width: 220px;
  --bg: #F8F6F0;
  --card-bg: #ffffff;
  --muted: #9ca3af;
  --accent: #f7e7d0;
  --qc-gold: #D9BD7D;
  --qc-gold-dark: #C4A35A;
  --qc-dark-bg: #1C1A14;
  --qc-dark-sidebar: #231F16;
  --qc-dark-mid: #2E2A1E;
}
/* additional design tokens */
:root{
  --text: #111111;
  --border: #e6e6e6;
  --topbar-border: #E5E5E6;
  --focus: #D9BD7D;
  --stroke: #F2F2F2;
  --font-stack: "Segoe UI", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;}
html{overflow-x:hidden;}
body{height:100%;margin:0;font-family:var(--font-stack);background:var(--bg);color:#111;overflow-x:hidden;}

.page-enter{
  animation:page-enter 0.32s ease-out both;
}
@keyframes page-enter{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    /* Must end at `none` — any transform (even translateY(0)) creates a
       containing block that traps position:fixed modals inside the page. */
    transform:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .page-enter{
    animation:none;
  }
}
.app{display:flex;min-height:100vh;padding-top:64px;min-width:0;}
.content{min-width:0;overflow-x:hidden;flex:1 1 auto;}
.sidebar{position:fixed;top:64px;left:0;width:var(--sidebar-width);height:calc(100vh - 64px);background:var(--qc-dark-sidebar);border-right:1px solid var(--qc-dark-mid);padding:12px 20px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;box-sizing:border-box;z-index:40;scrollbar-width:thin;}
.sidebar::-webkit-scrollbar{width:6px;}
.sidebar::-webkit-scrollbar-track{background:transparent;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(217,189,125,0.2);border-radius:3px;}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(217,189,125,0.35);}
.sidebar .nav .nav-item{position:relative;z-index:1;cursor:pointer;pointer-events:auto;}
.sidebar-toggle{position:fixed;top:calc(64px + 12px);left:calc(var(--sidebar-width) - 18px);width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--qc-dark-bg);border:1px solid var(--qc-dark-mid);box-shadow:0 1px 2px rgba(16,24,40,0.04);cursor:pointer;z-index:50;}
.sidebar-toggle img{width:14px;height:14px;display:block;}
.sidebar-toggle:hover{background:rgba(217,189,125,0.12);}
.sidebar-toggle img{filter:brightness(0) saturate(100%) invert(84%) sepia(20%) saturate(432%) hue-rotate(356deg) brightness(93%) contrast(86%);}
.sidebar{transition:width .18s ease;}
.sidebar.collapsed{width:96px;padding-left:12px;padding-right:12px;}
.sidebar.collapsed .brand-text{display:none;}
.sidebar.collapsed .nav-item{padding:10px;justify-content:center;}
.sidebar.collapsed .nav-item span{display:none;}
.sidebar.collapsed ~ .main{margin-left:96px;}
.sidebar-toggle{transition:left .18s ease, transform .15s ease;}
.sidebar-toggle img{transition:transform .15s ease;}
body.sidebar-collapsed .sidebar-toggle{left:calc(96px - 18px);}
/* Desktop: no hamburger, no sidebar close (X) – sidebar is always visible */
.navbar-hamburger{display:none !important;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--text);align-items:center;justify-content:center;}
.sidebar-header{display:none !important;}
.sidebar-overlay{display:none !important;}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.brand-icon{width:26px;height:26px;}
.brand-text{font-weight:600;}
.brand-top{display:flex;align-items:center;gap:14px;margin-right:18px;font-size:18px;}
.brand-logo{height:34px;display:block;}
.nav{display:flex;flex-direction:column;gap:8px;margin-top:0;}
.nav-item{display:flex;gap:12px;align-items:center;padding:12px;border-radius:8px;color:rgba(255,255,255,0.58);text-decoration:none;font-size:14px;border-left:3px solid transparent;}
.nav-item img,.nav-item svg,.nav-item .nav-icon{
  width:20px !important;
  height:20px !important;
  min-width:20px;
  min-height:20px;
  flex-shrink:0;
  opacity:1;
}
.logout .nav-item img,
.logout .nav-item svg{
  width:18px !important;
  height:18px !important;
  min-width:18px;
  min-height:18px;
  display:block;
  max-width:18px;
  object-fit:contain;
  vertical-align:middle;
}
.nav-item:hover{background:rgba(217,189,125,0.08);color:var(--qc-gold);}
.nav-item.active{
  background: rgba(217,189,125,0.12);
  border-left-color: var(--qc-gold);
  border-radius: 8px;
  color: var(--qc-gold);
  box-shadow: none;
}
.nav-item.active img,
.nav-item.active svg {
  color: var(--focus);
  stroke: var(--focus);
  opacity: 1;
}
.nav-item.active svg * {
  stroke: var(--focus) !important;
  fill: none !important;
  opacity: 1;
}
/* Requests dropdown (nav-group) */
.nav-group{margin:0;padding:0;}
.nav-group-toggle{width:100%;text-align:left;border:none;background:transparent;cursor:pointer;font-size:14px;font-weight:normal;font-family:inherit;color:rgba(255,255,255,0.58);}
.nav-group-toggle .nav-chevron{margin-left:auto;width:14px;height:14px;opacity:0.95;transition:transform .2s ease, filter .2s ease;filter:brightness(0) saturate(100%) invert(84%) sepia(20%) saturate(432%) hue-rotate(356deg) brightness(93%) contrast(86%);}
.nav-group.expanded .nav-group-toggle .nav-chevron{transform:rotate(0deg);}
.nav-group:not(.expanded) .nav-group-toggle .nav-chevron{transform:rotate(-90deg);}
.nav-group-toggle:hover .nav-chevron,
.nav-group-toggle.active .nav-chevron{filter:brightness(0) saturate(100%) invert(84%) sepia(20%) saturate(432%) hue-rotate(356deg) brightness(100%) contrast(95%);}
.nav-sub{display:none;padding:4px 0 4px 0;margin:0 0 4px 0;}
.nav-group.expanded .nav-sub{display:block;}
.nav-sub-item{display:block;padding:12px 12px 12px 44px;font-size:14px;color:rgba(255,255,255,0.58);text-decoration:none;border-radius:8px;margin:2px 0;}
.nav-sub-item:hover{background:rgba(217,189,125,0.08);color:var(--qc-gold);}
.nav-sub-item.active{color:var(--qc-gold);font-weight:600;}
.sidebar.collapsed .nav-sub{display:none !important;}
.sidebar.collapsed .nav-group.expanded .nav-sub{display:none !important;}
.sidebar.collapsed .nav-group-toggle .nav-chevron{display:none;}
/* Requests popover when sidebar is collapsed */
.nav-popover{position:fixed;display:none;flex-direction:column;min-width:160px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:45;top:0;left:0;}
.nav-popover.open{display:flex;}
.nav-popover-item{display:block;padding:12px 16px;font-size:14px;color:#374151;text-decoration:none;border-radius:8px;}
.nav-popover-item:hover{background:var(--accent);color:var(--text);}
.nav-popover-item.active{color:var(--focus);font-weight:600;}
.logout{margin-top:auto;padding-top:6px;border-top:1px solid rgba(217,189,125,0.12);}
.settings-nav{padding-top:6px;border-top:1px solid rgba(217,189,125,0.12);}
.settings-nav + .logout{margin-top:0;padding-top:0;border-top:none;}
.sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:0;}
.sidebar-bottom .logout{margin-top:0;}
.hidden-pages{padding-bottom:2px;}
.hidden-pages-header{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.35);padding:4px 12px 4px;}
.sidebar.collapsed .hidden-pages-header{display:none;}
.logout .nav-item{cursor:pointer;}
.logout .nav-item img{filter:brightness(0) saturate(100%) invert(84%) sepia(20%) saturate(432%) hue-rotate(356deg) brightness(93%) contrast(86%);}
.settings-nav .nav-item img,
.settings-nav .nav-item svg{
  width:18px !important;
  height:18px !important;
  min-width:18px;
  min-height:18px;
  display:block;
}
.main{flex:1;display:flex;flex-direction:column;margin-left:var(--sidebar-width);min-width:0;min-height:calc(100vh - 64px);background:var(--bg);}
.topbar{position:fixed;top:0;left:0;right:0;height:64px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 28px;background:var(--qc-dark-bg);border-bottom:2px solid var(--qc-gold-dark);z-index:30;flex-wrap:wrap;min-width:0;box-shadow:0 2px 20px rgba(0,0,0,0.35);}
.search{position:relative;}
.search{flex:1 1 auto;min-width:0;max-width:520px;}
.search input{width:100%;max-width:520px;padding:10px 14px 10px 38px;border-radius:10px;border:1px solid #e6e6e6;background:#fff;transition:border-color .15s;box-sizing:border-box;}
.search .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.7;}
.search input:hover,.search input:focus{border-color:#D9BD7D;outline:none;box-shadow:none;}

/* ------------------------------------------------------------------ */
/* App search bars — JAE-TCRMS style (type=text, left icon, live type) */
/* ------------------------------------------------------------------ */
.app-search,
.table-search {
  position: relative;
  display: inline-block;
  min-width: 0;
  vertical-align: middle;
}
.app-search--fluid,
.table-search--fluid {
  display: block;
  width: 100%;
  margin: 0 0 12px;
}
.app-search-icon,
.table-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.65;
  pointer-events: none;
  z-index: 1;
}
.app-search-input,
.table-search-input {
  box-sizing: border-box;
  width: 260px;
  max-width: 100%;
  height: 36px;
  padding: 0 12px 0 36px !important;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #111827;
  transition: border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.app-search--fluid .app-search-input,
.table-search--fluid .table-search-input,
.table-search--fluid .app-search-input {
  width: 100%;
}
.app-search-input::placeholder,
.table-search-input::placeholder {
  color: #9ca3af;
  font-size: 13px;
}
.app-search-input:hover,
.table-search-input:hover {
  border-color: #D9BD7D;
}
/* Hide native WebKit search decorations if type=search slips through */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Global focus styles for all typable fields to ensure consistent focus border color */
input:focus,
textarea:focus,
select:focus,
[contenteditable="true"]:focus,
input[type="search"]:focus,
.app-search-input:focus,
.table-search-input:focus,
.panel-input:focus,
.panel-textarea:focus {
  border-color: var(--focus) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(217,189,125,0.12) !important;
}
.top-actions{display:flex;align-items:center;gap:24px;flex-shrink:0;}
.brand-top{flex-shrink:0;}
.brand-top,.brand-text{color:#fff;}
.top-actions .icon{width:20px;height:20px;filter:brightness(0) saturate(100%) invert(84%) sepia(20%) saturate(432%) hue-rotate(356deg) brightness(93%) contrast(86%);}
.icon-badge{display:inline-flex;align-items:center;justify-content:center;}
.user{display:flex;align-items:center;gap:10px;text-align:left;font-size:14px;}
a.user-link{text-decoration:none;color:inherit;cursor:pointer;}
a.user-link:hover{color:inherit;}
.user-info-pill{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(217,189,125,0.25);
}
.user-avatar-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.8);
  flex-shrink:0;
}
.user-meta{display:flex;align-items:center;gap:8px;min-width:0;}
.user-name{font-weight:600;font-size:14px;color:#fff;white-space:nowrap;}
.user-role{font-size:12px;}
.role-badge{
  display:inline-flex;
  align-items:center;
  padding:0.18rem 0.6rem;
  border-radius:20px;
  font-weight:700;
  color:var(--qc-gold);
  background:rgba(217,189,125,0.2);
  white-space:nowrap;
}
.content{padding:20px 28px;background:var(--bg);}
.app-footer{flex-shrink:0;margin-top:auto;text-align:center;padding:12px 16px 18px;color:#6B7280;font-size:12px;border-top:1px solid #E5E7EB;}
.page-header h2{margin:0 0 12px 0;color:#111;}
.stats-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.stat-card{flex:1 1 0;min-width:min(100%,120px);background:var(--card-bg);padding:14px;border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,0.03);text-align:center;}
.stat-value{font-size:20px;font-weight:700;color:#111;}
.stat-label{color:var(--muted);font-size:12px;margin-top:4px;}

/* Stat card variants */
.stat-card.stat-low-stock .stat-value,
.stat-card.stat-low-stock .stat-label { color: #ef4444; }

.stat-card.stat-total-stock .stat-value,
.stat-card.stat-total-stock .stat-label { color: #16a34a; }

.stat-card.stat-pending .stat-value,
.stat-card.stat-pending .stat-label,
.stat-card.stat-in-progress .stat-value,
.stat-card.stat-in-progress .stat-label { color: #3b82f6; }

.stat-card.stat-foodics .stat-value,
.stat-card.stat-foodics .stat-label,
.stat-card.stat-talabat .stat-value,
.stat-card.stat-talabat .stat-label { color: #D9BD7D; }
.stat-note{font-size:11px;color:var(--muted);margin-top:2px;}
.panels{display:grid;grid-template-columns:1fr 640px;gap:16px;}
.panel{background:var(--card-bg);padding:18px;border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,0.03);}
/* Override sidebar width to match inventory pages where needed */
:root{
  --sidebar-width: 200px;
}

/* Increase border contrast for containers and tables */
:root{
  --border: #cfcfcf;
}

/* Ensure common container elements show the darker border */
.stat-card,
.panel,
.inventory-card,
.supplier-table-wrap,
.details-card {
  border: 1px solid var(--border);
}

/* Slightly reduce inner shadow so border reads more clearly */
.stat-card, .panel, .details-card {
  box-shadow: 0 1px 1px rgba(16,24,40,0.04);
}
.panel{background:var(--card-bg);padding:18px;border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,0.03);}
.panel h3{margin:0 0 12px 0;color:#111;}
.list-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f3f3f3;}
/* Most Requested: use accent color as the row background (not an after-bar) */
.panel.panel-left.most-requested .list-row{
  border-bottom:none;
  padding:10px 12px;
  position:relative;
  margin-bottom:10px;
}
.panel.panel-left.most-requested .list-row .row-bar{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  background: rgba(255,216,142,0.26);
  border-radius:6px;
  z-index:0;
}
.panel.panel-left.most-requested .list-row .row-content{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.panel.panel-left.most-requested .list-row .row-bar.bar-26{width:26%;}
.panel.panel-left.most-requested .list-row .row-bar.bar-20{width:20%;}
.panel.panel-left.most-requested .list-row .row-bar.bar-15{width:15%;}
.panel.panel-left.most-requested .list-row .row-bar.bar-14{width:14%;}
.panel.panel-left.most-requested .list-row .row-bar.bar-9{width:9%;}
.panel.panel-left.most-requested .list-row .row-bar.bar-3{width:3%;}
.item-name{color:#374151;}
.item-stats{display:flex;gap:8px;align-items:center;color:var(--muted);}
.branch-list{margin:12px 0 0 0;padding:0;list-style:none;color:var(--muted);font-size:13px;}
.chart-placeholder{height:220px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#fbfbfb);border-radius:8px;padding:8px;}
.panel.panel-right .panel-right-top{display:flex;align-items:flex-start;gap:8px;}
.panel.panel-right .branch-list-container{flex:0 0 260px;margin-left:6px;}
.panel.panel-right .branch-list{margin:0;padding:0;list-style:none;color:var(--muted);font-size:15px;line-height:1.3;}
.panel.panel-right .branch-list li{margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.panel.panel-right .branch-list li::before{content:"";width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px;margin-right:8px;}
.panel.panel-right .branch-list li:nth-child(1)::before{background:#E5C646;}
.panel.panel-right .branch-list li:nth-child(2)::before{background:#EAD26E;}
.panel.panel-right .branch-list li:nth-child(3)::before{background:#F9F5E5;}
.panel.panel-right .branch-list li:nth-child(4)::before{background:#F4E9BD;}
.panel.panel-right .branch-list li:nth-child(5)::before{background:#EFDE96;}
.panel.panel-right .branch-list li:nth-child(6)::before{background:#C4AA41;}
.panel.panel-right .branch-name{font-weight:400;color:#111;margin-right:6px;}
.panel.panel-right .branch-list .amount,.panel.panel-right .branch-list .pct{color:var(--muted);font-weight:400;}
.panel.panel-right .chart-container{flex:1;display:flex;align-items:center;gap:12px;margin-left:6px;}
.panel.panel-right .chart-placeholder{flex:1;background:transparent;min-height:220px;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:8px;}
.panel.panel-right .chart-placeholder img{width:100%;max-width:240px;height:auto;display:block;border-radius:6px;}
.panel.panel-right .chart-image img{width:100%;max-width:240px;height:auto;display:block;border-radius:6px;}
.panel.panel-right .panel-right-top{display:flex;align-items:center;gap:12px;padding-left:12px;}
.panel.panel-right .chart-placeholder{flex:1;}
.panel.panel-right .chart-image img{width:160px;max-width:100%;height:auto;display:block;border-radius:6px;}
@media(max-width:1000px){
  .panels{grid-template-columns:1fr;}
}

/* Responsive: smaller laptops and tablets */
@media(max-width:1390px){
  .topbar{padding:14px 20px;}
  .content{padding:16px 20px;}
  .search input{max-width:360px;}
  .panel.panel-right .branch-list-container{flex:0 0 200px;}
  .panels{grid-template-columns:1fr;gap:12px;}
}
/* iPad / small laptop (landscape ~1190px) */
@media(max-width:1190px){
  .topbar{padding:12px 16px;gap:8px;}
  .content{padding:14px 16px;}
  .search{max-width:280px;}
  .search input{max-width:100%;}
  .brand-text{font-size:15px;}
  .brand-logo{height:28px;}
  .user-name{font-size:14px;}
  .user-role{font-size:12px;}
  .top-actions{gap:16px;}
  .sidebar .nav-item{font-size:13px;padding:10px;}
  .sidebar.collapsed .nav-item{padding:8px;}
  .page-header{flex-wrap:wrap;gap:10px;}
}
/* iPad / small laptop (narrow ~900px) */
@media(max-width:900px){
  .content{padding:12px 14px;}
  .topbar{padding:12px 14px;}
  .search{max-width:240px;}
  nav.breadcrumbs,
  .breadcrumbs{display:none !important;}
}
/* iPad portrait / tablet (~768px) */
@media (max-width: 768px) {
  .topbar{height:auto;min-height:64px;padding:12px 14px;}
  .search{display:none !important;}
  .search input{max-width:100%;}
  .content{padding:16px 18px;}
  .stat-card{padding:12px;}
  .stat-value{font-size:18px;}
  .stat-label{font-size:11px;}
  .panels{gap:10px;}
  .panel{padding:14px;}
  .panel.panel-right .panel-right-top{flex-direction:column;}
  .panel.panel-right .branch-list-container{flex:0 0 auto;}
  .page-header{flex-direction:column;align-items:center;gap:8px;text-align:center;}
  .page-header h2{font-size:18px;width:100%;text-align:center;}
  .sidebar .nav-item{font-size:13px;padding:10px;}
  .sidebar.collapsed .nav-item{padding:8px;}

  /* Empty table messages — smaller TEXT only (not padding), tablet/phone */
  .table-empty-message,
  .table-empty-message *,
  .inventory-table .table-empty-message,
  .empty-state-message,
  .branches-search-empty,
  .dashboard-ops-table .table-empty-message,
  .dashboard-vat-table .table-empty-message,
  .dashboard-audit-table .table-empty-message,
  .reports-page .table-empty-message,
  .menu-config-empty-cell,
  .no-assignments,
  table td[colspan],
  .inventory-table td[colspan],
  .all-items-table td[colspan],
  body.requests-page-open .table-empty-message,
  body.requests-page-open .table-empty-message *{
    font-size:10px !important;
    line-height:1.4 !important;
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  /* Horizontally scrollable tables across pages */
  .table-wrapper,
  .it-users-table-wrap,
  .supplier-table-wrap,
  .menu-config-brand-section,
  .dashboard-ops-table .table-wrapper{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
  .table-wrapper-inner,
  .inventory-table,
  .dashboard-ops-table .inventory-table,
  .packaging-table,
  .menu-config-table,
  .supplier-table,
  .it-users-table{
    min-width:640px;
  }
  .dashboard-ops-table .inventory-table{
    table-layout:auto;
  }
}
/* Mobile only: hamburger + full-page centered menu (max-width 640px) */
@media(max-width:640px){
  .topbar{
    height:56px;
    min-height:56px;
    padding:8px 12px;
    gap:8px;
  }
  .brand-top{
    gap:8px;
    margin-right:0;
    min-width:0;
  }
  .brand-logo{height:28px;}
  .brand-text{
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:min(52vw, 220px);
  }
  /* Large tap target — closed drawer must not steal hits from the topbar */
  .navbar-hamburger{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    margin:0;
    color:#fff;
    border:none;
    border-radius:10px;
    background:transparent;
    position:relative;
    z-index:2;
    flex-shrink:0;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(217,189,125,0.28);
    cursor:pointer;
  }
  .navbar-hamburger:hover,
  .navbar-hamburger:active,
  .navbar-hamburger:focus-visible{
    background:rgba(217,189,125,0.18);
    outline:none;
  }
  .navbar-hamburger svg{
    display:block;
    width:24px;
    height:24px;
    pointer-events:none;
  }
  .topbar .user-info-pill{display:none !important;}
  .top-actions{gap:8px;}
  .main{margin-left:0 !important;}
  body.menu-open{overflow:hidden;}
  .sidebar-overlay{display:none !important;}
  .sidebar{
    top:0;
    left:0;
    width:100%;
    max-width:100%;
    height:100vh;
    height:100dvh;
    margin-left:0;
    padding:72px 0 32px;
    transform:translateX(-100%);
    transition:transform 0.25s ease;
    z-index:110;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    box-shadow:none;
    border-right:none;
    overflow-y:auto;
    gap:0;
    /* Closed drawer is translated off-screen but still stacked above the topbar —
       disable hits so the hamburger receives taps reliably. */
    pointer-events:none;
  }
  .sidebar.collapsed{width:100%;padding:72px 0 32px;}
  .sidebar.collapsed .nav-item span{display:flex;}
  .sidebar.collapsed .nav-item{padding:17px 48px;}
  body.menu-open .sidebar{
    transform:translateX(0);
    pointer-events:auto;
  }
  .sidebar-toggle{display:none !important;}
  .sidebar-header{
    display:flex !important;
    position:fixed;
    top:0;
    right:0;
    left:0;
    align-items:center;
    justify-content:flex-end;
    padding:8px 12px;
    min-height:56px;
    border-bottom:none;
    background:transparent;
    z-index:2;
    flex-shrink:0;
  }
  .drawer-close{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
    color:rgba(255,255,255,0.9);
    border-radius:10px;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(217,189,125,0.28);
  }
  .drawer-close:hover,
  .drawer-close:active{background:rgba(217,189,125,0.15);}
  .drawer-close svg{pointer-events:none;}
  .sidebar .brand{display:none;}
  .sidebar .nav,
  .sidebar .sidebar-bottom{
    width:100%;
    max-width:none;
    padding-left:0;
    padding-right:0;
    margin:0;
    align-items:stretch;
  }
  .sidebar .nav{
    flex:0 1 auto;
    gap:0;
    margin-top:0;
  }
  .sidebar .nav-item,
  .sidebar .nav-group-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    box-sizing:border-box;
    border-left:none;
    border-radius:0;
    padding:17px 48px;
    min-height:48px;
    font-size:15px;
    font-weight:500;
    letter-spacing:0.02em;
    position:relative;
    touch-action:manipulation;
  }
  .sidebar .nav-item .nav-icon,
  .sidebar .nav-group-toggle .nav-icon,
  .sidebar .nav-item > img{
    flex-shrink:0;
  }
  .sidebar .nav-item > span,
  .sidebar .nav-group-toggle > span{
    flex:0 0 auto;
    text-align:left;
    white-space:nowrap;
  }
  .sidebar .nav-item.active{
    border-left:none;
    border-radius:0;
  }
  .sidebar .nav-item-master-file .nav-item-label-stacked{
    flex-direction:row;
    align-items:center;
    gap:0.3em;
    white-space:nowrap;
  }
  .sidebar .nav-group{width:100%;}
  .sidebar .nav-group-toggle .nav-chevron{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    margin-left:0;
  }
  .sidebar .nav-sub{
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:4px 0 8px;
    margin:0;
  }
  .sidebar .nav-group.expanded .nav-sub{display:flex;}
  .sidebar .nav-sub-item{
    width:100%;
    box-sizing:border-box;
    padding:14px 20px;
    min-height:44px;
    text-align:center;
    margin:0;
    border-radius:0;
    font-size:14px;
    letter-spacing:0.02em;
    white-space:nowrap;
    touch-action:manipulation;
  }
  .sidebar-bottom{
    margin-top:20px;
    flex:0 0 auto;
    width:100%;
    max-width:none;
  }
  .sidebar .logout .nav-item,
  .sidebar .settings-nav .nav-item{justify-content:center;border-left:none;}
  .sidebar .hidden-pages{width:100%;}
  .sidebar .hidden-pages-header{text-align:center;padding:4px 12px;}
  .sidebar.collapsed .nav-group.expanded .nav-sub{display:flex !important;}
  .sidebar.collapsed .nav-group:not(.expanded) .nav-sub{display:none !important;}

  /* Shared mobile form controls — avoid iOS input zoom, larger tap targets */
  .table-search-input,
  .app-search-input,
  select.panel-input,
  select.form-input,
  .chip-multi-select-search{
    font-size:16px !important;
    min-height:44px;
  }
  .chip-multi-select{
    width:100%;
    max-width:100%;
  }
  .inventory-card .table-actions-left,
  .page-header-actions{
    width:100%;
  }
  /* Consistent centered page headings on mobile (all pages) */
  .page-header.inventory-header,
  .page-header{
    flex-direction:column;
    align-items:center !important;
    justify-content:center;
    gap:10px;
    text-align:center;
  }
  .page-header h2,
  .page-header.inventory-header h2{
    width:100%;
    text-align:center;
    font-size:18px;
    margin:0 0 4px 0;
  }
  /* Back link: chevron + "Back" above the page title, left-aligned */
  .page-header-title-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    text-align: left;
  }
  .page-header-title-row h2 {
    width: 100% !important;
    max-width: 100%;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1.25;
  }
  .page-header-title-row .btn-back,
  .page-header-title-row .btn-delete-inline {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    min-height: unset !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
    text-decoration: none;
    color: var(--focus, #D9BD7D);
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    gap: 4px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .page-header-title-row .btn-back .mobile-back-label,
  .page-header-title-row .btn-delete-inline .mobile-back-label {
    display: inline !important;
  }
  .page-header-title-row .btn-back img,
  .page-header-title-row .btn-back svg,
  .page-header-title-row .btn-delete-inline img,
  .page-header-title-row .btn-delete-inline svg,
  .page-header-title-row .mobile-back-chevron {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
    pointer-events: none;
  }
  .page-header-title-row .btn-back svg,
  .page-header-title-row .btn-delete-inline svg {
    stroke: var(--focus, #D9BD7D);
  }
  .page-header-title-row .btn-back img,
  .page-header-title-row .btn-delete-inline img,
  .page-header-title-row .mobile-back-chevron {
    filter: brightness(0) saturate(100%) invert(84%) sepia(20%) saturate(432%) hue-rotate(356deg) brightness(93%) contrast(86%);
  }
  .page-header .page-subtitle,
  .page-header .request-cutoff-subtitle,
  .requests-header-left,
  .branches-header-left,
  .suppliers-header-left,
  .all-items-header-left,
  .reports-header-left,
  .purchase-orders-header-left,
  .page-header > div:not(.page-header-actions) {
    width: 100%;
    text-align: center;
  }
  .requests-header-left h2,
  .branches-header-left h2,
  .suppliers-header-left h2,
  .all-items-header-left h2,
  .reports-header-left h2,
  .purchase-orders-header-left h2 {
    text-align: center;
  }
  .page-header.branches-header,
  .page-header.branch-packaging-header,
  .page-header.requests-page-header,
  .page-header.inventory-header.all-items-page-header,
  .page-header.purchase-orders-page-header,
  .reports-page .page-header.inventory-header,
  body.edit-item-page-open .page-header.inventory-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .page-header-actions{
    justify-content:center;
    flex-wrap:wrap;
  }
  .page-header-actions.mobile-header-actions-empty {
    display: none !important;
  }
  .page-header[style]{
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center;
  }

  /* Empty table copy — TEXT size only (responsive); defeat mobile text inflation */
  .table-empty-message,
  .table-empty-message *,
  .inventory-table .table-empty-message,
  .empty-state-message,
  .branches-search-empty,
  .dashboard-ops-table .table-empty-message,
  .dashboard-vat-table .table-empty-message,
  .dashboard-audit-table .table-empty-message,
  .reports-page .table-empty-message,
  .menu-config-empty-cell,
  .no-assignments,
  table td[colspan],
  .inventory-table td[colspan],
  .all-items-table td[colspan]{
    font-size:10px !important;
    line-height:1.4 !important;
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  /* Screenshot-style toolbar: search full-width, filter icon on its own row */
  .table-actions,
  .all-items-toolbar,
  .menu-config-global-actions,
  .menu-map-toolbar,
  .menu-rules-toolbar{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .table-actions-left,
  .all-items-toolbar-main{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
  }
  .table-search,
  .table-search--fluid,
  .menu-map-search,
  .menu-rules-search{
    order:1;
    width:100% !important;
    max-width:100% !important;
    display:block !important;
  }
  .table-search-input,
  .app-search-input{
    width:100% !important;
    max-width:100% !important;
  }
  .mobile-table-filter-bar{
    display:flex !important;
    order:2;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    min-height:36px;
  }
  .has-mobile-table-filters .category-filter-form,
  .has-mobile-table-filters form[id$="-filters-form"],
  .has-mobile-table-filters .category-filter-select,
  .has-mobile-table-filters select.category-filter-select,
  .has-mobile-table-filters .menu-config-filter,
  .has-mobile-table-filters .menu-map-filter-select,
  .has-mobile-table-filters .menu-rules-filter-select,
  .has-mobile-table-filters #clear-filters,
  .has-mobile-table-filters .btn-clear-filters{
    display:none !important;
  }
}
@media(max-width:480px){
  .stats-grid{flex-direction:column;}
  .stat-card{flex:1 1 auto;min-width:0;}
  .content{padding:12px;}
  .table-wrapper-inner,
  .inventory-table,
  .dashboard-ops-table .inventory-table,
  .packaging-table,
  .menu-config-table,
  .supplier-table,
  .it-users-table{
    min-width:560px;
  }
  .table-empty-message,
  .table-empty-message *,
  .inventory-table .table-empty-message,
  .empty-state-message,
  .branches-search-empty,
  .menu-config-empty-cell,
  .no-assignments,
  table td[colspan]{
    font-size:9px !important;
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }
}

/* Mobile filter trigger — hidden on desktop */
.mobile-table-filter-bar{display:none;}
.mobile-table-filter-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid #E5E7EB;
  border-radius:10px;
  background:#fff;
  color:#374151;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.mobile-table-filter-btn img{
  width:18px;
  height:18px;
  display:block;
  pointer-events:none;
  opacity:0.85;
}
.mobile-table-filter-btn:hover,
.mobile-table-filter-btn:active{
  border-color:#D9BD7D;
  background:#fbf9f2;
}
.mobile-table-filter-btn.is-active{
  border-color:#D9BD7D;
  background:#D9BD7D;
  color:#fff;
}
.mobile-table-filter-btn.is-active img{
  filter:brightness(0) invert(1);
  opacity:1;
}
.mobile-table-filter-btn-dot{
  display:none;
  position:absolute;
  top:7px;
  right:7px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#EF4444;
  border:1.5px solid #fff;
}
.mobile-table-filter-btn.is-active .mobile-table-filter-btn-dot{display:block;}

/* Mobile filter bottom sheet */
.mobile-filter-sheet{
  display:none;
  position:fixed;
  inset:0;
  z-index:12000;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
}
.mobile-filter-sheet.is-open{display:flex;}
.mobile-filter-sheet-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.45);
}
.mobile-filter-sheet-close-fab{
  position:relative;
  z-index:2;
  width:44px;
  height:44px;
  margin:0 auto 12px;
  border:none;
  border-radius:50%;
  background:#111827;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  touch-action:manipulation;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
  flex-shrink:0;
}
.mobile-filter-sheet-close-fab svg{
  width:18px;
  height:18px;
  pointer-events:none;
}
.mobile-filter-sheet-panel{
  position:relative;
  z-index:1;
  left:auto;
  right:auto;
  bottom:auto;
  width:100%;
  max-height:min(72vh, 560px);
  background:#fff;
  border-radius:20px 20px 0 0;
  display:flex;
  flex-direction:column;
  box-shadow:0 -8px 30px rgba(0,0,0,0.18);
  overflow:hidden;
}
.mobile-filter-sheet-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 18px 12px;
  border-bottom:1px solid #F3F4F6;
  flex-shrink:0;
}
.mobile-filter-sheet-header img{
  width:18px;
  height:18px;
  opacity:0.8;
}
.mobile-filter-sheet-title{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#111827;
}
.mobile-filter-sheet-body{
  display:flex;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.mobile-filter-sheet-cats{
  width:42%;
  max-width:180px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#F9FAFB;
  border-right:1px solid #F3F4F6;
  padding:8px 0;
}
.mobile-filter-cat{
  display:block;
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  padding:14px 14px 14px 16px;
  font-size:13px;
  font-weight:500;
  color:#6B7280;
  cursor:pointer;
  position:relative;
  touch-action:manipulation;
}
.mobile-filter-cat.is-selected{
  color:#111827;
  font-weight:700;
  background:#fff;
}
.mobile-filter-cat.is-selected::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:#111827;
}
.mobile-filter-cat.has-value:not(.is-selected){color:#374151;}
.mobile-filter-sheet-options{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 4px 8px 8px;
}
.mobile-filter-option-header{
  padding:10px 12px 6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#9CA3AF;
}
.mobile-filter-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  min-height:48px;
  cursor:pointer;
  border-radius:8px;
  touch-action:manipulation;
}
.mobile-filter-option:hover{background:#F9FAFB;}
.mobile-filter-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.mobile-filter-option-check{
  width:20px;
  height:20px;
  border-radius:5px;
  border:1.5px solid #D1D5DB;
  background:#fff;
  flex-shrink:0;
  position:relative;
}
.mobile-filter-option input:checked + .mobile-filter-option-check{
  background:#111827;
  border-color:#111827;
}
.mobile-filter-option input:checked + .mobile-filter-option-check::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.mobile-filter-option-label{
  font-size:14px;
  color:#111827;
  line-height:1.3;
}
.mobile-filter-sheet-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid #F3F4F6;
  flex-shrink:0;
  background:#fff;
}
.mobile-filter-sheet-clear{
  border:none;
  background:transparent;
  color:#6B7280;
  font-size:14px;
  font-weight:600;
  padding:10px 4px;
  cursor:pointer;
  touch-action:manipulation;
}
.mobile-filter-sheet-apply{
  border:none;
  background:#111827;
  color:#fff;
  font-size:14px;
  font-weight:700;
  padding:12px 28px;
  border-radius:10px;
  cursor:pointer;
  touch-action:manipulation;
  min-width:120px;
}
.mobile-filter-sheet-apply:active{opacity:0.92;}
html.mobile-filter-open,
html.mobile-filter-open body{
  overflow:hidden !important;
}