/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 1; /* keep sticker below content */
}

/* Ensure headings follow theme text color (works for dark/light via CSS vars) */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
}

/* ===== Tabs & Pills (Bootstrap) - Theme-aware styles ===== */
.nav-tabs {
  border-color: var(--border-glass);
}
.nav-tabs .nav-link {
  color: var(--text-secondary);
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  margin-inline: 4px;
}
.nav-tabs .nav-link:hover {
  color: var(--brand-cta);
  background: var(--surface-glass-2);
}
.nav-tabs .nav-link.active {
  color: var(--brand-cta);
  background: var(--brand-accent);
  border-color: var(--brand-highlight) var(--brand-highlight) transparent;
}

.nav-pills .nav-link {
  color: var(--text-secondary);
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  margin-inline: 4px;
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
  color: var(--brand-cta);
  background: var(--brand-accent);
  border-color: var(--brand-highlight);
}

/* Cards/blocks inside setup questions */
#questionTabsContent {
  background: var(--surface-glass-2);
  border: 1px solid var(--border-glass);
  border-top: none;
  border-radius: 0 0 12px 12px;
}

/* Labels and inputs remain readable on dark */
#questionTabsContent label { color: var(--text-primary); }
#questionTabsContent .form-text, #questionTabsContent .form-label { color: var(--text-secondary); }

/* خطوط تحت كل عنصر في قائمة الدرجات */
.grades-list > * {
  padding: 6px 0;
}
.grades-list > *:nth-child(odd) {
  border-bottom: 1px solid var(--border-glass);
}
.grades-list > *:nth-child(even) {
  border-bottom: 1px solid var(--border-glass);
  text-align: left;
}
.grades-list > *:last-child,
.grades-list > *:nth-last-child(2) {
  border-bottom: none; /* يمكن إبقاء الأخير بدون خط إن أردت */
}

body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    min-height: 100vh;
    direction: rtl;
    color: var(--text-primary);
}

/* Theme variables for consistent colors across the app */
:root {
    /* A more refined and cohesive color palette */
    --brand-primary: #141C30;      /* Navy - main background (lightened) */
    --brand-secondary: #20294A;    /* A slightly lighter dark navy (lightened) */
    --brand-accent: #6366F1;       /* Indigo - for accents and buttons */
    --brand-highlight: #818CF8;    /* Soft indigo for highlights and active states */
    --brand-cta: #EEF2FF;          /* Indigo-tinted white - for call-to-action text */

    /* Surface colors for glassmorphism */
    --surface-glass: rgba(21, 29, 51, 0.65);   /* More opaque for better readability */
    --surface-glass-2: rgba(40, 52, 86, 0.5);
    --surface-glass-3: rgba(129, 140, 248, 0.18);

    /* Text colors */
    --text-primary: #E8EDF7;       /* Soft white - for main text */
    --text-secondary: #A5B4D4;     /* Cool blue-gray for secondary text */
    --text-muted: rgba(165, 180, 212, 0.65);

    /* State Colors */
    --state-success: #34D399;
    --state-success-bg: rgba(52, 211, 153, 0.15);
    --state-error: #F87171;
    --state-error-bg: rgba(248, 113, 113, 0.15);
    --state-warning: #FBBF24;
    --state-warning-text: #0B1120;
    --state-warning-bg: rgba(251, 191, 36, 0.18);
    --state-info: #38BDF8;
    --state-info-bg: rgba(56, 189, 248, 0.15);

    /* Sticky columns for grades table */
    --sticky-cell-bg: rgba(11, 17, 32, 0.95);
    --sticky-head-bg: rgba(21, 29, 51, 0.98);

    /* Interactive elements & states */
    --hover-overlay: rgba(232, 237, 247, 0.08);
    --active-overlay: rgba(232, 237, 247, 0.12);

    /* Shadows and borders for depth */
    --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.25);
    --shadow-medium: 0 8px 35px rgba(0, 0, 0, 0.35);
    --border-glass: rgba(129, 140, 248, 0.22);
}

.container {
    max-width: 95vw; /* اجعل الحاوية تغطي معظم عرض الشاشة */
    margin: 0 auto;
    padding: 20px;
}

