/* ═══════════════════════════════════════════════════════════════════
   KAINER DASHBOARD - Main Styles
   Material Design 3 Expressive
═══════════════════════════════════════════════════════════════════ */

:root {
    /* Surface Colors - Light */
    --md-surface: #fafcff;
    --md-surface-container: #eef3fa;
    --md-surface-container-high: #e8edf5;
    --md-surface-container-highest: #e1e6ee;
    --md-on-surface: #1a1c1e;
    --md-on-surface-variant: #44474e;
    --md-outline: #74777f;
    --md-outline-variant: #c4c6cf;
    
    /* Brand Colors */
    --brand-blue: #7cacf8;
    --brand-red: #f28b82;
    --brand-yellow: #fdd663;
    --brand-green: #81c995;
    --brand-purple: #c58af9;
    --brand-teal: #78d9ec;
    
    /* Primary */
    --md-primary: #0b57d0;
    --md-primary-container: #d3e4ff;
    
    /* Elevation & Shape */
    --md-elevation-1: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.12);
    --md-elevation-2: 0 1px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.12);
    --md-elevation-3: 0 4px 8px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.15);
    --md-shape-full: 9999px;
    --md-shape-large: 24px;
    --md-shape-medium: 16px;
    --md-shape-small: 12px;
    
    /* Motion */
    --md-motion-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-motion-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
    --md-duration-medium: 300ms;
    --md-duration-short: 150ms;
    
    /* Typography */
    --font-display: 'Google Sans Display', system-ui, sans-serif;
    --font-body: 'Google Sans', system-ui, sans-serif;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --md-surface: #111418;
        --md-surface-container: #1d2024;
        --md-surface-container-high: #272a2f;
        --md-surface-container-highest: #32353a;
        --md-on-surface: #e2e2e5;
        --md-on-surface-variant: #c4c6cf;
        --md-outline: #8e9099;
        --md-outline-variant: #44474e;
        --md-primary: #a8c7fa;
        --md-primary-container: #004dad;
    }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { 
    font-family: var(--font-body); 
    background: var(--md-surface); 
    color: var(--md-on-surface); 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
}

/* Background */
body::before { 
    content: ''; 
    position: fixed; 
    inset: 0; 
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(66, 133, 244, 0.08), transparent), 
                radial-gradient(ellipse 60% 40% at 100% 100%, rgba(234, 67, 53, 0.05), transparent); 
    pointer-events: none; 
    z-index: 0; 
}

/* Auth-based visibility */
.auth-required { display: none; }
.logged-in .auth-required { display: flex; }
.logged-in .greeting-bar { display: flex; }
.logged-in .ai-section { display: block; }
.logged-in .services-section { display: block; }
.tagline { display: none; }
.logged-in .tagline { display: block; }

/* ═══════════════════════════════════════════════════════════════════
   GREETING BAR
═══════════════════════════════════════════════════════════════════ */
.greeting-bar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 200px; 
    z-index: 99; 
    padding: 14px 20px; 
    display: none; 
    align-items: center; 
    gap: 16px; 
}
.greeting-text { font-size: 0.9375rem; color: var(--md-on-surface-variant); }
.greeting-meta { display: flex; align-items: center; gap: 12px; font-size: 0.8125rem; color: var(--md-on-surface-variant); }
.greeting-time { font-weight: 500; font-variant-numeric: tabular-nums; }
.greeting-weather { display: flex; align-items: center; gap: 6px; }
.weather-icon { font-size: 1.1rem; }
.weather-temp { font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════════ */
.header { 
    position: fixed; 
    top: 0; 
    right: 0; 
    z-index: 100; 
    padding: 12px 16px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.header-chip { 
    display: none; 
    align-items: center; 
    gap: 8px; 
    padding: 8px 16px; 
    background: var(--md-surface-container); 
    border-radius: var(--md-shape-full); 
    font-size: 0.875rem; 
    font-weight: 500; 
    color: var(--md-on-surface-variant); 
    cursor: pointer; 
    border: none; 
    transition: all var(--md-duration-short) var(--md-motion-standard); 
}
.logged-in .header-chip { display: flex; }
.header-chip:hover { background: var(--md-surface-container-high); box-shadow: var(--md-elevation-1); }

.status-indicator { 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    background: var(--brand-green); 
    animation: pulse 2s infinite; 
}
.status-indicator.external { background: var(--brand-yellow); }

@keyframes pulse { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0.5; } 
}

/* ═══════════════════════════════════════════════════════════════════
   DROPDOWNS (Apps & Account)
═══════════════════════════════════════════════════════════════════ */
.apps-menu-container, .account-menu-container { position: relative; }
.apps-menu-container { display: none; }
.logged-in .apps-menu-container { display: block; }

.apps-trigger, .google-avatar { 
    width: 40px; 
    height: 40px; 
    border: none; 
    background: transparent; 
    border-radius: 50%; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--md-on-surface-variant); 
    transition: all var(--md-duration-short) var(--md-motion-standard); 
}
.apps-trigger:hover, .google-avatar:hover { background: var(--md-surface-container-high); }
.apps-trigger.active, .google-avatar.active { background: var(--md-surface-container-highest); }

