/* ══════════════════════════════════════════════════
   ZK OWNER PRO — Polaris Design System
   ══════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────── */
:root {
  --surface:       #FFFFFF;
  --surface-sub:   #F6F6F7;
  --surface-hover: #F1F2F3;
  --surface-press: #E4E5E7;
  --border:        #E1E3E5;
  --border-s:      #C9CCCF;
  --text:          #202223;
  --text-s:        #6D7175;
  --text-d:        #4B4D50;
  --green:         #008060;
  --green-d:       #006E52;
  --green-bg:      #F1F8F5;
  --green-br:      #95C9B4;
  --blue:          #2C6ECB;
  --blue-bg:       #EBF5FA;
  --blue-br:       #91C9E8;
  --red:           #D72C0D;
  --red-bg:        #FFF4F4;
  --red-br:        #FD5749;
  --yellow:        #B98900;
  --yellow-bg:     #FFF5EA;
  --yellow-br:     #FFC453;
  --topbar-bg:     #1B2B28;
  --topbar-border: rgba(255,255,255,0.08);
  --topbar-hover:  rgba(255,255,255,0.1);
  --nav-w:         240px;
  --topbar-h:      56px;
  --bnav-h:        58px;
  --r:    8px;
  --r-sm: 6px;
  --r-lg: 12px;
  --sh:   0 1px 0 rgba(0,0,0,0.05),0 0 0 1px rgba(63,63,68,0.05),0 1px 3px rgba(63,63,68,0.15);
  --sh-s: 0 0 0 1px rgba(63,63,68,0.05);
  --sh-lg:0 8px 24px rgba(0,0,0,0.12),0 0 0 1px rgba(63,63,68,0.08);
}
body.dark {
  --surface:       #1A1B1C;
  --surface-sub:   #0F1010;
  --surface-hover: #232425;
  --surface-press: #2E3031;
  --border:        #2E3031;
  --border-s:      #3D4042;
  --text:          #E3E3E3;
  --text-s:        #8C9196;
  --text-d:        #B0B3B8;
  --green:         #1DB57E;
  --green-d:       #26C98A;
  --green-bg:      #0D2118;
  --green-br:      #1A5C3A;
  --blue:          #5B9CF6;
  --blue-bg:       #0D1B2C;
  --blue-br:       #1A3A6E;
  --red:           #FF6B6B;
  --red-bg:        #2C1212;
  --red-br:        #7A2020;
  --yellow:        #FFC94D;
  --yellow-bg:     #2C2210;
  --yellow-br:     #7A5500;
  --topbar-bg:     #111213;
  --sh:   0 1px 3px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.05);
  --sh-s: 0 0 0 1px rgba(255,255,255,0.05);
  --sh-lg:0 8px 24px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.05);
}

/* ─── RESET ──────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{
  font-family:'Figtree','IBM Plex Sans Thai',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px;line-height:1.5;
  background:var(--surface-sub);color:var(--text);
  min-height:100%;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body *,body *::before,body *::after{transition:background-color .15s,border-color .15s,color .12s}
.spinner,.tab-content,.wizard-panel,.modal{transition:none}
.p-sidebar{transition:transform .26s cubic-bezier(.32,.72,0,1)}

/* ════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════ */

/* ─── TOPBAR ─────────────────────────────────────── */
.p-topbar{
  position:fixed;top:0;left:0;right:0;
  height:var(--topbar-h);z-index:400;
  background:var(--topbar-bg);
  display:flex;align-items:center;
  padding:0 16px;gap:10px;
  border-bottom:1px solid var(--topbar-border);
}
.p-topbar-start{display:flex;align-items:center;gap:8px;flex-shrink:1;min-width:0}
.p-topbar-end{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0;flex-shrink:1}

.p-nav-toggle{
  width:36px;height:36px;border:none;background:transparent;
  color:rgba(255,255,255,0.85);cursor:pointer;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;flex-shrink:0;
}
.p-nav-toggle:hover{background:var(--topbar-hover)}
@media(min-width:768px){.p-nav-toggle{display:none}}

