/* Sub2API legacy-browser compatibility layer.
 * Deliberately uses CSS2/CSS3 basics only: no :is(), :has(), CSS variables,
 * blend modes, gradients, or modern selector syntax for essential colors.
 */
html, body { background-color: #ffffff !important; color: #1f2937 !important; }
html.dark, html.dark body, html.dark #app { background-color: #101010 !important; color: #f3f4f6 !important; }

/* Primary teal palette: solid-color fallbacks for old Edge/Firefox/Chrome. */
.bg-primary-50 { background-color: #f0fdfa !important; }
.bg-primary-100 { background-color: #ccfbf1 !important; }
.bg-primary-200 { background-color: #99f6e4 !important; }
.bg-primary-300 { background-color: #5eead4 !important; }
.bg-primary-400 { background-color: #2dd4bf !important; }
.bg-primary-500 { background-color: #14b8a6 !important; }
.bg-primary-600 { background-color: #0d9488 !important; }
.bg-primary-700 { background-color: #0f766e !important; }
.bg-primary-800 { background-color: #115e59 !important; }
.bg-primary-900 { background-color: #134e4a !important; }
.text-primary-400 { color: #2dd4bf !important; }
.text-primary-500 { color: #14b8a6 !important; }
.text-primary-600 { color: #0d9488 !important; }
.text-primary-700 { color: #0f766e !important; }
.text-primary-800 { color: #115e59 !important; }
.text-primary-900 { color: #134e4a !important; }
.border-primary-400 { border-color: #2dd4bf !important; }
.border-primary-500 { border-color: #14b8a6 !important; }
.border-primary-600 { border-color: #0d9488 !important; }
.border-primary-700 { border-color: #0f766e !important; }

/* Buttons and links: do not depend on gradient custom properties. */
.btn-primary, button.btn-primary, a.btn-primary {
  background-color: #0d9488 !important;
  background-image: none !important;
  border: 1px solid #0d9488 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(13,148,136,0.25) !important;
}
.btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover,
.btn-primary:focus, button.btn-primary:focus, a.btn-primary:focus {
  background-color: #0f766e !important;
  color: #ffffff !important;
}
.btn-secondary, button.btn-secondary, a.btn-secondary {
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
}

/* Common surfaces. */
.card, .card-glass, .glass, .modal-content, .dialog-container, .dropdown {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e5e7eb !important;
}
.input, input, textarea, select {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}
.input:focus, input:focus, textarea:focus, select:focus {
  border-color: #0d9488 !important;
  outline: 2px solid #99f6e4 !important;
}
.table th { background-color: #f9fafb !important; color: #4b5563 !important; }
.table td { color: #374151 !important; border-color: #e5e7eb !important; }
.dropdown-item:hover { background-color: #f0fdfa !important; }

/* Keep status colors visible instead of gray overrides. */
.bg-green-500, .bg-emerald-500 { background-color: #10b981 !important; }
.bg-amber-500, .bg-yellow-500 { background-color: #f59e0b !important; }
.bg-red-500, .bg-rose-500 { background-color: #ef4444 !important; }
.text-green-500, .text-green-600, .text-emerald-500, .text-emerald-600 { color: #059669 !important; }
.text-amber-500, .text-amber-600 { color: #d97706 !important; }
.text-red-500, .text-red-600 { color: #dc2626 !important; }

/* Dark mode: original Sub2 palette, with legacy selectors for older browsers. */
html.dark .card, html.dark .card-glass, html.dark .glass,
html.dark .modal-content, html.dark .dialog-container, html.dark .dropdown {
  background-color: #1a1a1a !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html.dark .sidebar { background-color: #161616 !important; border-right-color: rgba(255,255,255,.07) !important; }
html.dark .sidebar-link { color: #bbbbbb !important; }
html.dark .sidebar-link:hover { background-color: rgba(255,255,255,.08) !important; color: #ffffff !important; }
html.dark .sidebar-link-active { background-color: #ffffff !important; color: #111111 !important; }
html.dark .sidebar-link-active * { color: #111111 !important; }
html.dark .input, html.dark input, html.dark textarea, html.dark select {
  background-color: #1c1c1c !important;
  color: #eeeeee !important;
  border-color: #333333 !important;
}
html.dark .table th { background-color: rgba(255,255,255,.04) !important; color: #aaaaaa !important; }
html.dark .table td { color: #eeeeee !important; border-color: rgba(255,255,255,.05) !important; }
html.dark .table tbody tr:hover { background-color: rgba(255,255,255,.04) !important; }
html.dark .btn-secondary { background-color: #1a1a1a !important; color: #eeeeee !important; border-color: #333333 !important; }
html.dark .dropdown-item { color: #eeeeee !important; }
html.dark .dropdown-item:hover { background-color: rgba(255,255,255,.08) !important; }
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark .text-gray-900, html.dark .text-gray-800 { color: #ffffff !important; }
html.dark .text-gray-500, html.dark .text-gray-600, html.dark .text-gray-700 { color: #bbbbbb !important; }
html.dark a { color: #d4d4d4 !important; }

/* Avoid animation/transparent compositing glitches in old engines. */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
}