@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{color-scheme:dark;--bg-color: #0d1117;--surface-color: rgba(22, 27, 34, .7);--surface-border: rgba(255, 255, 255, .1);--primary-color: #2ea043;--primary-hover: #238636;--primary-active: #1e702d;--secondary-bg: rgba(46, 160, 67, .15);--secondary-border: rgba(46, 160, 67, .4);--secondary-hover: rgba(46, 160, 67, .25);--secondary-active: rgba(46, 160, 67, .35);--text-primary: #c9d1d9;--text-secondary: #8b949e;--accent-glow: rgba(46, 160, 67, .4);--success-color: #10b981;--success-hover: #059669;--success-active: #047857;--danger-color: #ef4444;--danger-hover: #dc2626;--danger-active: #b91c1c;--warning-color: #f59e0b;--warning-hover: #d97706;--warning-active: #b45309;--glass-blur: blur(12px);--transition-speed: .2s;--text-highlight: #ffffff;--navbar-bg: rgba(13, 17, 23, .8);--stat-gradient-start: #fff;--input-bg: rgba(0, 0, 0, .2);--footer-bg: rgba(13, 17, 23, .5);--quantity-bg: rgba(255, 255, 255, .03);--quantity-hover-bg: rgba(255, 255, 255, .1);--quantity-active-bg: rgba(255, 255, 255, .15);--bg-gradient-1: rgba(46, 160, 67, .15);--bg-gradient-2: rgba(56, 112, 224, .1);--bg-gradient-3: rgba(248, 81, 73, .1)}body.light-mode{color-scheme:light;--bg-color: #faf9f6;--surface-color: rgba(255, 255, 255, .55);--surface-border: rgba(148, 163, 184, .2);--primary-color: #059669;--primary-hover: #047857;--primary-active: #035e43;--secondary-bg: rgba(5, 150, 105, .08);--secondary-border: rgba(5, 150, 105, .3);--secondary-hover: rgba(5, 150, 105, .16);--secondary-active: rgba(5, 150, 105, .26);--text-primary: #1e293b;--text-secondary: #64748b;--accent-glow: rgba(5, 150, 105, .25);--success-color: #10b981;--success-hover: #059669;--success-active: #047857;--danger-color: #ef4444;--danger-hover: #dc2626;--danger-active: #b91c1c;--warning-color: #f59e0b;--warning-hover: #d97706;--warning-active: #b45309;--text-highlight: #0f172a;--navbar-bg: rgba(250, 249, 246, .75);--stat-gradient-start: #0f172a;--input-bg: rgba(255, 255, 255, .9);--footer-bg: rgba(250, 249, 246, .6);--quantity-bg: rgba(255, 255, 255, .6);--quantity-hover-bg: rgba(255, 255, 255, .9);--quantity-active-bg: rgba(241, 245, 249, 1);--bg-gradient-1: rgba(74, 93, 62, .08);--bg-gradient-2: rgba(14, 165, 233, .1);--bg-gradient-3: rgba(245, 158, 11, .07)}select option{background-color:var(--bg-color);color:var(--text-highlight)}body{margin:0;padding:0;font-family:Outfit,sans-serif;background-color:var(--bg-color);background-image:radial-gradient(ellipse at 15% 20%,var(--bg-gradient-1),transparent 50%),radial-gradient(ellipse at 85% 30%,var(--bg-gradient-2),transparent 45%),radial-gradient(ellipse at 50% 90%,var(--bg-gradient-3),transparent 60%);background-attachment:fixed;color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column}.glass-panel{background:var(--surface-color);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--surface-border);border-radius:12px;box-shadow:0 8px 32px #0000004d}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box;animation:fadeIn var(--transition-speed) ease-out}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;position:sticky;top:0;z-index:100;background:var(--navbar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--surface-border)}.nav-brand{font-size:1.5rem;font-weight:700;color:var(--text-highlight);text-decoration:none;background:linear-gradient(90deg,#2ea043,#7ee787);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:.8rem}.nav-logo{height:32px;width:auto;object-fit:contain;filter:drop-shadow(0 0 5px var(--accent-glow))}.nav-links{display:flex;align-items:center;gap:1.5rem}.nav-item{color:var(--text-primary);text-decoration:none;font-weight:500;transition:color var(--transition-speed);position:relative}.nav-item:after{content:"";position:absolute;width:0;height:2px;bottom:-4px;left:0;background-color:var(--primary-color);transition:width var(--transition-speed)}.nav-item:hover{color:var(--text-highlight)}.nav-item:hover:after{width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background-color:var(--primary-color);color:#fff;border:1.5px solid transparent;padding:.65rem 1.25rem;border-radius:8px;font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,border-color .15s ease,transform .1s ease,box-shadow .15s ease;box-shadow:0 2px 4px #00000014;text-decoration:none}.btn:hover{background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-glow)}.btn:active,.btn.clicked{background-color:var(--primary-active)!important;transform:translateY(1px) scale(.98);box-shadow:none!important}.btn:disabled,.btn.disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn.primary,.btn-primary{background-color:var(--primary-color);color:#fff;border-color:transparent}.btn.primary:hover,.btn-primary:hover{background-color:var(--primary-hover)}.btn.primary:active,.btn-primary:active{background-color:var(--primary-active)!important}.btn.secondary,.btn-secondary,.btn-outline{background-color:var(--secondary-bg);color:var(--primary-color);border-color:var(--secondary-border)}.btn.secondary:hover,.btn-secondary:hover,.btn-outline:hover{background-color:var(--secondary-hover);border-color:var(--primary-color)}.btn.secondary:active,.btn-secondary:active,.btn-outline:active{background-color:var(--secondary-active)!important;transform:translateY(1px) scale(.98)}.btn.success,.btn-success{background-color:var(--success-color);color:#fff;border-color:transparent}.btn.success:hover,.btn-success:hover{background-color:var(--success-hover);box-shadow:0 4px 12px #10b9814d}.btn.success:active,.btn-success:active{background-color:var(--success-active)!important;transform:translateY(1px) scale(.98)}.btn.danger,.btn-danger{background-color:var(--danger-color);color:#fff;border-color:transparent}.btn.danger:hover,.btn-danger:hover{background-color:var(--danger-hover);box-shadow:0 4px 12px #ef44444d}.btn.danger:active,.btn-danger:active{background-color:var(--danger-active)!important;transform:translateY(1px) scale(.98)}.btn.warning,.btn-warning{background-color:var(--warning-color);color:#fff;border-color:transparent}.btn.warning:hover,.btn-warning:hover{background-color:var(--warning-hover);box-shadow:0 4px 12px #f59e0b4d}.btn.warning:active,.btn-warning:active{background-color:var(--warning-active)!important;transform:translateY(1px) scale(.98)}.btn.ghost,.btn-ghost{background-color:transparent;color:var(--text-primary);border-color:transparent;box-shadow:none}.btn.ghost:hover,.btn-ghost:hover{background-color:var(--secondary-bg);color:var(--primary-color)}.btn.ghost:active,.btn-ghost:active{background-color:var(--secondary-hover)!important}.btn.google,.btn-google{background-color:#4285f4!important;color:#fff!important;border:1.5px solid #4285F4!important;box-shadow:0 2px 4px #4285f440}.btn.google:hover,.btn-google:hover{background-color:#3367d6!important;border-color:#3367d6!important;box-shadow:0 4px 12px #4285f466}.btn.google:active,.btn-google:active{background-color:#2a56c6!important;border-color:#2a56c6!important;transform:translateY(1px) scale(.98)}.btn.sm,.btn-sm{padding:.4rem .85rem;font-size:.85rem;border-radius:6px}.btn.lg,.btn-lg{padding:.85rem 1.6rem;font-size:1.05rem;border-radius:10px}.input-field{width:100%;padding:.8rem 1rem;background:var(--input-bg);border:1px solid var(--surface-border);color:var(--text-primary);border-radius:6px;font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.input-field:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--accent-glow)}.input-label{display:block;margin-bottom:.5rem;color:var(--text-secondary);font-size:.9rem;font-weight:500}.auth-container{max-width:400px;margin:4rem auto;padding:2.5rem;text-align:center}.auth-title{font-size:2rem;margin-bottom:2rem;color:var(--text-highlight)}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:2rem}.stat-card{padding:1.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:transform var(--transition-speed),box-shadow var(--transition-speed)}.stat-card:hover{transform:translateY(-5px);border-color:var(--primary-color);box-shadow:0 8px 30px var(--accent-glow)}.stat-card h3{margin:0;color:var(--text-secondary);font-size:1rem;text-transform:uppercase;letter-spacing:1px}.stat-value{font-size:2.5rem;font-weight:700;margin:1rem 0 0;color:var(--text-highlight);background:linear-gradient(90deg,var(--stat-gradient-start),var(--primary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}footer{text-align:center;padding:1.5rem;border-top:1px solid var(--surface-border);color:var(--text-secondary);background:var(--footer-bg);font-size:.9rem}.quantity-selector{display:flex;align-items:center;background:var(--quantity-bg);border:1px solid var(--surface-border);border-radius:8px;overflow:hidden;transition:all .2s ease;height:42px}.quantity-selector:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--accent-glow);background:#ffffff0d}.quantity-btn{background:transparent;border:none;color:var(--text-primary);width:40px;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;font-weight:500;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none}.quantity-btn:hover{background:var(--quantity-hover-bg);color:var(--text-highlight)}.quantity-btn:active{background:var(--quantity-active-bg)}.quantity-input{width:50px;height:100%;background:transparent;border:none;border-left:1px solid var(--surface-border);border-right:1px solid var(--surface-border);color:var(--text-primary);text-align:center;font-family:inherit;font-size:.95rem;font-weight:600;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield;outline:none}.quantity-input::-webkit-outer-spin-button,.quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dashboard-layout{display:flex;gap:2rem;margin-top:1rem;position:relative}.dashboard-layout>main{flex:1;min-width:0}.dashboard-row{display:flex;gap:1.5rem}.dashboard-row.wrap{flex-wrap:wrap}.dashboard-sidebar{width:250px;flex-shrink:0;padding:1.5rem;height:fit-content;max-height:calc(100vh - 6rem);position:sticky;top:80px;overflow-y:auto;box-sizing:border-box;z-index:40}.mobile-arrow{display:none}.dashboard-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;margin-bottom:2rem}.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1rem;border-radius:8px}.table-responsive table{min-width:800px}.dashboard-header-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}@media (max-width: 768px){.main-content{padding:1rem!important}.sidebar-header{display:flex!important;justify-content:space-between!important;align-items:center!important;cursor:pointer!important}.sidebar-header h3{border-bottom:none!important;margin:0!important;padding:0!important;font-size:1.2rem!important}.mobile-arrow{display:block!important;font-size:.8rem!important;color:var(--primary-color)!important;transition:transform .3s ease!important}.sidebar-links{max-height:0!important;overflow:hidden!important;transition:all .4s ease-in-out!important;margin:0!important;padding:0!important;opacity:0!important}.sidebar-links.show{max-height:1200px!important;margin-top:1.5rem!important;opacity:1!important;overflow-y:auto!important}.dashboard-stats-grid{grid-template-columns:1fr!important;gap:1rem!important}.vendor-card{width:100%!important;max-width:100%!important;box-sizing:border-box!important}.inline-flex-mobile-stack{flex-direction:column!important;align-items:stretch!important;gap:10px!important}.dashboard-header-row{flex-direction:column!important;align-items:flex-start!important;gap:1rem!important}.glass-panel[style*="width: '600px'"]{width:95vw!important;padding:1.5rem!important}.dashboard-layout,.dashboard-row{flex-direction:column!important;gap:1.5rem!important}.dashboard-sidebar{width:100%!important;min-width:100%!important;min-height:auto!important;height:auto!important;box-sizing:border-box;margin-bottom:2rem}.stat-card{min-width:100%!important;width:100%!important;flex:none!important;margin-bottom:.5rem;box-sizing:border-box}li{flex-direction:column!important;align-items:flex-start!important;gap:1.5rem!important}li>div:last-child{width:100%!important;justify-content:space-between!important}.main-content main>div:has(>.glass-panel){flex-direction:column!important;flex-wrap:nowrap!important;gap:1.5rem!important}.main-content main>div:has(>input){flex-direction:column!important;gap:10px!important}.navbar{display:flex!important;flex-direction:column!important;padding:1.5rem 1rem!important;gap:1.5rem!important}.navbar>div:first-child{width:100%!important;justify-content:space-between!important}.nav-links{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;width:100%!important;gap:1.2rem!important}.nav-item{font-size:1rem!important}.auth-container{margin:2rem 1rem!important;padding:2rem 1.5rem!important;width:auto!important;max-width:100%!important;box-sizing:border-box}form>div{width:100%!important}h2{font-size:1.8rem!important}.stat-value{font-size:2.2rem!important}:root{--container-margin: 1rem auto;--container-padding: 0 1rem}footer>div{display:flex!important;flex-wrap:wrap!important;gap:1rem!important;justify-content:center!important}}@media (max-width: 480px){.nav-brand{font-size:1.3rem!important}.stat-card{padding:1.2rem!important}}.skeleton-pulse{background:linear-gradient(90deg,#ffffff0d 25%,#ffffff1a 37%,#ffffff0d 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite}@keyframes skeleton-loading{0%{background-position:100% 50%}to{background-position:0% 50%}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center;background:var(--surface-color);border:1px dashed var(--surface-border);border-radius:12px;color:var(--text-secondary)}.portal-badge{font-size:.75rem;font-weight:700;padding:.25rem .6rem;border-radius:20px;text-transform:uppercase;letter-spacing:.8px;margin-left:.75rem;display:inline-flex;align-items:center;border:1px solid transparent}.portal-badge.customer{background:#3870e026;color:#58a6ff;border-color:#3870e066;box-shadow:0 0 10px #3870e026}.portal-badge.vendor{background:#2ea04326;color:#3fb950;border-color:#2ea04366;box-shadow:0 0 10px #2ea04326}.portal-badge.admin,.portal-badge.super-admin{background:#d26d0e26;color:#ff9800;border-color:#d26d0e66;box-shadow:0 0 10px #d26d0e26}.portal-badge.employee{background:#8b5cf626;color:#a78bfa;border-color:#8b5cf666;box-shadow:0 0 10px #8b5cf626}body.light-mode .portal-badge.customer{background:#3870e01a;color:#0284c7;border-color:#3870e04d}body.light-mode .portal-badge.vendor{background:#0478571a;color:#047857;border-color:#0478574d}body.light-mode .portal-badge.admin,body.light-mode .portal-badge.super-admin{background:#d977061a;color:#b45309;border-color:#d977064d}body.light-mode .portal-badge.employee{background:#6d28d91a;color:#7c3aed;border-color:#6d28d933}.status-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .8rem;border-radius:20px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.status-badge.pending{color:#d4a20b;background:#d4a20b1f;border:1px solid rgba(212,162,11,.3)}.status-badge.verified{color:#3fb950;background:#2ea0431f;border:1px solid rgba(46,160,67,.3)}.status-badge.unverified{color:#58a6ff;background:#58a6ff1f;border:1px solid rgba(88,166,255,.3)}.status-badge.blocked{color:#f85149;background:#f851491f;border:1px solid rgba(248,81,73,.3)}.nav-item.active{color:var(--text-highlight)!important;background:#2ea04326;border-left:3px solid var(--primary-color);border-radius:0 6px 6px 0;padding-left:.5rem}.interactive-card{transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease,border-color .2s ease}.interactive-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px #0006;border-color:#2ea0434d}body.light-mode .interactive-card:hover{box-shadow:0 12px 30px #94a3b826;border-color:#0596694d}.selectable-card{padding:1.2rem 1rem;border-radius:10px;border:2px solid var(--surface-border);background:#ffffff03;cursor:pointer;text-align:center;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:.4rem}.selectable-card:hover:not(.disabled){border-color:#2ea04380;background:#2ea04304}.selectable-card.active{border-color:var(--primary-color);background:#2ea04308;box-shadow:0 4px 12px #2ea04314}.selectable-card.disabled{border-color:#f8514933;background:#f8514905;cursor:not-allowed;opacity:.45}body.light-mode .selectable-card.active{background:#0596690d;box-shadow:0 4px 12px #0596691a}.order-card{padding:0;overflow:hidden;transition:box-shadow .2s,transform .2s;box-shadow:0 8px 32px #0000004d}.order-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0006}body.light-mode .order-card{box-shadow:0 8px 32px #94a3b81a}body.light-mode .order-card:hover{box-shadow:0 12px 40px #94a3b833}.btn-outline-success{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:6px;font-size:.78rem;font-weight:600;cursor:pointer;background:#2ea0431f;color:#3fb950;border:1px solid rgba(46,160,67,.35);font-family:inherit;transition:all .2s;white-space:nowrap}.btn-outline-success:hover{background:#2ea04338}.responsive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.skeleton-card{height:360px;border-radius:12px}.skeleton-row{height:90px;border-radius:10px}@media (max-width: 768px){.dashboard-layout main{padding:1.2rem!important}}.profile-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.profile-info-cell{background:#ffffff05;border:1px solid var(--surface-border);border-radius:12px;padding:1.2rem;transition:all .2s ease}.profile-info-cell:hover{background:#ffffff0a;border-color:#2ea04340}.profile-info-cell .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text-secondary);font-weight:700;margin-bottom:.4rem}.profile-info-cell .value{font-size:1rem;color:var(--text-highlight);font-weight:600;word-break:break-all}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999}.toggle-switch{position:relative;display:inline-block;width:50px;height:26px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ffffff1a;transition:.4s;border-radius:34px;border:1px solid var(--surface-border)}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--text-primary);transition:.4s;border-radius:50%;box-shadow:0 2px 4px #0000004d}input:checked+.toggle-slider{background-color:var(--primary-color);border-color:var(--primary-color);box-shadow:0 0 10px var(--accent-glow)}input:focus+.toggle-slider{box-shadow:0 0 10px var(--accent-glow)}input:checked+.toggle-slider:before{transform:translate(24px);background-color:#fff}body.light-mode .toggle-slider{background-color:#0000001a}.sticky-action-bar{position:fixed;bottom:2rem;right:2rem;left:calc(250px + 4rem);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;z-index:100;box-shadow:0 -4px 30px #0006}@media (max-width: 768px){.sticky-action-bar{left:1rem;right:1rem;bottom:1rem;flex-direction:column;gap:1rem;text-align:center}.sticky-action-bar button{width:100%}}