@import "tailwindcss";

/* Constrain the app to the area actually visible inside WP admin
   (viewport minus the admin bar) so inner scroll areas can reach
   their real bottom instead of being clipped under the chrome. */
.sme-app-root {
  height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
  .sme-app-root {
    height: calc(100vh - 46px);
  }
}

.theme-toggle {
  border-color: #e5e7eb;
  background: #ffffff;
  color: #4b5563;
}

.theme-toggle:hover {
  background: #f9fafb;
  color: #4f46e5;
}

.theme-dark .theme-toggle {
  border-color: rgba(71, 85, 105, 0.75);
  background: rgba(15, 23, 42, 0.82);
  color: #cbd5e1;
}

.theme-dark .theme-toggle:hover {
  background: rgba(30, 41, 59, 0.9);
  color: #ffffff;
}

.theme-dark {
  background: #0f172a;
}

.theme-dark .bg-white {
  background-color: #111827;
}

.theme-dark .bg-gray-50 {
  background-color: #0f172a;
}

.theme-dark .bg-indigo-50 {
  background-color: rgba(79, 70, 229, 0.16);
}

.theme-dark .bg-indigo-50\/40 {
  background-color: rgba(79, 70, 229, 0.16);
}

.theme-dark .bg-gray-100 {
  background-color: #1f2937;
}

.theme-dark .bg-amber-50,
.theme-dark .bg-amber-50\/60 {
  background-color: rgba(146, 64, 14, 0.24);
}

.theme-dark .bg-amber-100 {
  background-color: rgba(180, 83, 9, 0.28);
}

.theme-dark .border-gray-50,
.theme-dark .border-gray-100,
.theme-dark .border-gray-200 {
  border-color: #1f2937;
}

.theme-dark .border-amber-100,
.theme-dark .border-amber-200 {
  border-color: rgba(245, 158, 11, 0.28);
}

.theme-dark .text-gray-900,
.theme-dark .text-gray-800,
.theme-dark .text-gray-700,
.theme-dark .text-gray-600 {
  color: #e5e7eb;
}

.theme-dark .text-gray-500,
.theme-dark .text-gray-400 {
  color: #94a3b8;
}

.theme-dark .text-amber-900 {
  color: #fde68a;
}

.theme-dark input,
.theme-dark textarea,
.theme-dark select {
  color: #e5e7eb;
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
  color: #64748b;
}

.theme-dark select,
.theme-dark input,
.theme-dark textarea {
  background-color: #111827;
  border-color: #334155;
}

.theme-dark option {
  background-color: #111827;
}

.theme-dark .hover\:bg-gray-50:hover,
.theme-dark .hover\:bg-gray-100:hover,
.theme-dark .hover\:bg-indigo-50:hover,
.theme-dark .hover\:bg-indigo-50\/40:hover {
  background-color: rgba(30, 41, 59, 0.85);
}

.theme-light .settings-page .text-slate-100,
.theme-light .settings-page .text-slate-200,
.theme-light .settings-page .text-slate-300 {
  color: #111827;
}

.theme-light .settings-page h2.text-white,
.theme-light .settings-page header span.text-white {
  color: #111827;
}

.theme-light .settings-page .text-slate-400,
.theme-light .settings-page .text-slate-500,
.theme-light .settings-page .text-slate-600 {
  color: #64748b;
}

.theme-light .settings-page .bg-slate-950\/80,
.theme-light .settings-page .bg-slate-900,
.theme-light .settings-page .bg-slate-900\/60,
.theme-light .settings-page .bg-slate-800,
.theme-light .settings-page .bg-slate-800\/40,
.theme-light .settings-page .bg-slate-800\/50,
.theme-light .settings-page .bg-slate-800\/60,
.theme-light .settings-page .bg-slate-800\/70 {
  background-color: #ffffff;
}

.theme-light .settings-page .border-slate-800,
.theme-light .settings-page .border-slate-800\/60,
.theme-light .settings-page .border-slate-800\/80,
.theme-light .settings-page .border-slate-700,
.theme-light .settings-page .border-slate-700\/60,
.theme-light .settings-page .border-slate-600\/40 {
  border-color: #e2e8f0;
}

.theme-light .settings-page .bg-blue-500\/8 {
  background-color: rgba(59, 130, 246, 0.08);
}

.theme-light .settings-page .bg-amber-500\/8 {
  background-color: rgba(245, 158, 11, 0.1);
}

.theme-light .settings-page .bg-green-500\/8 {
  background-color: rgba(34, 197, 94, 0.1);
}

.theme-light .settings-page .bg-indigo-500\/8 {
  background-color: rgba(99, 102, 241, 0.1);
}

.theme-light .settings-page input,
.theme-light .settings-page textarea,
.theme-light .settings-page select {
  color: #0f172a;
  background-color: #ffffff;
}

.theme-light .settings-page input::placeholder,
.theme-light .settings-page textarea::placeholder {
  color: #94a3b8;
}

.theme-light .settings-page option {
  background-color: #ffffff;
}

.theme-light .settings-page .hover\:bg-slate-800\/50:hover,
.theme-light .settings-page .hover\:bg-slate-800\/60:hover {
  background-color: #f1f5f9;
}

/* Notices, alerts, and status banners — readable on light backgrounds */
.theme-light .settings-page .text-blue-300,
.theme-light .settings-page .text-blue-400 {
  color: #1d4ed8;
}

.theme-light .settings-page .text-amber-300,
.theme-light .settings-page .text-amber-400 {
  color: #b45309;
}

.theme-light .settings-page .text-green-300,
.theme-light .settings-page .text-green-400 {
  color: #166534;
}

.theme-light .settings-page .text-indigo-300,
.theme-light .settings-page .text-indigo-400 {
  color: #4338ca;
}

.theme-light .settings-page .text-red-300,
.theme-light .settings-page .text-red-400 {
  color: #b91c1c;
}

.theme-light .settings-page .text-sky-300 {
  color: #0369a1;
}

.theme-light .settings-page .bg-green-500\/10,
.theme-light .settings-page .bg-green-500\/15 {
  background-color: rgba(22, 163, 74, 0.12);
}

.theme-light .settings-page .bg-red-500\/10 {
  background-color: rgba(220, 38, 38, 0.1);
}

.theme-light .settings-page .border-green-500\/20,
.theme-light .settings-page .border-green-500\/25 {
  border-color: rgba(22, 163, 74, 0.35);
}

.theme-light .settings-page .border-red-500\/20 {
  border-color: rgba(220, 38, 38, 0.35);
}

.theme-light .settings-page .border-blue-500\/30 {
  border-color: rgba(37, 99, 235, 0.35);
}

.theme-light .settings-page .border-amber-500\/30 {
  border-color: rgba(217, 119, 6, 0.35);
}

.theme-light .settings-page .border-green-500\/30 {
  border-color: rgba(22, 163, 74, 0.35);
}

.theme-light .settings-page .border-indigo-500\/30 {
  border-color: rgba(79, 70, 229, 0.35);
}

.theme-light .settings-page strong {
  color: #0f172a;
  font-weight: 600;
}

.theme-light .settings-page em {
  color: #334155;
}

.theme-light .settings-page code {
  color: #4338ca;
  background-color: #f1f5f9;
}
