/* ============================================
   AUTHENTICATED HOME PAGE STYLES
   Used by Pages/Home/Home.razor
   
   Theme variables are defined in: themes/theme-variables.css
   ============================================ */

/* Import theme variables */
@import url('themes/theme-variables.css');

/* ============================================
   AUTHENTICATED PAGE CONTAINER
   ============================================ */
.authenticated-page {
    min-height: calc(100vh - var(--header-height, 56px));
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background 0.5s ease;
    /* Allow scrolling on regular authenticated pages */
}

/* Home page specific.
   HOME-SCROLL-3 (2026-07-07): fixed height removed — Home scrolls the
   document like other authenticated pages. `overflow: clip` (not hidden)
   still contains the animated theme layers so they can't create phantom
   scrollbars, but without making this element a scroll container.
   See Home.razor.css for the full rationale. */
.home-authenticated {
    min-height: calc(100vh - var(--header-height, 56px));
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: clip;
    transition: background 0.5s ease;
}

/* ============================================
   THEME BACKGROUNDS - Full gradient definitions
   These are in the global CSS file (not scoped) so they apply correctly
   ============================================ */

/* ☁️ CLOUD THEME */
html.theme-cloud .home-authenticated {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 30%, #7dd3fc 70%, #38bdf8 100%);
}

html.theme-cloud .home-authenticated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 300px 150px at 10% 20%, rgba(255, 255, 255, 0.9) 0%, transparent 70%),
        radial-gradient(ellipse 250px 120px at 85% 15%, rgba(255, 255, 255, 0.85) 0%, transparent 70%),
        radial-gradient(ellipse 200px 100px at 70% 35%, rgba(255, 255, 255, 0.7) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: cloudDrift 20s ease-in-out infinite;
}

