/* ═══════════════════════════════════════════════════════════════════════════
   DS2 Shared Page Utilities

   This file contains shared utilities used across all DS2 pages.
   Feature-specific styles are in:
   - pages-auth.css (login, register, get-started)
   - pages-dashboard.css (dashboard, earnings, analytics)
   - pages-sessions.css (sessions, queue, submit, setup)
   - pages-settings.css (profile, subscription, licenses, bundles, api keys)
   - pages-admin.css (admin dashboard, users, qa, audit, licenses, crm)
   - pages-public.css (marketing, homepage, viewer, docs, error pages)

   UNLAYERED on purpose. These rules override page-specific inline <style>
   blocks when a page migrates from its old base to the unified base_app.html.

   Scope: body.ds2 prefix on every rule ensures zero impact on old pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED: DS2 button overrides for migrated pages
   These normalize .ds-btn styling on pages that define their own variants.
   ═══════════════════════════════════════════════════════════════════════════ */

body.ds2 .sessions-page .new-btn,
body.ds2 .sessions-page .session-btn.primary {
    background: var(--interactive-primary);
    color: var(--interactive-primary-text);
    box-shadow: none;
    border-radius: var(--ds2-radius-md);
}

body.ds2 .sessions-page .new-btn:hover,
body.ds2 .sessions-page .session-btn.primary:hover {
    background: var(--interactive-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--ds2-shadow-md);
}

body.ds2 .setup-page .ds-btn-primary {
    background: var(--interactive-primary);
    color: var(--interactive-primary-text);
    border-radius: var(--ds2-radius-lg);
    box-shadow: none;
}

body.ds2 .setup-page .ds-btn-primary:hover {
    background: var(--interactive-primary-hover);
    box-shadow: var(--ds2-shadow-md);
}

body.ds2 .submit-page .ds-btn-primary {
    background: var(--interactive-primary);
    color: var(--interactive-primary-text);
    box-shadow: none;
    border-radius: var(--ds2-radius-lg);
}

body.ds2 .submit-page .ds-btn-primary:hover {
    background: var(--interactive-primary-hover);
    box-shadow: var(--ds2-shadow-md);
    filter: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE: Tighten padding on mobile for all migrated pages
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    body.ds2 .sessions-page,
    body.ds2 .analytics-page,
    body.ds2 .my-queue-page,
    body.ds2 .submit-page,
    body.ds2 .setup-page {
        padding-left: var(--ds2-space-4);
        padding-right: var(--ds2-space-4);
    }

    body.ds2 .dashboard-container {
        padding-left: var(--ds2-space-4);
        padding-right: var(--ds2-space-4);
    }
}


   SURFACE ELEVATION OVERRIDES (DS2 pages)
   Apply new surface tokens and shadows to legacy components on DS2 pages.
   ───────────────────────────────────────────────────────────────────── */

body.ds2 .section-card {
    background: var(--card-bg);
    border-color: var(--border-default);
    box-shadow: var(--shadow-card);
}

body.ds2 .section-card-flush {
    background: var(--card-bg);
    border-color: var(--border-default);
    box-shadow: var(--shadow-card);
}

/* Table rows — subtle hover for interactivity */
body.ds2 .table-standard tr:hover td {
    background: var(--bg-surface-raised);
}

/* ─────────────────────────────────────────────────────────────────────
   TOP NAV — SIDEBAR PAGES (DS2 app pages with left sidebar)
   On sidebar pages the sidebar already shows the logo and nav, so the
   top nav becomes a slim utility bar: role switcher + username + logout.
   Public pages (body.ds2.public-page) are exempt — they need the full nav.
   ───────────────────────────────────────────────────────────────────── */

/* Sidebar-app pages: hide logo/dashboard from top nav */
body.ds2:not(.public-page) .nav-logo {
    display: none;
}

body.ds2 .nav-dashboard {
    display: none;
}

body.ds2:not(.public-page) .nav-toggle {
    display: none;
}

