@font-face{font-family:plex;src:url('assets/fonts/IBMPlexSansArabic-Regular (1).ttf')}@font-face{font-family:plex;src:url('assets/fonts/IBMPlexSansArabic-SemiBold.ttf');font-weight:700}*{box-sizing:border-box}body{margin:0;background:#f8faff;color:#101737;font-family:plex,Arial,sans-serif}.app-shell{min-height:100vh;display:flex;direction:rtl}.sidebar{width:258px;background:linear-gradient(145deg,#071629,#020813);color:#fff;padding:25px 14px 21px;display:flex;flex-direction:column;flex-shrink:0}.brand{display:block;width:157px;height:78px;object-fit:contain;filter:brightness(1.1);margin:0 auto 21px}.sidebar nav{display:grid;gap:8px}.nav-item{color:#fff;text-decoration:none;padding:13px 15px;border-radius:8px;font-size:16px;display:flex;align-items:center;gap:13px;white-space:nowrap}.nav-item span{font-family:Arial;font-size:24px;opacity:.95}.nav-item.active{background:linear-gradient(105deg,#7717fa,#14aefe)}.nav-separator{height:1px;background:#1a2a40;margin:16px 5px}.logout{margin-top:auto;border:0;background:transparent;color:#ff3f42;font:700 16px plex;cursor:pointer;padding:11px}.workspace{flex:1;min-width:0}.topbar{height:99px;display:flex;align-items:center;justify-content:space-between;direction:ltr;border-bottom:1px solid #e8ecf5;background:#fff;padding:0 27px;position:relative}.user-tools{display:flex;align-items:center;gap:18px;position:relative}.avatar{border:0;background:transparent;padding:0;cursor:pointer}.avatar img{width:55px;height:55px;border-radius:50%;object-fit:cover}.plain-icon{position:relative;border:0;background:transparent;color:#071129;font:bold 27px Arial;cursor:pointer}.plain-icon b{position:absolute;top:-13px;right:-9px;background:#4c08e9;color:white;border-radius:50%;font:12px Arial;padding:4px 6px}.user-menu{position:absolute;z-index:4;top:65px;left:-10px;width:194px;background:#fff;box-shadow:0 6px 18px #0f173026;border:1px solid #dce3ef;border-radius:10px;padding:9px}.user-menu button{width:100%;text-align:right;background:white;border:0;padding:11px;font:16px plex;cursor:pointer}.user-menu .danger{color:#f22;border-top:1px solid #eee}.month-picker{direction:rtl;border:1px solid #dce2ee;border-radius:8px;width:281px;height:57px;display:flex;align-items:center;justify-content:space-around;color:#101737}.month-picker button{font:34px Arial;border:0;background:transparent;cursor:pointer;color:#071129}.calendar{font-size:22px}.welcome{direction:rtl;display:grid;text-align:right;gap:4px}.welcome strong{font-size:20px}.welcome span{color:#56617c}.content{padding:27px 25px 18px;max-width:1440px;margin:auto}.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}.kpi{min-height:193px;background:#fff;border:1px solid #eff1f6;border-radius:14px;padding:21px;box-shadow:0 2px 8px #0e164507;display:grid;grid-template-columns:auto 1fr;align-content:start;column-gap:13px}.kpi i{width:49px;height:49px;display:grid;place-items:center;border-radius:50%;font-style:normal;font-size:25px}.kpi span{align-self:center;font-weight:700;color:#3e4970}.kpi strong{grid-column:2;font-size:24px;margin-top:5px;direction:ltr;text-align:right}.kpi small{grid-column:2;color:#33416a;font-weight:700}.kpi em{grid-column:1/-1;margin-top:18px;color:#00a85a;font-style:normal;font-size:13px}.purple i{background:#f5e9fa;color:#b44ab7}.orange i{background:#fff0dd;color:#fb972c}.green i{background:#e1f9ec;color:#0baf74}.cyan i{background:#e1f7fc;color:#16b3df}.violet i{background:#efe9ff;color:#6744f1}.grid{display:grid;gap:14px}.three{grid-template-columns:1fr 1fr 1fr}.panel{background:#fff;border:1px solid #eff1f6;border-radius:14px;min-height:300px;padding:18px 20px;box-shadow:0 2px 8px #0e164507}.panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.panel header h2{font-size:15px;margin:0}.panel header button{border:0;background:transparent;font-weight:bold;color:#1b2545;letter-spacing:1px}.panel>a{display:block;color:#4c08e9;text-decoration:none;font-weight:700;font-size:14px;margin-top:11px}.commitment-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #edf0f7;font-size:13px}.commitment-row i{width:25px;height:25px;border-radius:6px;background:#f0eaff;color:#5e21ee;display:grid;place-items:center;font-style:normal}.commitment-row span{flex:1}.commitment-row b{direction:ltr;font-size:12px}.donut-wrap{display:flex;align-items:center;justify-content:center;gap:22px}.legend{display:grid;gap:12px;font-size:12px;min-width:170px}.legend div{display:flex;gap:7px;align-items:center}.legend i{width:10px;height:10px;border-radius:3px}.legend b{margin-right:auto;font-weight:400}.donut{width:163px;height:163px;border-radius:50%;background:conic-gradient(#0f76ed 0 21%,#5146ef 21% 44%,#16c9ab 44% 62%,#10b7e5 62% 80%,#b845aa 80%);display:grid;place-items:center}.donut:before{content:'';position:absolute;width:112px;height:112px;border-radius:50%;background:#fff}.donut span{position:relative;z-index:1;font-weight:700;text-align:center;font-size:18px}.donut small{display:block;font-size:11px}.stepper{height:180px;display:flex;direction:rtl;align-items:flex-start;justify-content:space-between;position:relative}.stepper:before{content:'';position:absolute;top:26px;right:28px;left:28px;height:2px;background:#dbe0ed}.step{width:76px;position:relative;z-index:1;text-align:center;font-size:12px}.step b{width:28px;height:28px;border-radius:50%;background:#e9ecf5;display:grid;place-items:center;margin:12px auto 9px}.step.done b{background:#0ac775;color:#fff}.step.current b{background:#5a24ed;color:#fff}.step span{display:block;min-height:36px;font-weight:700}.step em{font-style:normal;color:#73809f;font-size:11px}.step.done em{color:#09aa68}.step.current em{color:#5a24ed}.primary-link{margin:auto;background:#5c19ed;color:white!important;width:max-content;padding:10px 22px;border-radius:5px}.lower{margin-top:14px}.lower .panel{min-height:256px}.gauge{direction:ltr;display:grid;grid-template-columns:1fr 170px 1fr;align-items:end;text-align:center;gap:8px;position:relative;padding-top:20px}.gauge .arc{position:absolute;width:166px;height:84px;border:20px solid #16c3e8;border-bottom:0;border-radius:166px 166px 0 0;left:50%;top:20px;transform:translateX(-50%)}.gauge .arc:after{content:'';display:block;width:25px;height:20px;background:#5c27ec;margin-left:-7px;margin-top:-20px;border-radius:20px 0 0}.gauge-center{position:absolute;left:50%;top:80px;transform:translateX(-50%);z-index:1;width:48px;height:48px;background:#f4f5fa;border-radius:50%;display:grid;place-items:center;font-size:22px}.gauge b{font-size:11px;display:block;min-height:31px}.gauge strong{font-size:18px;display:block}.gauge small{display:block;font-size:10px}.gauge em{color:#1764ed;font-style:normal;font-size:12px;font-weight:bold}.liquidity dl{margin:0}.liquidity dl div{display:flex;justify-content:space-between;padding:7px 0;font-size:13px}.liquidity dt{font-weight:700}.liquidity dd{margin:0;font-weight:bold}.positive{color:#00b766}.negative{color:#f2353a}.liquidity .balance{background:#eeecff;border-radius:6px;padding:8px 10px}.balance dd{color:#5420ed;font-size:17px}.alert-row{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:center;border-bottom:1px solid #edf0f7;padding:8px 0;font-size:12px}.alert-row i{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-style:normal;color:white}.alert-row b{display:block;font-size:13px}.alert-row span{color:#71809d;font-size:11px}.alert-row time{color:#627294;font-size:11px;direction:ltr}.red{background:#fa414a}.amber{background:#faab36}.blue{background:#1a80f4}footer{direction:rtl;color:#72809d;font-size:12px;margin-top:13px}@media(max-width:1200px){.sidebar{width:216px}.kpis{grid-template-columns:repeat(3,1fr)}.three{grid-template-columns:1fr 1fr}.lower .payments{grid-column:1/-1}}@media(max-width:830px){.sidebar{width:67px;padding:15px 8px}.brand{width:48px;height:48px}.nav-item{padding:12px;justify-content:center;font-size:0}.nav-item span{font-size:22px}.logout{font-size:0}.topbar{padding:0 12px}.welcome{display:none}.month-picker{width:220px}.content{padding:15px}.kpis,.three{grid-template-columns:1fr}.lower .payments{grid-column:auto}.panel{min-height:auto}.user-tools{gap:8px}}
.logout{text-decoration:none}

/* Phase 4 functional dialog. Its visual redesign is intentionally deferred. */
.app-dialog-overlay{position:fixed;inset:0;background:rgb(15 10 61 / .32);z-index:90}.app-dialog{position:fixed;z-index:91;top:50%;left:50%;width:min(420px,calc(100vw - 32px));transform:translate(-50%,-50%);padding:24px;border:1px solid #e3e7f0;border-radius:12px;background:#fff;color:#101737;box-shadow:0 20px 60px rgb(15 10 61 / .22);direction:rtl}.app-dialog h2{margin:0 0 9px;font-size:19px}.app-dialog p{margin:0 0 18px;color:#56617c;line-height:1.7}.app-dialog label{display:grid;gap:7px;font-weight:700;font-size:13px}.app-dialog input{height:40px;border:1px solid #dce3ee;border-radius:6px;padding:0 10px;font:14px plex}.app-dialog footer{display:flex;justify-content:flex-start;gap:9px;margin-top:22px}.app-dialog button{border:1px solid #dce3ee;border-radius:6px;background:#fff;padding:9px 15px;font:700 14px plex;cursor:pointer}.app-dialog button.primary{border-color:#5c20e9;background:#5c20e9;color:#fff}.app-dialog button.danger{border-color:#e04a50;background:#fff;color:#c53036}
/* Commitment form: focused, structured entry layout. */
.app-dialog--commitment{width:min(560px,calc(100vw - 32px));padding:0;overflow:hidden;border-radius:18px;border-color:#e5e9f3}.app-dialog--commitment .app-dialog-heading{padding:22px 24px 19px;background:linear-gradient(125deg,#fbf9ff,#f5fcff);border-bottom:1px solid #e8edf5;border-top:4px solid transparent;border-image:linear-gradient(90deg,#5624b4,#882cff,#39d5ff) 1}.app-dialog--commitment .app-dialog-heading span{display:block;margin-bottom:6px;color:#6d45c8;font-size:12px;font-weight:700}.app-dialog--commitment .app-dialog-heading h2{margin:0;color:#17234a;font-size:22px;font-weight:700}.app-dialog--commitment .app-dialog-heading p{margin:7px 0 0;color:#6c7890;line-height:1.7;font-size:13px}.app-dialog--commitment .app-dialog-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:21px 24px 0}.app-dialog--commitment .app-dialog-section-title{grid-column:1/-1;color:#253250;font-size:14px;font-weight:700;padding-bottom:4px;border-bottom:1px solid #edf0f5}.app-dialog--commitment label{gap:7px;color:#31405f;font-size:13px;font-weight:700}.app-dialog--commitment label:not(.app-dialog-field-half){grid-column:1/-1}.app-dialog--commitment .app-dialog-control{position:relative;display:flex;align-items:center}.app-dialog--commitment input,.app-dialog--commitment select{box-sizing:border-box;width:100%;height:46px;border-radius:10px;border-color:#dce4f0;background:#fff;padding-inline:12px;font-size:14px;color:#263552;outline:none;transition:border-color .15s,box-shadow .15s}.app-dialog--commitment input:focus,.app-dialog--commitment select:focus{border-color:#7c48e9;box-shadow:0 0 0 3px rgb(124 72 233 / .12)}.app-dialog--commitment .app-dialog-control em{position:absolute;inset-inline-end:11px;color:#76839b;font-size:12px;font-style:normal;pointer-events:none}.app-dialog--commitment .app-dialog-control:has(em) input{padding-inline-end:74px}.app-dialog--commitment label small{color:#7a879e;font-size:11px;font-weight:500;line-height:1.5}.app-dialog--commitment footer{grid-column:1/-1;margin-top:7px;padding:15px 0 20px;border-top:1px solid #edf0f5;justify-content:flex-start}.app-dialog--commitment footer button{height:44px;border-radius:10px;padding:0 18px}.app-dialog--commitment footer .primary{min-width:140px;background:linear-gradient(105deg,#5624b4,#882cff);border-color:transparent;box-shadow:0 7px 16px rgb(104 45 230 / .22)}@media(max-width:540px){.app-dialog--commitment .app-dialog-fields{grid-template-columns:1fr;padding-inline:18px}.app-dialog--commitment .app-dialog-field-half{grid-column:1/-1}.app-dialog--commitment .app-dialog-heading{padding-inline:18px}}
.settings-variable-tag{display:block;width:max-content;margin-top:5px;padding:3px 7px;border-radius:999px;background:#fff5df;color:#a96500;font-size:10px;font-weight:700}.settings-variable-value{display:grid;gap:2px;color:#5b27d9;font-weight:700}.settings-variable-value small{font-size:10px;color:#8a789b;font-weight:600}.settings-table-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.settings-monthly-edit{display:inline-flex;align-items:center;gap:5px;height:34px;border:1px solid #dacbff;border-radius:8px;background:#f9f6ff;color:#5e29d8;padding:0 9px;font:700 12px plex;cursor:pointer}.settings-monthly-edit:hover{background:#f0eaff}.settings-monthly-edit:disabled{opacity:.5;cursor:not-allowed}