.p-topbar-brand{display:flex;align-items:center;gap:8px;min-width:0}
.p-topbar-logo{
  width:28px;height:28px;background:var(--green);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;letter-spacing:-0.3px;flex-shrink:0;
}
.p-topbar-name{font-size:14px;font-weight:700;color:#fff;letter-spacing:-0.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-topbar-toggles{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap}
.p-toggle-group{
  display:flex;align-items:center;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);
  border-radius:100px;padding:2px;gap:1px;
  min-width:0;max-width:100%;overflow:hidden;
}
.p-toggle-btn{
  padding:3px 8px;border-radius:100px;font-size:11px;font-weight:600;
  border:none;cursor:pointer;background:transparent;color:rgba(255,255,255,0.6);
  font-family:inherit;line-height:1.4;transition:all .12s;
  min-width:0;white-space:nowrap;
}
.p-toggle-btn.active{background:rgba(255,255,255,0.2);color:#fff}
.p-topbar-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;
  border:2px solid rgba(255,255,255,0.2);flex-shrink:0;cursor:pointer;
}
/* Hide toggles on very small screens, show avatar only */
@media(max-width:359px){.p-topbar-toggles{display:none}}
.p-topbar-theme-mobile{display:none}
@media(max-width:767px){
  .p-topbar-theme-mobile{display:block}
}

/* ─── BACKDROP ───────────────────────────────────── */
.p-backdrop{
  display:none;position:fixed;inset:0;z-index:350;
  background:rgba(0,0,0,0.5);
}
.p-backdrop.open{display:block}

/* ─── FRAME ──────────────────────────────────────── */
.p-frame{display:flex;min-height:100vh;padding-top:var(--topbar-h)}

/* ─── SIDEBAR ────────────────────────────────────── */
.p-sidebar{
  position:fixed;top:var(--topbar-h);left:0;bottom:0;
  width:var(--nav-w);z-index:360;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  transform:translateX(-100%);
}
@media(min-width:768px){.p-sidebar{transform:translateX(0)}}
.p-sidebar.open{transform:translateX(0)}

/* Mobile header inside sidebar */
.p-sidebar-header{
  display:none;align-items:center;gap:10px;
  padding:14px 16px 12px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
@media(max-width:767px){.p-sidebar-header{display:flex}}
.p-sidebar-logo{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.p-sidebar-logo-mark{
  width:28px;height:28px;background:var(--green);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;flex-shrink:0;
}
.p-sidebar-logo-text{font-size:13px;font-weight:700;color:var(--text)}
.p-sidebar-logo-sub{font-size:10px;color:var(--text-s)}
.p-sidebar-close{
  width:28px;height:28px;border:none;background:transparent;color:var(--text-s);
  cursor:pointer;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;flex-shrink:0;
}
.p-sidebar-close:hover{background:var(--surface-hover);color:var(--text)}

/* Nav sections */
.p-nav-body{flex:1;padding:8px 0;overflow-y:auto}
.p-nav-section-title{
  padding:12px 14px 4px;font-size:11px;font-weight:600;
  color:var(--text-s);letter-spacing:0.4px;text-transform:uppercase;
}
.p-nav-section+.p-nav-section{margin-top:2px}
.p-nav-list{list-style:none;padding:0 8px}
.p-nav-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:500;color:var(--text-d);
  cursor:pointer;border:none;background:transparent;
  text-align:left;font-family:inherit;
  transition:background .1s,color .1s;position:relative;
  min-height:40px;
}
.p-nav-item:hover{background:var(--surface-hover);color:var(--text)}
.p-nav-item.active{background:var(--green-bg);color:var(--green);font-weight:600}
.p-nav-item.active::before{
  content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  height:20px;width:3px;background:var(--green);border-radius:0 2px 2px 0;
}
.p-nav-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}
.p-nav-item.active .p-nav-icon{opacity:1}
.p-nav-item:hover .p-nav-icon{opacity:.8}

/* Sidebar footer */
.p-sidebar-footer{
  border-top:1px solid var(--border);
  padding:10px 8px 12px;flex-shrink:0;
}
.p-user-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--r-sm);margin-bottom:10px;
}
.p-user-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;flex-shrink:0;
}
.p-user-name{font-size:13px;font-weight:600;color:var(--text)}
.p-user-role{font-size:11px;color:var(--text-s)}
.p-sidebar-controls{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;min-width:0}
.p-ctrl-row{display:flex;align-items:center;gap:8px;min-width:0}
.p-ctrl-label{font-size:11px;color:var(--text-s);font-weight:500;width:36px;flex-shrink:0}
.p-pill-group{
  display:flex;align-items:center;flex:1;
  background:var(--surface-hover);border:1px solid var(--border-s);
  border-radius:100px;padding:2px;gap:1px;
  min-width:0;max-width:100%;overflow:hidden;
}
.p-pill-btn{
  flex:1;padding:4px 6px;border-radius:100px;text-align:center;
  font-size:11px;font-weight:600;border:none;cursor:pointer;
  background:transparent;color:var(--text-s);font-family:inherit;transition:all .12s;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.p-pill-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,0.08)}
.p-logout{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 10px;border-radius:var(--r-sm);
  color:var(--red);font-size:13px;font-weight:500;
  cursor:pointer;border:none;background:transparent;font-family:inherit;
  transition:background .12s;min-height:40px;
}
.p-logout:hover{background:var(--red-bg)}

