/* ============================================================
   منصة الماهر التعليمية - الأنماط الأساسية
   الخط: Almarai (عناوين) + Tajawal (نصوص) — من Google Fonts
   الألوان: مشتقة من شعار المنصة (كحلي / تركواز / ذهبي)
   ============================================================ */

:root{
    --navy-deep:   #0b2f52;
    --navy-mid:    #123a63;
    --teal:        #1a94a8;
    --teal-light:  #57c2d1;
    --gold:        #d9a441;
    --gold-light:  #f0c877;
    --paper:       #eef2f5;
    --paper-raised:#ffffff;
    --ink:         #14213a;
    --slate:       #5b6b7c;
    --line:        #d8e0e7;
    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 22px;
    --shadow-card: 0 1px 2px rgba(11,47,82,.06), 0 6px 20px rgba(11,47,82,.07);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Tajawal', sans-serif;
    line-height:1.8;
    direction:rtl;
}

h1,h2,h3,h4{
    font-family:'Almarai', sans-serif;
    color:var(--navy-deep);
    margin:0 0 .5em;
    line-height:1.45;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{
    outline:3px solid var(--gold);
    outline-offset:2px;
}

.container{
    max-width:1180px;
    margin:0 auto;
    padding:0 24px;
}

/* ---------------- الهيدر ---------------- */
.site-header{
    position:sticky;
    top:0;
    z-index:200;
    background:var(--navy-deep);
    background-image:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
    color:#fff;
    padding:18px 0;
}
.site-header .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.brand{
    display:flex;
    align-items:center;
    gap:14px;
}
.brand img{
    height:58px;
    width:auto;
    background:#fff;
    border-radius:12px;
    padding:4px;
}
.brand-text .platform-name{
    font-family:'Almarai', sans-serif;
    font-weight:800;
    font-size:1.4rem;
    color:#fff;
}
.brand-text .platform-tag{
    font-size:.85rem;
    color:var(--gold-light);
    margin-top:2px;
}
.header-nav{
    display:flex;
    gap:28px;
    font-size:.95rem;
}
.header-nav a{ opacity:.85; transition:opacity .15s; }
.header-nav a:hover{ opacity:1; }

/* ---------------- مربع البحث في الهيدر ---------------- */
.header-search{
    position:relative;
    flex:1 1 320px;
    max-width:360px;
    display:flex;
    align-items:center;
}
.site-search-input{
    width:100%;
    padding:10px 42px 10px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.12);
    color:#fff;
    font-family:'Tajawal', sans-serif;
    font-size:.9rem;
}
.site-search-input::placeholder{ color:rgba(255,255,255,.65); }
.site-search-input:focus{
    outline:none;
    background:rgba(255,255,255,.2);
    border-color:var(--gold-light);
}
.site-search-btn{
    position:absolute;
    left:8px;
    background:none;
    border:none;
    cursor:pointer;
    font-size:1rem;
    line-height:1;
    color:#fff;
    opacity:.85;
}
.site-search-btn:hover{ opacity:1; }
.site-search-results{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    left:0;
    background:#fff;
    border-radius:10px;
    box-shadow:0 12px 28px rgba(0,0,0,.22);
    overflow:hidden;
    z-index:50;
}
.site-search-results.show{ display:block; }
.site-search-result-item{
    display:block;
    width:100%;
    text-align:right;
    padding:10px 14px;
    background:#fff;
    border:none;
    border-bottom:1px solid var(--paper);
    cursor:pointer;
    font-family:'Tajawal', sans-serif;
    font-size:.88rem;
    color:var(--navy-deep);
}
.site-search-result-item:last-child{ border-bottom:none; }
.site-search-result-item:hover{ background:var(--paper); }
.site-search-result-item .res-code{ color:var(--slate); font-size:.8rem; margin-right:6px; }
.site-search-result-empty{
    padding:12px 14px;
    font-size:.85rem;
    color:var(--slate);
}
.course-card.search-highlight{
    animation:searchPulse 1.6s ease;
}
@keyframes searchPulse{
    0%{ box-shadow:0 0 0 0 rgba(20,110,110,.45); }
    100%{ box-shadow:0 0 0 14px rgba(20,110,110,0); }
}
@media (max-width: 900px){
    .header-search{ order:3; flex-basis:100%; max-width:none; margin-top:10px; }
    .site-header .row{ flex-wrap:wrap; }
}

