/* Theme toggle + Mist biru-abu dark mode */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 980px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover {
  background: var(--green-100);
  color: var(--green-700);
  border-color: transparent;
}
.theme-toggle-sun,
.theme-toggle-moon {
  display: none;
  line-height: 0;
}
html[data-theme="light"] .theme-toggle-moon,
html:not([data-theme]) .theme-toggle-moon {
  display: block;
}
html[data-theme="dark"] .theme-toggle-sun {
  display: block;
}

html[data-theme="dark"] {
  --green-900: #e8edf4;
  --green-700: #7ba3d4;
  --green-600: #6b93c4;
  --green-500: #9bb8d9;
  --green-100: rgba(59, 110, 165, 0.28);
  --green-50: #1a222d;
  --earth-800: #9aa4b2;
  --earth-600: #8a94a3;
  --earth-100: #2a3441;
  --warm-50: #0f1419;
  --blue-700: #7ba3d4;
  --blue-100: rgba(59, 110, 165, 0.28);
  --orange-700: #f0b429;
  --orange-100: rgba(180, 83, 9, 0.22);
  --gray-900: #e8edf4;
  --gray-700: #c5ced9;
  --gray-500: #9aa4b2;
  --gray-200: #2a3441;
  --gray-100: #1a222d;
  --white: #1a222d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] body {
  background: var(--warm-50);
  color: var(--gray-900);
}

html[data-theme="dark"] .device-wrap {
  background: #0f1419;
  box-shadow: none;
}

html[data-theme="dark"] .app-header,
html[data-theme="dark"] .bottom-nav {
  background: rgba(26, 34, 45, 0.92);
  border-color: var(--gray-200);
}

html[data-theme="dark"] .desktop-top {
  background: rgba(26, 34, 45, 0.88) !important;
  border-bottom-color: #2a3441 !important;
}

html[data-theme="dark"] .hero-card {
  background: linear-gradient(160deg, #243041 0%, #1a222d 100%);
}

html[data-theme="dark"] .datetime-bar,
html[data-theme="dark"] .datetime-bar:not(.datetime-bar-compact) {
  background: #1c2430 !important;
  color: #e8edf4 !important;
  border-bottom: 1px solid #2a3441;
}

html[data-theme="dark"] .datetime-bar-text {
  color: #e8edf4 !important;
}

html[data-theme="dark"] .mobile-brand {
  background: rgba(26, 34, 45, 0.96);
  border-bottom-color: #2a3441;
}

html[data-theme="dark"] .mobile-brand-text strong {
  color: #e8edf4;
}

html[data-theme="dark"] .login-page {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(59, 110, 165, 0.22), transparent 55%),
    #0f1419 !important;
}

html[data-theme="dark"] .login-wrap {
  background: #1a222d !important;
  border-color: #2a3441 !important;
  color: #e8edf4;
}

html[data-theme="dark"] .login-wrap h1,
html[data-theme="dark"] .login-wrap label {
  color: #e8edf4 !important;
}

html[data-theme="dark"] .login-wrap input,
html[data-theme="dark"] .login-wrap select {
  background: #243041 !important;
  border-color: #3a4554 !important;
  color: #e8edf4 !important;
}

html[data-theme="dark"] .info-banner {
  background: rgba(59, 110, 165, 0.2);
  color: #9bb8d9;
  border-color: rgba(59, 110, 165, 0.35);
}

html[data-theme="dark"] .login-kicker,
html[data-theme="dark"] .login-hint,
html[data-theme="dark"] .login-wrap p {
  color: #9aa4b2 !important;
}
html[data-theme="dark"] .admin-link {
  color: #7ba3d4 !important;
}

html[data-theme="dark"] .btn-outline {
  background: #243041 !important;
  border-color: #3a4554 !important;
  color: #e8edf4 !important;
}

html[data-theme="dark"] .btn-secondary {
  background: rgba(59, 110, 165, 0.22) !important;
  color: #9bb8d9 !important;
}

html[data-theme="dark"] a.btn.btn-outline {
  color: #e8edf4 !important;
}

html[data-theme="dark"] .child-switcher {
  background: #1a222d;
  border-bottom-color: #2a3441;
}

html[data-theme="dark"] .child-switcher-form select {
  background: #243041;
  border-color: #3a4554;
  color: #e8edf4;
}

html[data-theme="dark"] .section-label {
  color: #9aa4b2 !important;
}

html[data-theme="dark"] .chip:not(.active) {
  background: #243041;
  border-color: #3a4554;
  color: #e8edf4;
}

html[data-theme="dark"] .bottom-nav {
  background: rgba(26, 34, 45, 0.96);
  border-top-color: #2a3441;
}

html[data-theme="dark"] .check-item,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .minat-card,
html[data-theme="dark"] .kurikulum-card,
html[data-theme="dark"] .location-card,
html[data-theme="dark"] .test-card,
html[data-theme="dark"] .cal-day {
  background: #1a222d;
  border-color: #2a3441;
  color: #e8edf4;
}

html[data-theme="dark"] .mobile-brand {
  background: rgba(26, 34, 45, 0.94);
  border-bottom-color: #2a3441;
}

.theme-toggle-bar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px 0;
}

@media (min-width: 900px) {
  .theme-toggle-bar { display: none; }
}