:root {
  --color-primary: #2f80ed;
  --color-primary-hover: #256fd1;
  --color-background: #f5faff;
  --color-surface: #ffffff;
  --color-surface-secondary: #f7faff;
  --color-border: #e3edf6;
  --color-text: #102a43;
  --color-text-secondary: #6b7a90;
  --color-success: #16a36a;
  --color-warning: #d99313;
  --color-danger: #dc3f4f;
  --ui-radius-control: 10px;
  --ui-radius-card: 16px;
  --ui-shadow-card: 0 6px 22px rgba(16, 42, 67, 0.07);
  --ui-shadow-hover: 0 10px 28px rgba(16, 42, 67, 0.1);
  --ui-transition: 180ms ease;
}

html,
body {
  background: var(--color-background);
  color: var(--color-text);
}

main {
  background: var(--color-background);
}

main .max-w-4xl {
  max-width: 70rem;
}

main .max-w-5xl {
  max-width: 74rem;
}

/* Shared light surfaces replace the isolated dark utility theme. */
main .bg-gray-900,
main .bg-gray-900\/50 {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

main .bg-gray-900.rounded-xl,
main .bg-gray-900.rounded-2xl {
  border-color: var(--color-border) !important;
  box-shadow: var(--ui-shadow-card);
}

main .bg-gray-800,
main .bg-gray-800\/50,
main .bg-gray-700 {
  background-color: var(--color-surface-secondary) !important;
}

main .border-gray-800,
main .border-gray-700,
main .border-gray-700\/50 {
  border-color: var(--color-border) !important;
}

main .text-gray-100,
main .text-gray-300 {
  color: var(--color-text) !important;
}

main .text-gray-400,
main .text-gray-500,
main .text-gray-600 {
  color: var(--color-text-secondary) !important;
}

main .bg-gray-900 .text-white,
main .h-full.overflow-y-auto > .max-w-4xl h1.text-white,
main .h-full.overflow-y-auto > .max-w-5xl h1.text-white {
  color: var(--color-text) !important;
}

main :is(.bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-school-blue, .gradient-blue, .bg-red-500, .bg-red-600).text-white,
main :is(.bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-school-blue, .gradient-blue, .bg-red-500, .bg-red-600) .text-white {
  color: #ffffff !important;
}

/* Former dark page banners now behave like regular page headers. */
main .border-b.bg-gray-900 {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 24px 24px 4px !important;
}

main .border-b.bg-gray-900 + .flex-1,
main .border-b.bg-gray-900 + .overflow-y-auto {
  padding-top: 16px;
}

main h1.text-2xl {
  color: var(--color-text) !important;
  letter-spacing: -0.02em;
}

main h2,
main h3 {
  color: var(--color-text);
}

main .card-shadow,
main .bg-white.rounded-2xl {
  border-color: var(--color-border);
  box-shadow: var(--ui-shadow-card);
}

main .bg-white.rounded-2xl {
  border-style: solid;
  border-width: 1px;
}

main .bg-gray-900.rounded-xl,
main .bg-white.rounded-2xl,
main .card-shadow {
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}

/* One control language for forms across user and admin pages. */
main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
main textarea,
main select {
  background: var(--color-surface-secondary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: var(--ui-radius-control);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background-color var(--ui-transition);
}

main input::placeholder,
main textarea::placeholder {
  color: #8b9bb0 !important;
}

main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible,
main textarea:focus-visible,
main select:focus-visible {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.15) !important;
  outline: none;
}

main input[type="checkbox"],
main input[type="radio"] {
  accent-color: var(--color-primary);
}

main button,
main a {
  transition-duration: var(--ui-transition);
}

main button:focus-visible,
main a:focus-visible,
aside a:focus-visible,
header button:focus-visible {
  outline: 3px solid rgba(47, 128, 237, 0.28);
  outline-offset: 2px;
}

main button:disabled {
  cursor: not-allowed;
  opacity: 0.48 !important;
}

main :is(.bg-blue-500, .bg-blue-600, .bg-school-blue, .gradient-blue) {
  background-color: var(--color-primary) !important;
}

main :is(.bg-blue-500, .bg-blue-600, .bg-school-blue, .gradient-blue):hover:not(:disabled) {
  background-color: var(--color-primary-hover) !important;
  box-shadow: 0 6px 16px rgba(47, 128, 237, 0.2);
}

main button.bg-gray-800,
main button.bg-gray-700 {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary) !important;
}

main .hover\:bg-gray-700:hover,
main .hover\:bg-gray-800:hover,
main .hover\:bg-gray-800\/50:hover {
  background: #eaf3ff !important;
  color: var(--color-primary) !important;
}

main table {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--ui-radius-card);
  overflow: hidden;
}

main th {
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  font-weight: 600;
}

main th,
main td {
  border-color: var(--color-border);
}

main .bg-red-50,
main .bg-green-50,
main .bg-yellow-50,
main .bg-blue-50 {
  border-radius: 12px;
}

@media (max-width: 768px) {
  main .max-w-4xl,
  main .max-w-5xl {
    max-width: 100%;
  }

  main .border-b.bg-gray-900 {
    padding: 18px 16px 2px !important;
  }

  main .bg-gray-900.rounded-xl,
  main .bg-white.rounded-2xl {
    border-radius: 14px;
  }
}