/* HistoHub — custom styles layered on top of Tailwind (Play CDN). */

:root {
    --hh-bg: #f1f5f9;
    --hh-glass: rgba(255, 255, 255, 0.72);
    --hh-border: rgba(148, 163, 184, 0.25);
}

.dark {
    --hh-bg: #0b1120;
    --hh-glass: rgba(17, 24, 39, 0.62);
    --hh-border: rgba(148, 163, 184, 0.14);
}

html { scroll-behavior: smooth; }

[x-cloak] { display: none !important; }

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--hh-bg);
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(1200px 600px at 100% -10%, rgba(99, 102, 241, 0.12), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(14, 165, 233, 0.10), transparent 55%);
    background-attachment: fixed;
}

/* Glassmorphism surface */
.glass {
    background: var(--hh-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--hh-border);
}

/* Card hover lift */
.card-hover {
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.45);
}

/* Sidebar nav link */
.nav-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .85rem; border-radius: .75rem;
    color: rgb(100 116 139); font-weight: 500; font-size: .9rem;
    transition: all .18s ease;
}
.nav-link:hover { background: rgba(99,102,241,.10); color: rgb(79 70 229); }
.dark .nav-link { color: rgb(148 163 184); }
.dark .nav-link:hover { background: rgba(99,102,241,.16); color: rgb(165 180 252); }
.nav-link.active {
    background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(14,165,233,.14));
    color: rgb(67 56 202); box-shadow: inset 0 0 0 1px rgba(99,102,241,.25);
}
.dark .nav-link.active { color: rgb(199 210 254); }

/* Status pills */
.pill { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:9999px; font-size:.72rem; font-weight:600; }
.pill-green  { background:rgba(34,197,94,.14); color:#16a34a; }
.pill-red    { background:rgba(239,68,68,.14); color:#dc2626; }
.pill-amber  { background:rgba(245,158,11,.16); color:#d97706; }
.pill-blue   { background:rgba(59,130,246,.14); color:#2563eb; }
.pill-slate  { background:rgba(100,116,139,.16); color:#475569; }
.pill-violet { background:rgba(139,92,246,.16); color:#7c3aed; }

/* Skeleton loader */
.skeleton { position: relative; overflow: hidden; background: rgba(148,163,184,.18); border-radius:.5rem; }
.skeleton::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Fade-up entrance */
@keyframes fadeUp { from { opacity:0; transform: translateY(10px);} to {opacity:1; transform:none;} }
.animate-fade-up { animation: fadeUp .45s cubic-bezier(.2,.8,.2,1) both; }

/* Landing page scroll-reveal cards */
.reveal-card {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    transition: opacity 0.65s cubic-bezier(.2,.8,.2,1), transform 0.65s cubic-bezier(.2,.8,.2,1);
}
.reveal-card.revealed {
    opacity: 1;
    transform: none;
}
.reveal-card .landing-card-icon {
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
}
.reveal-card.revealed:hover .landing-card-icon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.45);
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.landing-float {
    animation: floatCard 4s ease-in-out infinite;
}
.landing-float-delay-1 { animation-delay: 0.5s; }
.landing-float-delay-2 { animation-delay: 1s; }
.landing-float-delay-3 { animation-delay: 1.5s; }
.landing-float-delay-4 { animation-delay: 2s; }
.landing-float-delay-5 { animation-delay: 2.5s; }

/* Modal overlay (Alpine + native dialog) */
.hh-modal-backdrop {
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
dialog.hh-dialog {
    margin: auto;
    border: none;
    padding: 0;
    max-width: 32rem;
    width: calc(100% - 2rem);
    max-height: 90vh;
    overflow: auto;
    background: transparent;
}
dialog.hh-dialog::backdrop {
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(4px);
}

/* Invoice line-item row */
.invoice-line-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--hh-border);
    background: var(--hh-glass);
}
@media (min-width: 768px) {
    .invoice-line-row {
        grid-template-columns: 1.4fr 1.4fr 5rem 7rem 6rem 2.5rem;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--hh-border);
        border-radius: 0;
    }
    .invoice-line-row:last-of-type { border-bottom: none; }
}

/* Toast */
.toast { animation: fadeUp .3s ease both; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.4); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.65); background-clip: content-box; }

/* Command palette backdrop */
.cmdk-backdrop { background: rgba(2,6,23,.55); backdrop-filter: blur(4px); }