:root{--primary:#2d60ff;--primary-soft:#2d60ff1a;--secondary:#718ebf;--bg-body:#f5f7fa;--bg-sidebar:#fff;--bg-card:#fff;--border-light:#e6eff5;--text-main:#343c6a;--text-muted:#718ebf;--success:#41d433;--warning:#feaa09;--error:#ff4b4a;--bd-yellow:#ffbb38;--bd-yellow-soft:#fff5d9;--bd-blue:#396aff;--bd-blue-soft:#e7edff;--bd-pink:#ff82ac;--bd-pink-soft:#ffe0eb;--sidebar-width:250px;--header-height:80px;--radius-sm:10px;--radius-md:15px;--radius-lg:20px;--radius-xl:30px;--radius-full:9999px;--card-shadow:0px 4px 10px #0000000d}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Outfit,sans-serif}body{background-color:var(--bg-body);color:var(--text-main);height:100vh;overflow-x:hidden}.app-container{height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background-color:var(--bg-sidebar);border-right:1px solid var(--border-light);z-index:1000;flex-direction:column;height:100vh;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0}.sidebar-profile{flex-direction:column;gap:1rem;padding:2.5rem 1.5rem 1rem;display:flex}.profile-avatar{background:#e7edff;border:2px solid #fff;border-radius:50%;width:80px;height:80px;overflow:hidden;box-shadow:0 4px 10px #0000001a}.profile-avatar img{object-fit:cover;width:100%;height:100%}.profile-info h3{color:#1a1d1f;margin-bottom:.2rem;font-size:1.1rem;font-weight:700}.profile-info p{color:#6f767e;font-size:.8rem;font-weight:500}.nav-divider{background:var(--border-light);opacity:.5;height:1px;margin:1rem 0}.nav-menu{flex:1;margin-top:1.5rem;flex-direction:column!important;gap:.5rem!important;padding:0 1rem!important;display:flex!important}.nav-item{color:#718ebf;border-radius:12px;align-items:center;gap:1rem;padding:.85rem 1.25rem;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);flex-direction:row!important;display:flex!important}.nav-item svg,.nav-item i{flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;transition:transform .2s;display:flex}.nav-item:hover{color:var(--primary);background:#f4f7fe}.nav-item.active{color:var(--primary);background:#f4f7fe;font-weight:700}.nav-item:hover svg{transform:translate(3px)}.nav-item:hover,.nav-item.active{color:#1a1d1f;background:#f4f4f4}.btn-signout{color:#1a1d1f;cursor:pointer;background:#f4f4f4;border:none;border-radius:15px;width:100%;padding:.85rem;font-size:.95rem;font-weight:700;transition:all .2s}.btn-signout:hover{background:#e8e8e8}@media (width<=1024px){.sidebar{border-radius:0 35px 35px 0;width:280px;transform:translate(-100%)}.sidebar.open{transform:translate(0)}}.logo{align-items:center;gap:.75rem;margin-bottom:2.5rem;padding:0 1.5rem;display:flex}.logo-text{color:var(--text-main);letter-spacing:-.3px;font-family:Outfit,sans-serif;font-size:1.15rem;font-weight:800;line-height:1.1}.nav-item i,.nav-item svg{width:22px;height:22px}.nav-item:hover{color:var(--primary);background:0 0;transform:none}.nav-item.active{color:var(--primary);box-shadow:none;background:0 0}.nav-item.active:before{content:"";background:var(--primary);border-radius:0 10px 10px 0;width:6px;height:60%;position:absolute;top:50%;left:0;transform:translateY(-50%)}.main-content{margin-left:var(--sidebar-width);background:var(--bg-body);flex:1;min-height:100vh;padding:2rem 2.5rem;transition:margin-left .3s}.mobile-menu-btn{background:var(--bg-body);color:var(--text-main);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;padding:.6rem;transition:all .2s;display:none}.close-sidebar-btn{color:var(--text-main);cursor:pointer;background:0 0;border:none;display:none;position:absolute;top:50%;right:0;transform:translateY(-50%)}@media (width<=1024px){.close-sidebar-btn{display:block}:root{--sidebar-width:260px}.mobile-menu-btn{display:flex!important}.sidebar{height:100vh;width:var(--sidebar-width);z-index:1000;transition:transform .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;left:0;transform:translate(-100%);box-shadow:0 0 40px #00000026;display:flex!important}.sidebar.open{transform:translate(0)}.view-container{padding:0 1.25rem 2rem!important}.view-header{flex-direction:column!important;align-items:flex-start!important;gap:1.25rem!important;margin-bottom:2rem!important}.view-header>div{width:100%;flex-direction:column!important;gap:1rem!important;display:flex!important}.search-box,.search-box input{width:100%!important}.btn{justify-content:center!important;width:100%!important}.main-content{width:100%;overflow-x:hidden;margin-left:0!important;padding:0!important}.sidebar-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;opacity:0;visibility:hidden;background:#00000080;transition:all .3s;position:fixed;inset:0}.sidebar-overlay.active{opacity:1;visibility:visible}.stats-grid{grid-template-columns:1fr!important;gap:1rem!important}.top-bar{z-index:900;height:auto;min-height:calc(80px + env(safe-area-inset-top,0px));background-color:var(--bg-sidebar);border:none;border-bottom:1px solid var(--border-light);border-radius:0;position:sticky;top:0;box-shadow:0 2px 10px #00000008;padding:calc(.75rem + env(safe-area-inset-top,0px)) 1rem .75rem!important;width:100%!important;margin:0!important}.sidebar{padding-top:calc(2rem + env(safe-area-inset-top,0px))!important}.top-bar h1{font-size:1.25rem!important}}@media (width<=768px){.hide-mobile,.top-bar-actions .search-box{display:none!important}.top-bar-actions{gap:.5rem!important}.view-header{flex-direction:column;gap:1rem;align-items:flex-start!important}.data-table-container{padding:.5rem;overflow-x:auto}.data-table th,.data-table td{padding:1rem .75rem!important;font-size:.85rem!important}}.top-bar{border-bottom:1px solid var(--border-light);background-color:#fff;justify-content:space-between;align-items:center;margin:-2.5rem -2.5rem 2.5rem;padding:1.5rem 2.5rem;display:flex}.top-bar h1{color:var(--text-main);font-family:Outfit,sans-serif;font-size:1.75rem;font-weight:800}.top-bar-actions{align-items:center;gap:1.5rem;display:flex}.btn-icon{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:.5rem;transition:background .2s;position:relative}.btn-icon:hover{color:var(--text-main);background:#ffffff1a}.notification-dot{background-color:var(--error);border:2px solid var(--bg-dark);border-radius:50%;width:8px;height:8px;position:absolute;top:6px;right:6px}.user-profile{align-items:center;gap:.75rem;display:flex}.stats-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem;display:grid}.stat-card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-light);transition:var(--transition-base);flex-direction:column;height:100%;padding:1.75rem;display:flex;position:relative;overflow:hidden}.stat-card:hover{box-shadow:var(--shadow-lg);border-color:var(--primary-light);transform:translateY(-4px)}.stat-header{justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem;display:flex}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.875rem;font-weight:600}.stat-icon-bg{border-radius:var(--radius-md);background:var(--bg-body);width:48px;height:48px;transition:var(--transition-fast);justify-content:center;align-items:center;font-size:1.25rem;display:flex}.stat-card:hover .stat-icon-bg{background:var(--primary-soft);color:var(--primary)}.stat-value{color:var(--text-main);letter-spacing:-.5px;margin-bottom:.5rem;font-size:1.75rem;font-weight:800}.stat-icon-bg{border-radius:var(--radius-sm);justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;display:flex}.stat-icon-bg.indigo{color:#818cf8;background:#4f46e533}.stat-icon-bg.emerald{color:#34d399;background:#10b98133}.stat-icon-bg.rose{color:#f87171;background:#ef444433}.stat-value{margin-bottom:.5rem;font-family:Outfit,sans-serif;font-size:2rem;font-weight:700}.stat-trend{font-size:.75rem;font-weight:600}.stat-trend.positive{color:var(--success)}.stat-trend.negative{color:var(--error)}.mini-chart{pointer-events:none;opacity:.3;width:100%;height:60px;position:absolute;bottom:0;left:0}.content-row{margin-top:2rem}.data-table-container{border-radius:var(--radius-lg);padding:1.5rem}.table-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.table-header h2{font-family:Outfit,sans-serif;font-size:1.25rem;font-weight:600}.search-box{background:#f5f7fa;border:none;border-radius:40px;align-items:center;gap:.75rem;width:320px;padding:.75rem 1.5rem;transition:all .3s;display:flex}.search-box svg{color:#8d96a5}.search-box input{color:var(--text-main);background:0 0;border:none;outline:none;width:100%;font-size:.85rem;font-weight:500}.search-box input::placeholder{color:#8d96a5}.data-table-container{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);padding:2rem}.data-table{border-collapse:separate;border-spacing:0;width:100%}.data-table th{text-align:left;color:#b1b1b1;border:none;padding:1rem;font-size:.8rem;font-weight:500}.data-table td{color:var(--text-main);border-top:1px solid #f2f4f7;padding:1.25rem 1rem;font-size:.85rem}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:#f8fafc}.btn{border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base);border:none;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;display:inline-flex}.btn-primary{color:#fff;background:#2d60ff;box-shadow:0 4px 12px #2d60ff4d}.btn-primary:hover{background:#1a4fd8;transform:translateY(-1px);box-shadow:0 6px 16px #2d60ff66}.btn-secondary{color:var(--text-main);border:1px solid var(--border-light);background:#fff}.btn-secondary:hover{background:var(--bg-body);border-color:var(--primary-light)}.status-pill{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px;justify-content:center;align-items:center;min-width:90px;padding:.35rem .85rem;font-size:.75rem;font-weight:700;display:inline-flex}.status-pill.paid{color:#15803d;background:#dcfce7}.status-pill.due{color:#a16207;background:#fef9c3}.status-pill.overdue{color:#b91c1c;background:#fee2e2}.status-pill.positive{color:#4338ca;background:#e0e7ff}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;opacity:0;pointer-events:none;width:100%;height:100%;transition:var(--transition-base);background:#0f172a99;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.modal-overlay.active{opacity:1;pointer-events:auto}.modal{border-radius:var(--radius-xl);width:90%;max-width:550px;box-shadow:var(--shadow-xl);border:1px solid var(--border-light);transition:var(--transition-slow);background:#fff;padding:2.5rem;transform:translateY(20px)}.modal-overlay.active .modal{transform:translateY(0)}.modal h3{color:var(--text-main);letter-spacing:-.5px;margin-bottom:1.5rem;font-size:1.75rem;font-weight:800}.modal label{margin-bottom:.5rem;font-size:.9rem;font-weight:500;display:block;color:var(--text-muted)!important}.modal input,.modal select,.modal textarea{border-radius:var(--radius-sm);border:1px solid var(--border-light);background:#fff;outline:none;width:100%;padding:.8rem 1rem;font-size:.95rem;color:var(--text-main)!important}.modal input:focus{border-color:var(--primary)}.modal-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.btn-close{width:35px;height:35px;color:var(--secondary);cursor:pointer;background:#f5f7fa;border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex}.btn-close i{width:18px;height:18px}.btn-close:hover{background:var(--primary);color:#fff;transform:rotate(90deg)}.modal-footer{justify-content:flex-end;gap:1rem;margin-top:2rem;display:flex}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-slide-in{animation:.5s forwards slideIn}.animate-fade-in{animation:.8s forwards fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-pop-in{animation:.3s cubic-bezier(.34,1.56,.64,1) forwards popIn}.loader{height:200px;color:var(--primary);height:200px;justify-content:center;align-items:center;gap:1rem;font-size:1.25rem;font-weight:600;display:flex}.loader:after{content:"";border:3px solid var(--primary-soft);border-top-color:var(--primary);border-radius:50%;width:24px;height:24px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.payment-row:hover{background:#f9fafb}#print-receipt-root{display:none}@media print{body>#root{display:none!important}#print-receipt-root{z-index:99999;background:#fff;position:fixed;inset:0;display:block!important}@page{margin:1.5cm;size:A5 portrait}}