:root {
  --bg:#0f1117;--bg2:#161820;--bg3:#1e2029;--bg4:#252730;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
  --text:#eeeef0;--text2:#9192a0;--text3:#5a5b6a;
  --accent:#6c8fff;--accent2:#4a6ee0;
  --green:#3dd68c;--green-bg:rgba(61,214,140,0.1);
  --red:#ff6b6b;--red-bg:rgba(255,107,107,0.1);
  --amber:#fbbf24;--amber-bg:rgba(251,191,36,0.1);
  --radius:10px;--radius-lg:14px;
  --shadow:0 4px 24px rgba(0,0,0,0.4);
}
*{box-sizing:border-box;margin:0;padding:0;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;overflow-x:hidden;}
html{overflow-x:hidden;max-width:100vw;}

/* AUTH */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 40px;width:100%;max-width:420px;box-shadow:var(--shadow);}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.auth-logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--accent),#a78bfa);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.auth-logo-text{font-size:17px;font-weight:600;}
.auth-logo-sub{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;}
.auth-title{font-size:20px;font-weight:600;margin-bottom:6px;}
.auth-sub{font-size:13px;color:var(--text3);margin-bottom:24px;}
.auth-tabs{display:flex;gap:0;background:var(--bg3);border-radius:var(--radius);padding:3px;margin-bottom:22px;}
.auth-tab{flex:1;padding:8px;text-align:center;font-size:13px;font-weight:500;cursor:pointer;border-radius:8px;color:var(--text3);transition:all 0.15s;}
.auth-tab.active{background:var(--bg2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.fg label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;}
.fg input{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;padding:10px 12px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color 0.15s;}
.fg input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,143,255,0.1);}
.auth-err{background:var(--red-bg);border:1px solid rgba(255,107,107,0.2);border-radius:var(--radius);padding:10px 12px;font-size:13px;color:var(--red);margin-bottom:14px;display:none;}
.auth-err.show{display:block;}
.auth-ok{background:var(--green-bg);border:1px solid rgba(61,214,140,0.2);border-radius:var(--radius);padding:10px 12px;font-size:13px;color:var(--green);margin-bottom:14px;display:none;}
.auth-ok.show{display:block;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all 0.15s;font-family:'DM Sans',sans-serif;}
.btn-primary{background:var(--accent);color:#fff;width:100%;justify-content:center;}
.btn-primary:hover{background:var(--accent2);}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;}
.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border2);}
.btn-secondary:hover{background:var(--bg4);}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid rgba(255,107,107,0.2);}
.btn-danger:hover{background:rgba(255,107,107,0.2);}
.btn-danger-solid{background:var(--red);color:#fff;border:none;}
.btn-danger-solid:hover{background:#e54848;}
.btn-success{background:var(--green);color:#fff;}
.btn-success:hover{background:#2fb875;}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2);}
.btn-ghost:hover{background:var(--bg3);}
.btn-sm{padding:5px 11px;font-size:12px;}
.btn-full{width:100%;justify-content:center;}
.btn-lg{padding:12px 22px;font-size:14px;}

/* APP LAYOUT */
.app-layout{display:flex;min-height:100vh;}
.sidebar{width:220px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:10;}
.sidebar-logo{padding:22px 20px 18px;border-bottom:1px solid var(--border);}
.logo-mark{display:flex;align-items:center;gap:10px;}
.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--accent),#a78bfa);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.logo-text{font-size:15px;font-weight:600;}
.logo-sub{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;}
.sidebar-nav{padding:12px 10px;flex:1;overflow-y:auto;}
.nav-section{font-size:10px;font-weight:600;color:var(--text3);letter-spacing:0.1em;text-transform:uppercase;padding:8px 10px 5px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius);cursor:pointer;color:var(--text2);font-size:13px;font-weight:400;transition:all 0.15s;margin-bottom:2px;position:relative;}
.nav-item:hover{background:var(--bg3);color:var(--text);}
.nav-item.active{background:rgba(108,143,255,0.12);color:var(--accent);font-weight:500;}
.nav-icon{width:16px;height:16px;flex-shrink:0;opacity:0.7;}
.nav-item.active .nav-icon{opacity:1;}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:600;padding:1px 6px;border-radius:20px;}
.sidebar-user{padding:14px 16px;border-top:1px solid var(--border);}
.user-info{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#a78bfa);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;}
.user-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-role{font-size:11px;color:var(--text3);text-transform:capitalize;}
.btn-logout{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:12px;padding:7px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s;}
.btn-logout:hover{color:var(--red);border-color:rgba(255,107,107,0.3);}

/* MAIN */
.main{margin-left:220px;flex:1;display:flex;flex-direction:column;min-height:100vh;}
.topbar{height:58px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;background:var(--bg);position:sticky;top:0;z-index:5;gap:16px;}
.topbar-title{font-size:17px;font-weight:600;}
.topbar-sub{font-size:12px;color:var(--text3);margin-top:1px;}
.content{padding:26px 28px;flex:1;}

/* VIEWS */
.view{display:none;animation:fadeIn 0.2s ease;}
.view.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;position:relative;overflow:hidden;transition:transform 0.12s, border-color 0.12s;}
.stat-card.clickable{cursor:pointer;}
.stat-card.clickable:hover{transform:translateY(-2px);border-color:var(--border2);}
.stat-card.clickable.active-filter{border-color:var(--accent);box-shadow:0 0 0 2px rgba(108,143,255,0.2);}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--card-accent,transparent);}
.stat-card.c-blue{--card-accent:var(--accent);}
.stat-card.c-green{--card-accent:var(--green);}
.stat-card.c-red{--card-accent:var(--red);}
.stat-card.c-amber{--card-accent:var(--amber);}
.stat-label{font-size:11px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;}
.stat-value{font-size:28px;font-weight:600;font-family:'DM Mono',monospace;}
.stat-value.red{color:var(--red);}
.stat-value.amber{color:var(--amber);}
.stat-value.green{color:var(--green);}
.stat-icon{position:absolute;right:16px;top:16px;font-size:22px;opacity:0.12;}

/* TABLE */
.table-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.table-header{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap;}
.table-header-title{font-size:13px;font-weight:600;}
.tcount{font-size:11px;color:var(--text3);background:var(--bg3);padding:2px 8px;border-radius:20px;}
.search-box{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:6px 12px;}
.search-box:focus-within{border-color:var(--accent);}
.search-box input{background:none;border:none;outline:none;color:var(--text);font-size:13px;font-family:'DM Sans',sans-serif;width:150px;}
.search-box input::placeholder{color:var(--text3);}
table{width:100%;border-collapse:collapse;}
thead th{text-align:left;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;padding:10px 20px;border-bottom:1px solid var(--border);}
tbody tr{transition:background 0.1s;}
tbody tr:hover{background:var(--bg3);}
tbody td{padding:11px 20px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
.cell-mono{font-family:'DM Mono',monospace;font-size:13px;}
.size-pill{background:var(--bg3);padding:3px 8px;border-radius:6px;font-family:'DM Mono',monospace;font-size:12px;color:var(--text2);}
.barcode-pill{background:var(--bg4);padding:3px 8px;border-radius:6px;font-family:'DM Mono',monospace;font-size:11px;color:var(--text2);border:1px dashed var(--border2);}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;}
.badge-ok{background:var(--green-bg);color:var(--green);}
.badge-ok::before{background:var(--green);}
.badge-low{background:var(--amber-bg);color:var(--amber);}
.badge-low::before{background:var(--amber);}
.badge-out{background:var(--red-bg);color:var(--red);}
.badge-out::before{background:var(--red);}
.role-badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.role-admin{background:rgba(108,143,255,0.15);color:var(--accent);}
.role-manager{background:rgba(61,214,140,0.12);color:var(--green);}
.role-viewer{background:var(--bg3);color:var(--text3);}

/* PANEL */
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:18px;}
.panel-title{font-size:14px;font-weight:600;margin-bottom:4px;}
.panel-sub{font-size:12px;color:var(--text3);margin-bottom:18px;}
.form-grid{display:grid;gap:14px;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:1fr 1fr 1fr;}
.g4{grid-template-columns:1fr 1fr 1fr auto;}
.g5{grid-template-columns:1fr 1fr 1fr 1fr auto;}
.fg-app{display:flex;flex-direction:column;gap:5px;}
.fg-app label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;}
.fg-app input,.fg-app select{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:13px;padding:9px 12px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color 0.15s;}
.fg-app input:focus,.fg-app select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,143,255,0.1);}
.fg-app select option{background:var(--bg3);}