/* ─── MAIN ───────────────────────────────────────── */
.p-main{
  flex:1;min-width:0;
  background:var(--surface-sub);
  padding:20px;
  min-height:calc(100vh - var(--topbar-h));
}
/* Desktop: account for sidebar */
@media(min-width:768px){.p-main{margin-left:var(--nav-w)}}

/* ─── BOTTOM NAV ─────────────────────────────────── */
.p-bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:var(--surface);border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 0 var(--border);
}
@media(max-width:767px){.p-bottom-nav{display:block}}
.p-bnav-inner{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  height:var(--bnav-h);align-items:stretch;
}
.p-bnav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;flex:1;padding:6px 4px;border:none;background:transparent;
  color:var(--text-s);font-size:9px;font-weight:600;font-family:inherit;
  cursor:pointer;position:relative;transition:color .12s;
  min-height:44px;min-width:0;
}
.p-bnav-item.active{color:var(--green)}
.p-bnav-item.active::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24px;height:2px;background:var(--green);border-radius:0 0 2px 2px;
}
.p-bnav-icon{width:20px;height:20px;flex-shrink:0}

/* ─── STICKY SUMMARY ─────────────────────────────── */
.p-sticky-summary{
  display:none;
  position:fixed;bottom:var(--bnav-h);left:0;right:0;z-index:290;
  background:rgba(26,43,40,0.95);backdrop-filter:blur(8px);
  padding:7px 16px;font-size:12px;font-weight:600;color:#fff;
  align-items:center;gap:8px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.p-ss-low{color:#FFC453;margin-left:auto}
@media(max-width:767px){.p-sticky-summary{display:flex}}

/* ─── FAB ────────────────────────────────────────── */
.p-fab{
  display:none;
  position:fixed;z-index:280;
  bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom) + 12px);
  right:16px;
  width:48px;height:48px;border-radius:12px;
  background:var(--green);color:#fff;
  font-size:24px;font-weight:700;border:none;cursor:pointer;
  box-shadow:var(--sh-lg);
  align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .15s;
}
.p-fab:active{transform:scale(0.92)}
/* JS toggles fab-hidden class */
.p-fab.fab-hidden{display:none!important}
@media(max-width:767px){.p-fab{display:flex}}

/* ════════════════════════════════════════════════
   COMPONENTS
   ════════════════════════════════════════════════ */

/* ─── TABS ───────────────────────────────────────── */
.tab-content{display:none}
.tab-content.active{display:block;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ─── PAGE HEADER ────────────────────────────────── */
.page-header{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.page-title{font-size:20px;font-weight:700;letter-spacing:-0.3px;line-height:1.3}
.page-subtitle{font-size:13px;color:var(--text-s);margin-top:2px}
@media(max-width:767px){.page-title{font-size:17px}}

/* ─── CARDS ──────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;margin-bottom:12px;
  box-shadow:var(--sh-s);
}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-title{font-size:13px;font-weight:600;color:var(--text-d)}
@media(max-width:767px){.card{padding:12px}}

/* ─── STAT CARDS ─────────────────────────────────── */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;margin-bottom:14px;
}
.stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:12px 14px;
  box-shadow:var(--sh-s);position:relative;overflow:hidden;
}
.stat-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--border-s);border-radius:var(--r) var(--r) 0 0;
}
.stat-card.accent::after{background:var(--green)}
.stat-card.danger::after{background:var(--red)}
.stat-card.success::after{background:var(--green)}
.stat-label{font-size:11px;font-weight:600;color:var(--text-s);margin-bottom:5px}
.stat-value{font-size:26px;font-weight:700;letter-spacing:-0.5px;line-height:1}
.stat-delta{font-size:11px;color:var(--text-s);margin-top:3px}
.stat-card.danger .stat-value{color:var(--red)}
.stat-card.success .stat-value,.stat-card.accent .stat-value{color:var(--green)}
@media(max-width:767px){
  .stat-value{font-size:22px}
  .stat-label{font-size:10px}
}

/* ─── QUICK ACTIONS ──────────────────────────────── */
.quick-actions{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;margin-bottom:14px;
}
.quick-action{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);
  cursor:pointer;transition:border-color .12s,box-shadow .12s;
  box-shadow:var(--sh-s);text-align:left;font-family:inherit;color:var(--text);
  min-height:60px;
}
.quick-action:hover{border-color:var(--green);box-shadow:0 0 0 2px var(--green-bg)}
.quick-action:active{background:var(--surface-hover)}
.quick-action-label{font-size:10px;color:var(--text-s);text-transform:uppercase;letter-spacing:0.3px;font-weight:500}
.quick-action-title{font-size:13px;font-weight:700;margin-top:2px}
.quick-action-icon{
  font-size:18px;color:var(--green);flex-shrink:0;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",sans-serif;
}

