/* =============================================
   PRODUCTIVEAPP - BASE CSS
   Variables, Reset, Layout général
   ============================================= */

/* === RESET === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === VARIABLES GLOBALES (spacing, radius, transitions) === */
/* Les variables de couleur sont définies par les thèmes dans style-themes.css */
:root {
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 50px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Variable aliases (will resolve from theme vars) */
    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
    --text-tertiary: var(--text-muted);
    --border-primary: var(--border);
    --accent-muted: var(--border);
}

/* === HTML & BODY - Anti-overscroll === */
html {
    background: var(--bg-primary);
    overscroll-behavior: none;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background: transparent; /* Let canvas show through */
    min-height: 100vh;
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
    overscroll-behavior: none;
}

/* Fallback gradient on html for non-canvas elements */
html {
    background: linear-gradient(165deg, var(--bg-primary) 0%, var(--bg-secondary) 40%, var(--bg-tertiary) 100%);
}

/* === CANVAS BACKGROUND === */
#matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind everything */
    pointer-events: none;
    opacity: 0.95; /* BOOSTED for spectacular visibility */
}

/* === MAIN CONTENT (avec sidebar) === */
.main-content {
    margin-left: var(--sb-width-open, 260px);
    min-height: 100vh;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: none; /* Hidden until logged in */
}

body.sidebar-collapsed .main-content {
    margin-left: var(--sb-width-closed, 64px);
}

/* Show main content only when logged in */
body.logged-in .main-content {
    display: block;
}

/* Vue containers - styles moved to style-views.css */

/* === APP CONTAINER === */
.app-container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md) var(--space-md) var(--space-md); /* Supprime padding-top */
}

/* === HIDDEN UTILITY === */
.hidden {
    display: none !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* === SELECTION === */
::selection {
    background: var(--accent);
    color: var(--bg-primary);
}

/* =============================================
   LOGIN SCREEN
   ============================================= */

.login-screen {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(224, 120, 64, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
        linear-gradient(165deg, #0a0a0a 0%, #1a1410 40%, #2d2117 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
}

/* Image du Maître Maha Giri - effet divin */
.login-screen::after {
    content: '';
    position: absolute;
    right: 5%;
    top: 42%;
    transform: translateY(-50%);
    width: 45%;
    height: 100%;
    background: url('/assets/images/avatars/maha-giri-master.jpg') right center/contain no-repeat;
    opacity: 0.45;
    filter: blur(0.3px) brightness(1.3);
    mask-image:
        radial-gradient(ellipse 60% 50% at 70% 45%,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,0.9) 30%,
            rgba(0,0,0,0.5) 60%,
            transparent 85%);
    -webkit-mask-image:
        radial-gradient(ellipse 60% 50% at 70% 45%,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,0.9) 30%,
            rgba(0,0,0,0.5) 60%,
            transparent 85%);
    animation: masterGlow 8s ease-in-out infinite;
    z-index: 1;
}

@keyframes masterGlow {
    0%, 100% {
        opacity: 0.40;
        filter: blur(0.3px) brightness(1.25);
    }
    50% {
        opacity: 0.50;
        filter: blur(0.2px) brightness(1.4);
    }
}

/* Rayons de soleil divins */
.login-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        /* Rayons dorés */
        conic-gradient(from 45deg at 85% 50%,
            transparent 0deg,
            rgba(255, 215, 0, 0.03) 10deg,
            transparent 20deg,
            transparent 40deg,
            rgba(255, 215, 0, 0.05) 50deg,
            transparent 60deg,
            transparent 80deg,
            rgba(255, 215, 0, 0.04) 90deg,
            transparent 100deg,
            transparent 120deg,
            rgba(255, 215, 0, 0.03) 130deg,
            transparent 140deg,
            transparent 160deg,
            rgba(255, 215, 0, 0.05) 170deg,
            transparent 180deg
        ),
        /* Particules d'étoiles */
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(224,120,64,0.4), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.2), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,0.15), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(224,120,64,0.3), transparent);
    background-size: 150% 150%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%;
    background-position: 50% 50%;
    animation: divineLight 60s ease-in-out infinite;
    opacity: 0.7;
    z-index: 1;
}

@keyframes divineLight {
    0%, 100% {
        background-position: 50% 50%, 0% 0%, 100% 100%, 50% 50%, 100% 0%, 0% 100%, 50% 50%;
        opacity: 0.6;
    }
    50% {
        background-position: 60% 50%, 100% 100%, 0% 0%, 80% 20%, 20% 80%, 60% 40%, 90% 10%;
        opacity: 0.8;
    }
}

