:root{
    --navy:#18324a;
    --navy-2:#21445f;
    --teal:#5f9f98;
    --teal-dark:#3e7d77;
    --sky:#dfeef2;
    --gold:#c9a85b;
    --cream:#f7f8f6;
    --panel:#ffffff;
    --text:#20303d;
    --muted:#71808a;
    --line:#dbe4e7;
    --danger:#9f3f46;
    --danger-bg:#fff1f2;
    --shadow:0 18px 55px rgba(24,50,74,.13);
    --radius:28px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,"Segoe UI",sans-serif;color:var(--text)}
body{background:var(--cream)}

button,input{font:inherit}
button,a{ -webkit-tap-highlight-color: transparent; }

.login-page{
    min-height:100vh;
    overflow-x:hidden;
}

.login-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(410px, 46%) minmax(520px, 54%);
    direction:rtl;
}

.login-form-panel{
    background:var(--panel);
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    z-index:2;
}

.login-form-wrap{
    width:min(520px, calc(100% - 72px));
    margin:auto;
    padding:48px 0 86px;
}

.brand{
    display:flex;
    gap:14px;
    align-items:center;
    margin-bottom:52px;
}

.brand-mark{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(145deg,var(--navy),var(--teal-dark));
    box-shadow:0 12px 25px rgba(24,50,74,.18);
}
.brand-mark svg{width:38px;fill:none;stroke:white;stroke-width:3}
.brand-mark circle:last-child{fill:var(--gold);stroke:none}
.brand-name{
    font-size:28px;
    font-weight:800;
    color:var(--navy);
    letter-spacing:.2px;
}
.brand-subtitle{
    margin-top:3px;
    font-size:13px;
    color:var(--muted);
}

.login-heading .eyebrow{
    color:var(--teal-dark);
    font-weight:700;
    font-size:14px;
}
.login-heading h1{
    font-size:38px;
    line-height:1.2;
    margin:9px 0 9px;
    color:var(--navy);
}
.login-heading p{
    margin:0 0 30px;
    color:var(--muted);
    line-height:1.8;
}

.login-form label{
    display:block;
    margin:0 0 9px;
    font-size:14px;
    font-weight:700;
    color:#384b59;
}
.input-wrap{
    position:relative;
    margin-bottom:20px;
}
.input-wrap input{
    width:100%;
    height:57px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fbfcfc;
    padding:0 48px 0 74px;
    outline:none;
    transition:.2s ease;
    color:var(--text);
}
.input-wrap input:focus{
    border-color:var(--teal);
    background:white;
    box-shadow:0 0 0 4px rgba(95,159,152,.12);
}
.input-icon{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    font-size:18px;
    opacity:.62;
}
.password-toggle{
    position:absolute;
    left:11px;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:var(--teal-dark);
    cursor:pointer;
    padding:8px;
    font-size:13px;
    font-weight:700;
}

.login-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:-1px 0 24px;
    font-size:13px;
}
.remember{
    display:flex!important;
    align-items:center;
    gap:8px;
    margin:0!important;
    cursor:pointer;
    font-weight:400!important;
}
.remember input{accent-color:var(--teal-dark)}
.muted-link,.help-link{
    color:var(--teal-dark);
    text-decoration:none;
}
.help-link{
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
}

.primary-button{
    width:100%;
    height:59px;
    border:0;
    border-radius:16px;
    background:linear-gradient(135deg,var(--navy),var(--navy-2));
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 14px 26px rgba(24,50,74,.20);
    transition:.2s ease;
}
.primary-button:hover{transform:translateY(-1px);box-shadow:0 18px 30px rgba(24,50,74,.24)}
.primary-button .arrow{font-size:19px}

.alert-error{
    background:var(--danger-bg);
    color:var(--danger);
    border:1px solid #f4c8cc;
    padding:13px 15px;
    border-radius:13px;
    margin-bottom:20px;
    font-size:13px;
    line-height:1.7;
}

.login-help{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:24px;
    color:var(--muted);
    font-size:13px;
}
.separator{opacity:.45}

.login-footer{
    background:var(--navy);
    color:rgba(255,255,255,.85);
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:0 28px;
    font-size:11px;
    position:absolute;
    bottom:0;
    right:0;
    left:0;
}

.login-visual-panel{
    direction:rtl;
    min-height:100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(201,168,91,.13), transparent 29%),
        radial-gradient(circle at 80% 80%, rgba(95,159,152,.22), transparent 34%),
        linear-gradient(145deg,#142d43,#21475f 54%,#2c6768);
    color:white;
    position:relative;
    overflow:hidden;
}

.visual-stage{
    min-height:100%;
    width:100%;
    position:relative;
    padding:68px clamp(42px,6vw,92px);
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.visual-stage:before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);
}