/* ---------------- نافذة "حول المنصة" ---------------- */
.about-modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(11,47,82,.55);
    z-index:300;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.about-modal-overlay.show{ display:flex; }
.about-modal{
    background:#fff;
    border-radius:var(--radius-l);
    padding:30px 26px 26px;
    max-width:420px;
    width:100%;
    position:relative;
    box-shadow:0 20px 50px rgba(0,0,0,.32);
    text-align:center;
}
.about-modal h3{ margin-bottom:12px; }
.about-modal p{
    color:var(--ink);
    line-height:1.9;
    margin:0;
    font-size:.98rem;
}
.about-modal-close{
    position:absolute;
    top:10px;
    left:14px;
    background:none;
    border:none;
    font-size:1.5rem;
    color:var(--slate);
    cursor:pointer;
    line-height:1;
}
.about-modal-close:hover{ color:var(--navy-deep); }

/* ---------------- شريط التبويبات ---------------- */
.tabs-bar{
    background:var(--paper-raised);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:20;
}
.tabs-list{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:6px 0;
}
.tab-btn{
    background:none;
    border:none;
    padding:14px 20px;
    font-size:1rem;
    font-weight:700;
    font-family:'Almarai', sans-serif;
    color:var(--slate);
    border-bottom:3px solid transparent;
    white-space:nowrap;
    transition:color .15s, border-color .15s;
}
.tab-btn:hover{ color:var(--navy-deep); }
.tab-btn.active{
    color:var(--navy-deep);
    border-bottom-color:var(--gold);
}
.tab-count{
    display:inline-block;
    margin-inline-start:6px;
    font-size:.75rem;
    background:var(--paper);
    color:var(--slate);
    border-radius:99px;
    padding:1px 8px;
}
.tab-btn.active .tab-count{
    background:var(--gold);
    color:var(--navy-deep);
}

/* شريط التخصصات (المستوى الأول) — مظهر أغمق ليتمايز عن أنواع المتطلبات */
.specializations-bar{
    background:var(--navy-deep);
    border-bottom:none;
    position:sticky;
    top:94px;
    z-index:21;
}
.specializations-bar .tab-btn{
    color:rgba(255,255,255,.75);
    border-bottom-width:3px;
}
.specializations-bar .tab-btn:hover{ color:#fff; }
.specializations-bar .tab-btn.active{
    color:#fff;
    border-bottom-color:var(--gold);
}
.specializations-bar .tab-count{
    background:rgba(255,255,255,.12);
    color:#fff;
}
.specializations-bar .tab-btn.active .tab-count{
    background:var(--gold);
    color:var(--navy-deep);
}

/* شريط أنواع المتطلبات (المستوى الثاني) — داخل كل تخصص، غير ملتصق بالأعلى */
.reqtype-bar{
    position:static;
    background:none;
    border-bottom:1px solid var(--line);
    margin-bottom:26px;
}
.reqtype-bar .tabs-list{ padding-top:14px; }

/* ---------------- قسم المحتوى ---------------- */
.content-section{ padding:36px 0 64px; }
.section-heading{
    margin-bottom:22px;
}
.section-heading h2{ font-size:1.5rem; margin-bottom:4px; }
.section-heading p{ color:var(--slate); margin:0; }

.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.course-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.course-card{
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    box-shadow:var(--shadow-card);
    overflow:hidden;
}
.course-head{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 22px;
    background:none;
    border:none;
    text-align:right;
}
.course-head-info{
    display:flex;
    align-items:center;
    gap:16px;
}
.course-icon{
    flex:none;
    width:46px;
    height:46px;
    border-radius:var(--radius-s);
    background:linear-gradient(135deg, var(--teal) 0%, var(--navy-mid) 100%);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Almarai', sans-serif;
    font-weight:800;
}
.course-title{
    font-family:'Almarai', sans-serif;
    font-weight:800;
    font-size:1.08rem;
    color:var(--navy-deep);
}
.course-meta{
    font-size:.85rem;
    color:var(--slate);
    margin-top:2px;
}
.course-chevron{
    flex:none;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--paper);
    color:var(--navy-deep);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .2s ease;
}
.course-card.open .course-chevron{ transform:rotate(180deg); }