.login-container {
    text-align: center;
    padding: var(--space-xl);
    background:
        linear-gradient(135deg, rgba(224, 120, 64, 0.08) 0%, rgba(0,0,0,0.3) 100%);
    border: 1px solid rgba(224, 120, 64, 0.3);
    border-radius: 24px;
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.6),
        0 0 40px rgba(224, 120, 64, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
    max-width: 450px;
    width: 90%;
    /* Pas d'animation container - tout fluide via les éléments internes */
    position: relative;
    z-index: 10;
}

.login-container::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(224, 120, 64, 0.4), transparent, rgba(224, 120, 64, 0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
}

@keyframes containerEntrance {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.login-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto var(--space-lg);
    box-shadow:
        0 0 60px rgba(224, 120, 64, 0.6),
        0 0 100px rgba(224, 120, 64, 0.4),
        0 20px 40px rgba(0,0,0,0.4);
    /* Animation gérée par style-overrides pour séquence fluide */
    filter: drop-shadow(0 0 20px rgba(224, 120, 64, 0.8));
    position: relative;
}

@keyframes logoPulse {
    0%, 100% {
        box-shadow:
            0 0 60px rgba(224, 120, 64, 0.6),
            0 0 100px rgba(224, 120, 64, 0.4),
            0 20px 40px rgba(0,0,0,0.4);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 80px rgba(224, 120, 64, 0.8),
            0 0 120px rgba(224, 120, 64, 0.6),
            0 25px 50px rgba(0,0,0,0.5);
        transform: scale(1.05);
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

.login-container h1 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: var(--space-sm);
    background: linear-gradient(135deg, #fff 0%, #e07840 50%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: titleShine 4s linear infinite;
    letter-spacing: 1px;
    text-shadow: 0 0 30px rgba(224, 120, 64, 0.5);
}

@keyframes titleShine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.login-container > p {
    color: rgba(245, 230, 211, 0.7);
    margin-bottom: var(--space-lg);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    animation: fadeInUp 0.8s ease 0.3s backwards;
}

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

.user-select-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    animation: fadeInUp 0.8s ease 0.5s backwards;
}

.user-select-btn {
    padding: var(--space-lg);
    background: linear-gradient(145deg, rgba(224, 120, 64, 0.1) 0%, rgba(0,0,0,0.3) 100%);
    border: 2px solid rgba(224, 120, 64, 0.3);
    border-radius: 16px;
    color: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    position: relative;
    overflow: hidden;
}

.user-select-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(224, 120, 64, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.user-select-btn:hover {
    background: linear-gradient(145deg, rgba(224, 120, 64, 0.25) 0%, rgba(224, 120, 64, 0.1) 100%);
    border-color: rgba(224, 120, 64, 0.6);
    transform: scale(1.08) translateY(-5px);
    box-shadow:
        0 10px 30px rgba(224, 120, 64, 0.3),
        0 0 40px rgba(224, 120, 64, 0.2);
}

.user-select-btn:hover::before {
    opacity: 1;
}

.user-avatar-big {
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}

.user-select-btn:hover .user-avatar-big {
    transform: scale(1.1) rotate(5deg);
}

.user-name-select {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    animation: fadeInUp 0.8s ease 0.6s backwards;
}

.login-form p {
    color: rgba(224, 120, 64, 0.9);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: var(--space-xs);
    text-shadow: 0 0 20px rgba(224, 120, 64, 0.5);
}

.login-form input {
    padding: 18px 24px;
    font-size: 1.1rem;
    border: 2px solid rgba(224, 120, 64, 0.3);
    border-radius: 50px;
    background: linear-gradient(145deg, rgba(0,0,0,0.4) 0%, rgba(224, 120, 64, 0.05) 100%);
    color: #f5f5f5;
    text-align: center;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    letter-spacing: 2px;
}

.login-form input:focus {
    border-color: rgba(224, 120, 64, 0.8);
    background: linear-gradient(145deg, rgba(0,0,0,0.5) 0%, rgba(224, 120, 64, 0.1) 100%);
    box-shadow:
        0 0 30px rgba(224, 120, 64, 0.4),
        0 0 60px rgba(224, 120, 64, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
    transform: scale(1.02);
}

.login-form input::placeholder {
    color: rgba(245, 230, 211, 0.4);
    letter-spacing: 1px;
}

/* Boutons de connexion */
.login-form button {
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

#login-btn {
    background: linear-gradient(135deg, rgba(224, 120, 64, 0.9) 0%, rgba(224, 120, 64, 0.7) 100%);
    color: #fff;
    border: 2px solid rgba(224, 120, 64, 1);
    box-shadow:
        0 10px 30px rgba(224, 120, 64, 0.4),
        0 0 40px rgba(224, 120, 64, 0.2);
    animation: buttonGlow 2s ease-in-out infinite;
}

#login-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

#login-btn:hover::before {
    transform: translateX(100%);
}

#login-btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow:
        0 15px 40px rgba(224, 120, 64, 0.6),
        0 0 60px rgba(224, 120, 64, 0.4);
}

@keyframes buttonGlow {
    0%, 100% {
        box-shadow:
            0 10px 30px rgba(224, 120, 64, 0.4),
            0 0 40px rgba(224, 120, 64, 0.2);
    }
    50% {
        box-shadow:
            0 10px 30px rgba(224, 120, 64, 0.6),
            0 0 60px rgba(224, 120, 64, 0.4);
    }
}

.btn-secondary {
    background: rgba(0,0,0,0.4);
    color: rgba(245, 230, 211, 0.8);
    border: 2px solid rgba(224, 120, 64, 0.3);
}

.btn-secondary:hover {
    background: rgba(224, 120, 64, 0.2);
    border-color: rgba(224, 120, 64, 0.6);
    color: #fff;
    transform: scale(1.02);
}

.error-text {
    color: var(--danger);
    font-size: 0.9rem;
    margin-top: var(--space-md);
}

/* =============================================
   HEADER
   ============================================= */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 var(--space-md) 0; /* Supprime padding-top pour aligner avec sidebar */
    margin-bottom: var(--space-md);
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.app-title {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text);
}

