/*
  منصة المعلم حمود — نظام التصميم "دفتر المختبر"
  ─────────────────────────────────────────────
  فكرة الهوية: مختبر علوم أنيق. أخضر مخبري داكن + ذهبي نحاسي للتميز،
  خلفية ورقية فاتحة، وخط Mono للأرقام والرموز (كأرقام القياس في الدفتر).
*/

/* ========== 1) المتغيرات ========== */
:root {
    --bg:           #f3f5f0;
    --surface:      #ffffff;
    --surface-2:    #eef2ec;
    --ink:          #132420;
    --ink-soft:     #57665d;
    --ink-faint:    #8a988f;
    --line:         #dce3da;

    --primary:      #0c3b2e;
    --primary-dark: #082720;
    --primary-light:#146c52;
    --primary-tint: #e4ede8;

    --gold:         #b3872b;
    --gold-tint:    #f4ead0;

    --danger:       #b3392c;
    --danger-tint:  #fbe8e4;
    --success:      #1c7a4f;
    --success-tint: #e3f3ea;

    --radius-sm:    8px;
    --radius:       14px;
    --radius-lg:    22px;
    --shadow:       0 12px 30px -14px rgba(12, 59, 46, 0.28);
    --shadow-sm:    0 4px 14px -8px rgba(12, 59, 46, 0.22);

    --font-display: 'Tajawal', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* ========== 2) الأساسيات ========== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-display);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 800; margin: 0; line-height: 1.25; }
p { margin: 0; color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.mono-tag {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: 6px;
}
.hidden { display: none !important; }

/* ========== 3) عناصر قابلة لإعادة الاستخدام ========== */
.eyebrow-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--primary);
    background: var(--primary-tint);
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 100px;
    padding: 13px 26px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-light); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--primary); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--primary); background: var(--primary-tint); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    margin-bottom: 20px;
}
.alert-success { background: var(--success-tint); color: var(--success); }
.alert-error   { background: var(--danger-tint); color: var(--danger); }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.field input, label input, label select, label textarea {
    font-weight: 400;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    background: var(--surface);
    color: var(--ink);
}
.field input:focus, label input:focus, label select:focus, label textarea:focus {
    border-color: var(--primary-light);
}

/* ========== 4) رأس الموقع والتذييل (الصفحات العامة) ========== */
.site-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 6%;
    position: sticky;
    top: 0;
    background: rgba(243, 245, 240, 0.9);
    backdrop-filter: blur(10px);
    z-index: 50;
    border-bottom: 1px solid var(--line);
}
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-mark {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text small { color: var(--ink-faint); font-size: 0.72rem; }

.site-nav { display: flex; gap: 26px; margin-inline-start: auto; }
.site-nav a { color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; }
.site-nav a:hover { color: var(--primary); }

.site-footer {
    padding: 50px 6% 30px;
    background: var(--primary-dark);
    color: #cfe0d7;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.site-footer .brand-text b { color: #fff; }
.site-footer small { color: #7fa393; }

/* ========== 5) الصفحة الرئيسية: البطل والذرّة ========== */
.hero {
    display: grid;
    grid-template-columns: 1.3fr 0.55fr auto;
    align-items: start;
    gap: 20px;
    padding: 64px 6% 40px;
    position: relative;
    overflow: hidden;
}
.hero-copy { grid-column: 1; grid-row: 1; }
.hero-specimen { grid-column: 2; grid-row: 1; position: relative; display: flex; align-items: center; justify-content: center; }
.atom-diagram { width: 100%; max-width: 340px; opacity: 0.9; }
.atom-core { fill: var(--gold); }
.atom-orbit { fill: none; stroke: var(--primary); stroke-width: 1.4; opacity: 0.35; }
.atom-electron { fill: var(--primary-light); offset-rotate: 0deg; }
.e1 { offset-path: path("M 210 140 A 180 70 0 1 1 209.9 140"); animation: orbit1 7s linear infinite; }
.e2 { offset-path: path("M 210 140 A 180 70 0 1 1 209.9 140"); animation: orbit2 9s linear infinite; transform-origin: 210px 210px; }
.e3 { offset-path: path("M 210 140 A 180 70 0 1 1 209.9 140"); animation: orbit3 11s linear infinite; transform-origin: 210px 210px; }
@keyframes orbit1 { to { offset-distance: 100%; } }
@keyframes orbit2 { from { offset-distance: 0; transform: rotate(60deg); } to { offset-distance: 100%; transform: rotate(60deg); } }
@keyframes orbit3 { from { offset-distance: 0; transform: rotate(120deg); } to { offset-distance: 100%; transform: rotate(120deg); } }

.hero-copy h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-bottom: 18px; }
.hero-copy h1 em { color: var(--primary); font-style: normal; }
.hero-copy p { max-width: 46ch; margin-bottom: 26px; font-size: 1.02rem; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 28px; }
.hero-actions .btn-ghost { border: none; text-decoration: underline; text-underline-offset: 4px; padding: 13px 6px; }

.trust-strip { list-style: none; display: flex; gap: 18px; padding: 0; margin: 0; flex-wrap: wrap; }
.trust-strip li {
    font-family: var(--font-mono); font-size: 0.78rem; color: var(--primary);
    display: flex; align-items: center; gap: 6px;
}
.trust-strip li::before { content: '✓'; }

.teacher-card {
    grid-column: 3;
    grid-row: 1;
    width: 200px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 12px;
    position: relative;
}
.teacher-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; background: var(--surface-2); }
.teacher-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.teacher-photo-fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--primary-tint), var(--surface-2));
    color: var(--ink-faint); font-size: 0.85rem;
}
.teacher-meta { display: flex; flex-direction: column; }
.teacher-meta small { color: var(--ink-faint); font-size: 0.75rem; }
.teacher-stat {
    position: absolute; top: -14px; left: -14px;
    background: var(--gold); color: #fff; border-radius: var(--radius);
    padding: 10px 14px; text-align: center; box-shadow: var(--shadow-sm);
}
.teacher-stat b { display: block; font-size: 1.3rem; font-family: var(--font-mono); }
.teacher-stat small { font-size: 0.65rem; }