.google-avatar { padding: 0; overflow: hidden; width: 36px; height: 36px; }
.google-avatar:hover { box-shadow: 0 0 0 4px var(--md-surface-container-high); background: transparent; }
.google-avatar img { width: 100%; height: 100%; object-fit: cover; }

.apps-dropdown, .account-dropdown { 
    position: absolute; 
    top: calc(100% + 8px); 
    right: 0; 
    background: var(--md-surface); 
    border-radius: var(--md-shape-large); 
    box-shadow: var(--md-elevation-3); 
    opacity: 0; 
    visibility: hidden; 
    transform: scale(0.95) translateY(-8px); 
    transform-origin: top right; 
    transition: all var(--md-duration-medium) var(--md-motion-emphasized); 
    z-index: 1000; 
}
.apps-dropdown { width: 340px; max-height: 480px; overflow: hidden; }
.account-dropdown { width: 360px; }
.apps-dropdown.open, .account-dropdown.open { 
    opacity: 1; 
    visibility: visible; 
    transform: scale(1) translateY(0); 
}

/* Apps Grid */
.apps-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 4px; 
    padding: 16px 12px; 
    max-height: 400px; 
    overflow-y: auto; 
}
.app-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
    padding: 12px 8px; 
    border-radius: var(--md-shape-medium); 
    text-decoration: none; 
    color: var(--md-on-surface); 
    transition: background var(--md-duration-short) var(--md-motion-standard); 
}
.app-item:hover { background: var(--md-surface-container); }
.app-item img { width: 40px; height: 40px; }
.app-item span { font-size: 0.75rem; text-align: center; color: var(--md-on-surface-variant); }

.apps-footer { border-top: 1px solid var(--md-outline-variant); padding: 12px; text-align: center; }
.apps-more-link { 
    padding: 8px 16px; 
    font-size: 0.875rem; 
    font-weight: 500; 
    color: var(--md-primary); 
    text-decoration: none; 
    border: 1px solid var(--md-outline-variant); 
    border-radius: var(--md-shape-small); 
    display: inline-block; 
}
.apps-more-link:hover { background: var(--md-primary-container); }

/* Account Dropdown */
.account-header { 
    padding: 16px 20px 12px; 
    border-bottom: 1px solid var(--md-outline-variant); 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}
.account-header-avatar { width: 48px; height: 48px; border-radius: 50%; }
.account-header-info { flex: 1; }
.account-header-name { font-size: 1rem; font-weight: 500; }
.account-header-email { font-size: 0.75rem; color: var(--md-on-surface-variant); }

