/* Mostadel 2026 — presentation layer only. */
@font-face{font-family:MostadelCairo;src:url('../fonts/Cairo-Variable.ttf') format('truetype');font-weight:200 1000;font-display:swap}
:root{--sbp-heading:var(--sbp-primary);--sbp-muted:#64748b;--sbp-border:#e1e8ec;--sbp-radius:14px;--bs-primary:var(--sbp-primary);--bs-link-color:color-mix(in srgb,var(--sbp-accent),black 38%);--bs-link-hover-color:var(--sbp-primary);--mostadel-teal:var(--sbp-accent);--mostadel-gold:#c7a75b;--sbp-sidebar-width:268px}
body{font-family:'DIN Next Arabic',MostadelCairo,sans-serif;background:#f7f9fa;color:#24344f;line-height:1.7}
h1,h2,h3,h4,h5,h6{color:var(--sbp-primary);letter-spacing:-.025em}
a,button,input,select,textarea{touch-action:manipulation}
:focus-visible{outline:3px solid var(--sbp-accent)!important;outline-offset:3px}
.app-sidebar{background:var(--sbp-primary);box-shadow:none;border-left:1px solid #243558}
.sidebar-brand{min-height:108px;justify-content:center;background:#f5f8f8;padding:16px 24px;border-bottom:3px solid var(--sbp-accent)}
.mostadel-sidebar-logo{width:190px;height:auto;object-fit:contain}
.mostadel-sidebar-mark{display:none;object-fit:contain}
.sidebar-scroll{padding:20px 14px;scrollbar-width:thin;scrollbar-color:#3b506c transparent}
.sidebar-section{margin-bottom:12px}
.sidebar-section-toggle{min-height:46px;color:#e1e7ef;font-weight:600}
.sidebar-section-toggle[aria-expanded=true]{color:color-mix(in srgb,var(--sbp-accent),white 30%);background:#ffffff08}
.sidebar-link{min-height:43px;margin-top:4px;padding:10px 12px;color:#d0d9e7;font-weight:500}
.sidebar-link.active{color:#fff;background:color-mix(in srgb,var(--sbp-accent) 15.29%,transparent);box-shadow:inset -3px 0 var(--sbp-accent);border-radius:7px}
.sidebar-link.active i{color:color-mix(in srgb,var(--sbp-accent),white 35%)}
.sidebar-link:hover,.sidebar-section-toggle:hover{background:#ffffff0d}
.top-navbar{min-height:84px;padding:14px 30px;background:#fff;backdrop-filter:none}
.page-eyebrow{color:#64748b;font-size:.72rem;margin-bottom:6px}
.page-title{font-size:1.2rem}
.user-menu{border-color:#e7ecef;border-radius:12px;padding:8px 12px;gap:12px}
.user-photo{border-radius:50%}
.content-area{padding:28px 30px}
.panel,.stat-card{border-color:#e1e8ec;box-shadow:0 4px 16px color-mix(in srgb,var(--sbp-primary) 1.57%,transparent);border-radius:14px}
.panel>.border-bottom{padding:20px!important}
.mostadel-welcome{background:#fff;border-inline-start:4px solid var(--sbp-accent);position:relative;padding:30px!important}
.mostadel-welcome h2{font-size:1.6rem!important;margin-top:10px!important;margin-bottom:10px!important}
.mostadel-welcome .text-primary{color:color-mix(in srgb,var(--sbp-accent),black 38%)!important;font-size:.8rem}
.stat-card{padding:24px!important;min-height:128px}
.stat-card::before{width:0}
.stat-card:after{content:'';position:absolute;bottom:0;inset-inline:24px;height:3px;background:var(--sbp-accent);border-radius:3px 3px 0 0;opacity:.6}
.stat-card .stat-card-number{font-size:2rem;line-height:1.45;color:var(--sbp-primary);margin-top:8px}
.stat-card .icon-btn{background:color-mix(in srgb,var(--sbp-accent) 10%,white)!important;color:color-mix(in srgb,var(--sbp-accent),black 30%)!important;width:44px;height:44px;border-radius:12px}
.stat-card .small{font-size:.84rem}
.btn{border-radius:8px;font-weight:600;padding:.55rem .95rem}
.btn-primary{--bs-btn-bg:var(--sbp-primary);--bs-btn-border-color:var(--sbp-primary);--bs-btn-hover-bg:color-mix(in srgb,var(--sbp-primary),white 12%);--bs-btn-hover-border-color:color-mix(in srgb,var(--sbp-primary),white 12%);--bs-btn-active-bg:var(--sbp-primary);--bs-btn-active-border-color:var(--sbp-primary);--bs-btn-disabled-bg:#64748b;--bs-btn-disabled-border-color:#64748b;--bs-btn-focus-shadow-rgb:58,171,164}
.btn-outline-primary{--bs-btn-color:var(--sbp-primary);--bs-btn-border-color:#c2ccd8;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--sbp-primary);--bs-btn-hover-border-color:var(--sbp-primary);--bs-btn-active-bg:var(--sbp-primary);--bs-btn-active-border-color:var(--sbp-primary)}
.form-control,.form-select{border-color:#dce4e9;border-radius:8px;min-height:42px}
.form-control:focus,.form-select:focus{border-color:var(--sbp-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--sbp-accent) 9.41%,transparent)}
.form-check-input:checked{background-color:var(--sbp-primary);border-color:var(--sbp-primary)}
.table{--bs-table-striped-bg:#f7f9fa;--bs-table-hover-bg:#eff7f6;color:#293b53}
.table>:not(caption)>*>*{padding:14px 18px;border-bottom-color:#e9eef1}
.table thead th{background:#f2f6f7;color:#526278;font-size:.8rem;font-weight:700;white-space:nowrap}
.table tbody .text-center.py-4{padding:48px 20px!important;color:#64748b!important}
.nav-pills .nav-link.active,.page-item.active .page-link{background:var(--sbp-primary);border-color:var(--sbp-primary)}
.nav-link,.page-link{color:color-mix(in srgb,var(--sbp-accent),black 38%)}
.dropdown-menu{border-color:#e1e8ec;border-radius:12px;padding:8px}
.dropdown-item{border-radius:6px;padding:9px 12px}
.dropdown-item:active{background:var(--sbp-primary)}
.service-phase-card.is-current{background:color-mix(in srgb,var(--sbp-accent) 8%,white);border-color:var(--sbp-accent);color:color-mix(in srgb,var(--sbp-accent),black 38%);box-shadow:inset 0 3px var(--sbp-accent)}
.service-phase-card.is-current .service-phase-card__number{background:color-mix(in srgb,var(--sbp-accent),black 38%)}
.service-phase-step.is-current .service-phase-step__status{color:color-mix(in srgb,var(--sbp-accent),black 38%)}
.service-phase-badge.is-current{background:color-mix(in srgb,var(--sbp-accent) 14%,white);color:color-mix(in srgb,var(--sbp-accent),black 38%)}
.app-footer{padding:20px 30px;font-size:.73rem;border-top:1px solid #e9eef1;margin:0 30px}
.auth-shell{background:#f7f9fa}
.auth-card{box-shadow:0 12px 45px color-mix(in srgb,var(--sbp-primary) 3.14%,transparent);border-radius:16px;border-color:#e1e8ec}
.login-page{background:#f7f9fa;overflow:auto;color:var(--sbp-primary)}
.login-page:before,.login-page:after,.login-shell:before,.login-card:before,.login-hero-content:before,.login-hero-content:after{display:none}
.login-shell{height:auto;min-height:calc(100vh - 52px);grid-template-columns:1fr 1fr;grid-template-areas:'panel hero';gap:0}
.login-panel{background:#f7f9fa;padding:48px;min-height:calc(100vh - 52px)}
.login-card{max-width:440px;width:100%;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;overflow:visible}
.login-card-brand{margin-bottom:38px;justify-content:flex-start}
.mostadel-login-logo{display:block;width:220px;height:auto;object-fit:contain}
.login-heading{margin-bottom:28px}
.login-eyebrow{background:color-mix(in srgb,var(--sbp-accent) 10%,white);color:color-mix(in srgb,var(--sbp-accent),black 38%);border:0;font-size:.75rem;padding:5px 10px}
.login-heading h1{font-size:2rem;color:var(--sbp-primary);margin:16px 0 8px;font-weight:800}
.login-heading p{color:#64748b;font-size:.9rem;line-height:1.8}
.login-form .form-label{font-size:.85rem;color:var(--sbp-primary);margin-bottom:9px}
.login-form .mb-3{margin-bottom:22px!important}
.login-input-group{background:#fff;border:1px solid #d5dfe6;border-radius:9px;box-shadow:none}
.login-input-group:focus-within{border-color:var(--sbp-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--sbp-accent) 9.02%,transparent)}
.login-input-group .form-control{min-height:52px;background:transparent;border:0;box-shadow:none;color:var(--sbp-primary);font-size:.9rem}
.login-input-icon,.password-toggle{color:#64748b;background:transparent}
#email{direction:ltr;text-align:right}
.login-options{margin:5px 0 26px;font-size:.8rem}
.login-options a{color:color-mix(in srgb,var(--sbp-accent),black 38%)}
.login-submit{background:var(--sbp-primary);border:1px solid var(--sbp-primary);box-shadow:0 6px 14px color-mix(in srgb,var(--sbp-primary) 7.06%,transparent);border-radius:9px;min-height:52px;font-size:.95rem}
.login-submit:hover{background:color-mix(in srgb,var(--sbp-primary),white 12%);transform:none;box-shadow:none}
.login-security-note{margin-top:24px;border-top:1px solid #e0e7ec;padding-top:20px;color:#64748b;font-size:.75rem}
.login-security-note i{color:color-mix(in srgb,var(--sbp-accent),black 20%)}
.login-hero{background:var(--sbp-primary);min-height:calc(100vh - 52px);padding:40px 64px;display:flex;align-items:center;overflow:hidden}
.login-hero-content{width:100%;max-width:620px;margin:auto;gap:24px}
.mostadel-hero-top,.mostadel-hero-bottom{display:flex;justify-content:space-between;gap:16px;font-size:.73rem;color:#b7c6d9}
.mostadel-hero-top{border-bottom:1px solid #ffffff20;padding-bottom:20px}
.mostadel-hero-top [lang=en]{letter-spacing:.2em;color:color-mix(in srgb,var(--sbp-accent),white 24%)}
.mostadel-hero-logo{width:136px;height:136px;object-fit:contain;align-self:flex-start;margin:4px 0}
.login-hero-kicker{color:#d6bd85;background:transparent;border:0;border-radius:0;padding:0;letter-spacing:.02em;font-weight:500}
.login-hero-copy h2{font-size:clamp(2.3rem,3.5vw,3.8rem);line-height:1.45;margin:12px 0 18px;font-weight:700;max-width:none}
.login-hero-copy h2 em{font-style:normal;color:color-mix(in srgb,var(--sbp-accent),white 24%)}
.login-hero-copy p{font-size:.92rem;line-height:2;color:#bdcadd;max-width:440px}
.mostadel-visual{border-bottom:1px solid #ffffff20;padding:5px 0 20px;display:flex;align-items:end;justify-content:space-between;gap:20px}
.mostadel-visual>span{color:#a3b7cd;font-size:.72rem}
.mostadel-bars{height:94px;display:flex;align-items:flex-end;gap:12px;direction:ltr}
.mostadel-bars i{display:block;width:25px;background:var(--sbp-accent);clip-path:polygon(0 15px,100% 0,100% 100%,0 100%)}
.mostadel-bars i:nth-child(1){height:30px;opacity:.35}.mostadel-bars i:nth-child(2){height:46px;opacity:.5}.mostadel-bars i:nth-child(3){height:62px;opacity:.65}.mostadel-bars i:nth-child(4){height:78px;opacity:.8}.mostadel-bars i:nth-child(5){height:94px}
.login-footer{position:static;padding:16px 32px;margin:0;background:#f7f9fa;color:#64748b;min-height:52px;font-size:.7rem}
.login-loading-overlay{background:color-mix(in srgb,var(--sbp-primary) 96.08%,transparent)}
.login-loading-logo{box-shadow:none;animation:none;background:#f7f9fa}
.login-loading-logo img{object-fit:contain}
.login-loading-ring{border-top-color:var(--sbp-accent)}
.sidebar-collapsed .mostadel-sidebar-logo{display:none}.sidebar-collapsed .mostadel-sidebar-mark{display:block;width:42px;height:34px}.sidebar-collapsed .sidebar-brand{padding:18px 10px}
@media(min-width:1500px){.content-area{padding:36px 42px}.login-hero{padding-inline:90px}}
@media(max-width:991.98px){.login-shell{grid-template-columns:1fr;grid-template-areas:'panel'}.login-hero{display:none}.login-panel{min-height:calc(100svh - 66px);padding:36px 24px}.login-card{max-width:430px}.login-footer{padding:16px 24px}.content-area{padding:20px}.top-navbar{padding:12px 20px}.mostadel-sidebar-logo{display:block!important}.mostadel-sidebar-mark{display:none!important}}
@media(max-width:575.98px){.top-navbar{min-height:72px;padding:12px;gap:8px}.page-title{font-size:1rem}.content-area{padding:16px 12px}.mostadel-welcome{padding:22px!important}.mostadel-welcome h2{font-size:1.25rem!important}.stat-card{padding:20px!important}.user-meta{display:none}.app-footer{margin:0 12px;padding:16px 0}.login-card-brand{margin-bottom:26px}.login-heading h1{font-size:1.7rem}.login-footer{flex-wrap:wrap;gap:5px}.mostadel-login-logo{width:195px}.login-panel{padding:30px 24px}.login-options{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.app-shell{background:#f7f9fa}.login-security-note{background:transparent;border-radius:0}.login-options{flex-direction:row;align-items:center;justify-content:space-between}.login-input-group .form-control:focus-visible{outline:none!important}

.app-sidebar,.login-hero{background:var(--sbp-secondary)}.mostadel-hero-logo{background:#f7f9fa;border-radius:8px;width:190px;height:auto;padding:12px}.brand-mark img{object-fit:contain}.brand-preview-logo{width:190px;max-width:100%;height:80px;object-fit:contain}.brand-preview-chip{width:36px;height:36px;border-radius:7px}.sidebar-collapsed .sidebar-brand{overflow:hidden}

/* Brand teal for numbered instructions in the user guide. */
.user-guide-page .guide-step::before { background: #E4F4F2; color: #132448; border: 1px solid #8FCBC5; }


/* Use the configured logo accent throughout the user guide. */
.user-guide-page { --guide-blue: var(--sbp-accent, #3AABA4); --guide-soft: color-mix(in srgb, var(--sbp-accent, #3AABA4) 10%, white); }
.user-guide-page .guide-links a:hover { color: color-mix(in srgb, var(--sbp-accent, #3AABA4), black 35%); }