/* Theme Override for Next.js/Tailwind Pages – 3cx.bitblade.io
   Overrides hardcoded Tailwind ink-* classes for light theme
   Applied only when data-theme="light" is set
   UPDATED: 2026-04-26
*/

/* ===== LIGHT THEME OVERRIDES (when data-theme="light") ===== */
[data-theme="light"] .bg-ink-950 {
  background-color: #F8FAFC !important;
}

[data-theme="light"] .bg-ink-925 {
  background-color: #F1F5F9 !important;
}

[data-theme="light"] .bg-ink-900 {
  background-color: #FFFFFF !important;
}

[data-theme="light"] .bg-ink-850 {
  background-color: #F8FAFC !important;
}

[data-theme="light"] .bg-ink-950\/80 {
  background-color: rgba(255, 255, 255, 1) !important;
}

[data-theme="light"] .bg-ink-950\/50 {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="light"] .bg-ink-900\/80 {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="light"] .text-ink-100 {
  color: #0F172A !important;
}

[data-theme="light"] .text-ink-200 {
  color: #1E293B !important;
}

[data-theme="light"] .text-ink-300 {
  color: #334155 !important;
}

[data-theme="light"] .text-ink-400 {
  color: #475569 !important;
}

[data-theme="light"] .text-ink-500 {
  color: #64748B !important;
}

[data-theme="light"] .text-ink-600 {
  color: #94A3B8 !important;
}

[data-theme="light"] .text-ink-800 {
  color: #64748B !important;
}

[data-theme="light"] .border-brand-500\/10 {
  border-color: rgba(14, 165, 233, 0.1) !important;
}

[data-theme="light"] .border-brand-500\/20 {
  border-color: rgba(14, 165, 233, 0.2) !important;
}

[data-theme="light"] .border-ink-800 {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .border-ink-900 {
  border-color: rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .border-ink-950 {
  border-color: rgba(15, 23, 42, 0.12) !important;
}

/* ===== SHADOW OVERRIDES ===== */
[data-theme="light"] .shadow-md,
[data-theme="light"] .shadow-lg {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .shadow-xl {
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.1) !important;
}

/* ===== HEADER / NAVBAR OVERRIDES ===== */
[data-theme="light"] header,
[data-theme="light"] nav,
[data-theme="light"] .navbar {
  background-color: #FFFFFF !important;
}

[data-theme="light"] header a,
[data-theme="light"] nav a,
[data-theme="light"] .navbar a {
  color: #475569 !important;
}

[data-theme="light"] header a:hover,
[data-theme="light"] nav a:hover,
[data-theme="light"] .navbar a:hover {
  color: #0F172A !important;
}

/* ===== BUTTON OVERRIDES ===== */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .button-secondary {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .button-secondary:hover {
  background-color: #F1F5F9 !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
}

/* ===== CARD OVERRIDES ===== */
[data-theme="light"] .card {
  background-color: #FFFFFF !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .card:hover {
  background-color: #F8FAFC !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
}

/* ===== INPUT / FORM OVERRIDES ===== */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: #0EA5E9 !important;
}

[data-theme="light"] input::placeholder {
  color: #94A3B8 !important;
}

/* ===== SMOOTH TRANSITIONS ===== */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* ========== Tailwind lg:col-span-* fallback ========== */
@media (min-width: 1024px) {
  .lg\:col-span-1 { grid-column: span 1 / span 1; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
}