/* ─── PANEL NOTES ────────────────────────────────── */
.panel-note{
  padding:10px 12px;background:var(--blue-bg);
  border:1px solid var(--blue-br);border-radius:var(--r-sm);
  color:var(--blue);font-size:13px;margin-bottom:12px;
}
.panel-note.warning{background:var(--yellow-bg);border-color:var(--yellow-br);color:var(--yellow)}

/* ─── INLINE PILLS ───────────────────────────────── */
.inline-pills{display:flex;flex-wrap:wrap;gap:6px}
.mini-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:100px;
  background:var(--surface-hover);border:1px solid var(--border);
  font-size:12px;color:var(--text-d);font-weight:500;
}
.stack-sm{display:flex;flex-direction:column;gap:8px}

/* ─── BARCODE ────────────────────────────────────── */
.barcode-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.barcode-preview{
  margin-top:10px;padding:12px;border-radius:var(--r-sm);
  background:var(--surface-hover);border:1px dashed var(--border-s);text-align:center;
}
.barcode-preview svg{width:100%;max-width:300px;height:60px;background:#fff;border-radius:6px;padding:6px 10px}
.barcode-code{margin-top:6px;font-size:11px;color:var(--text-s);letter-spacing:1px}

/* ─── TABLE ──────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{
  padding:10px 12px;text-align:left;font-size:11px;font-weight:600;
  color:var(--text-s);border-bottom:1px solid var(--border);
  background:var(--surface-sub);white-space:nowrap;
}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
tbody tr:hover{background:var(--surface-hover)}
tbody tr:last-child{border-bottom:none}
tbody td{padding:10px 12px;color:var(--text);vertical-align:middle}
@media(max-width:767px){
  thead th,tbody td{padding:8px 10px;font-size:12px}
}

/* ─── BADGES ─────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:100px;
  font-size:11px;font-weight:600;white-space:nowrap;
}
.badge-success{background:var(--green-bg);color:var(--green);border:1px solid var(--green-br)}
.badge-danger {background:var(--red-bg);  color:var(--red);  border:1px solid var(--red-br)}
.badge-warning{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-br)}
.badge-info   {background:var(--blue-bg); color:var(--blue); border:1px solid var(--blue-br)}
.badge-muted  {background:var(--surface-hover);color:var(--text-d);border:1px solid var(--border)}
.badge-accent {background:var(--green-bg);color:var(--green);border:1px solid var(--green-br)}

/* ─── BUTTONS ────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid transparent;font-family:inherit;
  line-height:1.4;white-space:nowrap;
  transition:background .12s,border-color .12s,box-shadow .12s;
  min-height:36px;
}
.btn:active{transform:scale(0.98)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn-primary{background:var(--green);color:#fff;border-color:var(--green-d);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.12)}
.btn-primary:hover{background:var(--green-d)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-s);box-shadow:var(--sh-s)}
.btn-secondary:hover{background:var(--surface-hover)}
.btn-danger{background:var(--red-bg);color:var(--red);border-color:var(--red-br)}
.btn-success{background:var(--green-bg);color:var(--green);border-color:var(--green-br)}
.btn-sm{padding:5px 12px;font-size:12px;min-height:30px}
.btn-icon{padding:7px;border-radius:var(--r-sm);aspect-ratio:1}
/* Full-width on mobile */
@media(max-width:480px){.btn-block-mobile{width:100%;justify-content:center}}

/* ─── FORMS ──────────────────────────────────────── */
.form-group{margin-bottom:12px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--text-d);margin-bottom:5px}
.form-input,.form-select,.form-textarea{
  width:100%;padding:9px 12px;
  background:var(--surface);border:1px solid var(--border-s);
  border-radius:var(--r-sm);color:var(--text);font-size:14px;font-family:inherit;
  outline:none;appearance:none;-webkit-appearance:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.04);
  transition:border-color .15s,box-shadow .15s;
  min-height:38px;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(44,110,203,0.18),inset 0 1px 2px rgba(0,0,0,0.04);
}
.form-input::placeholder{color:var(--text-s)}
.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236D7175' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:10px 7px;
  padding-right:30px;cursor:pointer;
}
.form-textarea{resize:vertical;min-height:72px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-hint{font-size:12px;color:var(--text-s);margin-top:3px}
.input-group{display:flex;align-items:stretch}
.input-group .form-input{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.input-group-btn{
  padding:0 12px;background:var(--surface-hover);
  border:1px solid var(--border-s);border-left:none;
  border-radius:0 var(--r-sm) var(--r-sm) 0;cursor:pointer;
  color:var(--text-d);font-size:16px;display:flex;align-items:center;
  transition:background .12s;min-width:44px;justify-content:center;
}
.input-group-btn:hover{background:var(--surface-press);color:var(--text)}
@media(max-width:767px){.form-row{grid-template-columns:1fr}}

/* ─── SIDEBAR THEME / LANG ─── JS IDs ───────────── */
.settings-bar{display:flex;align-items:center;gap:6px;padding:4px 0}
.theme-toggle,.lang-toggle{
  display:flex;align-items:center;flex:1;
  background:var(--surface-hover);border:1px solid var(--border-s);
  border-radius:100px;padding:2px;gap:1px;
}
.theme-btn,.lang-btn{
  flex:1;padding:4px 6px;border-radius:100px;text-align:center;
  font-size:11px;font-weight:600;border:none;cursor:pointer;
  background:transparent;color:var(--text-s);font-family:inherit;transition:all .12s;
}
.theme-btn.active,.lang-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,0.08)}
.lang-btn.active{background:var(--green);color:#fff;box-shadow:none}
.logout-btn{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;
  border-radius:var(--r-sm);color:var(--red);font-size:13px;font-weight:500;
  cursor:pointer;border:none;background:transparent;font-family:inherit;
  transition:background .12s;min-height:40px;
}
.logout-btn:hover{background:var(--red-bg)}
.sidebar-collapse-btn{display:none!important}
/* Legacy sidebar/topbar: not in new HTML, ignore */
.sidebar,.mobile-topbar{display:none!important}

/* ─── SEARCH ─────────────────────────────────────── */
.search-bar{position:relative;margin-bottom:12px}
.search-bar input{padding-left:36px}
.search-icon{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--text-s);font-size:14px;pointer-events:none;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",sans-serif;
}

