:root{--color-accent:#1abc9c;--color-accent-hover:#16a085;--color-accent-glow:#1abc9c40;--color-bg:#1a252f;--color-surface:#2d4054;--color-surface-2:#253444;--color-border:#ffffff1a;--color-border-dark:#ffffff29;--color-text:#ecf0f1;--color-text-muted:#bdc3c7;--color-text-light:#7f8c8d;--color-primary:#2d4054;--color-primary-light:#3d5268;--color-primary-dark:#1a252f;--color-success:#1abc9c;--color-danger:#e74c3c;--color-warning:#f39c12;--color-info:#3498db;--sidebar-width:240px;--topbar-height:72px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 10px 40px #0009}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#2c3e50 0%,#1a252f 100%) fixed;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;line-height:1.5}a{color:inherit;text-decoration:none}input,select,textarea,button{font-family:inherit;font-size:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}#root{height:100%}.app-shell{background:0 0;height:100%;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);z-index:100;background:#253444;border-right:1px solid #ffffff12;flex-direction:column;flex-shrink:0;min-height:100%;transition:width .2s;display:flex;overflow:hidden auto}.sidebar-logo{border-bottom:1px solid #ffffff1a;justify-content:center;align-items:center;min-height:72px;padding:16px 20px;display:flex}.sidebar-logo-img{object-fit:contain;filter:brightness(0)invert()drop-shadow(0 0 4px #1abc9c40);width:auto;max-width:160px;max-height:64px}.sidebar-logo-icon{background:var(--color-accent);border-radius:var(--radius-md);width:36px;height:36px;box-shadow:0 0 10px var(--color-accent-glow);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-logo-text{color:#fff;font-size:15px;font-weight:700;line-height:1.2}.sidebar-logo-sub{color:#ffffff80;font-size:10px;font-weight:400}.sidebar-nav{flex:1;padding:12px 0}.sidebar-section-label{text-transform:uppercase;letter-spacing:.08em;color:#ffffff59;padding:12px 20px 6px;font-size:10px;font-weight:600}.sidebar-link{color:#ffffffb3;cursor:pointer;border-left:3px solid #0000;align-items:center;gap:10px;padding:10px 20px;font-size:13.5px;font-weight:500;text-decoration:none;transition:background .15s,color .15s;display:flex}.sidebar-link:hover{color:#fff;background:#ffffff0f}.sidebar-link.active{color:var(--color-accent);border-left-color:var(--color-accent);background:#1abc9c1f}.sidebar-link svg{flex-shrink:0}.sidebar-footer{border-top:1px solid #ffffff1a;padding:12px}.sidebar-user{border-radius:var(--radius-md);background:#ffffff12;align-items:center;gap:10px;padding:10px;display:flex}.sidebar-user-avatar{background:var(--color-accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:12px;font-weight:700;display:flex}.sidebar-user-info{flex:1;min-width:0}.sidebar-user-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.sidebar-user-role{color:#ffffff73;text-transform:capitalize;font-size:10px}.sidebar-logout-btn{cursor:pointer;color:#fff6;background:0 0;border:none;border-radius:4px;padding:4px;transition:color .15s,background .15s;display:flex}.sidebar-logout-btn:hover{color:#fff;background:#ffffff1a}.sidebar-hamburger{color:#fff9;cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;flex-shrink:0;margin-left:auto;padding:4px;display:none}.sidebar-hamburger:hover{color:#fff}.page-content{background:0 0;flex:1;min-width:0;padding:24px;overflow-y:auto}.mobile-topbar,.sidebar-overlay{display:none}@media (width<=768px){.mobile-topbar{z-index:150;background:#253444;border-bottom:1px solid #ffffff1a;flex-shrink:0;align-items:center;gap:12px;height:56px;padding:0 16px;display:flex;position:fixed;top:0;left:0;right:0}.mobile-topbar-hamburger{color:#fffc;cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;flex-shrink:0;align-items:center;padding:6px;display:flex}.mobile-topbar-hamburger:hover{background:#ffffff14}.mobile-topbar-logo{object-fit:contain;filter:brightness(0)invert();flex-shrink:0;width:auto;height:32px}.mobile-topbar-title{color:var(--color-text);text-align:right;flex:1;font-size:15px;font-weight:600}.sidebar{z-index:200;height:100%;transition:transform .25s;position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar.mobile-open{transform:translate(0)}.sidebar-overlay{z-index:199;background:#0000008c;display:block;position:fixed;inset:0}.sidebar-hamburger{display:none}.page-content{padding:72px 12px 16px}.form-grid-2,.form-grid-3{grid-template-columns:1fr}.filters-bar{flex-direction:column}.filters-bar .form-field{min-width:100%}.page-header{flex-direction:column;align-items:flex-start}.order-totals{min-width:100%}.table-wrapper{-webkit-overflow-scrolling:touch}.table th,.table td{white-space:nowrap}.card-body{padding:14px}.modal{max-height:calc(100vh - 72px);margin:8px}.modal-sm,.modal-md,.modal-lg,.modal-xl{max-width:100%}}@media (width<=480px){.page-content{padding:64px 10px 16px}.table th,.table td{padding:8px 10px;font-size:12px}.stat-value,.page-header-title h2{font-size:18px}}@media (width<=768px){.hide-mobile{display:none!important}}@media (width>=769px) and (width<=1024px){.page-content{padding:20px 16px}.form-grid-2{grid-template-columns:1fr}.form-grid-3{grid-template-columns:repeat(2,1fr)}.hide-tablet{display:none!important}}.cost-summary-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}@media (width<=480px){.cost-summary-grid{grid-template-columns:1fr 1fr}.cost-summary-grid .card:last-child{grid-column:1/-1}}@media (width<=768px){.page-header-actions{flex-wrap:wrap;gap:8px}.page-header-actions .btn{padding:8px 12px;font-size:12px}.page-header-actions .btn svg{width:14px;height:14px}}@media (width<=1024px){.order-line-table{min-width:800px}.order-line-table th,.order-line-table td{padding:8px 6px;font-size:12px}.order-line-table select,.order-line-table input{font-size:12px}}@media (width<=768px){.order-line-table{min-width:700px}.order-totals{width:100%;min-width:auto;margin-top:16px}.order-total-row{font-size:13px}.order-total-row.grand{font-size:15px}}@media (width<=1024px){.supplier-detail-grid{grid-template-columns:1fr}}@media (width<=768px){.supplier-products-table{min-width:800px}.supplier-products-table th,.supplier-products-table td{padding:8px 6px;font-size:12px}}@media (width<=480px){.modal-header h3{font-size:16px}.form-grid .form-field{margin-bottom:12px}.form-label{font-size:12px}.form-input{padding:10px 12px;font-size:13px}}.table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (width<=768px){.cost-summary-grid{gap:8px}.cost-summary-grid .card{padding:10px 12px}.cost-summary-grid .card div:first-child{font-size:10px}.cost-summary-grid .card div:last-child{font-size:14px}.users-table{min-width:600px}.avatar-picker{width:64px;height:64px}.avatar-picker div{font-size:22px}.suppliers-table{min-width:500px}.supplier-card-mobile{display:block}.supplier-table-desktop{display:none}}@media (width>=769px){.supplier-card-mobile{display:none}.supplier-table-desktop{display:table}}.btn{border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;border:none;outline:none;justify-content:center;align-items:center;gap:6px;font-weight:500;text-decoration:none;transition:background .15s,opacity .15s,box-shadow .15s;display:inline-flex}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:focus-visible{box-shadow:0 0 0 3px var(--color-accent-glow)}.btn-sm{padding:5px 12px;font-size:12px}.btn-md{padding:8px 16px;font-size:13.5px}.btn-lg{padding:11px 22px;font-size:15px}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:0 4px 14px var(--color-accent-glow)}.btn-secondary{color:var(--color-text);background:#ffffff14;border:1px solid #ffffff1f}.btn-secondary:hover:not(:disabled){background:#ffffff21}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626}.btn-success{background:var(--color-accent);color:#fff}.btn-success:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:0 4px 14px var(--color-accent-glow)}.btn-ghost{color:var(--color-text-muted);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--color-text);background:#ffffff12}.btn-icon{align-items:center;display:flex}.btn-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.form-field{flex-direction:column;gap:5px;display:flex}.form-label{color:var(--color-text);font-size:12.5px;font-weight:600}.form-input{border-radius:var(--radius-md);height:38px;color:var(--color-text);background:#1e2e3d;border:1.5px solid #ffffff1f;width:100%;padding:0 12px;font-size:13.5px;transition:border-color .15s,box-shadow .15s}.form-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow);outline:none}.form-input::placeholder{color:var(--color-text-light)}.form-input-error{border-color:var(--color-danger)!important}.form-select{appearance:auto;cursor:pointer;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.form-select option{color:#fff;background:#1a2a3a}.form-textarea{resize:vertical;height:auto;padding:10px 12px;line-height:1.5}.form-error{color:var(--color-danger);font-size:11.5px}.form-hint{color:var(--color-text-muted);font-size:11.5px}.form-grid{gap:16px;display:grid}.form-grid-2{grid-template-columns:1fr 1fr}.form-grid-3{grid-template-columns:1fr 1fr 1fr}@media (width<=640px){.form-grid-2,.form-grid-3{grid-template-columns:1fr}}.badge{text-transform:uppercase;letter-spacing:.04em;border-radius:100px;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.badge-default{color:var(--color-text);background:#ffffff1a}.badge-success{color:#1abc9c;background:#1abc9c2e}.badge-warning{color:#f39c12;background:#f39c122e}.badge-danger{color:#e74c3c;background:#e74c3c2e}.badge-info{color:#3498db;background:#3498db2e}.badge-muted{color:var(--color-text-muted);background:#ffffff12}.card{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:#2d4054;border:1px solid #ffffff14;overflow:hidden}.card-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.card-title{color:var(--color-text);font-size:14px;font-weight:600}.card-body{padding:20px}.table-wrapper{overflow-x:auto}.table{border-collapse:collapse;width:100%}.table th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);white-space:nowrap;background:#253444;border-bottom:1px solid #ffffff14;padding:10px 14px;font-size:11px;font-weight:600}.table td{vertical-align:middle;border-bottom:1px solid #ffffff0f;padding:12px 14px;font-size:13.5px}.table tbody tr:hover{background:#ffffff0a}.table tbody tr:last-child td{border-bottom:none}.table-clickable tbody tr{cursor:pointer}.modal-overlay{z-index:1000;background:#000000b3;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:#2d4054;border:1px solid #ffffff1a;flex-direction:column;width:100%;max-height:90vh;animation:.15s modal-in;display:flex}@keyframes modal-in{0%{opacity:0;transform:translateY(-12px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-sm{max-width:420px}.modal-md{max-width:560px}.modal-lg{max-width:760px}.modal-xl{max-width:1000px}.modal-header{border-bottom:1px solid #ffffff14;flex-shrink:0;justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.modal-title{font-size:16px;font-weight:600}.modal-close{cursor:pointer;color:var(--color-text-muted);border-radius:var(--radius-sm);background:0 0;border:none;align-items:center;padding:4px;transition:color .15s,background .15s;display:flex}.modal-close:hover{color:var(--color-text);background:#ffffff14}.modal-body{flex:1;padding:20px;overflow-y:auto}.modal-footer{border-top:1px solid #ffffff14;flex-shrink:0;padding:14px 20px}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.page-header-title h2{color:var(--color-text);font-size:22px;font-weight:700}.page-header-title p{color:var(--color-text-muted);margin-top:2px;font-size:13px}.page-header-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.search-bar{align-items:center;display:flex;position:relative}.search-bar-icon{color:var(--color-text-muted);pointer-events:none;z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-bar .form-input{padding-left:34px}.stat-card{border-radius:var(--radius-lg);background:#2d4054;border:1px solid #ffffff14;align-items:flex-start;gap:14px;padding:18px 20px;display:flex}.stat-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;display:flex}.stat-value{color:var(--color-text);font-size:24px;font-weight:700;line-height:1}.stat-label{color:var(--color-text-muted);margin-top:4px;font-size:12px}.empty-state{color:var(--color-text-muted);text-align:center;background:#ffffff05;flex-direction:column;justify-content:center;align-items:center;padding:60px 24px;display:flex}.empty-state-icon{opacity:.35;margin-bottom:16px}.empty-state h3{color:var(--color-text);margin-bottom:6px;font-size:16px;font-weight:600}.empty-state p{font-size:13px}.order-totals{border-radius:var(--radius-md);background:#253444;border:1px solid #ffffff1a;min-width:280px;padding:16px 20px}.order-total-row{justify-content:space-between;align-items:center;padding:4px 0;font-size:13.5px;display:flex}.order-total-row.grand{color:var(--color-accent);border-top:2px solid #1abc9c4d;margin-top:8px;padding-top:10px;font-size:16px;font-weight:700}.text-muted{color:var(--color-text-muted)}.text-sm{font-size:12px}.text-right{text-align:right}.font-mono{font-family:Courier New,monospace;font-size:12px}.flex{display:flex}.flex-1{flex:1}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.items-center{align-items:center}.justify-between{justify-content:space-between}.mb-4{margin-bottom:16px}.mt-4{margin-top:16px}.w-full{width:100%}.truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.login-page{background:linear-gradient(135deg,#2c3e50 0%,#1a252f 100%);justify-content:center;align-items:center;min-height:100%;padding:24px;display:flex}.login-card{text-align:center;background:#2d4054;border:1px solid #ffffff26;border-radius:15px;width:100%;max-width:400px;padding:40px 35px;box-shadow:0 10px 40px #000c}.login-logo{justify-content:center;align-items:center;gap:12px;margin-bottom:28px;display:flex}.login-logo-icon{background:var(--color-accent);border-radius:var(--radius-md);width:44px;height:44px;box-shadow:0 0 14px var(--color-accent-glow);justify-content:center;align-items:center;display:flex}.login-logo-text h2{color:var(--color-text);text-align:left;font-size:18px;font-weight:700}.login-logo-text p{color:var(--color-text-muted);text-align:left;font-size:12px}.login-logo-img{object-fit:contain;filter:brightness(0)invert()drop-shadow(0 0 6px #1abc9c4d);width:auto;max-width:180px;height:auto;max-height:80px}.login-form{flex-direction:column;gap:16px;display:flex}.login-form .form-input{text-align:center}.login-error{color:#e74c3c;border-radius:var(--radius-md);background:#e74c3c2e;border:1px solid #e74c3c4d;padding:10px 14px;font-size:13px}.filters-bar{flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:16px;display:flex}.filters-bar .form-field{flex:1;min-width:160px}.filters-bar .form-input{height:36px}.order-line-table{border-collapse:collapse;width:100%;font-size:13px}.order-line-table th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);background:#253444;border-bottom:1px solid #ffffff14;padding:8px 10px;font-size:11px;font-weight:600}.order-line-table td{vertical-align:middle;border-bottom:1px solid #ffffff0f;padding:6px}.order-line-table td .form-input{height:34px;font-size:13px}.order-line-table td .form-field{margin:0}.line-remove-btn{cursor:pointer;color:var(--color-text-light);background:0 0;border:none;border-radius:4px;padding:4px;transition:color .15s;display:flex}.line-remove-btn:hover{color:var(--color-danger)}.info-grid{grid-template-columns:1fr 1fr;gap:16px 24px;display:grid}@media (width<=640px){.info-grid{grid-template-columns:1fr}}.info-item label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;font-size:11.5px;font-weight:600;display:block}.info-item span{color:var(--color-text);font-size:14px;display:block}