/* Anlytix — small shared styles layered on top of Tailwind utilities. */

:root { color-scheme: light dark; }

html { scroll-behavior: smooth; }

/* Reusable form input look (used in auth + dashboard forms). */
.form-input {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid rgb(203 213 225);
    background: #fff;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
    transition: box-shadow .15s, border-color .15s;
}
.form-input:focus {
    border-color: rgb(15 23 42);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}
.dark .form-input {
    background: rgb(15 23 42);
    border-color: rgb(51 65 85);
    color: rgb(226 232 240);
}

/* Toast notifications (created from app.js). */
#toastWrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .5rem; }
.toast {
    min-width: 240px; max-width: 360px;
    padding: .75rem 1rem; border-radius: .6rem;
    color: #fff; font-size: .85rem; font-weight: 500;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
    animation: toastIn .2s ease-out;
}
.toast-success { background: #171717; }
.toast-error   { background: #dc2626; }
.toast-info    { background: #171717; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Thin scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 8px; }

/* =========================================================================
   Premium light theme
   ========================================================================= */

/* Clean monochrome page tint (light mode) — a barely-there neutral wash,
   premium and calm like Notion. */
html:not(.dark) body {
    background-image:
        radial-gradient(1200px 560px at 50% -10%, rgba(15, 23, 42, 0.035), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Soft, layered card shadows for premium depth (replaces flat shadow-sm). */
.shadow-sm {
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 1px 3px rgba(16, 24, 40, 0.06) !important;
}
.dark .shadow-sm {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.20),
        0 1px 3px rgba(0, 0, 0, 0.24) !important;
}

/* Crisper hairline borders in light mode. */
html:not(.dark) .border-slate-200 { border-color: rgb(232 235 240); }

/* Premium input depth + smoother radius. */
.form-input {
    border-radius: 0.625rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Frosted, premium top bar / sidebar surfaces in light mode. */
html:not(.dark) aside#sidebar { box-shadow: 1px 0 0 rgba(16, 24, 40, 0.04); }

/* Refined toast shadow. */
.toast { box-shadow: 0 10px 30px rgba(16, 24, 40, 0.18); }

/* Hide scrollbars on horizontally-scrollable controls (e.g. filter pills on mobile). */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Subtle live-update flash for numbers that refresh in place. */
@keyframes statBump { 0% { transform: translateY(2px); opacity: .35; } 100% { transform: none; opacity: 1; } }
.stat-bump { animation: statBump .35s ease-out; }

/* Realtime number pulse — a gentle pop when a live value changes. */
@keyframes rtPulse { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
.rt-pulse { animation: rtPulse .45s ease-out; display: inline-block; transform-origin: left center; }

/* Live-feed rows fade in. */
@keyframes feedIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.feed-in { animation: feedIn .35s ease-out; }