.unit-list{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    border-top:1px solid var(--line);
}
.course-card.open .unit-list{ max-height:600px; }

.unit-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 22px;
    border-top:1px solid var(--line);
    font-size:.96rem;
}
.unit-row:first-child{ border-top:none; }
.unit-row-info{
    display:flex;
    align-items:center;
    gap:12px;
}
.unit-dot{
    flex:none;
    width:10px; height:10px;
    border-radius:50%;
    background:var(--line);
}
.unit-row.is-ready .unit-dot{ background:var(--teal); }
.unit-row.is-ready a{
    color:var(--navy-deep);
    font-weight:700;
}
.unit-row.is-ready a:hover{ color:var(--teal); }
.unit-row.is-locked{ color:var(--slate); }
.badge-soon{
    font-size:.75rem;
    background:var(--paper);
    color:var(--slate);
    border-radius:99px;
    padding:3px 10px;
    border:1px solid var(--line);
}
.badge-ready{
    font-size:.75rem;
    background:#e6f6f3;
    color:#0f7a5c;
    border-radius:99px;
    padding:3px 10px;
}

.empty-state{
    padding:60px 20px;
    text-align:center;
    color:var(--slate);
    background:var(--paper-raised);
    border:1px dashed var(--line);
    border-radius:var(--radius-m);
}
.empty-state h3{ color:var(--navy-deep); margin-bottom:6px; }