/* على الشاشات الكبيرة جدًا، اسمح بمساحة أكبر */
@media (min-width: 1600px) {
  .container { max-width: 92vw; } /* على الشاشات العريضة جدًا استخدم عرضًا نسبيًا للشاشة */
}

/* Navigation */
.navbar {
    background: var(--surface-glass-2);
    backdrop-filter: blur(20px);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-glass);
    box-shadow: var(--shadow-light);
}

.navbar h1 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.nav-buttons {
    display: flex;
    gap: 1rem;
}

.nav-btn {
    background: var(--surface-glass);
    color: var(--text-secondary);
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-btn:hover, .nav-btn.active {
    background: var(--surface-glass-2);
    border-color: var(--brand-highlight);
    transform: translateY(-1px);
    box-shadow: var(--shadow-light);
    color: var(--brand-cta);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-primary);
}

.admin-badge {
    background: var(--state-error);
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.hidden {
    display: none !important;
}

/* Flash Messages */
.flash-messages {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    max-width: 400px;
}

.flash-message {
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    border: 1px solid transparent;
    position: relative;
    animation: slideIn 0.3s ease;
}

.flash-success { background-color: var(--state-success-bg); border-color: var(--state-success); color: var(--state-success); }
.flash-error { background-color: var(--state-error-bg); border-color: var(--state-error); color: var(--state-error); }
.flash-warning { background-color: var(--state-warning-bg); border-color: var(--state-warning); color: var(--state-warning-text); }
.flash-info { background-color: var(--state-info-bg); border-color: var(--state-info); color: var(--state-info); }

.flash-close {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Login Page */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
}

.login-form {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 3rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

.login-form h2 {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 2rem;
    font-size: 1.8rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    background: var(--surface-glass);
    color: var(--text-primary);
    font-size: 1rem;
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-highlight);
    background: var(--surface-glass-2);
}

.btn {
    background: var(--brand-accent);
    color: var(--brand-cta);
    border: 1px solid var(--border-glass);
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-shadow: var(--shadow-light);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--brand-highlight);
    background: var(--brand-highlight);
    color: var(--brand-primary);
}

.btn-primary {
    background: var(--brand-accent);
}

.btn-secondary {
    background: var(--surface-glass-3);
    border-color: var(--border-glass);
    color: var(--text-secondary);
}

.btn-success {
    background: var(--state-success);
    border-color: var(--state-success);
    color: var(--brand-primary);
}

.btn-danger {
    background: var(--state-error);
    border-color: var(--state-error);
    color: var(--text-primary);
}

.btn-info {
    background: var(--state-info);
    border-color: var(--state-info);
    color: var(--text-primary);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-icon:hover {
    background: var(--hover-overlay);
    color: var(--brand-cta);
}

.btn-icon.btn-danger {
    color: var(--state-error);
}

.btn-icon.btn-danger:hover {
    background: var(--state-error-bg);
}

.hint-box {
    background: var(--surface-glass);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-glass);
}

.hint-role {
    font-weight: 600;
    color: var(--state-warning);
}

/* Dashboard */
.dashboard {
    padding: 2rem 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.section-title {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}


.stat-card {
    background: var(--surface-glass-2);
    backdrop-filter: blur(20px);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid var(--border-glass);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-light);
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
    border-color: var(--brand-highlight);
}

.stat-icon {
    font-size: 3rem;
}

.stat-content h3 {
    color: var(--text-primary);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.stat-content p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.quick-actions {
    background: var(--surface-glass-2);
    backdrop-filter: blur(20px);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-light);
}

.quick-actions h3 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.action-card {
    background: var(--surface-glass-2);
    padding: 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-secondary);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid var(--border-glass);
}

.action-card:hover {
    background: var(--surface-glass-3);
    transform: translateY(-3px);
    color: var(--brand-cta);
}

.action-card i {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

/* Cards Grid */
.classes-grid, .subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.class-card, .subject-card {
    background: var(--surface-glass-2);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid var(--border-glass);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-light);
}

.class-card:hover, .subject-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
    border-color: var(--brand-highlight);
}

