/* Arabic is the default. Mirror layout while keeping numeric charts readable. */
html[lang=ar] body{font-family:Tahoma,'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.65}
html[lang=ar] h1{letter-spacing:0;font-size:34px;line-height:1.5}
html[lang=ar] h2,html[lang=ar] .brand strong{letter-spacing:0}
html[lang=ar] .eyebrow,html[lang=ar] .nav-label,html[lang=ar] th{letter-spacing:0}
html[dir=rtl] .sidebar{right:0;left:auto}
html[dir=rtl] .sidebar nav button,html[dir=rtl] table{text-align:right}
html[dir=rtl] .count,html[dir=rtl] .step button,html[dir=rtl] .profile button{margin-left:0;margin-right:auto}
html[dir=rtl] .breadcrumb span{margin-left:0;margin-right:13px}
html[dir=rtl] .close{float:left}
html[dir=rtl] .event{border-left:1px solid #ffffff60;border-right:3px solid;text-align:right!important}
html[dir=rtl] .dot{margin-right:0;margin-left:6px}
html[dir=rtl] .day-track{border-left:0;border-right:1px solid #e7ece7}
html[dir=rtl] .calendar{direction:rtl}
html[dir=rtl] .event{direction:rtl}
html[dir=rtl] #toast{right:auto;left:30px}
.language-toggle{white-space:nowrap;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.login-form{position:relative}
.login-form>.language-toggle{position:absolute;top:28px;inset-inline-end:35px;width:auto}
.login-story{padding:40px 7%;gap:20px}
.login-story>.brand{flex-direction:column;align-items:flex-start;gap:18px}
.login-story>.brand img{width:180px;height:180px;box-shadow:0 12px 40px #081e2a35}
.login-story>.brand strong{font-size:31px}
.login-story>.brand small{font-size:12px}
.login-story h1{font-size:44px;margin:22px 0 15px}
html[lang=ar] .login-story h1{font-size:42px;line-height:1.55}
.login-story .partner-logos{gap:25px;margin:15px 0}
.login-story .partner-logos img{width:145px;height:145px;box-shadow:0 10px 35px #081e2a30}
.login-story .partner-logos img:last-child{width:160px;height:160px}
.login-story p{margin:10px 0;font-size:15px}
.login-marks{display:flex;justify-content:center;align-items:center;gap:18px;width:100%;margin:8px 0 15px}
.login-marks img{width:clamp(115px,10.5vw,175px);height:clamp(115px,10.5vw,175px);border-radius:50%;object-fit:contain;background:white;box-shadow:0 10px 30px #071f2930}
.login-marks img:nth-child(2){width:clamp(135px,12vw,195px);height:clamp(135px,12vw,195px)}
.login-story{justify-content:center;min-height:100vh}
.login-story>.brand{align-items:center;text-align:center;width:100%}
.login-story h1,html[lang=ar] .login-story h1{font-size:37px;margin-top:15px}
.login-story>div:last-child{margin-top:16px}
.login-story .side-caption{font-size:12px}
.chart-bars{display:grid;gap:24px}.bar-item{display:block;text-align:start;border:0;padding:0;background:transparent;width:100%;font-weight:400}
.bar-heading{display:flex;justify-content:space-between;gap:14px;margin-bottom:9px;font-size:14px}
.bar-heading strong{font-size:13px}.bar-heading small{color:var(--muted);font-weight:400}
.bar-track{display:block;background:#edf1ea;height:13px;border-radius:4px;overflow:hidden}.bar-track>span{display:block;height:100%;background:#197d79;border-radius:4px;min-width:0;transition:width .3s}
.bar-caption{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--muted)}
.load-chart{margin:5px 0}.load-chart svg{width:100%;display:block;direction:ltr;overflow:visible}.load-chart figcaption{text-align:center;font-size:12px;color:var(--muted)}
.mix-chart{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:20px;min-height:220px}.mix-chart svg{width:100%;direction:ltr}.mix-key{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #edf0e9;font-size:13px;gap:25px}
.summary-bar{display:grid;grid-template-columns:180px 1fr 75px;align-items:center;gap:20px;font-size:13px;padding:12px 0}.summary-bar strong{font-size:12px}
html[lang=ar] .topbar{height:86px}html[lang=ar] .nav-label{font-size:12px}html[lang=ar] .brand small{font-size:11px}html[lang=ar] .page-heading p{font-size:15px}html[lang=ar] .login-box h2{font-size:32px}
@media(max-width:1050px){.login-story>.brand img{width:150px;height:150px}.login-story .partner-logos img{width:120px;height:120px}.login-story .partner-logos img:last-child{width:130px;height:130px}.login-story h1,html[lang=ar] .login-story h1{font-size:36px}.summary-bar{grid-template-columns:140px 1fr 65px}}
@media(max-width:720px){html[dir=rtl] .sidebar{right:auto}.login-story{padding:28px;align-items:center;text-align:center}.login-story>.brand{align-items:center}.login-story>.brand img{width:145px;height:145px}.login-story h1,html[lang=ar] .login-story h1{font-size:28px;margin:10px 0}.login-story .partner-logos{display:flex;justify-content:center;gap:25px;margin:5px 0}.login-story .partner-logos img{width:110px;height:110px}.login-story .partner-logos img:last-child{width:120px;height:120px}.login-story .side-caption{display:block}.login-form{padding-top:85px}.login-form>.language-toggle{top:22px;inset-inline-end:25px}.mix-chart{grid-template-columns:145px 1fr;gap:14px}.summary-bar{grid-template-columns:100px 1fr 60px;gap:10px;font-size:11px}html[lang=ar] h1{font-size:28px}html[lang=ar] .topbar{height:auto}.bar-heading{font-size:12px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.topbar{align-items:center}.breadcrumb{max-width:40%}.language-toggle{font-size:12px}}
@media print{.language-toggle{display:none!important}}
@media(max-width:720px){.login-story{min-height:0;gap:8px}.login-marks{gap:10px}.login-marks img{width:96px;height:96px}.login-marks img:nth-child(2){width:115px;height:115px}.login-story h1,html[lang=ar] .login-story h1{font-size:25px}.login-story>.brand strong{font-size:24px}}
