@import"https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap";.nav-item router-link{display:flex;align-items:center;gap:12px;width:100%;height:100%;color:inherit;text-decoration:none}.nav-item a{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;color:inherit;text-decoration:none;font-weight:500;border-radius:var(--radius-md);transition:var(--transition)}.nav-item a:hover{background-color:var(--primary-light);color:var(--primary)}.nav-item.active a{background-color:var(--primary);color:#fff!important}.tab-container[data-v-9045da90]{display:flex;gap:12px}.location-tag[data-v-9045da90]{background-color:var(--primary-light);color:var(--primary);font-weight:700;font-size:.72rem;padding:3px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:4px}.location-tag i[data-v-9045da90]{font-size:.75rem}.supply-img-container[data-v-9045da90]{display:flex;justify-content:center;align-items:center}.supply-thumb[data-v-9045da90]{width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--border-color);object-fit:cover;cursor:pointer;background-color:#fff;transition:transform .2s ease}.supply-thumb[data-v-9045da90]:hover{transform:scale(1.1);box-shadow:var(--shadow-sm)}.supply-thumb-sub[data-v-9045da90]{width:24px;height:24px;border-radius:4px;border:1px solid var(--border-color);object-fit:cover;cursor:pointer;background-color:#fff;transition:transform .2s ease}.supply-thumb-sub[data-v-9045da90]:hover{transform:scale(1.15)}.supply-thumb-empty[data-v-9045da90]{width:44px;height:44px;border-radius:var(--radius-sm);background-color:var(--bg-main);border:1px dashed var(--border-color);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:1.1rem}.inline-input[data-v-9045da90]{border:1px solid var(--border-color);background-color:var(--bg-main);color:var(--text-main);width:100%}.inline-input[data-v-9045da90]:focus{border-color:var(--primary);background-color:#fff;outline:none}.btn-xs-save[data-v-9045da90]{padding:4px 6px;font-size:.72rem;background-color:var(--primary);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:var(--transition)}.btn-xs-save[data-v-9045da90]:hover{background-color:var(--primary-hover)}.uploaded-img-wrapper[data-v-9045da90]{position:relative;width:80px;height:80px}.uploaded-img-preview[data-v-9045da90]{width:100%;height:100%;border-radius:var(--radius-sm);border:1px solid var(--border-color);object-fit:cover}.btn-remove-uploaded[data-v-9045da90]{position:absolute;top:-6px;right:-6px;background-color:var(--danger);color:#fff;border:none;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;cursor:pointer;font-weight:700;box-shadow:var(--shadow-sm)}.btn-remove-uploaded[data-v-9045da90]:hover{background-color:#dc2626}.shelf-label-card[data-v-9045da90]{border:2px dashed #0f172a;border-radius:8px;padding:16px;width:420px;background:#fff;box-shadow:var(--shadow-md);color:#1e293b;text-align:left}.label-header-logo[data-v-9045da90]{display:flex;align-items:center;gap:8px;font-size:.65rem;color:#475569;font-weight:700;border-bottom:2px solid #0f172a;padding-bottom:6px;margin-bottom:10px}.label-header-logo i[data-v-9045da90]{color:var(--primary);font-size:.8rem}.label-main-content[data-v-9045da90]{display:flex;gap:16px;align-items:flex-start}.label-qr-pane[data-v-9045da90]{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid #cbd5e1;padding:6px;border-radius:4px;background:#f8fafc}.label-qr-img[data-v-9045da90]{width:100px;height:100px}.label-qr-caption[data-v-9045da90]{font-family:var(--font-eng);font-size:.7rem;font-weight:800;letter-spacing:.5px}.label-info-pane[data-v-9045da90]{flex:1;display:flex;flex-direction:column;gap:4px}.label-row[data-v-9045da90]{display:flex;flex-direction:column}.label-title[data-v-9045da90]{font-size:.65rem;color:#64748b;font-weight:700}.label-value-code[data-v-9045da90]{font-family:var(--font-eng);font-size:.85rem;font-weight:800}.label-value-name[data-v-9045da90]{font-size:.85rem;font-weight:700;line-height:1.2;max-height:2.4em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.label-value-location[data-v-9045da90]{font-size:.95rem;font-weight:800;color:var(--primary)}.label-value-location i[data-v-9045da90]{font-size:.85rem;margin-right:2px}.label-value-qty[data-v-9045da90]{font-size:1rem;font-weight:800;color:var(--warning)}.lightbox-dot[data-v-9045da90]{width:40px;height:40px;border-radius:4px;border:2px solid rgba(255,255,255,.4);object-fit:cover;cursor:pointer;transition:border-color .2s ease}.lightbox-dot.active[data-v-9045da90]{border-color:#fff}.badge[data-v-9045da90]{display:inline-block;padding:.25em .6em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge-warning[data-v-9045da90]{background-color:var(--warning-light);color:var(--warning);border:1px solid rgba(245,158,11,.2)}.badge-info[data-v-9045da90]{background-color:var(--info-light);color:var(--info);border:1px solid rgba(59,130,246,.2)}.badge-success[data-v-9045da90]{background-color:var(--success-light);color:var(--success);border:1px solid rgba(16,185,129,.2)}.badge-danger[data-v-9045da90]{background-color:var(--danger-light);color:var(--danger);border:1px solid rgba(239,68,68,.2)}.quota-status-banner[data-v-9045da90]{background:var(--bg-main);padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border-color);font-size:.82rem;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}.quota-warning-banner[data-v-9045da90]{background:var(--warning-light);color:var(--warning);padding:10px;border-radius:var(--radius-sm);font-size:.8rem;border:1px solid rgba(245,158,11,.2);margin-top:12px;font-weight:600;display:flex;gap:8px;align-items:center;line-height:1.4}.hazard-warning-banner[data-v-9045da90]{background:#fef2f2;color:#ef4444;padding:10px;border-radius:var(--radius-sm);font-size:.8rem;border:1px solid rgba(239,68,68,.2);margin-bottom:14px;font-weight:600;display:flex;gap:10px;align-items:flex-start;line-height:1.4}.quota-badge[data-v-9045da90]{background-color:var(--warning-light);color:var(--warning);font-size:.65rem;font-weight:700;padding:2px 5px;border-radius:4px;display:inline-flex;align-items:center;gap:3px;border:1px solid rgba(245,158,11,.15)}.hazard-badge-tag[data-v-9045da90]{background-color:#fef2f2;color:#ef4444;font-size:.65rem;font-weight:700;padding:2px 5px;border-radius:4px;display:inline-flex;align-items:center;gap:3px;border:1px solid rgba(239,68,68,.15)}.nfpa-diamond[data-v-9045da90]{position:relative;width:72px;height:72px;transform:rotate(45deg);border:2px solid #1e293b;overflow:hidden;flex-shrink:0;background:#fff;border-radius:4px}.nfpa-cell[data-v-9045da90]{position:absolute;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.nfpa-cell span[data-v-9045da90]{transform:rotate(-45deg);font-family:var(--font-eng);font-weight:800;font-size:1rem}.nfpa-cell.flammability[data-v-9045da90]{top:0;left:0;background-color:#fca5a5;color:#b91c1c;border-right:1px solid #1e293b;border-bottom:1px solid #1e293b}.nfpa-cell.health[data-v-9045da90]{bottom:0;left:0;background-color:#93c5fd;color:#1d4ed8;border-right:1px solid #1e293b;border-top:1px solid #1e293b}.nfpa-cell.instability[data-v-9045da90]{top:0;right:0;background-color:#fde047;color:#a16207;border-left:1px solid #1e293b;border-bottom:1px solid #1e293b}.nfpa-cell.special[data-v-9045da90]{bottom:0;right:0;background-color:#fff;color:#1e293b;border-left:1px solid #1e293b;border-top:1px solid #1e293b}.hazard-badge[data-v-9045da90]{background-color:#fef2f2;color:#ef4444;border:1px solid rgba(239,68,68,.2);padding:1px 6px;font-size:.68rem;font-weight:700;border-radius:4px}.search-item-row[data-v-9045da90]:hover{background-color:var(--bg-main)!important}.search-item-row[data-v-9045da90]{cursor:pointer}.catalog-item-card[data-v-9045da90]:hover{transform:translateY(-2px);border-color:var(--primary)!important;box-shadow:0 4px 12px #0000000d}@media print{body *{visibility:hidden}#modal-qr-sticker.active,#modal-qr-sticker.active #qr-sticker-print-area,#modal-qr-sticker.active #qr-sticker-print-area *{visibility:visible}#modal-qr-sticker.active{position:absolute;left:0;top:0;width:100vw;height:100vh;background:#fff!important}#modal-qr-sticker.active .modal-content{border:none!important;box-shadow:none!important;background:#fff!important;max-width:100%!important;width:100%!important;padding:0!important}#modal-qr-sticker.active .modal-header,#modal-qr-sticker.active .modal-footer{display:none!important}#modal-bulk-print.active,#modal-bulk-print.active .modal-body,#modal-bulk-print.active .modal-body *{visibility:visible}#modal-bulk-print.active{position:absolute;left:0;top:0;width:100vw;height:100vh;background:#fff!important}#modal-bulk-print.active .modal-content{border:none!important;box-shadow:none!important;background:#fff!important;max-width:100%!important;width:100%!important;padding:0!important}#modal-bulk-print.active .modal-header,#modal-bulk-print.active .modal-footer,#modal-bulk-print.active .no-print{display:none!important}#modal-bulk-print.active .bulk-print-grid{grid-template-columns:repeat(3,1fr)!important;gap:20px!important}}@keyframes laser-move{0%{top:0}50%{top:100%}to{top:0}}@media print{body *{visibility:hidden}#modal-receipt.active,#modal-receipt.active #receipt-print-area,#modal-receipt.active #receipt-print-area *{visibility:visible}#modal-receipt.active{position:absolute;left:0;top:0;width:100vw;height:100vh;background:#fff!important}#modal-receipt.active .modal-content{border:none!important;box-shadow:none!important;background:#fff!important;max-width:100%!important;width:100%!important;padding:0!important}#modal-receipt.active .modal-header,#modal-receipt.active .modal-footer,#modal-receipt.active .no-print{display:none!important}}.disposed-row{opacity:.6;text-decoration:line-through;background-color:var(--bg-main)!important}.tab-container[data-v-7d063cc6]{display:flex;gap:12px}.location-tag[data-v-7d063cc6]{background-color:var(--primary-light);color:var(--primary);font-weight:700;font-size:.72rem;padding:3px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:4px}.location-tag i[data-v-7d063cc6]{font-size:.75rem}.quota-badge[data-v-7d063cc6]{background-color:var(--warning-light);color:var(--warning);font-size:.65rem;font-weight:700;padding:2px 5px;border-radius:4px;display:inline-flex;align-items:center;gap:3px;border:1px solid rgba(245,158,11,.15);margin-top:4px}.badge[data-v-7d063cc6]{display:inline-block;padding:.25em .6em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge-warning[data-v-7d063cc6]{background-color:var(--warning-light);color:var(--warning);border:1px solid rgba(245,158,11,.2)}.badge-info[data-v-7d063cc6]{background-color:var(--info-light);color:var(--info);border:1px solid rgba(59,130,246,.2)}.badge-success[data-v-7d063cc6]{background-color:var(--success-light);color:var(--success);border:1px solid rgba(16,185,129,.2)}.badge-danger[data-v-7d063cc6]{background-color:var(--danger-light);color:var(--danger);border:1px solid rgba(239,68,68,.2)}.kpi-danger[data-v-7d063cc6]{border-left:5px solid var(--danger)!important}input[type=range][data-v-7d063cc6]{height:6px;-webkit-appearance:none;background:var(--border-color);border-radius:3px;outline:none}input[type=range][data-v-7d063cc6]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .1s ease}input[type=range][data-v-7d063cc6]::-webkit-slider-thumb:hover{transform:scale(1.2)}.scanner-view-container[data-v-fd31af7c]{padding:10px}.mobile-frame-mockup[data-v-fd31af7c]{width:320px;height:640px;background:#1e293b;border-radius:40px;border:12px solid #0f172a;box-shadow:0 25px 50px -12px #0006;position:relative;display:flex;flex-direction:column;padding:10px;box-sizing:border-box}.mobile-speaker[data-v-fd31af7c]{width:60px;height:6px;background:#334155;border-radius:3px;position:absolute;top:18px;left:50%;transform:translate(-50%)}.mobile-screen[data-v-fd31af7c]{flex:1;background:#f8fafc;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;position:relative;margin-top:20px;margin-bottom:20px;border:4px solid #0f172a}.mobile-home-btn[data-v-fd31af7c]{width:44px;height:44px;border-radius:50%;background:#334155;border:2px solid #475569;position:absolute;bottom:8px;left:50%;transform:translate(-50%);cursor:pointer;transition:background .2s}.mobile-home-btn[data-v-fd31af7c]:hover{background:#475569}.mobile-app-header[data-v-fd31af7c]{background:var(--primary);color:#fff;padding:10px 15px;font-size:.8rem;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm)}.mobile-status-dot[data-v-fd31af7c]{width:8px;height:8px;border-radius:50%;background:#ef4444}.mobile-status-dot.connected[data-v-fd31af7c]{background:var(--success);box-shadow:0 0 8px var(--success)}.viewfinder-container[data-v-fd31af7c]{height:240px;position:relative;background:#000;overflow:hidden}.scan-overlay[data-v-fd31af7c]{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000000b3;z-index:10}.scan-camera-icon[data-v-fd31af7c]{font-size:2.2rem;color:#fffc}.laser-scanner-line[data-v-fd31af7c]{position:absolute;left:0;width:100%;height:3px;background:#10b981;box-shadow:0 0 10px #10b981,0 0 20px #10b981;animation:scanLaser-fd31af7c 2s linear infinite;z-index:5}@keyframes scanLaser-fd31af7c{0%{top:0%}50%{top:100%}to{top:0%}}.stop-camera-btn[data-v-fd31af7c]{position:absolute;bottom:10px;left:50%;transform:translate(-50%);z-index:12;font-size:.65rem;padding:3px 10px}.mobile-screen-body[data-v-fd31af7c]{flex:1;padding:12px;display:flex;flex-direction:column;overflow-y:auto}.scan-tip-text[data-v-fd31af7c]{font-size:.7rem;color:var(--text-muted);text-align:center;margin-top:15px;line-height:1.4}.scan-success-badge[data-v-fd31af7c]{background:#dcfce7;color:#15803d;font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:20px;text-align:center;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:4px}.mini-detail-card[data-v-fd31af7c]{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px;box-shadow:var(--shadow-sm);margin-top:5px}.simulator-buttons-grid[data-v-fd31af7c]{display:grid;grid-template-columns:1fr 1fr;gap:12px}.simulator-buttons-grid .btn[data-v-fd31af7c]{justify-content:flex-start;font-weight:600;text-align:left}.scanned-action-content[data-v-fd31af7c]{animation:slideUpFade-fd31af7c .3s ease-out}@keyframes slideUpFade-fd31af7c{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.qr-tag-preview[data-v-fd31af7c]{width:320px;border:2px solid #0f172a;border-radius:8px;padding:10px;background:#fff;text-align:center;box-shadow:var(--shadow-md)}.qr-tag-header[data-v-fd31af7c]{font-size:.72rem;font-weight:800;color:var(--primary);border-bottom:1.5px solid #0f172a;padding-bottom:3px;letter-spacing:1px}.qr-tag-footer[data-v-fd31af7c]{font-size:.6rem;font-weight:700;color:var(--text-muted);border-top:1px dashed var(--border-color);padding-top:4px}.simulated-qrcode[data-v-fd31af7c]{width:70px;height:70px;border:1px solid #000;padding:4px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);position:relative;background:#fff}.qr-marker[data-v-fd31af7c]{width:18px;height:18px;border:4px solid #000;background:#fff;position:absolute;box-sizing:border-box}.qr-marker[data-v-fd31af7c]:after{content:"";width:6px;height:6px;background:#000;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.qr-marker.top-left[data-v-fd31af7c]{top:4px;left:4px}.qr-marker.top-right[data-v-fd31af7c]{top:4px;right:4px}.qr-marker.bottom-left[data-v-fd31af7c]{bottom:4px;left:4px}.qr-dots[data-v-fd31af7c]{grid-column:span 7;grid-row:span 7;background-image:radial-gradient(#000 35%,transparent 35%);background-size:8px 8px;opacity:.85}.badge[data-v-fd31af7c]{display:inline-block;padding:.25em .6em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge-warning[data-v-fd31af7c]{background-color:var(--warning-light);color:var(--warning);border:1px solid rgba(245,158,11,.2)}.badge-info[data-v-fd31af7c]{background-color:var(--info-light);color:var(--info);border:1px solid rgba(59,130,246,.2)}.badge-success[data-v-fd31af7c]{background-color:var(--success-light);color:var(--success);border:1px solid rgba(16,185,129,.2)}.badge-danger[data-v-fd31af7c]{background-color:var(--danger-light);color:var(--danger);border:1px solid rgba(239,68,68,.2)}.location-tag[data-v-fd31af7c]{background-color:var(--primary-light);color:var(--primary);font-weight:700;font-size:.72rem;padding:3px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:4px}:root{--font-thai: "Sarabun", sans-serif;--font-eng: "Outfit", sans-serif;--primary-h: 155;--primary-s: 100%;--primary-l: 21%;--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));--primary-hover: hsl(var(--primary-h), var(--primary-s), 17%);--primary-light: rgba(0, 107, 63, .1);--secondary-h: 46;--secondary-s: 100%;--secondary-l: 58%;--secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));--secondary-dark: hsl(var(--secondary-h), var(--secondary-s), 45%);--text-main: #1e293b;--text-muted: #64748b;--bg-main: #f8fafc;--bg-sidebar: #0f172a;--bg-card: #ffffff;--border-color: #e2e8f0;--success: #10b981;--success-light: #d1fae5;--warning: #f59e0b;--warning-light: #fef3c7;--danger: #ef4444;--danger-light: #fee2e2;--info: #3b82f6;--info-light: #dbeafe;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--sidebar-width: 280px;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--shadow-sm: 0 1px 3px rgba(0,0,0,.1);--shadow-md: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-thai);background-color:var(--bg-main);color:var(--text-main);display:flex;min-height:100vh;overflow-x:hidden}#app{flex:1;width:100%;display:flex;flex-direction:column}.app-container{display:flex;width:100vw;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-width);background-color:var(--bg-sidebar);color:#f8fafc;display:flex;flex-direction:column;flex-shrink:0;border-right:1px solid rgba(255,255,255,.08);padding:24px 16px;justify-content:space-between}.brand-section{display:flex;align-items:center;gap:12px;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}.brand-logo{width:44px;height:44px;background:radial-gradient(circle,var(--secondary) 20%,var(--primary) 80%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-eng);font-weight:700;font-size:1.2rem;color:#fff;border:2px solid rgba(255,255,255,.2);box-shadow:var(--shadow-sm)}.brand-title h1{font-size:.95rem;font-weight:700;letter-spacing:.5px;color:#fff}.brand-title p{font-size:.72rem;color:var(--secondary);font-weight:500}.nav-menu{list-style:none;display:flex;flex-direction:column;gap:6px;flex-grow:1}.nav-item button{width:100%;display:flex;align-items:center;gap:12px;background:none;border:none;color:#cbd5e1;padding:12px 16px;border-radius:var(--radius-md);font-family:var(--font-thai);font-size:.92rem;font-weight:500;cursor:pointer;text-align:left;transition:var(--transition)}.nav-item button:hover{background-color:#ffffff0d;color:#fff}.nav-item.active button{background-color:var(--primary);color:#fff;font-weight:600;box-shadow:0 4px 12px #006b3f40}.nav-item button i{font-size:1.1rem;width:20px;text-align:center;color:var(--text-muted);transition:var(--transition)}.nav-item.active button i{color:var(--secondary)}.profile-section{background-color:#ffffff0d;border-radius:var(--radius-lg);padding:16px;border:1px solid rgba(255,255,255,.08)}.profile-info{display:flex;align-items:center;gap:12px;margin-bottom:12px}.profile-avatar{width:40px;height:40px;border-radius:50%;background-color:var(--primary-light);border:2px solid var(--secondary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem}.profile-details{overflow:hidden}.profile-name{font-size:.85rem;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.profile-role{font-size:.72rem;color:var(--secondary);font-weight:500;text-transform:uppercase}.role-switcher-container{display:flex;flex-direction:column;gap:6px}.role-switcher-title{font-size:.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase}.role-select{width:100%;background-color:#1e293b;border:1px solid rgba(255,255,255,.15);color:#f8fafc;padding:8px 12px;border-radius:var(--radius-sm);font-family:var(--font-thai);font-size:.8rem;cursor:pointer;outline:none;transition:var(--transition)}.role-select:focus{border-color:var(--secondary)}.main-content{flex-grow:1;display:flex;flex-direction:column;height:100%;overflow-y:auto}.app-header{background-color:var(--bg-card);padding:16px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);z-index:10}.header-title h2{font-size:1.3rem;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:8px}.header-actions{display:flex;align-items:center;gap:16px}.system-time{font-family:var(--font-eng);font-size:.85rem;color:var(--text-muted);font-weight:500}.view-container{padding:32px;flex-grow:1;max-width:1400px;width:100%;margin:0 auto}.view-section{display:none;animation:fadeIn .4s ease-out}.view-section.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-bottom:32px}.kpi-card{background-color:var(--bg-card);border-radius:var(--radius-lg);padding:24px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border-color);box-shadow:var(--shadow-md);transition:var(--transition);position:relative;overflow:hidden}.kpi-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--primary)}.kpi-card.kpi-warning:before{background-color:var(--warning)}.kpi-card.kpi-danger:before{background-color:var(--danger)}.kpi-card.kpi-info:before{background-color:var(--info)}.kpi-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.kpi-info h3{font-size:.88rem;color:var(--text-muted);font-weight:500;margin-bottom:8px}.kpi-value{font-family:var(--font-eng);font-size:2rem;font-weight:700;color:var(--text-main);line-height:1}.kpi-icon{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem}.kpi-card.kpi-primary .kpi-icon{background-color:var(--primary-light);color:var(--primary)}.kpi-card.kpi-warning .kpi-icon{background-color:var(--warning-light);color:var(--warning)}.kpi-card.kpi-danger .kpi-icon{background-color:var(--danger-light);color:var(--danger)}.kpi-card.kpi-info .kpi-icon{background-color:var(--info-light);color:var(--info)}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-bottom:32px}.dashboard-panel{background-color:var(--bg-card);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--border-color);box-shadow:var(--shadow-md)}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid var(--border-color);padding-bottom:12px}.panel-header h3{font-size:1.1rem;font-weight:700;color:var(--primary)}.chart-container{display:flex;justify-content:center;align-items:center;position:relative;height:260px}.chart-wrapper{position:relative;width:220px;height:220px}.chart-legend{margin-top:16px;display:flex;flex-direction:column;gap:8px}.legend-item{display:flex;align-items:center;justify-content:space-between;font-size:.85rem}.legend-color{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:8px}.pending-approvals-list{display:flex;flex-direction:column;gap:12px}.approval-item-card{padding:16px;border-radius:var(--radius-md);border:1px solid var(--border-color);background-color:var(--bg-main);transition:var(--transition)}.approval-item-card:hover{border-color:var(--primary-light);background-color:#fff;box-shadow:var(--shadow-sm)}.approval-header{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-muted);margin-bottom:6px}.approval-title{font-weight:600;font-size:.9rem;margin-bottom:4px}.approval-purpose{font-size:.8rem;color:var(--text-muted);margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.approval-actions{display:flex;gap:8px}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius-md);font-family:var(--font-thai);font-size:.88rem;font-weight:600;cursor:pointer;transition:var(--transition);border:none;outline:none}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-hover);box-shadow:0 4px 12px #006b3f33}.btn-secondary{background-color:var(--secondary);color:var(--bg-sidebar)}.btn-secondary:hover{background-color:hsl(var(--secondary-h),var(--secondary-s),50%)}.btn-outline{background-color:transparent;border:1px solid var(--border-color);color:var(--text-main)}.btn-outline:hover{background-color:var(--bg-main);border-color:var(--text-muted)}.btn-danger{background-color:var(--danger);color:#fff}.btn-danger:hover{background-color:#dc2626}.btn-success{background-color:var(--success);color:#fff}.btn-success:hover{background-color:#059669}.btn-sm{padding:6px 12px;font-size:.78rem;border-radius:var(--radius-sm)}.toolbar{background-color:var(--bg-card);padding:20px;border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-md);margin-bottom:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}.form-group{display:flex;flex-direction:column;gap:6px;flex-grow:1;min-width:180px}.form-group.search-group{flex-grow:2}.form-group label{font-size:.8rem;font-weight:600;color:var(--text-muted)}.form-control{background-color:#fff;border:1px solid var(--border-color);padding:10px 14px;border-radius:var(--radius-md);font-family:var(--font-thai);font-size:.9rem;outline:none;transition:var(--transition);width:100%}.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.table-responsive{width:100%;overflow-x:auto;background-color:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-md)}.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:.88rem}.data-table th{background-color:var(--bg-main);padding:16px 20px;font-weight:700;color:var(--primary);border-bottom:2px solid var(--border-color)}.data-table td{padding:16px 20px;border-bottom:1px solid var(--border-color);color:var(--text-main);vertical-align:middle}.data-table tbody tr:hover{background-color:#f8fafccc}.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:9999px;font-size:.72rem;font-weight:600}.badge-success{background-color:var(--success-light);color:var(--success)}.badge-warning{background-color:var(--warning-light);color:var(--warning)}.badge-danger{background-color:var(--danger-light);color:var(--danger)}.badge-info{background-color:var(--info-light);color:var(--info)}.wizard-card{background-color:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);overflow:hidden;max-width:800px;margin:0 auto}.wizard-steps{display:flex;background-color:var(--bg-main);border-bottom:1px solid var(--border-color)}.wizard-step{flex:1;padding:16px;text-align:center;font-size:.88rem;font-weight:600;color:var(--text-muted);border-right:1px solid var(--border-color);position:relative}.wizard-step.active{color:var(--primary);background-color:#fff}.wizard-step.active:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:var(--primary)}.wizard-step.completed{color:var(--success)}.wizard-body{padding:32px}.wizard-footer{padding:20px 32px;background-color:var(--bg-main);border-top:1px solid var(--border-color);display:flex;justify-content:space-between}.wizard-slide{display:none}.wizard-slide.active{display:block}.form-row{display:flex;gap:16px;margin-bottom:20px}.dynamic-items-table{width:100%;margin-top:12px;margin-bottom:20px}.dynamic-items-table th{font-size:.8rem;font-weight:700;color:var(--text-muted);padding:8px;border-bottom:1px solid var(--border-color)}.dynamic-items-table td{padding:8px;vertical-align:middle}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease;overflow-y:auto;padding:30px 0}.modal.active{opacity:1;pointer-events:auto}.modal-content{background-color:var(--bg-card);border-radius:var(--radius-lg);width:90%;max-width:500px;margin:auto;box-shadow:var(--shadow-lg);transform:translateY(20px);transition:transform .3s ease;overflow:hidden}.modal.active .modal-content{transform:translateY(0)}.modal-header{padding:20px 24px;background-color:var(--primary);color:#fff;display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:1.1rem;font-weight:700}.modal-close{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}.modal-body{padding:24px}.modal-footer{padding:16px 24px;background-color:var(--bg-main);border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:12px}.alert-banner{background-color:var(--danger-light);border:1px solid rgba(239,68,68,.2);color:var(--danger);padding:12px 16px;border-radius:var(--radius-md);margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;font-size:.85rem;font-weight:600;animation:slideDown .3s ease-out}@keyframes slideDown{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.notification-bell-container{position:relative;cursor:pointer}.notification-bell{font-size:1.25rem;color:var(--text-muted);transition:var(--transition)}.notification-bell:hover{color:var(--primary)}.notification-badge{position:absolute;top:-4px;right:-4px;background-color:var(--danger);color:#fff;font-size:.65rem;font-family:var(--font-eng);font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}.qr-sticker-container{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px;background-color:#fff;border:1px dashed #cbd5e1;border-radius:var(--radius-sm);max-width:250px;margin:0 auto}.qr-code-img{width:150px;height:150px;margin-bottom:12px}.qr-sticker-text{font-size:.75rem;font-weight:700;color:#000}.qr-sticker-subtext{font-size:.65rem;color:#475569}@media print{body *{visibility:hidden}.qr-sticker-container,.qr-sticker-container *{visibility:visible}.qr-sticker-container{position:absolute;left:0;top:0;width:100%;border:none}}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;background:linear-gradient(135deg,#01321d,#006b3f,#0c4d32);position:relative;overflow-y:auto;padding:40px 20px;box-sizing:border-box}.login-container:before{content:"";position:absolute;top:-20%;left:-20%;width:60%;height:60%;background:radial-gradient(circle,#ffc72c26,#ffc72c00 70%);pointer-events:none}.login-card{background:#fffffff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-lg);box-shadow:0 20px 40px #0000004d;padding:40px;width:100%;max-width:680px;box-sizing:border-box;animation:loginFadeIn .5s ease-out}@keyframes loginFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-header{text-align:center;margin-bottom:30px}.login-logo{font-size:3rem;color:var(--primary);margin-bottom:12px;text-shadow:0 4px 10px rgba(0,107,63,.15);animation:logoPulse 2s infinite ease-in-out}@keyframes logoPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.login-header h2{font-size:1.6rem;font-weight:800;color:var(--primary);margin-bottom:8px}.login-subtitle{font-size:.88rem;color:var(--text-muted);line-height:1.5}.login-divider{text-align:center;position:relative;margin:30px 0 20px}.login-divider:before{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background-color:var(--border-color);z-index:1}.login-divider span{background-color:#fffffff2;padding:0 16px;font-size:.8rem;color:var(--text-muted);font-weight:600;position:relative;z-index:2}.demo-login-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}@media (max-width: 550px){.demo-login-grid{grid-template-columns:1fr}}.btn-demo-login{display:flex;align-items:center;gap:12px;padding:12px 16px;background-color:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);text-align:left;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #00000005}.btn-demo-login i{font-size:1.4rem;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.btn-demo-login.admin i{background-color:#ef4444}.btn-demo-login.head i{background-color:#f59e0b}.btn-demo-login.budget i{background-color:#3b82f6}.btn-demo-login.officer i{background-color:#10b981}.btn-demo-login.teacher i{background-color:#8b5cf6}.btn-demo-login.student i{background-color:#64748b}.btn-demo-login div{display:flex;flex-direction:column}.btn-demo-login div strong{font-size:.85rem;color:var(--text-main);font-weight:700}.btn-demo-login div span{font-size:.72rem;color:var(--text-muted)}.btn-demo-login:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014;background-color:var(--bg-main)}.btn-demo-login.admin:hover{border-color:#ef4444}.btn-demo-login.head:hover{border-color:#f59e0b}.btn-demo-login.budget:hover{border-color:#3b82f6}.btn-demo-login.officer:hover{border-color:#10b981}.btn-demo-login.teacher:hover{border-color:#8b5cf6}.btn-demo-login.student:hover{border-color:#64748b}.login-footer{text-align:center;font-size:.75rem;color:var(--text-muted);line-height:1.6;border-top:1px solid var(--border-color);padding-top:20px;margin-top:10px}.login-footer p{margin:0}#btn-logout{background:transparent;transition:all .2s ease}#btn-logout:hover{background-color:#ef44440d!important;border-color:var(--danger)!important;box-shadow:0 2px 8px #ef44441a}.qr-scanner-viewport-wrapper{box-shadow:inset 0 0 40px #000c;border:4px solid var(--border-color);transition:all .3s ease}.qr-scanner-laser-line{position:absolute;left:5%;width:90%;height:3px;background:#10b981;box-shadow:0 0 12px 2px #10b981;animation:scanLaser 2.2s cubic-bezier(.4,0,.2,1) infinite;z-index:10;pointer-events:none}@keyframes scanLaser{0%{top:15%;opacity:.1}10%{opacity:1}90%{opacity:1}to{top:85%;opacity:.1}}#qr-reader{border:none!important}#qr-reader__dashboard{padding:8px!important;background-color:var(--bg-card);border-top:1px solid var(--border-color)}#qr-reader video{object-fit:cover!important;border-radius:var(--radius-sm);width:100%!important;height:100%!important}