/* ─── FILTER SELECTS ─────────────────────────────── */
.filter-selects{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filter-select{width:auto;min-width:110px;flex:1 1 110px;max-width:200px;padding:7px 28px 7px 10px;font-size:13px}
@media(max-width:767px){
  .filter-selects{flex-direction:column}
  .filter-select{width:100%;max-width:100%;flex:1 1 auto}
}

/* ─── FILTER ROW ─────────────────────────────────── */
.filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.filter-btn{
  padding:5px 14px;border-radius:100px;font-size:12px;font-weight:600;
  cursor:pointer;border:1px solid var(--border-s);background:var(--surface);
  color:var(--text-d);transition:all .12s;font-family:inherit;box-shadow:var(--sh-s);
  min-height:32px;
}
.filter-btn:hover{border-color:var(--green);color:var(--green)}
.filter-btn.active{background:var(--green);color:#fff;border-color:var(--green-d)}

/* ─── INVENTORY GRID ─────────────────────────────── */
.inv-grid{display:grid;grid-template-columns:1fr;gap:10px}
.inv-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;
  cursor:pointer;position:relative;overflow:hidden;
  box-shadow:var(--sh-s);transition:border-color .12s,box-shadow .12s;
}
.inv-card:hover{border-color:var(--border-s);box-shadow:var(--sh)}
.inv-card.low{border-color:var(--red-br)}
.inv-card.low::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);
}
.inv-card-name{font-size:14px;font-weight:600;margin-bottom:2px}
.inv-card-sku{font-size:11px;color:var(--text-s);margin-bottom:12px}
.inv-card-qty{font-size:28px;font-weight:700;letter-spacing:-0.5px}
.inv-card-unit{font-size:12px;color:var(--text-s);font-weight:500}
.inv-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
}
.inv-card-media{
  width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:var(--surface-hover);border:1px solid var(--border);margin-bottom:12px;
}
.inv-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.product-inline{display:flex;align-items:center;gap:10px;min-width:0}
.product-inline-media{
  width:40px;height:40px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface-hover);border:1px solid var(--border);flex-shrink:0;
}
.product-inline-media img{width:100%;height:100%;object-fit:cover;display:block}
.product-inline-body{min-width:0}
.product-hero{
  width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:var(--surface-hover);border:1px solid var(--border);margin-bottom:16px;
}
.product-hero img,.product-image-preview img{width:100%;height:100%;object-fit:cover;display:block}
.product-image-editor{display:grid;gap:8px}
.product-image-preview{
  width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:var(--surface-hover);border:1px solid var(--border);
}
.product-image-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ─── MODAL ──────────────────────────────────────── */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,0.5);
  align-items:flex-end;justify-content:center;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  width:100%;max-width:540px;
  padding:24px 20px calc(28px + env(safe-area-inset-bottom));
  max-height:90vh;overflow-y:auto;
  box-shadow:var(--sh-lg);position:relative;
  animation:sheetUp .22s cubic-bezier(.32,.72,0,1);
}
.modal::before{
  content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:36px;height:4px;background:var(--border-s);border-radius:2px;
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-title{font-size:16px;font-weight:700;margin:4px 0 16px}
.modal-actions{display:flex;gap:8px;margin-top:16px}
.modal-actions .btn{flex:1;justify-content:center;padding:11px}
@media(min-width:640px){
  .modal-overlay{align-items:center;padding:16px}
  .modal{border-radius:var(--r-lg);padding:24px;padding-bottom:24px}
  .modal::before{display:none}
  @keyframes sheetUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
}

/* ─── QTY INPUT ──────────────────────────────────── */
.qty-input-big{
  width:100%;padding:14px 16px;
  background:var(--surface);border:1px solid var(--border-s);
  border-radius:var(--r);color:var(--text);
  font-size:32px;font-weight:700;text-align:center;
  font-family:inherit;outline:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.04);
  transition:border-color .15s,box-shadow .15s;
}
.qty-input-big:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(44,110,203,0.18)}

