@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@500;700;800&display=swap";:root{margin:0;padding:0}html,body,#root{width:100%;min-height:100%;margin:0;padding:0}:root{--bg-0:#edf3f6;--bg-1:#d7e3ea;--ink:#0f2233;--muted:#617687;--line:#d4dfe7;--brand:#1f6e89;--brand-2:#154d66}*{box-sizing:border-box}body{color:var(--ink);background:radial-gradient(circle at 12% 22%, #3598b633, transparent 42%), radial-gradient(circle at 80% 16%, #3f83a326, transparent 32%), linear-gradient(130deg, var(--bg-0), var(--bg-1));margin:0;font-family:Space Grotesk,sans-serif}.login-shell{place-items:center;min-height:100vh;padding:42px;display:grid}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:#76b8d4;margin:0 0 10px;font-size:.74rem;font-weight:700}.login-card{background:#fcfeffe6;border:1px solid #ffffffe6;border-radius:24px;align-self:center;gap:10px;width:min(470px,100%);padding:28px;display:grid;box-shadow:0 28px 66px #0c2e412b}.login-card h2{margin:0 0 6px;font-family:Manrope,sans-serif;font-size:2.1rem}.login-card label{color:#476375;font-size:.9rem;font-weight:700}.app-shell{grid-template-columns:248px 1fr;min-height:100vh;display:grid}.sidebar{color:#d8f1ff;background:linear-gradient(#062130,#0a3950 70%,#0b4562);padding:18px}.sidebar h2{margin:8px 8px 14px;font-size:1.03rem}.nav-tabs{gap:8px;display:grid}.logout-btn{background:linear-gradient(90deg,#7e1f1f,#b53939);width:100%;margin-top:12px}.menu-toggle,.menu-overlay{display:none}.sidebar button{color:#d6ebf7;text-align:left;background:0 0;border:1px solid #0000;border-radius:12px;padding:10px 12px}.sidebar button.active{color:#fff;background:linear-gradient(90deg,#1c799673,#33a4c93d);border-color:#5dc7e966;font-weight:800}.content{padding:24px}.page-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.page-header h1{margin:0;font-size:2rem}.badge{color:#215f76;background:#ffffffbd;border:1px solid #d4e6ef;border-radius:999px;padding:10px 14px;font-weight:800}.rule-pill{border:1px solid #0000;border-radius:999px;padding:4px 10px;font-size:.82rem;font-weight:800;display:inline-block}.rule-gross{color:#14506a;background:#e6f4fb;border-color:#b5d8ea}.rule-net{color:#1f6a34;background:#e8f7ec;border-color:#bde4c8}.rule-fixed{color:#5a2f8f;background:#f4ecff;border-color:#d8c3f6}.card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.card,.panel{background:#fafcfee6;border:1px solid #d8e3ea;border-radius:16px;padding:16px}.card h3{margin:0}.card strong{margin:8px 0 4px;font-size:2.2rem;display:block}.card p{color:var(--muted);margin:0}.panel h3{margin-top:0}.dashboard-hero{justify-content:space-between;align-items:end;gap:16px;margin-bottom:12px;display:flex}.dashboard-hero h3{margin:0 0 4px;font-size:1.4rem}.hero-controls{gap:8px;min-width:260px;display:grid}.dashboard-finance{margin-top:12px;margin-bottom:12px}.dashboard-charts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.chart-card{background:#fff;border:1px solid #d8e3ea;border-radius:12px;padding:12px}.chart-card h4{margin:0 0 10px}.donut-wrap{grid-template-columns:110px 1fr;align-items:center;gap:12px;display:grid}.donut{border-radius:50%;width:110px;height:110px;position:relative}.donut:after{content:"";background:#fff;border-radius:50%;position:absolute;inset:22px}.legend p{margin:0 0 6px;font-size:.85rem}.legend span{border-radius:999px;width:10px;height:10px;margin-right:6px;display:inline-block}.bars{gap:10px;display:grid}.bar-row{grid-template-columns:90px 1fr auto;align-items:center;gap:8px;display:grid}.bar-row p{margin:0;font-size:.86rem}.bar-track{background:#edf2f6;border-radius:999px;width:100%;height:10px;overflow:hidden}.bar-fill{border-radius:999px;height:100%}.form-row,.form-grid{gap:8px;margin-bottom:12px;display:grid}.form-row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.form-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}input,select,button{border:1px solid var(--line);font:inherit;background:#fff;border-radius:12px;padding:12px}input:focus,select:focus{border-color:#66afcc;outline:none;box-shadow:0 0 0 3px #53a6c233}button{background:linear-gradient(90deg, var(--brand-2), var(--brand));color:#fff;cursor:pointer;border:none;font-weight:800}small{color:#c22727;font-weight:700}.table-wrap{background:#fff;border:1px solid #d8e3ea;border-radius:12px;width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:680px}th,td{text-align:left;border-bottom:1px solid #e3ecf1;padding:11px;font-size:.93rem}th{color:#2b4b5c;background:#eef6fa}.modal-backdrop{z-index:99;background:#06121d8c;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal-card{background:#fff;border:1px solid #d8e3ea;border-radius:14px;width:min(620px,100%);padding:16px;box-shadow:0 24px 50px #00000040}.modal-card h3{margin-top:0}.modal-actions{justify-content:flex-end;gap:8px;margin-top:8px;display:flex}.mini-btn{border-radius:8px;margin-right:6px;padding:6px 10px;font-size:.82rem}.mini-btn.danger{background:linear-gradient(90deg,#9a2323,#c73a3a)}@media (width<=1150px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.login-shell{padding:24px}.login-card{width:min(520px,100%)}}@media (width<=900px){.app-shell{grid-template-columns:1fr}.menu-toggle{z-index:30;color:#fff;background:#0b4059;border:1px solid #ffffff40;border-radius:10px;place-items:center;width:42px;height:42px;font-size:1.25rem;display:grid;position:fixed;top:12px;left:12px}.menu-overlay{z-index:20;background:#00000073;display:block;position:fixed;inset:0}.sidebar{z-index:25;width:280px;padding:16px 12px;transition:transform .22s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar h2{margin:8px 8px 14px}.nav-tabs{grid-auto-columns:auto;grid-auto-flow:row;gap:8px;padding-bottom:2px;display:grid;overflow:visible}.nav-tabs button{white-space:nowrap;text-align:left;width:100%}.page-header{flex-direction:column;align-items:flex-start}.content{padding:64px 14px 14px}.card-grid{grid-template-columns:1fr}.dashboard-hero{flex-direction:column;align-items:stretch}.dashboard-charts{grid-template-columns:1fr}.hero-controls{min-width:100%}.form-row,.form-grid{grid-template-columns:1fr}table{min-width:560px}}@media (width<=600px){.login-shell{gap:16px;padding:14px}.login-card{border-radius:18px;padding:18px}.login-card h2{font-size:1.6rem}.page-header h1{font-size:1.5rem}}