/* ALERTS */
.alert-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.alert-toolbar select{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;padding:7px 12px;outline:none;font-family:'DM Sans',sans-serif;}
.alert-section{margin-bottom:22px;}
.alert-section-title{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.alert-section-title::after{content:'';flex:1;height:1px;background:var(--border);}
.alert-card{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:8px;gap:14px;}
.alert-card.is-out{border-left:3px solid var(--red);}
.alert-card.is-low{border-left:3px solid var(--amber);}
.alert-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.alert-icon.out{background:var(--red-bg);}
.alert-icon.low{background:var(--amber-bg);}
.alert-info{flex:1;}
.alert-name{font-size:14px;font-weight:500;}
.alert-detail{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace;margin-top:2px;}
.all-ok{text-align:center;padding:56px;color:var(--text3);}
.all-ok-icon{font-size:40px;margin-bottom:12px;}

/* PRODUCTION LIST */
.prod-list-row{display:grid;grid-template-columns:1fr 1fr 100px 40px;gap:10px;padding:8px 0;align-items:center;}
.prod-list-row input,.prod-list-row select{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;padding:8px 10px;outline:none;font-family:'DM Sans',sans-serif;width:100%;}
.prod-list-row .rm-btn{background:var(--red-bg);color:var(--red);border:1px solid rgba(255,107,107,0.2);border-radius:8px;cursor:pointer;padding:6px;font-size:14px;}
.prod-list-row .rm-btn:hover{background:rgba(255,107,107,0.2);}
.prod-list-hdr{display:grid;grid-template-columns:1fr 1fr 100px 40px;gap:10px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:8px;}

/* LOG */
.log-item{display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid var(--border);transition:background 0.1s;}
.log-item:hover{background:var(--bg3);}
.log-item:last-child{border-bottom:none;}
.log-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.log-dot.add,.log-dot.scan-add{background:var(--green);}
.log-dot.print,.log-dot.scan-sub{background:var(--red);}
.log-dot.update-add{background:var(--accent);}
.log-dot.update-sub{background:var(--amber);}
.log-type{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;width:90px;flex-shrink:0;}
.log-type.add,.log-type.scan-add{color:var(--green);}
.log-type.print,.log-type.scan-sub{color:var(--red);}
.log-type.update-add{color:var(--accent);}
.log-type.update-sub{color:var(--amber);}
.log-detail{flex:1;font-size:13px;color:var(--text2);}
.log-detail b{color:var(--text);font-weight:500;}
.log-user{font-size:11px;color:var(--text3);margin-right:12px;}
.log-time{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;white-space:nowrap;}

/* MIN STOCK */
.min-row{display:grid;grid-template-columns:1fr 80px 100px 110px;gap:10px;padding:11px 20px;border-bottom:1px solid var(--border);align-items:center;}
.min-row:last-child{border-bottom:none;}
.min-row:hover{background:var(--bg3);}
.min-hdr{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;padding:8px 20px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr 80px 100px 110px;gap:10px;}
.min-input{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;padding:6px 10px;font-family:'DM Mono',monospace;text-align:center;outline:none;width:90px;}
.min-input:focus{border-color:var(--accent);}

/* TYPES */
.type-item{display:flex;align-items:center;padding:12px 20px;border-bottom:1px solid var(--border);gap:10px;transition:background 0.1s;}
.type-item:hover{background:var(--bg3);}
.type-item:last-child{border-bottom:none;}
.type-name{flex:1;font-size:14px;font-weight:500;}
.type-count{font-size:12px;color:var(--text3);background:var(--bg3);padding:2px 10px;border-radius:20px;margin-right:8px;}
.type-rename-input{flex:1;background:var(--bg3);border:1px solid var(--accent);border-radius:8px;color:var(--text);font-size:13px;padding:6px 10px;outline:none;font-family:'DM Sans',sans-serif;}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);z-index:100;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:28px;width:min(380px,calc(100vw - 24px));box-shadow:var(--shadow);animation:modalIn 0.2s ease;max-height:calc(100vh - 32px);overflow-y:auto;}
.modal-sm{width:340px;}
@keyframes modalIn{from{opacity:0;transform:scale(0.96) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
.modal-title{font-size:17px;font-weight:600;margin-bottom:4px;}
.modal-sub{font-size:13px;color:var(--text3);margin-bottom:20px;}
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:3px;gap:3px;margin-bottom:18px;}
.mode-btn{padding:8px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:none;background:transparent;color:var(--text3);transition:all 0.15s;font-family:'DM Sans',sans-serif;text-align:center;}
.mode-btn.active-add{background:var(--bg2);color:var(--green);box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.mode-btn.active-sub{background:var(--bg2);color:var(--red);box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.preview-pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border-radius:8px;padding:8px 12px;margin-top:10px;font-size:13px;font-family:'DM Mono',monospace;color:var(--text2);min-height:36px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;}
.warn-box{background:var(--red-bg);border:1px solid rgba(255,107,107,0.15);border-radius:var(--radius);padding:12px 14px;font-size:13px;color:var(--red);margin-bottom:14px;}

/* USERS */
.users-section-title{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin:20px 0 10px;display:flex;align-items:center;gap:8px;}
.users-section-title::after{content:'';flex:1;height:1px;background:var(--border);}
.users-section-title:first-child{margin-top:0;}

/* ============ SCANNER VIEW ============ */
.scan-hero{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border2);border-radius:var(--radius-lg);padding:24px;margin-bottom:18px;position:relative;overflow:hidden;}
.scan-hero.mode-add{border-left:4px solid var(--green);}
.scan-hero.mode-sub{border-left:4px solid var(--red);}
.scan-hero-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.scan-mode-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;}
.scan-mode-badge.add{background:var(--green-bg);color:var(--green);}
.scan-mode-badge.sub{background:var(--red-bg);color:var(--red);}
.scan-mode-badge::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.5s ease infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}

.scan-toggle{display:grid;grid-template-columns:1fr 1fr;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:3px;gap:3px;min-width:260px;}
.scan-toggle button{padding:10px;border:none;background:transparent;color:var(--text3);font-size:13px;font-weight:500;cursor:pointer;border-radius:8px;font-family:'DM Sans',sans-serif;transition:all 0.15s;}
.scan-toggle button.on-add{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(61,214,140,0.3);}
.scan-toggle button.on-sub{background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(255,107,107,0.3);}

.scan-input-area{margin-top:18px;position:relative;}
.scan-input{width:100%;background:var(--bg);border:2px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:18px;padding:16px 20px;font-family:'DM Mono',monospace;outline:none;transition:all 0.15s;letter-spacing:0.05em;}
.scan-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(108,143,255,0.15);}
.scan-input-hint{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--text3);pointer-events:none;display:flex;align-items:center;gap:6px;}
.scan-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.2s ease infinite;}

.scan-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;}
.scan-stat{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;}
.scan-stat-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px;}
.scan-stat-value{font-size:24px;font-weight:600;font-family:'DM Mono',monospace;}

.scan-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}

.scan-breakdown{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:18px;max-height:340px;overflow-y:auto;}
.scan-breakdown-hdr{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;position:sticky;top:0;background:var(--bg2);z-index:2;}
.scan-break-row{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--border);animation:fadeIn 0.2s ease;}
.scan-break-row:last-child{border-bottom:none;}
.scan-break-name{flex:1;font-size:13px;font-weight:500;}
.scan-break-size{font-family:'DM Mono',monospace;font-size:12px;color:var(--text2);background:var(--bg3);padding:2px 8px;border-radius:6px;}
.scan-break-count{font-family:'DM Mono',monospace;font-size:16px;font-weight:600;color:var(--accent);min-width:40px;text-align:right;}

.recent-scan{display:flex;align-items:center;gap:10px;padding:8px 20px;border-bottom:1px solid var(--border);font-size:13px;animation:slideIn 0.2s ease;}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
.recent-scan:last-child{border-bottom:none;}
.recent-scan-code{font-family:'DM Mono',monospace;font-size:12px;color:var(--text3);}
.recent-scan-name{flex:1;}
.recent-scan-time{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);}

.empty-scan{text-align:center;padding:48px 20px;color:var(--text3);}
.empty-scan-icon{font-size:40px;margin-bottom:12px;opacity:0.3;}

/* flash effect for successful scan */
.flash-success{animation:flashGreen 0.4s ease;}
.flash-error{animation:flashRed 0.4s ease;}
@keyframes flashGreen{0%{background:var(--bg);}40%{background:rgba(61,214,140,0.2);border-color:var(--green);}100%{background:var(--bg);}}
@keyframes flashRed{0%{background:var(--bg);}40%{background:rgba(255,107,107,0.2);border-color:var(--red);}100%{background:var(--bg);}}

