@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap";:root{--brand-black:#09090b;--brand-amber:#e8a020;--brand-amber-d:#c8880a;--brand-green:#10b981;--brand-red:#ef4444;--primary-bg:#09090b;--sidebar-bg:#18181b;--content-bg:#fafafa;--card-bg:#fff;--hover-bg:#f4f4f5;--border-color:#e4e4e7;--border-strong:#d4d4d8;--text-primary:#09090b;--text-secondary:#52525b;--text-muted:#a1a1aa;--accent-color:var(--brand-amber);--accent-hover:var(--brand-amber-d);--accent-text:#09090b;--success-color:var(--brand-green);--success-bg:#10b98114;--danger-color:var(--brand-red);--danger-bg:#ef444414;--warning-color:#f59e0b;--warning-bg:#f59e0b14;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display:"Plus Jakarta Sans", sans-serif;--font-brand:"Outfit", sans-serif;--font-mono:"JetBrains Mono", monospace;--sidebar-width:240px;--header-height:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;height:100vh;overflow:hidden}body{font-family:var(--font-sans);background-color:var(--content-bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;width:100%;max-width:100%;height:100vh;font-size:14px;line-height:1.6;overflow:hidden}button,input,select,textarea{color:inherit;font-family:inherit}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#d1cfc8;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#b5b3ac}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-primary);letter-spacing:-.02em;font-weight:600;line-height:1.25}.app-container{width:100%;max-width:100%;height:100vh;display:flex;position:relative;overflow:hidden}.main-content{background:var(--content-bg);width:0;min-width:0;height:100vh;max-width:calc(100% - var(--sidebar-width));flex-direction:column;flex:1;display:flex;overflow:hidden auto}.page-wrapper{box-sizing:border-box;flex-grow:1;width:100%;min-width:0;max-width:1320px;margin:0 auto;padding:28px}.btn{cursor:pointer;border-radius:var(--radius-sm);white-space:nowrap;font-size:14px;font-weight:600;font-family:var(--font-sans);letter-spacing:.01em;border:1.5px solid #0000;justify-content:center;align-items:center;gap:8px;padding:10px 20px;text-decoration:none;transition:all .18s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--brand-amber);color:var(--accent-text);border-color:var(--brand-amber)}.btn-primary:hover:not(:disabled){background-color:var(--brand-amber-d);border-color:var(--brand-amber-d)}.btn-secondary{border-color:var(--border-color);color:var(--text-secondary);background-color:#0000}.btn-secondary:hover:not(:disabled){background-color:var(--hover-bg);color:var(--text-primary);border-color:var(--border-strong)}.btn-danger{background-color:var(--brand-red);color:#fff;border-color:var(--brand-red)}.btn-danger:hover:not(:disabled){opacity:.88}.btn-ghost{color:var(--text-secondary);background-color:#0000;border-color:#0000}.btn-ghost:hover:not(:disabled){background-color:var(--hover-bg);color:var(--text-primary)}.card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:24px;padding:24px}.form-group{margin-bottom:18px}.form-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.07em;font-size:12px;font-weight:600;font-family:var(--font-sans);margin-bottom:6px;display:block}.form-control{border:1.5px solid var(--border-color);border-radius:var(--radius-sm);width:100%;font-size:14px;font-family:var(--font-sans);color:var(--text-primary);background-color:#fff;outline:none;padding:10px 14px;transition:all .18s}.form-control:focus{border-color:var(--brand-amber);box-shadow:0 0 0 3px #e8a0201f}.form-control::placeholder{color:var(--text-muted)}.form-control:hover:not(:focus){border-color:var(--border-strong)}.form-error{color:var(--danger-color);margin-top:4px;font-size:12px}.table-container{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--card-bg);-webkit-overflow-scrolling:touch;width:100%;overflow-x:auto}.custom-table{border-collapse:collapse;text-align:left;width:100%;font-size:14px}.custom-table th{background-color:var(--hover-bg);text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);border-bottom:1px solid var(--border-color);white-space:nowrap;font-size:11px;font-weight:700;font-family:var(--font-sans);padding:13px 18px}.custom-table td{border-bottom:1px solid var(--border-color);vertical-align:middle;padding:13px 18px}.custom-table tbody tr:last-child td{border-bottom:none}.custom-table tbody tr:hover{background-color:var(--hover-bg)}.badge{text-transform:capitalize;white-space:nowrap;letter-spacing:.04em;font-size:11px;font-weight:700;font-family:var(--font-sans);border-radius:4px;justify-content:center;align-items:center;padding:3px 10px;display:inline-flex}.badge-active,.badge-published,.badge-approved,.badge-paid,.badge-selected,.badge-delivered{background-color:var(--success-bg);color:var(--success-color)}.badge-pending,.badge-draft,.badge-pending_payment,.badge-issued,.badge-l1_approved,.badge-l2_approved{background-color:var(--warning-bg);color:var(--warning-color)}.badge-blocked,.badge-cancelled,.badge-rejected,.badge-overdue{background-color:var(--danger-bg);color:var(--danger-color)}.badge-submitted{color:var(--text-primary);background-color:#11111112}.avatar{background-color:var(--hover-bg);color:var(--text-secondary);object-fit:cover;font-weight:700;font-family:var(--font-sans);border-radius:50%;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.empty-state{text-align:center;border:2px dashed var(--border-color);border-radius:var(--radius-lg);background-color:var(--card-bg);flex-direction:column;justify-content:center;align-items:center;padding:56px 24px;display:flex}.empty-state-icon{color:var(--text-muted);margin-bottom:16px}.empty-state h3{margin-bottom:8px;font-size:18px}.empty-state p{color:var(--text-secondary);max-width:340px;margin-bottom:20px;font-size:14px}.skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg,#f0eee9 25%,#e5e3de 50%,#f0eee9 75%) 0 0/200% 100%;animation:1.4s infinite loading-skeleton}@keyframes loading-skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.timeline-stepper{justify-content:space-between;margin-bottom:40px;display:flex;position:relative}.timeline-stepper:before{content:"";background-color:var(--border-color);z-index:1;height:2px;position:absolute;top:15px;left:0;right:0}.timeline-step{z-index:2;flex-direction:column;flex:1;align-items:center;display:flex;position:relative}.timeline-circle{background-color:var(--card-bg);border:2px solid var(--border-color);width:32px;height:32px;font-size:13px;font-weight:700;font-family:var(--font-sans);border-radius:50%;justify-content:center;align-items:center;transition:all .25s;display:flex}.timeline-step.active .timeline-circle{border-color:var(--brand-amber);background-color:var(--brand-amber);color:#111}.timeline-step.completed .timeline-circle{border-color:var(--success-color);background-color:var(--success-color);color:#fff}.timeline-step.rejected .timeline-circle{border-color:var(--danger-color);background-color:var(--danger-color);color:#fff}.timeline-label{color:var(--text-secondary);margin-top:8px;font-size:12px;font-weight:600}.timeline-step.active .timeline-label{color:var(--text-primary)}.spinner-container{justify-content:center;align-items:center;padding:56px;display:flex}.spinner{border:3px solid var(--border-color);border-top-color:var(--brand-amber);border-radius:50%;width:36px;height:36px;animation:.9s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-screen{z-index:9999;background-color:#111;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loading-logo{font-family:var(--font-brand);color:#fff;letter-spacing:.06em;margin-bottom:24px;font-size:30px;font-weight:800;animation:1.8s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.85}50%{opacity:1;color:var(--brand-amber)}}.toast-container{z-index:9999;flex-direction:column;gap:10px;display:flex;position:fixed;top:20px;right:20px}.toast{border:1px solid var(--border-color);border-left:3px solid var(--brand-amber);border-radius:var(--radius-sm);min-width:280px;font-size:14px;font-family:var(--font-sans);background-color:#fff;justify-content:space-between;align-items:center;padding:14px 18px;animation:.25s ease-out slide-in;display:flex;box-shadow:0 8px 24px #0000001a}@keyframes slide-in{0%{opacity:0;transform:translate(110%)}to{opacity:1;transform:translate(0)}}.toast-success{border-left-color:var(--success-color)}.toast-error{border-left-color:var(--danger-color)}.toast-info{border-left-color:var(--brand-amber)}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;display:grid}.comparison-grid{gap:16px;margin-bottom:24px;display:grid}.dashboard-split-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;display:grid}@media (width<=1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.comparison-grid{grid-template-columns:1fr!important}}.app-sidebar{width:var(--sidebar-width);background-color:var(--sidebar-bg);color:#fff;z-index:200;border-right:1px solid #334155;flex-direction:column;flex-shrink:0;height:100vh;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:sticky;top:0}.sidebar-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:190;background-color:#0006;display:none;position:fixed;inset:0}.sidebar-toggle-btn{cursor:pointer;color:var(--text-primary);border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;margin-right:12px;padding:6px;transition:background-color .2s;display:none}.sidebar-toggle-btn:hover{background-color:var(--hover-bg)}.sidebar-close-btn{cursor:pointer;color:#94a3b8;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:none}.sidebar-close-btn:hover{color:#fff;background-color:#ffffff14}.page-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px;display:flex}.form-grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.form-grid-3{grid-template-columns:1fr 1fr 1fr;gap:16px;display:grid}@media (width<=1024px){.app-sidebar{position:fixed;left:0;transform:translate(-100%)}.page-header{flex-direction:column;align-items:flex-start;gap:12px}.app-sidebar.open{transform:translate(0);box-shadow:4px 0 24px #00000040}.sidebar-backdrop.active{display:block}.sidebar-close-btn,.sidebar-toggle-btn{display:flex}.main-content{width:100%;max-width:100%;margin-left:0!important}.page-wrapper{padding:20px 16px}.dashboard-split-grid{gap:16px;grid-template-columns:1fr!important}}@media (width<=768px){.form-grid-3{grid-template-columns:1fr;gap:12px}}@media (width<=640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr!important}.form-grid-2{grid-template-columns:1fr;gap:12px}.page-wrapper{padding:16px 12px}.topbar-title{display:none!important}}