body.ds2 .nav {
    background: rgba(12, 12, 14, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(42, 42, 46, 0.6);
}

body.ds2:not(.public-page) .nav-inner {
    justify-content: flex-end;
}

body.ds2 .nav-links {
    gap: var(--ds2-space-4);
}

body.ds2 .nav-links a {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    transition: color 150ms ease;
}
body.ds2 .nav-links a:hover {
    color: var(--text-primary);
}

/* Buttons in nav must keep their own color (c-btn-primary text is white on indigo) */
body.ds2 .nav-links .c-btn-primary,
body.ds2 .nav-links .c-btn-accent {
    color: var(--color-primary-text);
}

/* On mobile where sidebar hides, restore the logo for top-nav navigation */
@media (max-width: 1024px) {
    body.ds2:not(.public-page) .nav-logo {
        display: flex;
    }
    body.ds2:not(.public-page) .nav-inner {
        justify-content: space-between;
    }
}

/* DS2 logo icon: indigo rounded square (replaces legacy orange polygon) */
body.ds2 .nav-logo .logo-icon {
    background: var(--interactive-primary);
    border-radius: var(--ds2-radius-md);
    clip-path: none;
    box-shadow: none;
    animation: none;
}

/* ─────────────────────────────────────────────────────────────────────
   MOBILE NAV: Contextual CTA on public pages (Figma pattern)
   At ≤768px on body.ds2.public-page:
   - Hide the hamburger toggle
   - Hide the slide-in nav links drawer
   - Show .nav-mobile-cta with per-page buttons inline in the nav bar
   ───────────────────────────────────────────────────────────────────── */

/* Always hidden at desktop — only shows at mobile */
body.ds2.public-page .nav-mobile-cta {
    display: none;
}

@media (max-width: 768px) {
    /* Hide hamburger on public pages */
    body.ds2.public-page .nav-toggle {
        display: none;
    }

    /* Prevent the nav-links drawer from appearing on public pages at mobile */
    body.ds2.public-page .nav-links {
        display: none !important;
    }

    /* Show per-page CTA buttons inline */
    body.ds2.public-page .nav-mobile-cta {
        display: flex;
        align-items: center;
        gap: var(--ds2-space-2);
    }

    /* Ghost "Log In" link for homepage two-button layout */
    body.ds2.public-page .nav-mobile-login {
        font-size: var(--ds2-text-sm);
        font-weight: 500;
        color: var(--text-secondary);
        text-decoration: none;
        padding: 6px 10px;
        white-space: nowrap;
    }

    body.ds2.public-page .nav-mobile-login:hover {
        color: var(--text-primary);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   VISUAL REDESIGN: Global polish — clip-path kill, glow, elevation
   ───────────────────────────────────────────────────────────────────── */

/* Force-reset legacy clip-path on ALL stat cards under ds2 */
body.ds2 .stat-card,
body.ds2 .stat-card.c-stat-card {
    clip-path: none !important;
}

/* Widget header with subtle bottom separator */
body.ds2 .ds2-card-header {
    padding-bottom: var(--ds2-space-3);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--ds2-space-4);
}

/* Welcome section ambient glow */
body.ds2 .dashboard-welcome,
body.ds2 .artist-dash .welcome-text {
    position: relative;
    padding-bottom: var(--ds2-space-6);
    margin-bottom: var(--ds2-space-6);
}

body.ds2 .dashboard-welcome::after,
body.ds2 .artist-dash .welcome-text::after {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 200px;
    background: var(--glow-primary);
    pointer-events: none;
    z-index: -1;
}

/* ─────────────────────────────────────────────────────────────────────
   VISUAL REDESIGN: Global component polish
   ───────────────────────────────────────────────────────────────────── */

/* Primary button: subtle glow on hover */
body.ds2 .ds2-btn-primary:hover {
    background: var(--interactive-primary-hover);
    box-shadow: 0 0 20px rgba(249,115,22,0.25);
}

/* Secondary button: surface raise on hover */
body.ds2 .ds2-btn-secondary:hover {
    background: var(--bg-surface-raised);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-elevation-1);
}

/* Table rows: clearer hover state */
body.ds2 .c-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.ds2 .c-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

/* Empty states: subtle background differentiation */
body.ds2 .c-empty-state {
    background: var(--glass-bg);
    border: 1px dashed var(--border-default);
    border-radius: var(--ds2-radius-lg);
    padding: 48px 24px;
    text-align: center;
}

/* Sidebar active link: visible glow — color override needed because
   style.css sets .sidebar-link.active { color: var(--black) } unlayered,
   which beats the @layer'd rule in design-system-v2.css */
body.ds2 .sidebar-link.active {
    color: var(--interactive-link);
    background: rgba(99, 102, 241, 0.08);
    box-shadow: inset 3px 0 0 var(--interactive-primary);
}

/* Generic DS2 link — used in dashboard widgets, card headers, etc.
   Overrides browser default blue (#0000ee) which fails contrast on dark bg */
body.ds2 .ds2-link {
    color: var(--interactive-link);
    text-decoration: none;
}

body.ds2 .ds2-link:hover {
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────
   VISUAL REDESIGN: Accessibility & Performance Guards
   ───────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    body.ds2 *,
    body.ds2 *::before,
    body.ds2 *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media (max-width: 640px) {
    /* Stat cards reduce transform on small screens */
    body.ds2 .artist-dash .stat-card.c-stat-card:hover {
        transform: none;
    }

    body.ds2 .artist-dash .stat-card.c-stat-card .stat-value {
        font-size: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Marketing Page DS2 Overrides (Phase 6)
   ═══════════════════════════════════════════════════════════════════ */

body.ds2 .marketing-hero {
    background: var(--bg-base);
}

body.ds2 .marketing-section {
    padding: var(--spacing-12, 48px) 0;
}

body.ds2 .marketing-features {
    display: grid;
    gap: var(--spacing-6, 24px);
}

body.ds2 .marketing-pricing-grid {
    display: grid;
    gap: var(--spacing-6, 24px);
}

body.ds2 .marketing-benefits-grid {
    display: grid;
    gap: var(--spacing-4, 16px);
}

body.ds2 .marketing-revenue-split {
    background: var(--bg-surface);
    border-radius: var(--ds2-radius-lg);
    padding: var(--spacing-6, 24px);
}

body.ds2 .capabilities-page {
    background: var(--bg-base);
}

body.ds2 .capabilities-form {
    background: var(--bg-surface);
    border-radius: var(--ds2-radius-lg);
    padding: var(--spacing-8, 32px);
}

/* ═══════════════════════════════════════════════════════════════════
   Admin Panel DS2 Overrides (Phase 5)
   ═══════════════════════════════════════════════════════════════════ */

body.ds2 .admin-container {
    max-width: 100%;
    padding: var(--spacing-6, 24px);
}

body.ds2 .qa-container {
    max-width: 100%;
    padding: var(--spacing-6, 24px);
}

body.ds2 .crm-page {
    background: var(--bg-base);
}

body.ds2 .crm-page::before {
    display: none;
}

body.ds2 .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}