/* ==========================================================================
   Dark Mode Override Stylesheet
   Scola Data Master — Bootstrap 5 / Custom Theme
   All rules scoped under [data-theme="dark"] so they have zero effect in light mode.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Color Palette Reference
   --------------------------------------------------------------------------
   Body background:      #1a1d21
   Card/surface:         #212529
   Elevated surface:     #2c3034
   Border:               #373b3f
   Primary text:         #e1e4e8
   Heading text:         #ffffff
   Muted text:           #8b949e
   Link color:           #58a6ff
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. Base Surfaces
   ========================================================================== */

[data-theme="dark"] body {
  background-color: #1a1d21;
  color: #e1e4e8;
  --bs-border-color: #373b3f;
}

[data-theme="dark"] .main-content {
  background-color: #1a1d21;
}

[data-theme="dark"] .container-fluid {
  background-color: transparent;
}

/* ==========================================================================
   2. Typography
   ========================================================================== */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
  color: #ffffff;
}

[data-theme="dark"] .header-title {
  color: #ffffff;
}

[data-theme="dark"] p,
[data-theme="dark"] label,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] small {
  color: #e1e4e8;
}

[data-theme="dark"] .text-muted {
  color: #8b949e !important;
}

[data-theme="dark"] a {
  color: #58a6ff;
}

[data-theme="dark"] a:hover {
  color: #79b8ff;
}

[data-theme="dark"] .text-body {
  color: #2268c4 !important;
}

[data-theme="dark"] .text-dark {
  color: #e1e4e8 !important;
}

[data-theme="dark"] .blockquote-footer {
  color: #8b949e;
}

[data-theme="dark"] hr {
  border-top-color: #373b3f;
}

/* Bootstrap 5 border utility classes */
[data-theme="dark"] .border-top {
  border-top-color: #373b3f !important;
}

[data-theme="dark"] .border-bottom {
  border-bottom-color: #373b3f !important;
}

[data-theme="dark"] .border-start {
  border-left-color: #373b3f !important;
}

[data-theme="dark"] .border-end {
  border-right-color: #373b3f !important;
}

[data-theme="dark"] .border {
  border-color: #373b3f !important;
}

/* ==========================================================================
   3. Cards
   ========================================================================== */

