html[data-theme="dark"] .top-app-bar,
body[data-theme="dark"] .top-app-bar {
  background:
    linear-gradient(180deg, rgba(13, 20, 36, 0.96), rgba(13, 20, 36, 0.88));
  border-bottom-color: var(--cdx-border);
}

html[data-theme="dark"] .icon-btn[data-theme-toggle],
body[data-theme="dark"] .icon-btn[data-theme-toggle] {
  border-color: color-mix(in srgb, var(--cdx-primary) 22%, var(--cdx-border));
  background:
    linear-gradient(135deg, rgba(81, 165, 246, 0.18), rgba(64, 197, 165, 0.16)),
    var(--cdx-surface-2);
  color: var(--cdx-primary-600);
}

html[data-theme="dark"] .dashboard-greeting,
body[data-theme="dark"] .dashboard-greeting {
  background:
    linear-gradient(135deg, rgba(47, 128, 237, 0.14), rgba(32, 169, 139, 0.1)),
    var(--cdx-surface);
}

html[data-theme="dark"] .kpi-card,
body[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .quick-action,
body[data-theme="dark"] .quick-action {
  border-color: color-mix(in srgb, var(--cdx-primary) 12%, var(--cdx-border));
  background:
    radial-gradient(circle at 100% 0%, rgba(81, 165, 246, 0.12), transparent 4.8rem),
    linear-gradient(180deg, var(--cdx-surface), color-mix(in srgb, var(--cdx-surface-2) 72%, var(--cdx-surface)));
}

html[data-theme="dark"] .soft-blue-card,
html[data-theme="dark"] .soft-cyan-card,
html[data-theme="dark"] .soft-purple-card,
html[data-theme="dark"] .card-accent-blue,
html[data-theme="dark"] .card-accent-teal,
html[data-theme="dark"] .card-accent-purple,
html[data-theme="dark"] .notice-feature-card,
html[data-theme="dark"] .notice-card,
html[data-theme="dark"] .notice-card-employee,
html[data-theme="dark"] .notice-card-parent,
html[data-theme="dark"] .teacher-notice,
body[data-theme="dark"] .soft-blue-card,
body[data-theme="dark"] .soft-cyan-card,
body[data-theme="dark"] .soft-purple-card,
body[data-theme="dark"] .card-accent-blue,
body[data-theme="dark"] .card-accent-teal,
body[data-theme="dark"] .card-accent-purple,
body[data-theme="dark"] .notice-feature-card,
body[data-theme="dark"] .notice-card,
body[data-theme="dark"] .notice-card-employee,
body[data-theme="dark"] .notice-card-parent,
body[data-theme="dark"] .teacher-notice {
  border-color: color-mix(in srgb, var(--cdx-primary) 14%, var(--cdx-border));
  background:
    radial-gradient(circle at 100% 0%, rgba(81, 165, 246, 0.13), transparent 7rem),
    linear-gradient(180deg, var(--cdx-surface), color-mix(in srgb, var(--cdx-surface-2) 74%, var(--cdx-surface)));
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .notice-chip,
html[data-theme="dark"] .student-chip,
html[data-theme="dark"] .teacher-chip,
html[data-theme="dark"] .employee-chip,
html[data-theme="dark"] .parent-chip,
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .notice-chip,
body[data-theme="dark"] .student-chip,
body[data-theme="dark"] .teacher-chip,
body[data-theme="dark"] .employee-chip,
body[data-theme="dark"] .parent-chip {
  background: linear-gradient(180deg, var(--cdx-surface), var(--cdx-surface-2));
  border-color: var(--cdx-border);
}

html[data-theme="dark"] .bottom-nav,
body[data-theme="dark"] .bottom-nav {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cdx-surface) 86%, transparent), color-mix(in srgb, var(--cdx-surface) 96%, transparent));
  box-shadow: 0 -16px 38px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .bottom-nav-link.is-active,
