@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-app:#090b0f;--bg-surface:#121620;--bg-surface-hover:#1b212f;--bg-sidebar:#0f121a;--primary:#6366f1;--primary-hover:#4f46e5;--primary-glow:#6366f126;--secondary:#a855f7;--secondary-hover:#9333ea;--success:#10b981;--success-hover:#059669;--success-glow:#10b98126;--warning:#f59e0b;--warning-glow:#f59e0b1a;--danger:#ef4444;--danger-hover:#dc2626;--danger-glow:#ef44441a;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dark:#0f172a;--border-color:#ffffff0f;--border-focus:#6366f166;--shadow-sm:0 2px 8px -1px #0003;--shadow-md:0 8px 24px -4px #0000004d;--shadow-lg:0 16px 40px -8px #0006;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-full:9999px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--sidebar-width:260px}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-main);width:100vw;height:100vh;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#ffffff1a}::-webkit-scrollbar-thumb:hover{background:#fff3}.app-container{background-color:var(--bg-app);width:100vw;height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background-color:var(--bg-sidebar);border-right:1px solid var(--border-color);z-index:10;flex-direction:column;padding:1.5rem 1rem;display:flex}.brand-section{align-items:center;gap:.75rem;margin-bottom:2.5rem;padding:0 .5rem;display:flex}.brand-logo{background:linear-gradient(135deg, var(--primary), var(--secondary));border-radius:var(--radius-md);color:#fff;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.25rem;font-weight:800;display:flex;box-shadow:0 4px 12px #6366f14d}.brand-name{background:linear-gradient(to right, #fff, var(--text-muted));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.25rem;font-weight:700}.nav-links{flex-direction:column;flex:1;gap:.5rem;display:flex}.nav-item{color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:1px solid #0000;align-items:center;gap:.75rem;padding:.85rem 1rem;font-size:.95rem;font-weight:500;text-decoration:none;display:flex}.nav-item:hover{color:var(--text-main);background-color:var(--bg-surface)}.nav-item.active{color:#fff;border-left:3px solid var(--primary);border-color:#ffffff05 #ffffff05 #ffffff05 var(--primary);background:linear-gradient(90deg,#6366f126,#6366f108)}.nav-icon{font-size:1.2rem}.cashier-info{border-top:1px solid var(--border-color);flex-direction:column;gap:.5rem;margin-top:auto;padding:1rem .5rem;display:flex}.cashier-status{align-items:center;gap:.5rem;font-size:.85rem;font-weight:500;display:flex}.status-dot{border-radius:var(--radius-full);width:8px;height:8px}.status-dot.open{background-color:var(--success);box-shadow:0 0 8px var(--success)}.status-dot.closed{background-color:var(--danger);box-shadow:0 0 8px var(--danger)}.main-content{flex-direction:column;flex:1;height:100vh;display:flex;overflow:hidden}.app-header{background-color:var(--bg-sidebar);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;height:70px;padding:0 2rem;display:flex}.header-title{font-size:1.25rem;font-weight:600}.page-container{box-sizing:border-box;flex:none;height:calc(100vh - 70px);padding:2rem;overflow-y:auto}.page-container>*{margin-bottom:1.5rem}.page-container>:last-child{margin-bottom:0}.glass-card{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);padding:1.5rem}.glass-card:hover{box-shadow:var(--shadow-md);border-color:#ffffff1a}.btn{font-family:var(--font-sans);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.95rem;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-hover);box-shadow:0 0 12px var(--primary-glow)}.btn-success{background-color:var(--success);color:#fff}.btn-success:hover{background-color:var(--success-hover);box-shadow:0 0 12px var(--success-glow)}.btn-danger{background-color:var(--danger);color:#fff}.btn-danger:hover{background-color:var(--danger-hover);box-shadow:0 0 12px var(--danger-glow)}.btn-outline{border-color:var(--border-color);color:var(--text-main);background-color:#0000}.btn-outline:hover{background-color:var(--border-color);border-color:#ffffff26}.input-group{flex-direction:column;gap:.4rem;display:flex}.input-label{color:var(--text-muted);font-size:.85rem;font-weight:500}.input-field{border:1px solid var(--border-color);border-radius:var(--radius-md);color:#fff;width:100%;height:45px;font-family:var(--font-sans);transition:all var(--transition-fast);box-sizing:border-box;background-color:#0003;outline:none;padding:0 1.25rem;font-size:.95rem}select.input-field{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");background-position:right 1rem center;background-repeat:no-repeat;background-size:1.1em;padding-right:2.5rem}select.input-field option{color:#f8fafc;background-color:#121620}.input-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.input-field::placeholder{color:var(--text-muted);opacity:.5}.input-field:disabled{opacity:.5;cursor:not-allowed}.pos-layout{grid-template-columns:1fr 400px;height:calc(100vh - 70px);display:grid;overflow:hidden}.pos-products{flex-direction:column;gap:1rem;padding:1.5rem;display:flex;overflow-y:auto}.pos-cart-panel{background-color:var(--bg-sidebar);border-left:1px solid var(--border-color);flex-direction:column;display:flex;overflow:hidden}.pos-cart-bottom{border-top:1px solid var(--border-color);background-color:var(--bg-surface);padding:1.5rem}.category-tabs{-ms-overflow-style:none;scrollbar-width:none;flex-shrink:0;gap:.5rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.category-tabs::-webkit-scrollbar{display:none}.category-tab{border-radius:var(--radius-full);background-color:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);padding:.5rem 1rem;font-size:.9rem;font-weight:500}.category-tab:hover{color:var(--text-main);background-color:var(--bg-surface-hover)}.category-tab.active{background-color:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 10px var(--primary-glow)}.product-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;display:grid}.product-card{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);flex-direction:column;justify-content:space-between;min-height:150px;padding:1rem;display:flex;position:relative}.product-card:hover{box-shadow:var(--shadow-md);border-color:#6366f14d;transform:translateY(-2px)}.product-card-badge{border-radius:var(--radius-sm);padding:.15rem .4rem;font-size:.75rem;font-weight:600;position:absolute;top:.5rem;right:.5rem}.badge-kg{color:#ec4899;background-color:#ec489926;border:1px solid #ec48994d}.badge-un{color:#06b6d4;background-color:#06b6d426;border:1px solid #06b6d44d}.product-card-category{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;font-size:.75rem}.product-card-name{-webkit-line-clamp:2;-webkit-box-orient:vertical;height:2.5rem;margin-bottom:.5rem;font-size:.95rem;font-weight:600;line-height:1.25;display:-webkit-box;overflow:hidden}.product-card-footer{justify-content:space-between;align-items:flex-end;margin-top:auto;display:flex}.product-card-price{color:#fff;font-size:1.15rem;font-weight:700}.product-card-stock{color:var(--text-muted);font-size:.8rem}.product-card-stock.low-stock{color:var(--danger);font-weight:600}.modal-overlay{z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000bf;justify-content:center;align-items:center;padding:1.5rem 1rem;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-content{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:95%;max-width:500px;box-shadow:var(--shadow-lg);box-sizing:border-box;flex-direction:column;gap:1.5rem;max-height:calc(100vh - 3rem);padding:2rem;animation:.25s cubic-bezier(.16,1,.3,1) modalEnter;display:flex;overflow-y:auto}@media (width<=600px){.modal-content{gap:1rem;max-height:calc(100vh - 2rem);padding:1.25rem}}@keyframes modalEnter{0%{opacity:0;transform:scale(.9)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.table-container{border-radius:var(--radius-md);border:1px solid var(--border-color);overflow-x:auto}.custom-table{border-collapse:collapse;text-align:left;width:100%}.custom-table th{background-color:var(--bg-sidebar);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-color);padding:1rem 1.5rem;font-size:.85rem;font-weight:600}.custom-table td{border-bottom:1px solid var(--border-color);color:var(--text-main);background-color:var(--bg-surface);padding:1rem 1.5rem;font-size:.95rem}.custom-table tr:last-child td{border-bottom:none}.custom-table tr:hover td{background-color:var(--bg-surface-hover)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-align{align-items:center;display:flex}.gap-sm{gap:.5rem}.gap-md{gap:1rem}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;display:grid}.metric-card{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);flex-direction:column;gap:.25rem;padding:1rem;display:flex}.metric-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;font-size:.72rem;font-weight:600}.metric-value{color:#fff;font-weight:700;font-size:1.35rem!important}.metric-card span:not(.metric-title):not(.metric-value){font-size:.72rem!important}.header-nav-tabs{align-items:center;gap:.35rem;display:flex}.header-nav-tab{color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-sans);transition:all var(--transition-fast);white-space:nowrap;background-color:#0000;border:1px solid #0000;align-items:center;gap:.4rem;height:38px;padding:.4rem .75rem;font-size:.85rem;font-weight:600;display:flex}.header-nav-tab:hover{color:#fff;background-color:var(--bg-surface-hover);border-color:var(--border-color)}.header-nav-tab.active{color:#fff;background-color:var(--primary);border-color:var(--primary);box-shadow:0 4px 10px var(--primary-glow)}@media (width>=1201px){.menu-dropdown-container{display:none!important}.header-nav-tabs{display:flex!important}}@media (width<=1200px){.menu-dropdown-container{display:inline-block!important}.header-nav-tabs{display:none!important}}.menu-dropdown-container{z-index:1000;display:inline-block;position:relative}.menu-dropdown-button{background-color:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-main);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-sans);transition:all var(--transition-fast);outline:none;align-items:center;gap:.5rem;height:40px;padding:.5rem 1rem;font-size:.95rem;font-weight:600;display:flex}.menu-dropdown-button:hover{background-color:var(--bg-surface-hover);border-color:var(--border-focus)}.menu-dropdown-list{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);min-width:220px;box-shadow:var(--shadow-lg);z-index:1001;flex-direction:column;gap:.25rem;padding:.5rem;animation:.15s cubic-bezier(.4,0,.2,1) fadeIn;display:flex;position:absolute;top:calc(100% + .5rem);left:0}.menu-dropdown-item{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);text-align:left;transition:all var(--transition-fast);background:0 0;border:none;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;font-size:.9rem;font-weight:500;display:flex}.menu-dropdown-item:hover{color:#fff;background-color:var(--bg-surface-hover)}.menu-dropdown-item.active{color:#fff;border-left:2px solid var(--primary);background:#6366f11a;font-weight:600}.profile-container-mobile{border-left:1px solid var(--border-color);align-items:center;gap:.75rem;padding-left:1.25rem;display:flex}@media (width<=768px){.profile-container-mobile{border-left:none!important;padding-left:0!important}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.pos-product-list-row:hover{transform:translate(3px);background-color:#6366f114!important;border-color:#6366f140!important}.grid-2{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.grid-1-2{grid-template-columns:1fr 2fr;gap:1rem;display:grid}.mobile-only{display:none!important}@media (width<=900px){.pos-layout{position:relative;grid-template-columns:1fr!important}.pos-cart-panel{transition:transform .25s cubic-bezier(.4,0,.2,1);transform:translate(100%);z-index:150!important;width:100vw!important;height:100dvh!important;position:fixed!important;top:0!important;left:0!important}.pos-layout.show-cart-mobile .pos-cart-panel{transform:translate(0)}.pos-cart-bottom{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))!important}.floating-cart-btn{z-index:40;box-shadow:var(--shadow-lg);background-color:var(--primary);border:1px solid #ffffff1a;animation:2s infinite floatingCartPulse;position:fixed;bottom:1.5rem;right:1.5rem}@keyframes floatingCartPulse{0%{transform:scale(1);box-shadow:0 4px 12px #6366f166}50%{transform:scale(1.05);box-shadow:0 4px 20px #6366f1b3}to{transform:scale(1);box-shadow:0 4px 12px #6366f166}}.mobile-only{display:inline-flex!important}}@media (width<=768px){.brand-text-mobile-hide,.profile-text-mobile-hide,.cash-status-text-mobile-hide{display:none!important}.app-header{gap:.5rem!important;padding:0 1rem!important}.page-container{padding:1rem!important}}@media (width<=600px){.grid-3,.grid-2,.grid-1-2{grid-template-columns:1fr!important}.custom-table th,.custom-table td{padding:.6rem .8rem!important;font-size:.85rem!important}.btn{padding:.6rem 1rem!important;font-size:.88rem!important}.hide-mobile-code,.hide-mobile-stock{display:none!important}.pos-product-list-row{padding:.85rem 1rem!important}.pos-product-name-list{white-space:normal!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;margin-right:.5rem!important;font-size:.95rem!important;line-height:1.25!important;display:-webkit-box!important;overflow:hidden!important}}.customers-layout-grid{grid-template-columns:1fr 2fr;gap:1.5rem;height:calc(100vh - 170px);display:grid;overflow:hidden}.dashboard-grid{grid-template-columns:repeat(6,1fr);gap:1rem;margin-bottom:2rem;display:grid}.dashboard-charts-grid{grid-template-columns:2fr 1fr;gap:2rem;margin-bottom:2rem;display:grid}@media (width<=1200px){.dashboard-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=900px){.customers-layout-grid{grid-template-columns:1fr;height:auto;overflow:visible}.dashboard-charts-grid{grid-template-columns:1fr;gap:1.5rem}.dashboard-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=600px){.dashboard-grid{grid-template-columns:1fr}.hide-mobile{display:none!important}}.bottom-nav{display:none}@media (width<=768px){.bottom-nav{background-color:var(--bg-sidebar);border-top:1px solid var(--border-color);z-index:99;height:62px;padding-bottom:env(safe-area-inset-bottom);justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav-item{color:var(--text-muted);font-size:.72rem;font-family:var(--font-sans);cursor:pointer;height:100%;transition:all var(--transition-fast);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.2rem;font-weight:600;display:flex}.bottom-nav-item.active{color:var(--primary)}.bottom-nav-icon{font-size:1.3rem}.page-container{height:calc(100vh - 132px)!important;padding-bottom:85px!important}.pos-layout{height:calc(100vh - 132px)!important}.pos-products{padding-bottom:90px!important}.floating-cart-btn{bottom:5.2rem!important}}.mobile-menu-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000bf;align-items:flex-end;animation:.2s ease-out fadeInOverlay;display:flex;position:fixed;inset:0}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.mobile-menu-drawer{background-color:var(--bg-surface);border-top:1px solid var(--border-color);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;box-shadow:var(--shadow-lg);flex-direction:column;gap:1.25rem;max-height:80vh;padding:1.5rem;animation:.25s cubic-bezier(.16,1,.3,1) slideUpDrawer;display:flex;overflow-y:auto}@keyframes slideUpDrawer{0%{transform:translateY(100%)}to{transform:translateY(0)}}.mobile-menu-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding-bottom:.75rem;display:flex}.mobile-menu-content{flex-direction:column;gap:.5rem;display:flex}.mobile-menu-item{border-radius:var(--radius-md);border:1px solid var(--border-color);color:var(--text-main);font-family:var(--font-sans);text-align:left;cursor:pointer;transition:all var(--transition-fast);background:#ffffff05;align-items:center;gap:1rem;padding:.85rem 1.25rem;font-size:.95rem;font-weight:600;display:flex}.mobile-menu-item:hover,.mobile-menu-item:active{background-color:var(--bg-surface-hover);border-color:#6366f14d}.mobile-menu-item.active{border-color:var(--primary);color:#fff;background:linear-gradient(90deg,#6366f126,#6366f108)}.payment-methods-grid{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.4rem;display:grid}@media (width<=1200px){.dashboard-main-charts-subgrid{grid-template-columns:1fr!important;gap:1.5rem!important}}