/* worker perf */
.worker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.worker-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;position:relative;}
.worker-card-rank{position:absolute;top:14px;right:14px;font-size:11px;font-weight:600;color:var(--text3);font-family:'DM Mono',monospace;}
.worker-card-rank.gold{color:#fbbf24;}
.worker-card-rank.silver{color:#cbd5e1;}
.worker-card-rank.bronze{color:#d97706;}
.worker-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#a78bfa);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;margin-bottom:10px;}
.worker-name{font-size:14px;font-weight:600;margin-bottom:2px;}
.worker-email{font-size:11px;color:var(--text3);margin-bottom:14px;font-family:'DM Mono',monospace;}
.worker-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.worker-stat{background:var(--bg3);border-radius:8px;padding:10px;}
.worker-stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;}
.worker-stat-value{font-size:18px;font-weight:600;font-family:'DM Mono',monospace;}
.worker-stat-value.add{color:var(--green);}
.worker-stat-value.sub{color:var(--red);}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;padding:12px 18px;border-radius:var(--radius);font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:all 0.25s;z-index:999;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow);transform:translateY(8px);max-width:480px;word-break:break-word;line-height:1.4;}
.toast.show{opacity:1;transform:translateY(0);}
.toast.success{background:#1a2e24;color:var(--green);border:1px solid rgba(61,214,140,0.2);}
.toast.error{background:#2e1a1a;color:var(--red);border:1px solid rgba(255,107,107,0.2);}

/* LOADER */
.loader{display:flex;align-items:center;justify-content:center;height:120px;color:var(--text3);font-size:13px;gap:8px;}
.spinner{width:16px;height:16px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.empty-state{text-align:center;padding:48px;color:var(--text3);font-size:13px;}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px;}

/* ============ PIECE-LEVEL BARCODES ============ */
.piece-pill{background:rgba(108,143,255,0.12);color:var(--accent);padding:2px 8px;border-radius:6px;font-family:'DM Mono',monospace;font-size:11px;border:1px solid rgba(108,143,255,0.2);}
.piece-status-avail{background:var(--green-bg);color:var(--green);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.piece-status-used{background:var(--red-bg);color:var(--red);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.piece-status-gen{background:var(--amber-bg);color:var(--amber);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}

.gen-preview{background:var(--bg3);border:1px dashed var(--border2);border-radius:var(--radius);padding:20px;text-align:center;margin-top:14px;}
.gen-preview-sample{display:inline-block;padding:12px 20px;background:var(--bg);border:1px solid var(--border2);border-radius:8px;margin-top:10px;}
.gen-preview-code{font-family:'DM Mono',monospace;font-size:15px;color:var(--accent);letter-spacing:0.08em;}

.batch-list{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);margin-top:16px;max-height:320px;overflow-y:auto;}
.batch-row{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-bottom:1px solid var(--border);font-size:13px;}
.batch-row:last-child{border-bottom:none;}
.batch-row:hover{background:var(--bg3);}

/* Print labels view — 4x6 thermal, 3 QR codes per page */
.print-view{position:fixed;inset:0;background:#ddd;color:#000;z-index:200;overflow-y:auto;padding:20px;display:none;}
.print-view.open{display:block;}
.print-toolbar{position:sticky;top:0;background:#fff;padding:10px 16px;border-bottom:2px solid #000;display:flex;gap:10px;align-items:center;flex-wrap:wrap;z-index:5;margin:-20px -20px 20px -20px;}
.print-toolbar button{font-family:'DM Sans',sans-serif;font-size:13px;padding:6px 12px;border:1px solid #333;background:#fff;color:#000;cursor:pointer;border-radius:6px;}
.print-toolbar button.primary{background:#000;color:#fff;}

.qr-pages{display:flex;flex-direction:column;align-items:center;gap:16px;}
.qr-page{width:4in;height:6in;background:#fff;box-sizing:border-box;page-break-after:always;break-after:page;display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(0,0,0,0.15);}
.qr-page:last-child{page-break-after:auto;break-after:auto;}
.qr-slot{flex:0 0 2in;height:2in;display:flex;flex-direction:row;align-items:center;padding:0 0.2in;box-sizing:border-box;border-bottom:1px dotted #999;}
.qr-slot:last-child{border-bottom:none;}
.qr-slot-img{width:1.5in;height:1.5in;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.qr-slot-img canvas,.qr-slot-img img{width:1.5in !important;height:1.5in !important;display:block;}
.qr-slot-text{flex:1;padding-left:0.15in;display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#000;}
.qr-slot-product{font-size:11pt;font-weight:700;line-height:1.2;margin-bottom:4pt;word-break:break-word;}
.qr-slot-size{font-size:10pt;line-height:1.2;margin-bottom:4pt;}
.qr-slot-code{font-family:'Courier New',monospace;font-size:8pt;line-height:1.2;word-break:break-all;}

@media print {
  html,body{margin:0 !important;padding:0 !important;background:#fff !important;height:auto !important;}
  body > *:not(.print-view){display:none !important;}
  .print-toolbar{display:none !important;}
  .print-view{display:block !important;position:static !important;padding:0 !important;margin:0 !important;background:#fff !important;overflow:visible !important;width:auto !important;height:auto !important;}
  .qr-pages{display:block !important;gap:0 !important;font-size:0 !important;line-height:0 !important;}
  .qr-page:first-child,.qr-page-small:first-child,.qr-page-tag:first-child{page-break-before:avoid !important;break-before:avoid !important;}
  .qr-page{display:block !important;position:relative;box-shadow:none !important;margin:0 !important;width:4in;height:6in;overflow:hidden;page-break-after:always;break-after:page;page-break-inside:avoid;break-inside:avoid;}
  .qr-page:last-child{page-break-after:auto;break-after:auto;}
  .qr-slot{display:flex !important;page-break-inside:avoid;break-inside:avoid;}
  .qr-page-small{display:flex !important;box-shadow:none !important;margin:0 !important;width:60mm;height:40mm;overflow:hidden;page-break-after:always;break-after:page;page-break-inside:avoid;break-inside:avoid;}
  .qr-page-small:last-child{page-break-after:auto;break-after:auto;}
  .qr-page-tag{display:flex !important;box-shadow:none !important;margin:0 !important;width:38mm;height:70mm;overflow:hidden;page-break-after:always;break-after:page;page-break-inside:avoid;break-inside:avoid;}
  .qr-page-tag:last-child{page-break-after:auto;break-after:auto;}
}

/* 60x40 mm single-label format */
.qr-pages-small{display:flex;flex-direction:column;align-items:center;gap:10px;}
.qr-page-small{width:60mm;height:40mm;background:#fff;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:1mm 1.5mm;box-shadow:0 2px 6px rgba(0,0,0,0.15);page-break-after:always;break-after:page;overflow:hidden;}
.qr-page-small:last-child{page-break-after:auto;break-after:auto;}
.qr-small-img{width:36mm;height:36mm;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.qr-small-img canvas,.qr-small-img img{width:36mm !important;height:36mm !important;display:block;}
.qr-small-text{flex:1;padding-left:2mm;display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#000;min-width:0;}
.qr-small-product{font-size:10pt;font-weight:700;line-height:1.15;margin-bottom:1.2mm;word-break:break-word;}
.qr-small-size{font-size:9pt;line-height:1.15;margin-bottom:1.2mm;}
.qr-small-code{font-family:'Courier New',monospace;font-size:7pt;line-height:1.15;word-break:break-all;}

/* 38x70 mm vertical hang-tag with JNORSS logo */
.qr-pages-tag{display:flex;flex-direction:column;align-items:center;gap:10px;}
.qr-page-tag{width:38mm;height:70mm;background:#fff;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2mm 1.5mm;box-shadow:0 2px 6px rgba(0,0,0,0.15);page-break-after:always;break-after:page;overflow:hidden;color:#000;}
.qr-page-tag:last-child{page-break-after:auto;break-after:auto;}
.qr-tag-logo{width:30mm;height:9mm;display:flex;align-items:center;justify-content:center;margin-bottom:1mm;}
.qr-tag-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.qr-tag-product{font-size:9pt;font-weight:700;line-height:1.15;text-align:center;margin-bottom:0.8mm;word-break:break-word;width:100%;}
.qr-tag-size{font-size:8pt;line-height:1.15;text-align:center;margin-bottom:1.2mm;}
.qr-tag-img{width:30mm;height:30mm;display:flex;align-items:center;justify-content:center;margin-bottom:1.2mm;}
.qr-tag-img canvas,.qr-tag-img img{width:30mm !important;height:30mm !important;display:block;}
.qr-tag-code{font-family:'Courier New',monospace;font-size:6.5pt;line-height:1.1;text-align:center;word-break:break-all;width:100%;}

/* PRODUCTION LIST PRINT */
.prodlist-print{position:fixed;inset:0;background:#fff;color:#000;z-index:200;overflow-y:auto;padding:20px;display:none;font-family:Arial,sans-serif;}
.prodlist-print.open{display:block;}
.prodlist-print h1{font-size:22px;margin-bottom:6px;}
.prodlist-print table{width:100%;border-collapse:collapse;margin-top:12px;}
.prodlist-print th,.prodlist-print td{border:1px solid #333;padding:8px 10px;text-align:left;color:#000;font-size:13px;}
.prodlist-print th{background:#eee;}
@media print { .prodlist-print-toolbar{display:none !important;} }

/* CAMERA SCANNER */
.cam-modal{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:200;display:none;align-items:center;justify-content:center;padding:16px;}
.cam-modal.open{display:flex;}
.cam-box{background:var(--bg2);border-radius:var(--radius-lg);max-width:520px;width:100%;overflow:hidden;border:1px solid var(--border);}
.cam-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.cam-hdr-title{font-size:14px;font-weight:600;}
.cam-close{background:var(--bg3);border:1px solid var(--border);color:var(--text);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:16px;}
#camera-reader{width:100%;background:#000;}
#camera-reader video{width:100% !important;height:auto !important;display:block;}
.cam-status{padding:10px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--text3);display:flex;align-items:center;gap:10px;}
.cam-status .scan-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.2s infinite;}
.cam-flash{position:absolute;inset:0;background:rgba(61,214,140,0.4);opacity:0;pointer-events:none;transition:opacity 0.3s;}
.cam-flash.flash{opacity:1;transition:opacity 0.05s;}
.cam-toolbar{padding:10px 18px;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border);}
.cam-btn-icon{padding:8px 12px !important;font-size:13px !important;}

/* MOBILE MENU TOGGLE */
.menu-toggle{display:none;background:var(--bg3);border:1px solid var(--border);color:var(--text);width:38px;height:38px;border-radius:8px;cursor:pointer;font-size:20px;align-items:center;justify-content:center;}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9;}
.sidebar-overlay.open{display:block;}

/* MOBILE RESPONSIVE */
@media (max-width: 900px) {
  .menu-toggle{display:inline-flex;}
  .sidebar{transform:translateX(-100%);transition:transform 0.25s ease;width:260px;z-index:11;}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;width:100%;min-width:0;max-width:100vw;}
  .app-layout{min-width:0;}
  .topbar{padding:0 14px;height:56px;}
  .topbar-title{font-size:15px;}
  .content{padding:14px;max-width:100%;overflow-x:hidden;}
  .stats-row{grid-template-columns:repeat(2,1fr);gap:10px;}
  .stat-card{padding:12px 14px;}
  .stat-value{font-size:22px;}
  .stat-icon{font-size:18px;top:12px;right:12px;}
  .form-grid{grid-template-columns:1fr !important;gap:10px;}
  .form-grid.g3,.form-grid.g5{grid-template-columns:1fr !important;}
  .panel{padding:14px !important;}
  .table-wrap{border-radius:var(--radius);max-width:100%;overflow:hidden;}
  .table-header{padding:10px 12px;gap:8px;}
  .table-header > div[style*="margin-left"]{margin-left:0 !important;width:100%;}
  .search-box{margin-left:0;flex:1;min-width:0;}
  .search-box input{width:100%;min-width:0;}
  /* Horizontal scroll for tables */
  #inv-table-wrap,#pieces-list,#log-list,#types-list{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
  #bulk-edit-table{min-width:520px;}
  table{font-size:12px;min-width:560px;}
  thead th,tbody td{padding:8px 10px;}
  /* Scan view stack */
  .scan-hero{padding:14px !important;}
  .scan-hero-row{flex-direction:column;align-items:flex-start !important;gap:10px;}
  .scan-hero-row > div:last-child{margin-left:0 !important;width:100%;}
  .scan-toggle{width:100%;display:flex;}
  .scan-toggle button{flex:1;}
  .scan-stats{grid-template-columns:repeat(3,1fr) !important;gap:8px;}
  .scan-stat{padding:10px;}
  .scan-stat-value{font-size:18px;}
  .scan-actions{flex-direction:column;align-items:stretch !important;gap:8px;}
  .scan-actions .btn{width:100%;justify-content:center;}
  .scan-actions label{margin-left:0 !important;justify-content:center;}
  #view-scanner > div[style*='grid-template-columns']{grid-template-columns:1fr !important;}
  .scan-input{font-size:16px !important;padding:14px 16px !important;padding-right:16px !important;}
  .scan-input-hint{display:none !important;}
  /* Modals full screen on mobile */
  .modal{max-width:calc(100vw - 16px) !important;width:calc(100vw - 16px);margin:8px;padding:18px !important;max-height:calc(100vh - 16px);overflow-y:auto;box-sizing:border-box;}
  .modal-overlay{padding:0;}
  .modal-actions{flex-wrap:wrap;}
  .modal-actions .btn{flex:1;min-width:100px;}
  /* Sidebar user section */
  .user-info{font-size:12px;}
  /* Pagination wrap */
  #pc-pagination{flex-direction:column;align-items:stretch !important;gap:10px;}
  #pc-pagination > div{justify-content:center;}
  /* Camera modal full width on mobile */
  .cam-box{max-width:calc(100vw - 16px);}
  .cam-toolbar{flex-direction:column;align-items:stretch;}
  .cam-toolbar .btn,.cam-toolbar #cam-zoom-wrap{width:100%;margin-left:0 !important;}
  /* Force any inline-styled wide elements to wrap */
  *[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
  *[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important;}
}
@media (max-width: 480px) {
  .stats-row{grid-template-columns:1fr 1fr;}
  .scan-stats{grid-template-columns:1fr 1fr !important;}
  .scan-stats .scan-stat:nth-child(3){grid-column:1/-1;}
  .auth-card{padding:24px 22px;}
  .topbar{padding:0 10px;}
  .content{padding:10px;}
}

.size-check{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:var(--bg2);cursor:pointer;font-size:13px;color:var(--text2);user-select:none;transition:all 0.15s;}
.size-check:hover{border-color:var(--accent);color:var(--text);}
.size-check input[type="checkbox"]{margin:0;cursor:pointer;accent-color:var(--accent);}
.size-check:has(input:checked){background:rgba(108,143,255,0.12);border-color:var(--accent);color:var(--text);font-weight:500;}

tr.row-hidden{opacity:0.55;}
tr.row-hidden td{color:var(--text3);}
tr.row-hidden .size-pill{opacity:0.7;}
.hidden-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,0.06);color:var(--text3);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;vertical-align:middle;border:1px solid var(--border);}

.row-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;white-space:nowrap;}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:8px;background:transparent;border:1px solid transparent;color:var(--text3);cursor:pointer;transition:all 0.15s;}
.icon-btn svg{width:16px;height:16px;display:block;}
.icon-btn:hover{background:var(--bg3);color:var(--text);border-color:var(--border);}
.icon-btn.is-on{background:rgba(108,143,255,0.12);color:var(--accent);border-color:rgba(108,143,255,0.3);}
.icon-btn.is-on:hover{background:rgba(108,143,255,0.18);}

.hidden-toggle{align-items:center;gap:6px;}
.hidden-toggle svg{width:14px;height:14px;}
.hidden-toggle .pill-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:rgba(108,143,255,0.14);color:var(--accent);font-size:11px;font-weight:600;font-family:'DM Mono',monospace;}
.hidden-toggle.is-active{background:rgba(108,143,255,0.12);border-color:rgba(108,143,255,0.3);color:var(--accent);}

.inv-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--bg2);}
.inv-filters select{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;padding:7px 12px;outline:none;font-family:'DM Sans',sans-serif;cursor:pointer;min-width:140px;}
.inv-filters select:hover{border-color:var(--border2);}
.inv-filters select:focus{border-color:var(--accent);}

th.th-sortable{cursor:pointer;user-select:none;transition:color 0.15s;}
th.th-sortable:hover{color:var(--accent);}
th.th-sortable .sort-arrow{display:inline-block;margin-left:4px;color:var(--accent);font-size:12px;font-weight:700;}
th.th-sortable .sort-arrow.sort-arrow-dim{color:var(--text3);font-weight:400;opacity:0.5;}
th.th-sortable:hover .sort-arrow.sort-arrow-dim{opacity:1;}

/* ═══ SUPPLY CHAIN ═══ */
#parties-list,#yarn-stock-list,#yarn-purchases-list,#yarn-types-list,#ledger-content,#knit-orders-list,#knit-stock-list,#knit-types-list,#dye-orders-list,#dye-stock-list,#dye-colors-list,#fin-orders-list,#fin-stock-list,#fabric-purchases-list,#cut-orders-list,#cut-stock-list,#cut-masters-list,#cut-scan-log,#stitch-orders-list,#stitch-masters-list,#stitch-scan-log{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.data-table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px;}
.data-table th{text-align:left;padding:10px 14px;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--border);background:var(--bg2);position:sticky;top:0;z-index:1;}
.data-table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.data-table tr:hover td{background:rgba(108,143,255,0.04);}
.data-table .tar,.data-table th.tar{text-align:right;}

.empty{text-align:center;padding:42px 20px;color:var(--text3);font-size:13px;}

.party-type-badge{display:inline-block;padding:2px 9px;border-radius:20px;background:var(--bg3);color:var(--text2);font-size:11px;font-weight:500;}
.badge-muted{display:inline-block;padding:1px 7px;border-radius:20px;background:var(--bg3);color:var(--text3);font-size:10px;font-weight:500;margin-left:6px;}
.ref-badge{display:inline-block;padding:2px 9px;border-radius:6px;background:rgba(108,143,255,0.12);color:var(--accent);font-size:11px;font-weight:600;}

.red{color:var(--red);} .green{color:var(--green);}

.yarn-tabs,.knit-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:0;}
.yarn-tab,.knit-tab{background:transparent;border:none;color:var(--text3);padding:10px 16px;font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.15s;font-family:inherit;}
.yarn-tab:hover,.knit-tab:hover{color:var(--text);}
.yarn-tab.active,.knit-tab.active{color:var(--accent);border-bottom-color:var(--accent);}

.status-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;}
.status-open{background:rgba(108,143,255,0.14);color:var(--accent);}
.status-closed{background:var(--bg3);color:var(--text3);}
.amber{color:var(--amber);}

.inp-sm{background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;padding:6px 8px;font-family:inherit;outline:none;width:100%;}
.inp-sm:focus{border-color:var(--accent);}
.inp-sm.tar{text-align:right;font-family:'DM Mono',monospace;}

.form-grid.g2{grid-template-columns:1fr 1fr;}
.form-grid.g3{grid-template-columns:1fr 1fr 1fr;}
.fg-app textarea{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:13px;padding:8px 12px;font-family:'DM Sans',sans-serif;outline:none;resize:vertical;min-height:42px;line-height:1.4;}
.fg-app textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,143,255,0.1);}
.form-grid.g2{gap:10px 14px;}
.form-grid.g3{gap:10px 14px;}

@media (max-width:900px){
  .form-grid.g2,.form-grid.g3{grid-template-columns:1fr !important;}
  .data-table{font-size:12px;}
  .data-table th,.data-table td{padding:8px 10px;}
}

/* ─── Purchase Order print layout ─── */
.po-doc{font-family:'DM Sans',sans-serif;color:var(--text);padding:8px 4px;}
.po-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--border);padding-bottom:14px;margin-bottom:18px;gap:20px;}
.po-co-name{font-size:24px;font-weight:700;letter-spacing:0.06em;}
.po-co-sub{font-size:12px;color:var(--text3);margin-top:2px;}
.po-meta{font-size:13px;line-height:1.7;text-align:right;}
.po-parties{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.po-party-block{border:1px solid var(--border);border-radius:8px;padding:12px;font-size:13px;line-height:1.55;}
.po-party-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;}
.po-party-name{font-size:15px;font-weight:600;margin-bottom:4px;}
.po-items{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:13px;}
.po-items th,.po-items td{border:1px solid var(--border);padding:8px 10px;}
.po-items thead th{background:var(--bg2);font-weight:600;text-align:left;}
.po-totals{display:flex;justify-content:flex-end;}
.po-totals table{font-size:13px;line-height:1.7;border-collapse:collapse;}
.po-totals td{padding:4px 14px;}
.po-totals td:last-child{text-align:right;font-family:'DM Mono',monospace;min-width:120px;}
.po-totals tr.po-grand td{border-top:2px solid var(--border);font-size:15px;font-weight:700;padding-top:8px;}
.po-notes{margin-top:18px;font-size:12px;color:var(--text2);background:var(--bg2);padding:10px;border-radius:6px;}
.po-signs{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:60px;font-size:12px;color:var(--text3);}
.po-sign-block{text-align:center;}
.po-sign-line{border-top:1px solid var(--text);margin-bottom:6px;height:36px;}

@media print{
  body:has(#po-print-modal.open) * {visibility:hidden;}
  body:has(#po-print-modal.open) #po-print-modal,
  body:has(#po-print-modal.open) #po-print-modal *{visibility:visible;}
  #po-print-modal.open{position:absolute;inset:0;display:flex !important;background:white !important;backdrop-filter:none !important;padding:0;align-items:flex-start !important;}
  #po-print-modal.open .modal{position:static;background:white !important;color:#000 !important;border:none !important;box-shadow:none !important;max-width:100% !important;width:100% !important;max-height:none !important;overflow:visible !important;padding:24px !important;animation:none !important;}
  #po-print-modal.open .po-doc, #po-print-modal.open .po-doc *{color:#000 !important;}
  #po-print-modal.open .po-header{border-bottom-color:#000 !important;}
  #po-print-modal.open .po-party-block, #po-print-modal.open .po-items th, #po-print-modal.open .po-items td{border-color:#000 !important;background:transparent !important;}
  #po-print-modal.open .po-items thead th{background:#f0f0f0 !important;}
  #po-print-modal.open .po-notes{background:#f6f6f6 !important;}
  #po-print-modal.open .po-totals tr.po-grand td{border-top-color:#000 !important;}
  #po-print-modal.open .po-sign-line{border-top-color:#000 !important;}
  .po-no-print{display:none !important;}
  @page{margin:14mm;}
}

/* ─── Fabric Usage tab (Cutting → 📐 Fabric Usage) ─── */
#cut-usage-list{padding:14px 16px 16px;}
.fu-hint{font-size:12px;color:var(--text2);margin-bottom:4px;}
.fu-meta{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;}
.fu-list{display:flex;flex-direction:column;gap:8px;}
.fu-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 14px;}
.fu-product-search{margin-left:0;min-width:260px;}
.fu-product-search input{width:220px;}
.fu-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;transition:border-color 0.15s;}
.fu-card:hover{border-color:var(--border2);}
.fu-card-head{display:flex;align-items:center;gap:10px;}
.fu-card-title{font-weight:600;font-size:14px;color:var(--text);}
.fu-empty-tag{font-size:11px;color:var(--text3);font-style:italic;}
.fu-add-btn{margin-left:auto;background:transparent;border:1px dashed var(--border2);color:var(--text2);font-size:12px;padding:5px 12px;border-radius:6px;cursor:pointer;font-family:inherit;transition:all 0.15s;}
.fu-add-btn:hover{border-color:var(--accent);border-style:solid;color:var(--accent);background:rgba(108,143,255,0.06);}
.fu-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.fu-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border2);border-radius:999px;padding:4px 4px 4px 10px;font-size:12px;color:var(--text);}
.fu-chip-fabric{font-weight:500;}
.fu-chip-color{display:inline-flex;align-items:center;font-size:12px;color:var(--text2);}
.fu-chip-qty{font-family:'DM Mono',monospace;font-weight:600;font-size:11px;color:var(--accent);background:rgba(108,143,255,0.10);padding:3px 9px;border-radius:999px;}
.fu-chip-x{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:11px;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:all 0.15s;}
.fu-chip-x:hover{background:var(--red-bg);color:var(--red);}
.fu-add-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);}
.fu-add-form .inp-sm{width:auto;}
.fu-fabric-combo{position:relative;min-width:220px;flex:1 1 240px;}
.fu-f-grey{min-width:160px;width:100% !important;}
.fu-fabric-suggestions{display:none;position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;box-shadow:var(--shadow-soft);max-height:240px;overflow-y:auto;padding:4px;}
.fu-fabric-suggestions.open{display:block;}
.fu-fabric-option{width:100%;border:0;background:transparent;color:var(--text);padding:9px 10px;border-radius:6px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;font-family:inherit;font-size:13px;}
.fu-fabric-option:hover{background:rgba(92,200,255,0.10);}
.fu-fabric-option small{color:var(--text3);font-family:'DM Mono',monospace;font-size:11px;white-space:nowrap;}
.fu-fabric-empty{padding:10px;color:var(--text3);font-size:12px;text-align:center;}
.fu-f-color{min-width:130px;}
.fu-f-qty{width:90px;}
.fu-f-unit{width:72px;}
.fu-f-notes{flex:1;min-width:140px;}
.fu-f-suffix{font-size:11px;color:var(--text3);margin:0 4px 0 -2px;}
.fu-size-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.fu-size-row{background:rgba(255,255,255,0.025);border:1px solid var(--border);border-radius:8px;padding:10px 12px;}
.fu-size-head{display:flex;align-items:center;gap:8px;min-height:30px;}
.fu-size-head .fu-add-btn{margin-left:auto;}
.fu-chip-legacy{opacity:0.72;border-style:dashed;}
.fu-legacy-note{font-size:11px;color:var(--amber);background:var(--amber-bg);border:1px solid rgba(255,200,87,0.18);border-radius:8px;padding:8px 10px;}