.notice-bar {
    margin: 0 6% 50px;
    background: var(--primary-tint);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
}
.notice-bar a { color: var(--primary); font-weight: 700; white-space: nowrap; }

/* ========== 6) أقسام عامة ========== */
.section { padding: 60px 6%; max-width: 1180px; margin: 0 auto; }
.section-head { max-width: 60ch; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 10px; }
.section-head.light .eyebrow-tag { background: rgba(255,255,255,0.14); color: #cfe0d7; }
.section-head.light h2, .section-head.light p { color: #fff; }

.teacher-quote {
    margin: 0 0 44px;
    padding: 30px 34px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border-inline-start: 5px solid var(--gold);
    box-shadow: var(--shadow-sm);
}
.teacher-quote p { font-size: 1.15rem; color: var(--ink); margin-bottom: 16px; }
.teacher-quote footer { display: flex; gap: 8px; align-items: baseline; }
.teacher-quote footer b { color: var(--primary); }
.teacher-quote footer span { color: var(--ink-faint); font-size: 0.85rem; }

.value-grid, .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-card, .feature-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
}
.value-tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gold); }
.value-card h3, .feature-card h3 { margin: 10px 0 8px; font-size: 1.05rem; }
.feature-card i { font-style: normal; font-size: 1.3rem; color: var(--primary); }

.stars-section { max-width: none; background: var(--primary); border-radius: var(--radius-lg); margin: 0 4% 60px; padding: 56px 6%; }
.star-list { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; }
.star-row {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,0.06); border-radius: var(--radius-sm);
    padding: 12px 16px; color: #fff;
}
.star-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--gold); color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.star-row div { flex: 1; }
.star-row small { color: #a9c3b7; display: block; font-size: 0.78rem; }
.star-row strong { font-family: var(--font-mono); color: var(--gold-tint); }

/* ========== 7) صفحات الدخول ========== */
.auth-body {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-dark);
    background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.05), transparent 40%);
    padding: 24px;
}
.auth-card {
    width: 100%; max-width: 420px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; gap: 18px;
}
.auth-card .brand-lockup { justify-content: center; margin-bottom: 6px; }
.auth-card h1 { font-size: 1.5rem; text-align: center; }
.auth-sub { text-align: center; margin-bottom: 6px; }
.auth-card form { display: flex; flex-direction: column; gap: 16px; }
.back-link { text-align: center; color: var(--ink-faint); font-size: 0.85rem; }