.class-header, .subject-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-glass);
}

.class-header h3, .subject-header h3 {
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 600;
}

.class-actions, .subject-actions {
    display: flex;
    gap: 0.5rem;
}

.class-stats {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: center;
}

.stat {
    text-align: center;
    color: var(--text-primary);
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--state-warning);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.class-footer, .subject-footer {
    padding: 1rem 1.5rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.subject-info {
    padding: 1rem 1.5rem;
    color: var(--text-secondary);
}

.components-list {
    padding: 0 1.5rem 1rem;
    max-height: 150px;
    overflow-y: auto;
}

.component-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-glass);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.component-grade {
    font-weight: 600;
    color: var(--state-warning);
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

/* Ensure the transfer modal is on top of the students modal */
#transferModal { z-index: 1100; }
#transferModal .modal-content { position: relative; z-index: 1101; }

/* Badges (used for behavior count per student) */
.badge {
    display: inline-block;
    min-width: 22px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--brand-accent);
    border-radius: 999px;
    vertical-align: middle;
}
.badge-success { background-color: var(--state-success); color: var(--brand-primary); }
.badge-warning { background-color: var(--state-warning); color: var(--state-warning-text); }
.badge-danger { background-color: var(--state-error); color: var(--text-primary); }

.modal-content {
    background: var(--surface-glass-3);
    backdrop-filter: blur(20px);
    margin: 5% auto;
    padding: 0;
    border-radius: 20px;
    border: 1px solid var(--border-glass);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-medium);
    animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text and form colors on glass modal backgrounds */
.modal-content,
.modal-content p,
.modal-content label,
.modal-content .form-text,
.modal-content h3 {
    color: var(--text-primary);
}

.modal-content .form-control {
    background: var(--surface-glass);
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
}

.modal-content .form-control::placeholder {
    color: var(--text-muted);
}

.modal-content .table th,
.modal-content .table td {
    color: var(--text-primary);
}

.modal-large {
    max-width: 800px;
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.3rem;
}

.close {
    color: var(--text-muted);
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

@keyframes modalSlideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Tables */
.table {
    width: 100%;
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    overflow: hidden;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 1rem;
    text-align: right;
    border-bottom: 1px solid var(--border-glass);
}

.table th {
    background: var(--surface-glass-2);
    color: var(--text-primary);
    font-weight: 600;
}

.table td {
    color: var(--text-secondary);
}

.table tbody tr:hover {
    background: var(--hover-overlay);
}

/* Behavior actions row: keep behavior items and the clear button inline */
.behavior-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap; /* منع النزول للسطر التالي */
    gap: 4px;
    overflow-x: auto; /* في حال كان عدد الأزرار كبيرًا */
    white-space: nowrap; /* احتياطي إضافي لمنع التفاف الأزرار */
    width: max-content; /* اجعل الحاوية تتسع للمحتوى وتسمح بالتمرير */
    max-width: 100%;
}

/* امنع المحتوى من الخروج من حدود الخلية حتى لا يغطي عمود الأسماء المثبت */
.grades-table td {
    overflow: hidden;
}

.grades-table td .behavior-actions button {
    margin: 2px 4px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex: 0 0 auto; /* لا تكبر ولا تصغر داخل الفلكس */
}

/* Behavior buttons visual states */
.behavior-btn {
    background: var(--surface-glass-3);
    border: 1px solid var(--border-glass);
}

.behavior-btn.active {
    background: var(--brand-accent); /* لون مميز للحالة المفعلة */
    border-color: var(--brand-accent);
}

/* Improve readability for all select dropdowns */
/* Unified dark theme for select dropdowns */
select.form-control, select {
    background: var(--surface-glass) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-glass);
    -webkit-appearance: none; /* Removes default chrome arrow */
    -moz-appearance: none; /* Removes default firefox arrow */
    appearance: none; /* Standard property */
    background-image: url("data:image/svg+xml;utf8,<svg fill='%2398C1D9' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 50%;
    padding-right: 2rem; /* Make space for custom arrow */
}


select.form-control option, select option {
    color: var(--text-primary);
    background: var(--brand-secondary);
}