.account-list { padding: 8px; }
.account-item { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 12px; 
    border-radius: var(--md-shape-medium); 
    text-decoration: none; 
    color: var(--md-on-surface); 
    transition: background var(--md-duration-short) var(--md-motion-standard); 
    cursor: pointer; 
    border: none; 
    background: none; 
    width: 100%; 
    text-align: left; 
}
.account-item:hover { background: var(--md-surface-container); }
.account-item.active { background: var(--md-surface-container-high); }
.account-item-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.account-item-info { flex: 1; min-width: 0; }
.account-item-name { font-size: 0.875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-item-email { font-size: 0.75rem; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-item-check { width: 20px; height: 20px; color: var(--md-primary); display: none; }
.account-item.active .account-item-check { display: block; }

.account-actions { padding: 8px; border-top: 1px solid var(--md-outline-variant); }
.account-action-btn { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 12px; 
    border-radius: var(--md-shape-medium); 
    text-decoration: none; 
    color: var(--md-on-surface-variant); 
    font-size: 0.875rem; 
    cursor: pointer; 
    border: none; 
    background: none; 
    width: 100%; 
}
.account-action-btn:hover { background: var(--md-surface-container); }
.account-action-btn svg { width: 20px; height: 20px; opacity: 0.7; }

.account-footer { 
    padding: 12px 16px; 
    background: var(--md-surface-container); 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
    font-size: 0.6875rem; 
    color: var(--md-on-surface-variant); 
}
.account-footer a { color: var(--md-on-surface-variant); text-decoration: none; }

.login-prompt { padding: 20px; text-align: center; }
.login-prompt p { margin-bottom: 16px; color: var(--md-on-surface-variant); font-size: 0.875rem; }

/* ═══════════════════════════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════════════════════════ */
.main { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 80px 20px 40px; 
    position: relative; 
    z-index: 1; 
}

/* Logo */
.logo-container { 
    margin-bottom: 32px; 
    text-align: center; 
    animation: fadeInUp 0.6s var(--md-motion-emphasized) backwards;
    position: relative;
}
.logo { 
    font-family: var(--font-display); 
    font-size: clamp(3rem, 10vw, 5.5rem); 
    font-weight: 500; 
    letter-spacing: -0.03em; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    user-select: none;
    position: relative;
    z-index: 2;
}
.logo span { 
    display: inline-block; 
    transition: transform var(--md-duration-short) var(--md-motion-emphasized); 
}
.logo span:hover { transform: translateY(-4px) scale(1.05); }
.logo .c1 { color: var(--brand-blue); }
.logo .c2 { color: var(--brand-red); }
.logo .c3 { color: var(--brand-yellow); }
.logo .c4 { color: var(--brand-green); }
.logo .c5 { color: var(--brand-purple); }
.logo .c6 { color: var(--brand-teal); }
.logo .dot { color: var(--md-on-surface-variant); opacity: 0.6; }

.tagline { font-size: 0.875rem; color: var(--md-on-surface-variant); margin-top: 8px; }

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

/* ═══════════════════════════════════════════════════════════════════
   SEARCH
═══════════════════════════════════════════════════════════════════ */
.search-container { 
    width: 100%; 
    max-width: 640px; 
    position: relative; 
    animation: fadeInUp 0.6s var(--md-motion-emphasized) 0.1s backwards; 
}
.search-wrapper { position: relative; width: 100%; }
.search-bar { 
    width: 100%; 
    padding: 16px 56px; 
    font-family: var(--font-body); 
    font-size: 1rem; 
    background: var(--md-surface-container); 
    border: 1px solid transparent; 
    border-radius: var(--md-shape-full); 
    color: var(--md-on-surface); 
    outline: none; 
    transition: all var(--md-duration-medium) var(--md-motion-standard); 
}
.search-bar::placeholder { color: var(--md-outline); }
.search-bar:hover { background: var(--md-surface-container-high); box-shadow: var(--md-elevation-1); }
.search-bar:focus { 
    background: var(--md-surface); 
    border-color: var(--md-outline-variant); 
    box-shadow: var(--md-elevation-2); 
}
.search-icon { 
    position: absolute; 
    left: 18px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 22px; 
    height: 22px; 
    color: var(--md-outline); 
    pointer-events: none; 
}
.search-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.search-btn { 
    padding: 10px 20px; 
    font-family: var(--font-body); 
    font-size: 0.875rem; 
    font-weight: 500; 
    background: var(--md-surface-container); 
    border: none; 
    border-radius: var(--md-shape-small); 
    color: var(--md-on-surface-variant); 
    cursor: pointer; 
}
.search-btn:hover { background: var(--md-surface-container-high); box-shadow: var(--md-elevation-1); }

/* Search History Dropdown */
.search-history {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--md-surface);
    border-radius: var(--md-shape-medium);
    box-shadow: var(--md-elevation-3);
    overflow: hidden;
    display: none;
    z-index: 100;
}
.search-history.open { display: block; }
.search-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--md-outline-variant);
}
.search-history-title {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-on-surface-variant);
}
.search-history-clear {
    font-size: 0.75rem;
    color: var(--md-primary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: var(--md-shape-small);
}
.search-history-clear:hover { background: var(--md-primary-container); }
.search-history-list { max-height: 300px; overflow-y: auto; }
.search-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background var(--md-duration-short) var(--md-motion-standard);
}
.search-history-item:hover { background: var(--md-surface-container); }
.search-history-item svg { width: 18px; height: 18px; color: var(--md-outline); flex-shrink: 0; }
.search-history-item span { flex: 1; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-history-item .remove-btn {
    opacity: 0;
    padding: 4px;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-outline);
}
.search-history-item:hover .remove-btn { opacity: 1; }
.search-history-item .remove-btn:hover { background: var(--md-surface-container-high); }
.search-history-item.selected { background: var(--md-surface-container); }