html[data-theme="dark"] .bottom-nav-link[aria-current="page"],
body[data-theme="dark"] .bottom-nav-link.is-active,
body[data-theme="dark"] .bottom-nav-link[aria-current="page"] {
  background:
    linear-gradient(135deg, rgba(81, 165, 246, 0.18), rgba(64, 197, 165, 0.13)),
    var(--cdx-primary-soft);
  color: var(--cdx-primary-700);
}

html[data-theme="dark"] .icon-dot::after,
body[data-theme="dark"] .icon-dot::after {
  border-color: var(--cdx-surface);
}

html[data-theme="dark"] .notification-count,
body[data-theme="dark"] .notification-count {
  border-color: var(--cdx-surface);
  box-shadow: 0 6px 14px rgba(248, 113, 113, 0.22);
}

html[data-theme="dark"] .mobile-preloader,
body[data-theme="dark"] .mobile-preloader {
  background:
    radial-gradient(circle at 50% 44%, rgba(47, 128, 237, 0.2), transparent 17rem),
    rgba(13, 20, 36, 0.94);
}

html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .app-icon,
html[data-theme="dark"] .fab,
html[data-theme="dark"] .btn-primary,
body[data-theme="dark"] .brand-mark,
body[data-theme="dark"] .app-icon,
body[data-theme="dark"] .fab,
body[data-theme="dark"] .btn-primary {
  box-shadow: 0 18px 42px rgba(47, 128, 237, 0.18);
}

html[data-theme="dark"] .mobile-toast,
body[data-theme="dark"] .mobile-toast {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, currentColor 8%, transparent), transparent 6rem),
    var(--cdx-surface);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .avatar-symbolic,
html[data-theme="dark"] .student-photo,
html[data-theme="dark"] .student-top-action,
html[data-theme="dark"] .teacher-photo,
html[data-theme="dark"] .teacher-top-action,
html[data-theme="dark"] .employee-photo,
html[data-theme="dark"] .employee-top-action,
html[data-theme="dark"] .staff-avatar,
html[data-theme="dark"] .parent-avatar,
html[data-theme="dark"] .child-avatar,
html[data-theme="dark"] .parent-top-action,
html[data-theme="dark"] .teacher-avatar,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .id-face,
html[data-theme="dark"] .profile-avatar-lg,
html[data-theme="dark"] .profile-avatar-teacher,
html[data-theme="dark"] .profile-avatar-employee,
html[data-theme="dark"] .profile-avatar-parent,
html[data-theme="dark"] .comm-avatar,
html[data-theme="dark"] .comm-avatar-sm,
body[data-theme="dark"] .avatar-symbolic,
body[data-theme="dark"] .student-photo,
body[data-theme="dark"] .student-top-action,
body[data-theme="dark"] .teacher-photo,
body[data-theme="dark"] .teacher-top-action,
body[data-theme="dark"] .employee-photo,
body[data-theme="dark"] .employee-top-action,
body[data-theme="dark"] .staff-avatar,
body[data-theme="dark"] .parent-avatar,
body[data-theme="dark"] .child-avatar,
body[data-theme="dark"] .parent-top-action,
body[data-theme="dark"] .teacher-avatar,
body[data-theme="dark"] .avatar,
body[data-theme="dark"] .id-face,
body[data-theme="dark"] .profile-avatar-lg,
body[data-theme="dark"] .profile-avatar-teacher,
body[data-theme="dark"] .profile-avatar-employee,
body[data-theme="dark"] .profile-avatar-parent,
body[data-theme="dark"] .comm-avatar,
body[data-theme="dark"] .comm-avatar-sm {
  border-color: color-mix(in srgb, #8b95a3 28%, var(--cdx-border));
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.12), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, #303b4d 72%, var(--cdx-surface)), color-mix(in srgb, #202a3b 82%, var(--cdx-surface-2))) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}