.user-badge {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.user-badge .user-avatar {
    font-size: 1.2rem;
}

.user-badge .user-name {
    font-weight: 500;
    color: var(--accent);
}

/* =============================================
   PROJECTS NAV
   ============================================= */

.projects-nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: var(--space-md);
}

.projects-nav::-webkit-scrollbar {
    display: none;
}

.projects-scroll {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scrollbar-width: none;
}

.project-chip {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-normal);
    white-space: nowrap;
}

.project-chip:hover {
    border-color: var(--accent);
    background: var(--accent-muted);
}

.project-chip.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
    font-weight: 600;
}

.chip-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
}

.project-chip.active .chip-count {
    background: rgba(0, 0, 0, 0.2);
}

.add-chip-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px dashed var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition-normal);
    flex-shrink: 0;
}

.add-chip-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-card);
}

/* =============================================
   USER FILTER BAR
   ============================================= */

.user-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.user-filter-bar label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.user-filter-bar select {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
}

/* =============================================
   TASK INPUT SECTION
   ============================================= */

.task-input-section {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-xl);
}

.task-input-section input[type="text"] {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    font-size: 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    color: var(--text);
    outline: none;
    transition: var(--transition-normal);
}

.task-input-section input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 25px var(--accent-glow);
}

.task-input-section input[type="text"]::placeholder {
    color: var(--text-muted);
}

.task-input-section select {
    padding: var(--space-md) var(--space-lg);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 0.95rem;
    cursor: pointer;
    outline: none;
    transition: var(--transition-normal);
}

.task-input-section select:focus {
    border-color: var(--accent);
}

/* =============================================
   MAIN VIEWS (Columns + Bubbles)
   ============================================= */

.tasks-view {
    margin-bottom: var(--space-xl);
}

/* === Mode 3 colonnes === */
.columns-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.task-column {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    min-height: 300px;
}

.column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.column-header h2 {
    font-size: 1rem;
    font-weight: 500;
}

.column-count {
    background: var(--accent);
    color: var(--bg-primary);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* === Mode 2 colonnes (Mes Bulles) === */
.bubbles-view {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.bubbles-column h2 {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: var(--space-lg);
    color: var(--text);
}

.bubbles-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* =============================================
   ANIMATIONS
   ============================================= */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popIn {
    from { 
        opacity: 0; 
        transform: scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

@keyframes glowPulse {
    0%, 100% { 
        filter: brightness(1);
    }
    50% { 
        filter: brightness(1.15);
    }
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 1024px) {
    .columns-view {
        grid-template-columns: 1fr;
    }
    
    .task-column {
        min-height: 200px;
    }
}

@media (max-width: 768px) {
    .app-header {
        flex-wrap: wrap;
        gap: var(--space-md);
    }
    
    .app-title {
        order: -1;
        width: 100%;
        text-align: center;
        font-size: 1.3rem;
    }
    
    .task-input-section {
        flex-wrap: wrap;
    }
    
    .task-input-section input[type="text"] {
        width: 100%;
    }
    
    .task-input-section select {
        flex: 1;
    }
    
    .bubbles-view {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        padding-top: 56px; /* space for mobile toggle */
    }
}

@media (max-width: 480px) {
    .app-container {
        padding: var(--space-sm);
    }

    .user-badge .user-name {
        display: none;
    }

    .login-container {
        padding: var(--space-lg);
    }

    .user-select-grid {
        grid-template-columns: 1fr;
    }
}