/* ═══════════════════════════════════════════════════════════════════
   Premium UI refresh
   Keeps the existing HTML/JS intact while upgrading the app shell,
   data density, forms, tables, scanner, modals, and mobile polish.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#090b10;
  --bg2:#11141b;
  --bg3:#171b24;
  --bg4:#202633;
  --surface:#121720;
  --surface2:#171d27;
  --surface3:#1d2531;
  --border:rgba(228,233,242,0.08);
  --border2:rgba(228,233,242,0.14);
  --text:#f4f7fb;
  --text2:#a8b0bf;
  --text3:#697386;
  --accent:#5cc8ff;
  --accent2:#2aa8e6;
  --accent-soft:rgba(92,200,255,0.11);
  --green:#40d99a;
  --green-bg:rgba(64,217,154,0.12);
  --red:#ff6f7a;
  --red-bg:rgba(255,111,122,0.12);
  --amber:#ffc857;
  --amber-bg:rgba(255,200,87,0.13);
  --violet:#9d8cff;
  --radius:8px;
  --radius-lg:8px;
  --shadow:0 18px 60px rgba(0,0,0,0.42);
  --shadow-soft:0 10px 28px rgba(0,0,0,0.28);
}

html{background:var(--bg);}
body{
  background:
    linear-gradient(180deg,#0b0f16 0%,#090b10 42%,#080a0e 100%);
  color:var(--text);
  font-size:14px;
  line-height:1.45;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

button,input,select,textarea{letter-spacing:0;}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-item:focus-visible{
  outline:2px solid rgba(92,200,255,0.72);
  outline-offset:2px;
}

/* Auth */
.auth-wrap{
  align-items:center;
  background:
    linear-gradient(135deg,rgba(92,200,255,0.08),transparent 32%),
    linear-gradient(315deg,rgba(255,200,87,0.06),transparent 28%),
    var(--bg);
}
.auth-card{
  max-width:460px;
  width:min(460px,calc(100vw - 40px));
  padding:34px;
  background:rgba(17,20,27,0.92);
  border:1px solid rgba(228,233,242,0.12);
  box-shadow:0 24px 80px rgba(0,0,0,0.48);
}
.auth-logo{margin-bottom:24px;}
.auth-logo-icon,.logo-icon{
  background:linear-gradient(135deg,#5cc8ff,#40d99a);
  color:#061015;
  font-weight:700;
  box-shadow:0 10px 24px rgba(92,200,255,0.20);
}
.auth-logo-text,.logo-text{letter-spacing:0;font-weight:700;}
.auth-logo-sub,.logo-sub{color:var(--text3);letter-spacing:0.04em;}
.auth-tabs{
  padding:4px;
  gap:4px;
  background:rgba(255,255,255,0.035);
  border:1px solid var(--border);
}
.auth-tab{
  padding:10px;
  border-radius:7px;
  color:var(--text3);
}
.auth-tab.active{
  background:linear-gradient(180deg,var(--surface3),var(--surface2));
  color:var(--text);
  box-shadow:0 8px 18px rgba(0,0,0,0.24);
}
.fg label,.fg-app label{
  color:#7f8898;
  letter-spacing:0.08em;
}
.fg input,.fg-app input,.fg-app select,.fg-app textarea,.inp-sm,
.prod-list-row input,.prod-list-row select,.alert-toolbar select,.inv-filters select{
  background:rgba(255,255,255,0.045);
  border-color:rgba(228,233,242,0.11);
  border-radius:8px;
  color:var(--text);
}
.fg input:hover,.fg-app input:hover,.fg-app select:hover,.fg-app textarea:hover,.inp-sm:hover,
.prod-list-row input:hover,.prod-list-row select:hover,.alert-toolbar select:hover,.inv-filters select:hover{
  border-color:rgba(228,233,242,0.20);
}
.fg input:focus,.fg-app input:focus,.fg-app select:focus,.fg-app textarea:focus,.inp-sm:focus,
.prod-list-row input:focus,.prod-list-row select:focus,.alert-toolbar select:focus,.inv-filters select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(92,200,255,0.13);
}

