:root {
  --bs-primary: #6366f1; /* indigo-500 */
  --bs-primary-rgb: 99,102,241;
  --bs-body-font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --app-bg: #f6f7fb;
  --app-card: #ffffff;
  --app-muted: #64748b;
}

html, body { height: 100%; }
body {
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
}

 .navbar {
  --nav-start: var(--bs-primary);
  --nav-end: color-mix(in srgb, var(--bs-primary) 80%, #000 20%);
  background: linear-gradient(90deg, var(--nav-start), var(--nav-end));
  backdrop-filter: saturate(140%) blur(6px);
 }
 .navbar .nav-link { opacity: .9; }
 .navbar .nav-link.active, .navbar .nav-link:hover { opacity: 1; }

.card {
  background: var(--app-card);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.card .card-body { padding: 1.25rem 1.25rem; }

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #4f46e5;
  --bs-btn-hover-border-color: #4f46e5;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); }

.form-control, .form-select {
  border-radius: 12px;
  border-color: rgba(100,116,139,.3);
}
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .15);
  border-color: var(--bs-primary);
}

.table {
  --bs-table-striped-bg: rgba(0,0,0,.02);
  --bs-table-hover-bg: rgba(99,102,241,.07);
  font-size: .95rem;
}
.table thead th { white-space: nowrap; position: sticky; top: 0; background: var(--app-card); z-index: 1; }
.table td { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }

.filter-bar .form-select, .filter-bar .form-control { min-width: 160px; }

/* Subtle motion */
.card, .btn, .form-control, .form-select { transition: all .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.12); }

/* Charts spacing */
canvas { max-width: 100%; }

/* Color picker dot */
.dropdown-menu .dot {
  
  display: inline-block; width: 12px; height: 12px; border-radius: 999px; margin-inline-end: .4rem; background: var(--dot);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,.1);
}


/* Students table: allow wrapping header cells and slightly smaller font to fit many columns */
.students-table thead th {
  white-space: normal;
  font-size: 0.8rem;
}
.students-table td {
  font-size: 0.8rem;
}


/* Enhance main navbar appearance & priority */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 8px 18px rgba(15,23,42,.45);
}
.navbar-brand {
  font-size: 1.1rem;
}
.navbar-nav .nav-link {
  padding-inline: 1rem;
  padding-block: .45rem;
}