/* ============================================
   OpenTools — Stili personalizzati
   ============================================ */

/* Cross-page transitions handled by JS (ot-nav-leaving/ot-nav-ready).
   @view-transition { navigation: auto } rimosso: conflitto con ot-i18n-pending
   che rende il body invisibile durante la cattura → AbortError in Chrome. */

html.ot-nav-ready body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html.ot-nav-leaving body {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 180ms ease, transform 180ms ease;
}

/* Prevent white tap flash / overscroll flash on mobile navigation */
html, body {
    background-color: #f9fafb;
    overscroll-behavior-y: contain;
}
html.dark, html.dark body {
    background-color: #0f172a;
}
a, button, [role="button"], .tool-card {
    -webkit-tap-highlight-color: transparent;
}

/* Language toggle: keep stable styling across page transitions */
#ot-lang-toggle {
    display: none;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #9ca3af;
    gap: 0;
}
@media (min-width: 640px) {
    #ot-lang-toggle { display: flex; }
    #ot-lang-select-mobile { display: none; }
}
@media (max-width: 639px) {
    #ot-fontsize-ctrl { display: none; }
}
/* Category tabs: wrap, centrati */
#cat-tabs-bar {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
}
@media (max-width: 639px) {
    #cat-tabs-bar .cat-tab {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
    #cat-tabs-bar .cat-tab svg {
        width: 14px !important;
        height: 14px !important;
    }
}
/* Active state sempre visibile indipendentemente dalla specificità */
#cat-tabs-bar .cat-tab.bg-indigo-600 {
    background-color: #4f46e5 !important;
    color: #fff !important;
}
.ot-lang-btn {
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: transparent;
    color: inherit;
    transition: background-color 0.15s ease, color 0.15s ease;
    letter-spacing: 0.03em;
}
.ot-lang-btn:hover {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}
.dark #ot-lang-toggle {
    border-color: #374151;
}
.dark .ot-lang-btn:hover {
    background: rgba(129, 140, 248, 0.15);
    color: #818cf8;
}

/* Banner in-feed card: stesso comportamento delle tool card nella griglia */
.ad-infeed { display: flex; min-height: 140px; }

/* Scrollbar nascosta per overflow orizzontale */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Textarea monospaziata per tool di codice */
.tool-textarea {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
    resize: vertical;
    min-height: 160px;
    line-height: 1.6;
}

/* Limita a 2 righe nelle card */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
}