.modal-content select.form-control {
    background: var(--surface-glass-2) !important;
    color: var(--text-primary) !important;
}

.role-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.role-badge.admin {
    background: var(--state-error);
    color: var(--text-primary);
}

.role-badge.user {
    background: var(--state-info);
    color: var(--text-primary);
}

/* Grades Page */
.grades-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.grades-controls select {
    min-width: 150px;
}

/* Uniform height for controls in grades toolbar */
.grades-controls .form-control,
.grades-controls .btn {
    height: 50px;
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1.25;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    background: var(--surface-glass-2);
    color: var(--text-primary);
}
.grades-controls .btn i {
    margin-left: 8px;          /* مسافة أفضل بين الأيقونة والنص */
}

/* بعض المتصفحات تحتاج ضبطًا إضافيًا لحقول التاريخ */
.grades-controls input[type="date"] {
    padding-inline-start: 12px;
    padding-inline-end: 12px;
}

.grades-controls .form-control:focus, .grades-controls .btn:hover {
    border-color: var(--brand-highlight);
    background: var(--surface-glass-3);
}

.grades-container {
    margin-top: 2rem;
}

.grades-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.grades-header h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
}

.grades-actions {
    display: flex;
    gap: 0.5rem;
}

/* Global toolbar inside grades-actions: keep controls on one row */
#gradesActionsToolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

#gradesActionsToolbar .form-control {
    height: 44px;
    padding: 0 12px;
}

#gradesActionsToolbar .btn {
    height: 44px;
    display: inline-flex;
    align-items: center;
}

/* On small screens, allow wrapping gracefully */
@media (max-width: 768px) {
  #gradesActionsToolbar { flex-wrap: wrap; }
}

