/* =========================================================
   Mobox Nexus - app.css
   - Custom scrollbar
   - Perspective grid (auth bg)
   - Line clamp utilities
   - Light theme overrides (data-theme="light")
   ========================================================= */

/* ---------- Scrollbar ---------- */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(82, 82, 91, 0.4);
    border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(113, 113, 122, 0.6);
}
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(82, 82, 91, 0.4) transparent;
}

/* ---------- Line clamp ---------- */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Perspective grid (auth screens) ---------- */
.perspective-grid-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.grid-container {
    position: absolute;
    width: 200vw;
    height: 150vh;
    bottom: -20vh;
    left: -50vw;
    background-image:
        linear-gradient(to right, rgba(139, 92, 246, 0.25) 1px, transparent 1px),
        linear-gradient(to top,   rgba(139, 92, 246, 0.25) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(600px) rotateX(70deg);
    animation: moveGrid 3s linear infinite;
}

@keyframes moveGrid {
    0%   { transform: perspective(600px) rotateX(70deg) translateY(0); }
    100% { transform: perspective(600px) rotateX(70deg) translateY(60px); }
}

/* ---------- Body bg quando il tema è light ---------- */
html[data-theme="light"] body {
    background-color: #fafafa !important;
    color: #18181b !important;
}

/* ---------- Light theme: overrides classi Tailwind più usate ---------- */
html[data-theme="light"] .bg-zinc-950,
html[data-theme="light"] .sm\:bg-zinc-950 { background-color: #fafafa !important; }
html[data-theme="light"] .bg-zinc-900,
html[data-theme="light"] .sm\:bg-zinc-900 { background-color: #ffffff !important; }
html[data-theme="light"] .bg-zinc-900\/50,
html[data-theme="light"] .sm\:bg-zinc-900\/50,
html[data-theme="light"] .bg-zinc-900\/60,
html[data-theme="light"] .sm\:bg-zinc-900\/60,
html[data-theme="light"] .bg-zinc-900\/80,
html[data-theme="light"] .sm\:bg-zinc-900\/80,
html[data-theme="light"] .bg-zinc-900\/95 { background-color: rgba(255, 255, 255, 0.85) !important; }
html[data-theme="light"] .bg-zinc-950\/50,
html[data-theme="light"] .sm\:bg-zinc-950\/50,
html[data-theme="light"] .bg-zinc-950\/80 { background-color: rgba(250, 250, 250, 0.85) !important; }
html[data-theme="light"] .bg-zinc-800 { background-color: #f4f4f5 !important; }
html[data-theme="light"] .bg-zinc-800\/20,
html[data-theme="light"] .bg-zinc-800\/30,
html[data-theme="light"] .bg-zinc-800\/40,
html[data-theme="light"] .bg-zinc-800\/50,
html[data-theme="light"] .bg-zinc-800\/60,
html[data-theme="light"] .bg-zinc-800\/80 { background-color: rgba(244, 244, 245, 0.7) !important; }
html[data-theme="light"] .bg-zinc-700 { background-color: #e4e4e7 !important; }
html[data-theme="light"] .bg-zinc-600 { background-color: #d4d4d8 !important; }
html[data-theme="light"] .bg-zinc-500 { background-color: #a1a1aa !important; }

/* Borders */
html[data-theme="light"] .border-zinc-500,
html[data-theme="light"] .border-zinc-600,
html[data-theme="light"] .border-zinc-700,
html[data-theme="light"] .border-zinc-700\/50,
html[data-theme="light"] .border-zinc-700\/80,
html[data-theme="light"] .border-zinc-800,
html[data-theme="light"] .border-zinc-800\/50,
html[data-theme="light"] .border-zinc-800\/60,
html[data-theme="light"] .border-zinc-800\/80,
html[data-theme="light"] .border-zinc-950 { border-color: #e4e4e7 !important; }

/* Text */
html[data-theme="light"] .text-white,
html[data-theme="light"] .text-zinc-50,
html[data-theme="light"] .text-zinc-100,
html[data-theme="light"] .text-zinc-200 { color: #18181b !important; }
html[data-theme="light"] .text-zinc-300,
html[data-theme="light"] .text-zinc-400 { color: #3f3f46 !important; }
html[data-theme="light"] .text-zinc-500,
html[data-theme="light"] .text-zinc-600 { color: #71717a !important; }
html[data-theme="light"] .text-zinc-700 { color: #52525b !important; }

/* Divide / gradient overrides per il light theme */
html[data-theme="light"] .divide-zinc-800\/50 > * + * { border-color: #e4e4e7 !important; }
html[data-theme="light"] .from-zinc-950 { --tw-gradient-from: #fafafa !important; }
html[data-theme="light"] .to-zinc-950   { --tw-gradient-to: #fafafa !important; }

/* Hover states (semplificati) */
html[data-theme="light"] .hover\:bg-zinc-800:hover,
html[data-theme="light"] .hover\:bg-zinc-800\/50:hover { background-color: #e4e4e7 !important; }
html[data-theme="light"] .hover\:bg-zinc-700:hover { background-color: #d4d4d8 !important; }

/* Mantieni testo chiaro sui bottoni con bg colorato (violet, emerald, red, ecc.):
   l'override generico .text-zinc-50 li scurirebbe e diventerebbero illeggibili. */
html[data-theme="light"] [class*="bg-violet-6"].text-zinc-50,
html[data-theme="light"] [class*="bg-violet-5"].text-zinc-50,
html[data-theme="light"] [class*="bg-violet-6"].text-white,
html[data-theme="light"] [class*="bg-violet-5"].text-white,
html[data-theme="light"] [class*="bg-emerald-5"].text-zinc-50,
html[data-theme="light"] [class*="bg-emerald-6"].text-zinc-50,
html[data-theme="light"] [class*="bg-red-5"].text-zinc-50,
html[data-theme="light"] [class*="bg-red-6"].text-zinc-50 { color: #fafafa !important; }

/* Selection bg */
html[data-theme="light"] body { caret-color: #7c3aed; }

/* ---------- Shrink-0 quirks fix ---------- */
.shrink-0 { flex-shrink: 0; }