@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";:root{--bg:#f4f7fb;--card:#ffffff;--auth-bg: linear-gradient(135deg, #f8c2d3 0%, #7E238E 100%);--accent:#4f46e5;--muted:#6b7280;--danger:#ef4444;--radius:10px;--shadow: 0 6px 18px rgba(15,23,42,.06)}:root{--bg:#f4f7fb;--card:#ffffff;--accent:#4f46e5;--muted:#6b7280;--danger:#ef4444;--radius:10px;--shadow: 0 6px 18px rgba(15,23,42,.06)}*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Poppins,Inter,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:#0f172a;overflow-x:hidden}body.auth-page{background:var(--auth-bg)!important;background-attachment:fixed;color:#c7d2da}app-root{display:block;padding:0}.app-shell{display:flex;gap:18px;align-items:flex-start}.app-shell{min-height:100vh;display:flex;gap:8px;align-items:stretch}.sidebar{width:220px;padding:18px;background:linear-gradient(180deg,#fff,#fbfdff);border-radius:var(--radius);box-shadow:var(--shadow);height:100vh;position:sticky;top:0;margin-right:0}.main{flex:1;display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:20px}.main{overflow:auto}.sidebar h3{margin:0 0 12px;font-size:18px;color:var(--accent)}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar li{margin:8px 0}.sidebar a{color:#0f172a;text-decoration:none;padding:6px 8px;display:inline-block;border-radius:6px}.sidebar a.active,.sidebar a:hover{background:#4f46e514;color:var(--accent)}.sidebar .brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}.sidebar .logo{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.sidebar .brand .title{font-size:16px;font-weight:600}.sidebar nav{margin-top:6px}.sidebar .nav-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px}.sidebar .nav-item a{flex:1}.sidebar .nav-footer{position:absolute;inset:18px 18px 18px 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;align-items:center}.form-grid label{display:flex;flex-direction:column;align-items:flex-start}.form-grid input[disabled]{background:#f8fafc}.chart-wrap{width:100%;overflow:hidden}.card h2{margin:0 0 6px}.card p.muted{margin:0 0 12px}.dashboard-summary ul{margin:8px 0 0 16px;padding:0}.dashboard-summary{display:flex;flex-direction:column;align-items:flex-start}.bills-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.bills-filters input{width:320px}.dashboard-summary li{margin:6px 0}.main .card{width:100%;max-width:1200px;margin:0 auto}.card.card-fill{display:flex;flex-direction:column;flex:1 1 auto}.card.card-fill>.card-body{flex:1 1 auto;min-height:0;overflow:auto}.card.card-fill .data-table .table-wrap{max-height:none}.sidebar{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s cubic-bezier(.2,.8,.2,1)}.sidebar.closed{position:absolute;left:0;top:0;transform:translate(-100%);opacity:0;pointer-events:none;width:220px;height:100vh;z-index:1150}.app-shell>app-sidebar.closed-host{width:0!important;min-width:0!important;flex:0 0 0!important;padding:0!important;margin:0!important}.sidebar .sidebar-toggle{display:inline-flex;position:absolute;right:0;top:12px;background:#ffffff0f;border:0;color:#fff;font-size:14px;cursor:pointer;min-width:36px;height:36px;padding:6px 10px;border-radius:8px;align-items:center;justify-content:center;box-shadow:0 4px 10px #0206171f;white-space:nowrap}.mobile-open{position:fixed;left:12px;top:12px;z-index:1200;background:var(--accent);color:#fff;border:0;padding:8px 10px;border-radius:8px;box-shadow:var(--shadow);display:block}@media (max-width:800px){.app-shell{flex-direction:row}.sidebar{position:fixed;left:0;top:0;height:100vh;z-index:1100}.sidebar .sidebar-toggle,.mobile-open{display:block}.app-shell.sidebar-overlay .sidebar{transform:translate(0);opacity:1}.app-shell.sidebar-overlay .main{display:none}.app-shell>app-sidebar.closed-host{display:none!important}}.card table{width:100%;border-collapse:separate;border-spacing:0;background:transparent}.card thead th{padding:10px;text-align:left;font-weight:600;border-bottom:1px solid #e6eef8}.card tbody td{padding:10px;border-bottom:1px solid #f1f5f9}.card tbody tr:hover{background:#fbfdff}.data-table{border-radius:8px;overflow:hidden;border:1px solid #eef2ff}label{display:inline-flex;align-items:center;gap:8px;margin:6px 0;color:var(--muted)}input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],textarea,select{padding:8px 10px;border:1px solid #e6eef8;border-radius:8px;width:100%;max-width:420px;background:#fbfdff;color:#0f172a;transition:box-shadow .12s ease,border-color .12s ease,background .12s ease}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,input[type=date]:focus,textarea:focus,select:focus{box-shadow:0 6px 20px #4f46e514;border-color:var(--accent);outline:none;background:#fff}button{background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px;border:0;cursor:pointer}button[disabled]{opacity:.6;cursor:not-allowed}.btn-danger{background:var(--danger)}.invoice{max-width:1px;margin:0 auto}.invoice{width:100%}.invoice .row{display:flex;gap:12px;align-items:center}.invoice table{width:100%;border-collapse:collapse;margin-top:12px}.invoice th,.invoice td{padding:8px;border-bottom:1px solid #f1f5f9;text-align:left}.account p{margin:6px 0}@media (max-width:800px){.app-shell{flex-direction:column}.sidebar{width:100%;display:flex;align-items:center}}.muted{color:var(--muted)}table thead{font-size:14px}table tbody{font-size:13px}table th{background-color:#495057;color:#fff}.top-nav a{font-size:13px}.brand p{margin:0;font-size:.9rem;color:#64748b}