/* ─── TYPE TOGGLE ────────────────────────────────── */
.type-toggle{display:flex;gap:8px;margin-bottom:12px}
.type-btn{
  flex:1;padding:10px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid var(--border-s);background:var(--surface);
  color:var(--text-d);transition:all .12s;font-family:inherit;
  box-shadow:var(--sh-s);min-height:42px;
}
.type-btn.active-in{border-color:var(--green-br);background:var(--green-bg);color:var(--green)}
.type-btn.active-out{border-color:var(--red-br);background:var(--red-bg);color:var(--red)}

/* ─── ALERT ITEMS ────────────────────────────────── */
.alert-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-radius:var(--r-sm);
  background:var(--red-bg);border:1px solid var(--red-br);
  margin-bottom:6px;font-size:13px;
}
.alert-item-name{font-weight:600;font-size:14px}
.alert-item-qty{font-size:13px;color:var(--red);font-weight:600}

/* ─── HISTORY ────────────────────────────────────── */
.hist-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.hist-item:last-child{border-bottom:none}
.hist-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.hist-dot.in{background:var(--green)} .hist-dot.out{background:var(--red)}
.hist-info{flex:1;min-width:0}
.hist-name{font-size:14px;font-weight:600}
.hist-meta{font-size:12px;color:var(--text-s);margin-top:1px}
.hist-qty{font-size:14px;font-weight:700;white-space:nowrap}
.hist-qty.in{color:var(--green)} .hist-qty.out{color:var(--red)}

/* ─── LOGIN ──────────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;z-index:999;
  background:var(--surface-sub);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.login-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:28px 24px;
  width:100%;max-width:380px;box-shadow:var(--sh-lg);
}
.login-topbar{
  display:flex;align-items:center;gap:10px;
  margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border);
}
.login-logo-mark{
  width:36px;height:36px;background:var(--green);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;letter-spacing:-0.5px;flex-shrink:0;
}
.login-logo-text{font-size:16px;font-weight:700;letter-spacing:-0.3px}
.login-logo-sub{font-size:11px;color:var(--text-s)}
.login-error{
  background:var(--red-bg);border:1px solid var(--red-br);
  border-radius:var(--r-sm);padding:8px 12px;font-size:13px;color:var(--red);margin-bottom:12px;
}

/* ─── TOAST ──────────────────────────────────────── */
#toast{
  position:fixed;top:64px;left:50%;transform:translateX(-50%);
  z-index:999;padding:9px 18px;border-radius:100px;
  font-size:13px;font-weight:600;display:none;white-space:nowrap;
  animation:toastIn .18s ease;box-shadow:var(--sh-lg);
}
@keyframes toastIn{
  from{opacity:0;transform:translateX(-50%) translateY(-8px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
#toast.success{background:var(--green);color:#fff}
#toast.error{background:var(--red);color:#fff}
#toast.info{background:var(--surface);color:var(--text);border:1px solid var(--border)}

/* ─── LOADING / EMPTY ────────────────────────────── */
.loading{
  display:flex;align-items:center;justify-content:center;
  padding:40px;color:var(--text-s);font-size:13px;gap:8px;
}
.spinner{
  width:16px;height:16px;border:2px solid var(--border-s);
  border-top-color:var(--green);border-radius:50%;animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:40px 16px;color:var(--text-s)}
.empty-icon{font-size:32px;margin-bottom:10px}
.empty-text{font-size:14px}

/* ─── BARCODE SCANNER ────────────────────────────── */
#barcode-video-wrap{
  position:relative;width:100%;border-radius:var(--r);
  overflow:hidden;background:#000;aspect-ratio:16/9;margin-bottom:10px;
}
#barcode-video{width:100%;height:100%;object-fit:cover}
.scan-line{
  position:absolute;left:0;right:0;height:2px;background:var(--green);
  animation:scanMove 2s linear infinite;box-shadow:0 0 6px var(--green);
}
@keyframes scanMove{0%,100%{top:20%}50%{top:80%}}
#scan-result{
  padding:9px 12px;background:var(--surface-hover);
  border-radius:var(--r-sm);font-size:13px;color:var(--text-d);text-align:center;
}

/* ─── MISC ───────────────────────────────────────── */
.divider{height:1px;background:var(--border);margin:14px 0}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600}
.chip-accent{background:var(--green-bg);color:var(--green)}

