/* === RESET & VARIABLES === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --sidebar-bg: #0f1729; --sidebar-w: 240px; --header-h: 64px;
  --accent: #d4a053; --accent-light: #f0d9a8; --accent-glow: rgba(212,160,83,0.15);
  --bg: #f2f1ed; --card: #ffffff; --card-border: #e8e6e1;
  --text-primary: #1a1a2e; --text-secondary: #6b7280; --text-muted: #9ca3af;
  --success: #34d399; --success-bg: #ecfdf5; --warning: #fbbf24; --warning-bg: #fffbeb;
  --danger: #f87171; --danger-bg: #fef2f2; --info: #60a5fa; --info-bg: #eff6ff;
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
html { font-size: 14px; }
body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei','PingFang SC','Noto Sans SC','Hiragino Sans GB',sans-serif; background: var(--bg); color: var(--text-primary); overflow-x: hidden; height: 100vh; max-width: 100vw; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }

/* === LOGIN === */
.login-wrapper { display:flex; align-items:center; justify-content:center; width:100vw; height:100vh; background:linear-gradient(135deg,#0f1729 0%,#1a2744 50%,#0f1729 100%); position:fixed; inset:0; overflow:hidden; z-index:9999; }
.login-wrapper::before { content:''; position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(212,160,83,0.08) 0%,transparent 70%); top:-100px; right:-100px; }
.login-wrapper::after { content:''; position:absolute; width:400px; height:400px; background:radial-gradient(circle,rgba(96,165,250,0.06) 0%,transparent 70%); bottom:-80px; left:-80px; }
.login-box { background:var(--card); border-radius:16px; padding:44px 40px; width:400px; max-width:92vw; box-shadow:0 20px 60px rgba(0,0,0,0.3); position:relative; z-index:1; }
.login-logo { display:flex; align-items:center; margin-bottom:32px; justify-content:center; flex-direction:column; gap:8px; }
.login-logo img { max-width:240px; height:auto; }
.login-logo span { font-size:18px; font-weight:700; color:var(--text-primary); }
.login-box h2 { font-size:15px; font-weight:500; color:var(--text-secondary); text-align:center; margin-bottom:28px; }
.login-alert { background:var(--danger-bg); color:#dc2626; border:1px solid #fecaca; border-radius:8px; padding:10px 14px; font-size:12.5px; margin-bottom:16px; display:none; text-align:center; }
.login-alert.show { display:block; animation:shake 0.4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.lockout-bar { background:var(--warning-bg); color:#92400e; border:1px solid #fde68a; border-radius:8px; padding:10px 14px; font-size:12.5px; margin-bottom:16px; display:none; text-align:center; }
.lockout-bar.show { display:block; }

/* === LAYOUT === */
.app { display: flex; height: 100vh; overflow-x: hidden; max-width: 100vw; }
.sidebar { width:var(--sidebar-w); min-width:var(--sidebar-w); background:var(--sidebar-bg); display:flex; flex-direction:column; z-index:100; transition:transform var(--transition); }
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.header { height:var(--header-h); background:var(--card); border-bottom:1px solid var(--card-border); display:flex; align-items:center; justify-content:space-between; padding:0 28px; flex-shrink:0; }
.content { flex:1; overflow-y:auto; overflow-x:hidden; padding:24px 28px; }

/* === SIDEBAR === */
.sidebar-brand { padding:16px 16px; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; align-items:center; gap:8px; }
.sidebar-brand img { max-width:180px; height:auto; filter:brightness(0) invert(1); }
.sidebar-brand span { font-weight:600; font-size:13px; color:rgba(255,255,255,0.7); letter-spacing:0.5px; }
.sidebar-nav { flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.nav-section { padding:14px 14px 6px; font-size:10.5px; font-weight:600; color:rgba(255,255,255,0.25); text-transform:uppercase; letter-spacing:1.5px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:8px; color:rgba(255,255,255,0.5); cursor:pointer; transition:all var(--transition); font-size:13.5px; font-weight:400; position:relative; user-select:none; }
.nav-item:hover { color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.05); }
.nav-item.active { color:var(--accent-light); background:rgba(212,160,83,0.1); font-weight:500; }
.nav-item.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:20px; background:var(--accent); border-radius:0 3px 3px 0; }
.nav-item svg { width:19px; height:19px; flex-shrink:0; opacity:0.8; }
.nav-item.active svg { opacity:1; }
.nav-item.disabled { opacity:0.3; cursor:not-allowed; pointer-events:none; }
.sidebar-footer { padding:16px 20px; border-top:1px solid rgba(255,255,255,0.06); color:rgba(255,255,255,0.3); font-size:11px; }

/* === HEADER === */
.header-left { display:flex; align-items:center; gap:16px; }
.header-title { font-size:16px; font-weight:600; color:var(--text-primary); }
.header-breadcrumb { font-size:12px; color:var(--text-muted); }
.header-right { display:flex; align-items:center; gap:16px; }
.header-time { font-family:'Cascadia Code','Consolas','Liberation Mono','Courier New',monospace; font-size:12px; color:var(--text-secondary); }
.header-user { display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 10px; border-radius:8px; transition:background var(--transition); }
.header-user:hover { background:var(--bg); }
.header-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#c08530); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:600; }
.header-user-info { text-align:right; }
.header-user-name { font-size:13px; font-weight:600; }
.header-user-role { font-size:11px; color:var(--text-muted); }
.burger { display:none; background:none; border:none; cursor:pointer; padding:4px; }
.burger svg { width:22px; height:22px; color:var(--text-primary); }

/* === CARDS === */
.card { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:box-shadow var(--transition); }
.card:hover { box-shadow:var(--shadow-md); }
.card-header { padding:18px 22px; border-bottom:1px solid var(--card-border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.card-header h3 { font-size:14px; font-weight:600; }
.card-body { padding:22px; }

/* === STAT CARDS === */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; }
.stat-card { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:all var(--transition); cursor:pointer; }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-card .stat-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:20px; }
.stat-card .stat-value { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif; font-size:28px; font-weight:700; line-height:1; margin-bottom:6px; }
.stat-card .stat-label { font-size:12.5px; color:var(--text-secondary); }
.stat-card .stat-stripe { position:absolute; top:0; left:0; right:0; height:3px; }
.stat-card.c1 .stat-icon { background:var(--info-bg); color:var(--info); } .stat-card.c1 .stat-stripe { background:var(--info); }
.stat-card.c2 .stat-icon { background:var(--success-bg); color:var(--success); } .stat-card.c2 .stat-stripe { background:var(--success); }
.stat-card.c3 .stat-icon { background:var(--warning-bg); color:var(--warning); } .stat-card.c3 .stat-stripe { background:var(--warning); }
.stat-card.c4 .stat-icon { background:var(--danger-bg); color:var(--danger); } .stat-card.c4 .stat-stripe { background:var(--danger); }
.stat-card.c5 .stat-icon { background:#f3e8ff; color:#a855f7; } .stat-card.c5 .stat-stripe { background:#a855f7; }
.stats-grid-5 { grid-template-columns:repeat(5,1fr); }

/* === DASHBOARD & TABLE === */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px; }
.dash-full { grid-column:1/-1; }
.chart-container { width:100%; height:300px; }
.table-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.table-toolbar-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.table-toolbar-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.search-box { display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--card-border); border-radius:8px; padding:0 12px; height:36px; transition:border-color var(--transition); }
.search-box:focus-within { border-color:var(--accent); }
.search-box svg { width:15px; height:15px; color:var(--text-muted); flex-shrink:0; }
.search-box input { border:none; background:none; outline:none; width:180px; font-size:13px; color:var(--text-primary); }
.filter-select { height:36px; padding:0 28px 0 12px; border:1px solid var(--card-border); border-radius:8px; background:var(--bg); font-size:13px; color:var(--text-primary); cursor:pointer; outline:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.filter-select:focus { border-color:var(--accent); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th { padding:12px 16px; text-align:left; font-weight:600; font-size:12px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; border-bottom:2px solid var(--card-border); white-space:nowrap; user-select:none; }
tbody td { padding:12px 16px; font-size:13px; border-bottom:1px solid #f3f4f6; }
tbody tr { transition:background var(--transition); }
tbody tr:hover { background:#fafaf8; }

/* === BADGES === */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:500; }
.badge::before { content:''; width:6px; height:6px; border-radius:50%; }
.badge-success { background:var(--success-bg); color:#059669; } .badge-success::before { background:#34d399; }
.badge-warning { background:var(--warning-bg); color:#d97706; } .badge-warning::before { background:#fbbf24; }
.badge-danger { background:var(--danger-bg); color:#dc2626; } .badge-danger::before { background:#f87171; }
.badge-info { background:var(--info-bg); color:#2563eb; } .badge-info::before { background:#60a5fa; }
.badge-gray { background:#f3f4f6; color:#6b7280; } .badge-gray::before { background:#9ca3af; }
.badge-purple { background:#f3e8ff; color:#7c3aed; } .badge-purple::before { background:#a855f7; }

/* === BUTTONS === */
.btn { display:inline-flex; align-items:center; gap:7px; padding:0 16px; height:36px; border-radius:8px; border:none; font-size:13px; font-weight:500; cursor:pointer; transition:all var(--transition); white-space:nowrap; }
.btn svg { width:15px; height:15px; }
.btn-primary { background:linear-gradient(135deg,var(--accent),#c08530); color:#fff; box-shadow:0 2px 8px rgba(212,160,83,0.3); }
.btn-primary:hover { box-shadow:0 4px 14px rgba(212,160,83,0.4); transform:translateY(-1px); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.btn-outline { background:var(--card); color:var(--text-primary); border:1px solid var(--card-border); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm { height:30px; padding:0 10px; font-size:12px; }
.btn-danger-sm { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; height:30px; padding:0 10px; font-size:12px; background:none; border:1px solid var(--danger); color:var(--danger); border-radius:6px; cursor:pointer; transition:all var(--transition); }
.btn-danger-sm svg { width:14px; height:14px; }
.btn-danger-sm:hover { background:var(--danger); color:#fff; }
.btn-success-sm { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; height:30px; padding:0 10px; font-size:12px; background:none; border:1px solid var(--success); color:#059669; border-radius:6px; cursor:pointer; transition:all var(--transition); }
.btn-success-sm svg { width:14px; height:14px; }
.btn-success-sm:hover { background:var(--success); color:#fff; }
.btn-purple-sm { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; height:30px; padding:0 10px; font-size:12px; background:none; border:1px solid #a855f7; color:#7c3aed; border-radius:6px; cursor:pointer; transition:all var(--transition); }
.btn-purple-sm svg { width:14px; height:14px; }
.btn-purple-sm:hover { background:#a855f7; color:#fff; }
.action-btns { display:flex; gap:6px; }
.btn-logout { background:none; border:1px solid var(--card-border); color:var(--text-secondary); height:32px; padding:0 12px; border-radius:8px; font-size:12px; cursor:pointer; transition:all var(--transition); display:flex; align-items:center; gap:5px; }
.btn-logout:hover { border-color:var(--danger); color:var(--danger); }

/* === MODAL === */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,41,0.45); backdrop-filter:blur(4px); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all 0.3s ease; }
.modal-overlay.open { opacity:1; visibility:visible; }
.modal { background:var(--card); border-radius:14px; width:560px; max-width:92vw; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-lg); transform:translateY(20px) scale(0.97); transition:transform 0.3s ease; }
.modal-overlay.open .modal { transform:translateY(0) scale(1); }
.modal-header { padding:20px 24px; border-bottom:1px solid var(--card-border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:16px; font-weight:600; }
.modal-close { width:30px; height:30px; border-radius:8px; border:none; background:var(--bg); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all var(--transition); }
.modal-close:hover { background:var(--danger-bg); color:var(--danger); }
.modal-body { padding:24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--card-border); display:flex; justify-content:flex-end; gap:10px; }

/* === FORM === */
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:12.5px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea { width:100%; height:38px; padding:0 12px; border:1px solid var(--card-border); border-radius:8px; background:var(--bg); font-size:13px; color:var(--text-primary); outline:none; transition:border-color var(--transition); }
.form-group textarea { height:80px; padding:10px 12px; resize:vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--accent); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* === ACTIVITY === */
.activity-list { display:flex; flex-direction:column; }
.activity-item { display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid #f3f4f6; font-size:13px; }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.activity-dot.assign { background:var(--info); } .activity-dot.return { background:var(--success); } .activity-dot.repair { background:var(--warning); } .activity-dot.warehouse { background:#a855f7; }
.activity-text { flex:1; line-height:1.6; }
.activity-time { color:var(--text-muted); font-size:11.5px; white-space:nowrap; margin-top:2px; }

/* === EMPLOYEE DETAIL === */
.emp-detail-header { display:flex; align-items:center; gap:18px; padding:20px 0; margin-bottom:16px; border-bottom:1px solid var(--card-border); }
.emp-avatar { width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg,var(--accent),#c08530); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; font-weight:600; }
.emp-info h4 { font-size:17px; font-weight:600; margin-bottom:4px; }
.emp-info p { font-size:12.5px; color:var(--text-secondary); }

/* === DEPT GROUP === */
.dept-group { margin-bottom:24px; }
.dept-group-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--bg); border-radius:8px 8px 0 0; border:1px solid var(--card-border); cursor:pointer; user-select:none; }
.dept-group-header h4 { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.dept-group-header .dept-count { font-size:12px; color:var(--text-muted); font-weight:400; }
.dept-group-body { border:1px solid var(--card-border); border-top:none; border-radius:0 0 8px 8px; overflow:hidden; }

/* === WAREHOUSE CARDS === */
.wh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin-bottom:24px; }
.wh-card { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); transition:all var(--transition); position:relative; overflow:hidden; }
.wh-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.wh-card .wh-stripe { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),#60a5fa); }
.wh-card h4 { font-size:15px; font-weight:600; margin-bottom:4px; }
.wh-card .wh-loc { font-size:12px; color:var(--text-secondary); margin-bottom:14px; }
.wh-stats { display:flex; gap:16px; }
.wh-stat { text-align:center; }
.wh-stat .num { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif; font-size:22px; font-weight:700; }
.wh-stat .lbl { font-size:11px; color:var(--text-muted); }
.warehouse-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.warehouse-card { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); transition:all var(--transition); }
.warehouse-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.wh-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.wh-info { margin-bottom:14px; }
.wh-row { display:flex; gap:8px; font-size:13px; padding:4px 0; }
.wh-label { color:var(--text-secondary); min-width:52px; }
.wh-stat-val { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif; font-size:20px; font-weight:700; }
.wh-stat-lbl { font-size:11px; color:var(--text-muted); }
.wh-actions { display:flex; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--card-border); }

/* === TOAST === */
.toast-container { position:fixed; top:20px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--card); border:1px solid var(--card-border); border-radius:10px; padding:14px 20px; box-shadow:var(--shadow-lg); font-size:13px; display:flex; align-items:center; gap:10px; animation:toastIn 0.35s ease; min-width:260px; }
.toast.out { animation:toastOut 0.3s ease forwards; }
.toast-icon { font-size:18px; }
@keyframes toastIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toastOut { from{transform:translateX(0);opacity:1} to{transform:translateX(100%);opacity:0} }

/* === PAGES === */
.page { display:none; animation:fadeIn 0.35s ease; }
.page.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* === RESPONSIVE === */
@media(min-width:1281px){
  .content { padding:28px 36px; }
  .stats-grid { gap:20px; }
  .dash-grid { gap:20px; }
  .card-body { padding:24px; }
  .table-wrap table { font-size:13.5px; }
  thead th { padding:14px 18px; }
  tbody td { padding:14px 18px; }
  .wh-grid { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
}
@media(max-width:1024px){
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid-5 { grid-template-columns:repeat(3,1fr); }
  .dash-grid { grid-template-columns:1fr; }
  .header-time { display:none; }
  .chart-container { height:260px; }
}
.sidebar-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4);
  z-index:199; opacity:0; transition:opacity 0.3s ease; pointer-events:none;
}
.sidebar-backdrop.show { display:block; opacity:1; pointer-events:auto; }
@media(max-width:768px){
  html { font-size:13.5px; }
  .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); z-index:200; width:270px; min-width:270px; }
  .sidebar.open { transform:translateX(0); }
  .burger { display:flex; }
  .header { padding:0 12px; height:56px; }
  .header-title { font-size:15px; }
  .header-breadcrumb { display:none; }
  .header-time { display:none; }
  .header-user-info { display:none; }
  .header-right { gap:8px; }
  .btn-logout span { display:none; }
  .header-avatar { width:30px; height:30px; font-size:12px; }
  .content { padding:12px; }
  .stats-grid, .stats-grid-5 { grid-template-columns:1fr 1fr !important; gap:10px; margin-bottom:16px; }
  .stat-card { padding:14px; }
  .stat-card .stat-value { font-size:22px; }
  .stat-card .stat-icon { width:34px; height:34px; margin-bottom:10px; font-size:16px; }
  .stat-card .stat-label { font-size:11.5px; }
  .dash-grid { grid-template-columns:1fr; gap:12px; margin-bottom:16px; }
  .chart-container { height:220px; }
  .card { border-radius:8px; }
  .card-header { padding:12px 14px; flex-direction:column; align-items:flex-start; gap:8px; }
  .card-header h3 { font-size:13.5px; }
  .card-body { padding:12px; }
  .table-toolbar { flex-direction:column; align-items:stretch; gap:10px; margin-bottom:14px; }
  .table-toolbar-left { flex-direction:column; gap:8px; }
  .table-toolbar-right { flex-direction:row; flex-wrap:wrap; gap:6px; }
  .table-toolbar-right .btn { flex:1; min-width:0; justify-content:center; font-size:12px; padding:0 8px; }
  .search-box { width:100%; }
  .search-box input { width:100%; }
  .filter-select { width:100%; }
  .table-toolbar .btn-primary { width:100%; justify-content:center; }
  .table-wrap { overflow-x:hidden; }
  table { display:block; width:100%; }
  thead { display:none; }
  tbody { display:block; width:100%; }
  tbody tr { display:flex; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid #f0f0f0; gap:4px 12px; align-items:center; }
  tbody td { display:inline-flex; align-items:center; padding:2px 0; font-size:12.5px; border-bottom:none; white-space:normal; word-break:break-all; }
  tbody td::before { content:attr(data-label); font-weight:600; color:var(--text-secondary); font-size:10.5px; margin-right:6px; white-space:nowrap; }
  tbody td:first-child { width:100%; font-weight:600; font-size:13px; }
  .action-btns { flex-wrap:wrap; gap:4px; width:100%; margin-top:4px; }
  .btn-sm, .btn-danger-sm, .btn-success-sm, .btn-purple-sm { height:28px; padding:0 8px; font-size:11px; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .modal { max-width:96vw; max-height:90vh; border-radius:12px; }
  .modal-header { padding:16px 18px; }
  .modal-header h3 { font-size:15px; }
  .modal-body { padding:16px; }
  .modal-footer { padding:14px 16px; flex-wrap:wrap; }
  .wh-grid { grid-template-columns:1fr; gap:12px; }
  .wh-card { padding:16px; }
  .wh-stat .num { font-size:18px; }
  .dept-group-header { padding:12px 14px; }
  .dept-group-header h4 { font-size:13px; }
  .activity-item { padding:10px 0; gap:10px; font-size:12.5px; }
  .activity-time { font-size:11px; }
  .emp-detail-header { gap:14px; padding:16px 0; }
  .emp-avatar { width:46px; height:46px; font-size:18px; border-radius:12px; }
  .emp-info h4 { font-size:15px; }
  .toast-container { top:10px; right:10px; left:10px; }
  .toast { min-width:auto; padding:12px 16px; font-size:12.5px; }
  .login-box { padding:28px 24px; }
  .login-logo img { max-width:200px; }
  .login-logo span { font-size:15px; }
  .login-box h2 { font-size:13.5px; margin-bottom:22px; }
  .warehouse-grid { grid-template-columns:1fr; gap:12px; }
  .warehouse-card { padding:16px; }
  .wh-stats { flex-wrap:wrap; gap:10px; }
  .dept-group .table-wrap table thead { display:none; }
  .dept-group .table-wrap table tbody tr { display:flex; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid #f0f0f0; gap:2px 10px; }
  .dept-group .table-wrap table tbody td { padding:1px 0; border-bottom:none; font-size:12.5px; }
}
@media(max-width:480px){
  .stats-grid, .stats-grid-5 { grid-template-columns:1fr 1fr !important; gap:8px; }
  .stat-card { padding:12px; }
  .stat-card .stat-value { font-size:20px; }
  .stat-card .stat-icon { width:30px; height:30px; margin-bottom:8px; font-size:14px; border-radius:8px; }
  .header { padding:0 10px; }
  .header-left { gap:8px; }
  .content { padding:8px; }
  .card-header { padding:10px 12px; }
  .card-body { padding:10px; }
  .chart-container { height:180px; }
  .btn { height:32px; font-size:12px; padding:0 10px; }
  .btn-primary { height:32px; }
  .table-toolbar-right .btn span { display:none; }
  .table-toolbar-right .btn { flex:0 0 auto; min-width:32px; padding:0 8px; }
  .badge { font-size:10.5px; padding:2px 8px; }
  .badge::before { width:5px; height:5px; }
  tbody tr { padding:10px 0; gap:2px 8px; }
  tbody td { font-size:12px; }
  tbody td:first-child { font-size:12.5px; }
  .modal { max-width:98vw; }
  .modal-header { padding:14px; }
  .modal-body { padding:14px; }
  .modal-footer { padding:12px 14px; }
  .modal-footer .btn { flex:1; justify-content:center; }
}

/* === SCAN PAGE === */
.scan-camera-area { width:100%; aspect-ratio:4/3; background:#000; border-radius:12px; overflow:hidden; position:relative; margin-bottom:16px; }
.scan-camera-area video { width:100%; height:100%; object-fit:cover; }
.scan-camera-area canvas { display:none; }
.scan-camera-area .scan-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.scan-camera-area .scan-frame { width:60%; aspect-ratio:1; border:2px solid rgba(212,160,83,0.8); border-radius:12px; box-shadow:0 0 0 9999px rgba(0,0,0,0.4); position:relative; }
.scan-camera-area .scan-frame::before,.scan-camera-area .scan-frame::after { content:''; position:absolute; width:20px; height:20px; border-color:#d4a053; border-style:solid; }
.scan-camera-area .scan-frame::before { top:-1px; left:-1px; border-width:3px 0 0 3px; border-radius:6px 0 0 0; }
.scan-camera-area .scan-frame::after { top:-1px; right:-1px; border-width:3px 3px 0 0; border-radius:0 6px 0 0; }
.scan-corner-bl,.scan-corner-br { position:absolute; width:20px; height:20px; border-color:#d4a053; border-style:solid; }
.scan-corner-bl { bottom:-1px; left:-1px; border-width:0 0 3px 3px; border-radius:0 0 0 6px; }
.scan-corner-br { bottom:-1px; right:-1px; border-width:0 3px 3px 0; border-radius:0 0 6px 0; }
.scan-camera-area .scan-line { position:absolute; left:10%; width:80%; height:2px; background:linear-gradient(90deg,transparent,#d4a053,transparent); animation:scanLine 2s ease-in-out infinite; }
@keyframes scanLine { 0%,100%{top:20%} 50%{top:78%} }
.scan-camera-area .scan-msg { color:#fff; font-size:13px; text-align:center; padding:40px 20px; line-height:1.8; }
.scan-switch-btn { position:absolute; bottom:12px; right:12px; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.3); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; backdrop-filter:blur(4px); }
.scan-result { animation:fadeIn 0.3s ease; }
.scan-device-card { background:var(--bg); border:1px solid var(--card-border); border-radius:12px; padding:20px; margin-bottom:16px; }
.scan-device-card .sdc-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--card-border); }
.scan-device-card .sdc-id { font-family:'Cascadia Code','Consolas','Liberation Mono','Courier New',monospace; font-size:12px; color:var(--text-secondary); background:var(--card); padding:3px 8px; border-radius:4px; border:1px solid var(--card-border); }
.scan-device-card .sdc-status { margin-left:auto; }
.scan-device-card .sdc-title { font-size:16px; font-weight:600; }
.scan-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.scan-info-item { padding:10px; background:var(--card); border-radius:8px; border:1px solid var(--card-border); }
.scan-info-item .sii-label { font-size:11px; color:var(--text-muted); margin-bottom:2px; }
.scan-info-item .sii-value { font-size:13px; font-weight:500; color:var(--text-primary); }
.scan-history { margin-top:16px; }
.scan-history h4 { font-size:13px; margin-bottom:10px; color:var(--text-secondary); }
.scan-history-item { padding:10px 12px; background:var(--card); border-radius:8px; border:1px solid var(--card-border); margin-bottom:8px; font-size:12px; line-height:1.7; }
.scan-history-item .shi-date { font-family:'Cascadia Code','Consolas','Liberation Mono','Courier New',monospace; color:var(--text-muted); }

/* === QR CODE LABEL PRINT === */
.barcode-grid { display:flex; flex-wrap:wrap; justify-content:flex-start; padding:0; margin:0; }
.barcode-label { width:40mm; height:40mm; box-sizing:border-box; border:0.5px dashed #ccc; padding:2mm 2mm; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; page-break-inside:avoid; }
.barcode-label canvas { width:24mm; height:24mm; image-rendering:pixelated; }
.barcode-devid { font-family:'Cascadia Code','Consolas','Liberation Mono','Courier New',monospace; font-size:8px; font-weight:600; letter-spacing:0.5px; margin-top:1mm; text-align:center; line-height:1; }
.barcode-info { font-size:7px; color:#333; text-align:center; margin-top:0.5mm; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* === PRINT RECEIPT === */
@media print {
  body * { visibility:hidden !important; }
  #printArea, #printArea * { visibility:visible !important; }
  #printArea { position:fixed; left:0; top:0; width:100%; height:100%; z-index:99999; background:#fff; padding:0; margin:0; overflow:visible; }
  #printArea.barcode-print-area { width:210mm; padding:3mm; height:auto; overflow:visible; }
  #printArea.barcode-print-area .barcode-label { border:0.5px dashed #bbb; }
  /* Single label mode for Bluetooth label printers */
  #printArea.single-label-print { width:auto; padding:0; }
  #printArea.single-label-print .barcode-grid { justify-content:center; }
  #printArea.single-label-print .barcode-label { border:none; margin:0; }
  @page { margin:0; }
}
#printArea { display:none; }
.receipt-page { width:100%; display:flex; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif; color:#000; font-size:12px; }
.receipt-half { width:50%; padding:16px 20px; box-sizing:border-box; position:relative; }
.receipt-half:first-child { border-right:1px dashed #aaa; }
.receipt-half::after { content:''; position:absolute; bottom:0; left:20px; right:20px; }
.receipt-title { text-align:center; font-size:16px; font-weight:700; margin-bottom:2px; letter-spacing:2px; }
.receipt-subtitle { text-align:center; font-size:11px; color:#888; margin-bottom:12px; }
.receipt-type { text-align:center; font-size:13px; font-weight:600; margin-bottom:10px; padding:4px 0; border-bottom:2px solid #333; border-top:2px solid #333; }
.receipt-info { margin-bottom:10px; }
.receipt-row { display:flex; padding:5px 0; border-bottom:1px dotted #ddd; font-size:12px; }
.receipt-row .rlabel { width:72px; color:#666; flex-shrink:0; }
.receipt-row .rvalue { flex:1; font-weight:500; }
.receipt-table { width:100%; border-collapse:collapse; margin:8px 0; font-size:11px; }
.receipt-table th { background:#f5f5f5; border:1px solid #ddd; padding:4px 6px; font-weight:600; text-align:left; }
.receipt-table td { border:1px solid #ddd; padding:4px 6px; }
.receipt-sign { display:flex; justify-content:space-between; margin-top:18px; font-size:11px; }
.receipt-sign div { width:45%; }
.receipt-sign .line { border-bottom:1px solid #333; height:28px; margin-top:4px; }
.receipt-no { text-align:right; font-family:'Cascadia Code','Consolas','Liberation Mono','Courier New',monospace; font-size:10px; color:#999; margin-bottom:6px; }
.receipt-copy { text-align:center; font-size:10px; color:#aaa; margin-top:8px; }