/* ===== Print styles for PDF export ===== */
@media print {
  /* Page setup */
  @page { margin: 16mm; }

  body { background: #fff !important; }
  .container { max-width: 100% !important; padding: 0 !important; }

  /* Hide navigation and non-essential UI */
  .navbar, .flash-messages, .grades-controls, .grades-actions, .grade-sessions,
  .btn, .btn-icon, .nav-buttons, .user-info, .components-header { display: none !important; }

  /* Show the report cleanly */
  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
  .table { background: #fff !important; }
  .table th, .table td { color: #000 !important; border-color: #999 !important; }

  /* Break pages between subjects in student report */
  .subject-section { page-break-after: always; }
  .subject-section:last-child { page-break-after: auto; }

  /* Section header print button hidden */
  .section-header .btn { display: none !important; }
}

.grade-sessions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.session-tab {
    background: var(--surface-glass-2);
    color: var(--text-secondary);
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.session-tab:hover,
.session-tab.active {
    background: var(--brand-accent);
    color: var(--brand-cta);
    border-color: var(--brand-highlight);
}

.grades-table-container {
    background: var(--surface-glass);
    /* NOTE: Chrome/Chromium bug: position: sticky inside a scroller with backdrop-filter breaks sticking.
       Firefox handles it, but Chrome does not (sticky columns stop sticking).
       Disable backdrop-filter on the scrolling container to restore sticky behavior across browsers. */
    /*backdrop-filter: blur(20px);*/
    border-radius: 12px;
    overflow-x: auto; /* تمكين تمرير أفقي عند كثرة الأعمدة */
    overflow-y: hidden;
    margin-bottom: 2rem;
    position: relative; /* لدعم العناصر المثبتة داخلياً */
    border: 1px solid var(--border-glass);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.grades-table {
    margin: 0;
    width: 100%;             /* اجعل الجدول يملأ عرض الحاوية */
    table-layout: auto;      /* السماح للأعمدة بأخذ العرض المناسب */
    border-collapse: separate; /* ضروري لدعم position: sticky على الخلايا */
    border-spacing: 0;         /* الحفاظ على المظهر بدون فراغات إضافية */
    /* Ensure sticky cells are not clipped by table in Chrome */
    overflow: visible;
}

.grades-table th,
.grades-table td {
    min-width: 150px;        /* زيادة العرض الأدنى لكل عمود لتوسيع الجدول */
    text-align: center;
    white-space: nowrap;     /* منع لف النص داخل الخلايا لتفادي انكماش العرض */
}

/* اجعل كل الخلايا غير المثبتة ضمن سياق تكديس أساسي ليظهر العمودين المثبتين فوقها */
.grades-table th,
.grades-table td {
    position: relative;
    z-index: 1; /* أقل من الأعمدة المثبتة */
}

/* جعل الأعمدة الأخيرة أقل عرضًا: الإجراءات، النسبة، المجموع (من اليسار في RTL) */
/* الإجراءات: آخر عمود */
.grades-table th:nth-last-child(1),
.grades-table td:nth-last-child(1) {
    min-width: 90px;
}

/* النسبة المئوية: العمود قبل الأخير */
.grades-table th:nth-last-child(2),
.grades-table td:nth-last-child(2) {
    min-width: 110px;
}

/* المجموع: العمود الثالث من النهاية */
.grades-table th:nth-last-child(3),
.grades-table td:nth-last-child(3) {
    min-width: 110px;
}

/* Widen the Student column for better name visibility */
.grades-table th:first-child,
.grades-table td:first-child {
    min-width: 360px; /* توسيع عمود الطالب لمواكبة اتساع الجدول */
}

/* تثبيت عمود الطالب (أول عمود في RTL) على يمين الجدول أثناء التمرير الأفقي */
.grades-table th:first-child {
    position: sticky;
    right: 0;               /* لأن الواجهة RTL، نثبت على اليمين */
    z-index: 50;            /* فوق بقية الخلايا لضمان الظهور */
    /* خلفية غير شفافة لمنع ظهور الأعمدة من تحتها */
    background-color: var(--sticky-head-bg) !important;
}

.grades-table td:first-child {
    position: sticky;
    right: 0;               /* لأن الواجهة RTL، نثبت على اليمين */
    z-index: 40;            /* أقل من الرأس المثبّت */
    /* خلفية غير شفافة بشكل كافٍ لمنع تداخل المحتوى */
    background-color: var(--sticky-cell-bg) !important;
    box-shadow: -6px 0 8px rgba(0,0,0,0.06); /* خط ظل خفيف للفصل البصري */
}

/* تثبيت عمود الإجراءات (آخر عمود في RTL) على يسار الجدول أثناء التمرير الأفقي */
.grades-table th:last-child {
    position: sticky;
    left: 0;               /* في RTL يكون عمود الإجراءات في اليسار */
    z-index: 50;           /* فوق بقية الخلايا لضمان الظهور */
    background-color: var(--sticky-head-bg) !important;
}

.grades-table td:last-child {
    position: sticky;
    left: 0;               /* في RTL يكون عمود الإجراءات في اليسار */
    z-index: 40;           /* أقل من الرأس المثبّت */
    background-color: var(--sticky-cell-bg) !important;
    box-shadow: 6px 0 8px rgba(0,0,0,0.06); /* ظل على الجانب الأيمن للفصل */
}

.grade-cell {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.grade-cell:hover {
    background: rgba(255, 255, 255, 0.1);
}

.grade-input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    text-align: center;
    width: 60px;
    padding: 0.25rem;
    border-radius: 4px;
}

.grade-input:focus {
    background: var(--surface-glass-2);
    outline: none;
}

.grades-summary {
    background: var(--surface-glass-2);
    backdrop-filter: blur(20px);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-glass);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.summary-item {
    text-align: center;
    color: var(--text-primary);
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--state-warning);
    display: block;
}

.summary-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Photo Preview */
.photo-preview {
    margin-top: 1rem;
    text-align: center;
}

.photo-preview img {
    max-width: 150px;
    max-height: 150px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .nav-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .user-info {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .section-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .grades-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .grades-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .modal-content {
        width: 95%;
        margin: 2% auto;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .actions-grid {
        grid-template-columns: 1fr;
    }
}

/* Students List */
.students-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.students-list {
    max-height: 400px;
    overflow-y: auto;
}

.student-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: background-color 0.3s ease;
}

/* Ensure correct text color on dark student items */
.student-item, .student-item * {
    color: var(--text-secondary);
}
.student-item h4 { color: var(--text-primary); }

.student-item:hover {
    background: var(--surface-glass-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.student-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.student-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.student-photo-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--surface-glass-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-muted);
}

.student-photo-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 0.5rem;
}

.student-details h4 {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.1rem;
}

.student-details p {
    color: var(--text-muted);
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
}

/* Generic dark card component (used in some templates like reports) */
.card {
    background: var(--surface-glass);
    color: var(--text-primary);
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    margin-bottom: 1rem;
}

.card .card-body {
    padding: 1.25rem 1.5rem;
}

.card h3, .card h4, .card h5, .card p, .card span, .card label {
    color: var(--text-primary);
}

.student-actions {
    display: flex;
    gap: 0.5rem;
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Components Table */
.components-table {
    margin-top: 1rem;
}

.components-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Report Styles */
.student-report {
    color: var(--text-primary);
}

.report-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-glass);
}

.report-section {
    margin-bottom: 2rem;
}

.report-section h5 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.subjects-grades {
    display: grid;
    gap: 1rem;
}

.subject-grade-item {
    background: var(--surface-glass-2);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-glass);
}

.subject-grade-item h6 {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.components-grades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.component-grade {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-glass);
}

.subject-total {
    font-weight: bold;
    color: var(--brand-cta);
    text-align: center;
    padding: 0.5rem;
    background: var(--brand-accent);
    border-radius: 4px;
}

.stats-grid .stat-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #dee2e6;
}

/* Form Enhancements */
.form-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.full-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* ===== Round action buttons for grades (increase/decrease) ===== */
.grade-controls {
    display: flex;
    align-items: center;
    justify-content: space-between; /* value at start (right in RTL), buttons at end (left) */
    width: 100%;
    gap: 8px;
}

.grade-controls .round-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.08s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.grade-controls .round-btn i { color: #fff; font-size: 12px; line-height: 1; }

.grade-controls .round-btn.decrease { background: #e74c3c; }
.grade-controls .round-btn.increase { background: #10b981; }

.grade-controls .round-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0,0,0,0.2); }
.grade-controls .round-btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.grade-controls .round-btn:disabled { opacity: 0.6; cursor: default; }

.grade-controls .grade-value {
    display: inline-block;
    min-width: 64px;
    text-align: center;
    font-weight: 600;
}

/* Color coding for session||total values inside grade cells */
.grade-controls .grade-value .sess { opacity: 0.9; }
.grade-controls .grade-value .sep { opacity: 0.6; padding: 0 2px; }
.grade-controls .grade-value .total { color: #10b981; font-weight: 700; }

/* Also apply to penalty cells which reuse sess|sep|total spans */
.grades-table td.penalty-cell .total { color: #10b981; font-weight: 700; }
.grades-table td.penalty-cell .sep { opacity: 0.6; padding: 0 2px; }
.grades-table td.penalty-cell .sess { opacity: 0.9; }

.grade-controls .btns {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ===== Grades table: column separation and striping ===== */
/* Vertical separators between columns */
.grades-table thead th:not(:first-child),
.grades-table tbody td:not(:first-child) {
    border-inline-start: 1px solid var(--border-glass);
    /* Fallback for older browsers */
    border-right: 1px solid var(--border-glass);
}

/* Alternate column background shades for better distinction */
.grades-table td:nth-child(odd) {
    background-color: var(--hover-overlay);
}

.grades-table td:nth-child(even) {
    background-color: transparent;
}

/* Keep row hover subtle while preserving column distinction */
.grades-table tbody tr:hover td {
    background-color: var(--hover-overlay);
}

/* Darker header row for grades table */
.grades-table thead th {
    background-color: var(--sticky-head-bg) !important;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-glass);
}

/* ===== Attendance mode specific tweaks ===== */
/* قلل عرض عمود الرقم التسلسلي فقط في جدول الحضور */
.grades-table.attendance-mode .serial-col {
    width: 56px;
    min-width: 50px;
    max-width: 64px;
    text-align: center;
}

/* لا تجعل العمود الأول (الرقم) مثبتًا في وضع الحضور */
.grades-table.attendance-mode th:first-child,
.grades-table.attendance-mode td:first-child {
    position: static;
    right: auto;
    left: auto;
    z-index: 1;
    background: transparent !important;
    box-shadow: none;
}

/* بدلاً من ذلك، ثبّت عمود الطالب (العمود الثاني) على اليمين */
.grades-table.attendance-mode th:nth-child(2) {
    position: sticky;
    right: 0;
    z-index: 50;
    background-color: var(--sticky-head-bg) !important;
}

.grades-table.attendance-mode td:nth-child(2) {
    position: sticky;
    right: 0;
    z-index: 40;
    background-color: var(--sticky-cell-bg) !important;
    box-shadow: -6px 0 8px rgba(0,0,0,0.06);
}

/* ===== Boxes Page (الصندوق) ===== */
.boxes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    align-items: stretch;
    width: 100%;
}

.box-card {
    position: relative;
    background: #f0f0f0; /* Fallback */
    border: none;
    border-radius: 16px;
    aspect-ratio: 1 / 1; /* square */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: var(--shadow-light);
    padding: 8px;
}

.box-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }

.box-content {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.box-number, .box-name {
    position: absolute;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-align: center;
    padding: 0 8px;
}

.box-name {
    opacity: 0;
    transform: scale(0.9);
    font-size: 1.2rem;
}

.box-card.revealed .box-number {
    opacity: 0;
    transform: scale(0.9);
}

.box-card.revealed .box-name {
    opacity: 1;
    transform: scale(1);
}

/* Corner sticker (decor like screenshot) */
.box-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.1) 50%);
    z-index: 1; /* keep sticker behind inner content */
}