/* ─── PAGINATION ─────────────────────────────────── */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:20px;flex-wrap:wrap}
.page-btn{
  min-width:36px;height:36px;padding:0 10px;border-radius:var(--r-sm);
  border:1px solid var(--border-s);background:var(--surface);color:var(--text);
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-s);transition:all .12s;
}
.page-btn:hover{border-color:var(--green);color:var(--green)}
.page-btn.active{background:var(--green);color:#fff;border-color:var(--green-d)}
.page-btn:disabled{opacity:.4;cursor:not-allowed}
.page-info{font-size:13px;color:var(--text-s);font-weight:500;padding:0 6px}

/* ─── WIZARD ─────────────────────────────────────── */
.wizard-steps{
  display:flex;align-items:center;justify-content:center;
  gap:0;margin-bottom:20px;position:relative;
}
.wizard-step-item{
  display:flex;flex-direction:column;align-items:center;
  gap:5px;flex:1;position:relative;
}
.wizard-step-item:not(:last-child)::after{
  content:'';position:absolute;top:17px;
  left:calc(50% + 18px);right:calc(-50% + 18px);
  height:2px;background:var(--border-s);z-index:0;
}
.wizard-step-item.done::after{background:var(--green)}
.wizard-circle{
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--border-s);background:var(--surface-hover);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--text-s);
  z-index:1;position:relative;transition:all .18s;
}
.wizard-step-item.active .wizard-circle{
  border-color:var(--green);background:var(--green);color:#fff;
  box-shadow:0 0 0 4px var(--green-bg);
}
.wizard-step-item.done .wizard-circle{border-color:var(--green);background:var(--green);color:#fff}
.wizard-step-label{font-size:11px;font-weight:600;color:var(--text-s);text-align:center}
.wizard-step-item.active .wizard-step-label,.wizard-step-item.done .wizard-step-label{color:var(--green)}

.wizard-panel{display:none}
.wizard-panel.active{display:block;animation:fadeIn .18s ease}
.wizard-nav{display:flex;gap:8px;margin-top:20px}
.wizard-nav .btn{flex:1;justify-content:center}

.prod-select-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  max-height:300px;overflow-y:auto;margin-top:10px;
}
.prod-select-card{
  padding:12px;border-radius:var(--r);
  border:1px solid var(--border);background:var(--surface);
  cursor:pointer;transition:all .12s;
  display:flex;flex-direction:column;gap:3px;box-shadow:var(--sh-s);
}
.prod-select-card:hover{border-color:var(--green)}
.prod-select-card.selected{border-color:var(--green);background:var(--green-bg);box-shadow:0 0 0 2px var(--green-bg)}
.prod-select-card-name{font-size:13px;font-weight:700}
.prod-select-card-stock{font-size:12px;color:var(--text-d)}
.prod-select-card-status{font-size:11px;font-weight:700}

.wizard-confirm-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;
}
.wizard-confirm-row:last-child{border-bottom:none}
.wizard-confirm-label{color:var(--text-d);font-weight:500;font-size:13px}
.wizard-confirm-value{font-weight:700;color:var(--text)}

/* ─── PRODUCT DETAIL ─────────────────────────────── */
.detail-qty{font-size:48px;font-weight:700;letter-spacing:-1.5px;margin:6px 0;line-height:1}
.detail-bar{height:6px;border-radius:3px;background:var(--surface-press);overflow:hidden;margin:10px 0}
.detail-bar-fill{height:100%;border-radius:3px;transition:width .4s ease}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

