/* مدرستي — Design System (ثيم البطيخ 🍉) */
:root {
    --mo-primary: #ce1126;          /* أحمر البطيخ */
    --mo-primary-dark: #a50d1f;
    --mo-primary-light: #fbe9ec;
    --mo-accent: #149954;           /* أخضر القشرة */
    --mo-accent-dark: #0e6b3c;
    --mo-bg: #f7f8f7;
    --mo-sidebar: #1a1a1a;          /* أخضر داكن */
    --mo-sidebar-hover: #2a2a2a;
    --mo-radius: 14px;
    --mo-shadow: 0 1px 3px rgba(10, 10, 10, .08), 0 4px 16px rgba(10, 10, 10, .06);
    --mo-font: "Cairo", "SF Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
}

html, body { height: 100%; }
body.app-body {
    background: var(--mo-bg);
    font-family: var(--mo-font);
    font-size: .95rem;
    color: #1d2733;
}

/* ---------- Layout ---------- */
.app-wrapper { display: flex; min-height: 100vh; }
.app-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.app-content { flex: 1 1 auto; }

/* ---------- Sidebar ---------- */
.app-sidebar {
    width: 264px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--mo-sidebar) 0%, #000000 100%);
    color: #e6e6e6;
}
@media (min-width: 992px) {
    .app-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.sidebar-brand { padding-top: 1.25rem; padding-bottom: 1rem; }
.brand-title { color: #fff; font-size: 1.05rem; }
.brand-sub { font-size: .72rem; color: #b0b0b0; }
.nav-section {
    font-size: .72rem;
    letter-spacing: .5px;
    color: #8f8f8f;
    padding: .9rem 1rem .3rem;
    text-transform: uppercase;
}
.side-link {
    display: flex; align-items: center; gap: .65rem;
    color: #e6e6e6; border-radius: 10px;
    padding: .55rem .9rem; font-size: .92rem;
}
.side-link:hover { background: var(--mo-sidebar-hover); color: #fff; }
.side-link.active { background: var(--mo-primary); color: #fff; font-weight: 600; }
.side-icon { width: 1.4rem; text-align: center; font-size: 1.05rem; }

/* ---------- Topbar ---------- */
.app-topbar {
    height: 64px;
    background: #fff;
    border-bottom: 1px solid #dcebe0;
    border-top: 4px solid var(--mo-primary);
    position: sticky; top: 0; z-index: 1020;
}
.page-heading { font-weight: 700; color: var(--mo-primary-dark); }
.avatar-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--mo-primary); color: #fff; font-weight: 700; font-size: .85rem;
}

/* ---------- Cards & tables ---------- */
.card { border: 0; border-radius: var(--mo-radius); box-shadow: var(--mo-shadow); }
.card-header { background: transparent; border-bottom: 1px solid #eef1f6; font-weight: 700; }
.table { margin-bottom: 0; }
.table th { font-size: .82rem; color: #52705e; font-weight: 700; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background: #f0f8f2; }

/* ---------- KPI ---------- */
.kpi-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; }
.kpi-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
}
.kpi-value { font-size: 1.45rem; font-weight: 800; line-height: 1.1; }
.kpi-label { font-size: .8rem; color: #6b7a90; }

/* ---------- Forms & buttons ---------- */
.btn-primary { background: var(--mo-primary); border-color: var(--mo-primary); }
.btn-primary:hover { background: var(--mo-primary-dark); border-color: var(--mo-primary-dark); }
.btn-outline-primary { color: var(--mo-primary); border-color: var(--mo-primary); }
.btn-outline-primary:hover { background: var(--mo-primary); border-color: var(--mo-primary); }
.btn-success, .btn-success:hover { background: var(--mo-accent); border-color: var(--mo-accent); }
.btn-success:hover { background: var(--mo-accent-dark); border-color: var(--mo-accent-dark); }
a { color: var(--mo-accent-dark); }
a:hover { color: var(--mo-primary); }
.form-control, .form-select { border-radius: 10px; padding: .5rem .8rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--mo-accent);
    box-shadow: 0 0 0 .2rem rgba(20, 153, 84, .14);
}
.form-label { font-weight: 600; font-size: .85rem; }
.btn { border-radius: 10px; }
.btn, .form-control, .form-select { min-height: 40px; }

/* ---------- Login ---------- */
.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #1a1a1a 0%, #149954 55%, #ce1126 130%);
    padding: 1rem;
}
.login-card { width: 100%; max-width: 420px; border-radius: 20px; }

/* ---------- Timetable ---------- */
.tt-table td { min-width: 110px; height: 64px; padding: .3rem; }
.tt-cell { border-radius: 8px; padding: .35rem .5rem; font-size: .8rem; background: #e9f5ee; height: 100%; position: relative; }
.tt-cell .tt-subject { font-weight: 700; color: var(--mo-accent-dark); }
.tt-cell .tt-teacher { color: #52705e; font-size: .72rem; }
.tt-del { position: absolute; top: 2px; inset-inline-end: 4px; opacity: 0; transition: opacity .15s; }
.tt-cell:hover .tt-del { opacity: 1; }

/* ---------- Attendance ---------- */
.att-radio { display: none; }
.att-pill {
    cursor: pointer; border: 1px solid #dee4ee; border-radius: 999px;
    padding: .3rem .8rem; font-size: .82rem; user-select: none;
}
.att-radio:checked + .att-pill.p-present { background: #d9f2e5; border-color: #2e9e6b; color: #14663f; font-weight: 700; }
.att-radio:checked + .att-pill.p-absent { background: #fde3e3; border-color: #d64545; color: #922; font-weight: 700; }
.att-radio:checked + .att-pill.p-late { background: #fdf0d7; border-color: #d9a02b; color: #7a5a10; font-weight: 700; }
.att-radio:checked + .att-pill.p-excused { background: #e3ecfd; border-color: #4569d6; color: #22409a; font-weight: 700; }

/* ---------- Misc ---------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: #8494a9; }
.empty-state .empty-icon { font-size: 2.6rem; margin-bottom: .5rem; }
.search-input { max-width: 320px; }
.app-footer { border-top: 1px solid #e6eaf1; background: #fff; }
a { text-decoration: none; }

/* ---------- شاشة الدخول المقسومة ---------- */
.auth-split { display: flex; min-height: 100vh; }
.auth-form-side {
    flex: 1 1 50%; display: flex; align-items: center; justify-content: center;
    background: #fff; padding: 2rem 1.5rem; position: relative;
}
.auth-form-box { width: 100%; max-width: 420px; }
.auth-slider-side {
    flex: 1 1 50%; position: relative; overflow: hidden; color: #fff;
    display: none;
}
@media (min-width: 768px) { .auth-slider-side { display: block; } }
.auth-slide {
    position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 3rem 2.5rem; pointer-events: none;
}
.auth-slide.on { opacity: 1; pointer-events: auto; }
.auth-slide .sl-icon { font-size: 4.5rem; margin-bottom: 1.2rem; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.auth-slide h2 { font-weight: 800; font-size: 1.6rem; }
.auth-slide p { color: rgba(255,255,255,.85); max-width: 420px; font-size: 1rem; }
.auth-dots {
    position: absolute; bottom: 2rem; inset-inline: 0; display: flex;
    justify-content: center; gap: .5rem; z-index: 5;
}
.auth-dots button {
    width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(255,255,255,.4); cursor: pointer; transition: all .3s;
}
.auth-dots button.on { background: #fff; width: 26px; border-radius: 999px; }
.auth-slide-brand {
    position: absolute; top: 1.5rem; inset-inline-start: 1.8rem; z-index: 5;
    display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800;
}

/* ---------- القوائم المنسدلة القابلة للبحث ---------- */
.ss-wrap { position: relative; }
.ss-wrap.ss-inline { display: inline-block; }
.ss-btn { text-align: start; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-panel {
    position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 1060;
    background: #fff; border: 1px solid #dee4ee; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 34, 64, .16);
    width: 100%; min-width: 240px; display: none; overflow: hidden;
}
.ss-panel.open { display: block; }
.ss-search {
    width: 100%; border: 0; border-bottom: 1px solid #eef1f6;
    padding: .6rem .9rem; outline: none; font-family: inherit; font-size: .9rem;
    background: #fafbfc;
}
.ss-list { max-height: 240px; overflow-y: auto; margin: 0; padding: .25rem 0; list-style: none; }
.ss-item { padding: .45rem .9rem; cursor: pointer; font-size: .9rem; }
.ss-item:hover, .ss-item.active { background: #f0f8f2; }
.ss-item.selected { font-weight: 700; color: #ce1126; }
.ss-empty { padding: .8rem .9rem; color: #8494a9; font-size: .85rem; }

/* ---------- علامة مائية ديناميكية ---------- */
.watermark-layer {
    position: fixed; inset: -20%;
    pointer-events: none; z-index: 2000;
    display: flex; flex-wrap: wrap; gap: 4rem 5rem;
    align-content: space-between;
    opacity: .05; transform: rotate(-25deg);
    overflow: hidden; user-select: none;
}
.watermark-layer span { font-weight: 800; font-size: 1rem; white-space: nowrap; color: #1a1a1a; }

@media print {
    .watermark-layer { opacity: .08; display: flex !important; }

    .app-sidebar, .app-topbar, .app-footer, .no-print { display: none !important; }
    .app-content { padding: 0 !important; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    body.app-body { background: #fff; }
}