/* ═══════════════════════════════════════════════════════════════════
   SECTIONS (AI, Services, Internal)
═══════════════════════════════════════════════════════════════════ */
.section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0 4px; }
.section-title { 
    font-size: 0.75rem; 
    font-weight: 500; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    color: var(--md-on-surface-variant); 
}
.section-badge { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    padding: 2px 8px; 
    border-radius: var(--md-shape-full); 
    font-size: 0.625rem; 
    font-weight: 500; 
}
.section-badge.ai { 
    background: linear-gradient(135deg, rgba(155, 114, 203, 0.2), rgba(217, 101, 112, 0.2)); 
    color: #9b72cb; 
}
.section-badge.internal { background: rgba(52, 168, 83, 0.15); color: var(--brand-green); }

.ai-section { 
    width: 100%; 
    max-width: 640px; 
    margin-top: 40px; 
    animation: fadeInUp 0.6s var(--md-motion-emphasized) 0.3s backwards; 
    display: none; 
}
.services-section { 
    width: 100%; 
    max-width: 560px; 
    margin-top: 24px; 
    animation: fadeInUp 0.6s var(--md-motion-emphasized) 0.4s backwards; 
    display: none; 
}

.ai-links, .quick-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ai-link, .quick-link { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 10px; 
    padding: 16px 12px; 
    background: var(--md-surface-container); 
    border-radius: var(--md-shape-medium); 
    text-decoration: none; 
    color: var(--md-on-surface); 
    transition: all var(--md-duration-medium) var(--md-motion-standard); 
}
.ai-link:hover, .quick-link:hover { transform: translateY(-3px); box-shadow: var(--md-elevation-2); }

.ai-link-icon, .quick-link-icon { 
    width: 44px; 
    height: 44px; 
    border-radius: var(--md-shape-medium); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.ai-link-icon svg { width: 28px; height: 28px; fill: white; }
.ai-link-icon.gemini { background: linear-gradient(135deg, #4285f4, #9b72cb, #d96570); }
.ai-link-icon.claude { background: linear-gradient(135deg, #d97757, #c4653a); }
.ai-link-icon.perplexity { background: linear-gradient(135deg, #20b2aa, #1a8f8a); }
.ai-link-icon.openwebui { background: linear-gradient(135deg, #6366f1, #4f46e5); }

.ai-link-content { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ai-link-name { font-size: 0.8125rem; font-weight: 500; }
.ai-link-desc { font-size: 0.6875rem; color: var(--md-on-surface-variant); }

.quick-link-icon { width: 40px; height: 40px; border-radius: var(--md-shape-small); font-size: 1.25rem; }
.quick-link-icon.nextcloud { background: linear-gradient(135deg, #0082c9, #006aa3); }
.quick-link-icon.immich { background: linear-gradient(135deg, #4250af, #383d96); }
.quick-link-icon.homeassistant { background: linear-gradient(135deg, #41bdf5, #18bcf2); }
.quick-link-icon.paperless { background: linear-gradient(135deg, #17b26a, #12884e); }
.quick-link-label { font-size: 0.8125rem; font-weight: 500; }

/* Internal Section */
.internal-section { 
    width: 100%; 
    max-width: 640px; 
    margin-top: 32px; 
    padding-top: 24px; 
    border-top: 1px solid var(--md-outline-variant); 
    display: none; 
}
.logged-in .internal-section:not(.hidden) { display: block; }
.internal-section.hidden { display: none !important; }

.internal-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.internal-link { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 12px 14px; 
    background: var(--md-surface-container); 
    border-radius: var(--md-shape-small); 
    text-decoration: none; 
    color: var(--md-on-surface); 
    font-size: 0.875rem; 
}
.internal-link:hover { background: var(--md-surface-container-high); }

/* ═══════════════════════════════════════════════════════════════════
   STATS FOOTER
═══════════════════════════════════════════════════════════════════ */
.stats-footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 12px 20px; 
    background: linear-gradient(to top, var(--md-surface), transparent); 
    display: none; 
    justify-content: center; 
    gap: 24px; 
    z-index: 50; 
}
.logged-in .stats-footer:not(.hidden) { display: flex; }
.stats-footer.hidden { display: none !important; }

.stat-item { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--md-on-surface-variant); }
.stat-value { font-weight: 600; color: var(--md-on-surface); }
.stat-indicator { width: 6px; height: 6px; border-radius: 50%; }
.stat-indicator.good { background: var(--brand-green); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .greeting-bar { position: relative; right: 0; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
    .main { padding: 20px 16px 100px; }
    .logo { font-size: 2.75rem; }
    .ai-links, .quick-links { grid-template-columns: repeat(2, 1fr); }
    .internal-links { grid-template-columns: repeat(2, 1fr); }
    .apps-dropdown, .account-dropdown { width: calc(100vw - 32px); right: -8px; }
}