:root{--color-bg:#0a0a0f;--color-surface:#13131a;--color-surface-elevated:#1c1c26;--color-surface-hover:#252532;--color-text:#f8f8fc;--color-text-secondary:#a5a5b8;--color-text-muted:#6b6b80;--color-primary:#6366f1;--color-primary-hover:#818cf8;--color-primary-active:#4f46e5;--color-primary-subtle:#6366f11a;--color-success:#22c55e;--color-success-subtle:#22c55e1a;--color-warning:#f59e0b;--color-warning-subtle:#f59e0b1a;--color-danger:#ef4444;--color-danger-subtle:#ef44441a;--color-info:#3b82f6;--color-info-subtle:#3b82f61a;--color-border:#252532;--color-border-subtle:#1c1c26;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.75;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--radius-sm:.375rem;--radius:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.25rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000004d;--shadow:0 1px 3px 0 #0006, 0 1px 2px -1px #0006;--shadow-md:0 4px 6px -1px #0006, 0 2px 4px -2px #0006;--shadow-lg:0 10px 15px -3px #0006, 0 4px 6px -4px #0006;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.2s cubic-bezier(.4, 0, .2, 1);--transition-slow:.3s cubic-bezier(.4, 0, .2, 1);--sidebar-width:16rem;--header-height:4rem}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text);background:var(--color-bg);min-height:100vh}.auth-page{min-height:100vh;padding:var(--space-6);background:radial-gradient(ellipse at top, var(--color-surface) 0%, var(--color-bg) 50%);justify-content:center;align-items:center;display:flex}.auth-container{width:100%;max-width:26rem}.auth-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-10);box-shadow:var(--shadow-lg)}.auth-header{text-align:center;margin-bottom:var(--space-8)}.auth-header h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-2);background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.auth-header p{color:var(--color-text-secondary);font-size:var(--font-size-lg)}.auth-form{gap:var(--space-5);flex-direction:column;display:flex}.form-group{gap:var(--space-2);flex-direction:column;display:flex}.form-group label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.form-input,.form-select{height:2.75rem;padding:0 var(--space-4);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-size-base);transition:all var(--transition-fast);font-family:inherit}.form-input:focus,.form-select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #6366f126}.form-input::placeholder{color:var(--color-text-muted)}.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:var(--space-10)}.form-select option{background:var(--color-surface);color:var(--color-text)}textarea.form-input{height:auto;min-height:5rem;padding:var(--space-3) var(--space-4);resize:vertical}.error-message{padding:var(--space-3) var(--space-4);background:var(--color-danger-subtle);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);font-size:var(--font-size-sm)}.btn{justify-content:center;align-items:center;gap:var(--space-2);height:2.5rem;padding:0 var(--space-5);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:none;text-decoration:none;display:inline-flex}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover);box-shadow:0 0 20px -5px #6366f166}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--color-surface-elevated);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-surface-hover);border-color:var(--color-text-muted)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:#dc2626}.btn-success{background:var(--color-success);color:#fff}.btn-success:hover{background:#16a34a}.btn-sm{height:2rem;padding:0 var(--space-3);font-size:var(--font-size-xs)}.btn-block{width:100%}.auth-footer{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-border);text-align:center}.demo-hint{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-4)}.demo-accounts{gap:var(--space-3);margin-bottom:var(--space-6);flex-direction:column;display:flex}.demo-account{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius);font-size:var(--font-size-sm);display:flex}.demo-account code{background:var(--color-surface-elevated);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--font-size-xs)}.demo-account small{color:var(--color-text-muted)}.mt-4{margin-top:var(--space-4)}.auth-footer a{color:var(--color-primary-hover);font-size:var(--font-size-sm);text-decoration:none}.auth-footer a:hover{text-decoration:underline}.role-badge{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;align-items:center;display:inline-flex}.role-badge.customer{background:var(--color-success-subtle);color:var(--color-success);border:1px solid #22c55e33}.role-badge.supplier{background:var(--color-info-subtle);color:var(--color-info);border:1px solid #3b82f633}.app{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-border);z-index:50;flex-direction:column;height:100vh;display:flex;position:fixed;overflow-y:auto}.sidebar-header{padding:var(--space-5);border-bottom:1px solid var(--color-border)}.sidebar-header h1{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-2);background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.sidebar-nav{padding:var(--space-3);gap:var(--space-1);flex-direction:column;flex:1;display:flex}.nav-link{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-decoration:none;display:flex}.nav-link:hover{background:var(--color-surface-elevated);color:var(--color-text)}.nav-link.active{background:var(--color-primary-subtle);color:var(--color-primary-hover)}.nav-link .icon{font-size:var(--font-size-lg)}.sidebar-footer{padding:var(--space-4);border-top:1px solid var(--color-border)}.user-info{margin-bottom:var(--space-3)}.user-info span{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);display:block}.user-info small{color:var(--color-text-muted);font-size:var(--font-size-xs)}.main-content{margin-left:var(--sidebar-width);padding:var(--space-8);max-width:calc(100% - var(--sidebar-width));flex:1;min-height:100vh}.view.hidden{display:none}.view h2{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-6)}.view-header{margin-bottom:var(--space-6);justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.view-header h2{margin-bottom:0}.stats-grid{gap:var(--space-5);margin-bottom:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));display:grid}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:all var(--transition-fast)}.stat-card:hover{border-color:var(--color-border-subtle);box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-value{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-primary-hover);margin-bottom:var(--space-1)}.stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.dashboard-section{margin-top:var(--space-8)}.dashboard-section h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-4);color:var(--color-text-secondary)}.status-bars{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}.status-bar{align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);display:flex}.status-bar:last-child{margin-bottom:0}.status-bar-label{width:6rem;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.status-bar-track{background:var(--color-surface-elevated);border-radius:var(--radius-full);flex:1;height:.5rem;overflow:hidden}.status-bar-fill{border-radius:var(--radius-full);height:100%;transition:width .3s}.status-bar-count{text-align:right;width:2.5rem;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.orders-list{gap:var(--space-3);flex-direction:column;display:flex}.order-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);cursor:pointer;transition:all var(--transition-fast)}.order-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.order-header{margin-bottom:var(--space-3);justify-content:space-between;align-items:center;display:flex}.order-id{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-primary-hover);font-weight:var(--font-weight-medium)}.order-status{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:capitalize;align-items:center;display:inline-flex}.order-status.draft{background:var(--color-surface-elevated);color:var(--color-text-secondary);border:1px solid var(--color-border)}.order-status.confirmed{background:var(--color-info-subtle);color:var(--color-info);border:1px solid #3b82f633}.order-status.processing{background:var(--color-warning-subtle);color:var(--color-warning);border:1px solid #f59e0b33}.order-status.shipped{color:#a855f7;background:#a855f71a;border:1px solid #a855f733}.order-status.delivered{background:var(--color-success-subtle);color:var(--color-success);border:1px solid #22c55e33}.order-status.cancelled{background:var(--color-danger-subtle);color:var(--color-danger);border:1px solid #ef444433}.order-info{gap:var(--space-6);font-size:var(--font-size-sm);color:var(--color-text-secondary);flex-wrap:wrap;display:flex}.order-total{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text);margin-top:var(--space-3)}.filter-bar{gap:var(--space-3);display:flex}.filter-bar select{min-width:10rem}.search-bar{gap:var(--space-3);margin-bottom:var(--space-6);display:flex}.search-bar input{flex:1;max-width:25rem}.products-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));display:grid}.product-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);transition:all var(--transition-fast)}.product-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.product-header{margin-bottom:var(--space-2);justify-content:space-between;align-items:flex-start;gap:var(--space-2);display:flex}.product-name{font-weight:var(--font-weight-semibold);font-size:var(--font-size-base);line-height:var(--line-height-tight)}.product-sku{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text-muted);flex-shrink:0}.product-description{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-3);line-height:var(--line-height-relaxed)}.product-meta{gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.product-tag{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2);background:var(--color-surface-elevated);border-radius:var(--radius-sm);color:var(--color-text-secondary)}.product-tag.organic{background:var(--color-success-subtle);color:var(--color-success)}.product-footer{padding-top:var(--space-4);border-top:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.product-price{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary-hover)}.product-unit{font-size:var(--font-size-sm);color:var(--color-text-muted)}.product-stock{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.order-builder{gap:var(--space-6);grid-template-columns:2fr 1fr;align-items:start;display:grid}.order-cart{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);top:var(--space-6);position:sticky}.order-cart h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-4)}.cart-items{margin-bottom:var(--space-4)}.cart-item{padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.cart-item:last-child{border-bottom:none}.cart-item-info{flex:1;min-width:0}.cart-item-name{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.cart-item-details{font-size:var(--font-size-xs);color:var(--color-text-muted)}.cart-item-quantity{align-items:center;gap:var(--space-2);display:flex}.cart-item-quantity button{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:1.75rem;height:1.75rem;color:var(--color-text);cursor:pointer;font-size:var(--font-size-base);transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.cart-item-quantity button:hover{background:var(--color-surface-hover);border-color:var(--color-text-muted)}.cart-item-quantity span{text-align:center;min-width:1.5rem;font-weight:var(--font-weight-medium);font-size:var(--font-size-sm)}.cart-item-price{text-align:right;min-width:4rem;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.cart-item-remove{color:var(--color-danger);cursor:pointer;font-size:var(--font-size-lg);padding:var(--space-1);transition:all var(--transition-fast);background:0 0;border:none;line-height:1}.cart-item-remove:hover{color:#dc2626}.cart-summary{padding:var(--space-4) 0;border-top:2px solid var(--color-border);margin-bottom:var(--space-4)}.summary-row{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);justify-content:space-between;align-items:center;display:flex}.total{color:var(--color-primary-hover)}.cart-items .empty{color:var(--color-text-muted);text-align:center;padding:var(--space-8) 0}.add-to-cart{gap:var(--space-2);align-items:center;display:flex}.add-to-cart input{text-align:center;width:3.5rem;padding:var(--space-1);height:2rem}.add-to-cart button{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm)}.customers-list{gap:var(--space-3);flex-direction:column;display:flex}.customer-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);transition:all var(--transition-fast)}.customer-card:hover{border-color:var(--color-border-subtle)}.customer-header{margin-bottom:var(--space-2);justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.customer-name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.customer-code{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-primary-hover);background:var(--color-primary-subtle);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.customer-info{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.customer-info p{margin-bottom:var(--space-1)}.modal{z-index:100;padding:var(--space-6);backdrop-filter:blur(4px);background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal.hidden{display:none}.modal-content{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);width:100%;max-width:37rem;max-height:90vh;box-shadow:var(--shadow-lg);overflow-y:auto}.modal-large{max-width:50rem}.modal-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.modal-header h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.modal-close{color:var(--color-text-muted);font-size:var(--font-size-2xl);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-md);width:2rem;height:2rem;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.modal-close:hover{background:var(--color-surface-elevated);color:var(--color-text)}.modal-body{padding:var(--space-6)}.modal-footer{justify-content:flex-end;gap:var(--space-3);padding:var(--space-5) var(--space-6);border-top:1px solid var(--color-border);flex-wrap:wrap;display:flex}.status-actions{gap:var(--space-2);flex-wrap:wrap;margin-right:auto;display:flex}.order-detail-header{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(2,1fr);display:grid}.detail-group label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1);font-weight:var(--font-weight-medium);display:block}.detail-group p{font-size:var(--font-size-sm);color:var(--color-text)}.order-items-table{border-collapse:collapse;width:100%;margin-bottom:var(--space-6)}.order-items-table th,.order-items-table td{text-align:left;padding:var(--space-3);border-bottom:1px solid var(--color-border)}.order-items-table th{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:var(--font-weight-semibold);background:var(--color-surface-elevated)}.order-items-table td{font-size:var(--font-size-sm)}.order-items-table .text-right{text-align:right}.order-total-section{padding-top:var(--space-4);border-top:2px solid var(--color-border);justify-content:flex-end;display:flex}.order-total-section .total{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold)}.loading,.empty{color:var(--color-text-muted);text-align:center;padding:var(--space-10);font-size:var(--font-size-base)}@media (width<=1024px){.order-builder{grid-template-columns:1fr}.order-cart{position:static}.stats-grid{grid-template-columns:repeat(2,1fr)}}.menu-toggle,.sidebar-overlay{display:none}@media (width<=768px){.menu-toggle{top:var(--space-4);left:var(--space-4);z-index:1000;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);padding:var(--space-2) var(--space-3);cursor:pointer;font-size:1.25rem;line-height:1;display:block;position:fixed}.sidebar-overlay{z-index:1009;background:#00000080;display:none;position:fixed;inset:0}.sidebar-overlay.open{display:block}.sidebar{transition:transform var(--transition-base);z-index:1010;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{max-width:100%;padding:var(--space-5);margin-left:0}.stats-grid{grid-template-columns:1fr}.view-header{gap:var(--space-4);flex-direction:column;align-items:flex-start}.products-grid{grid-template-columns:1fr}}@media (width<=480px){.auth-card{padding:var(--space-6)}.main-content{padding:var(--space-4)}.order-detail-header{grid-template-columns:1fr}.modal-footer{flex-direction:column-reverse}.status-actions{width:100%;margin-right:0}.status-actions .btn{flex:1}}.toast-container{top:var(--space-6);right:var(--space-6);z-index:2000;gap:var(--space-3);pointer-events:none;flex-direction:column;display:flex;position:fixed}.toast{padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);box-shadow:var(--shadow-lg);opacity:0;transition:all var(--transition-base);pointer-events:auto;max-width:24rem;transform:translate(1rem)}.toast-visible{opacity:1;transform:translate(0)}.toast-success{background:var(--color-success);color:#fff}.toast-error{background:var(--color-danger);color:#fff}.toast-info{background:var(--color-info);color:#fff}.hidden{display:none!important}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}::selection{color:var(--color-text);background:#6366f14d}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-surface-elevated);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-surface-hover)}