/* Buttons */
.btn{
  min-height:34px;
  border-radius:8px;
  font-weight:650;
  letter-spacing:0;
  box-shadow:none;
}
.btn-primary{
  background:linear-gradient(180deg,#67d0ff,#30aeea);
  color:#061015;
  border:1px solid rgba(255,255,255,0.16);
}
.btn-primary:hover{background:linear-gradient(180deg,#7bd8ff,#3ab9f4);transform:translateY(-1px);}
.btn-secondary{
  background:rgba(255,255,255,0.055);
  border-color:rgba(228,233,242,0.12);
}
.btn-secondary:hover,.btn-ghost:hover{background:rgba(255,255,255,0.085);border-color:rgba(228,233,242,0.20);}
.btn-ghost{background:rgba(255,255,255,0.02);border-color:rgba(228,233,242,0.10);}
.btn-success{background:linear-gradient(180deg,#49dea2,#25b879);color:#061015;}
.btn-danger-solid{background:linear-gradient(180deg,#ff7f89,#e24d5a);}
.btn-danger{background:rgba(255,111,122,0.11);border-color:rgba(255,111,122,0.22);}
.btn-sm{min-height:30px;padding:5px 11px;}
.btn-lg{min-height:44px;}

/* App shell */
.app-layout{background:transparent;}
.sidebar{
  width:264px;
  background:rgba(12,15,21,0.92);
  border-right:1px solid rgba(228,233,242,0.08);
  backdrop-filter:blur(16px);
}
.sidebar-logo{
  padding:22px 18px 18px;
  border-bottom:1px solid rgba(228,233,242,0.08);
}
.logo-icon{width:38px;height:38px;border-radius:8px;}
.logo-text{font-size:16px;}
.sidebar-nav{padding:14px 10px;}
.nav-section{
  padding:12px 10px 6px;
  color:#6d7688;
  letter-spacing:0.12em;
}
.nav-item{
  min-height:38px;
  padding:9px 11px;
  border-radius:8px;
  color:var(--text2);
  font-weight:560;
  margin-bottom:3px;
  border:1px solid transparent;
}
.nav-item:hover{
  background:rgba(255,255,255,0.045);
  border-color:rgba(228,233,242,0.07);
  color:var(--text);
}
.nav-item.active{
  background:linear-gradient(90deg,rgba(92,200,255,0.16),rgba(64,217,154,0.08));
  border-color:rgba(92,200,255,0.26);
  color:#dff6ff;
  box-shadow:inset 3px 0 0 var(--accent);
}
.nav-icon{width:17px;height:17px;opacity:0.8;}
.nav-badge{background:var(--red);color:#180407;box-shadow:0 0 0 3px rgba(255,111,122,0.12);}
.sidebar-user{
  padding:16px;
  border-top:1px solid rgba(228,233,242,0.08);
  background:rgba(255,255,255,0.018);
}
.user-avatar{
  background:linear-gradient(135deg,#5cc8ff,#40d99a);
  color:#061015;
}
.btn-logout{border-radius:8px;background:rgba(255,255,255,0.045);}

.main{
  margin-left:264px;
  min-width:0;
}
.topbar{
  min-height:72px;
  height:72px;
  padding:0 34px;
  background:rgba(9,11,16,0.82);
  border-bottom:1px solid rgba(228,233,242,0.08);
  backdrop-filter:blur(14px);
}
.topbar-title{font-size:20px;font-weight:750;}
.topbar-sub,#topbar-sub{font-size:12px;color:var(--text3);}
.content{
  width:100%;
  max-width:1480px;
  padding:28px 34px 40px;
}

/* Panels and repeated surfaces */
.panel,.table-wrap,.scan-hero,.scan-breakdown,.worker-card,.batch-list,.alert-card,.modal{
  background:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.025));
  border-color:rgba(228,233,242,0.10);
  box-shadow:0 1px 0 rgba(255,255,255,0.03),var(--shadow-soft);
}
.panel,.table-wrap,.scan-hero,.scan-breakdown,.worker-card,.batch-list{
  border-radius:8px;
}
.panel{
  padding:20px;
  margin-bottom:18px;
}
.panel-title{font-size:15px;font-weight:750;}
.panel-sub{color:var(--text3);}

/* Stats */
.stats-row{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:20px;
}
.stat-card{
  min-height:120px;
  padding:18px;
  background:linear-gradient(180deg,rgba(255,255,255,0.055),rgba(255,255,255,0.026));
  border-color:rgba(228,233,242,0.11);
  border-radius:8px;
  box-shadow:0 12px 34px rgba(0,0,0,0.22);
}
.stat-card::before{height:3px;opacity:0.95;}
.stat-card.clickable:hover{
  transform:translateY(-3px);
  border-color:rgba(92,200,255,0.30);
  box-shadow:0 18px 44px rgba(0,0,0,0.32);
}
.stat-label{font-size:10px;color:#778294;margin-bottom:10px;}
.stat-value{font-size:31px;font-weight:750;}
.stat-icon{
  right:18px;
  top:18px;
  font-size:24px;
  opacity:0.18;
}

/* Tables */
.table-header{
  min-height:64px;
  padding:14px 18px;
  background:rgba(255,255,255,0.018);
  border-bottom-color:rgba(228,233,242,0.08);
}
.table-header-title{font-size:15px;font-weight:760;}
.tcount{
  background:rgba(92,200,255,0.10);
  color:#bfefff;
  border:1px solid rgba(92,200,255,0.16);
  padding:3px 9px;
}
.search-box{
  min-height:36px;
  background:rgba(255,255,255,0.045);
  border-color:rgba(228,233,242,0.10);
  border-radius:8px;
}
.search-box input{width:190px;}
.inv-filters{
  padding:12px 18px;
  background:rgba(0,0,0,0.10);
  border-bottom-color:rgba(228,233,242,0.08);
}
table,.data-table{font-variant-numeric:tabular-nums;}
thead th,.data-table th{
  padding:12px 18px;
  background:rgba(255,255,255,0.018);
  border-bottom-color:rgba(228,233,242,0.09);
  color:#7e8899;
  letter-spacing:0.08em;
}
tbody td,.data-table td{
  padding:13px 18px;
  border-bottom-color:rgba(228,233,242,0.07);
}
tbody tr:hover,.data-table tr:hover td{
  background:rgba(92,200,255,0.055);
}
.size-pill,.barcode-pill,.party-type-badge,.badge-muted,.ref-badge{
  border-radius:999px;
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(228,233,242,0.08);
}
.badge,.role-badge,.status-badge,.piece-status-avail,.piece-status-used,.piece-status-gen{
  border-radius:999px;
  border:1px solid currentColor;
  border-color:color-mix(in srgb,currentColor 30%,transparent);
}
.role-admin{background:rgba(92,200,255,0.13);color:var(--accent);}
.role-manager{background:rgba(64,217,154,0.13);color:var(--green);}

/* Tabs */
.yarn-tabs,.knit-tabs{
  gap:8px;
  padding:0 2px;
  border-bottom-color:rgba(228,233,242,0.08);
}
.yarn-tab,.knit-tab{
  min-height:40px;
  padding:9px 13px;
  border-radius:8px 8px 0 0;
  font-weight:650;
}
.yarn-tab:hover,.knit-tab:hover{background:rgba(255,255,255,0.035);}
.yarn-tab.active,.knit-tab.active{
  color:#dff6ff;
  background:rgba(92,200,255,0.10);
}

/* Scanner */
.scan-hero{
  padding:22px;
  overflow:hidden;
}
.scan-hero.mode-add{border-left:none;box-shadow:inset 0 3px 0 var(--green),var(--shadow-soft);}
.scan-hero.mode-sub{border-left:none;box-shadow:inset 0 3px 0 var(--red),var(--shadow-soft);}
.scan-mode-badge{
  border:1px solid currentColor;
  border-color:color-mix(in srgb,currentColor 26%,transparent);
}
.scan-toggle{
  background:rgba(255,255,255,0.045);
  border-color:rgba(228,233,242,0.10);
}
.scan-toggle button{border-radius:7px;font-weight:700;}
.scan-toggle button.on-add{color:#061015;background:linear-gradient(180deg,#49dea2,#27bd7e);}
.scan-toggle button.on-sub{background:linear-gradient(180deg,#ff7f89,#e24d5a);}
.scan-input{
  background:#07090d;
  border-color:rgba(228,233,242,0.14);
  border-radius:8px;
  font-size:19px;
  letter-spacing:0;
}
.scan-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(92,200,255,0.14);}
.scan-stat{
  background:rgba(255,255,255,0.045);
  border-color:rgba(228,233,242,0.09);
  border-radius:8px;
}
.scan-breakdown-hdr{
  background:rgba(17,20,27,0.96);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(228,233,242,0.08);
}
.scan-break-row,.recent-scan{border-bottom-color:rgba(228,233,242,0.07);}
.empty-scan,.empty-state,.empty{color:#788294;}

/* Modals and overlays */
.modal-overlay{
  background:rgba(0,0,0,0.68);
  backdrop-filter:blur(10px);
}
.modal{
  border-radius:8px;
  padding:24px;
  background:linear-gradient(180deg,#151a23,#10141b);
}
.modal-title{font-size:18px;font-weight:760;}
.modal-sub{color:var(--text3);}
.mode-toggle{
  background:rgba(255,255,255,0.045);
  border-color:rgba(228,233,242,0.10);
}
.mode-btn{border-radius:7px;font-weight:700;}
.preview-pill{background:rgba(255,255,255,0.045);border:1px solid rgba(228,233,242,0.08);}

/* Alerts, production rows, workers */
.alert-card{
  margin-bottom:10px;
  border-left:none;
}
.alert-card.is-out{box-shadow:inset 3px 0 0 var(--red),var(--shadow-soft);}
.alert-card.is-low{box-shadow:inset 3px 0 0 var(--amber),var(--shadow-soft);}
.alert-icon{border-radius:8px;border:1px solid rgba(228,233,242,0.08);}
.prod-list-hdr,.min-hdr{border-bottom-color:rgba(228,233,242,0.08);}
.prod-list-row,.min-row,.type-item,.log-item,.batch-row{border-bottom-color:rgba(228,233,242,0.07);}
.worker-card{padding:20px;}
.worker-avatar{
  background:linear-gradient(135deg,#5cc8ff,#40d99a);
  color:#061015;
}
.worker-stat{
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(228,233,242,0.08);
}

/* Toast and camera */
.toast{
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.38);
}
.toast.success{background:#10261d;border-color:rgba(64,217,154,0.26);}
.toast.error{background:#2b1115;border-color:rgba(255,111,122,0.30);}
.cam-box{
  border-radius:8px;
  background:#10141b;
  border-color:rgba(228,233,242,0.12);
  box-shadow:var(--shadow);
}
.cam-close,.menu-toggle,.icon-btn{
  border-radius:8px;
}

/* Mobile */
@media (max-width: 1100px){
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 900px){
  .sidebar{width:280px;}
  .main{margin-left:0;}
  .topbar{height:64px;min-height:64px;padding:0 14px;}
  .content{padding:14px 12px 28px;}
  .table-header,.inv-filters{padding:12px;}
  .stat-card{min-height:104px;}
  .search-box{width:100%;}
  .search-box input{width:100%;}
}
@media (max-width: 520px){
  .stats-row{grid-template-columns:1fr;}
  .stat-card{min-height:96px;}
  .auth-card{padding:24px 20px;}
  .modal{padding:18px;}
  .btn{min-height:36px;}
}

/* ═══════════════════════════════════════════════════════════════════
   Full mobile responsiveness pass
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bd1:var(--border);
  --text1:var(--text);
}

img,svg,canvas,video{max-width:100%;}
select,input,textarea,button{max-width:100%;}

@media (max-width: 760px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  #auth-screen,
  #pending-screen,
  #app-screen,
  .auth-wrap,
  .app-layout{
    width:100%;
    max-width:100vw;
    overflow-x:hidden;
  }

  .auth-card{
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
  }

  body{font-size:13px;}

  .main,.content,.view,.panel,.table-wrap{
    min-width:0;
    max-width:100%;
  }

  .topbar{
    position:sticky;
    top:0;
    height:auto;
    min-height:60px;
    padding:9px 12px;
  }

  .topbar > div{
    min-width:0;
    flex:1;
  }

  .topbar-title{
    font-size:17px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #topbar-sub{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:calc(100vw - 76px);
  }

  .menu-toggle{
    width:40px;
    height:40px;
    flex:0 0 40px;
  }

  .content{
    padding:12px;
  }

  .panel{
    padding:14px;
    margin-bottom:12px;
  }

  .panel-title{
    font-size:15px;
    line-height:1.25;
  }

  .panel-sub{
    font-size:12px;
    line-height:1.45;
    margin-bottom:14px;
  }

  .stats-row{
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:12px;
  }

  .stat-card{
    min-height:94px;
    padding:13px;
  }

  .stat-label{
    font-size:9px;
    line-height:1.25;
    padding-right:24px;
  }

  .stat-value{
    font-size:23px;
    line-height:1.1;
    word-break:break-word;
  }

  .stat-icon{
    top:12px;
    right:12px;
    font-size:18px;
  }

  .table-header{
    display:flex;
    align-items:stretch;
    gap:8px;
    padding:12px;
  }

  .table-header-title{
    width:auto;
    min-width:0;
    line-height:30px;
  }

  .table-header .tcount{
    align-self:center;
  }

  .table-header > [style*="margin-left:auto"],
  .table-header > [style*="margin-left: auto"],
  .scan-actions > [style*="margin-left:auto"],
  .scan-hero-row > [style*="margin-left:auto"],
  [style*="margin-left:auto"]{
    margin-left:0 !important;
  }

  .table-header input[type="text"],
  .table-header input[type="date"],
  .table-header select,
  .table-header .search-box,
  .alert-toolbar select,
  .inv-filters select,
  #parties-search,
  #ledger-party-select,
  #worker-period,
  #worker-custom-range,
  #worker-custom-range input,
  #worker-custom-range button{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .table-header button,
  .alert-toolbar button,
  .inv-filters button{
    width:100% !important;
    justify-content:center;
  }

  .search-box{
    flex:1 1 100%;
    margin-left:0;
  }

  .search-box input{
    width:100% !important;
  }

  .inv-filters,.alert-toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:12px;
  }

  .table-wrap{
    overflow:hidden;
  }

  #inv-table-wrap,
  #pieces-list,
  #log-list,
  #types-list,
  #users-list,
  #parties-list,
  #yarn-stock-list,
  #yarn-purchases-list,
  #yarn-types-list,
  #ledger-content,
  #knit-orders-list,
  #knit-stock-list,
  #knit-types-list,
  #dye-orders-list,
  #dye-stock-list,
  #dye-colors-list,
  #fin-orders-list,
  #fin-stock-list,
  #cut-orders-list,
  #cut-stock-list,
  #cut-fabrics-list,
  #cut-usage-list,
  #cut-masters-list,
  #cut-rates-list,
  #cut-hisaab-list,
  #cut-scan-log,
  #stitch-orders-list,
  #stitch-masters-list,
  #stitch-scan-log{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }

  table,.data-table{
    min-width:620px;
  }

  thead th,.data-table th{
    padding:10px;
    font-size:10px;
  }

  tbody td,.data-table td{
    padding:10px;
    font-size:12px;
  }

  .data-table .btn,
  tbody td .btn{
    width:auto !important;
    min-height:28px;
    padding:5px 9px;
  }

  .form-grid,
  .form-grid.g2,
  .form-grid.g3,
  .form-grid.g4,
  .form-grid.g5{
    display:grid;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .fg-app input,
  .fg-app select,
  .fg-app textarea,
  .inp-sm{
    width:100% !important;
    min-width:0 !important;
  }

  .panel > div[style*="display:flex"],
  .view > div[style*="display:flex"],
  .modal div[style*="display:flex"]{
    max-width:100%;
  }

  .panel > div[style*="display:flex"] > .btn,
  .view > div[style*="display:flex"] > .btn,
  .modal-actions .btn{
    flex:1 1 auto;
  }

  .panel > .btn,
  .panel > div > .btn-primary[style*="width:auto"],
  .panel > div > .btn-secondary[style*="width:auto"],
  .panel > div > .btn-danger[style*="width:auto"]{
    width:100% !important;
    justify-content:center;
  }

  .prod-list-hdr{
    display:none;
  }

  .prod-list-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:10px;
    margin-bottom:8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:rgba(255,255,255,0.03);
  }

  .prod-list-row .rm-btn{
    width:100%;
    min-height:34px;
  }

  .min-hdr{
    display:none;
  }

  .min-row{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:12px;
  }

  .min-row > span:first-child{
    grid-column:1/-1;
  }

  .min-input{
    width:100%;
  }

  .type-item{
    flex-wrap:wrap;
    gap:8px;
    padding:12px;
  }

  .type-name{
    flex:1 1 100%;
  }

  .type-count{
    margin-right:0;
  }

  .type-item .btn{
    flex:1 1 auto;
    justify-content:center;
  }

  .log-item{
    display:grid;
    grid-template-columns:10px 82px 1fr;
    gap:8px;
    align-items:start;
    padding:12px;
  }

  .log-detail{
    grid-column:2/-1;
  }

  .log-user,.log-time{
    grid-column:2/-1;
    margin-right:0;
    white-space:normal;
  }

  .scan-hero{
    padding:14px;
  }

  .scan-hero-row{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .scan-toggle{
    width:100%;
    min-width:0;
  }

  .scan-input{
    padding:14px !important;
    font-size:15px !important;
  }

  .scan-input-hint{
    display:none;
  }

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

  .scan-stats .scan-stat:last-child{
    grid-column:1/-1;
  }

  .scan-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .scan-actions .btn,
  .scan-hero .btn{
    width:100% !important;
    justify-content:center;
  }

  #view-scanner > div[style*="grid-template-columns"]{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .scan-break-row,.recent-scan{
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px 10px;
  }

  .recent-scan-code,.recent-scan-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .recent-scan-time{
    grid-column:1/-1;
  }

  .worker-grid{
    grid-template-columns:1fr;
  }

  .worker-stats{
    grid-template-columns:1fr 1fr;
  }

  .yarn-tabs,.knit-tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    overflow-x:auto;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }

  .yarn-tab,.knit-tab{
    flex:0 0 auto;
    white-space:nowrap;
    border-radius:8px;
    border:1px solid var(--border);
    min-height:38px;
  }

  .yarn-tab.active,.knit-tab.active{
    border-color:rgba(92,200,255,0.28);
  }

  .fu-card-head,
  .fu-size-head,
  .fu-toolbar,
  .fu-add-form{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .fu-add-btn,
  .fu-size-head .fu-add-btn,
  .fu-product-search,
  .fu-product-search input,
  .fu-fabric-combo,
  .fu-add-form .btn,
  .fu-add-form .inp-sm{
    width:100%;
  }

  .modal-overlay{
    align-items:flex-start;
    justify-content:center;
    padding:8px;
    overflow-y:auto;
  }

  .modal{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    max-height:none;
    overflow:visible;
  }

  .modal > div[style*="overflow:hidden"],
  .modal > div[style*="overflow-y:auto"],
  .modal div[style*="overflow-y:auto"]{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .modal table{
    min-width:680px;
  }

  .modal-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .modal-actions .btn{
    width:100% !important;
    justify-content:center;
  }

  .cam-modal{
    padding:8px;
    align-items:flex-start;
    overflow-y:auto;
  }

  .cam-box{
    max-width:100%;
    margin-top:0;
  }

  .cam-hdr,.cam-status,.cam-toolbar{
    padding:12px;
  }

  .cam-toolbar{
    display:grid;
    grid-template-columns:1fr;
  }

  .cam-toolbar .btn,
  #cam-zoom-wrap{
    width:100% !important;
    margin-left:0 !important;
  }

  .toast{
    left:12px;
    right:12px;
    bottom:12px;
    max-width:none;
  }

  .po-parties,.po-signs{
    grid-template-columns:1fr;
    gap:12px;
  }

  .po-header{
    flex-direction:column;
  }

  .po-meta{
    text-align:left;
  }
}

@media (max-width: 430px){
  .content{
    padding:10px;
  }

  .stats-row{
    grid-template-columns:1fr;
  }

  .stat-card{
    min-height:88px;
  }

  .stat-value{
    font-size:25px;
  }

  .auth-wrap{
    padding:12px;
  }

  .auth-card{
    padding:20px;
  }

  .auth-tabs{
    margin-bottom:18px;
  }

  .sidebar{
    width:min(86vw,300px);
  }

  .table-header{
    display:grid;
    grid-template-columns:1fr;
  }

  .table-header .tcount{
    width:max-content;
  }

  .btn{
    width:100%;
    justify-content:center;
  }

  tbody td .btn,
  .data-table .btn,
  .icon-btn,
  .mode-btn,
  .auth-tab,
  .scan-toggle button{
    width:auto;
  }

  .mode-toggle,.scan-toggle{
    grid-template-columns:1fr;
  }

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

  .scan-stat:last-child{
    grid-column:auto;
  }

  .min-row{
    grid-template-columns:1fr;
  }

  .log-item{
    grid-template-columns:10px 1fr;
  }

  .log-type,.log-detail,.log-user,.log-time{
    grid-column:2/-1;
  }
}