.box-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, white 50%, #ccc 50%);
    border-bottom-right-radius: 10px;
    z-index: 1; /* keep sticker behind inner content */
}

/* Ensure the flip faces and overlays sit above the corner sticker */
.box-card .card-inner,
.box-card .face { position: relative; z-index: 2; }
.box-card .box-name,
.box-card .pill { position: relative; z-index: 3; }
/* Provide extra bottom room so pill doesn't touch the sticker */
.box-card .face.back { padding-bottom: 22px; display:flex; flex-direction:column; align-items:center; gap:8px; }

/* Color variants similar to screenshot frames */
.box-card.color-1 { background-color: #f2c94c; box-shadow: 0 4px 12px rgba(242,201,76,0.3); }
.box-card.color-2 { background-color: #f2994a; box-shadow: 0 4px 12px rgba(242,153,74,0.3); }
.box-card.color-3 { background-color: #eb5757; box-shadow: 0 4px 12px rgba(235,87,87,0.3); }
.box-card.color-4 { background-color: #bb6bd9; box-shadow: 0 4px 12px rgba(187,107,217,0.3); }

/* Fade-in animation for name */
.fade-in { animation: nameFade 260ms ease forwards; }
@keyframes nameFade {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px) {
  .boxes-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* ===== Behavior mode: نفس أسلوب الحضور ===== */
.grades-table.behavior-mode .serial-col {
    width: 56px;
    min-width: 50px;
    max-width: 64px;
    text-align: center;
}

.grades-table.behavior-mode th:first-child,
.grades-table.behavior-mode td:first-child {
    position: static;
    right: auto;
    left: auto;
    z-index: 1;
    background: transparent !important;
    box-shadow: none;
}

.grades-table.behavior-mode th:nth-child(2) {
    position: sticky;
    right: 0;
    z-index: 50;
    background-color: var(--sticky-head-bg) !important;
}

.grades-table.behavior-mode td:nth-child(2) {
    position: sticky;
    right: 0;
    z-index: 40;
    background-color: var(--sticky-cell-bg) !important;
    box-shadow: -6px 0 8px rgba(0,0,0,0.06);
}

/* ===== Tests mode: نفس الأسلوب ===== */
.grades-table.tests-mode .serial-col {
    width: 56px;
    min-width: 50px;
    max-width: 64px;
    text-align: center;
}

.grades-table.tests-mode th:first-child,
.grades-table.tests-mode td:first-child {
    position: static;
    right: auto;
    left: auto;
    z-index: 1;
    background: transparent !important;
    box-shadow: none;
}

.grades-table.tests-mode th:nth-child(2) {
    position: sticky;
    right: 0;
    z-index: 50;
    background-color: var(--sticky-head-bg) !important;
}

.grades-table.tests-mode td:nth-child(2) {
    position: sticky;
    right: 0;
    z-index: 40;
    background-color: var(--sticky-cell-bg) !important;
    box-shadow: -6px 0 8px rgba(0,0,0,0.06);
}

/* ===== Student Lookup page styles ===== */
.elevated-card {
  box-shadow: 0 8px 20px rgba(0,0,0,0.14);
  border-radius: 12px;
}

.pill {
  background: var(--surface-glass-3);
  border: 1px solid var(--border-glass);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
}

.grade-score { font-size: 28px; font-weight: 800; }
.grade-pass { color: #1ec28b; }
.grade-fail { color: #e95b5b; }

.lookup-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 14px; /* مساحة إضافية تحت الخط */
}
.lookup-footer .footer-col { flex: 1 1 280px; }
.lookup-footer .footer-teacher { text-align: right; padding-right: 90px; }
.lookup-footer .footer-principal { text-align: left; padding-left: 90px; }
.lookup-footer .footer-label { opacity: .8; font-weight: 600; }
.lookup-footer .footer-value { margin-top: 8px; margin-bottom: 6px; font-size: 16px; }
/* اجعل الأسماء تحت العناوين بنفس الإزاحة الجانبية */
.lookup-footer .footer-teacher .footer-value { padding-right: 87px; }
.lookup-footer .footer-principal .footer-value { padding-left: 107px; }

@media (max-width: 640px) {
  .lookup-footer .footer-teacher,
  .lookup-footer .footer-principal { text-align: start; }
}

/* خط متصل أسفل عنوان (الدرجات) */
.grades-title {
  position: relative;
  padding-bottom: 8px;
}
.grades-title::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--border-glass);
}

/* تباعد عناصر نموذج البحث عن الطالب */
.lookup-form .row { gap: 20px !important; }
.lookup-form .form-group label { display:block; margin-bottom: 6px; }
.lookup-form .form-actions { margin-top: auto; margin-bottom: 22px; }

/* مسافة أسطر أكبر في ملخص الطالب تحت الصورة */
.student-summary { line-height: 1.6; }
.evaluation-details { line-height: 1.7; }

/* خط أسفل عنوان (التقدير) وبنفس السماكة */
.evaluation-title {
  position: relative;
  padding-bottom: 8px;
  margin-top: 6px; /* إنزال العنوان قليلاً */
  display: flex;
  align-items: center;
  gap: 280px; /* مسافة أكبر بين كلمة التقدير والشارة */
}
.evaluation-title .eval-title-text { margin-inline-end: 0; }
.evaluation-title .eval-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-glass-3);
  border: 1px solid var(--border-glass);
  font-size: 14px;
  line-height: 1.2;
}
/* ألوان الشارة حسب التقدير */
.evaluation-title .eval-chip.grade-pass {
  color: #1ec28b;
  background: rgba(30,194,139,0.10);
  border-color: rgba(30,194,139,0.45);
}
.evaluation-title .eval-chip.grade-fail {
  color: #e95b5b;
  background: rgba(233,91,91,0.10);
  border-color: rgba(233,91,91,0.45);
}
.evaluation-title::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--border-glass);
}

@media (max-width: 640px) {
  .lookup-footer .footer-teacher .footer-value { padding-right: 24px; }
  .lookup-footer .footer-principal .footer-value { padding-left: 24px; }
}

/* زِد مسافة العناوين فقط دون التأثير على الأسماء */
.lookup-footer .footer-teacher .footer-label { padding-right: 120px; }
.lookup-footer .footer-principal .footer-label { padding-left: 120px; }

@media (max-width: 640px) {
  .lookup-footer .footer-teacher .footer-label { padding-right: 28px; }
  .lookup-footer .footer-principal .footer-label { padding-left: 28px; }
}