/* 🚀 SPACE THEME */
html.theme-space .home-authenticated {
    background: linear-gradient(180deg, #0f0a1e 0%, #1a1040 30%, #2d1b69 70%, #1e1b4b 100%);
}

html.theme-space .home-authenticated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 400px 200px at 15% 25%, rgba(139, 92, 246, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 350px 175px at 85% 15%, rgba(236, 72, 153, 0.06) 0%, transparent 70%),
        radial-gradient(circle 1px at 10% 15%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
        radial-gradient(circle 1px at 25% 35%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
        radial-gradient(circle 1px at 40% 10%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
        radial-gradient(circle 1px at 55% 45%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
        radial-gradient(circle 1px at 70% 25%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
        radial-gradient(circle 1px at 85% 55%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
        radial-gradient(circle 2px at 20% 50%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
        radial-gradient(circle 2px at 75% 60%, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    animation: starTwinkle 4s ease-in-out infinite;
}

/* ❄️ WINTER THEME
   WI-V-3 (2026-05-10): `::before` radial-gradient bloom overlays removed.
   The bottom-center white bloom (`ellipse 100% 50% at 50% 100%`) was reading
   as a giant spotlight at the bottom-right of the viewport, and the two
   side glows added more visual noise on top. Base linear gradient carries
   Winter on its own — the snowflakes (CSS + JS canvas) provide all the
   atmospheric layering needed. */
html.theme-winter .home-authenticated {
    background: linear-gradient(180deg, #164e63 0%, #155e75 30%, #0e7490 70%, #0891b2 100%);
}

/* 🌿 NATURE THEME */
html.theme-nature .home-authenticated {
    background: linear-gradient(180deg, #14532d 0%, #166534 30%, #15803d 70%, #16a34a 100%);
}

html.theme-nature .home-authenticated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 200px 600px at 30% 0%, rgba(253, 224, 71, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 150px 500px at 70% 0%, rgba(253, 224, 71, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 300px 150px at 10% 20%, rgba(5, 46, 22, 0.2) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: lightSway 8s ease-in-out infinite;
}

/* 🌊 OCEAN THEME */
html.theme-ocean .home-authenticated {
    background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 30%, #0284c7 70%, #0ea5e9 100%);
}

html.theme-ocean .home-authenticated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 400px 200px at 20% 80%, rgba(56, 189, 248, 0.2) 0%, transparent 70%),
        radial-gradient(ellipse 300px 150px at 80% 70%, rgba(56, 189, 248, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 200px 100px at 50% 90%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: waveMotion 6s ease-in-out infinite;
}

/* 🔮 MYSTIC THEME */
html.theme-mystic .home-authenticated {
    background: linear-gradient(180deg, #1a0a2e 0%, #2d1854 30%, #3b1f6e 70%, #2d1854 100%);
}

html.theme-mystic .home-authenticated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 350px 175px at 20% 30%, rgba(249, 115, 22, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 300px 150px at 80% 20%, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* 💠 TRON THEME */
html.theme-tron .home-authenticated {
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 49px,
            rgba(0, 212, 255, 0.03) 49px,
            rgba(0, 212, 255, 0.03) 50px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 49px,
            rgba(0, 212, 255, 0.03) 49px,
            rgba(0, 212, 255, 0.03) 50px
        ),
        linear-gradient(180deg, #000000 0%, #020408 20%, #040810 50%, #020408 80%, #000000 100%);
}

/* TG-V-2 (2026-05-10): Radial-gradient overlays toned ~3× subtler.
   Pre-fix opacities (0.06 / 0.04) were creating visible bright cyan
   blobs over the grid backdrop — exactly the kind of "competing
   decoration" Josh asked to retire on Mystic and Grid. Cut to
   0.02 / 0.015 so they read as the faintest atmospheric tint
   over the grid pattern, not as visible glow patches. */
html.theme-tron .home-authenticated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 400px 200px at 30% 40%, rgba(0, 212, 255, 0.02) 0%, transparent 70%),
        radial-gradient(ellipse 300px 150px at 70% 30%, rgba(0, 255, 255, 0.015) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* 💼 EXECUTIVE THEME */
html.theme-executive .home-authenticated {
    background: linear-gradient(180deg, #f5f5f5 0%, #efefef 35%, #e8e8e8 65%, #e0e0e0 100%);
}

html.theme-executive .home-authenticated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(30, 41, 59, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Theme animations */
@keyframes cloudDrift {
    0% { transform: translateX(0) translateY(0) scale(1); }
    25% { transform: translateX(15px) translateY(-5px) scale(1.01); }
    50% { transform: translateX(25px) translateY(0) scale(1); }
    75% { transform: translateX(12px) translateY(5px) scale(0.99); }
    100% { transform: translateX(0) translateY(0) scale(1); }
}

@keyframes starTwinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes lightSway {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

@keyframes waveMotion {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.home-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ============================================
   HERO SECTION
   ============================================ */
.home-authenticated .hero-section {
    text-align: center;
    margin-bottom: 32px;
    padding-top: 20px;
}

.home-authenticated .hero-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.2;
    color: var(--theme-text-primary);
    text-shadow: var(--theme-title-shadow);
}

.home-authenticated .hero-subtitle {
    font-size: 1rem;
    margin: 0 0 20px;
    color: var(--theme-text-secondary);
    text-shadow: var(--theme-subtitle-shadow);
}

.home-authenticated .search-wrapper {
    max-width: 580px;
    margin: 0 auto;
}

/* ============================================
   QUICK STATS SECTION
   ============================================ */
.quick-stats-section {
    margin-bottom: 32px;
}

.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.quick-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--theme-surface, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--theme-card-border, rgba(255, 255, 255, 0.1));
}

.quick-stat-card:hover {
    transform: translateY(-2px);
    background: var(--theme-card-hover-bg, rgba(255, 255, 255, 0.15));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Theme-specific card backgrounds */
.theme-cloud .quick-stat-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(99, 102, 241, 0.1);
}

.theme-cloud .quick-stat-card:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.tasks-icon {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.stat-icon.goals-icon {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.stat-icon.objectives-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.stat-svg {
    width: 22px;
    height: 22px;
    color: white;
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--theme-text-primary);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

/* ============================================
   TOOLS SECTION
   ============================================ */
.tools-section,
.categories-section {
    margin-bottom: 32px;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--theme-text-primary);
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.tool-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--theme-surface, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--theme-card-border, rgba(255, 255, 255, 0.1));
}

.tool-card:hover {
    transform: translateX(4px);
    background: var(--theme-card-hover-bg, rgba(255, 255, 255, 0.15));
}

.theme-cloud .tool-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(99, 102, 241, 0.1);
}

.theme-cloud .tool-card:hover {
    background: rgba(255, 255, 255, 0.9);
}

.tool-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-icon-svg {
    width: 20px;
    height: 20px;
    color: white;
}

.tool-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tool-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--theme-text-primary);
}

.tool-desc {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-arrow {
    width: 18px;
    height: 18px;
    opacity: 0;
    transition: all 0.2s ease;
    color: var(--theme-chip-color, #a855f7);
    flex-shrink: 0;
}

.tool-card:hover .tool-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* ============================================
   CATEGORIES SECTION
   ============================================ */
.categories-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--theme-chip-bg);
    color: var(--theme-chip-color);
    border: 1px solid var(--theme-chip-border);
}

.category-chip:hover {
    background: var(--theme-chip-hover-bg);
    transform: translateY(-1px);
}

.category-svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   FOOTER ACTIONS
   ============================================ */
.home-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 24px;
}

.theme-toggle-wrapper {
    /* Theme toggle positioned on left */
}

.dashboard-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    background: var(--theme-cta-gradient, linear-gradient(135deg, #6366f1, #a855f7));
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.dashboard-link-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dashboard-svg {
    width: 18px;
    height: 18px;
}

.dashboard-link-btn .arrow {
    transition: transform 0.2s ease;
}

.dashboard-link-btn:hover .arrow {
    transform: translateX(4px);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .home-main {
        padding: 16px;
    }
    
    .home-authenticated .hero-title {
        font-size: 1.5rem;
    }
    
    .quick-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .tools-grid {
        grid-template-columns: 1fr;
    }
    
    .home-footer-actions {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .dashboard-link-btn {
        justify-content: center;
    }
}

/* ============================================
   ACCESSIBILITY: FOCUS STATES
   ============================================ */
.quick-stat-card:focus-visible,
.tool-card:focus-visible,
.category-chip:focus-visible,
.dashboard-link-btn:focus-visible {
    outline: 2px solid var(--theme-chip-color, #a855f7);
    outline-offset: 2px;
}

/* ============================================
   ACCESSIBILITY: REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .quick-stat-card,
    .tool-card,
    .category-chip,
    .dashboard-link-btn,
    .tool-arrow {
        transition: none;
    }
    
    .quick-stat-card:hover,
    .tool-card:hover,
    .category-chip:hover,
    .dashboard-link-btn:hover {
        transform: none;
    }
}

/* HUB-PHONE-5 (2026-10-15, Josh's PWA: the bottom tab strip "shows/hides as you scroll"): the
   strip is position:fixed inside .home-authenticated, and that element carries overflow:clip
   (HOME-SCROLL-3). On iOS, an overflow-clipped ancestor clips its FIXED descendants to its own box
   as the page scrolls - the strip was being cut off the moment the box's bottom edge rose past the
   strip. Chrome does not clip fixed children this way, which is why every emulation passed. Phones
   drop the clip; the companion glow it was there to contain is held by the hero's own box. */
@media (max-width: 480px) {
    .home-authenticated {
        overflow: visible;
    }
}