/* ==========================================================
   bootstrap-theme.css — جسر متغيرات Bootstrap
   بيوصل متغيرات Bootstrap (--bs-*) بتوكنز التصميم بتاعتنا في
   tokens.css، عشان كل مكونات Bootstrap (أزرار / مودالز / تابز /
   جداول / dropdown) تورّث هوية "ورقة الرسم البياني" تلقائيًا.
   ========================================================== */
:root{
  --bs-body-font-family:'Tajawal', sans-serif;
  --bs-body-bg:var(--paper);
  --bs-body-color:var(--ink);
  --bs-border-color:var(--border);
  --bs-border-radius:10px;
  --bs-border-radius-lg:14px;
  --bs-border-radius-sm:8px;
  --bs-primary:#E8590C;
  --bs-primary-rgb:232,89,12;
  --bs-link-color:#E8590C;
  --bs-link-hover-color:#c94c09;
  --bs-secondary-color:var(--ink-soft);
  --bs-emphasis-color:var(--ink);
  --bs-tertiary-bg:var(--grid-line-soft);
  --bs-secondary-bg:var(--grid-line-soft);
}
[data-theme="dark"]{
  --bs-body-bg:var(--paper);
  --bs-body-color:var(--ink);
  --bs-border-color:var(--border);
  --bs-tertiary-bg:var(--grid-line-soft);
  --bs-secondary-bg:var(--grid-line-soft);
  --bs-secondary-color:var(--ink-soft);
  --bs-emphasis-color:var(--ink);
}

/* modal / dropdown theming (Bootstrap components, our palette) */
.modal-content{ background:var(--paper-raised); color:var(--ink); border:1px solid var(--border); border-radius:var(--bs-border-radius-lg); }
.modal-header, .modal-footer{ border-color:var(--border); }
.form-label{ font-weight:700; font-size:.82rem; }
.form-control, .form-select{ background:var(--paper); color:var(--ink); border-color:var(--border); }
.form-control:focus, .form-select:focus{ border-color:var(--accent-orange); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--accent-orange) 18%, transparent); background:var(--paper); color:var(--ink); }
.input-group-text{ background:var(--grid-line-soft); border-color:var(--border); color:var(--ink-soft); }
.dropdown-menu{ background:var(--paper-raised); border-color:var(--border); box-shadow:var(--shadow-card); }
.dropdown-item{ color:var(--ink); }
.dropdown-item:hover, .dropdown-item:focus{ background:var(--grid-line-soft); color:var(--ink); }
.offcanvas{ background:var(--paper-raised); color:var(--ink); }
.nav-pills .nav-link{ color:var(--ink-soft); font-weight:700; font-size:.85rem; border-radius:9px; }
.nav-pills .nav-link.active{ background:var(--ink); color:var(--paper); }
.table{ --bs-table-bg:transparent; font-size:.85rem; }
.table thead th{ color:var(--ink-faint); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; font-family:var(--font-mono); border-bottom-width:1px; }

/* Scrollable table wrapper — caps long tables (attendance/grades/reports/etc.) at a fixed
   height with a sticky header instead of pushing the rest of the page down. Works alongside
   Bootstrap's .table-responsive (horizontal scroll); this adds the vertical one. */
.table-scroll{ max-height:22rem; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--grid-line) transparent; }
.table-scroll thead th{ position:sticky; top:0; background:var(--paper-raised); box-shadow:inset 0 -1px 0 var(--border); z-index:1; }
.table-scroll::-webkit-scrollbar{ width:8px; height:8px; }
.table-scroll::-webkit-scrollbar-track{ background:transparent; }
.table-scroll::-webkit-scrollbar-thumb{ background:var(--grid-line); border-radius:999px; }
.table-scroll::-webkit-scrollbar-thumb:hover{ background:var(--ink-faint); }
.btn-close{ filter: var(--btn-close-filter, none); }
[data-theme="dark"] .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); }