@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--primary:#4f46e5;--primary-hover:#4338ca;--secondary:#10b981;--secondary-hover:#059669;--success:#10b981;--danger:#ef4444;--danger-hover:#dc2626;--warning:#f59e0b;--bg-color:#0f172a;--card-bg:#1e293bb3;--sidebar-bg:#0f172a;--text-main:#f8fafc;--text-muted:#94a3b8;--border-color:#ffffff1a;--glass-shadow:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f}:root[data-theme=light]{--bg-color:#f8fafc;--card-bg:#fffc;--sidebar-bg:#fffffff2;--text-main:#0f172a;--text-muted:#64748b;--border-color:#0000001a;--glass-shadow:0 4px 6px -1px #0000000d, 0 2px 4px -1px #00000008}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);background-image:radial-gradient(at 0 0,#100f15 0,#0000 50%),radial-gradient(at 50% 0,#2f3e6a33 0,#0000 50%),radial-gradient(at 100% 0,#72274133 0,#0000 50%);background-attachment:fixed;min-height:100vh;font-family:Outfit,sans-serif;transition:background-color .3s,color .3s}:root[data-theme=light] body{background-image:radial-gradient(at 0 0,#e3e1ea 0,#0000 50%),radial-gradient(at 50% 0,#b8c2e04d 0,#0000 50%),radial-gradient(at 100% 0,#e5b3c54d 0,#0000 50%)}.app-container{min-height:100vh;display:flex}.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--border-color);z-index:100;flex-direction:column;gap:.25rem;width:280px;padding:1.5rem 1rem;display:flex;box-shadow:2px 0 10px #0000001a}.sidebar-logo{color:var(--primary);text-align:center;letter-spacing:.5px;background:linear-gradient(135deg, var(--primary), var(--secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:2rem;font-size:1.8rem;font-weight:800}.nav-link{color:var(--text-muted);cursor:pointer;text-align:left;white-space:nowrap;background:0 0;border:none;border-radius:.5rem;align-items:center;gap:.75rem;padding:.75rem 1rem;font-family:inherit;font-size:1rem;font-weight:500;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.nav-link:hover{color:var(--text-main);background:#ffffff0d}.nav-link.active{color:var(--primary);border-left:3px solid var(--primary);background:linear-gradient(90deg,#4f46e533 0%,#4f46e500 100%)}.main-content{flex:1;padding:2rem;position:relative;overflow-y:auto}.bottom-nav{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border-color);z-index:1000;height:65px;padding:0 1rem;display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 12px #0000001a}.bottom-nav-item{color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.25rem;transition:all .2s;display:flex}.bottom-nav-item span{font-size:.7rem;font-weight:500}.bottom-nav-item.active{color:var(--primary)}.bottom-nav-item.active svg{transform:translateY(-2px)}@media (width<=768px){.sidebar{display:none}.bottom-nav{display:flex}.main-content{padding:1rem 1rem 80px}.page-header{margin-bottom:1rem}}.page-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.page-title{font-size:1.8rem;font-weight:600}.btn{cursor:pointer;border:none;border-radius:.5rem;padding:.5rem 1.25rem;font-family:Outfit,sans-serif;font-weight:500;transition:all .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-success{background:var(--secondary);color:#fff}.btn-success:hover{background:var(--secondary-hover);transform:translateY(-1px)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:var(--danger-hover)}.glass-card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);box-shadow:var(--glass-shadow);border-radius:1rem;padding:1.5rem}.dashboard-grid{flex-wrap:nowrap;gap:1.5rem;margin-bottom:2rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.dashboard-grid>*{flex:1;min-width:200px}@media (width<=768px){.dashboard-grid{grid-template-columns:repeat(2,1fr);padding-bottom:0;display:grid;overflow-x:visible}.dashboard-grid>*{min-width:0}}.stat-card{flex-direction:column;gap:.5rem;display:flex}.stat-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.9rem;font-weight:500}.stat-value{font-size:2rem;font-weight:700}.stat-value.receivable{color:var(--secondary)}.stat-value.payable{color:var(--danger)}.form-group{margin-bottom:1rem}.form-label{color:var(--text-muted);margin-bottom:.5rem;font-size:.9rem;display:block}.form-control{border:1px solid var(--border-color);width:100%;color:var(--text-main);background:#0f172a99;border-radius:.5rem;padding:.75rem 1rem;font-family:Outfit,sans-serif;transition:border-color .2s,background .3s,color .3s}:root[data-theme=light] .form-control{background:#fff9}.form-control:focus{border-color:var(--primary);outline:none}select.form-control{appearance:none}.table-container{overflow-x:auto}.glass-table{border-collapse:collapse;text-align:left;width:100%}.glass-table th{color:var(--text-muted);border-bottom:1px solid var(--border-color);padding:1rem;font-weight:500}.glass-table td{border-bottom:1px solid #ffffff0d;padding:1rem}.glass-table tr:hover td{background:#ffffff05}.badge{border-radius:1rem;padding:.25rem .75rem;font-size:.8rem;font-weight:500}.badge-customer{color:var(--secondary);background:#10b9811a;border:1px solid #10b98133}.badge-supplier{color:var(--danger);background:#ef44441a;border:1px solid #ef444433}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#00000080;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{width:100%;max-width:500px;max-height:90vh;animation:.3s slideUp;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.modal-title{font-size:1.25rem;font-weight:600}.close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.5rem}.close-btn:hover{color:#fff}.modal-footer{justify-content:flex-end;gap:1rem;margin-top:2rem;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s fadeIn}