.visual-copy{
    position:relative;
    z-index:3;
    max-width:520px;
    margin-bottom:40px;
}
.visual-kicker{
    font-size:13px;
    display:inline-flex;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
    margin-bottom:16px;
}
.visual-copy h2{
    font-size:clamp(42px,5vw,70px);
    line-height:1.08;
    margin:0 0 18px;
    letter-spacing:-1px;
}
.visual-copy h2 span{color:#c9dfd8}
.visual-copy p{
    max-width:500px;
    margin:0;
    line-height:1.95;
    color:rgba(255,255,255,.76);
    font-size:15px;
}

.analytics-card{
    width:min(520px,72%);
    min-width:380px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(18px);
    border-radius:24px;
    box-shadow:0 28px 70px rgba(2,14,25,.20);
    padding:20px 22px 15px;
    position:relative;
    z-index:4;
}
.analytics-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    color:rgba(255,255,255,.72);
}
.analytics-head strong{color:white}
.trend-svg{width:100%;height:160px;margin-top:10px;overflow:visible}
.trend-svg .grid-line{stroke:rgba(255,255,255,.10);stroke-width:1}
.trend-svg .area{fill:url(#areaFill)}
.trend-svg .trend{fill:none;stroke:#a8d5cd;stroke-width:4;stroke-linecap:round}
.trend-svg circle{fill:#e6c982;stroke:white;stroke-width:2}
.trend-labels{
    display:flex;
    justify-content:space-between;
    color:rgba(255,255,255,.55);
    font-size:10px;
}

.mini-card{
    position:absolute;
    z-index:6;
    min-width:132px;
    padding:15px 17px;
    border-radius:18px;
    background:rgba(255,255,255,.93);
    color:var(--navy);
    box-shadow:0 18px 45px rgba(5,24,38,.25);
}
.mini-card span,.mini-card small{display:block}
.mini-card span{font-size:11px;color:var(--muted)}
.mini-card strong{font-size:25px;display:block;margin:4px 0 3px}
.mini-card small{font-size:10px;color:var(--teal-dark)}
.mini-one{left:8%;bottom:24%}
.mini-two{right:5%;bottom:12%}

.visual-badge{
    position:relative;
    z-index:4;
    margin-top:23px;
    width:max-content;
    max-width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    color:rgba(255,255,255,.72);
    font-size:11px;
}
.badge-dot{
    width:8px;height:8px;border-radius:50%;
    background:#a6d5a9;
    box-shadow:0 0 0 5px rgba(166,213,169,.10);
}
.visual-orbit{
    position:absolute;
    border:1px solid rgba(255,255,255,.07);
    border-radius:50%;
}
.orbit-a{width:510px;height:510px;left:-190px;top:-140px}
.orbit-b{width:630px;height:630px;right:-270px;bottom:-270px}

.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,25,38,.48);backdrop-filter:blur(5px)}
.modal-card{
    position:relative;
    width:min(440px,100%);
    background:white;
    border-radius:20px;
    padding:28px;
    box-shadow:var(--shadow);
}
.modal-card h3{margin:0 0 10px;color:var(--navy)}
.modal-card p{margin:0;color:var(--muted);line-height:1.9}
.modal-close{
    position:absolute;
    left:13px;top:10px;
    border:0;background:transparent;font-size:26px;cursor:pointer;color:var(--muted)
}

.dashboard-placeholder{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:#eef3f4;
}
.placeholder-card{
    width:min(600px,calc(100% - 40px));
    background:white;
    border-radius:24px;
    padding:36px;
    box-shadow:var(--shadow);
}
.placeholder-card h1{color:var(--navy)}
.placeholder-card a{color:var(--teal-dark)}

@media (max-width: 980px){
    .login-shell{
        grid-template-columns:1fr;
    }
    .login-visual-panel{
        min-height:390px;
        order:-1;
    }
    .visual-stage{
        padding:42px 30px 70px;
    }
    .visual-copy h2{font-size:45px}
    .visual-copy p{max-width:620px}
    .analytics-card{
        width:min(620px,88%);
        min-width:0;
    }
    .mini-one{left:6%;bottom:10%}
    .mini-two{right:5%;bottom:5%}
    .login-form-panel{min-height:auto}
    .login-form-wrap{
        width:min(560px,calc(100% - 42px));
        padding:52px 0 90px;
    }
}

@media (max-width: 620px){
    .login-visual-panel{min-height:330px}
    .visual-stage{padding:32px 22px 58px;justify-content:flex-start}
    .visual-copy{margin-bottom:20px}
    .visual-copy h2{font-size:36px}
    .visual-copy p{font-size:13px}
    .analytics-card{display:none}
    .mini-card{min-width:115px;padding:11px 13px}
    .mini-card strong{font-size:20px}
    .mini-one{left:22px;bottom:28px}
    .mini-two{right:22px;bottom:28px}
    .visual-badge{display:none}

    .login-form-wrap{
        width:calc(100% - 34px);
        padding-top:36px;
    }
    .brand{margin-bottom:38px}
    .brand-mark{width:50px;height:50px}
    .brand-name{font-size:24px}
    .brand-subtitle{font-size:11px}
    .login-heading h1{font-size:31px}
    .login-footer{
        padding:0 15px;
        justify-content:center;
    }
    .login-footer span:nth-child(2){display:none}
}


/* ===== BASIRA V2: setup + authenticated placeholder ===== */
.setup-page,
.dashboard-page{
    min-height:100vh;
    background:
        radial-gradient(circle at 10% 10%, rgba(95,159,152,.10), transparent 28%),
        #eef3f4;
}
.setup-page{
    display:grid;
    place-items:center;
    padding:28px;
}
.setup-card{
    width:min(590px,100%);
    background:#fff;
    border-radius:26px;
    box-shadow:0 18px 55px rgba(24,50,74,.13);
    padding:34px;
}
.setup-brand{margin-bottom:28px}
.setup-card h1{color:#18324a;margin:0 0 8px}
.setup-note{color:#71808a;margin:0 0 24px;line-height:1.8}
.input-wrap.no-icon input{padding:0 16px}
.alert-success,.alert-info{
    padding:15px 16px;
    border-radius:14px;
    margin:18px 0;
    line-height:1.8;
}
.alert-success{background:#edf8f2;color:#276543;border:1px solid #cce8d8}
.alert-info{background:#eef6fb;color:#29576f;border:1px solid #cfe2ec}
.primary-link-button{
    min-height:54px;
    border-radius:15px;
    background:linear-gradient(135deg,#18324a,#21445f);
    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
}
.setup-warning{
    margin-top:18px;
    font-size:12px;
    color:#805d27;
    background:#fff8e9;
    border:1px solid #f0deb3;
    padding:12px 14px;
    border-radius:13px;
}

.dashboard-topbar{
    min-height:72px;
    padding:0 28px;
    background:#18324a;
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
.dashboard-topbar > div:first-child{
    display:flex;
    align-items:center;
    gap:14px;
}
.dashboard-topbar strong{font-size:22px}
.dashboard-topbar > div:first-child span{opacity:.72;font-size:13px}
.user-menu{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
}
.user-menu small{opacity:.65}
.user-menu a{
    color:white;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.2);
    padding:8px 11px;
    border-radius:10px;
}
.dashboard-welcome{
    padding:42px 28px;
}
.welcome-card{
    max-width:900px;
    margin:0 auto;
    background:white;
    border-radius:26px;
    padding:34px;
    box-shadow:0 18px 55px rgba(24,50,74,.11);
}
.welcome-card h1{
    color:#18324a;
    margin:7px 0 10px;
}
.welcome-card p{
    color:#71808a;
    line-height:1.9;
}
.ready-grid{
    margin-top:28px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.ready-grid div{
    background:#f6f9f9;
    border:1px solid #e0e9e9;
    border-radius:16px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:7px;
}
.ready-grid strong{color:#3e7d77;font-size:20px}
.ready-grid span{font-size:12px;color:#53646f}
@media(max-width:760px){
    .ready-grid{grid-template-columns:repeat(2,1fr)}
    .dashboard-topbar{padding:12px 16px;align-items:flex-start}
    .user-menu{flex-wrap:wrap;justify-content:flex-end}
}


/* =========================================================
   BASIRA V3 — Governorate Dashboard
   ========================================================= */
.basira-app{
    min-height:100vh;
    background:#eef3f4;
    color:#20303d;
}
.app-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    direction:rtl;
}
.sidebar{
    background:
        radial-gradient(circle at 40% 5%,rgba(95,159,152,.16),transparent 25%),
        linear-gradient(180deg,#173149,#12283b);
    color:#fff;
    min-height:100vh;
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    padding:24px 16px 18px;
    box-shadow:-10px 0 30px rgba(17,39,57,.08);
    z-index:20;
}
.sidebar-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 8px 22px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.small-mark{width:44px;height:44px;border-radius:14px;box-shadow:none}
.small-mark svg{width:29px}
.sidebar-brand strong{display:block;font-size:21px}
.sidebar-brand small{display:block;margin-top:2px;color:rgba(255,255,255,.58);font-size:10px}
.sidebar-nav{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:5px;
    overflow:auto;
    padding-left:2px;
}
.nav-item{
    color:rgba(255,255,255,.72);
    text-decoration:none;
    min-height:43px;
    border-radius:12px;
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:11px;
    font-size:12px;
    transition:.18s ease;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{
    background:linear-gradient(90deg,rgba(95,159,152,.23),rgba(95,159,152,.08));
    color:#fff;
    border:1px solid rgba(143,198,191,.15);
}
.nav-item.disabled{opacity:.72}
.nav-icon{
    width:25px;height:25px;border-radius:8px;
    display:grid;place-items:center;
    background:rgba(255,255,255,.07);
    font-size:12px;
}
.sidebar-foot{
    margin-top:auto;
    padding:16px 10px 2px;
    border-top:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.48);
    font-size:9px;
    line-height:1.8;
}
.sidebar-foot strong{display:block;color:rgba(255,255,255,.78);font-size:10px}

.app-main{min-width:0}
.app-topbar{
    min-height:98px;
    background:#fff;
    border-bottom:1px solid #e1e8ea;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:18px 30px;
    position:sticky;
    top:0;
    z-index:15;
}
.sidebar-toggle{
    display:none;
    width:42px;height:42px;border:1px solid #dce5e7;
    background:#fff;border-radius:12px;cursor:pointer;
}
.page-heading{margin-left:auto}
.page-kicker,.section-kicker{
    display:block;
    color:#4b8984;
    font-weight:700;
    font-size:10px;
    margin-bottom:4px;
}
.page-heading h1{margin:0;color:#18324a;font-size:24px}
.page-heading p{margin:5px 0 0;color:#7a8992;font-size:11px}
.topbar-user{
    display:flex;align-items:center;gap:10px;
    padding-right:18px;border-right:1px solid #e4eaec;
}
.user-avatar{
    width:42px;height:42px;border-radius:14px;
    display:grid;place-items:center;
    background:linear-gradient(145deg,#21445f,#5f9f98);
    color:#fff;font-weight:800;
}
.user-text strong,.user-text small{display:block}
.user-text strong{font-size:11px;color:#263b49}
.user-text small{margin-top:3px;font-size:9px;color:#84929a}
.logout-link{
    text-decoration:none;color:#6a7d88;font-size:10px;
    border:1px solid #dce5e7;padding:8px 10px;border-radius:10px;
    margin-right:4px;
}
.dashboard-content{
    max-width:1600px;
    margin:0 auto;
    padding:24px 28px 42px;
}
.filters-card,.panel-card,.kpi-card,.analysis-note{
    background:#fff;
    border:1px solid #e1e8ea;
    box-shadow:0 10px 28px rgba(24,50,74,.055);
}
.filters-card{
    border-radius:20px;
    padding:18px 20px 20px;
}
.section-title-row,.panel-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:15px;
}
.section-title-row h2,.panel-head h2{
    margin:0;color:#223947;font-size:15px;
}
.reset-filter{
    color:#4f8580;text-decoration:none;font-size:10px;
    background:#edf6f5;padding:7px 10px;border-radius:9px;
}
.filters-grid{
    margin-top:17px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr)) 130px;
    gap:12px;
    align-items:end;
}
.filter-field label{
    display:block;font-size:10px;color:#667983;margin-bottom:7px;font-weight:700;
}
.filter-field select{
    width:100%;height:43px;border:1px solid #dce5e7;border-radius:11px;
    background:#fbfcfc;color:#2e4553;padding:0 11px;outline:none;
}
.filter-field select:focus{border-color:#6da7a0;box-shadow:0 0 0 3px rgba(95,159,152,.10)}
.filter-submit{
    width:100%;height:43px;border:0;border-radius:11px;
    background:linear-gradient(135deg,#18324a,#24506a);
    color:#fff;font-weight:700;cursor:pointer;
}
.context-line{
    display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 18px;
}
.context-line div{
    display:flex;align-items:center;gap:6px;
    background:#f7faf9;border:1px solid #e1e9e8;border-radius:999px;
    padding:6px 10px;font-size:9px;color:#7a8992;
}
.context-line strong{color:#365462;font-size:9px}
.kpi-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}
.kpi-card{
    border-radius:18px;
    padding:17px;
    display:flex;gap:12px;align-items:center;
    min-width:0;
}
.kpi-icon{
    flex:0 0 38px;width:38px;height:38px;
    border-radius:12px;display:grid;place-items:center;
    background:#edf5f5;color:#3f7d78;font-weight:800;
}
.kpi-card.warning .kpi-icon{background:#fff4e8;color:#9c692b}
.kpi-card.accent .kpi-icon{background:#eaf4ee;color:#397657}
.kpi-card span,.kpi-card small,.kpi-card strong{display:block}
.kpi-card span{font-size:9px;color:#798891;margin-bottom:3px}
.kpi-card strong{
    font-size:20px;color:#18324a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.kpi-card small{margin-top:4px;font-size:8px;color:#84939a;line-height:1.5}
.dashboard-grid{
    display:grid;gap:16px;margin-top:16px;
}
.dashboard-grid.two-one{grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr)}
.dashboard-grid.equal-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.panel-card{border-radius:20px;padding:20px;min-width:0}
.panel-chip{
    background:#f1f6f6;color:#577b79;font-size:8px;
    padding:6px 8px;border-radius:999px;
}
.trend-chart{margin-top:14px}
.trend-chart svg{display:block;width:100%;height:235px;overflow:visible}
.chart-grid line{stroke:#e6edef;stroke-width:1}
.trend-area-path{fill:rgba(95,159,152,.10)}
.trend-line-path{fill:none;stroke:#4b8c86;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.trend-dot{fill:#c9a85b;stroke:#fff;stroke-width:3}
.trend-label{font-size:11px;fill:#28434f;font-weight:700}
.chart-years{display:flex;justify-content:space-between;color:#829097;font-size:8px;padding:0 22px 0 8px}
.levels-list{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.level-row{
    display:grid;grid-template-columns:58px minmax(0,1fr) 52px;
    gap:10px;align-items:center;
}
.level-name strong{font-size:13px;color:#294451}
.level-name small{display:block;color:#9aa5aa;font-size:7px;margin-top:2px}
.level-track{height:8px;border-radius:99px;background:#edf1f2;overflow:hidden}
.level-track span{
    display:block;height:100%;border-radius:inherit;
    background:linear-gradient(90deg,#527f86,#79aaa1);
}
.level-value{text-align:left;font-size:10px;font-weight:700;color:#405a68}
.table-wrap{overflow:auto;margin-top:13px}
.data-table{width:100%;border-collapse:collapse;min-width:560px;font-size:9px}
.data-table th{
    text-align:right;color:#75858e;background:#f7f9f9;
    padding:10px;border-bottom:1px solid #e4eaec;white-space:nowrap
}
.data-table td{
    padding:11px 10px;border-bottom:1px solid #edf1f2;color:#506570;white-space:nowrap
}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table td strong{color:#294451}
.school-ranking-list{margin-top:12px;display:flex;flex-direction:column}
.school-rank-item{
    display:grid;grid-template-columns:34px minmax(0,1fr) 82px;
    gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #edf1f2
}
.school-rank-item:last-child{border-bottom:0}
.rank-number{
    width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
    background:#edf5f5;color:#437d79;font-size:10px;font-weight:800
}
.rank-school{min-width:0}
.rank-school strong{
    display:block;color:#2a4350;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.rank-school small{display:block;color:#8a969c;font-size:7px;margin-top:4px}
.rank-score{text-align:left}
.rank-score strong{display:block;color:#18324a;font-size:13px}
.rank-score small{display:block;color:#6d8588;font-size:7px;margin-top:3px}
.empty-state{padding:22px;text-align:center;color:#8a969c;font-size:10px}
.analysis-note{
    margin-top:16px;border-radius:18px;padding:16px 18px;
    display:flex;gap:13px;align-items:flex-start;
    border-right:4px solid #5f9f98;
}
.analysis-note-icon{
    width:36px;height:36px;border-radius:11px;
    background:#eef6f5;color:#4c8882;display:grid;place-items:center;font-weight:800
}
.analysis-note span{display:block;color:#315664;font-size:10px;font-weight:800;margin-bottom:4px}
.analysis-note p{margin:0;color:#74858d;font-size:9px;line-height:1.8}

@media(max-width:1280px){
    .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .filters-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .filter-submit-wrap{grid-column:span 4}
    .filter-submit{max-width:180px}
}
@media(max-width:980px){
    .app-shell{grid-template-columns:1fr}
    .sidebar{
        position:fixed;right:0;top:0;width:260px;
        transform:translateX(105%);
        transition:.22s ease;
    }
    .sidebar.open{transform:translateX(0)}
    .sidebar-toggle{display:grid;place-items:center}
    .app-topbar{padding:14px 18px}
    .dashboard-content{padding:18px}
    .dashboard-grid.two-one,.dashboard-grid.equal-two{grid-template-columns:1fr}
}
@media(max-width:720px){
    .page-heading p{display:none}
    .topbar-user .user-text{display:none}
    .logout-link{display:none}
    .filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .filter-submit-wrap{grid-column:span 2}
    .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
    .filters-grid{grid-template-columns:1fr}
    .filter-submit-wrap{grid-column:auto}
    .filter-submit{max-width:none}
    .kpi-grid{grid-template-columns:1fr}
    .dashboard-content{padding:14px}
}


/* =========================================================
   BASIRA V4 — Wilayats
   ========================================================= */
.wilayat-filter-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) 150px;
}
.wilayat-overview-strip{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin:0 0 16px;
}
.wilayat-overview-strip>div{
    background:#fff;
    border:1px solid #e1e8ea;
    border-radius:15px;
    padding:13px 15px;
    box-shadow:0 8px 22px rgba(24,50,74,.04);
}
.wilayat-overview-strip span{
    display:block;
    font-size:8px;
    color:#839199;
    margin-bottom:4px;
}
.wilayat-overview-strip strong{
    display:block;
    color:#18324a;
    font-size:15px;
}
.wilayat-cards-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px;
}
.wilayat-card{
    background:#fff;
    border:1px solid #e1e8ea;
    border-radius:20px;
    padding:20px;
    box-shadow:0 10px 28px rgba(24,50,74,.055);
    min-width:0;
}
.wilayat-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
}
.wilayat-rank{
    display:inline-block;
    font-size:8px;
    color:#4f8580;
    background:#edf6f5;
    padding:5px 8px;
    border-radius:999px;
    margin-bottom:6px;
}
.wilayat-card h2{
    margin:0;
    color:#18324a;
    font-size:19px;
}
.wilayat-score{
    font-size:24px;
    font-weight:800;
    color:#214b61;
}
.wilayat-meta{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:14px 0;
}
.wilayat-meta span{
    font-size:8px;
    color:#71828a;
    background:#f6f9f9;
    border-radius:999px;
    padding:6px 8px;
}
.wilayat-mini-kpis{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:12px;
}
.wilayat-mini-kpis div{
    background:#f8faf9;
    border:1px solid #e8eeee;
    border-radius:12px;
    padding:10px;
}
.wilayat-mini-kpis span,
.wilayat-mini-kpis strong{display:block}
.wilayat-mini-kpis span{font-size:7px;color:#89969c;margin-bottom:3px}
.wilayat-mini-kpis strong{font-size:13px;color:#2b4b58}
.wilayat-levels{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}
.wilayat-levels span{
    position:relative;
    overflow:hidden;
    background:#eef2f2;
    border-radius:9px;
    padding:8px 9px;
    font-size:8px;
    color:#39545f;
}
.wilayat-levels span:before{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    height:3px;
    width:var(--w);
    background:#609c95;
}
.wilayat-card-foot{
    border-top:1px solid #edf1f2;
    margin-top:16px;
    padding-top:13px;
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:10px;
    align-items:end;
}
.wilayat-card-foot small{display:block;color:#8a979d;font-size:7px}
.wilayat-card-foot strong{display:block;color:#31505d;font-size:12px;margin-top:3px}
.wilayat-card-foot a{
    text-decoration:none;
    color:#fff;
    background:#183f58;
    border-radius:10px;
    padding:9px 11px;
    font-size:8px;
    white-space:nowrap;
}
.wilayat-table-card{margin-top:16px}
.rank-pill{
    display:inline-grid;
    place-items:center;
    min-width:27px;
    height:27px;
    border-radius:9px;
    background:#edf5f5;
    color:#3e7d77;
    font-weight:800;
}
.table-action{
    color:#fff;
    background:#244e65;
    text-decoration:none;
    border-radius:8px;
    padding:6px 9px;
    font-size:8px;
}
.breadcrumb-line{
    display:flex;
    gap:7px;
    align-items:center;
    margin-bottom:12px;
    color:#829098;
    font-size:9px;
}
.breadcrumb-line a{
    color:#4b817d;
    text-decoration:none;
}
.breadcrumb-line strong{color:#304b59}
.wilayat-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))}

@media(max-width:1100px){
    .wilayat-filter-grid{grid-template-columns:repeat(3,1fr)}
    .wilayat-filter-grid .filter-submit-wrap{grid-column:span 3}
    .wilayat-overview-strip{grid-template-columns:repeat(2,1fr)}
    .wilayat-cards-grid{grid-template-columns:1fr}
    .wilayat-kpi-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:650px){
    .wilayat-filter-grid{grid-template-columns:1fr}
    .wilayat-filter-grid .filter-submit-wrap{grid-column:auto}
    .wilayat-overview-strip{grid-template-columns:1fr 1fr}
    .wilayat-mini-kpis{grid-template-columns:1fr 1fr 1fr}
    .wilayat-card-foot{grid-template-columns:1fr 1fr}
    .wilayat-card-foot a{grid-column:1/-1;text-align:center}
    .wilayat-kpi-grid{grid-template-columns:repeat(2,1fr)}
}


/* BASIRA V4.1 — automatic filter refresh */
.filters-card form.is-filtering{
    opacity:.72;
    pointer-events:none;
    transition:opacity .15s ease;
}
.filters-card form.is-filtering select{
    cursor:wait;
}
.filters-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.wilayat-filter-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
@media(max-width:900px){
    .filters-grid,
    .wilayat-filter-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}
@media(max-width:560px){
    .filters-grid,
    .wilayat-filter-grid{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   BASIRA V5 — Schools + explicit back navigation
   ========================================================= */
.breadcrumb-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
}
.breadcrumb-actions .breadcrumb-line{
    margin-bottom:0;
}
.back-buttons{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.back-page-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-decoration:none;
    color:#fff;
    background:#183f58;
    border:1px solid #183f58;
    border-radius:10px;
    padding:9px 13px;
    font-size:8px;
    white-space:nowrap;
}
.back-page-btn.secondary{
    background:#fff;
    color:#3f7773;
    border-color:#cfdede;
}
.schools-overview-strip{
    margin-bottom:16px;
}
.schools-table th,
.schools-table td{
    white-space:nowrap;
}
.school-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.school-subject-table-wrap{
    max-height:460px;
    overflow:auto;
}
@media(max-width:760px){
    .breadcrumb-actions{
        align-items:flex-start;
        flex-direction:column;
    }
    .back-buttons{
        width:100%;
    }
    .back-page-btn{
        flex:1;
    }
    .school-filter-grid{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   BASIRA V6 — Education type + Grades & Classes
   ========================================================= */
.education-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:5px 8px;
    font-size:8px;
    font-weight:700;
    white-space:nowrap;
}
.education-badge.basic{
    background:#edf6f3;
    color:#3c756d;
    border:1px solid #d6e8e3;
}
.education-badge.non-basic{
    background:#fff0f0;
    color:#b63434;
    border:1px solid #efbcbc;
}
.non-basic-education-row{
    background:#fff9f9;
}
.non-basic-education-row td:first-child{
    box-shadow:inset -3px 0 0 #c94a4a;
}
.education-warning{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff4f4;
    border:1px solid #efc5c5;
    border-radius:12px;
    padding:10px 12px;
    margin-bottom:10px;
    color:#8d3434;
    font-size:8px;
}
.education-warning strong{
    color:#ae3030;
    white-space:nowrap;
}
.education-warning.large-warning{
    margin:0 0 15px;
    padding:13px 15px;
}
.danger-number{
    color:#b53131 !important;
}
.grades-filter-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
.grades-context-line{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.grades-table th,
.grades-table td{
    white-space:nowrap;
}
.grade-kpi-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
}
@media(max-width:1100px){
    .grades-filter-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
    .grade-kpi-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media(max-width:700px){
    .grades-filter-grid{
        grid-template-columns:1fr !important;
    }
    .grade-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .education-warning{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* =========================================================
   BASIRA V7 — Internal vertical scrolling + Subjects
   ========================================================= */
.long-table-scroll{
    max-height:62vh;
    overflow-y:auto;
    overflow-x:auto;
    direction:ltr;
    scrollbar-gutter:stable;
    border-radius:12px;
}
.long-table-scroll > table{direction:rtl;}
.grades-long-scroll{min-height:260px;max-height:560px;}
.sticky-table-head thead th{
    position:sticky;
    top:0;
    z-index:4;
    background:#f4f7f7;
    box-shadow:0 1px 0 #dfe7e9;
}
.long-table-scroll::-webkit-scrollbar,
.subjects-table-scroll::-webkit-scrollbar{width:11px;height:11px;}
.long-table-scroll::-webkit-scrollbar-thumb,
.subjects-table-scroll::-webkit-scrollbar-thumb{
    background:#9aa4a8;border-radius:10px;border:2px solid #edf2f2;
}
.long-table-scroll::-webkit-scrollbar-track,
.subjects-table-scroll::-webkit-scrollbar-track{background:#edf2f2;border-radius:10px;}
.subjects-filter-grid{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}
.subjects-context-line{grid-template-columns:repeat(4,minmax(0,1fr));}
.subjects-table-scroll{max-height:570px;overflow:auto;direction:ltr;scrollbar-gutter:stable;}
.subjects-table-scroll > table{direction:rtl;}
.subjects-table th,.subjects-table td{white-space:nowrap;}
.rank-na{display:inline-grid;place-items:center;min-width:27px;height:27px;color:#9a6a31;background:#fff6e9;border:1px solid #f0ddbc;border-radius:9px;font-weight:800;}
.ranking-note{margin-top:10px;background:#f6f9f9;color:#677b84;border-radius:10px;padding:9px 11px;font-size:8px;}
.subject-detail-scroll{max-height:430px;}
@media(max-width:1200px){.subjects-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media(max-width:700px){.subjects-filter-grid{grid-template-columns:1fr !important;}.grades-long-scroll,.subjects-table-scroll,.subject-detail-scroll{max-height:65vh;}}


/* =========================================================
   BASIRA V8 — Proficiency & Low Achievement
   ========================================================= */
.proficiency-filter-grid{
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
}
.proficiency-context-line{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.proficiency-kpi-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
}
.proficiency-main-card{
    border-color:#cfe5dc;
}
.low-main-card{
    border-color:#efd5c4;
}
.metric-good{
    color:#26766c;
    font-weight:800;
}
.metric-risk{
    color:#b25d2e;
    font-weight:800;
}
.priority-summary-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin:15px 0;
}
.priority-summary-card{
    border-radius:17px;
    padding:16px 18px;
    border:1px solid #dde8e8;
    background:#fff;
    box-shadow:0 8px 22px rgba(24,50,74,.04);
}
.priority-summary-card span,
.priority-summary-card strong,
.priority-summary-card small{
    display:block;
}
.priority-summary-card span{
    font-size:8px;
    margin-bottom:5px;
}
.priority-summary-card strong{
    color:#18324a;
    font-size:15px;
    margin-bottom:4px;
}
.priority-summary-card small{
    font-size:8px;
}
.priority-summary-card.good{
    background:#f2faf7;
    border-color:#d6ebe3;
}
.priority-summary-card.good span,
.priority-summary-card.good small{
    color:#3f786e;
}
.priority-summary-card.risk{
    background:#fff7f1;
    border-color:#eed8c6;
}
.priority-summary-card.risk span,
.priority-summary-card.risk small{
    color:#a55d36;
}
.pl-table-scroll{
    max-height:430px;
}
.schools-pl-scroll{
    max-height:540px;
}
.ranking-ineligible-row{
    background:#fafafa;
    color:#85939a;
}
.proficiency-ranking-note{
    margin-top:15px;
}
.low-trend-chart .trend-line-path{
    stroke:#a8653d;
}
.low-trend-chart .trend-area-path{
    fill:rgba(168,101,61,.10);
}

@media(max-width:1250px){
    .proficiency-filter-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
    .proficiency-kpi-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media(max-width:760px){
    .proficiency-filter-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .priority-summary-grid{
        grid-template-columns:1fr;
    }
    .proficiency-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:520px){
    .proficiency-filter-grid{
        grid-template-columns:1fr !important;
    }
}


/* BASIRA V8.1 — loading overlay */
.basira-loading-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(239,245,246,.56);
    backdrop-filter:blur(1.5px);
    opacity:0;
    visibility:hidden;
    transition:opacity .12s ease, visibility .12s ease;
}
.basira-loading-overlay.show{
    opacity:1;
    visibility:visible;
}
.basira-loading-box{
    display:flex;
    align-items:center;
    gap:11px;
    background:#fff;
    border:1px solid #dce7e9;
    box-shadow:0 15px 40px rgba(24,50,74,.14);
    border-radius:14px;
    padding:13px 17px;
    color:#183f58;
    font-size:11px;
}
.basira-spinner{
    width:19px;
    height:19px;
    border:3px solid #dce9e8;
    border-top-color:#3f8580;
    border-radius:50%;
    animation:basiraSpin .65s linear infinite;
}
@keyframes basiraSpin{
    to{transform:rotate(360deg)}
}


/* =========================================================
   BASIRA V9 — A–E Levels
   ========================================================= */
.levels-filter-grid{
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
}
.levels-context-line{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.levels-main-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
}
.level-big-card{
    min-height:105px;
    border-radius:18px;
    border:1px solid #e0e7e8;
    background:#fff;
    padding:15px;
    display:flex;
    align-items:center;
    gap:13px;
    box-shadow:0 8px 22px rgba(24,50,74,.04);
}
.level-letter{
    width:48px;
    height:48px;
    border-radius:15px;
    display:grid;
    place-items:center;
    font-size:22px;
    font-weight:900;
    background:#edf4f4;
    color:#315c64;
}
.level-big-content span,
.level-big-content strong{
    display:block;
}
.level-big-content span{
    font-size:8px;
    color:#829098;
    margin-bottom:5px;
}
.level-big-content strong{
    font-size:20px;
    color:#18324a;
}
.level-big-card.level-a .level-letter{background:#eaf7f2;color:#267566}
.level-big-card.level-b .level-letter{background:#eef7f6;color:#397e78}
.level-big-card.level-c .level-letter{background:#f5f5ef;color:#75754b}
.level-big-card.level-d .level-letter{background:#fff4e9;color:#ad6d2f}
.level-big-card.level-e .level-letter{background:#fff0f0;color:#b03f3f}
.level-summary-kpis{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.levels-bars-large{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding-top:8px;
}
.levels-bar-row{
    display:grid;
    grid-template-columns:55px 1fr 70px;
    gap:10px;
    align-items:center;
}
.levels-bar-name strong,
.levels-bar-name small{
    display:block;
}
.levels-bar-name strong{font-size:13px;color:#244954}
.levels-bar-name small{font-size:7px;color:#8c999f}
.levels-bar-track{
    height:10px;
    background:#edf1f1;
    border-radius:999px;
    overflow:hidden;
}
.levels-bar-track span{
    height:100%;
    display:block;
    border-radius:999px;
    background:#6b9894;
}
.levels-bar-track span.level-a{background:#3d8978}
.levels-bar-track span.level-b{background:#59968f}
.levels-bar-track span.level-c{background:#929565}
.levels-bar-track span.level-d{background:#c68a4e}
.levels-bar-track span.level-e{background:#be5e5e}
.levels-bar-value{
    font-weight:800;
    color:#31515d;
    font-size:10px;
}
.levels-highlight-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
    margin:15px 0;
}
.level-highlight-card{
    background:#f4f8f8;
    border:1px solid #dae6e7;
    border-radius:16px;
    padding:15px 17px;
}
.level-highlight-card span,
.level-highlight-card strong,
.level-highlight-card small{display:block}
.level-highlight-card span{font-size:8px;color:#6e828b;margin-bottom:5px}
.level-highlight-card strong{font-size:13px;color:#18324a;margin-bottom:4px}
.level-highlight-card small{font-size:10px;font-weight:800;color:#497078}
.level-highlight-card.good{background:#f0faf5;border-color:#d6eadd}
.level-highlight-card.risk{background:#fff5ef;border-color:#ead8c8}
.level-highlight-card.risk small{color:#a65d38}
.levels-table-scroll{max-height:410px}
.levels-schools-scroll{max-height:560px}
.levels-materials-scroll{max-height:480px}
.levels-ranking-note{margin-top:15px}

@media(max-width:1250px){
    .levels-filter-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
    .levels-main-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media(max-width:850px){
    .levels-filter-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .levels-main-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .levels-highlight-grid{
        grid-template-columns:1fr;
    }
    .level-summary-kpis{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:520px){
    .levels-filter-grid{
        grid-template-columns:1fr !important;
    }
    .levels-main-grid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   BASIRA V10 — chart fix / level pair icons / ranking
   ========================================================= */
.level-pair-icon{
    font-size:9px !important;
    letter-spacing:0;
    white-space:nowrap;
}

.ranking-filter-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
.ranking-context-line{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.ranking-kpi-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.ranking-name-kpi{
    font-size:12px !important;
    line-height:1.5;
}
.ranking-classification-guide{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin:14px 0;
}
.classification-guide-item{
    background:#fff;
    border:1px solid #dfe8e9;
    border-radius:14px;
    padding:12px 13px;
    display:grid;
    grid-template-columns:10px 1fr;
    column-gap:8px;
    align-items:center;
}
.classification-guide-item > span{
    width:9px;
    height:9px;
    border-radius:50%;
    grid-row:1 / span 2;
}
.classification-guide-item strong,
.classification-guide-item small{
    display:block;
}
.classification-guide-item strong{
    color:#254b57;
    font-size:9px;
}
.classification-guide-item small{
    color:#87969c;
    font-size:7px;
}
.classification-guide-item.top > span{background:#3f8a77}
.classification-guide-item.upper > span{background:#6c9b91}
.classification-guide-item.lower > span{background:#b3915e}
.classification-guide-item.bottom > span{background:#b96555}

.ranking-table-scroll{
    max-height:590px;
}
.ranking-table th,
.ranking-table td{
    white-space:nowrap;
}
.ranking-selected-metric{
    background:#eff8f6 !important;
    color:#236e64;
    font-weight:900;
}
.classification-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:25px;
    padding:3px 8px;
    border-radius:999px;
    font-size:7px;
    font-weight:800;
    border:1px solid transparent;
}
.classification-badge.top{
    color:#276f62;
    background:#edf8f4;
    border-color:#d0e9df;
}
.classification-badge.upper{
    color:#47776f;
    background:#f2f8f6;
    border-color:#dceae6;
}
.classification-badge.lower{
    color:#8a6a3d;
    background:#fff8ec;
    border-color:#eadfc7;
}
.classification-badge.bottom{
    color:#a04f42;
    background:#fff2ef;
    border-color:#efd7d2;
}
.classification-badge.na{
    color:#798a91;
    background:#f5f7f7;
    border-color:#e4e9ea;
}
.ranking-v10-note{
    margin-top:15px;
}

@media(max-width:1250px){
    .ranking-filter-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}
@media(max-width:820px){
    .ranking-filter-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .ranking-classification-guide{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .ranking-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:520px){
    .ranking-filter-grid{
        grid-template-columns:1fr !important;
    }
    .ranking-classification-guide{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   BASIRA V11 — Trends 2022–2026
   ========================================================= */
.trends-filter-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.trends-context-line{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.trends-kpi-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
}
.trend-status-card.good{
    border-color:#cce6dc;
    background:#f5fbf8;
}
.trend-status-card.risk{
    border-color:#efd6c6;
    background:#fff8f3;
}
.trend-status-card.stable{
    border-color:#dfe5e6;
    background:#f8fafb;
}
.trends-highlights-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:14px 0;
}
.trend-highlight-card{
    background:#fff;
    border:1px solid #dfe7e9;
    border-radius:16px;
    padding:14px 16px;
    box-shadow:0 7px 20px rgba(24,50,74,.035);
}
.trend-highlight-card span,
.trend-highlight-card strong,
.trend-highlight-card small{
    display:block;
}
.trend-highlight-card span{
    font-size:8px;
    color:#7b8d95;
    margin-bottom:5px;
}
.trend-highlight-card strong{
    color:#18324a;
    font-size:15px;
    margin-bottom:4px;
}
.trend-highlight-card small{
    color:#607b84;
    font-size:8px;
}
.trend-highlight-card.good{
    background:#f2faf7;
    border-color:#d4e9df;
}
.trends-table-scroll{
    max-height:430px;
}
.trends-note{
    margin-top:15px;
}

@media(max-width:1250px){
    .trends-kpi-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .trends-highlights-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:850px){
    .trends-filter-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .trends-context-line{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .trends-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:520px){
    .trends-filter-grid{
        grid-template-columns:1fr !important;
    }
    .trends-highlights-grid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   BASIRA V12 — Comparisons
   ========================================================= */
.comparisons-filter-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.comparisons-context-line{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.comparison-summary-grid{
    display:grid;
    grid-template-columns:1fr .8fr 1fr;
    gap:13px;
    margin:14px 0;
}
.comparison-year-card,
.comparison-delta-card{
    background:#fff;
    border:1px solid #dfe8e9;
    border-radius:18px;
    padding:17px 19px;
    text-align:center;
    box-shadow:0 8px 22px rgba(24,50,74,.04);
}
.comparison-year-card span,
.comparison-year-card strong,
.comparison-year-card small,
.comparison-delta-card span,
.comparison-delta-card strong,
.comparison-delta-card small{
    display:block;
}
.comparison-year-card span,
.comparison-delta-card span{
    font-size:8px;
    color:#7b8f96;
    margin-bottom:5px;
}
.comparison-year-card strong,
.comparison-delta-card strong{
    font-size:20px;
    color:#18324a;
    margin-bottom:4px;
}
.comparison-year-card small,
.comparison-delta-card small{
    font-size:8px;
    color:#6f828a;
}
.comparison-year-card.accent{
    background:#f2faf7;
    border-color:#d3e9df;
}
.comparison-delta-card{
    background:#f7f9f9;
}
.comparison-main-table td,
.comparison-main-table th{
    white-space:nowrap;
}
.comparison-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    min-width:54px;
    padding:4px 9px;
    font-size:7px;
    font-weight:800;
}
.comparison-status.good{
    color:#287164;
    background:#edf8f4;
}
.comparison-status.risk{
    color:#9f5446;
    background:#fff1ef;
}
.comparison-status.stable{
    color:#687c84;
    background:#f1f5f5;
}
.comparisons-school-kpis{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.comparisons-school-scroll{
    max-height:560px;
}
.comparisons-note{
    margin-top:15px;
}

@media(max-width:1000px){
    .comparison-summary-grid{
        grid-template-columns:1fr;
    }
    .comparisons-school-kpis{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:800px){
    .comparisons-filter-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .comparisons-context-line{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:520px){
    .comparisons-filter-grid{
        grid-template-columns:1fr !important;
    }
}


/* BASIRA V12.2 — common comparison scope */
.comparison-common-scope-note{
    margin:10px 0 14px;
    padding:10px 13px;
    border:1px solid #d8e7e5;
    border-radius:12px;
    background:#f3f9f7;
    color:#55757a;
    font-size:8px;
    line-height:1.7;
}
.comparison-common-scope-note strong{
    color:#286f65;
}


/* BASIRA V12.3 — fair common-grade comparison */
.comparison-grade-structure{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:12px 0;
}
.grade-structure-card{
    background:#fff;
    border:1px solid #dfe7e8;
    border-radius:15px;
    padding:13px 15px;
}
.grade-structure-card span,
.grade-structure-card strong{
    display:block;
}
.grade-structure-card span{
    font-size:8px;
    color:#7c8e95;
    margin-bottom:6px;
}
.grade-structure-card strong{
    color:#254b57;
    font-size:11px;
    line-height:1.7;
}
.grade-structure-card.common{
    background:#f1f9f6;
    border-color:#d1e7de;
}
.grade-structure-card.common span{
    color:#37766d;
}
.comparison-structure-warning{
    margin:10px 0 14px;
    padding:11px 13px;
    border:1px solid #edd8c7;
    border-radius:12px;
    background:#fff7f0;
    color:#845f49;
    font-size:8px;
    line-height:1.8;
}
.comparison-structure-warning strong{
    color:#a15d37;
}
.comparison-structure-warning b{
    color:#7d4e33;
}

@media(max-width:800px){
    .comparison-grade-structure{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   BASIRA V13 — Priorities
   ========================================================= */
.priorities-filter-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.priorities-context-line{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.priorities-kpi-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.priority-method-note{
    margin:10px 0 14px;
    padding:11px 14px;
    border:1px solid #d7e6e4;
    border-radius:13px;
    background:#f2f8f6;
    color:#5b777b;
    font-size:8px;
    line-height:1.8;
}
.priority-method-note strong{
    color:#286f65;
}
.priority-focus-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff6ef;
    border:1px solid #ead4c3;
    border-radius:18px;
    padding:16px 18px;
    margin:14px 0;
}
.priority-focus-icon{
    width:46px;
    height:46px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:#f7e2d1;
    color:#a75b31;
    font-size:22px;
    font-weight:900;
}
.priority-focus-body span,
.priority-focus-body strong,
.priority-focus-body small{
    display:block;
}
.priority-focus-body span{
    font-size:8px;
    color:#9b6b4d;
    margin-bottom:4px;
}
.priority-focus-body strong{
    color:#18324a;
    font-size:15px;
    margin-bottom:4px;
}
.priority-focus-body small{
    color:#76665e;
    font-size:8px;
}
.priorities-table-scroll{
    max-height:600px;
}
.priorities-table th,
.priorities-table td{
    white-space:nowrap;
}
.priority-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:80px;
    padding:4px 9px;
    border-radius:999px;
    font-size:7px;
    font-weight:900;
}
.priority-badge.high{
    background:#fff0ec;
    color:#a64f3e;
    border:1px solid #efcec6;
}
.priority-badge.medium{
    background:#fff7e9;
    color:#9b6b2f;
    border:1px solid #ead9b8;
}
.priority-badge.normal{
    background:#edf8f4;
    color:#327469;
    border:1px solid #d0e7df;
}
.priority-badge.na{
    background:#f3f5f5;
    color:#7c898e;
    border:1px solid #e1e6e7;
}
.priority-score{
    color:#a15b37;
    font-size:12px;
}
.priority-reasons{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
}
.priority-reasons span{
    display:inline-flex;
    align-items:center;
    min-height:22px;
    padding:3px 7px;
    border-radius:999px;
    background:#fff1ed;
    color:#9b5846;
    border:1px solid #efd4cd;
    font-size:7px;
    font-weight:800;
}
.priority-reasons span.neutral{
    background:#f4f6f6;
    color:#77878d;
    border-color:#e2e7e8;
}
.priorities-note{
    margin-top:15px;
}

@media(max-width:900px){
    .priorities-filter-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .priorities-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:520px){
    .priorities-filter-grid{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   BASIRA V14 — Reports preview
   ========================================================= */
.report-builder{margin-bottom:18px}
.report-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.report-actions{display:flex;align-items:center;gap:8px}
.report-print-btn{
    border:0;border-radius:10px;padding:8px 13px;background:#18324a;color:#fff;
    font-family:inherit;font-size:8px;font-weight:800;cursor:pointer
}
.report-paper{
    max-width:1120px;margin:0 auto 35px;background:#fff;border:1px solid #dfe6e8;
    border-radius:20px;box-shadow:0 14px 42px rgba(27,52,69,.08);overflow:hidden
}
.report-cover{
    min-height:430px;padding:38px 46px;display:flex;flex-direction:column;
    background:linear-gradient(145deg,#f7fbfb 0%,#fff 55%,#f5f8f7 100%);
    border-bottom:6px solid #18324a
}
.report-logo{display:flex;align-items:center;gap:10px;color:#18324a}
.report-logo .report-mark{width:42px;height:42px}
.report-logo strong,.report-logo span{display:block}
.report-logo strong{font-size:14px}.report-logo span{font-size:8px;color:#70858c}
.report-cover-center{margin:auto 0;text-align:center;padding:45px 20px}
.report-cover-kicker{font-size:9px;color:#2d8076;font-weight:800}
.report-cover-center h1{font-size:29px;color:#18324a;margin:8px 0}
.report-cover-center h2{font-size:18px;color:#2f6f69;margin:0 0 9px}
.report-cover-center p{font-size:11px;color:#6e7f84}
.report-cover-meta{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid #e2e9ea;padding-top:16px}
.report-cover-meta span{font-size:8px;color:#788b91}.report-cover-meta strong{color:#354f58}
.report-section{padding:30px 42px;border-bottom:1px solid #edf0f1}
.report-section-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.report-section-head>span{
    width:38px;height:38px;border-radius:12px;background:#edf6f4;color:#2b796e;
    display:grid;place-items:center;font-size:9px;font-weight:900
}
.report-section-head small,.report-section-head h2{display:block;margin:0}
.report-section-head small{font-size:7px;color:#85959a;margin-bottom:2px}
.report-section-head h2{font-size:15px;color:#18324a}
.executive-paragraph{
    font-size:11px;line-height:2.05;color:#415b64;background:#f8fbfb;
    border-right:4px solid #2b7c72;padding:14px 17px;border-radius:12px
}
.report-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}
.report-kpi-grid>div{padding:13px;background:#fff;border:1px solid #e0e8ea;border-radius:13px}
.report-kpi-grid span,.report-kpi-grid strong{display:block}
.report-kpi-grid span{font-size:7px;color:#829398;margin-bottom:5px}
.report-kpi-grid strong{font-size:16px;color:#18324a}
.report-change-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}
.report-change-strip>div{padding:10px 12px;background:#fafcfc;border:1px solid #e5ebec;border-radius:11px}
.report-change-strip span,.report-change-strip strong{display:block}
.report-change-strip span{font-size:7px;color:#849399}.report-change-strip strong{font-size:10px;margin-top:4px}
.report-change-strip .good{color:#257367}.report-change-strip .risk{color:#a25846}
.report-chart-card{border:1px solid #e2e9ea;border-radius:15px;padding:15px;background:#fff;margin-bottom:15px}
.report-chart-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.report-chart-title strong{font-size:10px;color:#18324a}.report-chart-title span{font-size:7px;color:#809096}
.report-trend-chart{min-height:250px}
.report-table-wrap{border:1px solid #e4eaeb;border-radius:13px;overflow:auto}
.report-table th,.report-table td{font-size:7.5px;padding:8px 10px}
.report-table thead th{background:#f5f8f8}
.report-level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.report-level-card{border:1px solid #e0e8e9;border-radius:14px;padding:13px;text-align:center}
.report-level-card strong,.report-level-card span,.report-level-card b,.report-level-card small{display:block}
.report-level-card strong{font-size:20px;color:#18324a}
.report-level-card span{font-size:7px;color:#8a989c;margin:3px 0 8px}
.report-level-card b{font-size:14px;color:#2d756d}
.report-level-card small{font-size:7px;color:#84949a;margin-top:4px}
.report-common-grades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.report-common-grades>div{padding:12px;border:1px solid #e0e7e8;border-radius:12px}
.report-common-grades>div.common{background:#f0f8f5;border-color:#cfe5dd}
.report-common-grades span,.report-common-grades strong{display:block}
.report-common-grades span{font-size:7px;color:#819197;margin-bottom:5px}
.report-common-grades strong{font-size:10px;color:#284e58;line-height:1.7}
.report-method-warning{font-size:8px;line-height:1.9;color:#805c49;background:#fff7f0;border:1px solid #eed9c9;padding:11px 13px;border-radius:11px;margin:12px 0}
.report-highlight-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.report-highlight-grid>div{padding:14px;border-radius:13px;border:1px solid #e1e8e9}
.report-highlight-grid .good-card{background:#f1f9f6}.report-highlight-grid .risk-card{background:#fff5f1}
.report-highlight-grid span,.report-highlight-grid strong,.report-highlight-grid b{display:block}
.report-highlight-grid span{font-size:7px;color:#829399}
.report-highlight-grid strong{font-size:10px;color:#18324a;margin:5px 0}
.report-highlight-grid b{font-size:14px}.good-card b{color:#2b796e}.risk-card b{color:#a35b47}
.report-method-text{font-size:8px;color:#63777d;line-height:1.8}
.report-conclusion-box{background:#f8fbfb;border:1px solid #e1e8e9;border-radius:15px;padding:17px}
.report-conclusion-box p{font-size:9px;line-height:2;color:#415962;margin-top:0}
.report-conclusion-box ul{margin:0;padding-right:20px}
.report-conclusion-box li{font-size:8px;line-height:1.95;color:#51676f;margin-bottom:4px}
.report-footer{display:flex;justify-content:space-between;gap:12px;padding:18px 42px;background:#18324a;color:#dfe8eb}
.report-footer span,.report-footer strong{font-size:7px}
.report-footer strong{color:#fff}

@media(max-width:900px){
    .report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .report-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .report-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .report-common-grades{grid-template-columns:1fr}
}
@media(max-width:560px){
    .report-filter-grid{grid-template-columns:1fr!important}
    .report-cover,.report-section{padding-right:20px;padding-left:20px}
    .report-cover-center h1{font-size:22px}
    .report-kpi-grid,.report-change-strip,.report-highlight-grid{grid-template-columns:1fr}
}

@media print{
    @page{size:A4;margin:12mm}
    body{background:#fff!important}
    .no-print,.sidebar,.app-topbar,.basira-loading-overlay{display:none!important}
    .app-shell,.app-main,.dashboard-content,.reports-content{display:block!important;width:auto!important;margin:0!important;padding:0!important}
    .report-paper{max-width:none!important;width:100%!important;margin:0!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
    .report-cover{min-height:250mm;page-break-after:always}
    .report-section{page-break-inside:avoid;padding:18px 4px}
    .report-section-head{page-break-after:avoid}
    .report-table-wrap{overflow:visible!important;border-color:#d9dfe1}
    .report-table{width:100%!important}
    .report-footer{margin-top:15px}
    a{text-decoration:none!important;color:inherit!important}
}


/* =========================================================
   BASIRA V14.2 — professional report export
   ========================================================= */
.reports-content{padding-bottom:42px}
.report-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.report-download-btn{border:0;border-radius:10px;padding:9px 14px;font-family:Tahoma,Arial,sans-serif;font-size:9px;font-weight:800;cursor:pointer;transition:.18s ease}
.report-download-btn.pdf{background:#18324a;color:#fff}.report-download-btn.excel{background:#267769;color:#fff}.report-download-btn:hover{transform:translateY(-1px)}.report-download-btn:disabled{opacity:.55;cursor:wait;transform:none}
.report-export-status{min-height:20px;margin-top:8px;font-size:8px;color:#6d8188}.report-export-status.working{color:#326f68}.report-export-status.success{color:#247163}.report-export-status.error{color:#a25342}
.report-pages{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:18px;direction:rtl}
.report-pdf-page{position:relative;width:210mm;min-height:297mm;height:297mm;box-sizing:border-box;background:#fff;padding:15mm 13mm 17mm;overflow:hidden;box-shadow:0 10px 34px rgba(25,48,66,.12);border:1px solid #e2e8ea;font-family:Tahoma,Arial,sans-serif;color:#283f49;direction:rtl}
.report-cover-page{display:flex;flex-direction:column;background:linear-gradient(145deg,#f8fbfb 0%,#fff 62%,#f5f9f8 100%);border-top:6px solid #18324a}
.report-page-header{display:flex;justify-content:flex-start}.report-logo{display:flex;align-items:center;gap:9px}.report-logo .report-mark{width:42px;height:42px}.report-logo strong,.report-logo span{display:block}.report-logo strong{font-size:14pt;color:#18324a}.report-logo span{font-size:8pt;color:#6f858d;margin-top:2px}
.report-cover-center{margin:auto;text-align:center;padding:20mm 5mm}.report-cover-center>span{font-size:10pt;color:#2f786f;font-weight:800}.report-cover-center h1{font-size:28pt;color:#18324a;margin:5mm 0 2mm}.report-cover-center h2{font-size:18pt;color:#2e6f68;margin:0 0 4mm;line-height:1.55}.report-cover-center p{font-size:11pt;color:#697d84;margin:0}
.report-cover-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm;border-top:1px solid #dce5e7;padding-top:5mm}.report-cover-meta div{min-width:0}.report-cover-meta span,.report-cover-meta strong{display:block}.report-cover-meta span{font-size:8pt;color:#84949a}.report-cover-meta strong{font-size:9pt;color:#354f58;margin-top:1mm;line-height:1.5}.report-department-stamp{margin-top:7mm;border:1px solid #d3e4df;background:#f1f8f6;border-radius:4mm;padding:4mm;text-align:center;color:#2d7168;font-size:10pt;font-weight:800}
.report-page-title{display:flex;align-items:center;gap:4mm;margin-bottom:6mm;padding-bottom:4mm;border-bottom:1px solid #e5ebed}.report-page-title>b{display:grid;place-items:center;width:11mm;height:11mm;border-radius:3mm;background:#edf6f4;color:#2c776e;font-size:9pt}.report-page-title span{display:block;font-size:8pt;color:#819197;margin-bottom:1mm}.report-page-title h2{font-size:16pt;color:#18324a;margin:0;line-height:1.45}
.executive-paragraph{font-size:10.5pt!important;line-height:1.95!important;color:#3f5862!important;background:#f8fbfb!important;border-right:1.2mm solid #2c786f!important;padding:4mm 5mm!important;border-radius:3mm!important;margin:0 0 5mm!important}
.report-kpi-grid{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:3mm!important;margin:0 0 4mm!important}.report-kpi-grid>div{padding:4mm 3mm!important;border:1px solid #dfe7e9!important;border-radius:3mm!important;background:#fff!important}.report-kpi-grid span,.report-kpi-grid strong{display:block!important}.report-kpi-grid span{font-size:7.5pt!important;color:#7c8f96!important;margin-bottom:2mm!important}.report-kpi-grid strong{font-size:15pt!important;color:#18324a!important}
.report-change-strip{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:3mm!important;margin:0 0 4mm!important}.report-change-strip>div{padding:3mm 4mm!important;background:#fafcfc!important;border:1px solid #e2e9eb!important;border-radius:3mm!important}.report-change-strip span,.report-change-strip strong{display:block!important}.report-change-strip span{font-size:7.5pt!important;color:#84959b!important}.report-change-strip strong{font-size:10pt!important;margin-top:1mm!important}.report-change-strip .good{color:#267368!important}.report-change-strip .risk{color:#a05443!important}.report-change-strip.large>div{padding:6mm 4mm!important}.report-change-strip.large strong{font-size:14pt!important}
.report-chart-card{border:1px solid #dfe7e9!important;border-radius:3mm!important;padding:4mm!important;background:#fff!important;margin:0 0 4mm!important}.report-chart-title{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:2mm!important}.report-chart-title strong{font-size:9.5pt!important;color:#18324a!important}.report-chart-title span{font-size:7.5pt!important;color:#809197!important}.report-trend-chart{min-height:70mm!important;margin-top:0!important}.report-trend-chart svg{height:58mm!important;width:100%!important}.report-trend-chart .trend-area-path{fill:#eef7f5!important;opacity:.75!important}.report-trend-chart .trend-line-path{fill:none!important;stroke:#3c8179!important;stroke-width:4!important;stroke-linecap:round!important;stroke-linejoin:round!important}.report-trend-chart .trend-dot{fill:#c4a65d!important;stroke:#fff!important;stroke-width:3!important}.report-trend-chart .trend-label{font-size:12px!important;fill:#294751!important;font-weight:800!important}.report-trend-chart .chart-years{font-size:8pt!important;color:#657b83!important;padding:0 5mm!important}
.report-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border:1px solid #dfe6e8;border-radius:3mm;overflow:hidden;font-family:Tahoma,Arial,sans-serif;margin-top:3mm}.report-table th,.report-table td{white-space:normal!important;word-break:normal;vertical-align:middle;border-bottom:1px solid #e8edef;padding:2.7mm 2.3mm;text-align:right;line-height:1.45}.report-table th{background:#f4f8f8;color:#526b75;font-size:8.5pt;font-weight:800}.report-table td{color:#3e555f;font-size:9.3pt}.report-table td strong{color:#223e49}.report-table tr:last-child td{border-bottom:0}.report-table tr{break-inside:avoid;page-break-inside:avoid}.report-table.compact th,.report-table.compact td{font-size:8.8pt;padding:2.15mm 1.8mm}
.report-level-grid{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:4mm!important;margin-top:5mm!important}.report-level-card{border:1px solid #dce6e7!important;border-radius:4mm!important;padding:7mm 3mm!important;text-align:center!important;background:#fff!important}.report-level-card strong,.report-level-card span,.report-level-card b,.report-level-card small{display:block!important}.report-level-card strong{font-size:25pt!important;color:#18324a!important}.report-level-card span{font-size:8pt!important;color:#829399!important;margin:2mm 0!important}.report-level-card b{font-size:16pt!important;color:#2d786f!important}.report-level-card small{font-size:8pt!important;color:#7f9198!important;margin-top:2mm!important}.report-reading-box{margin-top:10mm;padding:7mm;border:1px solid #e0e8ea;background:#f8fbfb;border-radius:4mm}.report-reading-box h3{font-size:13pt;color:#18324a;margin:0 0 3mm}.report-reading-box p{font-size:10pt;line-height:1.95;color:#4b626c;margin:0}
.report-common-grades{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:4mm!important;margin-top:6mm!important}.report-common-grades>div{padding:6mm!important;border:1px solid #dfe7e9!important;border-radius:4mm!important}.report-common-grades>div.common{background:#eef8f5!important;border-color:#cce3dc!important}.report-common-grades span,.report-common-grades strong{display:block!important}.report-common-grades span{font-size:8pt!important;color:#7e9096!important;margin-bottom:3mm!important}.report-common-grades strong{font-size:11pt!important;line-height:1.7!important;color:#264b56!important}.report-method-warning{font-size:9.5pt!important;line-height:1.9!important;color:#7c5b4a!important;background:#fff7f1!important;border:1px solid #edd7c7!important;padding:5mm!important;border-radius:3mm!important;margin:6mm 0!important}
.report-highlight-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4mm!important;margin-bottom:5mm!important}.report-highlight-grid>div{padding:5mm!important;border-radius:4mm!important;border:1px solid #dfe7e9!important}.report-highlight-grid .good-card{background:#f0f8f5!important}.report-highlight-grid .risk-card{background:#fff5f1!important}.report-highlight-grid span,.report-highlight-grid strong,.report-highlight-grid b{display:block!important}.report-highlight-grid span{font-size:8pt!important;color:#7e9097!important}.report-highlight-grid strong{font-size:10pt!important;color:#18324a!important;margin:2mm 0!important;line-height:1.5}.report-highlight-grid b{font-size:15pt!important}.report-highlight-grid .good-card b{color:#2d786f!important}.report-highlight-grid .risk-card b{color:#a35b47!important}
.report-method-text{font-size:9.5pt!important;line-height:1.85!important;color:#596f78!important;background:#f8fbfb;padding:4mm;border-radius:3mm;margin:0 0 4mm!important}.report-conclusion-box{background:#f8fbfb!important;border:1px solid #dfe7e9!important;border-radius:4mm!important;padding:7mm!important}.report-conclusion-box p{font-size:10.5pt!important;line-height:2!important;color:#405963!important;margin:0 0 5mm!important}.report-conclusion-box ul{margin:0;padding-right:6mm}.report-conclusion-box li{font-size:10pt!important;line-height:1.9!important;color:#506770!important;margin-bottom:3mm!important}.report-signature{margin-top:12mm;text-align:center;border-top:1px solid #dfe6e8;padding-top:7mm}.report-signature span,.report-signature strong{display:block}.report-signature span{font-size:9pt;color:#85959b;margin-bottom:2mm}.report-signature strong{font-size:13pt;color:#244f58}
.pdf-page-footer{position:absolute;right:13mm;left:13mm;bottom:6mm;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #dfe6e8;padding-top:3mm;font-family:Tahoma,Arial,sans-serif}.pdf-page-footer strong{font-size:8.5pt;color:#375e64}.pdf-page-footer span{font-size:8pt;color:#85959b}
.pdf-exporting .report-pdf-page{box-shadow:none!important;border:0!important;margin:0!important}.pdf-exporting .report-pages{gap:0!important}
@media(max-width:1100px){.report-pdf-page{transform-origin:top center}.report-pages{overflow:auto;align-items:flex-start}.report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:620px){.report-filter-grid{grid-template-columns:1fr!important}.report-actions{width:100%}.report-download-btn{flex:1}.report-pages{transform:scale(.55);transform-origin:top right;width:181%;margin-bottom:-45%}}


/* BASIRA V14.2 — stable PDF paging and export clarity */
.pdf-exporting .report-pages{
    display:block!important;
    gap:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    width:auto!important;
    overflow:visible!important;
}
.pdf-exporting .report-pdf-page{
    width:210mm!important;
    min-height:297mm!important;
    height:297mm!important;
    margin:0!important;
    box-shadow:none!important;
    border:0!important;
    transform:none!important;
    break-after:page!important;
    page-break-after:always!important;
    page-break-inside:avoid!important;
}
.pdf-exporting .report-pdf-page:last-child{
    break-after:auto!important;
    page-break-after:auto!important;
}
.pdf-exporting .report-table tr,
.pdf-exporting .report-table thead,
.pdf-exporting .report-page-title{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
}
.pdf-exporting .report-trend-chart .trend-area-path{
    fill:#eef7f5!important;
    opacity:.72!important;
}
.pdf-exporting .report-trend-chart .trend-line-path{
    fill:none!important;
    stroke:#3c8179!important;
    stroke-width:4!important;
}


/* =========================================================
   BASIRA V14.3 — internal report scroll + offline export
   ========================================================= */
.report-preview-panel{
    margin-top:18px;
    border:1px solid #dce6e8;
    border-radius:18px;
    background:#eef3f4;
    overflow:hidden;
    box-shadow:0 8px 28px rgba(29,54,72,.06);
}
.report-preview-head{
    min-height:58px;
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:#fff;
    border-bottom:1px solid #dfe7e9;
    direction:rtl;
}
.report-preview-head span,
.report-preview-head strong{display:block}
.report-preview-head span{font-size:8px;color:#2d786f;font-weight:800;margin-bottom:3px}
.report-preview-head strong{font-size:10px;color:#294652}
.report-preview-head>b{
    flex:0 0 auto;
    padding:6px 10px;
    border-radius:999px;
    background:#eef7f5;
    border:1px solid #d3e7e1;
    color:#34756d;
    font-size:8px;
}
.report-preview-scroll{
    height:68vh;
    min-height:420px;
    max-height:760px;
    overflow-y:auto;
    overflow-x:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding:18px 18px 28px;
    direction:ltr;
}
.report-preview-scroll .report-pages{
    margin-top:0!important;
    min-width:max-content;
    direction:rtl;
}
.report-preview-scroll::-webkit-scrollbar{width:13px;height:13px}
.report-preview-scroll::-webkit-scrollbar-track{background:#e6edef;border-radius:10px}
.report-preview-scroll::-webkit-scrollbar-thumb{background:#8fa4ab;border:3px solid #e6edef;border-radius:10px}
.report-preview-scroll::-webkit-scrollbar-thumb:hover{background:#718b94}

/* Export takes pages out of the preview scroller without changing screen layout. */
.pdf-exporting .report-preview-scroll{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
    background:#fff!important;
}
.pdf-exporting .report-preview-panel{
    border:0!important;
    box-shadow:none!important;
    background:#fff!important;
    overflow:visible!important;
}
.pdf-exporting .report-preview-head{display:none!important}

@media(max-width:900px){
    .report-preview-scroll{height:64vh;min-height:380px;padding:12px}
}
@media(max-width:620px){
    .report-preview-scroll{height:62vh;min-height:340px;padding:8px}
    .report-preview-head{align-items:flex-start}
}


/* =========================================================
   BASIRA V15 — Complete Reports
   ========================================================= */
.report-filter-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.comparison-report-table th,
.comparison-report-table td{
    font-size:8.2px;
}
.comparison-status{
    display:inline-flex;
    padding:3px 8px;
    border-radius:999px;
    font-size:7.5px;
    font-weight:800;
}
.comparison-status.good{background:#edf8f4;color:#267164;border:1px solid #cfe6df}
.comparison-status.risk{background:#fff1ed;color:#a05443;border:1px solid #efd1c8}
.comparison-status.stable{background:#f2f5f6;color:#6f8086;border:1px solid #e0e6e8}
.report-preview-toolbar span{
    max-width:620px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
@media(max-width:900px){
    .report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
    .report-filter-grid{grid-template-columns:1fr!important}
}


/* =========================================================
   BASIRA V15.1 — Visible report type/scope filters
   ========================================================= */
.report-type-tabs{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
    margin:14px 0 16px;
}
.report-type-tab{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:64px;
    padding:10px 12px;
    border:1px solid #dce6e8;
    border-radius:14px;
    background:#fff;
    text-decoration:none;
    transition:.18s ease;
}
.report-type-tab span{
    font-size:7px;
    color:#819399;
    margin-bottom:3px;
}
.report-type-tab strong{
    font-size:10px;
    color:#294753;
}
.report-type-tab:hover{
    border-color:#b9d7d2;
    background:#f7fbfa;
    transform:translateY(-1px);
}
.report-type-tab.active{
    background:#183b53;
    border-color:#183b53;
    box-shadow:0 8px 20px rgba(24,59,83,.13);
}
.report-type-tab.active span{color:#c9dedf}
.report-type-tab.active strong{color:#fff}

.comparison-scope-block{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 16px;
    padding:12px 14px;
    border:1px solid #d8e6e4;
    border-radius:14px;
    background:#f5faf8;
}
.comparison-scope-title span,
.comparison-scope-title strong{
    display:block;
}
.comparison-scope-title span{
    color:#2e776e;
    font-size:7px;
    font-weight:800;
    margin-bottom:2px;
}
.comparison-scope-title strong{
    color:#35535b;
    font-size:8px;
}
.comparison-scope-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.comparison-scope-tab{
    min-width:72px;
    text-align:center;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid #d5e2e3;
    background:#fff;
    color:#526c73;
    font-size:8px;
    font-weight:800;
    text-decoration:none;
}
.comparison-scope-tab.active{
    background:#25796f;
    border-color:#25796f;
    color:#fff;
}
.report-filter-explainer{
    margin-top:11px;
    padding:8px 11px;
    border-radius:10px;
    background:#f3f8f7;
    border:1px solid #ddeae8;
    color:#60777d;
    font-size:7.5px;
    line-height:1.7;
}
.report-filter-explainer strong{color:#286f67}
.report-filter-explainer b{color:#183b53}

@media(max-width:900px){
    .report-type-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
    .comparison-scope-block{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
    .report-type-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* =========================================================
   BASIRA V16 — Final UI Polish
   Visual-only overrides. No analytics/database logic changed.
   ========================================================= */

/* ---------- Global readability & spacing ---------- */
:root{
    --v16-navy:#183b53;
    --v16-teal:#2d7c72;
    --v16-border:#dce6e8;
    --v16-bg:#eef3f4;
    --v16-muted:#73868e;
    --v16-shadow:0 10px 30px rgba(24,50,74,.06);
}

.basira-app{
    background:
        radial-gradient(circle at 18% 0%,rgba(95,159,152,.035),transparent 26%),
        var(--v16-bg);
}

.dashboard-content{
    width:100%;
    max-width:1580px;
    box-sizing:border-box;
}

.app-topbar{
    box-shadow:0 4px 16px rgba(31,56,72,.025);
}

.page-heading h1{
    font-size:26px;
    letter-spacing:-.15px;
}
.page-heading p{
    font-size:11.5px;
    line-height:1.65;
}

.filters-card,.panel-card,.kpi-card,.analysis-note{
    border-color:var(--v16-border);
    box-shadow:var(--v16-shadow);
}

.filters-card,.panel-card{
    overflow:hidden;
}

.filter-field label{
    font-size:10.5px;
    color:#5e747e;
}
.filter-field select{
    height:45px;
    font-size:11px;
    background:#fcfdfd;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.filter-field select:hover{
    border-color:#c8d8db;
    background:#fff;
}

.section-title-row h2,.panel-head h2{
    font-size:16px;
    line-height:1.55;
}
.section-kicker,.page-kicker{
    letter-spacing:.05px;
}

.kpi-card{
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.kpi-card:hover{
    transform:translateY(-1px);
    border-color:#d4e1e3;
    box-shadow:0 12px 32px rgba(24,50,74,.075);
}
.kpi-card span{font-size:9.5px}
.kpi-card small{font-size:8.5px}

/* ---------- Tables: clearer and easier to scan ---------- */
.table-wrap{
    border-radius:13px;
    scrollbar-gutter:stable;
}
.data-table{
    font-size:9.6px;
}
.data-table th{
    font-size:9px;
    font-weight:800;
    color:#647983;
    background:#f5f8f8;
    padding:11px 10px;
}
.data-table td{
    padding:11px 10px;
    line-height:1.55;
}
.data-table tbody tr:nth-child(even){
    background:#fbfcfc;
}
.data-table tbody tr:hover{
    background:#f3f8f7;
}
.long-table-scroll{
    scrollbar-gutter:stable both-edges;
}
.sticky-table-head thead th{
    top:0;
    z-index:3;
    box-shadow:0 1px 0 #e2e9eb;
}

/* ---------- Sidebar refinement ---------- */
.sidebar{
    border-left:1px solid rgba(255,255,255,.025);
}
.sidebar-nav{
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.18) transparent;
}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar-nav::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.16);
    border-radius:99px;
}
.nav-item{
    font-size:12.3px;
}
.nav-item.active{
    box-shadow:inset 0 0 0 1px rgba(150,204,198,.08);
}
.nav-icon{
    flex:0 0 25px;
}

/* ---------- Reports builder ---------- */
.report-builder{
    overflow:visible;
}
.report-type-tabs{
    gap:10px;
}
.report-type-tab{
    min-height:68px;
}
.report-type-tab strong{
    font-size:10.5px;
}
.report-type-tab.active{
    background:linear-gradient(145deg,#183b53,#204d66);
}
.comparison-scope-block{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.report-actions{
    flex-wrap:wrap;
}
.report-download-btn{
    min-height:38px;
}

/* =========================================================
   Critical report-preview centering fix
   V15 HTML uses .report-preview-shell/.report-preview-toolbar/
   .report-pdf-document, so style those exact classes.
   ========================================================= */
.report-preview-shell{
    width:100%;
    margin:18px auto 0;
    border:1px solid var(--v16-border);
    border-radius:20px;
    background:#eaf0f2;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(26,52,69,.055);
}

.report-preview-toolbar{
    min-height:62px;
    box-sizing:border-box;
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:#fff;
    border-bottom:1px solid #dfe7e9;
    direction:rtl;
}

.report-preview-toolbar>div{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}
.report-preview-toolbar strong{
    color:#244651;
    font-size:11px;
    line-height:1.45;
}
.report-preview-toolbar span{
    display:block;
    color:#72878e;
    font-size:8.5px;
    line-height:1.55;
}
.report-preview-toolbar .report-page-count{
    flex:0 0 auto;
    max-width:none;
    overflow:visible;
    white-space:nowrap;
    padding:6px 11px;
    border-radius:999px;
    border:1px solid #d2e5df;
    background:#eef8f5;
    color:#31766e;
    font-size:8.5px;
    font-weight:800;
}

/*
 * Reserve gutter on BOTH sides so the vertical scrollbar never makes
 * the A4 sheet look visually shifted.
 */
.report-preview-scroll{
    width:100%;
    height:68vh;
    min-height:440px;
    max-height:780px;
    box-sizing:border-box;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable both-edges;
    padding:22px 24px 32px;
    background:#eaf0f2;
    direction:rtl;
}

/*
 * max-content keeps A4 width when viewport is narrow.
 * min-width:100% + align-items:center centers it when viewport is wide.
 */
.report-pdf-document{
    width:max-content;
    min-width:100%;
    margin:0 auto;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
    direction:rtl;
}

.report-pdf-document>.report-pdf-page{
    flex:0 0 auto;
    margin-left:auto;
    margin-right:auto;
}

.report-preview-scroll::-webkit-scrollbar{
    width:12px;
    height:12px;
}
.report-preview-scroll::-webkit-scrollbar-track{
    background:#dfe7e9;
    border-radius:99px;
}
.report-preview-scroll::-webkit-scrollbar-thumb{
    background:#91a5ac;
    border:3px solid #dfe7e9;
    border-radius:99px;
}
.report-preview-scroll::-webkit-scrollbar-thumb:hover{
    background:#728b94;
}

/* Export must ignore screen-preview centering/container restrictions. */
.pdf-exporting .report-preview-shell{
    width:auto!important;
    margin:0!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    background:#fff!important;
}
.pdf-exporting .report-preview-toolbar{
    display:none!important;
}
.pdf-exporting .report-preview-scroll{
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
    scrollbar-gutter:auto!important;
    background:#fff!important;
}
.pdf-exporting .report-pdf-document{
    width:auto!important;
    min-width:0!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
}
.pdf-exporting .report-pdf-document>.report-pdf-page{
    margin:0!important;
}

/* ---------- Report on-screen readability ---------- */
.report-pdf-page{
    box-shadow:0 12px 36px rgba(20,45,63,.13);
}
.report-pdf-page .report-table th{
    font-weight:800;
}
.report-pdf-page .report-table tbody tr:nth-child(even){
    background:#fbfcfc;
}

/* ---------- Focus/accessibility ---------- */
a:focus-visible,
button:focus-visible,
select:focus-visible{
    outline:3px solid rgba(45,124,114,.20);
    outline-offset:2px;
}

/* ---------- Responsive ---------- */
@media(max-width:1280px){
    .dashboard-content{
        padding-left:22px;
        padding-right:22px;
    }
    .report-preview-scroll{
        padding-left:16px;
        padding-right:16px;
    }
}

@media(max-width:980px){
    .app-topbar{
        padding:15px 18px;
    }
    .page-heading h1{
        font-size:23px;
    }
    .report-preview-scroll{
        height:64vh;
        min-height:390px;
        padding:14px 10px 24px;
    }
}

@media(max-width:720px){
    .report-preview-toolbar{
        align-items:flex-start;
        padding:11px 12px;
    }
    .report-preview-toolbar .report-page-count{
        margin-top:1px;
    }
    .report-preview-scroll{
        min-height:350px;
        height:62vh;
        padding:10px 6px 20px;
    }
    .report-type-tabs{
        gap:7px;
    }
    .report-type-tab{
        min-height:60px;
        padding:8px 9px;
    }
}

@media(max-width:520px){
    .report-preview-toolbar{
        gap:8px;
    }
    .report-preview-toolbar strong{
        font-size:10px;
    }
    .report-preview-toolbar span{
        font-size:7.8px;
    }
    .report-preview-toolbar .report-page-count{
        padding:5px 8px;
        font-size:7.6px;
    }
}


/* =========================================================
   BASIRA V16.1 — School Reserve Style System
   إعادة ضبط شاملة للهوية البصرية على أسلوب الاحتياط المدرسي
   ========================================================= */

:root{
    --sr-bg:#f7fafb;
    --sr-card:#ffffff;
    --sr-text:#536970;
    --sr-heading:#284f64;
    --sr-muted:#71838a;
    --sr-border:#dfeae9;
    --sr-blue:#315b70;
    --sr-blue-dark:#284f64;
    --sr-teal:#478d87;
    --sr-teal-dark:#397a74;
    --sr-soft:#f2f6f7;
    --sr-radius:14px;
    --sr-shadow:0 7px 22px rgba(40,79,100,.055);
    --sr-font:"Cairo",Tahoma,Arial,"Segoe UI",sans-serif;
}

/* ---------- Typography reset ---------- */
html,body,
.basira-app,
button,input,select,textarea{
    font-family:var(--sr-font)!important;
}

body.basira-app{
    color:var(--sr-text);
    background:var(--sr-bg);
    font-size:14px;
    line-height:1.75;
}

.app-shell{
    background:var(--sr-bg);
}

/* ---------- Main layout ---------- */
.sidebar{
    background:linear-gradient(180deg,#315b70 0%,#284f64 100%);
    padding:20px 14px 16px;
    box-shadow:-5px 0 20px rgba(40,79,100,.07);
}

.sidebar-brand{
    gap:11px;
    padding:2px 8px 18px;
}
.sidebar-brand strong{
    font-size:22px;
    font-weight:700;
}
.sidebar-brand small{
    font-size:11px;
    color:rgba(255,255,255,.72);
}

.sidebar-nav{
    gap:4px;
    margin-top:15px;
}

.nav-item{
    min-height:45px;
    padding:0 11px;
    border-radius:11px;
    font-size:13px;
    font-weight:600;
    color:rgba(255,255,255,.78);
}
.nav-item:hover{
    background:rgba(255,255,255,.07);
}
.nav-item.active{
    background:rgba(71,141,135,.28);
    border:1px solid rgba(255,255,255,.09);
    color:#fff;
}
.nav-icon{
    width:27px;
    height:27px;
    border-radius:8px;
    font-size:13px;
    background:rgba(255,255,255,.09);
}
.sidebar-foot{
    padding:14px 8px 0;
    font-size:10px;
}
.sidebar-foot strong{
    font-size:11px;
}

/* ---------- Top bar ---------- */
.app-topbar{
    min-height:86px;
    padding:14px 26px;
    border-bottom:1px solid var(--sr-border);
    box-shadow:none;
}
.page-heading{
    margin-left:auto;
}
.page-kicker,.section-kicker{
    color:var(--sr-teal-dark);
    font-size:11px;
    font-weight:700;
    margin-bottom:2px;
}
.page-heading h1{
    font-size:25px;
    font-weight:700;
    color:var(--sr-heading);
    letter-spacing:0;
}
.page-heading p{
    margin-top:3px;
    font-size:12px;
    color:var(--sr-muted);
}
.topbar-user{
    gap:9px;
    padding-right:15px;
    border-right:1px solid var(--sr-border);
}
.user-avatar{
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(145deg,var(--sr-blue),var(--sr-teal));
    font-size:14px;
}
.user-text strong{
    font-size:12px;
    color:var(--sr-heading);
}
.user-text small{
    font-size:10px;
    color:var(--sr-muted);
}
.logout-link{
    font-size:11px;
    color:var(--sr-blue);
    border-color:var(--sr-border);
    border-radius:9px;
    padding:7px 10px;
    background:#fff;
}

/* ---------- Content rhythm ---------- */
.dashboard-content{
    max-width:1450px;
    padding:22px 24px 40px;
}

.filters-card,
.panel-card,
.kpi-card,
.analysis-note,
.wilayat-card,
.priority-summary-card,
.trend-highlight-card,
.level-highlight-card,
.comparison-delta-card,
.grade-structure-card{
    border:1px solid var(--sr-border)!important;
    box-shadow:var(--sr-shadow)!important;
    background:var(--sr-card)!important;
}

.filters-card,
.panel-card{
    border-radius:var(--sr-radius)!important;
}

.filters-card{
    padding:16px 18px 18px;
}
.panel-card{
    padding:18px;
}

.section-title-row,
.panel-head{
    align-items:center;
}
.section-title-row h2,
.panel-head h2{
    font-size:17px;
    font-weight:700;
    color:var(--sr-heading);
}
.panel-chip{
    font-size:10px;
    color:var(--sr-teal-dark);
    background:#edf5f4;
    padding:6px 10px;
    border-radius:10px;
}
.reset-filter{
    font-size:10.5px;
    color:var(--sr-teal-dark);
    padding:7px 10px;
    border-radius:9px;
    background:#edf5f4;
}

/* ---------- Filters / forms ---------- */
.filters-grid{
    gap:12px;
    margin-top:14px;
}
.filter-field label{
    font-size:11.5px!important;
    font-weight:600!important;
    color:#61767e!important;
    margin-bottom:6px!important;
}
.filter-field select{
    height:44px!important;
    padding:0 12px!important;
    border:1px solid var(--sr-border)!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#425a64!important;
    font-size:12.5px!important;
    font-weight:500;
}
.filter-field select:focus{
    border-color:#86aaa6!important;
    box-shadow:0 0 0 3px rgba(71,141,135,.10)!important;
}
.filter-submit{
    height:44px;
    border-radius:10px;
    background:var(--sr-blue);
    font-size:12px;
    font-weight:700;
}

/* ---------- Context chips ---------- */
.context-line{
    gap:7px;
    margin:12px 0 16px;
}
.context-line div{
    padding:6px 10px;
    border-radius:10px;
    border:1px solid var(--sr-border);
    background:#fff;
    font-size:10.5px;
    color:var(--sr-muted);
}
.context-line strong{
    font-size:10.5px;
    color:var(--sr-heading);
}

/* ---------- KPI cards ---------- */
.kpi-grid{
    gap:11px;
    margin-bottom:15px;
}
.kpi-card{
    border-radius:var(--sr-radius)!important;
    padding:15px 14px!important;
    min-height:82px;
}
.kpi-icon{
    flex:0 0 40px;
    width:40px;
    height:40px;
    border-radius:10px;
    background:#edf5f4;
    color:var(--sr-teal-dark);
    font-size:13px;
}
.kpi-card span{
    font-size:11px!important;
    color:var(--sr-muted)!important;
    margin-bottom:2px!important;
}
.kpi-card strong{
    font-size:23px!important;
    line-height:1.25;
    color:var(--sr-heading)!important;
    font-weight:700;
}
.kpi-card small{
    font-size:9.5px!important;
    line-height:1.6!important;
    color:#82939a!important;
}

/* ---------- Tables ---------- */
.table-wrap,
.long-table-scroll,
.subjects-table-scroll{
    border-radius:11px;
    border:1px solid #e4ecec;
    background:#fff;
}
.data-table{
    font-size:12px!important;
    color:var(--sr-text);
}
.data-table th{
    padding:10px 11px!important;
    background:#f2f5f7!important;
    color:#60747d!important;
    font-size:11px!important;
    font-weight:700!important;
    border-bottom:1px solid var(--sr-border)!important;
}
.data-table td{
    padding:10px 11px!important;
    font-size:11.5px!important;
    color:#526870!important;
    border-bottom:1px solid #edf2f2!important;
}
.data-table td strong{
    color:var(--sr-heading)!important;
    font-weight:700;
}
.data-table tbody tr:nth-child(even){
    background:#fbfcfc;
}
.data-table tbody tr:hover{
    background:#f4f8f8;
}
.table-action,
.back-page-btn{
    font-size:10.5px!important;
    border-radius:9px!important;
    padding:7px 10px!important;
    background:var(--sr-blue)!important;
}
.back-page-btn.secondary{
    background:#fff!important;
    color:var(--sr-teal-dark)!important;
}
.rank-pill,.rank-number,.rank-na{
    min-width:29px;
    height:29px;
    font-size:10.5px!important;
    border-radius:8px;
}

/* ---------- Notes / badges ---------- */
.analysis-note{
    border-radius:var(--sr-radius)!important;
    padding:15px 16px!important;
}
.analysis-note span{
    font-size:12px!important;
    color:var(--sr-heading)!important;
}
.analysis-note p{
    font-size:11px!important;
    line-height:1.9!important;
    color:var(--sr-muted)!important;
}
.education-badge,
.priority-badge,
.classification-badge,
.comparison-status{
    font-size:10px!important;
    padding:5px 9px!important;
}
.education-warning,
.ranking-note,
.levels-ranking-note,
.proficiency-ranking-note,
.trends-note,
.comparisons-note,
.priorities-note{
    font-size:10.5px!important;
    line-height:1.8!important;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb-line{
    font-size:10.5px!important;
    color:var(--sr-muted);
}
.breadcrumb-line strong{
    color:var(--sr-heading);
}

/* ---------- Wilayat / entity cards ---------- */
.wilayat-overview-strip>div{
    border-radius:12px;
    padding:13px 14px;
}
.wilayat-overview-strip span{
    font-size:10.5px!important;
}
.wilayat-overview-strip strong{
    font-size:18px!important;
}
.wilayat-card{
    border-radius:var(--sr-radius)!important;
    padding:17px!important;
}
.wilayat-rank{
    font-size:10px!important;
    border-radius:9px;
}
.wilayat-card h2{
    font-size:18px!important;
}
.wilayat-score{
    font-size:24px!important;
}
.wilayat-meta span{
    font-size:10px!important;
    border-radius:9px;
}
.wilayat-mini-kpis span{
    font-size:9.5px!important;
}
.wilayat-mini-kpis strong{
    font-size:15px!important;
}
.wilayat-levels span{
    font-size:10px!important;
}
.wilayat-card-foot small{
    font-size:9.5px!important;
}
.wilayat-card-foot strong{
    font-size:13px!important;
}
.wilayat-card-foot a{
    font-size:10.5px!important;
}

/* ---------- Ranking / school list ---------- */
.school-rank-item{
    padding:10px 0;
}
.rank-school strong{
    font-size:11.5px!important;
}
.rank-school small{
    font-size:9.5px!important;
}
.rank-score strong{
    font-size:15px!important;
}
.rank-score small{
    font-size:9px!important;
}
.empty-state{
    font-size:11.5px!important;
}

/* ---------- Charts ---------- */
.chart-years{
    font-size:10px!important;
}
.trend-label{
    font-size:12px!important;
}
.level-name strong{
    font-size:13px!important;
}
.level-name small{
    font-size:9px!important;
}
.level-value{
    font-size:11px!important;
}

/* ---------- Specialized cards ---------- */
.priority-summary-card,
.trend-highlight-card,
.level-highlight-card,
.comparison-delta-card{
    border-radius:var(--sr-radius)!important;
}
.priority-summary-card span,
.trend-highlight-card span,
.level-highlight-card span,
.comparison-delta-card span{
    font-size:10.5px!important;
}
.priority-summary-card strong,
.trend-highlight-card strong,
.level-highlight-card strong,
.comparison-delta-card strong{
    font-size:15px!important;
}
.priority-summary-card small,
.trend-highlight-card small,
.level-highlight-card small,
.comparison-delta-card small{
    font-size:9.5px!important;
}
.priority-focus-card{
    border-radius:var(--sr-radius)!important;
}
.priority-focus-body span{
    font-size:10.5px!important;
}
.priority-focus-body strong{
    font-size:16px!important;
}
.priority-focus-body small{
    font-size:10px!important;
}
.priority-reasons span{
    font-size:9.5px!important;
}

/* ---------- Levels ---------- */
.level-big-card{
    border-radius:var(--sr-radius)!important;
}
.level-letter{
    font-size:27px!important;
}
.level-big-content span{
    font-size:10.5px!important;
}
.level-big-content strong{
    font-size:18px!important;
}
.levels-bar-name strong{
    font-size:13px!important;
}
.levels-bar-name small{
    font-size:9px!important;
}
.level-highlight-card span{
    font-size:10px!important;
}
.level-highlight-card strong{
    font-size:14px!important;
}
.level-highlight-card small{
    font-size:11px!important;
}

/* ---------- Report builder UI only; preserve actual PDF page typography ---------- */
.reports-page .report-builder{
    border-radius:var(--sr-radius)!important;
}
.reports-page .report-type-tab{
    border-radius:12px;
}
.reports-page .report-type-tab span{
    font-size:9.5px!important;
}
.reports-page .report-type-tab strong{
    font-size:12px!important;
}
.reports-page .comparison-scope-title span{
    font-size:9.5px!important;
}
.reports-page .comparison-scope-title strong{
    font-size:10.5px!important;
}
.reports-page .comparison-scope-tab{
    font-size:10.5px!important;
}
.reports-page .report-filter-explainer{
    font-size:10px!important;
}
.reports-page .report-export-status{
    font-size:10px!important;
}
.reports-page .report-download-btn{
    font-size:11px!important;
    min-height:40px;
    border-radius:9px;
}
.report-preview-toolbar strong{
    font-size:12px!important;
}
.report-preview-toolbar span{
    font-size:10px!important;
}
.report-preview-toolbar .report-page-count{
    font-size:9.5px!important;
}

/* ---------- Consistent buttons ---------- */
button,
.primary-button,
.primary-link-button,
.report-download-btn,
.table-action,
.back-page-btn,
.reset-filter{
    font-family:var(--sr-font)!important;
    font-weight:600!important;
}

/* ---------- Smooth compact system feeling ---------- */
.filters-card,.panel-card,.kpi-card,.wilayat-card,
.priority-summary-card,.trend-highlight-card,.level-highlight-card,
.comparison-delta-card{
    transition:border-color .15s ease,box-shadow .15s ease;
}
.filters-card:hover,.panel-card:hover{
    border-color:#d6e4e2!important;
}

/* ---------- Responsive ---------- */
@media(max-width:1200px){
    .dashboard-content{
        padding:20px 20px 36px;
    }
    .kpi-card strong{
        font-size:21px!important;
    }
}
@media(max-width:900px){
    body.basira-app{
        font-size:13px;
    }
    .app-topbar{
        min-height:78px;
        padding:12px 16px;
    }
    .page-heading h1{
        font-size:22px;
    }
    .dashboard-content{
        padding:16px;
    }
    .data-table{
        font-size:11.5px!important;
    }
}
@media(max-width:560px){
    .filters-card,.panel-card{
        border-radius:12px!important;
    }
    .filters-card{
        padding:14px;
    }
    .panel-card{
        padding:14px;
    }
    .page-heading h1{
        font-size:20px;
    }
    .kpi-card{
        min-height:74px;
    }
}


/* =========================================================
   BASIRA V16.2 — Responsive Final Polish
   Prepared for the next PWA/installable-app stage.
   ========================================================= */

/* Desktop refinement */
.dashboard-content{
    width:min(100%,1450px);
    margin-inline:auto;
}
.filters-grid,
.kpi-grid,
.report-type-tabs{
    min-width:0;
}
.filter-field,
.kpi-card,
.panel-card,
.report-type-tab{
    min-width:0;
}

/* Touch-friendly controls */
button,
select,
a.table-action,
a.back-page-btn,
a.reset-filter,
.report-download-btn,
.report-type-tab,
.comparison-scope-tab{
    min-height:44px;
}

/* Avoid broken tables on narrow widths */
.table-wrap,
.long-table-scroll,
.subjects-table-scroll,
.priorities-table-scroll{
    max-width:100%;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
}
.data-table{
    width:100%;
}
.data-table th,
.data-table td{
    vertical-align:middle;
}

/* Make charts stay inside cards */
.chart-card,
.report-chart-card,
.trend-chart,
.report-trend-chart{
    max-width:100%;
    overflow:hidden;
}
.trend-chart svg,
.report-trend-chart svg{
    width:100%!important;
    height:auto!important;
}

/* Report preview remains centered but can scroll horizontally on phones */
.report-preview-scroll{
    -webkit-overflow-scrolling:touch;
}
.report-pdf-document{
    min-width:100%;
}

/* ---------- Tablet ---------- */
@media(max-width:1100px){
    .dashboard-content{
        padding:18px 18px 34px;
    }
    .filters-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    .kpi-grid{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
    .wilayats-grid,
    .priority-summary-grid,
    .trend-highlights-grid,
    .levels-highlight-grid,
    .comparison-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    .report-type-tabs{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}

/* ---------- Mobile / small tablet ---------- */
@media(max-width:820px){
    body.basira-app{
        overflow-x:hidden;
    }

    .app-main{
        min-width:0;
        width:100%;
    }

    .app-topbar{
        min-height:72px;
        padding:10px 12px;
        gap:10px;
        position:sticky;
        top:0;
        z-index:20;
        background:#fff;
    }

    .sidebar-toggle{
        display:inline-grid!important;
        place-items:center;
        width:44px;
        height:44px;
        flex:0 0 44px;
        border-radius:10px;
        border:1px solid #dfeae9;
        background:#fff;
        color:#315b70;
        font-size:20px;
    }

    .page-heading{
        min-width:0;
    }
    .page-heading h1{
        font-size:20px!important;
        line-height:1.35;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .page-heading p{
        font-size:10.5px!important;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .page-kicker{
        font-size:9.5px!important;
    }

    .topbar-user{
        padding-right:0;
        border-right:0;
        gap:6px;
    }
    .user-text{
        display:none;
    }
    .logout-link{
        display:none;
    }
    .user-avatar{
        width:38px;
        height:38px;
        border-radius:10px;
    }

    /* Off-canvas sidebar on mobile */
    .sidebar{
        position:fixed!important;
        top:0;
        right:0;
        bottom:0;
        width:min(82vw,310px)!important;
        height:100dvh!important;
        z-index:1000;
        transform:translateX(105%);
        transition:transform .22s ease;
        overflow:hidden;
        box-shadow:-14px 0 35px rgba(24,50,74,.18);
    }
    .sidebar.open,
    .sidebar.is-open,
    body.sidebar-open .sidebar{
        transform:translateX(0);
    }
    .sidebar-nav{
        max-height:calc(100dvh - 145px);
        overflow-y:auto;
        padding-bottom:18px;
    }

    .dashboard-content{
        width:100%;
        padding:14px 12px 28px;
    }

    .filters-card,
    .panel-card{
        padding:14px!important;
    }

    .section-title-row,
    .panel-head{
        gap:10px;
        flex-wrap:wrap;
    }
    .section-title-row h2,
    .panel-head h2{
        font-size:15px!important;
    }

    .filters-grid{
        grid-template-columns:1fr!important;
        gap:10px!important;
    }

    .filter-field select{
        width:100%;
        min-height:46px!important;
        font-size:14px!important;
    }

    .context-line{
        display:flex!important;
        overflow-x:auto;
        gap:6px;
        padding-bottom:4px;
        -webkit-overflow-scrolling:touch;
    }
    .context-line>div{
        flex:0 0 auto;
        white-space:nowrap;
    }

    .kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:9px!important;
    }
    .kpi-card{
        min-height:86px!important;
        padding:13px!important;
    }
    .kpi-card strong{
        font-size:20px!important;
    }
    .kpi-card span{
        font-size:10px!important;
    }
    .kpi-card small{
        font-size:9px!important;
    }
    .kpi-icon{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .wilayats-grid,
    .priority-summary-grid,
    .trend-highlights-grid,
    .levels-highlight-grid,
    .comparison-summary-grid,
    .report-highlight-grid,
    .report-change-strip,
    .report-common-grades{
        grid-template-columns:1fr!important;
    }

    .data-table{
        min-width:720px;
        font-size:11px!important;
    }
    .data-table th,
    .data-table td{
        white-space:nowrap;
        padding:9px 10px!important;
    }

    .report-type-tabs{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
    }
    .report-type-tab{
        min-height:60px!important;
        padding:8px 10px!important;
    }
    .report-type-tab strong{
        font-size:11px!important;
    }
    .report-type-tab span{
        font-size:9px!important;
    }

    .comparison-scope-block{
        flex-direction:column!important;
        align-items:stretch!important;
    }
    .comparison-scope-tabs{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
    }
    .comparison-scope-tab{
        width:100%;
    }

    .report-actions{
        width:100%;
        display:grid!important;
        grid-template-columns:1fr 1fr;
        gap:8px!important;
    }
    .report-actions .reset-filter{
        grid-column:1 / -1;
        text-align:center;
    }

    .report-preview-shell{
        border-radius:14px!important;
    }
    .report-preview-toolbar{
        padding:10px 11px!important;
    }
    .report-preview-toolbar>div{
        min-width:0;
    }
    .report-preview-toolbar strong{
        font-size:11px!important;
    }
    .report-preview-toolbar span{
        font-size:9px!important;
    }
    .report-preview-scroll{
        height:62dvh!important;
        min-height:330px!important;
        padding:10px 6px 18px!important;
    }

    .priority-focus-card{
        align-items:flex-start;
    }
}

/* ---------- Phone ---------- */
@media(max-width:520px){
    .app-topbar{
        min-height:66px;
        padding:9px 10px;
    }
    .page-heading h1{
        font-size:18px!important;
    }
    .page-heading p{
        display:none;
    }

    .dashboard-content{
        padding:10px 9px 24px;
    }

    .filters-card,
    .panel-card{
        border-radius:11px!important;
        padding:12px!important;
    }

    .kpi-grid{
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
    }
    .kpi-card{
        min-height:80px!important;
        gap:8px!important;
    }
    .kpi-card strong{
        font-size:18px!important;
    }

    /* 16px prevents iOS Safari zooming when a select gains focus */
    .filter-field select{
        font-size:16px!important;
    }

    .report-type-tabs{
        grid-template-columns:1fr 1fr!important;
    }

    .report-preview-toolbar .report-page-count{
        font-size:8.5px!important;
        padding:5px 7px!important;
    }

    .report-preview-scroll{
        height:60dvh!important;
        padding-inline:4px!important;
    }

    .analysis-note,
    .priority-method-note,
    .report-filter-explainer{
        font-size:10.5px!important;
    }
}

/* ---------- Very narrow phone ---------- */
@media(max-width:390px){
    .kpi-grid{
        grid-template-columns:1fr!important;
    }
    .report-type-tabs{
        grid-template-columns:1fr!important;
    }
    .comparison-scope-tabs{
        grid-template-columns:1fr!important;
    }
    .report-actions{
        grid-template-columns:1fr!important;
    }
    .report-actions .reset-filter{
        grid-column:auto;
    }
}

/* Standalone-app safe areas — useful in the next PWA stage */
@supports(padding:max(0px)){
    @media(max-width:820px){
        .app-topbar{
            padding-top:max(9px,env(safe-area-inset-top));
        }
        .sidebar{
            padding-top:max(20px,env(safe-area-inset-top));
            padding-bottom:max(16px,env(safe-area-inset-bottom));
        }
        .dashboard-content{
            padding-bottom:max(28px,env(safe-area-inset-bottom));
        }
    }
}


/* =========================================================
   BASIRA V16.3 — Final Mixed Typography
   Arial for data/UI + Cairo for headings
   ========================================================= */

:root{
    --basira-ui-font: Arial, Tahoma, "Segoe UI", sans-serif;
    --basira-heading-font: "Cairo", Tahoma, Arial, "Segoe UI", sans-serif;
}

/* Main UI / data / numbers */
html,
body,
.basira-app,
button,
input,
select,
textarea,
.data-table,
.report-table,
.filter-field,
.context-line,
.kpi-card,
.analysis-note,
.priority-reasons,
.priority-badge,
.classification-badge,
.comparison-status,
.education-badge,
.panel-chip,
.reset-filter,
.table-action,
.back-page-btn,
.report-download-btn,
.comparison-scope-tab,
.report-filter-explainer{
    font-family:var(--basira-ui-font)!important;
}

/* Headings only */
.page-heading h1,
.section-title-row h2,
.panel-head h2,
.sidebar-brand strong,
.wilayat-card h2,
.report-type-tab strong,
.report-preview-toolbar strong,
.report-page-title h2,
.report-cover-center h1,
.report-cover-center h2,
.report-reading-box h3{
    font-family:var(--basira-heading-font)!important;
    font-weight:700!important;
}

/* Navigation: Arial for compactness and clarity */
.sidebar-nav,
.nav-item,
.sidebar-foot{
    font-family:var(--basira-ui-font)!important;
}

/* Numbers need strong contrast and compact width */
.kpi-card strong,
.wilayat-score,
.wilayat-mini-kpis strong,
.rank-score strong,
.level-value,
.priority-score,
.report-kpi-grid strong,
.report-change-strip strong{
    font-family:Arial,Tahoma,sans-serif!important;
    font-variant-numeric:tabular-nums;
    letter-spacing:0;
}

/* Desktop sizing */
body.basira-app{
    font-size:14px!important;
}
.page-heading h1{
    font-size:25px!important;
    line-height:1.35!important;
}
.page-heading p{
    font-family:var(--basira-ui-font)!important;
    font-size:12px!important;
}
.page-kicker,
.section-kicker{
    font-family:var(--basira-ui-font)!important;
    font-size:10.5px!important;
}
.nav-item{
    font-size:13px!important;
}
.filter-field label{
    font-size:11.5px!important;
}
.filter-field select{
    font-family:var(--basira-ui-font)!important;
    font-size:13px!important;
}
.kpi-card span{
    font-size:10.5px!important;
}
.kpi-card strong{
    font-size:22px!important;
}
.kpi-card small{
    font-size:9.5px!important;
}
.data-table th{
    font-size:11px!important;
}
.data-table td{
    font-size:11.5px!important;
}
.data-table td strong{
    font-family:var(--basira-ui-font)!important;
}
.section-title-row h2,
.panel-head h2{
    font-size:17px!important;
}

/* Reports preview UI — keep PDF content separate */
.reports-page .report-type-tab span{
    font-family:var(--basira-ui-font)!important;
}
.reports-page .report-type-tab strong{
    font-size:12px!important;
}
.report-preview-toolbar span,
.report-preview-toolbar .report-page-count{
    font-family:var(--basira-ui-font)!important;
}

/* PDF page typography:
   Arial improves tabular readability; headings retain Cairo where available */
.report-pdf-page{
    font-family:Arial,Tahoma,"Segoe UI",sans-serif!important;
}
.report-pdf-page .report-page-title h2,
.report-pdf-page .report-cover-center h1,
.report-pdf-page .report-cover-center h2,
.report-pdf-page .report-reading-box h3{
    font-family:"Cairo",Tahoma,Arial,"Segoe UI",sans-serif!important;
}
.report-pdf-page .report-table,
.report-pdf-page .report-table th,
.report-pdf-page .report-table td,
.report-pdf-page .report-kpi-grid,
.report-pdf-page .report-change-strip{
    font-family:Arial,Tahoma,"Segoe UI",sans-serif!important;
}

/* Mobile tuning */
@media(max-width:820px){
    .page-heading h1{
        font-size:20px!important;
    }
    .page-heading p{
        font-size:10.5px!important;
    }
    .nav-item{
        font-size:13px!important;
    }
    .filter-field label{
        font-size:11px!important;
    }
    .filter-field select{
        font-size:14px!important;
    }
    .data-table th{
        font-size:10.5px!important;
    }
    .data-table td{
        font-size:11px!important;
    }
}

@media(max-width:520px){
    .page-heading h1{
        font-size:18px!important;
    }
    .filter-field select{
        font-size:16px!important;
    }
    .kpi-card strong{
        font-size:19px!important;
    }
    .kpi-card span{
        font-size:10px!important;
    }
}


/* =========================================================
   BASIRA V17 — Calm visual identity + PWA install UI
   ========================================================= */
:root{
    --v17-navy:#3b6876;
    --v17-navy-dark:#335d6b;
    --v17-teal:#5b938e;
    --v17-teal-dark:#477f7a;
    --v17-bg:#f7fafb;
    --v17-soft:#eef5f4;
    --v17-border:#dce8e7;
    --v17-text:#49636d;
}

/* Softer overall palette */
body.basira-app,
.login-page{
    background:var(--v17-bg)!important;
}
.sidebar{
    background:linear-gradient(180deg,#416f7c 0%,#365f6d 100%)!important;
}
.nav-item.active{
    background:rgba(91,147,142,.30)!important;
    border-color:rgba(219,240,237,.13)!important;
}
.nav-item:hover{
    background:rgba(255,255,255,.075)!important;
}
.brand-mark,
.small-mark{
    background:rgba(91,147,142,.20);
}
.filters-card,
.panel-card,
.kpi-card,
.wilayat-card,
.report-preview-shell{
    border-color:var(--v17-border)!important;
}
.kpi-icon{
    background:#edf5f4!important;
    color:var(--v17-teal-dark)!important;
}

/* Softer buttons */
.primary-button,
.table-action,
.back-page-btn:not(.secondary),
.report-download-btn.pdf{
    background:var(--v17-navy)!important;
    border-color:var(--v17-navy)!important;
}
.primary-button:hover,
.table-action:hover,
.back-page-btn:not(.secondary):hover,
.report-download-btn.pdf:hover{
    background:var(--v17-navy-dark)!important;
}
.report-download-btn.excel,
.comparison-scope-tab.active{
    background:var(--v17-teal-dark)!important;
    border-color:var(--v17-teal-dark)!important;
}
.reset-filter,
.panel-chip{
    background:#eef5f4!important;
    color:#477f7a!important;
}
.filter-field select:focus{
    border-color:#91b4b0!important;
    box-shadow:0 0 0 3px rgba(91,147,142,.10)!important;
}

/* Install button */
.pwa-install-btn{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:8px 12px;
    border:1px solid #cfe1df;
    border-radius:10px;
    background:#eef6f5;
    color:#376f6b;
    font-family:Arial,Tahoma,sans-serif!important;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    transition:.16s ease;
}
.pwa-install-btn[hidden]{
    display:none!important;
}
.pwa-install-btn:hover{
    background:#e5f1ef;
    border-color:#bbd8d4;
    transform:translateY(-1px);
}
.pwa-install-btn.is-ready{
    background:#4e8781;
    border-color:#4e8781;
    color:#fff;
    box-shadow:0 6px 16px rgba(78,135,129,.13);
}
.pwa-install-icon{
    width:22px;
    height:22px;
    border-radius:7px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.55);
    font-size:11px;
}
.pwa-install-btn.is-ready .pwa-install-icon{
    background:rgba(255,255,255,.15);
}
.login-pwa-install{
    margin-inline-start:8px;
}

/* PWA help dialog */
.pwa-help-modal[hidden]{display:none!important}
.pwa-help-modal{
    position:fixed;
    inset:0;
    z-index:99999;
    display:grid;
    place-items:center;
    padding:18px;
    direction:rtl;
}
.pwa-help-backdrop{
    position:absolute;
    inset:0;
    background:rgba(33,54,65,.35);
    backdrop-filter:blur(3px);
}
.pwa-help-card{
    position:relative;
    z-index:1;
    width:min(430px,100%);
    border-radius:16px;
    border:1px solid #dbe8e7;
    background:#fff;
    box-shadow:0 20px 55px rgba(28,55,68,.18);
    padding:24px;
    color:#506973;
    font-family:Arial,Tahoma,sans-serif;
}
.pwa-help-card h3{
    margin:8px 0 12px;
    color:#315c69;
    font-family:"Cairo",Tahoma,Arial,sans-serif;
    font-size:18px;
}
.pwa-help-card p,
.pwa-help-card li{
    font-size:13px;
    line-height:1.9;
}
.pwa-help-card ol{
    margin:8px 0;
    padding-right:22px;
}
.pwa-help-close{
    position:absolute;
    left:13px;
    top:10px;
    width:34px;
    height:34px;
    border:0;
    border-radius:9px;
    background:#f1f5f5;
    color:#607780;
    font-size:21px;
    cursor:pointer;
}
.pwa-help-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:#edf5f4;
    color:#477f7a;
    font-size:20px;
}

/* Login install layout */
.login-help{
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
}

/* Standalone mode: use the full window and hide install action */
@media(display-mode:standalone){
    .pwa-install-btn{display:none!important}
    body{overscroll-behavior-y:none}
}

@media(max-width:820px){
    .app-topbar .pwa-install-btn{
        min-width:42px;
        width:42px;
        padding:0;
        flex:0 0 42px;
    }
    .app-topbar .pwa-install-btn>span:last-child{
        display:none;
    }
    .app-topbar .pwa-install-icon{
        width:24px;
        height:24px;
        background:transparent;
        font-size:15px;
    }
}

@media(max-width:520px){
    .login-pwa-install{
        width:100%;
        margin:6px 0 0;
    }
}


/* =========================================================
   BASIRA V17.1 — Calm Official Theme
   ألوان رسمية هادئة + عناوين أوضح وأكثر تدرجاً
   ========================================================= */

:root{
    --official-bg:#f7f9fa;
    --official-surface:#ffffff;
    --official-surface-soft:#f2f6f6;
    --official-border:#dfe8e8;

    --official-sidebar:#587785;
    --official-sidebar-deep:#4d6c79;
    --official-sidebar-text:#edf4f5;

    --official-title:#315b69;
    --official-title-2:#3e6b75;
    --official-text:#50666f;
    --official-muted:#7b8d94;

    --official-teal:#6d9a95;
    --official-teal-deep:#517f7a;
    --official-teal-soft:#edf5f4;

    --official-blue-soft:#eef4f6;
    --official-blue-border:#d6e3e6;

    --official-warm:#a58b5c;
    --official-warm-soft:#f8f4ec;

    --official-shadow:0 6px 20px rgba(55,81,92,.045);
}

/* ---------- Overall background ---------- */
body.basira-app,
.login-page,
.app-shell{
    background:var(--official-bg)!important;
    color:var(--official-text)!important;
}

/* ---------- Sidebar: lighter, calmer, more official ---------- */
.sidebar{
    background:linear-gradient(180deg,var(--official-sidebar) 0%,var(--official-sidebar-deep) 100%)!important;
    box-shadow:-4px 0 18px rgba(62,88,99,.06)!important;
    border-left:1px solid rgba(255,255,255,.04)!important;
}
.sidebar-brand{
    border-bottom:1px solid rgba(255,255,255,.10);
}
.sidebar-brand strong{
    color:#fff!important;
    font-size:21px!important;
    letter-spacing:0!important;
}
.sidebar-brand small{
    color:rgba(255,255,255,.74)!important;
}
.nav-item{
    color:rgba(255,255,255,.82)!important;
    font-weight:600!important;
    border:1px solid transparent;
}
.nav-item:hover{
    background:rgba(255,255,255,.075)!important;
    color:#fff!important;
}
.nav-item.active{
    background:rgba(109,154,149,.28)!important;
    border-color:rgba(231,244,242,.17)!important;
    color:#fff!important;
    box-shadow:none!important;
}
.nav-icon{
    background:rgba(255,255,255,.10)!important;
    color:#f2f7f8!important;
}
.nav-item.active .nav-icon{
    background:rgba(224,241,238,.16)!important;
}
.sidebar-foot{
    color:rgba(255,255,255,.60)!important;
}
.sidebar-foot strong{
    color:#fff!important;
}

/* ---------- Header ---------- */
.app-topbar{
    background:#fff!important;
    border-bottom:1px solid var(--official-border)!important;
    box-shadow:0 2px 12px rgba(62,88,99,.025)!important;
}
.page-kicker{
    color:var(--official-teal-deep)!important;
    font-weight:700!important;
}
.page-heading h1{
    color:var(--official-title)!important;
    font-weight:700!important;
}
.page-heading p{
    color:var(--official-muted)!important;
}
.user-text strong{
    color:var(--official-title)!important;
}
.user-text small{
    color:var(--official-muted)!important;
}
.user-avatar{
    background:linear-gradient(145deg,#648793,#6f9b96)!important;
}
.logout-link{
    color:var(--official-title-2)!important;
    background:#fff!important;
    border-color:var(--official-border)!important;
}
.logout-link:hover{
    background:var(--official-blue-soft)!important;
}

/* ---------- Page / section headings ---------- */
.section-kicker{
    color:var(--official-teal-deep)!important;
    font-weight:700!important;
}
.section-title-row h2,
.panel-head h2{
    color:var(--official-title)!important;
    font-weight:700!important;
    position:relative;
}
.section-title-row h2::after,
.panel-head h2::after{
    content:"";
    display:inline-block;
    width:26px;
    height:3px;
    margin-inline-start:8px;
    vertical-align:middle;
    border-radius:999px;
    background:var(--official-teal);
    opacity:.78;
}

/* Main special section titles */
.priority-focus-body strong,
.wilayat-card h2,
.rank-school strong,
.levels-bar-name strong,
.level-big-content strong,
.report-preview-toolbar strong{
    color:var(--official-title)!important;
}

/* ---------- Cards ---------- */
.filters-card,
.panel-card,
.kpi-card,
.wilayat-card,
.priority-summary-card,
.trend-highlight-card,
.level-highlight-card,
.comparison-delta-card,
.grade-structure-card,
.analysis-note{
    background:var(--official-surface)!important;
    border-color:var(--official-border)!important;
    box-shadow:var(--official-shadow)!important;
}
.filters-card:hover,
.panel-card:hover{
    border-color:#d7e3e3!important;
}

/* KPI cards */
.kpi-card{
    border-top:3px solid #edf3f4!important;
}
.kpi-card:nth-child(2n){
    border-top-color:#e8f1f0!important;
}
.kpi-card span{
    color:var(--official-muted)!important;
}
.kpi-card strong{
    color:var(--official-title)!important;
}
.kpi-card small{
    color:#87989e!important;
}
.kpi-icon{
    background:var(--official-teal-soft)!important;
    color:var(--official-teal-deep)!important;
}

/* ---------- Filters ---------- */
.filter-field label{
    color:#667c84!important;
    font-weight:600!important;
}
.filter-field select{
    color:#415d67!important;
    background:#fff!important;
    border-color:var(--official-border)!important;
}
.filter-field select:hover{
    border-color:#cbdcdd!important;
}
.filter-field select:focus{
    border-color:#98bbb7!important;
    box-shadow:0 0 0 3px rgba(109,154,149,.10)!important;
}
.reset-filter,
.panel-chip{
    background:var(--official-teal-soft)!important;
    color:var(--official-teal-deep)!important;
    border-color:transparent!important;
}

/* ---------- Context chips ---------- */
.context-line>div{
    background:#fff!important;
    border-color:var(--official-border)!important;
    color:var(--official-muted)!important;
}
.context-line strong{
    color:var(--official-title)!important;
}

/* ---------- Tables ---------- */
.table-wrap,
.long-table-scroll,
.subjects-table-scroll,
.priorities-table-scroll{
    border-color:var(--official-border)!important;
    background:#fff!important;
}
.data-table th{
    background:#f1f5f6!important;
    color:#5e747c!important;
    border-bottom-color:#dce6e7!important;
}
.data-table td{
    color:#536a72!important;
    border-bottom-color:#edf2f3!important;
}
.data-table tbody tr:nth-child(even){
    background:#fbfcfc!important;
}
.data-table tbody tr:hover{
    background:#f2f7f6!important;
}
.data-table td strong{
    color:var(--official-title)!important;
}

/* ---------- Buttons ---------- */
.primary-button,
.table-action,
.back-page-btn:not(.secondary),
.report-download-btn.pdf{
    background:#557986!important;
    border-color:#557986!important;
    color:#fff!important;
    box-shadow:none!important;
}
.primary-button:hover,
.table-action:hover,
.back-page-btn:not(.secondary):hover,
.report-download-btn.pdf:hover{
    background:#496c79!important;
}
.report-download-btn.excel,
.comparison-scope-tab.active{
    background:var(--official-teal-deep)!important;
    border-color:var(--official-teal-deep)!important;
    color:#fff!important;
}
.report-download-btn.excel:hover,
.comparison-scope-tab.active:hover{
    background:#47736f!important;
}
.back-page-btn.secondary{
    color:var(--official-title-2)!important;
    background:#fff!important;
    border-color:var(--official-border)!important;
}

/* ---------- Report type tabs ---------- */
.report-type-tab{
    background:#fff!important;
    border-color:var(--official-border)!important;
}
.report-type-tab span{
    color:var(--official-muted)!important;
}
.report-type-tab strong{
    color:var(--official-title)!important;
}
.report-type-tab:hover{
    background:#f7faf9!important;
    border-color:#cfdfde!important;
}
.report-type-tab.active{
    background:#5a7986!important;
    border-color:#5a7986!important;
    box-shadow:none!important;
}
.report-type-tab.active span{
    color:rgba(255,255,255,.78)!important;
}
.report-type-tab.active strong{
    color:#fff!important;
}
.comparison-scope-block{
    background:#f4f8f7!important;
    border-color:#d9e6e4!important;
}

/* ---------- Priority / ranking status colors ---------- */
.priority-badge.high,
.comparison-status.risk{
    background:#fbf0ed!important;
    color:#986151!important;
    border-color:#efd9d3!important;
}
.priority-badge.medium{
    background:var(--official-warm-soft)!important;
    color:#8a744c!important;
    border-color:#eadfc9!important;
}
.priority-badge.normal,
.comparison-status.good{
    background:var(--official-teal-soft)!important;
    color:var(--official-teal-deep)!important;
    border-color:#d4e6e3!important;
}
.comparison-status.stable,
.priority-badge.na{
    background:#f1f4f5!important;
    color:#71838a!important;
    border-color:#e0e7e8!important;
}

/* ---------- Highlight cards ---------- */
.good-card{
    background:#f1f7f5!important;
    border-color:#dbeae6!important;
}
.good-card b{
    color:var(--official-teal-deep)!important;
}
.risk-card{
    background:#fbf5f1!important;
    border-color:#ebddd4!important;
}
.risk-card b{
    color:#946554!important;
}

/* ---------- Subtle formal accent for selected / important blocks ---------- */
.priority-focus-card{
    background:#f8f5ef!important;
    border-color:#e8dfcf!important;
}
.priority-focus-icon{
    background:#f1e8d8!important;
    color:#8d744a!important;
}
.priority-focus-body span{
    color:#8a7a64!important;
}

/* ---------- Report preview ---------- */
.report-preview-shell{
    background:#eef3f4!important;
    border-color:var(--official-border)!important;
}
.report-preview-toolbar{
    background:#fff!important;
    border-bottom-color:var(--official-border)!important;
}
.report-preview-toolbar .report-page-count{
    background:var(--official-teal-soft)!important;
    color:var(--official-teal-deep)!important;
    border-color:#d5e5e2!important;
}
.report-preview-scroll{
    background:#eef3f4!important;
}

/* ---------- PWA install ---------- */
.pwa-install-btn{
    background:var(--official-teal-soft)!important;
    color:var(--official-teal-deep)!important;
    border-color:#d2e3e1!important;
}
.pwa-install-btn:hover{
    background:#e6f0ef!important;
}
.pwa-install-btn.is-ready{
    background:#628e89!important;
    border-color:#628e89!important;
    color:#fff!important;
}

/* ---------- Login ---------- */
.login-card{
    border-color:var(--official-border)!important;
    box-shadow:0 14px 38px rgba(62,88,99,.07)!important;
}
.login-brand h1{
    color:var(--official-title)!important;
}
.login-subtitle{
    color:var(--official-muted)!important;
}

/* ---------- Mobile ---------- */
@media(max-width:820px){
    .sidebar{
        background:linear-gradient(180deg,#5b7c89 0%,#4f6f7c 100%)!important;
    }
    .app-topbar{
        background:#fff!important;
    }
    .sidebar-toggle{
        color:var(--official-title)!important;
        border-color:var(--official-border)!important;
    }
}

/* ---------- Headings: clear but not heavy ---------- */
.page-heading h1,
.section-title-row h2,
.panel-head h2,
.wilayat-card h2,
.report-type-tab strong{
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}


/* =========================================================
   BASIRA V17.2 — Sage & Sand Theme
   هوية مختلفة بالكامل: Sage + Sand + Mist Blue + Dusty Rose
   ========================================================= */
:root{
    --v172-bg:#F7F6F2;
    --v172-card:#FFFDFC;
    --v172-card-soft:#F5F3EE;
    --v172-border:#E5E2D9;

    --v172-sidebar:#65776F;
    --v172-sidebar-deep:#596B64;
    --v172-sidebar-text:#F8FAF8;

    --v172-title:#405E59;
    --v172-section:#556C73;
    --v172-text:#596B6C;
    --v172-muted:#84908E;

    --v172-sage:#7FA091;
    --v172-sage-deep:#607F72;
    --v172-sage-soft:#EDF3EF;

    --v172-blue:#829BA8;
    --v172-blue-soft:#EEF3F5;

    --v172-sand:#B69A72;
    --v172-sand-soft:#F6F1E7;

    --v172-peach:#C18F77;
    --v172-peach-soft:#F8EEEA;

    --v172-rose:#B47B7D;
    --v172-rose-soft:#F7ECEC;

    --v172-shadow:0 7px 22px rgba(75,88,83,.045);
}

/* ---------- Global ---------- */
body.basira-app,
.login-page,
.app-shell{
    background:var(--v172-bg)!important;
    color:var(--v172-text)!important;
}

/* ---------- Sidebar: no blue ---------- */
.sidebar{
    background:linear-gradient(180deg,var(--v172-sidebar) 0%,var(--v172-sidebar-deep) 100%)!important;
    box-shadow:-4px 0 18px rgba(63,79,72,.06)!important;
}
.sidebar-brand{
    border-bottom-color:rgba(255,255,255,.12)!important;
}
.sidebar-brand strong{
    color:#fff!important;
}
.sidebar-brand small{
    color:rgba(255,255,255,.76)!important;
}
.nav-item{
    color:rgba(255,255,255,.86)!important;
}
.nav-item:hover{
    background:rgba(255,255,255,.08)!important;
}
.nav-item.active{
    background:rgba(255,255,255,.13)!important;
    border-color:rgba(255,255,255,.13)!important;
    box-shadow:inset 4px 0 0 rgba(212,224,214,.48)!important;
}
.nav-icon{
    background:rgba(255,255,255,.105)!important;
    color:#fff!important;
}
.nav-item.active .nav-icon{
    background:rgba(239,246,241,.20)!important;
}
.sidebar-foot{
    color:rgba(255,255,255,.64)!important;
}
.sidebar-foot strong{
    color:#fff!important;
}

/* ---------- Header + titles ---------- */
.app-topbar{
    background:#FFFDFC!important;
    border-bottom-color:var(--v172-border)!important;
}
.page-kicker{
    color:var(--v172-sand)!important;
    font-weight:700!important;
}
.page-heading h1{
    color:var(--v172-title)!important;
    font-weight:700!important;
}
.page-heading p{
    color:var(--v172-muted)!important;
}
.user-avatar{
    background:linear-gradient(145deg,#748E84,#8AA39A)!important;
}
.user-text strong{
    color:var(--v172-title)!important;
}
.user-text small{
    color:var(--v172-muted)!important;
}
.logout-link{
    color:var(--v172-section)!important;
    border-color:var(--v172-border)!important;
    background:#fff!important;
}

/* Distinct but calm title colors */
.section-kicker{
    color:var(--v172-sand)!important;
    font-weight:700!important;
}
.section-title-row h2{
    color:var(--v172-title)!important;
}
.panel-head h2{
    color:var(--v172-section)!important;
}
.section-title-row h2::after{
    background:var(--v172-sand)!important;
    width:24px!important;
}
.panel-head h2::after{
    background:var(--v172-sage)!important;
    width:24px!important;
}

/* ---------- Surfaces ---------- */
.filters-card,
.panel-card,
.kpi-card,
.wilayat-card,
.priority-summary-card,
.trend-highlight-card,
.level-highlight-card,
.comparison-delta-card,
.grade-structure-card,
.analysis-note,
.report-preview-shell{
    background:var(--v172-card)!important;
    border-color:var(--v172-border)!important;
    box-shadow:var(--v172-shadow)!important;
}

/* ---------- Filters ---------- */
.filter-field label{
    color:#6A7775!important;
}
.filter-field select{
    color:#4F6361!important;
    background:#fff!important;
    border-color:#E3E1D9!important;
}
.filter-field select:focus{
    border-color:#A7BCAF!important;
    box-shadow:0 0 0 3px rgba(127,160,145,.11)!important;
}
.reset-filter,
.panel-chip{
    background:var(--v172-sand-soft)!important;
    color:#866F4F!important;
}

/* ---------- Context ---------- */
.context-line>div{
    background:#fff!important;
    border-color:var(--v172-border)!important;
    color:var(--v172-muted)!important;
}
.context-line strong{
    color:var(--v172-title)!important;
}

/* ---------- KPI cards: calm multi-color accents ---------- */
.kpi-card{
    border-top-width:3px!important;
}
.kpi-grid>.kpi-card:nth-child(6n+1){border-top-color:#8AA79A!important}
.kpi-grid>.kpi-card:nth-child(6n+2){border-top-color:#8EA4AE!important}
.kpi-grid>.kpi-card:nth-child(6n+3){border-top-color:#BCA57E!important}
.kpi-grid>.kpi-card:nth-child(6n+4){border-top-color:#91A79F!important}
.kpi-grid>.kpi-card:nth-child(6n+5){border-top-color:#C29B86!important}
.kpi-grid>.kpi-card:nth-child(6n+6){border-top-color:#A88B94!important}

.kpi-grid>.kpi-card:nth-child(6n+1) .kpi-icon{background:#EDF4F0!important;color:#678777!important}
.kpi-grid>.kpi-card:nth-child(6n+2) .kpi-icon{background:#EEF3F5!important;color:#667F8A!important}
.kpi-grid>.kpi-card:nth-child(6n+3) .kpi-icon{background:#F6F1E8!important;color:#8D7652!important}
.kpi-grid>.kpi-card:nth-child(6n+4) .kpi-icon{background:#EFF4F2!important;color:#6B847C!important}
.kpi-grid>.kpi-card:nth-child(6n+5) .kpi-icon{background:#F8EEEA!important;color:#966D5A!important}
.kpi-grid>.kpi-card:nth-child(6n+6) .kpi-icon{background:#F3EEF0!important;color:#826B73!important}

.kpi-card span{color:var(--v172-muted)!important}
.kpi-card strong{color:var(--v172-title)!important}
.kpi-card small{color:#8B9694!important}

/* ---------- Tables ---------- */
.table-wrap,
.long-table-scroll,
.subjects-table-scroll,
.priorities-table-scroll{
    background:#fff!important;
    border-color:var(--v172-border)!important;
}
.data-table th{
    background:#F3F2EE!important;
    color:#657574!important;
    border-bottom-color:#E4E1D8!important;
}
.data-table td{
    color:#596D6B!important;
    border-bottom-color:#EFEDE7!important;
}
.data-table tbody tr:nth-child(even){
    background:#FCFBF8!important;
}
.data-table tbody tr:hover{
    background:#F4F6F2!important;
}
.data-table td strong{
    color:var(--v172-title)!important;
}

/* ---------- General buttons ---------- */
.primary-button,
.table-action,
.back-page-btn:not(.secondary),
.report-download-btn.pdf,
.wilayat-card-foot a{
    background:var(--v172-sage-deep)!important;
    border-color:var(--v172-sage-deep)!important;
    color:#fff!important;
    box-shadow:none!important;
}
.primary-button:hover,
.table-action:hover,
.back-page-btn:not(.secondary):hover,
.report-download-btn.pdf:hover,
.wilayat-card-foot a:hover{
    background:#557467!important;
}
.report-download-btn.excel{
    background:#788F9B!important;
    border-color:#788F9B!important;
}
.report-download-btn.excel:hover{
    background:#687F8B!important;
}
.back-page-btn.secondary{
    color:var(--v172-section)!important;
    background:#fff!important;
    border-color:var(--v172-border)!important;
}

/* ---------- Wilayat cards ---------- */
.wilayat-card{
    border-top:4px solid #DDE7E1!important;
}
.wilayat-cards-grid>.wilayat-card:nth-child(4n+1){border-top-color:#8EAA9D!important}
.wilayat-cards-grid>.wilayat-card:nth-child(4n+2){border-top-color:#91A7B1!important}
.wilayat-cards-grid>.wilayat-card:nth-child(4n+3){border-top-color:#BCA57E!important}
.wilayat-cards-grid>.wilayat-card:nth-child(4n+4){border-top-color:#B59183!important}

.wilayat-rank{
    color:#826D4F!important;
    background:var(--v172-sand-soft)!important;
}
.wilayat-card h2{
    color:var(--v172-title)!important;
}
.wilayat-score{
    color:#4E6C65!important;
}
.wilayat-meta span{
    color:#74827F!important;
    background:#F5F4EF!important;
}
.wilayat-mini-kpis div{
    background:#FBFAF7!important;
    border-color:#E9E5DC!important;
}
.wilayat-mini-kpis div:nth-child(1){
    background:#EEF4F0!important;
    border-color:#DDE9E2!important;
}
.wilayat-mini-kpis div:nth-child(2){
    background:#EEF3F5!important;
    border-color:#DDE6E9!important;
}
.wilayat-mini-kpis div:nth-child(3){
    background:#F8EEEA!important;
    border-color:#EEDDD6!important;
}
.wilayat-mini-kpis span{
    color:#7D8B88!important;
}
.wilayat-mini-kpis div:nth-child(1) strong{color:#5D7D6E!important}
.wilayat-mini-kpis div:nth-child(2) strong{color:#607985!important}
.wilayat-mini-kpis div:nth-child(3) strong{color:#9B6E5F!important}

/* A/B/C chips specifically requested */
.wilayat-levels span{
    border:1px solid transparent!important;
    font-weight:600!important;
}
.wilayat-levels span:nth-child(1){
    background:#EAF3EE!important;
    color:#5B7D6C!important;
    border-color:#D8E7DE!important;
}
.wilayat-levels span:nth-child(1)::before{
    background:#7FA895!important;
}
.wilayat-levels span:nth-child(2){
    background:#EDF2F6!important;
    color:#617A88!important;
    border-color:#DCE5EA!important;
}
.wilayat-levels span:nth-child(2)::before{
    background:#829DB2!important;
}
.wilayat-levels span:nth-child(3){
    background:#F6F0E4!important;
    color:#8B754F!important;
    border-color:#E9DFC9!important;
}
.wilayat-levels span:nth-child(3)::before{
    background:#C3AA73!important;
}
.wilayat-card-foot{
    border-top-color:#ECE9E2!important;
}
.wilayat-card-foot small{
    color:#8C9693!important;
}
.wilayat-card-foot strong{
    color:var(--v172-title)!important;
}

/* ---------- All A-E level colors across system ---------- */
.level-a,
.levels-bar-track span.level-a{
    background:#7FA895!important;
}
.level-b,
.levels-bar-track span.level-b{
    background:#829DB2!important;
}
.level-c,
.levels-bar-track span.level-c{
    background:#C3AA73!important;
}
.level-d,
.levels-bar-track span.level-d{
    background:#C68D72!important;
}
.level-e,
.levels-bar-track span.level-e{
    background:#B87878!important;
}

/* Big level cards */
.level-big-card:nth-child(1){border-top:4px solid #7FA895!important;background:#FCFEFC!important}
.level-big-card:nth-child(2){border-top:4px solid #829DB2!important;background:#FCFDFE!important}
.level-big-card:nth-child(3){border-top:4px solid #C3AA73!important;background:#FFFDF9!important}
.level-big-card:nth-child(4){border-top:4px solid #C68D72!important;background:#FFFCFA!important}
.level-big-card:nth-child(5){border-top:4px solid #B87878!important;background:#FFFBFB!important}

/* ---------- Report types ---------- */
.report-type-tab{
    background:#fff!important;
    border-color:var(--v172-border)!important;
}
.report-type-tab span{
    color:var(--v172-muted)!important;
}
.report-type-tab strong{
    color:var(--v172-title)!important;
}
.report-type-tab.active{
    background:#667A72!important;
    border-color:#667A72!important;
    box-shadow:none!important;
}
.report-type-tab.active span{
    color:rgba(255,255,255,.80)!important;
}
.report-type-tab.active strong{
    color:#fff!important;
}
.comparison-scope-block{
    background:#F4F3EE!important;
    border-color:#E4E0D7!important;
}
.comparison-scope-tab.active{
    background:#829BA8!important;
    border-color:#829BA8!important;
}

/* ---------- Status / priorities ---------- */
.priority-badge.high,
.comparison-status.risk{
    background:var(--v172-rose-soft)!important;
    color:#95666A!important;
    border-color:#E9D5D5!important;
}
.priority-badge.medium{
    background:var(--v172-sand-soft)!important;
    color:#8C744F!important;
    border-color:#E8DDC8!important;
}
.priority-badge.normal,
.comparison-status.good{
    background:var(--v172-sage-soft)!important;
    color:#607F72!important;
    border-color:#D8E5DE!important;
}
.priority-focus-card{
    background:#F7F1E8!important;
    border-color:#E8DCC8!important;
}
.priority-focus-icon{
    background:#EEE2CE!important;
    color:#8B704D!important;
}

/* ---------- Report preview ---------- */
.report-preview-shell,
.report-preview-scroll{
    background:#EFEFEA!important;
}
.report-preview-toolbar{
    background:#FFFDFC!important;
    border-bottom-color:var(--v172-border)!important;
}
.report-preview-toolbar strong{
    color:var(--v172-title)!important;
}
.report-preview-toolbar .report-page-count{
    background:var(--v172-sand-soft)!important;
    color:#816B4C!important;
    border-color:#E6DBC5!important;
}

/* ---------- PWA ---------- */
.pwa-install-btn{
    background:var(--v172-sage-soft)!important;
    color:var(--v172-sage-deep)!important;
    border-color:#D5E3DC!important;
}
.pwa-install-btn.is-ready{
    background:#6F8E80!important;
    border-color:#6F8E80!important;
    color:#fff!important;
}

/* ---------- Login ---------- */
.login-card{
    background:#FFFDFC!important;
    border-color:var(--v172-border)!important;
}
.login-brand h1{
    color:var(--v172-title)!important;
}
.login-subtitle{
    color:var(--v172-muted)!important;
}

/* ---------- Mobile ---------- */
@media(max-width:820px){
    .sidebar{
        background:linear-gradient(180deg,#6D8078 0%,#5D7068 100%)!important;
    }
}


/* =========================================================
   BASIRA V17.3 — Light Sage Official Theme
   خلفية جانبية فاتحة + ألوان متناسقة على مستوى المنظومة
   ========================================================= */
:root{
    --ls-bg:#F8F7F2;
    --ls-surface:#FFFDF9;
    --ls-surface-soft:#F4F4EE;
    --ls-sidebar:#F3F2EA;
    --ls-sidebar-2:#EEEFE7;
    --ls-border:#DEDFD5;

    --ls-title:#355E5A;
    --ls-section:#536E6B;
    --ls-text:#586B69;
    --ls-muted:#87918E;

    --ls-sage:#8FA79B;
    --ls-sage-deep:#68847A;
    --ls-sage-soft:#EAF0EA;

    --ls-sand:#B8A27C;
    --ls-sand-soft:#F4EFE4;

    --ls-mist:#8FA4AE;
    --ls-mist-soft:#EDF2F4;

    --ls-peach:#C5947D;
    --ls-peach-soft:#F7ECE7;

    --ls-rose:#B98383;
    --ls-rose-soft:#F6EAEA;

    --ls-shadow:0 7px 22px rgba(65,82,76,.045);
}

/* ---------- Global ---------- */
body.basira-app,
.login-page,
.app-shell{
    background:var(--ls-bg)!important;
    color:var(--ls-text)!important;
}

/* ---------- Sidebar — matching the approved light mockup ---------- */
.sidebar{
    background:linear-gradient(180deg,var(--ls-sidebar) 0%,var(--ls-sidebar-2) 100%)!important;
    border-left:1px solid #D9DDD2!important;
    box-shadow:-4px 0 18px rgba(67,84,78,.045)!important;
}
.sidebar-brand{
    border-bottom:1px solid #D9DDD2!important;
}
.sidebar-brand strong{
    color:#315A57!important;
    font-weight:700!important;
}
.sidebar-brand small{
    color:#7D8A87!important;
}
.brand-mark,
.small-mark{
    background:#E7ECE5!important;
}
.brand-mark svg,
.small-mark svg{
    fill:#557973!important;
}
.nav-item{
    color:#435F5C!important;
    font-weight:600!important;
    border:1px solid transparent!important;
}
.nav-item:hover{
    background:#EAEEE7!important;
    color:#315A57!important;
}
.nav-item.active{
    background:#E6EAE2!important;
    border-color:#CDD5CA!important;
    color:#315A57!important;
    box-shadow:inset 4px 0 0 #AEBCAF!important;
}
.nav-icon{
    background:#E8ECE6!important;
    color:#456764!important;
}
.nav-item.active .nav-icon{
    background:#DDE5DC!important;
    color:#315A57!important;
}
.sidebar-nav::-webkit-scrollbar-thumb{
    background:#C2CDC2!important;
}
.sidebar-foot{
    color:#7D8986!important;
    border-top:1px solid #D9DDD2!important;
}
.sidebar-foot strong{
    color:#3D5D59!important;
}

/* ---------- Top header ---------- */
.app-topbar{
    background:#FFFDF9!important;
    border-bottom-color:#E2E2D9!important;
}
.page-kicker{
    color:#9D845F!important;
}
.page-heading h1{
    color:var(--ls-title)!important;
}
.page-heading p{
    color:var(--ls-muted)!important;
}
.user-avatar{
    background:linear-gradient(145deg,#769188,#8AA59A)!important;
}
.user-text strong{
    color:var(--ls-title)!important;
}
.user-text small{
    color:var(--ls-muted)!important;
}
.logout-link{
    background:#FFFDF9!important;
    color:#536C69!important;
    border-color:#DDDED5!important;
}

/* ---------- Main cards ---------- */
.filters-card,
.panel-card,
.kpi-card,
.wilayat-card,
.priority-summary-card,
.trend-highlight-card,
.level-highlight-card,
.comparison-delta-card,
.grade-structure-card,
.analysis-note{
    background:var(--ls-surface)!important;
    border-color:var(--ls-border)!important;
    box-shadow:var(--ls-shadow)!important;
}
.section-kicker{
    color:#9B835F!important;
}
.section-title-row h2{
    color:var(--ls-title)!important;
}
.panel-head h2{
    color:var(--ls-section)!important;
}
.section-title-row h2::after{
    background:var(--ls-sand)!important;
}
.panel-head h2::after{
    background:var(--ls-sage)!important;
}

/* ---------- Filters ---------- */
.filter-field label{
    color:#667875!important;
}
.filter-field select{
    background:#FFFDF9!important;
    border-color:#DEDFD6!important;
    color:#4E6461!important;
}
.filter-field select:hover{
    border-color:#C9D1C7!important;
}
.filter-field select:focus{
    border-color:#A4B6AA!important;
    box-shadow:0 0 0 3px rgba(143,167,155,.12)!important;
}
.reset-filter,
.panel-chip{
    background:var(--ls-sand-soft)!important;
    color:#826F50!important;
}

/* ---------- Context ---------- */
.context-line>div{
    background:#FFFDF9!important;
    border-color:var(--ls-border)!important;
}
.context-line strong{
    color:var(--ls-title)!important;
}

/* ---------- KPI palette ---------- */
.kpi-card{
    border-top:3px solid #DDE5DD!important;
}
.kpi-grid>.kpi-card:nth-child(6n+1){border-top-color:#91A99D!important}
.kpi-grid>.kpi-card:nth-child(6n+2){border-top-color:#97A9B1!important}
.kpi-grid>.kpi-card:nth-child(6n+3){border-top-color:#BDA77E!important}
.kpi-grid>.kpi-card:nth-child(6n+4){border-top-color:#9EB0A7!important}
.kpi-grid>.kpi-card:nth-child(6n+5){border-top-color:#C59A86!important}
.kpi-grid>.kpi-card:nth-child(6n+6){border-top-color:#B68B92!important}

.kpi-grid>.kpi-card:nth-child(6n+1) .kpi-icon{background:#EAF0EA!important;color:#68847A!important}
.kpi-grid>.kpi-card:nth-child(6n+2) .kpi-icon{background:#EDF2F4!important;color:#6E838D!important}
.kpi-grid>.kpi-card:nth-child(6n+3) .kpi-icon{background:#F4EFE4!important;color:#8B7652!important}
.kpi-grid>.kpi-card:nth-child(6n+4) .kpi-icon{background:#EFF2ED!important;color:#70887E!important}
.kpi-grid>.kpi-card:nth-child(6n+5) .kpi-icon{background:#F7ECE7!important;color:#986F5D!important}
.kpi-grid>.kpi-card:nth-child(6n+6) .kpi-icon{background:#F4EBED!important;color:#856A71!important}

.kpi-card span{color:#7E8A87!important}
.kpi-card strong{color:#355E5A!important}
.kpi-card small{color:#909A97!important}

/* ---------- Tables ---------- */
.table-wrap,
.long-table-scroll,
.subjects-table-scroll,
.priorities-table-scroll{
    background:#FFFDF9!important;
    border-color:#E0E0D7!important;
}
.data-table th{
    background:#F1F2EC!important;
    color:#617471!important;
    border-bottom-color:#DDDED5!important;
}
.data-table td{
    color:#596C69!important;
    border-bottom-color:#ECEDE7!important;
}
.data-table tbody tr:nth-child(even){
    background:#FBFAF6!important;
}
.data-table tbody tr:hover{
    background:#F1F4EE!important;
}
.data-table td strong{
    color:#355E5A!important;
}

/* ---------- Buttons ---------- */
.primary-button,
.table-action,
.back-page-btn:not(.secondary),
.report-download-btn.pdf,
.wilayat-card-foot a{
    background:#6E8B80!important;
    border-color:#6E8B80!important;
    color:#fff!important;
    box-shadow:none!important;
}
.primary-button:hover,
.table-action:hover,
.back-page-btn:not(.secondary):hover,
.report-download-btn.pdf:hover,
.wilayat-card-foot a:hover{
    background:#5F7D72!important;
}
.report-download-btn.excel{
    background:#839AA4!important;
    border-color:#839AA4!important;
}
.report-download-btn.excel:hover{
    background:#738A94!important;
}
.back-page-btn.secondary{
    background:#FFFDF9!important;
    color:#536D69!important;
    border-color:#DDDED5!important;
}

/* ---------- Wilayat cards ---------- */
.wilayat-card{
    border-top:4px solid #D8E1D9!important;
}
.wilayat-cards-grid>.wilayat-card:nth-child(4n+1){border-top-color:#8FA89A!important}
.wilayat-cards-grid>.wilayat-card:nth-child(4n+2){border-top-color:#95A9B2!important}
.wilayat-cards-grid>.wilayat-card:nth-child(4n+3){border-top-color:#BCA77E!important}
.wilayat-cards-grid>.wilayat-card:nth-child(4n+4){border-top-color:#B99284!important}

.wilayat-rank{
    background:#F4EFE4!important;
    color:#806D4E!important;
}
.wilayat-card h2{
    color:#355E5A!important;
}
.wilayat-score{
    color:#4F7068!important;
}
.wilayat-meta span{
    background:#F4F3EE!important;
    color:#74817F!important;
}
.wilayat-mini-kpis div{
    background:#FAFAF6!important;
    border-color:#E6E5DD!important;
}
.wilayat-mini-kpis div:nth-child(1){
    background:#EBF1EC!important;
    border-color:#D8E5DB!important;
}
.wilayat-mini-kpis div:nth-child(2){
    background:#EDF2F4!important;
    border-color:#DCE6E9!important;
}
.wilayat-mini-kpis div:nth-child(3){
    background:#F7ECE8!important;
    border-color:#ECDAD4!important;
}
.wilayat-mini-kpis div:nth-child(1) strong{color:#5E7C6F!important}
.wilayat-mini-kpis div:nth-child(2) strong{color:#627B86!important}
.wilayat-mini-kpis div:nth-child(3) strong{color:#986F60!important}

/* ---------- A/B/C small strips in Wilayat cards ---------- */
.wilayat-levels span:nth-child(1){
    background:#EAF2EC!important;
    color:#58796A!important;
    border-color:#D5E4DA!important;
}
.wilayat-levels span:nth-child(1)::before{background:#7FA895!important}

.wilayat-levels span:nth-child(2){
    background:#ECF1F4!important;
    color:#617987!important;
    border-color:#DAE4E9!important;
}
.wilayat-levels span:nth-child(2)::before{background:#829DB2!important}

.wilayat-levels span:nth-child(3){
    background:#F5EFE3!important;
    color:#89734E!important;
    border-color:#E8DDC7!important;
}
.wilayat-levels span:nth-child(3)::before{background:#C3AA73!important}

/* ---------- A-E system colors ---------- */
.level-a,
.levels-bar-track span.level-a{background:#7FA895!important}
.level-b,
.levels-bar-track span.level-b{background:#829DB2!important}
.level-c,
.levels-bar-track span.level-c{background:#C3AA73!important}
.level-d,
.levels-bar-track span.level-d{background:#C68D72!important}
.level-e,
.levels-bar-track span.level-e{background:#B87878!important}

.level-big-card:nth-child(1){border-top:4px solid #7FA895!important;background:#FCFDFB!important}
.level-big-card:nth-child(2){border-top:4px solid #829DB2!important;background:#FCFDFE!important}
.level-big-card:nth-child(3){border-top:4px solid #C3AA73!important;background:#FFFDF9!important}
.level-big-card:nth-child(4){border-top:4px solid #C68D72!important;background:#FFFBF9!important}
.level-big-card:nth-child(5){border-top:4px solid #B87878!important;background:#FFF9FA!important}

/* ---------- Report tabs ---------- */
.report-type-tab{
    background:#FFFDF9!important;
    border-color:#E0E0D7!important;
}
.report-type-tab strong{color:#355E5A!important}
.report-type-tab span{color:#87918E!important}
.report-type-tab.active{
    background:#728B81!important;
    border-color:#728B81!important;
}
.report-type-tab.active strong{color:#fff!important}
.report-type-tab.active span{color:rgba(255,255,255,.80)!important}

.comparison-scope-block{
    background:#F3F2EC!important;
    border-color:#E1DFD6!important;
}
.comparison-scope-tab.active{
    background:#879DA7!important;
    border-color:#879DA7!important;
}

/* ---------- Priorities ---------- */
.priority-badge.high,
.comparison-status.risk{
    background:#F6EAEA!important;
    color:#95676A!important;
    border-color:#E8D3D4!important;
}
.priority-badge.medium{
    background:#F4EFE4!important;
    color:#8A744F!important;
    border-color:#E7DCC6!important;
}
.priority-badge.normal,
.comparison-status.good{
    background:#EAF0EA!important;
    color:#607E72!important;
    border-color:#D6E3DA!important;
}
.priority-focus-card{
    background:#F6F0E6!important;
    border-color:#E6DAC5!important;
}
.priority-focus-icon{
    background:#ECE0CB!important;
    color:#8B704D!important;
}

/* ---------- Report preview ---------- */
.report-preview-shell,
.report-preview-scroll{
    background:#EFEFE9!important;
}
.report-preview-toolbar{
    background:#FFFDF9!important;
    border-bottom-color:#DEDFD5!important;
}
.report-preview-toolbar strong{color:#355E5A!important}
.report-preview-toolbar .report-page-count{
    background:#F4EFE4!important;
    color:#7F6C4E!important;
    border-color:#E5DAC4!important;
}

/* ---------- PWA ---------- */
.pwa-install-btn{
    background:#EAF0EA!important;
    color:#607E72!important;
    border-color:#D5E2D9!important;
}
.pwa-install-btn.is-ready{
    background:#748F83!important;
    border-color:#748F83!important;
    color:#fff!important;
}

/* ---------- Login ---------- */
.login-card{
    background:#FFFDF9!important;
    border-color:#E0E0D7!important;
}
.login-brand h1{color:#355E5A!important}
.login-subtitle{color:#87918E!important}

/* ---------- Mobile ---------- */
@media(max-width:820px){
    .sidebar{
        background:linear-gradient(180deg,#F3F2EA 0%,#ECEDE5 100%)!important;
        border-left-color:#D7DAD0!important;
    }
}


/* =========================================================
   BASIRA V17.5 FINAL — Mobile-first + clear calm palette
   ========================================================= */
:root{
    --final-bg:#F8F7F3;
    --final-surface:#FFFDFC;
    --final-border:#E2E2D9;
    --final-title:#355E5A;
    --final-text:#586B69;
    --final-muted:#87918E;
    --final-sage:#79988B;
    --final-sage-deep:#607D72;
    --final-sage-soft:#EAF1EC;
    --final-mist:#829BA8;
    --final-mist-soft:#EDF2F4;
    --final-sand:#B89E72;
    --final-sand-soft:#F5EFE3;
    --final-peach:#C18F78;
    --final-peach-soft:#F7ECE7;
    --final-rose:#B77E82;
    --final-rose-soft:#F6EAEA;
}

/* Main surfaces */
body.basira-app,
.login-page,
.app-shell{
    background:var(--final-bg)!important;
}
.app-topbar,
.filters-card,
.panel-card,
.kpi-card{
    background:var(--final-surface)!important;
}
.page-heading h1,
.section-title-row h2,
.panel-head h2{
    color:var(--final-title)!important;
}
.page-heading p,
.kpi-card span,
.kpi-card small{
    color:var(--final-muted)!important;
}

/* Calm but visibly varied indicators */
.kpi-grid>.kpi-card:nth-child(6n+1){border-top:4px solid #7F9F91!important}
.kpi-grid>.kpi-card:nth-child(6n+2){border-top:4px solid #829BA8!important}
.kpi-grid>.kpi-card:nth-child(6n+3){border-top:4px solid #B89E72!important}
.kpi-grid>.kpi-card:nth-child(6n+4){border-top:4px solid #8FA89D!important}
.kpi-grid>.kpi-card:nth-child(6n+5){border-top:4px solid #C18F78!important}
.kpi-grid>.kpi-card:nth-child(6n+6){border-top:4px solid #B77E82!important}

.kpi-grid>.kpi-card:nth-child(6n+1) .kpi-icon{background:var(--final-sage-soft)!important;color:#5F7E70!important}
.kpi-grid>.kpi-card:nth-child(6n+2) .kpi-icon{background:var(--final-mist-soft)!important;color:#637C88!important}
.kpi-grid>.kpi-card:nth-child(6n+3) .kpi-icon{background:var(--final-sand-soft)!important;color:#88734F!important}
.kpi-grid>.kpi-card:nth-child(6n+4) .kpi-icon{background:#EEF3F0!important;color:#6A8478!important}
.kpi-grid>.kpi-card:nth-child(6n+5) .kpi-icon{background:var(--final-peach-soft)!important;color:#956A59!important}
.kpi-grid>.kpi-card:nth-child(6n+6) .kpi-icon{background:var(--final-rose-soft)!important;color:#8B6266!important}

/* Clear action buttons */
.primary-button,
.table-action,
.back-page-btn:not(.secondary),
.report-download-btn.pdf{
    background:var(--final-sage-deep)!important;
    border-color:var(--final-sage-deep)!important;
    color:#fff!important;
}
.report-download-btn.excel{
    background:#748D99!important;
    border-color:#748D99!important;
}

/* LOGIN — desktop visual is no longer blue */
.login-form-panel{
    background:#FFFDFC!important;
}
.login-visual-panel{
    background:
        radial-gradient(circle at 20% 14%, rgba(184,158,114,.13), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(121,152,139,.18), transparent 35%),
        linear-gradient(145deg,#EEF2ED,#E5ECE7 54%,#DBE7E2)!important;
    color:#3F5F5A!important;
}
.visual-stage:before{
    background-image:
        linear-gradient(rgba(73,99,92,.045) 1px, transparent 1px),
        linear-gradient(90deg,rgba(73,99,92,.045) 1px, transparent 1px)!important;
}
.visual-kicker{
    border-color:#CBD8D0!important;
    background:rgba(255,255,255,.56)!important;
    color:#617D72!important;
}
.visual-copy h2{
    color:#385E59!important;
}
.visual-copy h2 span{
    color:#829F92!important;
}
.visual-copy p,
.visual-badge{
    color:#6E807B!important;
}
.analytics-card{
    background:rgba(255,253,249,.82)!important;
    border-color:#D8E1DA!important;
    box-shadow:0 20px 50px rgba(72,91,83,.09)!important;
}
.analytics-head{
    color:#7A8B87!important;
}
.analytics-head strong{
    color:#41645F!important;
}
.trend-svg .grid-line{
    stroke:rgba(79,104,96,.12)!important;
}
.trend-svg .trend{
    stroke:#7F9F91!important;
}
.trend-svg circle{
    fill:#B99D6E!important;
    stroke:#FFF!important;
}
.trend-labels{
    color:#8A9692!important;
}
.mini-card{
    color:#3F615C!important;
    box-shadow:0 15px 38px rgba(72,91,83,.10)!important;
}
.login-footer{
    background:#566F67!important;
}

/* LOGIN actions — both clearly visible */
.login-help{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:10px!important;
    margin-top:22px!important;
}
.login-action-button,
.login-pwa-install{
    width:100%!important;
    min-height:48px!important;
    border-radius:12px!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:Arial,Tahoma,sans-serif!important;
    font-size:12px!important;
    font-weight:700!important;
}
.login-action-button{
    border:1px solid #CCD9D1!important;
    background:#F2F6F2!important;
    color:#506F65!important;
    cursor:pointer;
}
.login-action-button span{
    width:24px;height:24px;border-radius:8px;
    display:grid;place-items:center;
    background:#E3ECE6;
    font-weight:800;
}
.login-pwa-install{
    margin:0!important;
}
.modal-card p{
    white-space:normal;
    font-size:13px!important;
    line-height:2!important;
}

/* Mobile top bar: exactly three clean zones */
@media(max-width:820px){
    .app-topbar{
        display:grid!important;
        grid-template-columns:44px minmax(0,1fr) 44px!important;
        grid-template-areas:"install title menu"!important;
        align-items:center!important;
        min-height:70px!important;
        padding:
            max(9px,env(safe-area-inset-top))
            10px 9px!important;
        gap:8px!important;
        background:#FFFDFC!important;
        border-bottom:1px solid var(--final-border)!important;
    }
    .sidebar-toggle{
        grid-area:menu!important;
        width:44px!important;
        height:44px!important;
        margin:0!important;
    }
    .page-heading{
        grid-area:title!important;
        min-width:0!important;
        text-align:right!important;
    }
    .page-heading h1{
        font-size:19px!important;
        line-height:1.28!important;
        margin:1px 0 0!important;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .page-heading p{
        display:none!important;
    }
    .page-kicker{
        display:block!important;
        font-size:9px!important;
        line-height:1.2!important;
    }
    .topbar-user{
        display:none!important;
    }
    .app-topbar>.pwa-install-btn{
        grid-area:install!important;
        width:44px!important;
        height:44px!important;
        min-width:44px!important;
        padding:0!important;
        margin:0!important;
        display:grid!important;
        place-items:center!important;
        border-radius:11px!important;
    }
    .app-topbar>.pwa-install-btn[hidden]{
        visibility:hidden!important;
        display:grid!important;
    }
    .app-topbar>.pwa-install-btn>span:last-child{
        display:none!important;
    }

    .dashboard-content{
        padding:12px 10px 26px!important;
    }
    .filters-card{
        padding:13px 12px 14px!important;
        border-radius:14px!important;
    }
    .section-title-row{
        margin-bottom:4px!important;
    }
    .section-title-row h2{
        font-size:16px!important;
    }
    .filter-field label{
        font-size:11px!important;
        margin-bottom:5px!important;
    }
    .filter-field select{
        min-height:50px!important;
        border-radius:12px!important;
        padding-inline:12px!important;
    }
    .filters-grid{
        gap:9px!important;
    }

    /* Mobile login starts directly with login, not a large decorative banner */
    .login-shell{
        display:block!important;
        min-height:100dvh!important;
    }
    .login-visual-panel{
        display:none!important;
    }
    .login-form-panel{
        min-height:100dvh!important;
        padding-top:max(12px,env(safe-area-inset-top))!important;
    }
    .login-form-wrap{
        width:min(100% - 28px,520px)!important;
        margin:0 auto!important;
        padding:22px 0 28px!important;
    }
    .brand{
        margin-bottom:26px!important;
    }
    .brand-mark{
        width:48px!important;
        height:48px!important;
        border-radius:14px!important;
    }
    .brand-name{
        font-size:24px!important;
    }
    .brand-subtitle{
        font-size:10.5px!important;
        line-height:1.55!important;
    }
    .login-heading h1{
        font-size:30px!important;
        margin:7px 0!important;
    }
    .login-heading p{
        font-size:13px!important;
        margin-bottom:22px!important;
    }
    .login-form label{
        font-size:13px!important;
    }
    .input-wrap input{
        height:54px!important;
        border-radius:13px!important;
        font-size:16px!important;
    }
    .primary-button{
        height:54px!important;
        border-radius:13px!important;
        box-shadow:none!important;
    }
    .login-help{
        grid-template-columns:1fr!important;
    }
    .login-footer{
        position:static!important;
        min-height:auto!important;
        padding:14px 12px!important;
        flex-wrap:wrap!important;
        justify-content:center!important;
        gap:5px 12px!important;
        margin-top:auto!important;
    }
    .login-footer span{
        font-size:10px!important;
    }
}

/* Small phones */
@media(max-width:420px){
    .page-heading h1{font-size:18px!important}
    .dashboard-content{padding-inline:8px!important}
    .kpi-grid{grid-template-columns:1fr 1fr!important}
    .kpi-card{padding:12px 10px!important}
    .kpi-card strong{font-size:18px!important}
    .context-line{gap:5px!important}
    .context-line>div{font-size:9px!important}
}

/* All select/result text remains readable on touch devices */
@media(max-width:520px){
    .filter-field select{font-size:16px!important}
    .data-table th{font-size:10.5px!important}
    .data-table td{font-size:11px!important}
}


/* =========================================================
   BASIRA V17.6 FINAL — unified mobile + calm visual system
   ========================================================= */
:root{
    --v176-ivory:#F8F7F3;
    --v176-paper:#FFFDFC;
    --v176-border:#E2E2D9;
    --v176-ink:#3D5F5A;
    --v176-text:#586B69;
    --v176-muted:#889390;
    --v176-sage:#7F9F91;
    --v176-sage-dark:#607D72;
    --v176-mist:#829BA8;
    --v176-sand:#B89E72;
    --v176-peach:#C18F78;
    --v176-rose:#B77E82;
}

/* Years under trend charts must map to the plotted points exactly. */
.trend-chart .chart-years,
.report-trend-chart .chart-years{
    direction:ltr!important;
    unicode-bidi:isolate!important;
}

/* Visually distinct calm chart pairs */
.trend-chart .trend-line-path{
    stroke:#76988B!important;
}
.trend-chart .trend-area-path{
    fill:#EAF1EC!important;
}
.low-trend-chart .trend-line-path{
    stroke:#A8755A!important;
}
.low-trend-chart .trend-area-path{
    fill:#F5EDE7!important;
}
.trend-dot{
    fill:#B99D6E!important;
}

/* Loading */
.basira-loading-overlay{
    background:rgba(248,247,243,.72)!important;
    backdrop-filter:blur(3px)!important;
}
.basira-loading-box{
    min-width:220px;
    justify-content:center;
    border-color:#DADFD8!important;
    box-shadow:0 18px 48px rgba(56,76,69,.13)!important;
    color:var(--v176-ink)!important;
    border-radius:16px!important;
    padding:14px 18px!important;
}
.basira-loading-box>div{
    display:flex;
    flex-direction:column;
    gap:1px;
}
.basira-loading-box strong{
    font-size:12px!important;
}
.basira-loading-box small{
    color:#899591!important;
    font-size:9px!important;
}
.basira-spinner{
    border-color:#DCE6E0!important;
    border-top-color:#708F82!important;
}

/* Sidebar backdrop and mobile body lock */
.basira-sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:990;
    background:rgba(50,65,61,.22);
    backdrop-filter:blur(1.5px);
    opacity:0;
    visibility:hidden;
    transition:.18s ease;
}
.basira-sidebar-backdrop.show{
    opacity:1;
    visibility:visible;
}
body.sidebar-open{
    overflow:hidden!important;
}

/* Launch splash */
.basira-launch-splash{
    position:fixed;
    inset:0;
    z-index:200000;
    display:grid;
    place-items:center;
    background:
      radial-gradient(circle at 50% 43%,rgba(127,159,145,.10),transparent 25%),
      var(--v176-ivory);
    opacity:0;
    transition:opacity .28s ease;
}
.basira-launch-splash[hidden]{
    display:none!important;
}
.basira-launch-splash.visible{
    opacity:1;
}
.basira-launch-splash.leaving{
    opacity:0;
}
.basira-launch-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:24px;
}
.basira-launch-inner img{
    width:clamp(138px,30vw,230px);
    height:auto;
    border-radius:28%;
    filter:drop-shadow(0 16px 30px rgba(60,85,76,.08));
}
.basira-launch-inner strong{
    margin-top:22px;
    color:#355E5A;
    font-family:"Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(25px,5vw,38px);
    line-height:1.35;
}
.basira-launch-inner span{
    margin-top:6px;
    color:#607D72;
    font-family:"Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(16px,3.4vw,23px);
    font-weight:700;
}
.basira-launch-inner small{
    margin-top:7px;
    color:#929A96;
    font-size:clamp(11px,2.5vw,15px);
}
.basira-launch-inner i{
    width:56px;
    height:4px;
    margin-top:22px;
    border-radius:99px;
    background:linear-gradient(90deg,#7F9F91,#B89E72,#829BA8);
}

/* Universal card polish */
.filters-card,
.panel-card,
.kpi-card,
.wilayat-card,
.priority-summary-card,
.trend-highlight-card,
.level-highlight-card,
.comparison-delta-card{
    border-color:var(--v176-border)!important;
    background:var(--v176-paper)!important;
}
.section-title-row h2,
.panel-head h2,
.page-heading h1{
    color:var(--v176-ink)!important;
}

/* Different but harmonious section accents */
.dashboard-content>.panel-card:nth-of-type(4n+1),
.dashboard-grid>.panel-card:nth-child(4n+1){border-top:3px solid #7F9F91!important}
.dashboard-content>.panel-card:nth-of-type(4n+2),
.dashboard-grid>.panel-card:nth-child(4n+2){border-top:3px solid #829BA8!important}
.dashboard-content>.panel-card:nth-of-type(4n+3),
.dashboard-grid>.panel-card:nth-child(4n+3){border-top:3px solid #B89E72!important}
.dashboard-content>.panel-card:nth-of-type(4n+4),
.dashboard-grid>.panel-card:nth-child(4n+4){border-top:3px solid #C18F78!important}

/* Prevent a wide child from moving the entire mobile page sideways. */
@media(max-width:820px){
    html,
    body,
    body.basira-app{
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important;
    }
    .app-shell{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow-x:hidden!important;
    }
    .app-main{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0!important;
        padding:0!important;
        overflow-x:hidden!important;
    }
    .dashboard-content{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
        margin:0!important;
        overflow-x:hidden!important;
    }

    .sidebar{
        right:0!important;
        left:auto!important;
        width:min(84vw,310px)!important;
        max-width:310px!important;
        z-index:1000!important;
    }

    .filters-card,
    .panel-card,
    .kpi-card,
    .analysis-note{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
    }

    .dashboard-grid,
    .dashboard-grid.equal-two,
    .trends-highlights-grid,
    .ranking-classification-guide,
    .ranking-kpi-grid,
    .priority-summary-grid,
    .levels-highlight-grid,
    .comparison-summary-grid{
        grid-template-columns:1fr!important;
        width:100%!important;
        min-width:0!important;
    }

    /* KPI cards stay compact in two columns where useful. */
    .kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        width:100%!important;
    }

    /* Tables own their horizontal scroll; the page itself does not. */
    .table-wrap,
    .long-table-scroll,
    .subjects-table-scroll,
    .priorities-table-scroll{
        width:100%!important;
        max-width:100%!important;
        overflow-x:auto!important;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
    }
    .data-table{
        min-width:680px;
    }

    /* Charts always scale to the viewport. */
    .trend-chart,
    .report-trend-chart{
        width:100%!important;
        min-width:0!important;
        overflow:hidden!important;
    }
    .trend-chart svg,
    .report-trend-chart svg{
        width:100%!important;
        height:auto!important;
        max-width:100%!important;
    }

    .chart-years{
        padding-inline:14px!important;
        font-size:10px!important;
    }

    .basira-loading-box{
        min-width:min(250px,calc(100vw - 40px));
    }
}

@media(max-width:430px){
    .dashboard-content{
        padding-inline:8px!important;
    }
    .app-topbar{
        width:100%!important;
        box-sizing:border-box!important;
    }
    .filters-card{
        padding:12px 10px!important;
    }
    .kpi-grid{
        gap:7px!important;
    }
    .kpi-card{
        min-width:0!important;
        padding:11px 9px!important;
    }
    .kpi-card strong{
        font-size:18px!important;
    }
    .data-table{
        min-width:640px;
    }
}


/* =========================================================
   BASIRA V17.7 — Edge / Installed PWA vertical-scroll fix
   ========================================================= */

/*
 * Edge Android and standalone PWA can keep the document in a viewport-sized
 * scroll container when several historical 100vh / fixed rules cascade.
 * Force the DOCUMENT to own vertical scrolling and reserve fixed scrolling
 * only for the off-canvas sidebar and table/report containers.
 */
html{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch;
}

body,
body.basira-app{
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    position:static!important;
    touch-action:pan-y pinch-zoom!important;
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
}

.app-shell,
.app-main,
.dashboard-content{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:visible!important;
}

/* A stale sidebar-open class must never lock the PWA document. */
body.sidebar-open{
    overflow-y:auto!important;
    height:auto!important;
    max-height:none!important;
}

/* Standalone PWA / browser app modes */
@media(display-mode:standalone),
       (display-mode:minimal-ui),
       (display-mode:fullscreen){
    html,
    body,
    body.basira-app{
        height:auto!important;
        min-height:100%!important;
        max-height:none!important;
        overflow-y:auto!important;
        position:static!important;
        overscroll-behavior-y:auto!important;
        touch-action:pan-y pinch-zoom!important;
    }

    .app-shell,
    .app-main,
    .dashboard-content{
        height:auto!important;
        max-height:none!important;
        overflow-y:visible!important;
    }
}

/* Mobile document always scrolls vertically in Edge, Chrome and installed PWA. */
@media(max-width:980px){
    html{
        height:auto!important;
        min-height:100%!important;
        overflow-y:auto!important;
    }

    body,
    body.basira-app{
        width:100%!important;
        height:auto!important;
        min-height:100%!important;
        max-height:none!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        position:static!important;
        touch-action:pan-y pinch-zoom!important;
    }

    .app-shell{
        width:100%!important;
        min-height:100%!important;
        height:auto!important;
        max-height:none!important;
        display:block!important;
        overflow:visible!important;
    }

    .app-main{
        width:100%!important;
        min-height:100%!important;
        height:auto!important;
        max-height:none!important;
        overflow:visible!important;
        position:relative!important;
    }

    .dashboard-content{
        width:100%!important;
        height:auto!important;
        min-height:calc(100dvh - 70px)!important;
        max-height:none!important;
        overflow:visible!important;
        position:relative!important;
        padding-bottom:max(44px,env(safe-area-inset-bottom))!important;
    }

    /* Only the off-canvas menu is viewport-fixed. */
    .sidebar{
        position:fixed!important;
        top:0!important;
        right:0!important;
        bottom:0!important;
        height:100dvh!important;
        max-height:100dvh!important;
        overflow:hidden!important;
    }

    .sidebar-nav{
        min-height:0!important;
        max-height:calc(100dvh - 155px)!important;
        overflow-y:auto!important;
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
        touch-action:pan-y!important;
    }

    /* Sticky header must not become a page-sized scroll container. */
    .app-topbar{
        position:sticky!important;
        top:0!important;
        height:auto!important;
        max-height:none!important;
    }

    /* Child content never captures the document's vertical scroll. */
    .filters-card,
    .panel-card,
    .kpi-card,
    .analysis-note,
    .dashboard-grid,
    .kpi-grid{
        height:auto!important;
        max-height:none!important;
        overflow-y:visible!important;
    }

    /* Horizontal scroll is allowed only where genuinely necessary. */
    .table-wrap,
    .long-table-scroll,
    .subjects-table-scroll,
    .priorities-table-scroll{
        touch-action:pan-x pan-y!important;
    }
}

/* Keep sidebar logout visually separate and always visible below reports. */
.nav-logout-item{
    margin-top:8px!important;
    padding-top:10px!important;
    border-top:1px solid #D8DDD4!important;
    color:#8B625F!important;
}
.nav-logout-item .nav-icon{
    background:#F5EAEA!important;
    color:#986B68!important;
}
.nav-logout-item:hover{
    background:#F7EEEB!important;
    color:#875C59!important;
}
.nav-logout-item.active{
    background:#F7EEEB!important;
}

/* In the light sidebar the logout divider must remain subtle. */
@media(max-width:980px){
    .nav-logout-item{
        margin-bottom:14px!important;
    }
}


/* BASIRA V17.8 — mutually compatible cascading filters */
.filters-card select{
    transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.filters-card select:focus{
    background:#fff!important;
}


/* BASIRA V17.9 — safe POST logout inside sidebar */
.nav-logout-form{
    margin:0!important;
    padding:0!important;
    width:100%;
}
.nav-logout-form .nav-logout-item{
    width:100%;
    font-family:inherit!important;
    text-align:inherit;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
}


/* ==========================================================
   BASIRA V18 — Statistical indicators
   ========================================================== */
.indicators-page .dashboard-content{padding-bottom:42px}
.indicator-filter-card{border-color:#D8E3DE}
.indicators-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.indicator-scope-strip{
    margin-top:14px;padding:10px 14px;border-radius:13px;
    background:#F4F8F5;border:1px solid #DDE8E1;display:flex;
    gap:9px;align-items:center;flex-wrap:wrap
}
.indicator-scope-strip span{font-size:12px;color:#75857F}
.indicator-scope-strip strong{font-size:13px;color:#355E5A}

.indicator-kpi-grid{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;margin:16px 0
}
.indicator-kpi{
    background:#FFFEFC;border:1px solid #E4E7E1;border-radius:18px;
    padding:17px 15px;min-width:0
}
.indicator-kpi span,.indicator-kpi strong,.indicator-kpi small{display:block}
.indicator-kpi span{font-size:12px;color:#75827E}
.indicator-kpi strong{font-size:23px;color:#294F53;margin:7px 0 5px;line-height:1.15}
.indicator-kpi small{font-size:11px;color:#8A928F;line-height:1.55}
.indicator-kpi.good{background:#F3F8F5;border-color:#D5E5DC}
.indicator-kpi.risk{background:#FBF4F2;border-color:#EBDAD5}

.indicator-comparison-strip{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px
}
.indicator-comparison-strip article{
    background:#F7F5EF;border:1px solid #E7E1D5;border-radius:16px;padding:14px
}
.indicator-comparison-strip span,.indicator-comparison-strip strong,.indicator-comparison-strip small{display:block}
.indicator-comparison-strip span{font-size:11px;color:#7E807B}
.indicator-comparison-strip strong{font-size:19px;color:#355E5A;margin:6px 0}
.indicator-comparison-strip small{font-size:10.5px;color:#8C8F8A;line-height:1.5}
.good-text{color:#557D69!important}.risk-text{color:#A46E68!important}

.indicator-visual-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;margin-bottom:16px}
.indicator-mini-note{font-size:11px;color:#8A938F}
.indicator-compass-card{overflow:hidden}
.performance-compass{position:relative;width:min(460px,100%);aspect-ratio:1;margin:0 auto}
.performance-compass svg{width:100%;height:100%;overflow:visible}
.compass-ring-bg{fill:#FCFBF8;stroke:#E7E7E0;stroke-width:1.5}
.compass-track{fill:none;stroke:#E8ECE8;stroke-width:16;stroke-linecap:round}
.compass-value{fill:none;stroke-width:16;stroke-linecap:round}
.compass-value.avg{stroke:#7D9D91}
.compass-value.pass{stroke:#879DA6}
.compass-value.prof{stroke:#B69A6A}
.compass-value.low{stroke:#B8847B}
.compass-center{fill:#F5F2E9;stroke:#E5DED0;stroke-width:1.5}
.compass-center-label{font-size:14px;fill:#6F7A76;font-family:Arial,Tahoma,sans-serif}
.compass-center-value{font-size:28px;font-weight:800;fill:#315A57;font-family:Arial,Tahoma,sans-serif}
.compass-label{position:absolute;text-align:center;min-width:90px}
.compass-label span,.compass-label strong{display:block}
.compass-label span{font-size:11px;color:#7C8783}.compass-label strong{font-size:17px;color:#355E5A;margin-top:2px}
.compass-label.top{top:2%;left:50%;transform:translateX(-50%)}
.compass-label.right{right:0;top:48%;transform:translateY(-50%)}
.compass-label.bottom{bottom:1%;left:50%;transform:translateX(-50%)}
.compass-label.left{left:0;top:48%;transform:translateY(-50%)}
.compass-label.risk strong{color:#A46F68}
.compass-help{
    margin-top:5px;padding:10px 12px;border-radius:12px;background:#F8F7F3;
    color:#717C78;font-size:11px;line-height:1.7;text-align:center
}

.strength-map-list{display:flex;flex-direction:column;gap:9px}
.strength-row{
    display:grid;grid-template-columns:minmax(110px,1.35fr) minmax(120px,2fr) 70px 100px;
    gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #ECEDE8
}
.strength-row:last-child{border-bottom:0}
.strength-name strong,.strength-name small{display:block}
.strength-name strong{font-size:12px;color:#3C5C5B;white-space:normal}
.strength-name small{font-size:10px;color:#8D9692;margin-top:2px}
.strength-bar{height:8px;border-radius:999px;background:#ECEDE9;overflow:hidden}
.strength-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#96AFA4,#6E9285)}
.strength-value{font-size:12px;font-weight:800;color:#355E5A;text-align:center}
.strength-tag{font-size:10px;padding:5px 7px;border-radius:999px;text-align:center;white-space:nowrap}
.strength-tag.good{background:#EDF6F0;color:#52745F}
.strength-tag.risk{background:#F8ECE9;color:#9C6862}
.strength-tag.stable{background:#F3F1E9;color:#81775F}

.indicator-diagnostic-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px
}
.indicator-diagnostic{
    background:#FFFDFC;border:1px solid #E5E5DE;border-radius:17px;padding:15px
}
.indicator-diagnostic span,.indicator-diagnostic strong,.indicator-diagnostic small{display:block}
.indicator-diagnostic span{font-size:11px;color:#808985}
.indicator-diagnostic strong{font-size:16px;color:#355E5A;margin:7px 0;line-height:1.45}
.indicator-diagnostic small{font-size:11px;color:#89918D}
.indicator-diagnostic.good{border-right:4px solid #7F9F91}
.indicator-diagnostic.risk{border-right:4px solid #B7847B}

.indicator-reading-card p{
    margin:0;font-size:14px;line-height:2;color:#455F60;
    background:#F8FAF8;border-radius:14px;padding:16px 18px
}
.indicator-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.indicator-levels>div{
    border:1px solid #E1E6E1;background:#FBFCFA;border-radius:14px;padding:13px;text-align:center
}
.indicator-levels strong,.indicator-levels span,.indicator-levels small{display:block}
.indicator-levels strong{font-size:20px;color:#355E5A}
.indicator-levels span{font-size:15px;font-weight:800;color:#66877D;margin:5px 0}
.indicator-levels small{font-size:10px;color:#89928E}
.indicator-export-panel{margin-top:16px}
.indicator-export-body{display:flex;gap:18px;align-items:center;justify-content:space-between}
.indicator-export-body p{margin:0 0 5px;color:#4C6463;font-size:13px}
.indicator-export-body small{color:#89928E;line-height:1.6}
.indicator-excel-top{white-space:nowrap}

/* ==========================================================
   BASIRA V18 — Report pagination / whitespace improvements
   ========================================================== */
.report-pdf-page{
    padding-top:12mm!important;
    padding-bottom:15mm!important;
}
.report-cover-page{padding-top:13mm!important}
.report-level-grid{margin-top:3mm!important}
.report-level-card{padding:5mm 3mm!important}
.report-reading-box{margin-top:6mm!important;padding:5mm!important}
.report-reading-box.compact-reading p{line-height:1.75!important}
.report-level-distribution{
    display:flex;width:100%;height:11mm;margin-top:5mm;border-radius:3mm;
    overflow:hidden;background:#EFF2EF;border:1px solid #E0E5E1;direction:rtl
}
.report-level-distribution span{
    min-width:4px;height:100%;display:flex;align-items:center;justify-content:center;
    font-size:7pt;font-weight:800;color:#fff
}
.report-level-distribution .lv-أ{background:#648B7A}
.report-level-distribution .lv-ب{background:#86A39A}
.report-level-distribution .lv-ج{background:#A5A58C}
.report-level-distribution .lv-د{background:#C1A07B}
.report-level-distribution .lv-هـ{background:#B98278}
.report-level-summary-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:4mm;margin-top:5mm
}
.report-level-summary-grid>div{
    border-radius:4mm;padding:5mm 6mm;border:1px solid #E1E7E3
}
.report-level-summary-grid span,.report-level-summary-grid strong,.report-level-summary-grid b{display:block}
.report-level-summary-grid span{font-size:8.5pt;color:#7B8A86}
.report-level-summary-grid strong{font-size:19pt;margin:2mm 0;color:#355E5A}
.report-level-summary-grid b{font-size:8.5pt;color:#687A75}
.report-level-summary-grid .good-card{background:#F2F8F4}
.report-level-summary-grid .risk-card{background:#FCF3F0}
.report-table.compact th,.report-table.compact td{
    font-size:8.2pt!important;
    padding:1.65mm 1.55mm!important;
    line-height:1.32!important
}
.report-highlight-grid{margin-bottom:3mm!important}
.report-highlight-grid>div{padding:4mm!important}
.report-method-text{padding:3mm!important;line-height:1.6!important}
.report-conclusion-box{padding:5mm!important}
.report-conclusion-box p{line-height:1.75!important;margin-bottom:3mm!important}
.report-conclusion-box li{line-height:1.65!important;margin-bottom:2mm!important}

/* ==========================================================
   BASIRA V18 — Faster-feeling navigation
   ========================================================== */
.basira-loading-overlay{
    transition:opacity .12s ease!important
}
.table-wrap,
.long-table-scroll{
    content-visibility:auto;
    contain-intrinsic-size:600px;
}

@media(max-width:1150px){
    .indicator-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .indicator-comparison-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
    .indicator-visual-grid{grid-template-columns:1fr}
    .indicator-diagnostic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
    .indicators-filter-grid{grid-template-columns:1fr!important}
    .indicator-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .indicator-comparison-strip{grid-template-columns:1fr}
    .indicator-diagnostic-grid{grid-template-columns:1fr 1fr}
    .strength-row{grid-template-columns:minmax(100px,1.4fr) minmax(90px,1.4fr) 58px}
    .strength-tag{grid-column:1/-1;justify-self:start}
    .indicator-levels{grid-template-columns:repeat(5,minmax(58px,1fr));overflow-x:auto}
    .indicator-export-body{align-items:stretch;flex-direction:column}
    .indicator-export-body button{width:100%}
    .indicator-excel-top{display:none}
}
@media(max-width:430px){
    .indicator-kpi-grid{grid-template-columns:1fr 1fr}
    .indicator-kpi strong{font-size:19px}
    .indicator-diagnostic-grid{grid-template-columns:1fr}
    .performance-compass{width:100%}
    .compass-label strong{font-size:14px}
}


/* ==========================================================
   BASIRA V18.1 — smart indicator comparisons / compass
   ========================================================== */
.indicator-comparison-strip article{
    min-height:94px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.indicator-comparison-strip article strong{
    line-height:1.35;
    word-break:normal;
}

.performance-compass{
    width:min(500px,100%)!important;
    padding:42px!important;
    box-sizing:border-box!important;
}
.performance-compass svg{
    overflow:visible!important;
}
.compass-label{
    min-width:112px!important;
    max-width:132px;
    padding:7px 9px!important;
    background:#FFFEFC;
    border:1px solid #E2E7E2;
    border-radius:12px;
    box-shadow:0 4px 14px rgba(52,78,73,.06);
    box-sizing:border-box;
    z-index:4;
}
.compass-label span{
    font-size:10.5px!important;
    line-height:1.2;
    white-space:nowrap;
}
.compass-label strong{
    font-size:16px!important;
    line-height:1.25!important;
    margin-top:4px!important;
    white-space:nowrap;
}
.compass-label.top{
    top:0!important;
}
.compass-label.right{
    right:-2px!important;
    top:50%!important;
}
.compass-label.bottom{
    bottom:0!important;
}
.compass-label.left{
    left:-2px!important;
    top:50%!important;
}
.compass-label.left span,
.compass-label.left strong{
    position:static!important;
    transform:none!important;
}
.compass-help{
    margin-top:0!important;
}
.indicator-reading-card .panel-head h2{
    color:#315D58;
}

/* ==========================================================
   BASIRA V18.1 — official report cover
   ========================================================== */
.report-official-heading{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.7mm;
    margin-bottom:9mm;
    color:#244F53;
}
.report-official-heading strong{
    font-size:14pt;
    font-weight:800;
}
.report-official-heading span{
    display:block;
    font-size:11pt;
    font-weight:700;
    line-height:1.35;
}
.report-official-heading span:last-child{
    font-size:10.5pt;
    color:#4E6E70;
}
.report-analysis-label{
    display:inline-block;
    margin-top:2mm;
    padding-top:4mm;
    border-top:1px solid #DFE8E4;
}
.report-cover-center{
    padding:9mm 5mm 7mm!important;
}
.report-cover-center h1{
    margin-top:4mm!important;
}

/* ==========================================================
   BASIRA V18.1 — reduce empty areas in PDF
   ========================================================== */
.report-pdf-page{
    padding-top:10.5mm!important;
    padding-bottom:14mm!important;
}
.report-page-title{
    margin-bottom:4mm!important;
    padding-bottom:3mm!important;
}
.report-highlight-grid{
    margin-bottom:2.5mm!important;
}
.report-group-mini-chart{
    margin-top:5mm;
    border:1px solid #E3E9E6;
    border-radius:4mm;
    padding:4mm 5mm;
    background:#FBFCFA;
}
.report-mini-chart-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:3mm;
}
.report-mini-chart-title strong{
    font-size:9pt;
    color:#315B59;
}
.report-mini-chart-title span{
    font-size:7.5pt;
    color:#87938F;
}
.report-mini-bar-row{
    display:grid;
    grid-template-columns:minmax(32mm,1.4fr) minmax(50mm,2.4fr) 20mm;
    gap:3mm;
    align-items:center;
    margin:1.6mm 0;
}
.report-mini-bar-row>span{
    font-size:7.7pt;
    color:#51686A;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.report-mini-bar-row>i{
    height:3.2mm;
    background:#E9EEEB;
    border-radius:999px;
    overflow:hidden;
}
.report-mini-bar-row>i>b{
    display:block;
    height:100%;
    border-radius:999px;
    background:#7E9E91;
}
.report-mini-bar-row>strong{
    font-size:8pt;
    color:#315A58;
    text-align:left;
}

.report-priority-summary-page .priority-compact-table th,
.report-priority-summary-page .priority-compact-table td{
    padding:1.25mm 1.25mm!important;
    font-size:7.55pt!important;
    line-height:1.22!important;
}
.report-inline-conclusion{
    margin-top:4mm;
    padding-top:4mm;
    border-top:1px solid #E4E9E7;
}
.report-inline-conclusion h3{
    font-size:11pt;
    margin:0 0 3mm;
    color:#18324A;
}
.report-inline-conclusion p{
    margin:3mm 0 2mm;
    font-size:8.2pt;
    line-height:1.65;
    color:#4C626A;
}
.report-inline-conclusion ul{
    margin:0;
    padding-right:5mm;
}
.report-inline-conclusion li{
    font-size:7.8pt;
    line-height:1.55;
    margin-bottom:1mm;
}
.report-conclusion-summary-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:3mm;
}
.report-conclusion-summary-cards>div{
    border:1px solid #E2E9E5;
    border-radius:3mm;
    padding:3mm 3.5mm;
    background:#F7FAF8;
}
.report-conclusion-summary-cards span,
.report-conclusion-summary-cards strong{
    display:block;
}
.report-conclusion-summary-cards span{
    font-size:7.2pt;
    color:#83918D;
    margin-bottom:1mm;
}
.report-conclusion-summary-cards strong{
    font-size:8.5pt;
    line-height:1.4;
    color:#315A58;
}

@media(max-width:760px){
    .performance-compass{
        padding:34px!important;
    }
    .compass-label{
        min-width:94px!important;
        max-width:104px;
        padding:6px 7px!important;
    }
    .compass-label span{font-size:9.5px!important}
    .compass-label strong{font-size:13px!important}
}


/* ==========================================================
   BASIRA V18.2 — organized navigation
   ========================================================== */
.analysis-period-card{
    margin:13px 0 3px;
    padding:10px;
    border:1px solid #D9DED6;
    background:#F9F8F3;
    border-radius:14px;
}
.analysis-period-card>span{
    display:block;
    font-size:9.5px;
    font-weight:700;
    color:#7C8985;
    margin-bottom:7px;
}
.period-actions{display:grid;grid-template-columns:72px 1fr;gap:6px}
.period-pill{
    border:1px solid #D8DED6;
    background:#FFFDF9;
    color:#526B67;
    border-radius:10px;
    min-height:34px;
    padding:5px 8px;
    font-family:inherit;
    font-size:10px;
    cursor:pointer;
}
.period-pill.active{
    background:#E6ECE5;
    border-color:#C8D3C8;
    color:#315A57;
    font-weight:800;
}
.period-pill.upcoming{
    text-align:right;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
}
.period-pill.upcoming small{
    padding:2px 5px;
    border-radius:999px;
    background:#F5EDE1;
    color:#927352;
    font-size:8px;
    white-space:nowrap;
}

.basira-nav-accordion{gap:5px!important}
.nav-group{border-radius:12px;overflow:hidden}
.nav-group-toggle{
    width:100%;
    min-height:43px;
    border:1px solid transparent;
    background:transparent;
    border-radius:12px;
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:11px;
    font-family:inherit;
    color:#435F5C;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    text-align:right;
}
.nav-group-toggle:hover{background:#EAEEE7}
.nav-group.open>.nav-group-toggle{
    background:#F0F2EC;
    color:#315A57;
}
.nav-group-toggle .nav-icon{flex:0 0 25px}
.nav-chevron{
    margin-right:auto;
    font-style:normal;
    font-size:15px;
    transition:transform .18s ease;
    color:#87918D;
}
.nav-group.open .nav-chevron{transform:rotate(180deg)}
.nav-group-items{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .18s ease;
}
.nav-group-items>*{overflow:hidden}
.nav-group.open .nav-group-items{grid-template-rows:1fr}
.nav-subitem{
    display:block;
    text-decoration:none;
    color:#637572;
    font-size:11px;
    min-height:34px;
    padding:9px 45px 8px 12px;
    border-radius:9px;
    position:relative;
}
.nav-subitem:before{
    content:'';
    position:absolute;
    right:30px;
    top:50%;
    width:5px;height:5px;
    border-radius:50%;
    background:#BCC7BE;
    transform:translateY(-50%);
}
.nav-subitem:hover{background:#EEF1EB;color:#315A57}
.nav-subitem.active{
    background:#E7ECE5;
    color:#315A57;
    font-weight:800;
}
.nav-subitem.active:before{background:#6F9185}

.sidebar-foot small{
    display:block;
    color:#748481!important;
    font-size:8.5px;
    line-height:1.55;
}
.sidebar-foot strong{margin-bottom:2px}

/* Coming period modal */
.period-modal[hidden]{display:none!important}
.period-modal{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:18px}
.period-modal-backdrop{position:absolute;inset:0;background:rgba(40,55,55,.34);backdrop-filter:blur(2px)}
.period-modal-card{
    position:relative;
    z-index:1;
    width:min(460px,100%);
    background:#FFFDF9;
    border:1px solid #DDE3DC;
    border-radius:22px;
    padding:24px;
    box-shadow:0 18px 60px rgba(47,67,64,.18);
    text-align:center;
}
.period-modal-close{
    position:absolute;left:12px;top:10px;width:34px;height:34px;
    border:0;background:#F0F2ED;border-radius:50%;font-size:21px;cursor:pointer;color:#647570
}
.period-modal-badge{
    display:inline-block;padding:5px 10px;border-radius:999px;background:#F5EDE1;color:#8A6A48;
    font-size:10px;font-weight:800;margin-bottom:9px
}
.period-modal-card h3{margin:0;color:#315A57;font-size:20px}
.period-modal-card p{margin:13px 0 8px;line-height:1.9;color:#4F6764;font-size:13px}
.period-modal-card small{display:block;color:#87918D;line-height:1.7;font-size:10.5px}
.period-modal-ok{
    margin-top:16px;min-width:110px;min-height:40px;border:0;border-radius:11px;
    background:#6F9185;color:#fff;font-family:inherit;font-weight:700;cursor:pointer
}

/* ==========================================================
   BASIRA V18.2 — Executive Summary
   ========================================================== */
.executive-type-card{
    background:#FFFDF9;
    border:1px solid #E1E4DD;
    border-radius:18px;
    padding:16px;
    margin-bottom:14px;
}
.executive-type-tabs{display:flex;gap:8px;flex-wrap:wrap}
.executive-type-tabs a{
    min-width:105px;
    text-align:center;
    text-decoration:none;
    color:#5F716E;
    border:1px solid #DCE2DB;
    background:#F8F8F3;
    border-radius:12px;
    padding:9px 15px;
    font-size:12px;
    font-weight:700;
}
.executive-type-tabs a.active{
    background:#E3EBE5;
    border-color:#BACBBC;
    color:#315A57;
    box-shadow:inset 0 -2px 0 #839F93;
}
.executive-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.executive-scope-line{
    margin-top:13px;
    padding:10px 13px;
    border:1px solid #DDE5DE;
    border-radius:12px;
    background:#F5F8F5;
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
}
.executive-scope-line span{font-size:10px;color:#7E8B87}
.executive-scope-line strong{font-size:12px;color:#315A57}
.executive-scope-line i{margin-right:auto;font-style:normal;font-size:10px;color:#92836D}

.executive-kpis{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin:15px 0;
}
.executive-kpis article{
    background:#FFFDF9;
    border:1px solid #E1E4DE;
    border-radius:17px;
    padding:16px;
}
.executive-kpis span,.executive-kpis strong,.executive-kpis small{display:block}
.executive-kpis span{font-size:11px;color:#7A8884}
.executive-kpis strong{font-size:22px;color:#315A57;margin:7px 0 4px}
.executive-kpis small{font-size:10px;color:#8B948F}
.executive-kpis .good{background:#F3F8F4;border-color:#D8E7DD}
.executive-kpis .risk{background:#FBF3F1;border-color:#ECDAD6}

.executive-reading-card{
    border-radius:18px;
    padding:17px 18px;
    background:linear-gradient(135deg,#F3F7F4,#FAF7EF);
    border:1px solid #DDE6DF;
    margin-bottom:15px;
}
.executive-reading-card h2{margin:0;color:#315A57;font-size:17px}
.executive-reading-card p{margin:9px 0 0;line-height:1.95;color:#4F6764;font-size:13px}

.executive-comparison-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:15px;
}
.executive-comparison-grid article{
    min-height:92px;
    background:#FFFDF9;
    border:1px solid #E1E4DD;
    border-radius:16px;
    padding:14px;
}
.executive-comparison-grid span,.executive-comparison-grid strong,.executive-comparison-grid small{display:block}
.executive-comparison-grid span{font-size:10.5px;color:#7C8985}
.executive-comparison-grid strong{font-size:18px;color:#315A57;margin:6px 0}
.executive-comparison-grid small{font-size:10px;color:#8A938F}

.executive-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.executive-levels>div{
    border:1px solid #E1E6E1;
    border-radius:14px;
    padding:13px 8px;
    background:#FAFBF8;
    text-align:center;
}
.executive-levels b,.executive-levels strong,.executive-levels span{display:block}
.executive-levels b{font-size:19px;color:#315A57}
.executive-levels strong{font-size:14px;color:#6A897E;margin:5px 0}
.executive-levels span{font-size:9.5px;color:#8B948F}

.executive-insight-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:15px 0;
}
.executive-insight-grid article{
    padding:15px;border-radius:16px;background:#FFFDF9;border:1px solid #E2E4DE
}
.executive-insight-grid span,.executive-insight-grid strong,.executive-insight-grid small{display:block}
.executive-insight-grid span{font-size:10px;color:#7D8A86}
.executive-insight-grid strong{font-size:15px;line-height:1.45;color:#315A57;margin:6px 0}
.executive-insight-grid small{font-size:10px;color:#89928E}
.executive-insight-grid .good{border-right:4px solid #77978B}
.executive-insight-grid .risk{border-right:4px solid #B8847B}
.executive-export-status{margin-top:12px}
.executive-pdf-offscreen{
    position:absolute;
    left:-20000px;
    top:0;
    width:794px;
    pointer-events:none;
}
.report-designer-credit{
    margin:8mm auto 0;
    max-width:150mm;
    padding-top:4mm;
    border-top:1px solid #DFE7E3;
    color:#5B7470;
    font-size:8.6pt;
    line-height:1.7;
}
.executive-pdf-levels{margin-top:8mm!important}
.executive-pdf-priority{margin-top:8mm!important}

.login-footer span:last-child{max-width:520px;text-align:center}

@media(max-width:1150px){
    .executive-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
    .executive-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .executive-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
    .analysis-period-card{margin-top:10px}
    .executive-filter-grid{grid-template-columns:1fr!important}
    .executive-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
    .executive-comparison-grid{grid-template-columns:1fr}
    .executive-insight-grid{grid-template-columns:1fr 1fr}
    .executive-levels{overflow-x:auto;grid-template-columns:repeat(5,minmax(72px,1fr))}
    .executive-type-tabs a{flex:1 1 calc(50% - 8px);min-width:0}
}
@media(max-width:430px){
    .executive-insight-grid{grid-template-columns:1fr}
    .executive-kpis strong{font-size:19px}
}


/* ==========================================================
   BASIRA V18.3 — reliable submenu expansion
   ========================================================== */
.basira-nav-accordion{
    overflow-x:hidden!important;
}
.nav-group-items{
    display:block!important;
    max-height:0!important;
    overflow:hidden!important;
    opacity:0;
    visibility:hidden;
    transition:max-height .20s ease,opacity .16s ease!important;
}
.nav-group-items[hidden]{
    display:block!important;
    max-height:0!important;
}
.nav-group.open>.nav-group-items{
    max-height:230px!important;
    opacity:1;
    visibility:visible;
}
.nav-group.open>.nav-group-items:not([hidden]){
    display:block!important;
}
.nav-group-items>*{
    overflow:visible!important;
}
.nav-subitem{
    width:100%;
    box-sizing:border-box;
}
.sidebar-nav{
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

/* ==========================================================
   BASIRA V18.3 — designer credit
   ========================================================== */
.sidebar-foot{
    flex:0 0 auto;
    margin-top:10px!important;
    padding:12px 10px 10px!important;
    background:#F5F5EF;
    border:1px solid #E0E2DA!important;
    border-radius:13px 13px 0 0;
    text-align:center;
    line-height:1.45!important;
}
.sidebar-foot .credit-kicker{
    display:block;
    font-size:8.5px!important;
    color:#8A938F!important;
    margin-bottom:2px;
}
.sidebar-foot .credit-name{
    display:block;
    color:#315A57!important;
    font-size:11.5px!important;
    font-weight:800!important;
    margin:0 0 3px!important;
}
.sidebar-foot .credit-role{
    display:block;
    color:#637873!important;
    font-size:9px!important;
    font-weight:700;
    line-height:1.45!important;
}
.sidebar-foot .credit-dept{
    display:block;
    color:#7B8985!important;
    font-size:8.6px!important;
    line-height:1.45!important;
    margin-top:1px;
}
.login-credit-name{
    font-weight:800;
    color:#315A57;
}
.login-credit-role{
    font-size:10px;
    color:#748682;
}

/* ==========================================================
   BASIRA V18.3 — clear export buttons in RTL
   ========================================================== */
.report-download-btn{
    min-width:112px!important;
    min-height:40px!important;
    padding:9px 15px!important;
    display:inline-flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    direction:rtl!important;
    unicode-bidi:isolate!important;
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
}
.report-download-btn .export-word{
    direction:rtl;
    unicode-bidi:isolate;
}
.report-download-btn .export-format{
    direction:ltr!important;
    unicode-bidi:isolate!important;
    font-family:Arial,Tahoma,sans-serif!important;
    font-weight:800!important;
}
.topbar-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

/* ==========================================================
   BASIRA V18.3 — Executive PDF logo + balanced content
   ========================================================== */
.report-top-brand{
    position:absolute!important;
    top:9mm!important;
    right:13mm!important;
    display:flex!important;
    align-items:center!important;
    gap:3mm!important;
    direction:rtl!important;
}
.report-top-brand .report-eye{
    width:13mm!important;
    height:13mm!important;
    min-width:13mm!important;
    max-width:13mm!important;
    border-radius:4mm!important;
    background:#E7ECE5!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
}
.report-top-brand .report-eye svg{
    width:9.5mm!important;
    height:9.5mm!important;
    max-width:9.5mm!important;
    max-height:9.5mm!important;
    display:block!important;
}
.report-top-brand>div:last-child{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
}
.report-top-brand>div:last-child strong{
    font-size:10pt!important;
    color:#315A57!important;
    line-height:1.2!important;
}
.report-top-brand>div:last-child span{
    font-size:7pt!important;
    color:#80908B!important;
    margin-top:1mm!important;
}
.report-cover-page .report-cover-center{
    margin:auto!important;
    padding-top:24mm!important;
}
.report-designer-credit{
    margin:7mm auto 0!important;
    max-width:150mm!important;
    padding:4mm 5mm!important;
    border-top:1px solid #DDE6E2!important;
    border-bottom:1px solid #EDF1EE!important;
    color:#5B7470!important;
    text-align:center!important;
    line-height:1.55!important;
}
.report-designer-credit span,
.report-designer-credit strong,
.report-designer-credit small{
    display:block!important;
}
.report-designer-credit span{
    font-size:7.5pt!important;
    color:#86938F!important;
}
.report-designer-credit strong{
    font-size:10.2pt!important;
    color:#315A57!important;
    margin:1mm 0!important;
}
.report-designer-credit small{
    font-size:7.7pt!important;
    color:#607874!important;
}
.executive-pdf-trend-section,
.executive-pdf-secondary{
    margin-top:6mm;
}
.executive-pdf-trend-section h3,
.executive-pdf-secondary h3{
    margin:0 0 3mm;
    color:#315A57;
    font-size:10pt;
}
.executive-pdf-comparisons{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:3mm!important;
    margin-top:5mm!important;
}
.executive-pdf-comparisons>div{
    background:#F7FAF8!important;
    border:1px solid #E0E7E3!important;
    border-radius:3mm!important;
    padding:3mm!important;
}
.executive-pdf-comparisons span,
.executive-pdf-comparisons strong,
.executive-pdf-comparisons small{
    display:block!important;
}
.executive-pdf-comparisons span{
    font-size:7.2pt!important;
    color:#82918C!important;
}
.executive-pdf-comparisons strong{
    font-size:10pt!important;
    color:#315A57!important;
    margin:1mm 0!important;
}
.executive-pdf-comparisons small{
    font-size:6.8pt!important;
    color:#798985!important;
}
.executive-trend-table th,
.executive-trend-table td{
    padding:1.35mm 1.2mm!important;
    font-size:7.4pt!important;
}
.executive-pdf-secondary .report-table th,
.executive-pdf-secondary .report-table td{
    padding:1.25mm 1.2mm!important;
    font-size:7.2pt!important;
}
.executive-pdf-priority{
    margin-top:5mm!important;
}

/* Executive page balance on desktop */
.executive-summary-page .dashboard-content{
    max-width:1500px;
    width:100%;
    margin-inline:auto;
}
.executive-summary-page .app-topbar{
    gap:16px!important;
}
.executive-summary-page .page-heading{
    min-width:260px;
    flex:1 1 auto;
}

/* ==========================================================
   Mobile / desktop sidebar reliability
   ========================================================== */
@media(max-width:980px){
    .sidebar{
        display:flex!important;
        flex-direction:column!important;
        height:100dvh!important;
        max-height:100dvh!important;
        overflow:hidden!important;
    }
    .sidebar-nav{
        flex:1 1 auto!important;
        height:auto!important;
        max-height:none!important;
        padding-bottom:8px!important;
    }
    .sidebar-foot{
        margin-top:4px!important;
    }
}
@media(max-width:760px){
    .executive-summary-page .app-topbar{
        flex-wrap:wrap!important;
        align-items:center!important;
        padding:12px 14px!important;
    }
    .executive-summary-page .page-heading{
        flex:1 1 calc(100% - 58px)!important;
        min-width:0!important;
    }
    .executive-summary-page .topbar-actions{
        order:4;
        width:100%;
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
    }
    .executive-summary-page .topbar-actions .report-download-btn{
        width:100%!important;
        min-width:0!important;
    }
    .executive-summary-page .topbar-user{
        margin-right:auto;
    }
}


/* ==========================================================
   BASIRA V18.4 — native, non-overlapping sidebar groups
   ========================================================== */
.basira-nav-native{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    min-height:0!important;
    padding-bottom:10px!important;
    scrollbar-gutter:stable;
}
.native-nav-group{
    display:block!important;
    width:100%!important;
    flex:0 0 auto!important;
    border-radius:12px!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
}
.native-nav-group>summary{
    list-style:none!important;
}
.native-nav-group>summary::-webkit-details-marker{
    display:none!important;
}
.native-nav-group>.nav-group-toggle{
    box-sizing:border-box!important;
    width:100%!important;
    min-height:44px!important;
    margin:0!important;
    padding:9px 12px!important;
    display:grid!important;
    grid-template-columns:25px minmax(0,1fr) 18px!important;
    align-items:center!important;
    column-gap:10px!important;
    cursor:pointer!important;
    user-select:none!important;
}
.native-nav-group>.nav-group-toggle>span:nth-child(2){
    min-width:0!important;
    white-space:normal!important;
    line-height:1.5!important;
}
.native-nav-group>.nav-group-toggle .nav-chevron{
    margin:0!important;
    justify-self:end!important;
    transition:transform .16s ease!important;
}
.native-nav-group[open]>.nav-group-toggle{
    background:#EEF2EC!important;
    border-color:#D9E2DA!important;
    color:#315A57!important;
}
.native-nav-group[open]>.nav-group-toggle .nav-chevron{
    transform:rotate(180deg)!important;
}
.native-nav-group>.nav-submenu{
    display:block!important;
    position:static!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    margin:4px 0 7px!important;
    padding:4px 10px 5px 8px!important;
    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
    background:#F8F8F3!important;
    border:1px solid #E6E8E1!important;
    border-radius:11px!important;
    box-sizing:border-box!important;
}
.native-nav-group:not([open])>.nav-submenu{
    display:none!important;
}
.native-nav-group>.nav-submenu .nav-subitem{
    display:flex!important;
    align-items:center!important;
    position:relative!important;
    width:100%!important;
    min-height:36px!important;
    height:auto!important;
    margin:0!important;
    padding:8px 28px 8px 10px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    border-radius:8px!important;
    color:#607571!important;
    font-size:11px!important;
    line-height:1.5!important;
    text-decoration:none!important;
}
.native-nav-group>.nav-submenu .nav-subitem + .nav-subitem{
    margin-top:2px!important;
}
.native-nav-group>.nav-submenu .nav-subitem:before{
    content:''!important;
    position:absolute!important;
    right:12px!important;
    top:50%!important;
    width:5px!important;
    height:5px!important;
    margin:0!important;
    transform:translateY(-50%)!important;
    border-radius:50%!important;
    background:#B8C5BC!important;
}
.native-nav-group>.nav-submenu .nav-subitem:hover{
    background:#EEF3EE!important;
    color:#315A57!important;
}
.native-nav-group>.nav-submenu .nav-subitem.active{
    background:#E4ECE6!important;
    color:#315A57!important;
    font-weight:800!important;
}
.native-nav-group>.nav-submenu .nav-subitem.active:before{
    background:#658B7C!important;
}
.basira-nav-native details,
.basira-nav-native summary,
.basira-nav-native .nav-submenu,
.basira-nav-native .nav-subitem{
    transform:none!important;
}
.sidebar{
    display:flex!important;
    flex-direction:column!important;
}
.sidebar .analysis-period-card,
.sidebar .sidebar-brand{
    flex:0 0 auto!important;
}
.sidebar .basira-nav-native{
    flex:1 1 auto!important;
}
.sidebar .sidebar-foot{
    flex:0 0 auto!important;
    position:static!important;
}

@media(min-width:981px){
    .native-nav-group>.nav-group-toggle{
        min-height:41px!important;
        padding-top:7px!important;
        padding-bottom:7px!important;
    }
    .native-nav-group>.nav-submenu .nav-subitem{
        min-height:33px!important;
        padding-top:7px!important;
        padding-bottom:7px!important;
    }
}
@media(max-width:980px){
    .sidebar{
        height:100dvh!important;
        max-height:100dvh!important;
        overflow:hidden!important;
    }
    .basira-nav-native{
        padding-bottom:12px!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior:contain!important;
    }
    .native-nav-group>.nav-group-toggle{
        min-height:46px!important;
    }
    .native-nav-group>.nav-submenu .nav-subitem{
        min-height:40px!important;
        font-size:11.5px!important;
    }
}


/* ==========================================================
   BASIRA V18.5 — Executive export placement
   ========================================================== */
.executive-summary-page .app-topbar .topbar-actions{
    display:none!important;
}
.executive-export-bar{
    margin-top:13px;
    padding:11px 13px;
    border-top:1px solid #E3E7E1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.executive-export-bar>div:first-child span,
.executive-export-bar>div:first-child small{
    display:block;
}
.executive-export-bar>div:first-child span{
    font-size:11px;
    font-weight:800;
    color:#496763;
}
.executive-export-bar>div:first-child small{
    margin-top:2px;
    font-size:9.5px;
    color:#89938F;
}
.executive-export-buttons{
    display:flex;
    align-items:center;
    gap:8px;
}
.executive-export-buttons .report-download-btn{
    min-width:120px!important;
}
.filter-hint{
    display:block;
    margin-top:5px;
    font-size:9px;
    color:#89948F;
    line-height:1.4;
}

/* ==========================================================
   BASIRA V18.5 — Executive tables
   Keep the entity/school column visible while scrolling.
   ========================================================== */
.executive-table-row{
    grid-template-columns:1fr!important;
}
.executive-table-row .panel-card{
    min-width:0!important;
}
.executive-table-row .table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
}
.executive-table-row .data-table{
    width:100%!important;
    min-width:720px!important;
    table-layout:auto!important;
}
.executive-table-row .data-table th:first-child,
.executive-table-row .data-table td:first-child{
    position:sticky!important;
    right:0!important;
    z-index:3!important;
    min-width:245px!important;
    max-width:360px!important;
    white-space:normal!important;
    background:#FFFDF9!important;
    box-shadow:-8px 0 12px -12px rgba(39,61,58,.35);
}
.executive-table-row .data-table thead th:first-child{
    z-index:5!important;
    background:#F3F5F0!important;
}
.executive-table-row .data-table td:not(:first-child),
.executive-table-row .data-table th:not(:first-child){
    min-width:92px!important;
    white-space:nowrap!important;
}

/* ==========================================================
   BASIRA V18.5 — clean mobile header
   ========================================================== */
@media(max-width:760px){
    .executive-summary-page .app-topbar{
        display:grid!important;
        grid-template-columns:48px minmax(0,1fr)!important;
        gap:10px!important;
        align-items:center!important;
        padding:11px 13px!important;
    }
    .executive-summary-page .sidebar-toggle{
        grid-column:1!important;
        grid-row:1!important;
        margin:0!important;
    }
    .executive-summary-page .page-heading{
        grid-column:2!important;
        grid-row:1!important;
        min-width:0!important;
        width:auto!important;
    }
    .executive-summary-page .page-heading h1{
        font-size:20px!important;
        line-height:1.25!important;
    }
    .executive-summary-page .page-heading p{
        font-size:9.5px!important;
        line-height:1.5!important;
        white-space:normal!important;
    }
    .executive-summary-page .topbar-user{
        display:none!important;
    }
    .executive-export-bar{
        flex-direction:column!important;
        align-items:stretch!important;
        padding:12px 0 0!important;
    }
    .executive-export-buttons{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        width:100%!important;
    }
    .executive-export-buttons .report-download-btn{
        width:100%!important;
        min-width:0!important;
        min-height:42px!important;
    }
    .executive-table-row .data-table{
        min-width:650px!important;
    }
    .executive-table-row .data-table th:first-child,
    .executive-table-row .data-table td:first-child{
        min-width:205px!important;
        max-width:240px!important;
    }
}


/* ==========================================================
   BASIRA V18.6 — desktop horizontal table navigation
   Phone/tablet behavior is intentionally unchanged.
   ========================================================== */
@media(min-width:981px){
    .basira-desktop-scroll-wrap{
        direction:ltr!important;
        width:100%!important;
        max-width:100%!important;
        overflow-x:scroll!important;
        overflow-y:auto!important;
        scrollbar-gutter:stable!important;
        scrollbar-width:auto!important;
        overscroll-behavior-x:auto!important;
        touch-action:auto!important;
    }

    .basira-desktop-scroll-wrap::-webkit-scrollbar{
        height:13px!important;
        width:11px!important;
    }
    .basira-desktop-scroll-wrap::-webkit-scrollbar-track{
        background:#EEF0EC!important;
        border-radius:999px!important;
    }
    .basira-desktop-scroll-wrap::-webkit-scrollbar-thumb{
        background:#949A98!important;
        border:3px solid #EEF0EC!important;
        border-radius:999px!important;
        min-width:48px!important;
    }
    .basira-desktop-scroll-wrap::-webkit-scrollbar-thumb:hover{
        background:#737C79!important;
    }

    .basira-desktop-scroll-wrap>.basira-desktop-rtl-table{
        direction:rtl!important;
        unicode-bidi:isolate!important;
        margin:0!important;
    }

    /* Let tables use their natural content width so both scrollbar ends
       correspond exactly to the first and last visible columns. */
    .basira-desktop-rtl-table{
        width:max-content!important;
        min-width:100%!important;
        table-layout:auto!important;
        border-collapse:collapse!important;
    }

    /* School / subject / grade / class names need more room than percentages. */
    .basira-desktop-rtl-table .basira-entity-column{
        min-width:250px!important;
        width:250px!important;
        max-width:330px!important;
        white-space:normal!important;
        line-height:1.65!important;
        text-align:right!important;
        overflow-wrap:anywhere!important;
    }

    .basira-desktop-rtl-table th:not(.basira-entity-column),
    .basira-desktop-rtl-table td:not(.basira-entity-column){
        min-width:92px!important;
        white-space:nowrap!important;
    }

    /* When the entity is the first column, keep it visible while examining
       percentages to the left. */
    .basira-sticky-entity-first .basira-entity-column{
        position:sticky!important;
        right:0!important;
        z-index:4!important;
        background:#FFFDF9!important;
        box-shadow:-9px 0 12px -12px rgba(44,66,62,.48)!important;
    }
    .basira-sticky-entity-first thead .basira-entity-column{
        z-index:7!important;
        background:#F1F2EC!important;
    }
    .basira-sticky-entity-first tbody tr:nth-child(even) .basira-entity-column{
        background:#FBFAF6!important;
    }
    .basira-sticky-entity-first tbody tr:hover .basira-entity-column{
        background:#F1F4EE!important;
    }

    /* More breathing room for the two-card detail sections without forcing
       the full page itself to scroll horizontally. */
    .dashboard-grid.equal-two>.panel-card{
        min-width:0!important;
    }
}

/* Never apply the desktop direction workaround to phones/tablets. */
@media(max-width:980px){
    .basira-desktop-scroll-wrap{
        direction:rtl!important;
    }
    .basira-desktop-scroll-wrap>.basira-desktop-rtl-table{
        direction:rtl!important;
    }
}