/* Dark Mode Theme Overrides */

/* ── Core variable overrides ─────────────────────── */
[data-theme="dark"] {
  --bg: #0f1117;
  --bg-alt: #1a1d27;
  --text: #e4e4e7;
  --text-muted: #a1a1aa;

  /* Gray scale shifts for dark */
  --gray-50: #1a1d27;
  --gray-100: #1e2130;
  --gray-200: #2e3348;
  --gray-300: #3f4460;
  --gray-400: #6b7194;
  --gray-500: #9198b0;
  --gray-600: #b0b5c9;
  --gray-700: #cdd1e0;
  --gray-800: #e4e4e7;
  --gray-900: #f4f4f5;

  /* Green tints for dark backgrounds */
  --green-50: rgba(22, 101, 52, 0.15);
  --green-100: rgba(22, 101, 52, 0.25);

  /* Gold tints for dark backgrounds */
  --gold-50: rgba(245, 158, 11, 0.1);
  --gold-100: rgba(245, 158, 11, 0.2);

  /* Shadows — deeper for dark mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* ── Body ─────────────────────────────────────────── */
[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

/* ── Header ───────────────────────────────────────── */
[data-theme="dark"] .header {
  background: #13151e;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .logo-name {
  color: #f4f4f5;
}

[data-theme="dark"] .nav-list > li > a {
  color: #cdd1e0;
}

[data-theme="dark"] .nav-list > li > a:hover,
[data-theme="dark"] .nav-list > li > a.active {
  color: var(--green-400);
  background: rgba(22, 101, 52, 0.15);
}

[data-theme="dark"] .dropdown-menu {
  background: #1e2130;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .dropdown-menu a {
  color: #cdd1e0;
}

[data-theme="dark"] .dropdown-menu a:hover,
[data-theme="dark"] .dropdown-menu a.active {
  background: rgba(22, 101, 52, 0.15);
  color: var(--green-400);
}

[data-theme="dark"] .mobile-toggle span {
  background: #cdd1e0;
}

/* v2.5.0: Dark mode logo — keep original green+white, just boost brightness slightly
   The logo has white text on a green shape, which reads well on dark backgrounds.
   Previous brightness(0) invert(1) turned it into a flat white silhouette, hiding the school name. */
[data-theme="dark"] .logo-img {
  filter: brightness(1.1);
}

/* ── Theme Toggle Button ──────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--green-50);
  color: var(--primary);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 20px;
  height: 20px;
}

/* Show/hide icons based on theme */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }

[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

[data-theme="dark"] .theme-toggle {
  color: #cdd1e0;
}

[data-theme="dark"] .theme-toggle:hover {
  background: rgba(22, 101, 52, 0.15);
  color: var(--green-400);
}

/* ── Cards ────────────────────────────────────────── */
[data-theme="dark"] .card-item {
  background: #1e2130;
}

[data-theme="dark"] .info-card {
  background: #1e2130;
  border-color: #2e3348;
}

[data-theme="dark"] .info-card:hover {
  border-color: rgba(22, 163, 74, 0.4);
}

/* ── Announcements ────────────────────────────────── */
[data-theme="dark"] .announcements-section {
  background: var(--bg-alt);
}

[data-theme="dark"] .announcement-card {
  background: #1e2130;
}

/* ── Quick Links ──────────────────────────────────── */
[data-theme="dark"] .quick-link {
  background: var(--bg-alt);
  border-color: #2e3348;
}

[data-theme="dark"] .quick-link:hover {
  background: #1e2130;
  border-color: rgba(22, 163, 74, 0.4);
}

/* ── Features ─────────────────────────────────────── */
[data-theme="dark"] .feature-card {
  background: var(--bg-alt);
}

[data-theme="dark"] .feature-card:hover {
  background: #1e2130;
}

/* ── Testimonials ─────────────────────────────────── */
[data-theme="dark"] .testimonials-section {
  background: var(--bg-alt);
}

[data-theme="dark"] .testimonial-card {
  background: #1e2130;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .testimonial-author {
  border-top-color: #2e3348;
}

/* ── News ─────────────────────────────────────────── */
[data-theme="dark"] .news-section {
  background: var(--bg-alt);
}

[data-theme="dark"] .news-card {
  background: #1e2130;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .news-card-category {
  background: rgba(22, 101, 52, 0.2);
}

/* ── Team ─────────────────────────────────────────── */
[data-theme="dark"] .team-section {
  background: var(--bg);
}

[data-theme="dark"] .team-card {
  background: #1e2130;
}

[data-theme="dark"] .team-card-image {
  background: #2e3348;
}

[data-theme="dark"] .team-card-placeholder {
  background: #2e3348;
}

/* ── Stats ────────────────────────────────────────── */
[data-theme="dark"] .stats-section--default {
  background: var(--bg);
}

[data-theme="dark"] .stat-label {
  color: #e4e4e7;
}

/* ── Gallery ──────────────────────────────────────── */
[data-theme="dark"] .gallery-section {
  background: var(--bg-alt);
}

[data-theme="dark"] .gallery-filter {
  background: #1e2130;
  border-color: #2e3348;
  color: #a1a1aa;
}

[data-theme="dark"] .gallery-filter:hover {
  border-color: rgba(22, 163, 74, 0.4);
}

[data-theme="dark"] .gallery-carousel-btn {
  background: #1e2130;
  border-color: #2e3348;
  color: #cdd1e0;
}

/* ── Contact ──────────────────────────────────────── */
[data-theme="dark"] .contact-form-wrapper {
  background: var(--bg-alt);
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form select,
[data-theme="dark"] .contact-form textarea {
  background: #1e2130;
  border-color: #2e3348;
  color: var(--text);
}

[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form select:focus,
[data-theme="dark"] .contact-form textarea:focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* ── Forms (generic) ──────────────────────────────── */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
  background: #1e2130;
  border-color: #2e3348;
  color: var(--text);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* ── CTA ──────────────────────────────────────────── */
[data-theme="dark"] .cta-section {
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
}

[data-theme="dark"] .cta-section .btn-outline {
  border-color: #3f4460;
  color: #cdd1e0;
}

[data-theme="dark"] .cta-section .btn-outline:hover {
  background: #1e2130;
  border-color: #6b7194;
}

/* ── Accordion ────────────────────────────────────── */
[data-theme="dark"] .accordion {
  border-color: #2e3348;
}

[data-theme="dark"] .accordion-item {
  background: #1e2130;
}

[data-theme="dark"] .accordion-header {
  background: #1e2130;
  border-bottom-color: #2e3348;
  color: var(--text);
}

[data-theme="dark"] .accordion-header:hover {
  background: rgba(22, 101, 52, 0.1);
}

/* ── Policy List ──────────────────────────────────── */
[data-theme="dark"] .policy-category {
  background: #1e2130;
  border-color: #2e3348;
}

[data-theme="dark"] .policy-category.prohibited .policy-icon {
  background: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .policy-category.optional .policy-icon {
  background: rgba(59, 130, 246, 0.15);
}

/* ── Pages (content, about) ───────────────────────── */
[data-theme="dark"] .content-section.alt {
  background: var(--bg-alt);
}

/* ── Mobile nav ───────────────────────────────────── */
@media (max-width: 768px) {
  [data-theme="dark"] .nav {
    background: #13151e;
  }

  [data-theme="dark"] .nav-list > li > a {
    border-bottom-color: #2e3348;
  }
}

/* ── Loading ──────────────────────────────────────── */
[data-theme="dark"] .loading-spinner {
  border-color: #2e3348;
  border-top-color: var(--green-500);
}

/* ── Footer ───────────────────────────────────────── */
/* Footer is designed dark (gray-900 bg), but gray scale inverts in dark mode.
   Pin it to explicit dark colors so it stays dark in both themes. */
[data-theme="dark"] .footer {
  background: #111827;
  color: #9ca3af;
}

[data-theme="dark"] .footer-logo {
  color: #f4f4f5;
}

[data-theme="dark"] .footer-col h4 {
  color: #f4f4f5;
}

[data-theme="dark"] .footer-col a {
  color: #9ca3af;
}

[data-theme="dark"] .footer-col address {
  color: #9ca3af;
}

[data-theme="dark"] .social-links a {
  background: #1f2937;
  color: #9ca3af;
}

[data-theme="dark"] .social-links a:hover {
  background: var(--green-600);
  color: white;
}

[data-theme="dark"] .footer-bottom {
  border-top-color: #1f2937;
  color: #6b7280;
}

[data-theme="dark"] .staff-portal-link a {
  background: #1f2937;
  color: #9ca3af;
}

[data-theme="dark"] .staff-portal-link a:hover {
  background: var(--green-600);
  color: white;
}

/* ── Editor — Dark Mode ───────────────────────────── */

/* Bottom toolbar — pin to explicit dark since it uses gray-900 which inverts */
[data-theme="dark"] #editor-toolbar {
  background: #111827;
  color: #fff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .editor-toolbar-user {
  color: #9ca3af;
}

/* Toolbar buttons — outline style needs pinning */
[data-theme="dark"] .editor-btn-outline {
  color: #fff;
  border-color: #6b7280;
}

[data-theme="dark"] .editor-btn-outline:hover {
  border-color: #9ca3af;
}

/* Ghost button (logout etc) in toolbar */
[data-theme="dark"] .editor-btn-ghost {
  color: #9ca3af;
}

[data-theme="dark"] .editor-btn-ghost:hover {
  color: #fff;
}

/* Section overlay bar — designed dark, pin colors */
[data-theme="dark"] .editor-overlay-bar {
  background: #111827;
}

[data-theme="dark"] .editor-overlay-label {
  color: #d1d5db;
}

[data-theme="dark"] .editor-overlay-btn {
  background: #374151;
  color: #fff;
}

[data-theme="dark"] .editor-overlay-btn:hover {
  background: #4b5563;
}

[data-theme="dark"] .editor-overlay-btn:disabled:hover {
  background: #374151;
}

/* Side panel */
[data-theme="dark"] #editor-panel {
  background: #1e2130;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .editor-panel-header {
  border-bottom-color: #2e3348;
}

[data-theme="dark"] .editor-panel-footer {
  border-top-color: #2e3348;
}

/* Form fields in editor */
[data-theme="dark"] .editor-field input[type="text"],
[data-theme="dark"] .editor-field textarea,
[data-theme="dark"] .editor-field select {
  background: #13151e;
  border-color: #2e3348;
  color: #e4e4e7;
}

[data-theme="dark"] .editor-field input[type="text"]:focus,
[data-theme="dark"] .editor-field textarea:focus,
[data-theme="dark"] .editor-field select:focus {
  border-color: var(--green-500);
}

/* Repeater items */
[data-theme="dark"] .editor-repeater-item {
  background: #13151e;
  border-color: #2e3348;
}

[data-theme="dark"] .editor-repeater-field input[type="text"],
[data-theme="dark"] .editor-repeater-field textarea,
[data-theme="dark"] .editor-repeater-field select {
  background: #1e2130;
  border-color: #2e3348;
  color: #e4e4e7;
}

/* Content editor toolbar */
[data-theme="dark"] .editor-format-toolbar {
  background: #13151e;
  border-bottom-color: #2e3348;
}

[data-theme="dark"] .editor-format-btn {
  color: #cdd1e0;
}

[data-theme="dark"] .editor-format-btn:hover {
  background: #2e3348;
}

[data-theme="dark"] .editor-format-btn:active,
[data-theme="dark"] .editor-format-btn.active {
  background: #3f4460;
  color: var(--green-400);
}

[data-theme="dark"] .editor-format-sep {
  background: #2e3348;
}

[data-theme="dark"] .editor-content-container {
  border-color: #2e3348;
}

[data-theme="dark"] .editor-visual-content {
  background: #13151e;
  color: #e4e4e7;
}

/* Image preview border */
[data-theme="dark"] .editor-image-preview,
[data-theme="dark"] .editor-popover-image-preview {
  border-color: #2e3348;
}

/* Section type picker */
[data-theme="dark"] .editor-section-type-btn {
  background: #13151e;
  border-color: #2e3348;
  color: #e4e4e7;
}

[data-theme="dark"] .editor-section-type-btn:hover {
  border-color: var(--green-500);
  background: rgba(22, 101, 52, 0.15);
}

[data-theme="dark"] .editor-section-type-btn-paste {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .editor-section-type-btn-paste:hover {
  border-color: #60a5fa;
  background: rgba(59, 130, 246, 0.2);
}

/* Popovers (item edit + settings) */
[data-theme="dark"] .editor-popover {
  background: #1e2130;
  border-color: #2e3348;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .editor-popover-header {
  border-bottom-color: #2e3348;
  color: #e4e4e7;
}

[data-theme="dark"] .editor-popover-close {
  color: #6b7194;
}

[data-theme="dark"] .editor-popover-close:hover {
  color: #e4e4e7;
}

[data-theme="dark"] .editor-popover-footer {
  border-top-color: #2e3348;
}

[data-theme="dark"] .editor-popover-field input[type="text"],
[data-theme="dark"] .editor-popover-field input[type="number"],
[data-theme="dark"] .editor-popover-field textarea,
[data-theme="dark"] .editor-popover-field select {
  background: #13151e;
  border-color: #2e3348;
  color: #e4e4e7;
}

[data-theme="dark"] .editor-settings-popover {
  background: #1e2130;
  border-color: #2e3348;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .editor-settings-popover input[type="text"],
[data-theme="dark"] .editor-settings-popover input[type="number"],
[data-theme="dark"] .editor-settings-popover select {
  background: #13151e;
  border-color: #2e3348;
  color: #e4e4e7;
}

/* HTML modal */
[data-theme="dark"] .editor-html-modal {
  background: #1e2130;
}

[data-theme="dark"] .editor-html-modal-header {
  border-bottom-color: #2e3348;
}

/* Outline buttons on light bg — need visible borders in dark */
[data-theme="dark"] .editor-btn-outline-dark {
  color: #cdd1e0;
  border-color: #3f4460;
}

[data-theme="dark"] .editor-btn-outline-dark:hover {
  border-color: #6b7194;
  background: #2e3348;
}

/* Login button */
[data-theme="dark"] .editor-login-btn {
  background: #111827;
}

[data-theme="dark"] .editor-login-btn:hover {
  background: #1e2130;
}

/* Media library modal */
[data-theme="dark"] .media-library-modal {
  background: #1e2130;
}

[data-theme="dark"] .media-library-header {
  border-bottom-color: #2e3348;
}

[data-theme="dark"] .media-library-header h3 {
  color: #e4e4e7;
}

[data-theme="dark"] .media-library-close {
  color: #6b7194;
}

[data-theme="dark"] .media-library-close:hover {
  background: #2e3348;
  color: #e4e4e7;
}

[data-theme="dark"] .media-library-item {
  border-color: #2e3348;
}

[data-theme="dark"] .media-library-item:hover {
  border-color: var(--green-500);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

[data-theme="dark"] .media-library-item img {
  background: #13151e;
}

[data-theme="dark"] .media-library-name {
  color: #9198b0;
  border-top-color: #2e3348;
}

[data-theme="dark"] .media-library-footer {
  border-top-color: #2e3348;
}

/* Image picker dropdown — gray-900 bg inverts to near-white in dark */
[data-theme="dark"] .editor-image-picker {
  background: #111827;
  border-color: #374151;
}

/* Gallery manager items */
[data-theme="dark"] .gallery-mgr-item {
  background: #1e2130;
  border-color: #2e3348;
}

[data-theme="dark"] .gallery-mgr-thumb {
  background: #13151e;
}

[data-theme="dark"] .gallery-mgr-empty {
  color: #9198b0;
}

/* Gallery upload bar */
[data-theme="dark"] .gallery-mgr-upload-bar {
  border-bottom-color: #2e3348;
}

/* Editor small inputs — used in gallery fields, upload fields, etc. */
[data-theme="dark"] .editor-input-sm {
  background: #13151e;
  color: #e4e4e7;
  border-color: #3f4460;
}

[data-theme="dark"] .editor-input-sm:focus {
  border-color: var(--green-400);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

/* Gallery action buttons — outline on dark item background */
[data-theme="dark"] .gallery-mgr-actions .editor-btn-outline {
  color: #cdd1e0;
  border-color: #3f4460;
}

[data-theme="dark"] .gallery-mgr-actions .editor-btn-outline:hover {
  border-color: #6b7194;
  background: #2e3348;
}

/* ── Floating format toolbar ─────────────────────── */
/* Gray scale inverts in dark mode, so pin toolbar to explicit dark colors */
[data-theme="dark"] .editor-floating-format-toolbar {
  background: #111827;
}

[data-theme="dark"] .editor-floating-format-toolbar .editor-format-btn {
  color: #e4e4e7;
}

[data-theme="dark"] .editor-floating-format-toolbar .editor-format-btn:hover {
  background: #374151;
}

[data-theme="dark"] .editor-floating-format-toolbar .editor-format-btn.active {
  background: #4b5563;
  color: var(--green-400);
}

[data-theme="dark"] .editor-floating-format-toolbar .editor-format-sep {
  background: #4b5563;
}

[data-theme="dark"] .editor-floating-format-toolbar .editor-format-img-pos {
  background: #1e2130;
  border-color: #374151;
  color: #e4e4e7;
}

/* ── Page Manager — Dark Mode ────────────────────── */

[data-theme="dark"] .editor-page-manager {
  background: #1e2130;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .editor-page-manager-header {
  border-bottom-color: #2e3348;
}

[data-theme="dark"] .editor-page-manager-actions {
  border-bottom-color: #2e3348;
}

[data-theme="dark"] .editor-page-row {
  border-bottom-color: #2e3348;
}

[data-theme="dark"] .editor-page-row:hover {
  background: #13151e;
}

[data-theme="dark"] .editor-page-action-btn {
  background: #13151e;
  border-color: #3f4460;
  color: #9198b0;
}

[data-theme="dark"] .editor-page-action-btn:hover {
  border-color: #6b7194;
  color: #e4e4e7;
  background: #2e3348;
}

[data-theme="dark"] .editor-page-delete-btn:hover:not(.disabled) {
  border-color: #f87171;
  color: #f87171;
  background: rgba(220, 38, 38, 0.1);
}

[data-theme="dark"] .editor-page-form {
  background: #13151e;
  border-color: #2e3348;
}

[data-theme="dark"] .editor-page-form-fields input[type="text"],
[data-theme="dark"] .editor-page-form-fields select {
  background: #1e2130;
  border-color: #3f4460;
  color: #e4e4e7;
}

[data-theme="dark"] .editor-page-form-actions {
  border-top-color: #2e3348;
}

[data-theme="dark"] .editor-sublink-row input {
  background: #1e2130;
  border-color: #3f4460;
  color: #e4e4e7;
}

[data-theme="dark"] .editor-sublink-remove {
  border-color: #3f4460;
  color: #9198b0;
}

[data-theme="dark"] .editor-sublink-remove:hover {
  border-color: #f87171;
  color: #f87171;
  background: rgba(220, 38, 38, 0.1);
}

/* Page link dropdown */
[data-theme="dark"] .editor-page-link-dropdown {
  background: #1e2130;
  border-color: #2e3348;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .editor-page-link-option {
  color: #cdd1e0;
}

[data-theme="dark"] .editor-page-link-option:hover {
  background: #13151e;
}

/* Image controls toolbar — gray-900 bg inverts */
[data-theme="dark"] .editor-img-controls {
  background: #111827;
}

/* Section type paste button */
[data-theme="dark"] .editor-section-type-btn-paste {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .editor-section-type-btn-paste:hover {
  border-color: #60a5fa;
  background: rgba(59, 130, 246, 0.15);
}

/* Button style select in repeater */
[data-theme="dark"] .editor-btn-style-select {
  background: #13151e;
  border-color: #3f4460;
  color: #e4e4e7;
}

/* ── Calendar ─────────────────────────────────────── */
[data-theme="dark"] .calendar-nav-btn {
  background: #1e2130;
  border-color: #2e3348;
  color: #cdd1e0;
}

[data-theme="dark"] .calendar-nav-btn:hover {
  background: rgba(22, 101, 52, 0.15);
  border-color: var(--green-500);
  color: var(--green-400);
}

[data-theme="dark"] .calendar-view-toggle {
  border-color: #2e3348;
}

[data-theme="dark"] .calendar-toggle-btn {
  background: #1e2130;
  color: #9198b0;
}

[data-theme="dark"] .calendar-toggle-btn:first-child {
  border-right-color: #2e3348;
}

[data-theme="dark"] .calendar-toggle-btn:hover {
  background: rgba(22, 101, 52, 0.15);
  color: var(--green-400);
}

[data-theme="dark"] .calendar-toggle-btn.active {
  background: var(--green-600);
  color: white;
}

[data-theme="dark"] .calendar-grid-wrapper {
  border-color: #2e3348;
}

[data-theme="dark"] .calendar-grid-header {
  background: #13151e;
}

[data-theme="dark"] .calendar-grid {
  background: #1e2130;
}

[data-theme="dark"] .calendar-day {
  border-right-color: #2e3348;
  border-bottom-color: #2e3348;
}

[data-theme="dark"] .calendar-day.other-month {
  background: #13151e;
}

[data-theme="dark"] .calendar-day.today {
  background: rgba(22, 101, 52, 0.15);
}

[data-theme="dark"] .calendar-day.half-day {
  background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .calendar-day.closed {
  background: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .calendar-day.clickable:hover {
  background: rgba(22, 101, 52, 0.2);
}

[data-theme="dark"] .calendar-day.closed.clickable:hover {
  background: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .calendar-day.half-day.clickable:hover {
  background: rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] .calendar-list-item {
  background: #1e2130;
  border-color: #2e3348;
}

[data-theme="dark"] .calendar-list-item:hover {
  border-color: var(--green-500);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .calendar-modal {
  background: #1e2130;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .calendar-modal-header {
  border-bottom-color: #2e3348;
}

[data-theme="dark"] .calendar-modal-close:hover {
  background: #2e3348;
}

[data-theme="dark"] .calendar-modal-dismissal {
  border-bottom-color: #2e3348;
}

[data-theme="dark"] .calendar-modal-event + .calendar-modal-event {
  border-top-color: #2e3348;
}

[data-theme="dark"] .calendar-modal-grade {
  background: rgba(22, 101, 52, 0.2);
}

/* ── Smooth transition on theme change ────────────── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}