:root{--ink:#18382e;--muted:#697c73;--paper:#fffdfa;--canvas:#f3f7f2;--brand:#2b6a51;--brand-deep:#174534;--gold:#c38a30;--line:#dce6dd;--danger:#b53f36;--warning:#bc7a1d;--shadow:0 14px 38px rgba(24,56,46,.10);--radius:18px}*{box-sizing:border-box}html{background:var(--canvas)}body{margin:0;background:var(--canvas);color:var(--ink);font-family:Tajawal,Arial,sans-serif;font-size:15px;line-height:1.55}button,input,select,textarea{font:inherit}button{cursor:pointer}.startup{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:700;color:var(--brand-deep)}.spinner{border:3px solid #d9e7db;border-top-color:var(--brand);border-radius:50%;width:26px;height:26px;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}.login-hero{background:radial-gradient(circle at 20% 15%,#4b8a6d 0,#2b6a51 36%,#163e31 100%);color:#fff;padding:10vw;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.login-hero:after,.login-hero:before{content:"";position:absolute;border:1px solid #ffffff30;border-radius:50%;width:34rem;height:34rem;left:-16rem;bottom:-17rem}.login-hero:before{width:20rem;height:20rem;left:auto;right:-7rem;bottom:auto;top:-8rem}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.04em;color:#d8e8d8}.login-hero h1{font-size:clamp(36px,5vw,65px);line-height:1.1;margin:13px 0}.login-hero p{font-size:17px;max-width:31rem;color:#e3efe5}.login-card-area{display:flex;align-items:center;justify-content:center;padding:28px}.login-card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}.login-card h2{margin:0 0 6px;font-size:27px}.login-card p{margin:0 0 25px;color:var(--muted)}.app-shell{min-height:100vh;display:grid;grid-template-columns:265px minmax(0,1fr)}.sidebar{background:var(--brand-deep);color:white;padding:20px 13px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;padding:9px 12px 23px}.brand-mark{width:38px;height:38px;background:linear-gradient(135deg,#e0ba6c,#a96f21);border-radius:12px;display:grid;place-items:center;color:#24362b;font-weight:800;font-size:19px}.brand h1{font-size:19px;margin:0}.brand small{display:block;color:#bad0c1;font-size:12px}.nav{display:grid;gap:4px}.nav button{border:0;background:transparent;color:#d5e4da;border-radius:11px;text-align:right;padding:11px 13px;display:flex;align-items:center;gap:10px;font-weight:700;transition:.18s}.nav button:hover,.nav button.active{background:#ffffff18;color:white}.nav .nav-icon{width:22px;text-align:center;font-size:17px}.sidebar-foot{margin-top:auto;padding:15px 12px 4px;border-top:1px solid #ffffff1f;color:#c2d6c8;font-size:13px}.user-chip{display:flex;align-items:center;gap:9px;margin-bottom:10px}.avatar{width:33px;height:33px;border-radius:50%;background:#d9ae61;color:#24382d;display:grid;place-items:center;font-weight:800}.sidebar-foot button{width:100%;background:#ffffff12;color:#fff;border:1px solid #ffffff1f;border-radius:9px;padding:8px}.main{min-width:0}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#fffdfb;border-bottom:1px solid var(--line)}.topbar-title h2{font-size:22px;margin:0}.topbar-title span{color:var(--muted);font-size:13px}.mobile-nav{display:none;background:transparent;border:0;font-size:25px;color:var(--brand-deep)}.topbar-date{color:var(--muted);font-weight:700}.content{padding:28px 32px 48px;max-width:1500px}.page-heading{display:flex;gap:15px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}.page-heading h3{font-size:26px;margin:0}.page-heading p{margin:3px 0 0;color:var(--muted)}.actions{display:flex;gap:8px;flex-wrap:wrap}.button{border:1px solid transparent;border-radius:10px;padding:9px 14px;font-weight:800;transition:transform .16s,background .16s}.button:active{transform:scale(.97)}.button-primary{background:var(--brand);color:#fff}.button-primary:hover{background:var(--brand-deep)}.button-outline{background:#fff;color:var(--brand-deep);border-color:#bfd1c3}.button-danger{background:#fff4f3;border-color:#f0c9c6;color:var(--danger)}.button-icon{padding:7px 10px}.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:19px;box-shadow:0 4px 14px #214d3d08}.kpi-label{color:var(--muted);font-weight:700;font-size:13px}.kpi-value{font-size:27px;font-weight:800;margin:7px 0 3px;direction:ltr;text-align:right}.kpi-meta{font-size:12px;font-weight:700}.positive{color:#27764b}.negative{color:var(--danger)}.neutral{color:var(--muted)}.grid-two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.85fr);gap:17px;margin-top:17px}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 14px #214d3d08;padding:20px}.card h4{font-size:16px;margin:0 0 14px}.card-header{display:flex;justify-content:space-between;align-items:center;gap:10px}.card-header small{color:var(--muted)}.chart{height:260px;display:flex;gap:9px;align-items:end;padding:12px 4px 0;border-bottom:1px solid var(--line)}.bar-group{height:100%;flex:1;display:flex;align-items:end;gap:3px;position:relative}.bar{flex:1;border-radius:5px 5px 0 0;min-height:2px}.bar-revenue{background:#68a87b}.bar-expense{background:#e0b269}.bar-profit{background:var(--brand-deep)}.bar-label{position:absolute;bottom:-24px;right:0;font-size:10px;color:var(--muted);width:100%;text-align:center}.chart-legend{display:flex;gap:14px;margin-top:27px;color:var(--muted);font-size:12px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-left:4px}.notice{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}.notice:last-child{border:0}.notice strong{display:block;font-size:13px}.notice span{color:var(--muted);font-size:12px}.notice-icon{width:30px;height:30px;border-radius:9px;background:#fff5e7;color:var(--warning);display:grid;place-items:center}.toolbar{background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px;display:flex;gap:9px;flex-wrap:wrap;margin-bottom:15px}.toolbar .grow{flex:1;min-width:180px}.field{display:grid;gap:6px;margin-bottom:14px}.field label{font-weight:800;font-size:13px;color:#334d42}.input,.select,.textarea{width:100%;border:1px solid #cfdcd1;background:#fff;border-radius:9px;padding:10px 11px;color:var(--ink);outline:0;transition:border .16s,box-shadow .16s}.input:focus,.select:focus,.textarea:focus{border-color:#569277;box-shadow:0 0 0 3px #68a87b25}.textarea{min-height:85px;resize:vertical}.table-card{overflow:hidden;padding:0}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;white-space:nowrap}.data-table th,.data-table td{padding:13px 15px;text-align:right;border-bottom:1px solid #e7eee8}.data-table th{background:#f7faf6;color:#577066;font-size:12px;font-weight:800}.data-table td{font-size:13px}.data-table tr:last-child td{border-bottom:0}.table-actions{display:flex;gap:5px}.badge{padding:4px 8px;border-radius:99px;font-weight:800;font-size:11px}.badge-paid,.badge-active{background:#e7f6eb;color:#267044}.badge-partial{background:#fff4df;color:#a96712}.badge-unpaid,.badge-inactive{background:#fff0ef;color:#ad392e}.empty{padding:45px 20px;text-align:center;color:var(--muted)}.empty b{display:block;font-size:16px;color:var(--ink);margin-bottom:5px}.loading{padding:50px;text-align:center;color:var(--muted)}.modal-layer{position:fixed;inset:0;background:#10251d70;z-index:20;padding:20px;display:flex;align-items:center;justify-content:center}.modal{width:min(690px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fffdfa;border-radius:18px;box-shadow:0 25px 70px #10251d66}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 21px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fffdfa;z-index:1}.modal-head h3{margin:0;font-size:19px}.close{border:0;background:#eff4ef;color:var(--ink);width:31px;height:31px;border-radius:8px;font-size:18px}.modal-body{padding:20px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 13px}.form-grid .full{grid-column:1/-1}.modal-foot{display:flex;gap:8px;justify-content:flex-start;padding:16px 20px;border-top:1px solid var(--line)}.form-error{background:#fff0ef;color:var(--danger);padding:9px;border-radius:8px;font-weight:700;font-size:13px;margin-bottom:12px}.section-title{font-size:17px;font-weight:800;margin:25px 0 10px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.summary-item{background:#f7faf7;border-radius:12px;padding:12px}.summary-item span{display:block;color:var(--muted);font-size:12px;font-weight:700}.summary-item b{font-size:18px}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px}.tabs button{border:0;background:transparent;padding:10px 12px;color:var(--muted);font-weight:800;border-bottom:2px solid transparent}.tabs button.active{color:var(--brand-deep);border-color:var(--brand)}#toast-region{position:fixed;left:20px;bottom:20px;z-index:30;display:grid;gap:8px}.toast{min-width:260px;background:#163e31;color:#fff;padding:12px 15px;border-radius:11px;box-shadow:var(--shadow);animation:enter .2s ease-out}.toast.error{background:#a73730}@keyframes enter{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:900px){.login-wrap{grid-template-columns:1fr}.login-hero{display:none}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;right:0;top:0;bottom:0;z-index:15;width:270px;transform:translateX(105%);transition:transform .23s;height:auto;box-shadow:-15px 0 30px #0003}.sidebar.open{transform:translateX(0)}.mobile-nav{display:block}.topbar{padding:0 17px}.topbar-date{display:none}.content{padding:21px 17px}.kpi-grid,.summary-grid{grid-template-columns:1fr}.grid-two{grid-template-columns:1fr}.page-heading{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.modal-layer{padding:10px}.login-card-area{padding:18px}.login-card{box-shadow:none;border:0}.table-actions{opacity:1}.sidebar-foot{margin-top:auto}}@media(max-width:500px){.actions{width:100%}.actions .button{flex:1}.kpi-value{font-size:23px}.content{padding-bottom:30px}.topbar-title h2{font-size:18px}.toolbar .button{flex:1}.toolbar .grow{flex-basis:100%}}
