/* Signal-Client — Custom styles
   Design system: frontend_skill.md + signal_client_brand.md */

/* ── Layout & Base ───────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* Sidebar: solid dark navy */
.signal-sidebar {
    background: var(--onmo-dark, #0F1923);
}

/* Main content: solid light background */
.signal-main {
    background: #F8FAFC;
}

/* Page title typography — display font */
.signal-page-title {
    font-family: 'Outfit', 'DM Sans', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Section label — brand pattern */
.signal-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Card hover: subtle lift + shadow transition */
.signal-card {
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.signal-card:hover {
    box-shadow: 0 4px 20px -4px rgba(15, 25, 35, 0.08), 0 8px 24px -8px rgba(15, 25, 35, 0.06);
}

/* Staggered reveal animation for page load */
.signal-reveal {
    opacity: 0;
    animation: signalFadeUp 0.5s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .signal-reveal,
    .signal-auth-card {
        animation: none;
        opacity: 1;
    }
    .signal-stagger-1,
    .signal-stagger-2,
    .signal-stagger-3,
    .signal-stagger-4,
    .signal-stagger-5,
    .signal-stagger-6,
    .signal-stagger-7,
    .signal-stagger-8 {
        animation-delay: 0s;
    }
}

@keyframes signalFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger delays for grid items */
.signal-stagger-1 { animation-delay: 0.05s; }
.signal-stagger-2 { animation-delay: 0.1s; }
.signal-stagger-3 { animation-delay: 0.15s; }
.signal-stagger-4 { animation-delay: 0.2s; }
.signal-stagger-5 { animation-delay: 0.25s; }
.signal-stagger-6 { animation-delay: 0.3s; }
.signal-stagger-7 { animation-delay: 0.35s; }
.signal-stagger-8 { animation-delay: 0.4s; }

/* Remove default focus outline, Tailwind focus:ring handles it */
*:focus {
    outline: none;
}

/* Custom scrollbar for sidebar and content */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Auth pages: solid dark background */
.signal-auth-bg {
    background: var(--onmo-dark, #0F1923);
}

/* Auth card: subtle entrance */
.signal-auth-card {
    animation: signalFadeUp 0.5s ease-out;
}

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-flex;
}

.htmx-request.htmx-indicator {
    display: inline-flex;
}

/* Upload button: swap label ↔ spinner during HTMX request */
/* htmx-request is on the form/trigger; upload-btn is on the button */
.htmx-request .upload-btn .upload-label,
.upload-btn.htmx-request .upload-label {
    display: none;
}

.htmx-request .upload-btn .upload-spinner,
.upload-btn.htmx-request .upload-spinner {
    display: inline-flex;
}

/* Disabled state for buttons during HTMX requests */
.htmx-request .upload-btn,
.upload-btn.htmx-request {
    opacity: 0.75;
    cursor: wait;
}