/* Samta Teaching Strategy Plan */
.stsp-wrap{
    --stsp-primary:#176b87;
    --stsp-secondary:#1fa79b;
    --stsp-gold:#c8a24a;
    --stsp-dark:#16323d;
    --stsp-soft:#f5faf9;
    --stsp-border:#dbe7e5;
    --stsp-muted:#60747b;
    max-width:1100px;
    margin:24px auto;
    font-family:Tahoma, Arial, sans-serif;
    color:var(--stsp-dark);
}
.stsp-hero{
    background:linear-gradient(135deg,#176b87,#1fa79b);
    color:#fff;
    padding:26px;
    border-radius:24px;
    margin-bottom:18px;
    box-shadow:0 18px 40px rgba(23,107,135,.18);
}
.stsp-hero h2{
    margin:10px 0 8px;
    font-size:28px;
}
.stsp-hero p{
    margin:0;
    line-height:1.9;
    opacity:.95;
}
.stsp-badge{
    display:inline-flex;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.28);
    font-size:13px;
}
.stsp-card{
    background:#fff;
    border:1px solid var(--stsp-border);
    border-radius:22px;
    padding:22px;
    box-shadow:0 12px 34px rgba(18,70,78,.08);
}
.stsp-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.stsp-school-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-bottom:18px;
    padding-bottom:18px;
    border-bottom:1px solid var(--stsp-border);
}
.stsp-wrap label{
    display:block;
    font-weight:700;
    font-size:14px;
    color:#24424b;
}
.stsp-wrap input,
.stsp-wrap select,
.stsp-wrap textarea{
    width:100%;
    box-sizing:border-box;
    margin-top:8px;
    padding:12px 13px;
    border:1px solid #cfdcda;
    border-radius:14px;
    background:#fff;
    color:#182f36;
    font-size:15px;
    outline:none;
    transition:.2s;
}
.stsp-wrap input:focus,
.stsp-wrap select:focus,
.stsp-wrap textarea:focus{
    border-color:var(--stsp-secondary);
    box-shadow:0 0 0 4px rgba(31,167,155,.12);
}
.stsp-full{
    margin-top:16px;
}
.stsp-evidence-upload-grid{
    margin-top:16px;
}
.stsp-upload-field>small{
    color:var(--stsp-muted);
    font-size:11px;
    font-weight:400;
}
.stsp-upload-field input[type="file"]{
    padding:8px;
    background:#f8fbfb;
}
.stsp-upload-field input[type="file"]::file-selector-button{
    margin-left:9px;
    padding:8px 12px;
    border:0;
    border-radius:9px;
    color:#fff;
    background:linear-gradient(135deg,var(--stsp-primary),var(--stsp-secondary));
    font-family:inherit;
    font-weight:700;
    cursor:pointer;
}
.stsp-upload-help{
    margin:8px 0 0;
    color:var(--stsp-muted);
    font-size:12px;
    line-height:1.6;
}
.stsp-actions,
.stsp-print-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}
.stsp-btn{
    border:0;
    border-radius:14px;
    padding:12px 18px;
    cursor:pointer;
    font-weight:800;
    font-size:15px;
}
.stsp-primary{
    background:linear-gradient(135deg,var(--stsp-primary),var(--stsp-secondary));
    color:#fff;
}
.stsp-secondary{
    background:#edf6f5;
    color:#176b87;
}
.stsp-hidden{
    display:none;
}
.stsp-date-control{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    min-height:47px;
    box-sizing:border-box;
    margin-top:8px;
    padding:11px 13px;
    overflow:hidden;
    border:1px solid #cfdcda;
    border-radius:14px;
    background:#fff;
    transition:.2s;
}
.stsp-date-field:focus-within .stsp-date-control{
    border-color:var(--stsp-secondary);
    box-shadow:0 0 0 4px rgba(31,167,155,.12);
}
.stsp-date-hijri{
    display:block;
    flex:1;
    min-width:0;
    color:#182f36;
    font-size:15px;
    font-weight:700;
}
.stsp-date-calendar-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:8px;
    color:#fff;
    background:linear-gradient(135deg,var(--stsp-primary),var(--stsp-secondary));
}
.stsp-date-calendar-icon svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.stsp-date-native{
    position:absolute !important;
    inset:0 !important;
    z-index:2;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    opacity:0;
    cursor:pointer;
}
.stsp-date-help{
    display:block;
    margin-top:6px;
    color:var(--stsp-muted);
    font-size:11px;
    font-weight:400;
}
.stsp-report{
    --stsp-primary:#176b87;
    --stsp-secondary:#1fa79b;
    --stsp-gold:#c8a24a;
    --stsp-dark:#16323d;
    --stsp-soft:#f5faf9;
    --stsp-border:#dbe7e5;
    --stsp-muted:#60747b;
    margin-top:22px;
    background:#fff;
    border:1px solid var(--stsp-border);
    border-radius:24px;
    padding:28px;
    box-shadow:0 12px 34px rgba(18,70,78,.08);
}
.stsp-report-masthead{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    align-items:center;
    gap:28px;
    padding:7px 4px 17px;
    margin-bottom:16px;
    border-bottom:2px solid var(--stsp-secondary);
}
.stsp-report-brand{
    display:flex;
    align-items:center;
    min-width:0;
}
.stsp-report-brand>div{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.stsp-report-brand strong,
.stsp-report-brand small{
    display:block;
}
.stsp-report-brand strong{
    color:var(--stsp-dark);
    font-size:17px;
    line-height:1.35;
}
.stsp-report-brand small{
    color:var(--stsp-muted);
    font-size:13px;
    line-height:1.5;
}
.stsp-report-ministry-prominent{
    justify-content:flex-start;
    text-align:right;
    gap:15px;
}
.stsp-report-brand-symbol{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}
.stsp-report-ministry-logo{
    width:82px;
    height:68px;
    flex-basis:82px;
}
.stsp-report-ministry-logo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}
.stsp-report-app-brand{
    justify-content:flex-end;
    flex-direction:row-reverse;
    text-align:right;
    gap:15px;
    padding-inline-start:25px;
    border-inline-start:1px solid #b9d2d7;
}
.stsp-report-app-icon{
    width:66px;
    height:66px;
    flex-basis:66px;
    border-radius:16px;
    color:var(--stsp-primary);
    background:#eaf7f4;
}
.stsp-report-app-icon svg{
    width:39px;
    height:39px;
    fill:none;
    stroke:currentColor;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.stsp-report-app-brand strong{
    color:var(--stsp-dark);
    font-size:25px;
}
.stsp-report-app-brand small{
    color:#147b71;
    font-size:14px;
}
.stsp-report-main-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    padding:17px 20px;
    margin-bottom:16px;
    border:1px solid #cfe4e2;
    border-radius:18px;
    background:linear-gradient(135deg,#f4fbfa,#edf6fb);
}
.stsp-report-kicker{
    display:inline-flex;
    padding:4px 10px;
    border-radius:999px;
    color:#765d1a;
    background:#fff8df;
    border:1px solid #ead99a;
    font-weight:800;
    font-size:12px;
}
.stsp-report h1{
    margin:7px 0 4px;
    font-size:26px;
    color:var(--stsp-primary);
}
.stsp-report-main-header p{
    margin:0;
    color:var(--stsp-muted);
    line-height:1.7;
}
.stsp-report-date-value{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:125px;
    min-height:42px;
    padding:7px 12px;
    border-radius:11px;
    color:#fff;
    background:linear-gradient(135deg,var(--stsp-primary),var(--stsp-secondary));
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}
.stsp-info-table{
    width:100%;
    border-collapse:collapse;
    margin:0 0 14px;
    overflow:hidden;
    border-radius:14px;
    font-size:14px;
}
.stsp-info-table th,
.stsp-info-table td{
    border:1px solid #dce8e6;
    padding:10px 11px;
    vertical-align:top;
}
.stsp-info-table th{
    width:18%;
    background:#f1f8f7;
    color:#176b87;
    text-align:right;
}
.stsp-report-sections{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
}
.stsp-section{
    border:1px solid #dce8e6;
    border-radius:16px;
    padding:14px 15px;
    margin:0;
    background:#fff;
    page-break-inside:avoid;
    break-inside:avoid;
}
.stsp-section-wide{
    grid-column:1/-1;
}
.stsp-section h3{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 8px;
    color:#176b87;
    font-size:17px;
}
.stsp-section h3::before{
    content:"";
    width:6px;
    height:21px;
    border-radius:6px;
    background:linear-gradient(180deg,var(--stsp-secondary),var(--stsp-primary));
}
.stsp-section ul,
.stsp-section ol{
    margin:0;
    padding-right:22px;
    line-height:1.75;
}
.stsp-section p{
    line-height:1.75;
    margin:0;
}
.stsp-mini-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.stsp-pill{
    background:#f5faf9;
    border:1px solid #dce8e6;
    border-radius:13px;
    padding:11px;
}
.stsp-pill strong{
    display:block;
    color:#176b87;
    margin-bottom:5px;
}
.stsp-evidence-images{
    display:grid;
    gap:12px;
    align-items:stretch;
}
.stsp-evidence-count-1{
    grid-template-columns:minmax(0,620px);
    justify-content:center;
}
.stsp-evidence-count-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.stsp-evidence-frame{
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    height:260px;
    margin:0;
    padding:8px;
    overflow:hidden;
    border:1.5px solid #a8ceca;
    border-radius:14px;
    background:linear-gradient(145deg,#fff,#f4faf9);
    box-shadow:inset 0 0 0 4px #fff,0 5px 15px rgba(23,107,135,.08);
}
.stsp-evidence-frame img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:8px;
}
.stsp-signatures{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:16px;
}
.stsp-signatures div{
    border:1px dashed #aabfbb;
    border-radius:14px;
    padding:12px;
    min-height:70px;
}
.stsp-signatures strong{
    display:block;
    color:#176b87;
}
.stsp-signatures small{
    display:block;
    min-height:18px;
    margin-top:3px;
    color:var(--stsp-dark);
    font-size:12px;
}
.stsp-signatures span{
    display:block;
    border-bottom:1px solid #667;
    margin-top:28px;
}

@media (max-width:980px){
    .stsp-school-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:700px){
    .stsp-grid,
    .stsp-report-sections{
        grid-template-columns:1fr;
    }
    .stsp-section-wide{
        grid-column:auto;
    }
    .stsp-mini-grid,
    .stsp-signatures{
        grid-template-columns:1fr;
    }
    .stsp-report{
        padding:15px;
        border-radius:18px;
    }
    .stsp-hero h2{
        font-size:23px;
    }
    .stsp-report-masthead{
        grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
        gap:10px;
        padding:5px 0 12px;
    }
    .stsp-report-ministry-prominent{
        gap:7px;
    }
    .stsp-report-ministry-logo{
        width:52px;
        height:46px;
        flex-basis:52px;
    }
    .stsp-report-app-brand{
        gap:7px;
        padding-inline-start:9px;
    }
    .stsp-report-app-icon{
        width:43px;
        height:43px;
        flex-basis:43px;
        border-radius:11px;
    }
    .stsp-report-app-icon svg{
        width:26px;
        height:26px;
    }
    .stsp-report-app-brand strong{
        font-size:15px;
        line-height:1.25;
    }
    .stsp-report-app-brand small{
        font-size:8.5px;
        line-height:1.3;
    }
    .stsp-report-ministry-prominent strong{
        font-size:10px;
        line-height:1.25;
    }
    .stsp-report-ministry-prominent small{
        font-size:7.2px;
        line-height:1.25;
    }
    .stsp-report-main-header{
        grid-template-columns:1fr;
        gap:10px;
        padding:14px;
    }
    .stsp-report-date-value{
        justify-self:start;
        min-width:0;
    }
    .stsp-report h1{
        font-size:21px;
    }
    .stsp-info-table{
        font-size:12px;
    }
    .stsp-info-table th,
    .stsp-info-table td{
        padding:8px 6px;
    }
    .stsp-evidence-frame{
        height:170px;
        padding:5px;
        border-radius:10px;
    }
}

@media print{
    html,
    body{
        background:#fff !important;
    }
    body.stsp-print-mode{
        margin:0 !important;
        padding:0 !important;
        background:#fff !important;
    }
    body.stsp-print-mode>*:not(.stsp-print-clone){
        display:none !important;
    }
    .stsp-print-clone{
        display:block !important;
        position:static !important;
        direction:rtl !important;
        box-sizing:border-box !important;
        margin:0 !important;
        width:100% !important;
        max-width:none !important;
        border:0 !important;
        box-shadow:none !important;
        border-radius:0 !important;
        padding:0 !important;
        color:#17324d !important;
        background:#fff !important;
        font-family:Arial,Tahoma,sans-serif !important;
        font-size:11.3px !important;
        line-height:1.5 !important;
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
    }
    .stsp-print-clone .stsp-no-print,
    .stsp-print-clone .stsp-print-actions,
    .stsp-print-clone button{
        display:none !important;
    }
    .stsp-print-clone .stsp-report-masthead{
        display:grid !important;
        grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) !important;
        gap:15px !important;
        align-items:center !important;
        padding:2px 0 9px !important;
        margin:0 0 7px !important;
        border-bottom:2px solid var(--stsp-secondary) !important;
        break-inside:avoid !important;
    }
    .stsp-print-clone .stsp-report-ministry-prominent{
        display:flex !important;
        flex-direction:row !important;
        justify-content:flex-start !important;
        text-align:right !important;
        gap:8px !important;
    }
    .stsp-print-clone .stsp-report-ministry-logo{
        width:54px !important;
        height:47px !important;
        flex:0 0 54px !important;
    }
    .stsp-print-clone .stsp-report-app-brand{
        display:flex !important;
        flex-direction:row-reverse !important;
        justify-content:flex-end !important;
        text-align:right !important;
        gap:8px !important;
        padding-inline-start:12px !important;
        border-inline-start:1px solid #b9d2d7 !important;
    }
    .stsp-print-clone .stsp-report-app-icon{
        width:43px !important;
        height:43px !important;
        flex:0 0 43px !important;
        border-radius:11px !important;
    }
    .stsp-print-clone .stsp-report-app-icon svg{
        width:26px !important;
        height:26px !important;
    }
    .stsp-print-clone .stsp-report-app-brand strong{
        font-size:17px !important;
        line-height:1.25 !important;
    }
    .stsp-print-clone .stsp-report-app-brand small{
        font-size:9.5px !important;
        line-height:1.3 !important;
    }
    .stsp-print-clone .stsp-report-ministry-prominent strong{
        font-size:11.5px !important;
        line-height:1.25 !important;
    }
    .stsp-print-clone .stsp-report-ministry-prominent small{
        font-size:9px !important;
        line-height:1.3 !important;
    }
    .stsp-print-clone .stsp-report-main-header{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        gap:10px !important;
        padding:8px 10px !important;
        margin:0 0 7px !important;
        border-radius:10px !important;
        break-inside:avoid !important;
    }
    .stsp-print-clone .stsp-report-kicker{
        padding:2px 6px !important;
        font-size:8px !important;
    }
    .stsp-print-clone h1{
        margin:3px 0 1px !important;
        font-size:18.5px !important;
    }
    .stsp-print-clone .stsp-report-main-header p{
        font-size:8.5px !important;
        line-height:1.4 !important;
    }
    .stsp-print-clone .stsp-report-date-value{
        min-width:88px !important;
        min-height:28px !important;
        padding:4px 7px !important;
        border-radius:7px !important;
        font-size:9.5px !important;
    }
    .stsp-print-clone .stsp-info-table{
        width:100% !important;
        margin:0 0 7px !important;
        font-size:9.2px !important;
        break-inside:avoid !important;
    }
    .stsp-print-clone .stsp-info-table th,
    .stsp-print-clone .stsp-info-table td{
        padding:4px 5px !important;
    }
    .stsp-print-clone .stsp-info-table th{
        width:17% !important;
    }
    .stsp-print-clone .stsp-report-sections{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:5px !important;
    }
    .stsp-print-clone .stsp-section-wide{
        grid-column:1/-1 !important;
    }
    .stsp-print-clone .stsp-section{
        padding:6px 7px !important;
        margin:0 !important;
        border-radius:8px !important;
        break-inside:avoid !important;
        page-break-inside:avoid !important;
    }
    .stsp-print-clone .stsp-section h3{
        gap:4px !important;
        margin:0 0 3px !important;
        font-size:12px !important;
    }
    .stsp-print-clone .stsp-section h3::before{
        width:3px !important;
        height:13px !important;
    }
    .stsp-print-clone .stsp-section p,
    .stsp-print-clone .stsp-section ul,
    .stsp-print-clone .stsp-section ol{
        font-size:9.1px !important;
        line-height:1.5 !important;
    }
    .stsp-print-clone .stsp-section ul,
    .stsp-print-clone .stsp-section ol{
        padding-right:14px !important;
    }
    .stsp-print-clone .stsp-mini-grid{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:5px !important;
    }
    .stsp-print-clone .stsp-pill{
        padding:5px !important;
        border-radius:7px !important;
    }
    .stsp-print-clone .stsp-pill strong{
        margin-bottom:2px !important;
        font-size:9.2px !important;
    }
    .stsp-print-clone .stsp-evidence-images{
        display:grid !important;
        gap:6px !important;
        align-items:stretch !important;
    }
    .stsp-print-clone .stsp-evidence-count-1{
        grid-template-columns:minmax(0,58%) !important;
        justify-content:center !important;
    }
    .stsp-print-clone .stsp-evidence-count-2{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .stsp-print-clone .stsp-evidence-frame{
        height:112px !important;
        margin:0 !important;
        padding:4px !important;
        border-width:1.2px !important;
        border-radius:7px !important;
        box-shadow:inset 0 0 0 2px #fff !important;
        break-inside:avoid !important;
    }
    .stsp-print-clone .stsp-evidence-frame img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        border-radius:4px !important;
    }
    .stsp-print-clone .stsp-signatures{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:6px !important;
        margin-top:7px !important;
        break-inside:avoid !important;
    }
    .stsp-print-clone .stsp-signatures div{
        min-height:38px !important;
        padding:5px 7px !important;
        border-radius:7px !important;
    }
    .stsp-print-clone .stsp-signatures strong{
        font-size:9px !important;
    }
    .stsp-print-clone .stsp-signatures small{
        min-height:11px !important;
        margin-top:1px !important;
        font-size:8.5px !important;
    }
    .stsp-print-clone .stsp-signatures span{
        margin-top:16px !important;
    }
    .stsp-print-clone.stsp-print-mobile,
    .stsp-print-clone.stsp-print-desktop{
        width:194mm !important;
        min-width:194mm !important;
        max-width:194mm !important;
        margin:0 auto !important;
    }
    .stsp-print-clone.stsp-print-mobile{
        font-size:10.8px !important;
    }
    .stsp-print-clone.stsp-print-mobile .stsp-report-masthead{
        padding-bottom:7px !important;
        margin-bottom:5px !important;
    }
    .stsp-print-clone.stsp-print-mobile .stsp-report-main-header{
        padding:7px 9px !important;
        margin-bottom:5px !important;
    }
    .stsp-print-clone.stsp-print-mobile .stsp-info-table{
        margin-bottom:5px !important;
    }
    .stsp-print-clone.stsp-print-mobile .stsp-info-table th,
    .stsp-print-clone.stsp-print-mobile .stsp-info-table td{
        padding:3px 4px !important;
    }
    .stsp-print-clone.stsp-print-mobile .stsp-report-sections{
        gap:4px !important;
    }
    .stsp-print-clone.stsp-print-mobile .stsp-section{
        padding:5px 7px !important;
    }
    .stsp-print-clone.stsp-print-mobile .stsp-section p,
    .stsp-print-clone.stsp-print-mobile .stsp-section ul,
    .stsp-print-clone.stsp-print-mobile .stsp-section ol{
        line-height:1.42 !important;
    }
    .stsp-print-clone.stsp-print-mobile .stsp-evidence-frame{
        height:94px !important;
    }
    .stsp-print-clone.stsp-print-mobile .stsp-signatures{
        margin-top:4px !important;
    }
    .stsp-print-clone.stsp-print-mobile .stsp-signatures div{
        min-height:32px !important;
        padding:3px 6px !important;
    }
    .stsp-print-clone.stsp-print-mobile .stsp-signatures span{
        margin-top:11px !important;
    }
    .stsp-print-clone tr,
    .stsp-print-clone .stsp-report-masthead,
    .stsp-print-clone .stsp-report-main-header,
    .stsp-print-clone .stsp-section,
    .stsp-print-clone .stsp-signatures{
        break-inside:avoid !important;
        page-break-inside:avoid !important;
    }
    @page{
        size:A4 portrait;
        margin:8mm;
    }
}