/* ========== 8) لوحة التحكم: الهيكل العام ========== */
.dashboard-body { background: var(--bg); }

.sidebar {
    position: fixed; inset-inline-start: 0; top: 0; bottom: 0; width: 260px;
    background: var(--primary-dark); color: #fff;
    display: flex; flex-direction: column; padding: 22px 16px; gap: 20px;
    z-index: 60; overflow-y: auto;
}
.side-close { display: none; align-self: flex-end; background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; }
.side-brand { color: #fff; }
.side-brand small { color: #8fb0a2; }

.user-mini { display: flex; align-items: center; gap: 10px; padding: 12px; background: rgba(255,255,255,0.06); border-radius: var(--radius-sm); }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.user-mini small { color: #a9c3b7; font-size: 0.75rem; }

.dash-nav { display: flex; flex-direction: column; gap: 4px; }
.dash-nav small { color: #7fa393; font-size: 0.72rem; margin: 12px 4px 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.dash-nav button, .dash-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; border-radius: var(--radius-sm);
    background: none; border: none; color: #d3e3da; cursor: pointer;
    text-align: right; font-size: 0.92rem; position: relative;
}
.dash-nav button:hover, .dash-nav a:hover { background: rgba(255,255,255,0.07); }
.dash-nav button.active { background: var(--primary-light); color: #fff; font-weight: 700; }
.dash-nav i { margin-inline-start: auto; background: var(--gold); color: #fff; font-style: normal; font-size: 0.68rem; border-radius: 100px; padding: 1px 7px; }

.year-box { margin-top: auto; background: rgba(255,255,255,0.06); border-radius: var(--radius-sm); padding: 14px; }
.year-box small { color: #8fb0a2; font-size: 0.72rem; }
.year-box b { font-family: var(--font-mono); display: block; margin-top: 4px; }

.side-overlay { display: none; }

.dash-header {
    position: sticky; top: 0; z-index: 40;
    margin-inline-start: 260px;
    display: flex; align-items: center; gap: 18px;
    padding: 18px 32px;
    background: rgba(243, 245, 240, 0.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.dash-header h1 { font-size: 1.25rem; }
.dash-header small { color: var(--ink-faint); font-size: 0.75rem; }
.side-open { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; }
.search { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; }
.search input { border: none; background: none; width: 200px; }
.bell { position: relative; font-size: 1.2rem; color: var(--primary); }
.bell i { position: absolute; top: -6px; left: -10px; background: var(--danger); color: #fff; font-style: normal; font-size: 0.62rem; border-radius: 100px; padding: 1px 6px; }

.dashboard { margin-inline-start: 260px; }
.dash-content { padding: 26px 32px 60px; display: flex; flex-direction: column; gap: 30px; max-width: 1280px; }

.tab { display: none; flex-direction: column; gap: 24px; }
.tab.active { display: flex; }

/* بطاقات ولوحات عامة */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.panel-head h3 { font-size: 1.02rem; }
.panel-head p { font-size: 0.8rem; }
.panel-head button { background: none; border: none; color: var(--primary); font-weight: 700; cursor: pointer; font-size: 0.85rem; }

.welcome {
    background: var(--primary); color: #fff; border-radius: var(--radius-lg);
    padding: 30px 34px; display: flex; align-items: center; justify-content: space-between;
    position: relative; overflow: hidden;
}
.welcome h2 { font-size: 1.5rem; margin: 8px 0 10px; }
.welcome p { color: #cfe0d7; margin-bottom: 18px; }
.welcome button { background: var(--gold); border: none; color: #fff; padding: 11px 20px; border-radius: 100px; font-weight: 700; cursor: pointer; }
.molecule-mark { font-family: var(--font-mono); font-size: 3rem; color: rgba(255,255,255,0.14); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stats article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; align-items: center; gap: 12px; }
.stats i { font-style: normal; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--primary-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.stats small { color: var(--ink-faint); font-size: 0.75rem; display: block; }
.stats b { font-family: var(--font-mono); font-size: 1.3rem; }

.dash-columns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.data-row { display: flex; justify-content: space-between; padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.data-row:last-child { border-bottom: none; }
.data-row span { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.8rem; }

.quick { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: none; border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px; cursor: pointer; text-align: right; }
.quick:last-child { margin-bottom: 0; }
.quick i { font-style: normal; width: 34px; height: 34px; border-radius: 8px; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.quick span { flex: 1; display: flex; flex-direction: column; }
.quick small { color: var(--ink-faint); font-size: 0.75rem; }

.empty-small { color: var(--ink-faint); font-size: 0.85rem; padding: 12px 0; }
.empty-large { text-align: center; padding: 50px 20px; color: var(--ink-faint); }
.empty-large i { font-style: normal; font-size: 1.8rem; display: block; margin-bottom: 10px; color: var(--primary); }
.empty-large h3 { color: var(--ink); margin-bottom: 6px; }

/* تبويبات إدارة عامة */
.action-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.action-title h2 { font-size: 1.3rem; margin-bottom: 6px; }
.action-title p { font-size: 0.9rem; }

.manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.manage-form { display: flex; flex-direction: column; gap: 14px; }
.manage-form h3 { font-size: 1rem; margin-bottom: 4px; }
.manage-form label, .upload-form label, .issue-panel label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th { text-align: right; color: var(--ink-faint); font-size: 0.78rem; font-weight: 700; padding: 10px 12px; border-bottom: 2px solid var(--line); }
td { padding: 12px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }

.status { font-family: var(--font-mono); font-size: 0.72rem; padding: 3px 10px; border-radius: 100px; }
.status.open { background: var(--success-tint); color: var(--success); }
.status.done { background: var(--surface-2); color: var(--ink-faint); }

/* إجراءات الطلاب: نقل / حذف */
.student-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.student-actions form { display: flex; gap: 6px; align-items: center; margin: 0; }
.student-actions select {
    font-size: 0.78rem; border: 1.5px solid var(--line); border-radius: 6px;
    padding: 5px 6px; background: var(--surface); max-width: 130px;
}
.btn-mini {
    font-size: 0.78rem; padding: 5px 10px; border-radius: 6px;
    border: 1.5px solid var(--line); background: var(--surface); cursor: pointer;
}
.btn-mini:hover { border-color: var(--primary-light); color: var(--primary); }
.btn-mini.danger { color: var(--danger); border-color: var(--danger-tint); }
.btn-mini.danger:hover { background: var(--danger-tint); border-color: var(--danger); }

/* نموذج إنشاء/تعديل الواجب */
.assignment-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.choice-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 0.88rem; }
.choice-row > span { font-weight: 700; color: var(--ink-soft); }
.choice-row label { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.specific-classes-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox-chip { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 100px; padding: 6px 12px; font-size: 0.82rem; cursor: pointer; }
.assignment-form-actions { display: flex; gap: 12px; align-items: center; }

/* قائمة واجبات الطالب */
.assignment-list-student { display: flex; flex-direction: column; gap: 16px; }
.assignment-card { display: flex; flex-direction: column; gap: 12px; }
.assignment-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.assignment-card-head h3 { font-size: 1.02rem; margin-bottom: 4px; }
.assignment-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.8rem; color: var(--ink-faint); }
.assignment-note { font-size: 0.85rem; padding: 10px 14px; border-radius: 8px; margin: 0; }
.assignment-note.success { background: var(--success-tint); color: var(--success); }
.assignment-note.closed { background: var(--surface-2); color: var(--ink-faint); }
.assignment-submit-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.mcq-option { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }

/* باني أسئلة الاختيار من متعدد */
.mcq-builder { display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px; }
.question-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.question-row-head { display: flex; justify-content: space-between; align-items: center; }
.question-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.question-meta-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.question-points { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.question-points input { width: 80px; border: 1.5px solid var(--line); border-radius: 6px; padding: 6px 8px; }

/* أسئلة الاختيار من متعدد في صفحة الطالب */
.mcq-question-block { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.mcq-question-block:last-of-type { border-bottom: none; }

/* صفحة مراجعة التسليمات وتصحيحها */
.submission-answer { max-width: 260px; }
.submission-text { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 6px; }
.score-input { width: 70px; border: 1.5px solid var(--line); border-radius: 6px; padding: 6px; text-align: center; font-family: var(--font-mono); }

/* بطاقة الشرح المباشر لصفحة الطالب */
.board-live-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.board-live-card > div { display: flex; align-items: center; gap: 12px; }
.board-live-card i { font-style: normal; width: 40px; height: 40px; border-radius: 10px; background: var(--primary-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.board-live-card small { display: block; color: var(--ink-faint); font-size: 0.8rem; }

/* ========== محادثة الرسائل (واتساب) ========== */
.chat-app { display: grid; grid-template-columns: 280px 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 560px; background: var(--surface); }
.chat-sidebar { border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; background: var(--surface-2); }
.chat-search { margin: 12px; padding: 9px 12px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface); }
.chat-student-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 0 8px 8px; }
.chat-student-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; text-align: right; }
.chat-student-item:hover { background: var(--surface); }
.chat-student-item.active { background: var(--primary-tint); }
.chat-student-name { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.chat-unread-badge {
    font-style: normal; background: var(--danger); color: #fff;
    font-size: 0.68rem; font-weight: 700; border-radius: 100px;
    padding: 2px 7px; flex-shrink: 0;
}
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }

.chat-main { position: relative; display: flex; flex-direction: column; background: var(--surface-2); }
.chat-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-faint); }
.chat-placeholder i { font-style: normal; font-size: 1.8rem; color: var(--primary); }

.chat-thread { display: flex; flex-direction: column; height: 100%; }
.chat-thread-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.chat-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; }

.chat-bubble-row { display: flex; }
.chat-bubble-row.mine { justify-content: flex-end; }
.chat-bubble {
    position: relative; max-width: 70%;
    background: var(--surface); border-radius: 14px 14px 14px 4px;
    padding: 10px 14px; font-size: 0.9rem; line-height: 1.5;
    box-shadow: var(--shadow-sm);
}
.chat-bubble-row.mine .chat-bubble { background: var(--primary-tint); border-radius: 14px 14px 4px 14px; }
.chat-bubble.deleted { color: var(--ink-faint); font-style: italic; background: var(--surface-2); box-shadow: none; }
.chat-bubble-text { white-space: pre-wrap; word-break: break-word; }
.chat-edited { color: var(--ink-faint); font-size: 0.7rem; font-style: normal; }
.chat-time { display: block; text-align: left; font-size: 0.65rem; color: var(--ink-faint); margin-top: 4px; font-family: var(--font-mono); }
.chat-bubble-actions { position: absolute; top: -14px; left: 4px; display: none; gap: 4px; background: var(--surface); border-radius: 100px; padding: 2px 6px; box-shadow: var(--shadow-sm); }
.chat-bubble:hover .chat-bubble-actions { display: flex; }
.chat-bubble-actions button { background: none; border: none; cursor: pointer; font-size: 0.85rem; }
.chat-edit-input { width: 100%; min-width: 200px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; font: inherit; }
.chat-edit-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }

.chat-compose { display: flex; gap: 10px; padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--line); }
.chat-compose textarea { flex: 1; resize: none; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; font: inherit; max-height: 100px; }

.chat-back-btn { display: none; background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 4px; margin-inline-end: 4px; }

@media (max-width: 760px) {
    .chat-app { grid-template-columns: 1fr; height: 72vh; }
    .chat-app[data-role="teacher"] .chat-main { display: none; }
    .chat-app[data-role="teacher"].chat-mobile-open .chat-sidebar { display: none; }
    .chat-app[data-role="teacher"].chat-mobile-open .chat-main { display: flex; }
    .chat-back-btn { display: inline-flex; }
}

/* الكتب */
.upload-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.book-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.book-card i { font-style: normal; font-family: var(--font-mono); background: var(--primary-tint); color: var(--primary); width: fit-content; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; }
.book-card h3 { font-size: 0.98rem; }
.book-card small { color: var(--ink-faint); }
.book-card-actions { display: flex; gap: 8px; align-items: center; }
.book-card-actions form { margin: 0; }

/* نافذة عرض الكتاب المنبثقة */
.book-viewer-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(10, 25, 20, 0.72);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.book-viewer-box {
    background: var(--surface); border-radius: var(--radius);
    width: min(900px, 100%); height: 100%; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.book-viewer-box header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.book-viewer-close { background: none; border: none; color: var(--danger); font-weight: 700; cursor: pointer; font-size: 0.9rem; }
.book-viewer-box iframe { flex: 1; border: none; width: 100%; background: var(--surface-2); }

/* الشاشة التفاعلية (تبويب الإطلاق) */
.board-launch { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.board-launch-head { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.board-launch-head span { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.board-features { display: flex; flex-direction: column; gap: 14px; }
.board-features div { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.board-features i { font-style: normal; color: var(--primary); font-size: 1.1rem; }
.board-features small { color: var(--ink-faint); display: block; }

/* الرسائل (نموذج تمهيدي) */
.chat-demo { display: grid; grid-template-columns: 260px 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 340px; }
.chat-demo aside { background: var(--surface); border-inline-end: 1px solid var(--line); padding: 14px; }
.chat-demo aside input { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: 12px; }
.chat-demo main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink-faint); background: var(--surface-2); }
.chat-demo main i { font-style: normal; font-size: 1.6rem; color: var(--primary); }

/* الإعدادات */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.settings-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 12px; }

/* سجل الدرجات */
.grade-class-picker label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.grade-class-picker select { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; background: var(--surface); }
.grade-add-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.grade-add-grid { grid-template-columns: 2fr 1fr 1fr; }
.grade-table th small { color: var(--ink-faint); font-weight: 400; }
.grade-total { font-family: var(--font-mono); font-weight: 700; color: var(--primary); text-align: center; }
.grade-table { border-collapse: collapse; table-layout: fixed; }
.grade-table th, .grade-table td { border: 1px solid var(--line); }
.grade-table th { position: relative; white-space: normal; word-break: break-word; }
.grade-table td { padding: 4px 8px; }
.col-resize-handle {
    position: absolute; top: 0; bottom: 0; left: -3px; width: 6px;
    cursor: col-resize; z-index: 2;
}
.col-resize-handle:hover, .col-resize-handle:active { background: var(--primary-light); opacity: 0.4; }
.marks-group { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.marks-group input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.marks-computed-value { display: none; font-family: var(--font-mono); font-weight: 700; }
.panel-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.grade-input {
    width: 100%;
    text-align: center;
    border: none;
    background: transparent;
    padding: 8px 2px;
    font-family: var(--font-mono);
    font-size: 0.95rem;
}
.grade-input:focus { outline: 2px solid var(--primary-light); outline-offset: -2px; background: var(--primary-tint); }
.grade-sheet-header { text-align: center; margin-bottom: 18px; }
.grade-sheet-header h2 { font-size: 1.15rem; margin-bottom: 4px; }
.grade-sheet-header p { color: var(--ink-faint); font-size: 0.85rem; }
.grade-delete-row td { border-bottom: none; padding: 0 12px 8px; background: var(--surface-2); }
.grade-col-delete-btn {
    background: none; border: none; color: var(--danger); font-size: 0.7rem;
    cursor: pointer; padding: 2px 4px; white-space: nowrap;
}
.grade-col-delete-btn:hover { text-decoration: underline; }
.tier-badge {
    font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 100px;
    white-space: nowrap;
}
.tier-excellent { background: var(--success-tint); color: var(--success); }
.tier-very-good { background: var(--primary-tint); color: var(--primary); }
.tier-good      { background: var(--gold-tint); color: var(--gold); }
.tier-pass      { background: var(--surface-2); color: var(--ink-soft); }
.tier-weak      { background: var(--danger-tint); color: var(--danger); }
.tier-muted     { background: var(--surface-2); color: var(--ink-faint); }

/* ========== 9) استوديو الشهادات ========== */
.certificate-title { align-items: center; }
.studio-stat { font-size: 0.8rem; color: var(--ink-faint); margin-inline-start: 16px; }
.studio-stat b { color: var(--primary); font-family: var(--font-mono); }

.certificate-studio { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
.studio-tools { display: flex; flex-direction: column; gap: 10px; }
.studio-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.studio-head span { width: 32px; height: 32px; border-radius: 8px; background: var(--gold-tint); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.tool-item { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: none; border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; text-align: right; }
.tool-item.active { background: var(--primary-tint); color: var(--primary); font-weight: 700; }
.tool-item em { margin-inline-start: auto; font-style: normal; color: var(--ink-faint); }
.element-controls { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.frame-upload { border: 1.5px dashed var(--line); border-radius: var(--radius-sm); padding: 12px; text-align: center; cursor: pointer; }

.studio-workspace { display: flex; flex-direction: column; gap: 12px; }
.workspace-bar { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.85rem; }
.workspace-bar button { background: none; border: none; cursor: pointer; padding: 4px 8px; }
.certificate-stage { background: var(--surface-2); border-radius: var(--radius); padding: 24px; overflow: auto; }
.live-certificate {
    width: 100%; aspect-ratio: 297 / 210; background: #fffdf7;
    position: relative; border-radius: 6px; box-shadow: var(--shadow);
    outline: 4px double var(--gold-tint);
}
.ornament { position: absolute; font-size: 1.2rem; color: var(--gold-tint); }
.ornament.top { top: 8px; inset-inline-start: 8px; }
.ornament.bottom { bottom: 8px; inset-inline-end: 8px; }
.design-element { position: absolute; transform: translate(50%, -50%); white-space: nowrap; outline: none; cursor: move; padding: 2px 6px; }
.design-element.selected { outline: 1.5px dashed var(--primary-light); border-radius: 4px; }
.studio-hint { font-size: 0.8rem; color: var(--ink-faint); text-align: center; }

.template-strip { display: flex; flex-direction: column; gap: 12px; }
.template-cards { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.template-cards article { flex: 0 0 150px; display: flex; flex-direction: column; gap: 6px; }
.template-thumb { aspect-ratio: 4/3; background: var(--surface-2); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); background-size: cover; background-position: center; }

.issue-panel { display: flex; flex-direction: column; gap: 18px; }
.issue-intro { display: flex; gap: 12px; align-items: center; }
.issue-intro span { width: 38px; height: 38px; border-radius: 10px; background: var(--gold-tint); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.issue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.issue-reason { grid-column: 1 / -1; }
.target-class.hidden { display: none; }
.issue-button { align-self: flex-start; }
.cert-number { font-family: var(--font-mono); font-size: 0.82rem; }

/* ========== 10) الشاشة التفاعلية (المعلم/الطالب) ========== */
.board-page { margin: 0; background: #1a2b23; color: #fff; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.board-app { display: flex; flex-direction: column; height: 100%; }
.board-header { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--primary-dark); }
.board-back { color: #fff; font-size: 1.1rem; }
.board-header div { flex: 1; display: flex; flex-direction: column; }
.board-header small { color: #a9c3b7; font-size: 0.75rem; }
.live-pill { background: #d64545; font-size: 0.72rem; padding: 4px 10px; border-radius: 100px; font-family: var(--font-mono); }
.board-header button { background: rgba(255,255,255,0.08); color: #fff; border: none; border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; font-size: 0.82rem; }
.board-header button.danger { background: var(--danger); }

.whiteboard-tools { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: #223a30; flex-wrap: wrap; }
.tool-group { display: flex; align-items: center; gap: 10px; }
.drawing-tool { background: none; border: 1px solid rgba(255,255,255,0.15); color: #cfe0d7; border-radius: var(--radius-sm); padding: 7px 12px; cursor: pointer; font-size: 0.82rem; }
.drawing-tool.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.tool-group label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #a9c3b7; }
.page-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; font-size: 0.85rem; }
.page-tools button { background: rgba(255,255,255,0.08); border: none; color: #fff; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.viewer-bar { justify-content: space-between; font-size: 0.85rem; color: #a9c3b7; }

.pdf-workspace { flex: 1; position: relative; overflow: auto; display: flex; align-items: flex-start; justify-content: center; background: #101c17; }
.pdf-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #a9c3b7; }
.canvas-wrap { position: relative; margin: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.canvas-wrap canvas { position: absolute; top: 0; left: 0; }
#drawingCanvas { cursor: crosshair; }
.save-state { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.6); padding: 6px 16px; border-radius: 100px; font-size: 0.75rem; color: #a9c3b7; }

/* لوحة البث المرئي العائمة (Jitsi) */
.video-panel {
    position: fixed; bottom: 16px; left: 16px; z-index: 60;
    width: 300px; height: 220px;
    background: #101c17; border-radius: var(--radius-sm);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; overflow: hidden;
}
.video-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; background: #1a2b23; color: #cfe0d7; font-size: 0.78rem;
}
.video-panel-head button { background: none; border: none; color: #cfe0d7; cursor: pointer; font-size: 0.9rem; }
#videoPanelContainer { flex: 1; }
#videoPanelContainer iframe { width: 100%; height: 100%; border: none; }

@media (max-width: 760px) {
    .video-panel { left: 8px; right: 8px; bottom: 8px; width: auto; height: 200px; }
}

/* ========== 11) صفحة طباعة الشهادة ========== */
.print-actions { padding: 16px; text-align: center; }

/* ========== 12) طباعة كشف الدرجات (داخل لوحة التحكم فقط) ========== */
@media print {
    /* نخفي الصفحة كاملة داخل لوحة التحكم فقط، ثم نُظهر جدول الدرجات بمكانها.
       محصورة بـ body.dashboard-body حتى لا تؤثر على صفحات أخرى مثل الشهادة. */
    body.dashboard-body * { visibility: hidden; }
    body.dashboard-body #grades .grade-panel,
    body.dashboard-body #grades .grade-panel * { visibility: visible; }
    body.dashboard-body #grades .grade-panel {
        position: absolute; inset: 0; margin: 0;
        border: none; box-shadow: none; padding: 10mm;
    }
    body.dashboard-body .print-hide,
    body.dashboard-body .print-hide * { display: none !important; visibility: hidden !important; }
    body.dashboard-body .grade-input {
        border: none; background: none; text-align: center;
        -moz-appearance: textfield;
    }
    body.dashboard-body .grade-input::-webkit-outer-spin-button,
    body.dashboard-body .grade-input::-webkit-inner-spin-button {
        -webkit-appearance: none; margin: 0;
    }
    body.dashboard-body .col-resize-handle { display: none !important; }

    /* وضع طباعة صافي الدرجات: تخفي التأشيرات وتُظهر الرقم النهائي فقط، بخط وأعمدة مضغوطة */
    body.dashboard-body.printing-net-grades .grade-table th,
    body.dashboard-body.printing-net-grades .grade-table td { padding: 3px 4px; font-size: 0.72rem; text-align: center; }
    body.dashboard-body.printing-net-grades .grade-table td:nth-child(2) { text-align: center; }
    body.dashboard-body.printing-net-grades .marks-group input[type="checkbox"] { display: none; }
    body.dashboard-body.printing-net-grades .marks-computed-value { display: inline-block; }
    body.dashboard-body.printing-net-grades .grade-sheet-header h2 { font-size: 0.95rem; }
    body.dashboard-body.printing-net-grades .grade-sheet-header p { font-size: 0.72rem; }

    body.dashboard-body { background: #fff; }
}

/* ========== 13) استجابة الشاشات الصغيرة ========== */
@media (max-width: 1080px) {
    .hero {
        grid-template-columns: 1fr 1fr;
        gap: 16px 14px;
    }
    .hero-specimen { grid-column: 1; grid-row: 1; order: -2; }
    .teacher-card { grid-column: 2; grid-row: 1; order: -1; }
    .hero-copy { grid-column: 1 / -1; grid-row: 2; order: 0; }
    .value-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .manage-grid, .dash-columns, .board-launch, .certificate-studio, .settings-grid { grid-template-columns: 1fr; }
    .issue-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .site-nav { display: none; }
    .teacher-stat { padding: 7px 10px; top: -10px; left: -10px; }
    .teacher-stat b { font-size: 1.05rem; }
    .teacher-card { padding: 12px; gap: 10px; }
    .stats { grid-template-columns: 1fr 1fr; }
    .value-grid, .feature-grid { grid-template-columns: 1fr; }
    .form-two { grid-template-columns: 1fr; }
    .issue-grid { grid-template-columns: 1fr; }
    .atom-diagram { max-width: 150px; }
    .teacher-photo { aspect-ratio: 1 / 1; }

    .sidebar { transform: translateX(100%); transition: transform 0.25s ease; }
    body.nav-open .sidebar { transform: translateX(0); }
    .side-close { display: block; }
    .side-open { display: block; }
    .dash-header, .dashboard { margin-inline-start: 0; }
    body.nav-open .side-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 55; border: none; }
    .search { display: none; }
}