/* js/styles.css - Fulla d'estils completa per a l'aplicació Clio */

/* --- Fonts i Configuració General del Body --- */
body { 
    background-color: #f4f7f9; 
    background-image: linear-gradient(to bottom right, #f6f9fc, #e9edf2); 
    font-family: 'Lato', sans-serif; 
    color: #2c3e50; 
}

h1, h2, h3, h4, h5, h6, .font-montserrat { 
    font-family: 'Montserrat', sans-serif; 
}

/* --- Components Principals de la Interfície --- */
.panel { 
    background-color: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    border-radius: 1.25rem; 
    box-shadow: 0 8px 32px 0 rgba(44, 62, 80, 0.1); 
}

/* --- Estils per a Elements Interactius --- */
[contenteditable="true"] { 
    outline: none; 
    background-color: rgba(255, 255, 255, 0.5); 
    padding: 6px 10px; 
    border-radius: 8px; 
    transition: all 0.2s ease-in-out; 
}

[contenteditable="true"]:focus { 
    background-color: white; 
    transform: translateY(-1px); 
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.2); 
}

.btn { 
    transition: all 0.2s ease-in-out; 
}

.btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
}

/* Estils per al Globus d'Observacions */
.has-observation {
    color: #2980b9;
}
.has-observation:hover {
    color: #3498db;
    text-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}

/* Estils per a la Pestanya Activa */
#nav-gradebook.active, #nav-calendar.active {
    border-color: #2980b9 !important;
    color: #2c3e50 !important;
    font-weight: 700;
}

/* --- Indicador de Desat --- */
#save-status {
    color: #6b7280; /* Un gris neutre */
    transition: opacity 0.5s ease-in-out, color 0.5s ease;
}

#save-status.saved {
    color: #27ae60; /* Verd d'èxit */
}

/* --- Notificacions Toast --- */
#toast-container { 
    position: fixed; 
    bottom: 1.5rem; 
    right: 1.5rem; 
    z-index: 100; 
    display: flex; 
    flex-direction: column; 
    gap: 0.75rem; 
}

.toast { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    padding: 1rem 1.25rem; 
    border-radius: 0.75rem; 
    color: white; 
    font-weight: 600; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); 
    transform: translateX(120%); 
    opacity: 0; 
    animation: slideIn 0.3s forwards, fadeOut 0.5s 4.5s forwards; 
}

.toast.success { background-color: #27ae60; } 
.toast.error { background-color: #c0392b; } 
.toast.info { background-color: #2980b9; }

@keyframes slideIn { 
    to { transform: translateX(0); opacity: 1; } 
}

@keyframes fadeOut { 
    from { opacity: 1; } 
    to { opacity: 0; transform: translateX(120%); } 
}

/* --- Menú Desplegable de Competències --- */
.competency-selector { 
    position: relative; 
}

.competency-menu { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 20; 
    background-color: white; 
    border: 1px solid #ccc; 
    border-radius: 0.5rem; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    padding: 0.5rem; 
    max-height: 200px; 
    overflow-y: auto; 
    min-width: 250px; 
    text-align: left;
}

.competency-menu.show { 
    display: block; 
}

.competency-menu label { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    padding: 0.5rem; 
    border-radius: 0.25rem; 
    cursor: pointer; 
}

.competency-menu label:hover { 
    background-color: #f0f0f0; 
}


/* ==================================================================== */
/* ===== ESTILS PER AL TEMA FOSC (AUTOMÀTIC AMB PREFERS-COLOR-SCHEME) ==== */
/* ==================================================================== */

@media (prefers-color-scheme: dark) {
    /* Fons i text general en mode fosc */
    body {
        background-color: #1a202c;
        background-image: linear-gradient(to bottom right, #1a202c, #2d3748);
        color: #e2e8f0;
    }

    /* Panells amb efecte vidre fosc */
    .panel {
        background-color: rgba(45, 55, 72, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    }
    
    /* Pestanya Activa en Tema Fosc */
    #nav-gradebook.active, #nav-calendar.active {
        border-color: #3b82f6 !important;
        color: #ffffff !important;
    }

    /* Globus d'Observacions en Tema Fosc */
    .has-observation {
        color: #3b82f6 !important;
    }
    .has-observation:hover {
        color: #60a5fa !important;
        text-shadow: 0 0 8px rgba(96, 165, 250, 0.5) !important;
    }

    /* Indicador de Desat en Tema Fosc */
    #save-status {
        color: #9ca3af !important; /* Un gris clar */
    }
    #save-status.saved {
        color: #34d399 !important; /* Un verd més brillant */
    }

    /* --- CORRECCIONS DE LLEGIBILITAT PER AL TEMA FOSC --- */
    
    /* 1. Títol principal "Clio" i títol de la crònica */
    header h1.text-\[\#2c3e50\], h2#chronicle-name {
        color: #ffffff !important;
    }

    /* 2. Etiquetes dels panells i títols interns */
    .panel label, .panel h3, .panel h4 {
        color: #a0aec0 !important;
    }

    /* 3. Text dins d'inputs, selectors i textareas */
    input, select, textarea, [contenteditable="true"] {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }
    
    /* 4. Textos grisos genèrics de Tailwind */
    .text-gray-500, .text-gray-600 {
        color: #cbd5e1 !important;
    }
    .hover\:text-gray-800:hover {
        color: #ffffff !important;
    }
    .hover\:border-gray-400:hover {
        border-color: #94a3b8 !important;
    }
    
    [contenteditable="true"]:focus {
        background-color: #4a5568 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
    }
    
    /* --- CORRECCIONS DEL CALENDARI --- */
    
    #calendar-grid > div {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
    }
    #calendar-grid .day {
        background-color: #1f2937 !important;
    }
    #calendar-grid .day .font-bold {
        color: #ffffff !important;
    }
    #calendar-grid .add-event-btn {
        color: #9ca3af !important;
    }
    #calendar-grid .add-event-btn:hover {
        color: #3b82f6 !important;
    }
    #prev-month-btn, #next-month-btn {
        background-color: #4a5568 !important;
    }
    #prev-month-btn:hover, #next-month-btn:hover {
        background-color: #5a6678 !important;
    }
    #prev-month-btn svg, #next-month-btn svg {
        color: #ffffff !important;
    }
    #calendar-grid .event-item {
        background-color: #2563eb !important;
        color: #ffffff !important;
    }

    /* Modal d'esdeveniments */
    #event-modal input[type="text"], #event-modal select {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }
    
    /* Taula de notes en mode fosc */
    .bg-slate-100 { background-color: #334155 !important; }
    .bg-slate-200 { background-color: #475569 !important; }
    .bg-white { background-color: transparent !important; }
    
    /* Menú de competències en mode fosc */
    .competency-menu {
        background-color: #2d3748;
        border-color: #4a5568;
    }
    .competency-menu label:hover {
        background-color: #4a5568;
    }

    /* Textarea d'observacions (reforç) */
    textarea#observation-text {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
    }
}