/* Transizione colori per dark mode — disabilitata durante lo switch del tema */
body, header, footer, main,
.tool-card, nav, section, aside,
input, textarea, select, button, label, span, p, h1, h2, h3, a, div {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tool-card {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
                box-shadow 0.2s ease, transform 0.2s ease !important;
}
.theme-switching, .theme-switching * {
    transition: none !important;
}

/* ============================================
   FAVORITES — star button on tool cards
   ============================================ */
.ot-fav-btn {
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    line-height: 1;
}
/* Desktop: compare al hover o se attiva */
@media (hover: hover) {
    .tool-card:hover .ot-fav-btn {
        opacity: 1;
    }
}
/* Mobile (touch): sempre visibile */
@media (hover: none) {
    .ot-fav-btn {
        opacity: 1;
    }
}
.ot-fav-btn.ot-fav-active {
    opacity: 1;
}
.ot-fav-btn.ot-fav-active svg {
    color: #f59e0b;
    fill: #f59e0b;
}
.dark .ot-fav-btn.ot-fav-active svg {
    color: #fbbf24;
    fill: #fbbf24;
}

/* ============================================
   AUTO-COPY — copy button on tool textareas
   ============================================ */
.ot-copy-wrap {
    position: relative;
    display: block;
}
.ot-autocopy {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    background: rgba(249,250,251,0.92);
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 3px 6px;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1;
    display: flex;
    align-items: center;
}
.ot-autocopy:hover {
    color: #4f46e5;
    border-color: #a5b4fc;
    background: #eef2ff;
}
.dark .ot-autocopy {
    background: rgba(15,23,42,0.88);
    border-color: #374151;
    color: #6b7280;
}
.dark .ot-autocopy:hover {
    color: #818cf8;
    border-color: #6366f1;
    background: #1e293b;
}

/* ============================================
   DARK MODE — override globali
   ============================================ */

/* Base */
.dark body  { background-color: #0f172a; color: #e2e8f0; }

/* Containers bianchi / grigi chiari */
.dark .bg-white   { background-color: #1e293b !important; }
.dark .bg-gray-50 { background-color: #0f172a !important; }
.dark .bg-gray-100 { background-color: #243447 !important; }
.dark .bg-gray-200 { background-color: #334155 !important; }

/* Dentro i tool: bg-gray-50/100 su div = box interni con bordo visibile in entrambi i temi */
#tool-body div.bg-gray-50,
#tool-body div.bg-gray-100 {
    border: 1px solid #e2e8f0;
}
.dark #tool-body div.bg-gray-50 { background-color: #243447 !important; border-color: #334155 !important; }
.dark #tool-body div.bg-gray-100 { border-color: #334155 !important; }

/* Testo */
.dark .text-gray-900 { color: #f1f5f9 !important; }
.dark .text-gray-800 { color: #e2e8f0 !important; }
.dark .text-gray-700 { color: #cbd5e1 !important; }
.dark .text-gray-600 { color: #94a3b8 !important; }
.dark .text-gray-500 { color: #64748b !important; }
.dark .text-gray-400 { color: #94a3b8 !important; }

/* Bordo card più visibile in light mode */
.tool-card { border-color: #6b7280 !important; }

/* Sfondi card per categoria (light mode) */
.tool-card[data-category="developer"] { background: linear-gradient(135deg, #c7d2fe, #e0e7ff) !important; }
.tool-card[data-category="graphics"]  { background: linear-gradient(135deg, #fbcfe8, #fce7f3) !important; }
.tool-card[data-category="network"]   { background: linear-gradient(135deg, #bae6fd, #e0f2fe) !important; }
.tool-card[data-category="seo"]       { background: linear-gradient(135deg, #a7f3d0, #d1fae5) !important; }
.tool-card[data-category="text"]      { background: linear-gradient(135deg, #fde68a, #fef3c7) !important; }
.tool-card[data-category="misc"]      { background: linear-gradient(135deg, #ddd6fe, #ede9fe) !important; }

/* Sfondi card per categoria (dark mode) */
.dark .tool-card[data-category="developer"] { background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(17,24,39,0.8)) !important; }
.dark .tool-card[data-category="graphics"]  { background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(17,24,39,0.8)) !important; }
.dark .tool-card[data-category="network"]   { background: linear-gradient(135deg, rgba(14,165,233,0.15), rgba(17,24,39,0.8)) !important; }
.dark .tool-card[data-category="seo"]       { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(17,24,39,0.8)) !important; }
.dark .tool-card[data-category="text"]      { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(17,24,39,0.8)) !important; }
.dark .tool-card[data-category="misc"]      { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(17,24,39,0.8)) !important; }

/* Hover card */
.tool-card:hover {
    border-color: #6366f1 !important;
    background-color: #f5f3ff !important;
    box-shadow: 0 4px 16px rgba(99,102,241,0.12) !important;
    transform: translateY(-2px);
}
.dark .tool-card:hover {
    border-color: #6366f1 !important;
    background-color: rgba(99,102,241,0.08) !important;
    box-shadow: 0 4px 16px rgba(99,102,241,0.2) !important;
    transform: translateY(-2px);
}

/* Bordi — rendi border-gray-* più visibili in light mode */
.border-gray-100 { border-color: #d1d5db !important; }
.border-gray-200 { border-color: #9ca3af !important; }
.border-gray-300 { border-color: #6b7280 !important; }

/* Bordi dark mode */
.dark .border-gray-100 { border-color: #1e293b !important; }
.dark .border-gray-200 { border-color: #334155 !important; }
.dark .border-gray-300 { border-color: #475569 !important; }

/* Colori soft (-50 e -100) usati per badge e box statistiche */
.dark .bg-indigo-50   { background-color: rgba(99,102,241,0.15)  !important; }
.dark .bg-indigo-100  { background-color: rgba(99,102,241,0.25)  !important; }
.dark .bg-purple-50   { background-color: rgba(168,85,247,0.15)  !important; }
.dark .bg-blue-50     { background-color: rgba(59,130,246,0.15)  !important; }
.dark .bg-green-50    { background-color: rgba(34,197,94,0.15)   !important; }
.dark .bg-emerald-50  { background-color: rgba(16,185,129,0.15)  !important; }
.dark .bg-emerald-100 { background-color: rgba(16,185,129,0.25)  !important; }
.dark .bg-orange-50   { background-color: rgba(249,115,22,0.15)  !important; }
.dark .bg-rose-50     { background-color: rgba(244,63,94,0.15)   !important; }
.dark .bg-amber-50    { background-color: rgba(245,158,11,0.15)  !important; }
.dark .bg-amber-100   { background-color: rgba(245,158,11,0.25)  !important; }
.dark .bg-sky-50      { background-color: rgba(14,165,233,0.15)  !important; }
.dark .bg-sky-100     { background-color: rgba(14,165,233,0.25)  !important; }
.dark .bg-pink-50     { background-color: rgba(236,72,153,0.15)  !important; }
.dark .bg-pink-100    { background-color: rgba(236,72,153,0.25)  !important; }
.dark .bg-violet-50   { background-color: rgba(139,92,246,0.15)  !important; }
.dark .bg-violet-100  { background-color: rgba(139,92,246,0.25)  !important; }
.dark .bg-red-50      { background-color: rgba(239,68,68,0.15)   !important; }
.dark .bg-lime-50     { background-color: rgba(132,204,22,0.15)  !important; }

/* Testi colorati nei box statistiche */
.dark .text-indigo-600  { color: #818cf8 !important; }
.dark .text-purple-600  { color: #c084fc !important; }
.dark .text-blue-600    { color: #60a5fa !important; }
.dark .text-green-600   { color: #4ade80 !important; }
.dark .text-emerald-600 { color: #34d399 !important; }
.dark .text-orange-600  { color: #fb923c !important; }
.dark .text-rose-600    { color: #fb7185 !important; }
.dark .text-amber-600   { color: #fbbf24 !important; }
.dark .text-sky-600     { color: #38bdf8 !important; }
.dark .text-pink-600    { color: #f472b6 !important; }
.dark .text-violet-600  { color: #a78bfa !important; }
.dark .text-red-600     { color: #f87171 !important; }
.dark .text-amber-700   { color: #fbbf24 !important; }
.dark .text-amber-800   { color: #fcd34d !important; }

/* Form elements */
.dark textarea,
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.dark select {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    color-scheme: dark;
}
html {
    scroll-behavior: smooth;
}
.dark textarea::placeholder,
.dark input::placeholder { color: #475569 !important; }

/* Bottoni ghost/outline in dark */
.dark .border-indigo-300 { border-color: #6366f1 !important; }
.dark .text-indigo-600   { color: #818cf8 !important; }
.dark .hover\:bg-indigo-50:hover  { background-color: rgba(99,102,241,0.1) !important; }
.dark .hover\:bg-gray-100:hover   { background-color: #1e293b !important; }
.dark .hover\:bg-gray-200:hover   { background-color: #334155 !important; }
.dark .hover\:bg-gray-300:hover   { background-color: #475569 !important; }

/* Shadow soffuso in dark */
.dark .shadow-sm  { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }
.dark .shadow-md  { box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; }
.dark .shadow-xl  { box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important; }

/* Preview iframe dark border */
.dark iframe { border-color: #334155 !important; background: white; }

/* Notifiche Toast */
.toast-container {
    position: fixed;
    top: 60px; /* Sotto l'header (56px) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.toast {
    background-color: #059669; /* Verde più intenso */
    color: white;
    padding: 10px 18px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Ombra meno marcata */
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    opacity: 0;
    pointer-events: auto;
}
.toast.show {
    transform: translateY(0);
    opacity: 1;
}
.toast svg {
    flex-shrink: 0;
}