:root {
    --primary:       #1a56db;
    --primary-dark:  #1342a8;
    --primary-light: #e8f0fe;
    --sidebar-bg:    #0f1729;
    --sidebar-text:  #94a3b8;
    --sidebar-hover: #1e2a40;
    --body-bg:       #f1f5f9;
    --card-bg:       #ffffff;
    --border:        #e2e8f0;
    --text:          #0f172a;
    --muted:         #64748b;
    --success:       #10b981;
    --danger:        #ef4444;
    --warning:       #f59e0b;
    --sidebar-w:     265px;
}

*    { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Tajawal',sans-serif; background:var(--body-bg); color:var(--text); direction:rtl; }

/* ── LAYOUT ─────────────────────────────────────────────────────────────────── */
.app-wrap  { display:flex; min-height:100vh; }

/* ── SIDEBAR ─────────────────────────────────────────────────────────────────── */
.sidebar {
    width:var(--sidebar-w); background:var(--sidebar-bg);
    display:flex; flex-direction:column;
    position:fixed; top:0; right:0; bottom:0; z-index:1000;
    overflow-y:auto; transition:transform .3s;
}
.sidebar-header {
    display:flex; align-items:center; gap:12px;
    padding:20px 16px; border-bottom:1px solid rgba(255,255,255,.07);
}
.logo-box {
    width:44px; height:44px; flex-shrink:0; border-radius:12px;
    background:linear-gradient(135deg,#1a56db,#60a5fa);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.2rem;
}
.brand-title { color:#fff; font-size:.95rem; font-weight:800; display:block; }
.brand-sub   { color:var(--sidebar-text); font-size:.72rem; display:block; }

.sidebar-nav    { list-style:none; padding:10px 0; flex:1; }
.nav-section    { color:#475569; font-size:.68rem; font-weight:800; letter-spacing:.1em; padding:14px 20px 4px; }
.nav-item       { margin:2px 8px; }
.nav-link {
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    color:var(--sidebar-text)!important; border-radius:10px;
    text-decoration:none; font-size:.88rem; font-weight:500; transition:all .2s;
}
.nav-link:hover  { background:var(--sidebar-hover); color:#fff!important; }
.nav-link.active { background:var(--primary); color:#fff!important; }
.nav-link i      { width:20px; text-align:center; }
.sidebar-foot    { padding:14px 16px; color:#475569; font-size:.78rem; border-top:1px solid rgba(255,255,255,.07); }

/* ── MAIN ─────────────────────────────────────────────────────────────────────── */
.main { margin-right:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; transition:margin-right .3s; }

/* ── TOPBAR ─────────────────────────────────────────────────────────────────── */
.topbar {
    background:#fff; border-bottom:1px solid var(--border);
    padding:0 24px; height:62px; display:flex; align-items:center;
    justify-content:space-between; position:sticky; top:0; z-index:100;
    box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.btn-icon {
    width:36px; height:36px; border-radius:8px; border:1px solid var(--border);
    background:#fff; color:var(--muted); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .2s;
}
.btn-icon:hover { background:var(--body-bg); color:var(--primary); }
.badge-year { background:var(--primary-light); color:var(--primary); padding:4px 12px; border-radius:20px; font-size:.8rem; font-weight:700; }
.breadcrumb      { font-size:.83rem; }
.breadcrumb-item a { color:var(--primary); text-decoration:none; }
.breadcrumb-item.active { color:var(--muted); }

/* ── CONTENT ─────────────────────────────────────────────────────────────────── */
.content { padding:24px; flex:1; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.page-title  { font-size:1.4rem; font-weight:800; }
.page-sub    { font-size:.82rem; color:var(--muted); margin-top:3px; }

/* ── CARDS ─────────────────────────────────────────────────────────────────── */
.card {
    background:var(--card-bg); border:1px solid var(--border); border-radius:16px;
    box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.card-header {
    padding:14px 20px; border-bottom:1px solid var(--border); background:transparent;
    display:flex; align-items:center; justify-content:space-between;
}
.card-title { font-size:.95rem; font-weight:700; margin:0; }
.card-body  { padding:20px; }

/* ── STAT CARDS ─────────────────────────────────────────────────────────────── */
.stat-card {
    background:var(--card-bg); border:1px solid var(--border); border-radius:16px;
    padding:18px 20px; display:flex; align-items:center; gap:14px;
    transition:transform .2s, box-shadow .2s;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.stat-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.stat-icon.blue   { background:#dbeafe; color:#1d4ed8; }
.stat-icon.green  { background:#d1fae5; color:#059669; }
.stat-icon.orange { background:#fef3c7; color:#d97706; }
.stat-icon.purple { background:#ede9fe; color:#7c3aed; }
.stat-icon.pink   { background:#fce7f3; color:#db2777; }
.stat-val   { font-size:1.7rem; font-weight:800; }
.stat-label { font-size:.78rem; color:var(--muted); font-weight:600; }

/* ── TABLES ─────────────────────────────────────────────────────────────────── */
.tbl-wrap { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.table { margin:0; }
.table thead th { background:#f8fafc; border-bottom:1px solid var(--border); font-size:.78rem; font-weight:800; color:var(--muted); padding:12px 16px; }
.table tbody td { padding:11px 16px; border-bottom:1px solid #f1f5f9; font-size:.88rem; vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover { background:#fafbfd; }

/* ── FORMS ─────────────────────────────────────────────────────────────────── */
.form-label   { font-weight:700; font-size:.85rem; margin-bottom:5px; }
.form-control, .form-select {
    border:1.5px solid var(--border); border-radius:10px; padding:9px 13px;
    font-family:'Tajawal',sans-serif; font-size:.9rem; transition:border-color .2s,box-shadow .2s;
}
.form-control:focus, .form-select:focus {
    border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,86,219,.12);
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────────── */
.btn { font-family:'Tajawal',sans-serif; font-weight:700; border-radius:10px; padding:8px 18px; font-size:.88rem; transition:all .2s; }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn-sm { padding:5px 11px; font-size:.8rem; border-radius:8px; }

/* ── BADGES ─────────────────────────────────────────────────────────────────── */
.badge  { font-family:'Tajawal',sans-serif; font-weight:700; font-size:.75rem; border-radius:8px; padding:4px 10px; }
.badge-paid   { background:#d1fae5; color:#065f46; box-shadow:0 0 0 1px rgba(16,185,129,.25) inset, 0 0 8px rgba(16,185,129,.25); }
.badge-unpaid { background:#fee2e2; color:#991b1b; }

/* ── BOOK ITEMS ─────────────────────────────────────────────────────────────── */
.book-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border:1.5px solid var(--border); border-radius:12px;
    margin-bottom:8px; background:#fff; transition:all .25s;
}
.book-item.delivered { border-color:var(--success); background:#f0fdf4; }
.book-name    { font-weight:700; font-size:.9rem; }
.book-barcode { font-size:.75rem; color:var(--muted); font-family:monospace; }

/* ── SCANNER ─────────────────────────────────────────────────────────────────── */
.scanner-box { background:linear-gradient(135deg,#0f1729,#1e2a40); border-radius:16px; padding:22px; color:#fff; }
.scanner-input .form-control {
    background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2); color:#fff;
    font-size:1.05rem; letter-spacing:.04em;
}
.scanner-input .form-control::placeholder { color:rgba(255,255,255,.4); }
.scanner-input .form-control:focus { background:rgba(255,255,255,.15); border-color:var(--primary); color:#fff; box-shadow:none; }

.scan-fb { min-height:40px; padding:9px 14px; border-radius:10px; font-weight:700; font-size:.88rem; display:none; }
.scan-fb.show    { display:block; }
.scan-fb.success { background:#d1fae5; color:#065f46; border:1.5px solid #6ee7b7; }
.scan-fb.error   { background:#fee2e2; color:#991b1b; border:1.5px solid #fca5a5; }
.scan-fb.warning { background:#fef3c7; color:#92400e; border:1.5px solid #fcd34d; }

/* ── STUDENT HEADER ─────────────────────────────────────────────────────────── */
.student-card {
    position:relative; overflow:hidden;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(96,165,250,.35) 0%, rgba(96,165,250,0) 45%),
        linear-gradient(135deg, #0b1a3d 0%, #142a63 45%, #1d4ed8 100%);
    border-radius:18px; padding:20px; color:#fff;
    box-shadow:
        0 12px 32px -10px rgba(29,78,216,.55),
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 1px 0 rgba(255,255,255,.12) inset;
}
.student-name { font-size:1.25rem; font-weight:800; text-shadow:0 0 18px rgba(96,165,250,.5); }
.student-meta { font-size:.83rem; opacity:.85; }

.badge-status {
    padding:5px 12px; border-radius:20px; font-size:.72rem; font-weight:800;
    display:inline-flex; align-items:center; gap:4px;
}
.badge-status-new  { background:rgba(16,185,129,.18); color:#a7f3d0; box-shadow:0 0 0 1px rgba(16,185,129,.5) inset, 0 0 12px rgba(16,185,129,.35); }
.badge-status-warn { background:rgba(245,158,11,.18); color:#fde68a; box-shadow:0 0 0 1px rgba(245,158,11,.5) inset, 0 0 12px rgba(245,158,11,.35); }

/* شبكة بيانات الطالب داخل البطاقة — كل معلومة (مدرسة/صف/نوع/عام دراسي) في خانة مستقلة وواضحة */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.info-chip {
    background:rgba(255,255,255,.08); border-radius:10px; padding:8px 10px;
    box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.info-chip-label { font-size:.68rem; opacity:.65; font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin-bottom:2px; }
.info-chip-value { font-size:.88rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.stat-mini { box-shadow:0 0 0 1px rgba(0,0,0,.03) inset, 0 2px 8px rgba(0,0,0,.04); transition:box-shadow .2s; }
.stat-mini-success { background:#f0fdf4; box-shadow:0 0 0 1px rgba(16,185,129,.15) inset, 0 0 14px rgba(16,185,129,.12); }
.stat-mini-warning { background:#fffbeb; box-shadow:0 0 0 1px rgba(245,158,11,.18) inset, 0 0 14px rgba(245,158,11,.12); }
.stat-mini-total   { background:#f5f3ff; box-shadow:0 0 0 1px rgba(124,58,237,.18) inset, 0 0 14px rgba(124,58,237,.12); }

/* ── PROGRESS ─────────────────────────────────────────────────────────────────── */
.progress { height:10px; border-radius:8px; background:#e2e8f0; box-shadow:inset 0 1px 3px rgba(0,0,0,.08); overflow:visible; }
.progress-bar {
    border-radius:8px;
    background:linear-gradient(to left, #1d4ed8, #38bdf8);
    box-shadow:0 0 12px rgba(56,189,248,.7), 0 0 2px rgba(29,78,216,.9);
    position:relative;
}

/* ── SEARCH DROPDOWN ─────────────────────────────────────────────────────────── */
.search-drop {
    position:absolute; top:100%; right:0; left:0; z-index:1000;
    background:#fff; border:1.5px solid var(--border); border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.1); max-height:300px; overflow-y:auto; display:none;
}
.drop-item { padding:11px 16px; cursor:pointer; border-bottom:1px solid #f1f5f9; transition:background .15s; }
.drop-item:hover { background:var(--primary-light); }
.drop-item:last-child { border-bottom:none; }
.drop-name { font-weight:800; font-size:.88rem; }
.drop-meta { font-size:.75rem; color:var(--muted); }

/* ── SIDEBAR TOGGLE ─────────────────────────────────────────────────────────── */
.collapsed .sidebar { transform:translateX(100%); }
.collapsed .main    { margin-right:0; }

/* ── PRINT ─────────────────────────────────────────────────────────────────── */
@media print {
    .sidebar,.topbar,.no-print { display:none!important; }
    .main { margin-right:0!important; }
    .content { padding:0!important; }
}

@media (max-width:768px) {
    .sidebar { transform:translateX(100%); }
    .main    { margin-right:0; }
    .sidebar.open { transform:translateX(0); }
}