/* Dark Mode variables and overrides for EverToolKit */

:root {
  --dark-bg: #0f172a;
  --dark-card-bg: #1e293b;
  --dark-header-bg: #1e293b;
  --dark-border: #334155;
  --dark-text: #f8fafc;
  --dark-text-muted: #94a3b8;
}

/* ============================================================
   GLOBALNA NAPRAWA RWD — poziome przewijanie na mobile
   Problem: dekoracyjne gradienty (w-[500px], w-[600px])
   są absolute children body i wystają poza viewport na
   urządzeniach mobilnych. Body ma overflow-x:hidden ale
   html nie — a na mobile to html kontroluje scroll dokumentu.
   Wycofano globalne html overflow-x: hidden !, ponieważ Next.js
   overlay manager wymaga natywnego zachowania html do odblokowania
   przewijania po zamknięciu dialogu/szuflady.
   ============================================================ */
body {
  overflow-x: hidden !important;
}

@media (max-width: 768px) {
  html {
    overflow-x: hidden;
  }
  body > div.absolute.rounded-full {
    display: none !important;
  }
}

/* Apply dark mode styles when .dark class is present on html */
.dark body {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* Header customization */
.dark header {
  background-color: var(--dark-header-bg) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3) !important;
}

.dark header span.text-slate-900,
.dark header span.text-slate-800,
.dark header a {
  color: var(--dark-text) !important;
}

.dark header button {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.dark header button:hover {
  background-color: var(--dark-border) !important;
}

/* Dropdown menus and Mega menus */
.dark .mega-nav-menu div.bg-white,
.dark .mega-cat-menu div.bg-white {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.dark .mega-nav-menu button,
.dark .mega-cat-menu button {
  background-color: transparent !important;
  color: var(--dark-text) !important;
}

.dark .mega-nav-menu button:hover,
.dark .mega-cat-menu button:hover {
  background-color: var(--dark-border) !important;
}

.dark .mega-nav-menu a,
.dark .mega-cat-menu a {
  color: var(--dark-text-muted) !important;
}

.dark .mega-nav-menu a:hover,
.dark .mega-cat-menu a:hover {
  color: #3b82f6 !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Main content layout cards and widgets */
.dark main div.bg-white,
.dark main div.bg-white\/70,
.dark main div.bg-white\/40,
.dark main section.bg-white {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
  backdrop-filter: blur(12px) !important;
}

.dark main h1,
.dark main h2,
.dark main h3,
.dark main h4,
.dark main h5,
.dark main h6 {
  color: var(--dark-text) !important;
}

.dark main p {
  color: var(--dark-text-muted) !important;
}

/* Dashboard category buttons */
.dark main button.bg-white\/80,
.dark main button.bg-white\/70 {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-muted) !important;
}

.dark main button.bg-white\/80:hover,
.dark main button.bg-white\/70:hover {
  background-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* Individual tool cards */
.dark main button.bg-white\/70.border-slate-200\/50,
.dark main a.bg-white\/70.border-slate-200\/50 {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

.dark main button.bg-white\/70.border-slate-200\/50 h5,
.dark main a.bg-white\/70.border-slate-200\/50 h5 {
  color: var(--dark-text) !important;
}

.dark main button.bg-white\/70.border-slate-200\/50:hover,
.dark main a.bg-white\/70.border-slate-200\/50:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

/* Forms, inputs, drag & drop zones */
.dark input[type="text"],
.dark input[type="search"],
.dark input[type="password"],
.dark input[type="number"],
.dark textarea,
.dark select {
  background-color: #0f172a !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.dark input::placeholder {
  color: #64748b !important;
}

.dark input:focus,
.dark textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

.dark div.border-dashed {
  border-color: var(--dark-border) !important;
  background-color: rgba(30, 41, 59, 0.5) !important;
}

.dark div.border-dashed:hover {
  border-color: #3b82f6 !important;
  background-color: rgba(59, 130, 246, 0.05) !important;
}

/* Footer customization */
.dark footer {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

.dark footer a {
  color: var(--dark-text-muted) !important;
}

.dark footer a:hover {
  color: var(--dark-text) !important;
}

/* Text selections */
.dark ::selection {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* ============================================================
   RESPONSYWNOŚĆ NAGŁÓWKA NA TELEFONACH (max-width: 640px)
   Dotyczy trybu jasnego i ciemnego.
   Struktura nagłówka:
     header > div
       a.group.cursor-pointer          ← logo link
         div.w-10.h-10                 ← ikona
         div.flex-col
           span.text-xl                ← "evertoolkit.com"
             span.text-blue-600        ← ".com" (inline)
           span.text-\[10px\]          ← "Instant Utility Tools" (podtytuł)
       nav                             ← nawigacja desktop (hidden na mobile)
       div.flex.items-center           ← przyciski akcji
         span.hidden.sm:inline-flex    ← "100% Free" (hidden na mobile)
         div → button[title="Toggle Dark Mode"]
         div → button[title="Change Language"]
           svg
           span                        ← tekst "🇵🇱 PL"
           svg
         button.xl:hidden              ← hamburger
   ============================================================ */
@media (max-width: 1024px) {
  /* 1. Ukrycie podtytułu logo ("Instant Utility Tools" / "Błyskawiczne Narzędzia Online") */
  header a.group div.flex-col > span:nth-child(2),
  header a.group div.flex-col > span:last-of-type {
    display: none !important;
  }

  /* 2. Zmniejszenie ikony logo: 40px → 32px */
  header a.group > div:first-child {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  /* 3. Zmniejszenie tekstu nazwy serwisu */
  header a.group div.flex-col > span:first-child {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  /* 4. Zmniejszenie odstępów między przyciskami akcji */
  header > div > div.flex.items-center {
    gap: 6px !important;
  }

  /* 5. Ukrycie tekstu "🇵🇱 PL / 🇬🇧 EN / ..." w przycisku języka */
  header button[title="Change Language"] > span,
  header button[title*="Language"] > span:not(svg) {
    display: none !important;
  }

  /* 6. Kompaktowe paddingi przycisków w prawej części nagłówka */
  header button[title="Change Language"],
  header button[title="Toggle Dark Mode"],
  header button[title="Toggle dark mode"],
  header button.xl\:hidden {
    padding: 6px !important;
    min-width: 0 !important;
  }

  /* 7. Gap wewnątrz przycisku języka (usuwa odstęp po ukryciu tekstu) */
  header button[title="Change Language"],
  header button[title*="Language"] {
    gap: 0 !important;
  }

  /* 8. Zmniejszenie gap między logo a przyciskami */
  header > div {
    gap: 0 !important;
  }

  /* 9. Ukrycie zduplikowanego przycisku zamknięcia (custom-close-drawer) w nagłówku menu */
  #custom-close-drawer {
    display: none !important;
  }
}