/* ---------------- فوتر ---------------- */
.site-footer{
    background:var(--navy-deep);
    color:#cdd8e2;
    padding:26px 0;
    font-size:.9rem;
    text-align:center;
}
.site-footer strong{ color:#fff; }
.visitor-counter{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-right:14px;
    padding:3px 12px;
    border-radius:20px;
    background:rgba(255,255,255,.1);
    font-size:.82rem;
    color:rgba(255,255,255,.75);
}
.visitor-counter b{ color:#fff; font-weight:700; }
@media (max-width: 480px){
    .visitor-counter{ display:block; width:fit-content; margin:8px auto 0; }
}

/* ============================================================
   صفحة الوحدة (unit1.php)
   ============================================================ */
.unit-header{
    background:linear-gradient(135deg, var(--navy-deep) 0%, var(--teal) 130%);
    color:#fff;
    padding:34px 0 30px;
}
.unit-header .breadcrumb{
    font-size:.85rem;
    opacity:.85;
    margin-bottom:10px;
}
.unit-header .breadcrumb a{ text-decoration:underline; }
.unit-header h1{ color:#fff; font-size:1.7rem; margin-bottom:6px; }
.unit-header .unit-sub{ color:var(--gold-light); font-size:1rem; }

.unit-layout{
    display:grid;
    grid-template-columns: 260px minmax(0, 1fr);  /* أول عمود = يمين مع dir:rtl */
    gap:34px;
    align-items:start;
    padding:34px 0 90px;
}
@media (max-width: 880px){
    .unit-layout{ grid-template-columns: minmax(0, 1fr); }
    .unit-toc{ position:static !important; order:-1; }
}

.unit-toc{
    position:sticky;
    top:70px;
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:18px;
    box-shadow:var(--shadow-card);
}
.unit-toc h4{
    font-size:.85rem;
    color:var(--slate);
    margin-bottom:12px;
}
.unit-toc ol{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-direction:column;
    gap:4px;
    counter-reset:toc;
}
.unit-toc a{
    counter-increment:toc;
    display:flex;
    gap:10px;
    align-items:center;
    padding:9px 10px;
    border-radius:var(--radius-s);
    font-size:.92rem;
    color:var(--ink);
    transition:background .15s,color .15s;
}
.unit-toc a::before{
    content: counter(toc);
    flex:none;
    width:22px; height:22px;
    border-radius:50%;
    background:var(--paper);
    color:var(--navy-deep);
    font-size:.75rem;
    font-weight:700;
    display:flex; align-items:center; justify-content:center;
}
.unit-toc a:hover{ background:var(--paper); }
.unit-toc a.active{
    background:var(--navy-deep);
    color:#fff;
}
.unit-toc a.active::before{
    background:var(--gold);
    color:var(--navy-deep);
}

.unit-main section{
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:var(--radius-l);
    padding:30px 32px;
    margin-bottom:26px;
    box-shadow:var(--shadow-card);
    scroll-margin-top:80px;
}
.unit-main section h2{
    font-size:1.3rem;
    padding-bottom:12px;
    border-bottom:2px solid var(--paper);
    margin-bottom:18px;
}
.unit-main p{ color:#293a52; }
.unit-main .lead{
    font-size:1.05rem;
    color:var(--navy-deep);
}

/* جدول المقارنة */
.compare-table{
    width:100%;
    border-collapse:collapse;
    margin-top:8px;
    font-size:.95rem;
}
.compare-table th, .compare-table td{
    border:1px solid var(--line);
    padding:12px 14px;
    text-align:right;
    vertical-align:top;
}
.compare-table thead th{
    background:var(--navy-deep);
    color:#fff;
    font-family:'Almarai', sans-serif;
}
.compare-table tbody tr:nth-child(even){ background:var(--paper); }

/* الخط الزمني */
.timeline{
    position:relative;
    margin-top:10px;
    padding-inline-start:0;
}
.timeline::before{
    content:"";
    position:absolute;
    inset-inline-end:19px;
    top:6px; bottom:6px;
    width:2px;
    background:var(--line);
}
.timeline-item{
    position:relative;
    padding-inline-end:52px;
    padding-bottom:26px;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-year{
    position:absolute;
    inset-inline-end:0;
    top:0;
    width:40px; height:40px;
    border-radius:50%;
    background:var(--teal);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:.7rem;
    font-weight:800;
    font-family:'Almarai', sans-serif;
    text-align:center;
    box-shadow:0 0 0 4px var(--paper-raised);
}
.timeline-item h4{ font-size:1rem; margin-bottom:4px; }
.timeline-item p{ margin:0; font-size:.92rem; }

/* بطاقات الفروع (أكورديون) */
.branch-card{
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    margin-bottom:10px;
    overflow:hidden;
}
.branch-head{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--paper);
    border:none;
    padding:14px 18px;
    font-family:'Almarai', sans-serif;
    font-weight:700;
    color:var(--navy-deep);
}
.branch-head .plus{
    transition:transform .2s;
    color:var(--teal);
    font-size:1.2rem;
}
.branch-card.open .branch-head .plus{ transform:rotate(45deg); }
.branch-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
}
.branch-card.open .branch-body{ max-height:640px; }
.branch-body-inner{ padding:16px 18px; font-size:.94rem; color:#293a52; }

/* ---------------- أشكال توضيحية (مخططات UML) ---------------- */
.diagram-figure{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:14px;
    margin-bottom:4px;
}
.diagram-figure img{
    width:100%;
    height:auto;
    max-height:340px;
    object-fit:contain;
}
.diagram-caption{
    text-align:center;
    font-size:.82rem;
    color:var(--slate);
    margin-top:6px;
}

/* ---------------- مقاطع أكواد PHP ---------------- */
.code-block{
    background:var(--navy-deep);
    color:#e7eef5;
    border-radius:var(--radius-m);
    padding:16px 18px;
    overflow-x:auto;
    max-width:100%;
    box-sizing:border-box;
    font-family:'Courier New', Courier, monospace;
    font-size:.85rem;
    line-height:1.75;
    direction:ltr;
    text-align:left;
    margin:14px 0;
    unicode-bidi:plaintext;
}
.code-block code{ white-space:pre; }
.unit-main{ min-width:0; }
.code-label{
    display:inline-block;
    font-size:.78rem;
    color:var(--slate);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:6px;
    padding:2px 10px;
    margin-bottom:-6px;
}

/* المسرد - بطاقات قلب */
.glossary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
    gap:16px;
    margin-top:10px;
}
.flip-card{
    perspective:1000px;
    height:140px;
}
.flip-card-inner{
    position:relative;
    width:100%; height:100%;
    text-align:center;
    transition:transform .5s;
    transform-style:preserve-3d;
    cursor:pointer;
}
.flip-card.flipped .flip-card-inner{ transform:rotateY(180deg); }
.flip-face{
    position:absolute; inset:0;
    backface-visibility:hidden;
    border-radius:var(--radius-s);
    display:flex; align-items:center; justify-content:center;
    padding:14px;
    font-size:.92rem;
}
.flip-front{
    background:linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
    color:#fff;
    font-family:'Almarai', sans-serif;
    font-weight:800;
}
.flip-back{
    background:var(--gold-light);
    color:var(--navy-deep);
    transform:rotateY(180deg);
    font-size:.85rem;
}
.glossary-hint{
    font-size:.8rem;
    color:var(--slate);
    margin-top:8px;
}

/* الاختبار */
.quiz-group-title{
    font-family:'Almarai', sans-serif;
    color:var(--teal);
    font-size:.95rem;
    margin:22px 0 12px;
}
.quiz-group-title:first-child{ margin-top:0; }
.quiz-q{
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    padding:16px 18px;
    margin-bottom:12px;
}
.quiz-q p.q-text{
    font-weight:700;
    color:var(--ink);
    margin:0 0 10px;
}
.quiz-options{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.quiz-options label{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border-radius:var(--radius-s);
    border:1px solid var(--line);
    font-size:.92rem;
    transition:border-color .15s, background .15s;
}
.quiz-options label:hover{ border-color:var(--teal); }
.quiz-options input{ accent-color:var(--teal); }
.quiz-q.correct{ border-color:#2ea36c; background:#f1faf5; }
.quiz-q.incorrect{ border-color:#d9534f; background:#fdf3f2; }
.quiz-feedback{
    margin-top:8px;
    font-size:.85rem;
    font-weight:700;
}
.quiz-feedback.ok{ color:#1f8a54; }
.quiz-feedback.bad{ color:#c0392b; }

.essay-box textarea{
    width:100%;
    min-height:100px;
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    padding:12px;
    font-family:inherit;
    font-size:.92rem;
    resize:vertical;
}
.essay-hint-btn{
    margin-top:8px;
    background:none;
    border:1px dashed var(--teal);
    color:var(--teal);
    padding:6px 14px;
    border-radius:99px;
    font-size:.82rem;
}
.essay-model-answer{
    display:none;
    margin-top:10px;
    background:var(--paper);
    border-radius:var(--radius-s);
    padding:12px 14px;
    font-size:.88rem;
    color:#293a52;
}
.essay-model-answer.shown{ display:block; }

.quiz-submit{
    margin-top:20px;
    background:var(--navy-deep);
    color:#fff;
    border:none;
    padding:13px 30px;
    border-radius:99px;
    font-family:'Almarai', sans-serif;
    font-weight:700;
    font-size:1rem;
}
.quiz-submit:hover{ background:var(--teal); }

.quiz-result{
    margin-top:18px;
    padding:16px 18px;
    border-radius:var(--radius-s);
    background:var(--paper);
    font-family:'Almarai', sans-serif;
    font-weight:700;
    color:var(--navy-deep);
    display:none;
}
.quiz-result.shown{ display:block; }