/* ── MOBILE  < 768px ── */
@media(max-width:767px){
  .p-topbar{
    padding:0 10px;
    gap:6px;
  }
  .p-topbar-start{
    flex:1;
    min-width:0;
  }
  .p-topbar-end{
    gap:4px;
    flex-shrink:0;
  }
  .p-topbar-theme-mobile .p-toggle-group{
    max-width:110px;
  }
  .p-topbar-brand{
    min-width:0;
    flex:1;
  }
  .p-topbar-name{
    font-size:12px;
    max-width:100%;
  }
  .p-topbar-toggles{
    gap:4px;
  }
  .p-topbar-toggles .p-toggle-group:first-child{
    display:none;
  }
  .p-topbar-toggles .p-toggle-group:last-child{
    max-width:110px;
  }
  .p-toggle-btn{
    padding:3px 6px;
    font-size:10px;
  }
  .p-topbar-avatar{
    width:28px;
    height:28px;
    font-size:11px;
  }
  .p-main{
    padding:14px 12px calc(var(--bnav-h) + env(safe-area-inset-bottom) + 16px);
  }
  .page-header > *,
  .card,
  .search-bar,
  .filter-selects,
  .filter-row,
  .wizard-nav,
  .modal-actions,
  .input-group,
  .type-toggle,
  .barcode-actions,
  .product-image-actions,
  .table-wrap,
  .product-inline,
  .product-inline-body{
    min-width:0;
  }
  .stats-grid       {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .quick-actions    {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .inv-grid         {grid-template-columns:minmax(0,1fr)}
  .dash-grid        {grid-template-columns:minmax(0,1fr)!important}
  .form-row         {grid-template-columns:minmax(0,1fr)}
  .prod-select-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-value{font-size:22px}
  .page-header{margin-bottom:14px;padding-bottom:12px}
  .quick-action{padding:10px 12px;min-height:56px;min-width:0}
  .quick-action-title{font-size:12px;overflow-wrap:anywhere}
  .quick-action-label{overflow-wrap:anywhere}
  .card{padding:12px 12px;min-width:0}
  .wizard-nav,
  .modal-actions,
  .product-image-actions,
  .barcode-actions{
    flex-direction:column;
  }
  .wizard-nav .btn,
  .modal-actions .btn,
  .product-image-actions .btn,
  .barcode-actions .btn{
    width:100%;
    justify-content:center;
  }
  .type-toggle{
    flex-direction:column;
  }
  .filter-row .filter-btn{
    flex:1 1 calc(50% - 6px);
    justify-content:center;
    text-align:center;
  }
  .input-group{
    flex-direction:column;
  }
  .input-group .form-input{
    border-radius:var(--r-sm);
    border-right:1px solid var(--border-s);
  }
  .input-group-btn{
    border-left:1px solid var(--border-s);
    border-top:none;
    border-radius:var(--r-sm);
    width:100%;
    min-height:40px;
  }
}

/* ── SMALL MOBILE < 400px ── */
@media(max-width:399px){
  .p-topbar{
    padding:0 8px;
  }
  .p-topbar-toggles{
    gap:3px;
  }
  .p-topbar-toggles .p-toggle-group:first-child{
    display:none;
  }
  .p-topbar-toggles .p-toggle-group:last-child,
  .p-topbar-theme-mobile .p-toggle-group{
    max-width:96px;
  }
  .p-toggle-btn{
    padding:3px 5px;
    font-size:9px;
  }
  .stats-grid{grid-template-columns:1fr 1fr;gap:6px}
  .stat-value{font-size:20px}
  .inv-grid{grid-template-columns:1fr}
  .p-bnav-item{font-size:8px;padding:6px 1px}
  .p-bnav-icon{width:18px;height:18px}
  .page-title{font-size:16px}
  .prod-select-grid{grid-template-columns:1fr}
  .quick-actions{grid-template-columns:1fr}
  .filter-row .filter-btn{flex-basis:100%}
}

/* ── TABLET 768–1099px (sidebar visible) ── */
@media(min-width:768px) and (max-width:1099px){
  .p-main{padding:20px 22px}
  /* Content width = viewport - 240px sidebar */
  .stats-grid   {grid-template-columns:repeat(3,1fr)}
  .quick-actions{grid-template-columns:repeat(2,1fr)}
  .inv-grid     {grid-template-columns:repeat(2,1fr)}
  .dash-grid    {grid-template-columns:1fr 1fr!important}
  .prod-select-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── DESKTOP ≥ 1100px ── */
@media(min-width:1100px){
  .p-main{padding:24px 32px}
  .stats-grid   {grid-template-columns:repeat(5,1fr)}
  .quick-actions{grid-template-columns:repeat(4,1fr)}
  .inv-grid     {grid-template-columns:repeat(3,1fr)}
  .dash-grid    {grid-template-columns:1fr 1fr!important}
  .modal-overlay{align-items:center;padding:16px}
  .modal{border-radius:var(--r-lg);padding:24px}
  .modal::before{display:none}
  .prod-select-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── LARGE DESKTOP ≥ 1440px ── */
@media(min-width:1440px){
  .p-main{padding:28px 40px}
  .inv-grid{grid-template-columns:repeat(4,1fr)}
}