[data-theme="dark"] .card {
  background-color: #212529;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .card-header {
  background-color: #212529;
  border-bottom-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .card-footer {
  background-color: #212529;
  border-top-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .card-body {
  background-color: #212529;
  color: #e1e4e8;
}

[data-theme="dark"] .card-title {
  color: #ffffff;
}

/* ==========================================================================
   4. Sidebar (Custom .sidebar component — replaces Dashkit .navbar-vertical)
   ========================================================================== */

[data-theme="dark"] .sidebar {
  background-color: #1a1d21;
  border-right-color: #373b3f;
}

[data-theme="dark"] .sidebar-brand {
  border-bottom-color: #373b3f;
}

/* User profile section */
[data-theme="dark"] .sidebar-user {
  border-bottom-color: #ffffff;
}

[data-theme="dark"] .sidebar-user-name {
  color: #ffffff;
}

[data-theme="dark"] .sidebar-user-role {
  color: #8b949e;
}

[data-theme="dark"] .sidebar-user-avatar img {
  border-color: #373b3f;
}

/* Navigation links */
[data-theme="dark"] .sidebar-nav .nav-link {
  color: #8b949e;
  background-color: transparent;
}

[data-theme="dark"] .sidebar-nav .nav-link:hover {
  color: #e1e4e8;
  background-color: #2c3034;
}

[data-theme="dark"] .sidebar-nav .nav-link.active {
  color: #58a6ff;
  background-color: rgba(88, 166, 255, 0.08);
  border-left-color: #58a6ff;
}

/* Sub-menu links */
[data-theme="dark"] .sidebar-nav .nav-sub .nav-link {
  color: #8b949e;
  background-color: transparent;
}

[data-theme="dark"] .sidebar-nav .nav-sub .nav-link:hover {
  color: #e1e4e8;
}

[data-theme="dark"] .sidebar-nav .nav-sub .nav-link.active {
  color: #58a6ff;
  background-color: transparent;
}

/* Collapse sub-nav containers */
[data-theme="dark"] .sidebar .collapse,
[data-theme="dark"] .sidebar .collapsing {
  background-color: transparent;
}

/* Sidebar footer */
[data-theme="dark"] .sidebar-footer {
  background-color: #1a1d21;
  border-top-color: #373b3f;
}

/* Sidebar skeleton placeholders */
[data-theme="dark"] .sidebar .skeleton-avatar,
[data-theme="dark"] .sidebar .skeleton-line {
  background: linear-gradient(90deg, #2c3034 25%, #373b3f 50%, #2c3034 75%);
  background-size: 200% 100%;
}

/* Profile dropdown button in sidebar */
[data-theme="dark"] .btn-profile {
  color: #e1e4e8;
  border-color: #373b3f;
}

[data-theme="dark"] .btn-profile:hover {
  color: #ffffff;
  background-color: #2c3034;
}

[data-theme="dark"] .btn-profile h4 {
  color: #ffffff;
}

[data-theme="dark"] .btn-profile small {
  color: #8b949e;
}

/* Mobile top navbar */
[data-theme="dark"] .sidebar-mobile-navbar {
  background-color: #1a1d21 !important;
  border-bottom-color: #373b3f !important;
}

[data-theme="dark"] .sidebar-mobile-navbar .btn-white {
  background-color: transparent;
  border-color: transparent;
  color: #e1e4e8;
}

/* Off-canvas sidebar on mobile */
[data-theme="dark"] .offcanvas-start,
[data-theme="dark"] .offcanvas-md {
  background-color: #1a1d21;
  border-right-color: #373b3f;
}

[data-theme="dark"] .offcanvas-header {
  background-color: #1a1d21;
  border-bottom-color: #373b3f;
}

[data-theme="dark"] .offcanvas-body {
  background-color: #1a1d21;
}

/* ==========================================================================
   5. Tables
   ========================================================================== */

[data-theme="dark"] .table {
  color: #e1e4e8;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-top-color: #373b3f;
}

[data-theme="dark"] .table > :not(caption) > * > * {
  border-bottom-color: #373b3f;
}

[data-theme="dark"] .table thead th {
  border-bottom-color: #373b3f;
  color: #8b949e;
  background-color: #2c3034;
}

[data-theme="dark"] .table tbody tr {
  background-color: #212529;
}

[data-theme="dark"] .table-hover tbody tr:hover {
  color: #e1e4e8;
  background-color: #2c3034;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
  background-color: #2c3034;
}

[data-theme="dark"] .table-bordered {
  border-color: #373b3f;
}

[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
  border-color: #373b3f;
}

[data-theme="dark"] .table tbody + tbody {
  border-top-color: #373b3f;
}

/* ==========================================================================
   6. Forms (Bootstrap 5 classes)
   ========================================================================== */

[data-theme="dark"] .form-control {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .form-control:focus {
  background-color: #2c3034;
  border-color: #58a6ff;
  color: #e1e4e8;
}

[data-theme="dark"] .form-control::placeholder {
  color: #8b949e;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
  background-color: #1a1d21;
  color: #8b949e;
}

/* Bootstrap 5 form-select (replaces custom-select) */
[data-theme="dark"] .form-select {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .form-select:focus {
  border-color: #58a6ff;
}

/* Bootstrap 5 form-label */
[data-theme="dark"] .form-label {
  color: #e1e4e8;
}

[data-theme="dark"] .input-group-text {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #8b949e;
}

/* Bootstrap 5 form-check (replaces custom-control) */
[data-theme="dark"] .form-check-input {
  background-color: #2c3034;
  border-color: #373b3f;
}

[data-theme="dark"] .form-check-label {
  color: #e1e4e8;
}

[data-theme="dark"] .form-control-plaintext {
  color: #e1e4e8;
}

/* Validation feedback */
[data-theme="dark"] .invalid-feedback {
  color: #f85149;
}

[data-theme="dark"] .valid-feedback {
  color: #3fb950;
}

/* ==========================================================================
   7. Dropdowns
   ========================================================================== */

[data-theme="dark"] .dropdown-menu {
  background-color: #212529;
  border-color: #373b3f;
}

[data-theme="dark"] .dropdown-item {
  color: #e1e4e8;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: #2c3034;
  color: #ffffff;
}

[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
  background-color: #2c3034;
  color: #ffffff;
}

[data-theme="dark"] .dropdown-divider {
  border-top-color: #373b3f;
}

[data-theme="dark"] .dropdown-header {
  color: #8b949e;
}

/* ==========================================================================
   8. Modals
   ========================================================================== */

[data-theme="dark"] .modal-content {
  background-color: #212529;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .modal-header {
  background-color: #212529;
  border-bottom-color: #373b3f;
}

[data-theme="dark"] .modal-header .modal-title {
  color: #ffffff;
}

/* Bootstrap 5 btn-close (replaces .close) */
[data-theme="dark"] .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .modal-footer {
  background-color: #212529;
  border-top-color: #373b3f;
}

[data-theme="dark"] .modal-backdrop.show {
  opacity: 0.7;
}

/* ==========================================================================
   9. Alerts
   ========================================================================== */

[data-theme="dark"] .alert-primary {
  background-color: rgba(0, 115, 224, 0.15);
  border-color: rgba(0, 115, 224, 0.25);
  color: #58a6ff;
}

[data-theme="dark"] .alert-secondary {
  background-color: rgba(110, 132, 163, 0.15);
  border-color: rgba(110, 132, 163, 0.25);
  color: #8b949e;
}

[data-theme="dark"] .alert-success {
  background-color: rgba(27, 170, 86, 0.15);
  border-color: rgba(27, 170, 86, 0.25);
  color: #3fb950;
}

[data-theme="dark"] .alert-info {
  background-color: rgba(57, 175, 209, 0.15);
  border-color: rgba(57, 175, 209, 0.25);
  color: #39afd1;
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(246, 195, 67, 0.15);
  border-color: rgba(246, 195, 67, 0.25);
  color: #f6c343;
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(241, 62, 0, 0.15);
  border-color: rgba(241, 62, 0, 0.25);
  color: #f85149;
}

[data-theme="dark"] .alert-light {
  background-color: rgba(237, 242, 249, 0.1);
  border-color: rgba(237, 242, 249, 0.15);
  color: #8b949e;
}

[data-theme="dark"] .alert-dark {
  background-color: rgba(18, 38, 63, 0.3);
  border-color: rgba(18, 38, 63, 0.4);
  color: #e1e4e8;
}

/* ==========================================================================
   10. Badges
   ========================================================================== */

[data-theme="dark"] .badge-soft-primary {
  background-color: rgba(0, 115, 224, 0.2);
  color: #58a6ff;
}

[data-theme="dark"] .badge-soft-secondary {
  background-color: rgba(110, 132, 163, 0.2);
  color: #8b949e;
}

[data-theme="dark"] .badge-soft-success {
  background-color: rgba(27, 170, 86, 0.2);
  color: #3fb950;
}

[data-theme="dark"] .badge-soft-info {
  background-color: rgba(57, 175, 209, 0.2);
  color: #39afd1;
}

[data-theme="dark"] .badge-soft-warning {
  background-color: rgba(246, 195, 67, 0.2);
  color: #f6c343;
}

[data-theme="dark"] .badge-soft-danger {
  background-color: rgba(241, 62, 0, 0.2);
  color: #f85149;
}

/* Bootstrap 5 bg-* badge variants */
[data-theme="dark"] .bg-light {
  background-color: #373b3f !important;
  color: #e1e4e8 !important;
}

[data-theme="dark"] .bg-dark {
  background-color: #4a5058 !important;
  color: #e1e4e8 !important;
}

[data-theme="dark"] .bg-primary {
  background-color: #005ec4 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .bg-success {
  background-color: #178a47 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .bg-danger {
  background-color: #c23500 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .bg-warning {
  background-color: #c9a227 !important;
  color: #1a1d21 !important;
}

[data-theme="dark"] .bg-info {
  background-color: #2e8fa8 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .bg-secondary {
  background-color: #4a5568 !important;
  color: #e1e4e8 !important;
}

/* ==========================================================================
   11. Buttons
   ========================================================================== */

[data-theme="dark"] .btn-primary,
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] button.btn-primary,
[data-theme="dark"] input.btn-primary {
  background-color: #005ec4 !important;
  border-color: #005ec4 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] a.btn-primary:hover {
  background-color: #004fa6 !important;
  border-color: #004fa6 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] .btn-primary.focus,
[data-theme="dark"] a.btn-primary:focus {
  background-color: #004fa6 !important;
  border-color: #004fa6 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 .15rem rgba(0, 94, 196, 0.4) !important;
}

[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-primary.active,
[data-theme="dark"] a.btn-primary:active {
  background-color: #004290 !important;
  border-color: #004290 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:disabled,
[data-theme="dark"] .btn-primary.disabled {
  background-color: #005ec4 !important;
  border-color: #005ec4 !important;
  opacity: 0.5;
}

[data-theme="dark"] .btn-white {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .btn-white:hover {
  background-color: #373b3f;
  border-color: #444c56;
  color: #ffffff;
}

[data-theme="dark"] .btn-light {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .btn-light:hover {
  background-color: #373b3f;
  border-color: #444c56;
  color: #ffffff;
}

[data-theme="dark"] .btn-outline-secondary {
  border-color: #373b3f;
  color: #8b949e;
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #2c3034;
  border-color: #444c56;
  color: #e1e4e8;
}

/* Bootstrap 5 btn-close (replaces .close) */
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================================================
   12. List Groups
   ========================================================================== */

[data-theme="dark"] .list-group-item {
  background-color: #212529;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .list-group-item:hover {
  background-color: #2c3034;
}

[data-theme="dark"] .list-group-item.active {
  background-color: #0073e0;
  border-color: #0073e0;
}

/* ==========================================================================
   13. Pagination
   ========================================================================== */

[data-theme="dark"] .page-link {
  background-color: #212529;
  border-color: #373b3f;
  color: #58a6ff;
}

[data-theme="dark"] .page-link:hover {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #79b8ff;
}

[data-theme="dark"] .page-item.active .page-link {
  background-color: #0073e0;
  border-color: #0073e0;
  color: #ffffff;
}

[data-theme="dark"] .page-item.disabled .page-link {
  background-color: #1a1d21;
  border-color: #373b3f;
  color: #8b949e;
}

/* ==========================================================================
   14. Breadcrumbs
   ========================================================================== */

[data-theme="dark"] .breadcrumb {
  background-color: transparent;
}

[data-theme="dark"] .breadcrumb-item a {
  color: #8b949e;
}

[data-theme="dark"] .breadcrumb-item a:hover {
  color: #58a6ff;
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: #8b949e;
}

[data-theme="dark"] .breadcrumb-item.active {
  color: #8b949e;
}

/* ==========================================================================
   15. Navs and Tabs
   ========================================================================== */

[data-theme="dark"] .nav-tabs {
  border-bottom-color: #373b3f;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: #8b949e;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: #212529;
  border-color: #373b3f #373b3f #212529;
  color: #ffffff;
}

/* ==========================================================================
   16. Spinners and Loading States
   ========================================================================== */

[data-theme="dark"] .spinner-border {
  color: #58a6ff;
}

/* ==========================================================================
   17. Tooltips and Popovers
   ========================================================================== */

[data-theme="dark"] .popover {
  background-color: #2c3034;
  border-color: #373b3f;
}

[data-theme="dark"] .popover-header {
  background-color: #212529;
  border-bottom-color: #373b3f;
  color: #ffffff;
}

[data-theme="dark"] .popover-body {
  color: #e1e4e8;
}

/* ==========================================================================
   18. Progress Bars
   ========================================================================== */

[data-theme="dark"] .progress {
  background-color: #2c3034;
}

/* ==========================================================================
   19. Scrollbar (Webkit)
   ========================================================================== */

[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1a1d21;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #373b3f;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: #444c56;
}

/* ==========================================================================
   20. Custom Theme Overrides (replaces Dashkit-specific section)
   ========================================================================== */

/* Header component */
[data-theme="dark"] .header {
  background-color: #212529;
  border-bottom-color: #373b3f;
}

[data-theme="dark"] .header-body {
  border-bottom-color: #373b3f;
}

/* Avatar */
[data-theme="dark"] .avatar-title {
  color: #ffffff;
}

/* Card table */
[data-theme="dark"] .card .table {
  background-color: #212529;
}

/* Input group flush (search bars in card headers) */
[data-theme="dark"] .input-group-flush .form-control {
  background-color: #212529;
  border-color: transparent;
}

[data-theme="dark"] .input-group-flush .input-group-text {
  background-color: #212529;
  border-color: transparent;
}

/* Comment and activity feed */
[data-theme="dark"] .comment-body {
  background-color: #2c3034;
}

/* Spacer */
[data-theme="dark"] .spacer-top {
  background-color: transparent;
}

/* Shadow overrides for dark mode */
[data-theme="dark"] .shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .shadow {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5) !important;
}

/* Media image containers (e.g., school logos) */
[data-theme="dark"] .media-img {
  border-color: #373b3f;
  background-color: #2d333b;
}

/* ==========================================================================
   21. Page Header Component
   ========================================================================== */

[data-theme="dark"] .page-header .page-header-title {
  color: #ffffff;
}

/* ==========================================================================
   22. Toast Notification Component
   ========================================================================== */

[data-theme="dark"] .toast-container .toast-notification {
  background-color: #212529;
  border-color: #373b3f;
}

[data-theme="dark"] .toast-container .toast-message {
  color: #e1e4e8;
}

[data-theme="dark"] .toast-container .toast-notification.toast-success {
  border-left-color: #3fb950;
}

[data-theme="dark"] .toast-container .toast-notification.toast-success .toast-icon {
  color: #3fb950;
}

[data-theme="dark"] .toast-container .toast-notification.toast-error {
  border-left-color: #f85149;
}

[data-theme="dark"] .toast-container .toast-notification.toast-error .toast-icon {
  color: #f85149;
}

[data-theme="dark"] .toast-container .toast-notification.toast-info {
  border-left-color: #39afd1;
}

[data-theme="dark"] .toast-container .toast-notification.toast-info .toast-icon {
  color: #39afd1;
}

[data-theme="dark"] .toast-container .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================================================
   23. Skeleton Loader Component
   ========================================================================== */

[data-theme="dark"] .skeleton-loader .skeleton-shimmer {
  background: linear-gradient(90deg, #2c3034 25%, #373b3f 50%, #2c3034 75%);
  background-size: 200% 100%;
}

[data-theme="dark"] .skeleton-loader .skeleton-card {
  border-color: #373b3f;
}

[data-theme="dark"] .skeleton-loader .skeleton-row {
  border-bottom-color: #373b3f;
}

[data-theme="dark"] .skeleton-loader .skeleton-stats-card {
  background-color: #212529;
  border-color: #373b3f;
}

[data-theme="dark"] .skeleton-loader .skeleton-stats-card .card-body {
  background-color: #212529;
}

/* ==========================================================================
   24. Stats Card Component (Dashboard)
   ========================================================================== */

[data-theme="dark"] .stats-card h3 {
  color: #ffffff;
}

[data-theme="dark"] .stats-card:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .stats-card-icon--primary {
  background-color: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
}

[data-theme="dark"] .stats-card-icon--success {
  background-color: rgba(63, 185, 80, 0.15);
  color: #3fb950;
}

[data-theme="dark"] .stats-card-icon--info {
  background-color: rgba(57, 175, 209, 0.15);
  color: #39afd1;
}

[data-theme="dark"] .stats-card-icon--warning {
  background-color: rgba(246, 195, 67, 0.15);
  color: #f6c343;
}

/* ==========================================================================
   25. DataList Component
   ========================================================================== */

[data-theme="dark"] .data-list-header {
  border-bottom-color: #373b3f;
}

[data-theme="dark"] .data-list-header-cell {
  color: #8b949e;
}

[data-theme="dark"] .data-list-row {
  border-bottom-color: #373b3f;
}

[data-theme="dark"] .data-list-row:hover {
  background-color: rgba(88, 166, 255, 0.04);
}

[data-theme="dark"] .data-list-cell {
  color: #e1e4e8;
}

/* Detail rows inside data-list name cells (school, edtiva, etc.) */
[data-theme="dark"] .data-list-cell .border-top {
  border-top-color: #373b3f !important;
}

[data-theme="dark"] .data-list-cell h2,
[data-theme="dark"] .data-list-cell .name {
  color: #ffffff;
}

[data-theme="dark"] .data-list-cell .fw-bold {
  color: #e1e4e8;
}

[data-theme="dark"] .data-list-cell .fe {
  color: #8b949e;
}

[data-theme="dark"] .data-list-cell .flex-shrink-0 {
  color: #8b949e;
}

/* Ensure media-img inside data-list doesn't show white box */
[data-theme="dark"] .data-list-cell .media-img {
  background-color: #2d333b;
  border-color: #373b3f !important;
}

[data-theme="dark"] .data-list-empty-icon {
  color: #8b949e;
}

[data-theme="dark"] .data-list-empty-message {
  color: #e1e4e8;
}

/* Responsive stacked card layout in dark mode */
@media (max-width: 575.98px) {
  [data-theme="dark"] .data-list-row {
    border-color: #373b3f;
    background-color: #212529;
  }

  [data-theme="dark"] .data-list-cell {
    border-bottom-color: #373b3f;
  }

  [data-theme="dark"] .data-list-cell::before {
    color: #8b949e;
  }
}

/* ==========================================================================
   26. SearchBar Component
   ========================================================================== */

[data-theme="dark"] .search-bar .search-bar-icon {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #8b949e;
}

[data-theme="dark"] .search-bar .search-bar-input {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .search-bar .search-bar-input::placeholder {
  color: #8b949e;
}

[data-theme="dark"] .search-bar .search-bar-input:focus {
  border-color: #58a6ff;
}

[data-theme="dark"] .search-bar .search-bar-clear {
  color: #8b949e;
}

[data-theme="dark"] .search-bar .search-bar-clear:hover {
  color: #e1e4e8;
}

/* ==========================================================================
   27. Signin Page
   ========================================================================== */

/* Full-page wrapper background for auth pages (no sidebar) */
[data-theme="dark"] .d-flex.align-items-center.min-vh-100 {
  background-color: #1a1d21;
}

/* Background image column — ensure it stays visible in dark mode */
[data-theme="dark"] .auth-card .card-col-img {
  background-color: #2c3034;
  opacity: 0.9;
}

/* Auth card surface */
[data-theme="dark"] .auth-card {
  background-color: #212529;
  border-color: #373b3f;
}

/* Auth card body */
[data-theme="dark"] .auth-card .card-body {
  background-color: #212529;
}

/* Auth heading */
[data-theme="dark"] .auth-card .h2 {
  color: #ffffff;
}

/* Auth subheading */
[data-theme="dark"] .auth-card .text-muted {
  color: #8b949e !important;
}

/* Form labels on auth pages */
[data-theme="dark"] .auth-card .form-label,
[data-theme="dark"] .auth-card label {
  color: #e1e4e8;
}

/* Form inputs on auth pages */
[data-theme="dark"] .auth-card .form-control {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .auth-card .form-control:focus {
  background-color: #2c3034;
  border-color: #58a6ff;
  color: #e1e4e8;
}

[data-theme="dark"] .auth-card .form-control::placeholder {
  color: #8b949e;
}

/* Form select on auth pages */
[data-theme="dark"] .auth-card .form-select {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .auth-card .form-select:focus {
  border-color: #58a6ff;
}

/* Validation feedback text */
[data-theme="dark"] .auth-card .invalid-feedback {
  color: #f85149;
}

/* Twofactor bg-light info box */
[data-theme="dark"] .auth-card .bg-light {
  background-color: #2c3034 !important;
  color: #e1e4e8;
}

/* Twofactor bg-lighter input */
[data-theme="dark"] .auth-card .bg-lighter {
  background-color: #2c3034 !important;
}

/* Alert overrides inside auth card */
[data-theme="dark"] .auth-card .alert-danger {
  background-color: rgba(248, 81, 73, 0.15);
  border-color: rgba(248, 81, 73, 0.25);
  color: #f85149;
}

[data-theme="dark"] .auth-card .alert-warning {
  background-color: rgba(246, 195, 67, 0.15);
  border-color: rgba(246, 195, 67, 0.25);
  color: #f0c040;
}

/* Auth page button overrides */
[data-theme="dark"] .auth-card .btn-white {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .auth-card .btn-white:hover {
  background-color: #373b3f;
  border-color: #484e54;
  color: #ffffff;
}

/* Legacy fallback — keep old selectors for any non-migrated auth pages */
[data-theme="dark"] .card.shadow-sm {
  background-color: #212529;
  border-color: #373b3f;
}

[data-theme="dark"] .card.shadow-sm .card-body {
  background-color: #212529;
}

[data-theme="dark"] .card.shadow-sm .form-control {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .card.shadow-sm .form-control:focus {
  background-color: #2c3034;
  border-color: #58a6ff;
  color: #e1e4e8;
}

[data-theme="dark"] .card.shadow-sm .form-control::placeholder {
  color: #8b949e;
}

/* ==========================================================================
   28. Third-Party Component Overrides — SweetAlert2
   ========================================================================== */

[data-theme="dark"] .swal2-popup {
  background-color: #212529;
  color: #e1e4e8;
}

[data-theme="dark"] .swal2-title {
  color: #ffffff;
}

[data-theme="dark"] .swal2-content {
  color: #e1e4e8;
}

[data-theme="dark"] .swal2-html-container {
  color: #e1e4e8;
}

[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
[data-theme="dark"] .swal2-select {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .swal2-input::placeholder,
[data-theme="dark"] .swal2-textarea::placeholder {
  color: #8b949e;
}

[data-theme="dark"] .swal2-validation-message {
  background-color: #2c3034;
  color: #f85149;
}

[data-theme="dark"] .swal2-footer {
  border-top-color: #373b3f;
  color: #8b949e;
}

[data-theme="dark"] .swal2-close {
  color: #8b949e;
}

[data-theme="dark"] .swal2-close:hover {
  color: #e1e4e8;
}

/* ==========================================================================
   29. Third-Party Component Overrides — vue-multiselect
   ========================================================================== */

[data-theme="dark"] .multiselect__tags {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .multiselect__input,
[data-theme="dark"] .multiselect__single {
  background-color: #2c3034;
  color: #e1e4e8;
}

[data-theme="dark"] .multiselect__input::placeholder {
  color: #8b949e;
}

[data-theme="dark"] .multiselect__placeholder {
  color: #8b949e;
}

[data-theme="dark"] .multiselect__content-wrapper {
  background-color: #212529;
  border-color: #373b3f;
}

[data-theme="dark"] .multiselect__option {
  background-color: #212529;
  color: #e1e4e8;
}

[data-theme="dark"] .multiselect__option:hover {
  background-color: #2c3034;
  color: #ffffff;
}

[data-theme="dark"] .multiselect__option--highlight {
  background-color: #2c3034;
  color: #ffffff;
}

[data-theme="dark"] .multiselect__option--selected {
  background-color: #373b3f;
  color: #ffffff;
}

[data-theme="dark"] .multiselect__option--selected.multiselect__option--highlight {
  background-color: #373b3f;
  color: #ffffff;
}

[data-theme="dark"] .multiselect__tag {
  background-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .multiselect__tag-icon::after {
  color: #8b949e;
}

[data-theme="dark"] .multiselect__tag-icon:hover::after {
  color: #ffffff;
}

[data-theme="dark"] .multiselect__spinner::before,
[data-theme="dark"] .multiselect__spinner::after {
  border-top-color: #58a6ff;
}

[data-theme="dark"] .multiselect--disabled {
  background-color: #1a1d21;
  opacity: 0.7;
}

/* ==========================================================================
   30. Third-Party Component Overrides — Flatpickr
   ========================================================================== */

[data-theme="dark"] .flatpickr-calendar {
  background-color: #212529;
  border-color: #373b3f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .flatpickr-calendar::before,
[data-theme="dark"] .flatpickr-calendar::after {
  border-bottom-color: #212529;
}

[data-theme="dark"] .flatpickr-months {
  background-color: #212529;
}

[data-theme="dark"] .flatpickr-months .flatpickr-month {
  background-color: #212529;
  color: #e1e4e8;
}

[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
  background-color: #212529;
  color: #e1e4e8;
}

[data-theme="dark"] .flatpickr-current-month input.cur-year {
  color: #e1e4e8;
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
  color: #8b949e;
  fill: #8b949e;
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover {
  color: #e1e4e8;
  fill: #e1e4e8;
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
  fill: #8b949e;
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #e1e4e8;
}

[data-theme="dark"] .flatpickr-weekdays {
  background-color: #212529;
}

[data-theme="dark"] span.flatpickr-weekday {
  background-color: #212529;
  color: #8b949e;
}

[data-theme="dark"] .flatpickr-day {
  color: #e1e4e8;
}

[data-theme="dark"] .flatpickr-day:hover {
  background-color: #2c3034;
  border-color: #2c3034;
  color: #ffffff;
}

[data-theme="dark"] .flatpickr-day.today {
  border-color: #58a6ff;
}

[data-theme="dark"] .flatpickr-day.today:hover {
  background-color: #58a6ff;
  border-color: #58a6ff;
  color: #ffffff;
}

[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
  background-color: #58a6ff;
  border-color: #58a6ff;
  color: #ffffff;
}

[data-theme="dark"] .flatpickr-day.selected:hover,
[data-theme="dark"] .flatpickr-day.startRange:hover,
[data-theme="dark"] .flatpickr-day.endRange:hover {
  background-color: #79b8ff;
  border-color: #79b8ff;
  color: #ffffff;
}

[data-theme="dark"] .flatpickr-day.inRange {
  background-color: #2c3034;
  border-color: #2c3034;
  color: #e1e4e8;
  box-shadow: -5px 0 0 #2c3034, 5px 0 0 #2c3034;
}

[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
  color: #8b949e;
}

[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover {
  color: #8b949e;
  opacity: 0.4;
}

[data-theme="dark"] .flatpickr-time {
  border-top-color: #373b3f;
}

[data-theme="dark"] .flatpickr-time input {
  background-color: #212529;
  color: #e1e4e8;
}

[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
  background-color: #212529;
  color: #e1e4e8;
}

[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover,
[data-theme="dark"] .flatpickr-time input:hover {
  background-color: #2c3034;
}

/* ==========================================================================
   31. Third-Party Component Overrides — Quill Editor
   ========================================================================== */

[data-theme="dark"] .ql-toolbar {
  background-color: #2c3034;
  border-color: #373b3f;
}

[data-theme="dark"] .ql-toolbar .ql-stroke {
  stroke: #8b949e;
}

[data-theme="dark"] .ql-toolbar .ql-fill {
  fill: #8b949e;
}

[data-theme="dark"] .ql-toolbar .ql-picker {
  color: #8b949e;
}

[data-theme="dark"] .ql-toolbar .ql-picker-label:hover,
[data-theme="dark"] .ql-toolbar .ql-picker-label.ql-active,
[data-theme="dark"] .ql-toolbar button:hover,
[data-theme="dark"] .ql-toolbar button.ql-active {
  color: #58a6ff;
}

[data-theme="dark"] .ql-toolbar button:hover .ql-stroke,
[data-theme="dark"] .ql-toolbar button.ql-active .ql-stroke,
[data-theme="dark"] .ql-toolbar .ql-picker-label:hover .ql-stroke,
[data-theme="dark"] .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
  stroke: #58a6ff;
}

[data-theme="dark"] .ql-toolbar button:hover .ql-fill,
[data-theme="dark"] .ql-toolbar button.ql-active .ql-fill,
[data-theme="dark"] .ql-toolbar .ql-picker-label:hover .ql-fill,
[data-theme="dark"] .ql-toolbar .ql-picker-label.ql-active .ql-fill {
  fill: #58a6ff;
}

[data-theme="dark"] .ql-toolbar .ql-picker-options {
  background-color: #212529;
  border-color: #373b3f;
}

[data-theme="dark"] .ql-toolbar .ql-picker-item:hover {
  color: #58a6ff;
}

[data-theme="dark"] .ql-container {
  background-color: #212529;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .ql-editor {
  background-color: #212529;
  color: #e1e4e8;
}

[data-theme="dark"] .ql-editor.ql-blank::before {
  color: #8b949e;
}

[data-theme="dark"] .ql-snow .ql-tooltip {
  background-color: #2c3034;
  border-color: #373b3f;
  color: #e1e4e8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
  background-color: #212529;
  border-color: #373b3f;
  color: #e1e4e8;
}

[data-theme="dark"] .ql-snow .ql-tooltip a {
  color: #58a6ff;
}


/* ==========================================================================
   32. Legacy Dashkit Class Overrides
   ========================================================================== */

/* Header title */
[data-theme="dark"] .header-title {
  color: #ffffff;
}

/* Card header title */
[data-theme="dark"] .card-header-title {
  color: #ffffff;
}

/* Card action layout */
[data-theme="dark"] .card-action--title {
  color: #ffffff;
}

/* Input group flush (search bars) */
[data-theme="dark"] .input-group-flush .form-control {
  background-color: transparent;
  color: #e1e4e8;
}

[data-theme="dark"] .input-group-flush .form-control::placeholder {
  color: #8b949e;
}

[data-theme="dark"] .input-group-flush .input-group-text {
  background-color: transparent;
  color: #8b949e;
}

/* Badge text button */
[data-theme="dark"] .badge-text {
  color: #8b949e;
}

[data-theme="dark"] .badge-text:hover {
  color: #58a6ff;
}

/* Table no-wrap in dark mode */
[data-theme="dark"] .table-nowrap th,
[data-theme="dark"] .table-nowrap td {
  color: #e1e4e8;
}