/**
 * =================================================================
 * CALENDAR CSS - CALENDARI IOC
 * =================================================================
 * 
 * @file        calendar.css
 * @description Estils específics del calendari, vistes, esdeveniments i modals
 * @author      Ismael Trascastro <itrascastro@ioc.cat>
 * @version     1.0
 * @date        2025-01-16
 * @project     Calendari IOC
 * @repository  https://github.com/itrascastro/calendari-ioc
 * @license     MIT
 * 
 * Aquest fitxer forma part del projecte Calendari IOC,
 * una aplicació web per gestionar calendaris acadèmics.
 * 
 * =================================================================
 */

/* === CONTENIDOR PRINCIPAL DEL CALENDARI === */
.calendar-container { 
    grid-area: main; 
    display: flex; 
    flex-direction: column; 
    position: relative;
    background-color: var(--card-bg-color); 
    border-radius: 10px; 
    border: 1px solid var(--border-color); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03); 
    overflow: hidden; 
    padding: 20px; 
    /* Permetre que el fill amb overflow tingui scroll sense expandir el pare */
    min-height: 0;
}

.calendar-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-bottom: 20px; 
}

/* === NAVEGACIÓ DEL CALENDARI === */
.month-navigator { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

.month-navigator h3 { 
    margin: 0; 
    font-size: 1.4em; 
    font-weight: 500; 
    min-width: 200px; 
    text-align: center; 
}

.nav-arrow { 
    background: none; 
    border: 1px solid var(--border-color); 
    color: var(--main-text-color); 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    cursor: pointer; 
    font-size: 1.2em; 
    transition: all 0.2s; 
}

.nav-arrow:hover { 
    background-color: var(--accent-color); 
    color: white; 
}

.nav-arrow:disabled { 
    opacity: 0.4; 
    cursor: not-allowed; 
    background-color: transparent; 
    color: var(--secondary-text-color); 
}

/* === BOTONS DE VISTA === */
.view-toggles { 
    display: flex; 
    border: 1px solid var(--border-color); 
    border-radius: 6px; 
    overflow: hidden; 
}

.view-toggles button { 
    background: none; 
    border: none; 
    padding: 8px 15px; 
    cursor: pointer; 
    color: var(--secondary-text-color); 
    border-left: 1px solid var(--border-color); 
    transition: background-color 0.2s, color 0.2s;
}

.view-toggles button:first-child { 
    border-left: none; 
}

.view-toggles button.active { 
    background-color: #e9ecef; 
    color: var(--main-text-color); 
}

/* Controls de zoom per a la vista compacta */
.compact-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* === GRAELLA DEL CALENDARI === */
.calendar-grid-wrapper { 
    flex-grow: 1; 
    background-color: var(--bg-color); 
    padding: 8px; 
    border-radius: 8px; 
    overflow-y: auto;
    min-height: 0;
}

/* Només per a la vista compacta: cantonades quadrades del marc del calendari */
/* Eliminar: no tocar cantonades globals del contenidor principal */

/* Zoom de vista compacta (escala global del wrapper) */
body { --compact-zoom: 1; }

/* Canvas i contingut escalat per a zoom amb scroll real */
.compact-zoom-canvas { position: relative; width: 100%; }
.compact-zoom-content { position: absolute; top: 0; left: 0; transform-origin: top left; width: 100%; }

/* Slider de zoom (fora de l'scroll), a la cantonada inferior dreta */
.compact-zoom-slider {
    position: absolute;
    right: 16px;
    bottom: 2px;
    display: none;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    z-index: 10;
}

body[data-current-view="compact"] .compact-zoom-slider { display: flex; }

.compact-zoom-slider input[type="range"] {
    width: 120px;
    height: 12px;
    background: transparent;
    accent-color: var(--accent-color);
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* WebKit */
.compact-zoom-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(to right,
        var(--accent-color) 0%,
        var(--accent-color) var(--progress, 100%),
        var(--border-color) var(--progress, 100%),
        var(--border-color) 100%);
    border-radius: 4px;
}
.compact-zoom-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: var(--accent-color);
    border-radius: 50%;
    margin-top: -3px; /* centrar sobre pista de 4px */
    border: none;
}

/* Firefox */
.compact-zoom-slider input[type="range"]::-moz-range-track {
    height: 4px;
    background: var(--border-color);
    border-radius: 4px;
}
.compact-zoom-slider input[type="range"]::-moz-range-progress {
    height: 4px;
    background: var(--accent-color);
    border-radius: 4px;
}
.compact-zoom-slider input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: var(--accent-color);
    border: none;
    border-radius: 50%;
}

.compact-zoom-slider .zoom-label { display: none; }

.compact-zoom-slider .compact-fullscreen-btn {
    background: none;
    border: none;
    color: var(--secondary-text-color);
    width: 14px;
    height: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease;
}

.compact-zoom-slider .compact-fullscreen-btn:hover,
.compact-zoom-slider .compact-fullscreen-btn:focus {
    color: var(--main-text-color);
}

.compact-zoom-slider .compact-fullscreen-btn svg {
    width: 10px;
    height: 10px;
}

.calendar-grid { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 8px; 
}

.day-header { 
    background-color: var(--card-bg-color); 
    border: 1px solid var(--border-color); 
    border-radius: 6px; 
    padding: 10px 8px; 
    text-align: center; 
    font-weight: 600; 
    color: var(--secondary-text-color); 
    font-size: 0.9em; 
}

/* === CEL·LES DELS DIES === */
.day-cell { 
    background-color: var(--card-bg-color); 
    border: 1px solid var(--border-color); 
    border-radius: 6px; 
    min-height: 140px; 
    padding: 8px; 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    transition: border-color 0.2s, box-shadow 0.2s;
}

.day-cell[data-action="day-click"] { 
    cursor: pointer; 
}

.day-cell[data-action="day-click"]:hover { 
    border-color: var(--accent-color); 
    background-color: #f8f9fa; 
}

.day-cell:hover .add-event-btn { 
    opacity: 1; 
    transform: scale(1.1); 
}

.day-cell.out-of-month { 
    background-color: #fdfdfd; 
    cursor: default; 
}

.day-cell.out-of-month .day-number { 
    color: #ccc;
}

.day-number { 
    font-weight: 500; 
    font-size: 0.9em; 
    color: var(--main-text-color); 
}

/* === SETMANES === */
.week-pill { 
    position: absolute; 
    top: 8px; 
    right: 8px; 
    font-size: 0.75em; 
    background-color: #6c757d; 
    color: white; 
    padding: 2px 8px; 
    border-radius: 10px; 
    font-weight: bold; 
}

.week-pill[data-action="week-click"] { 
    cursor: pointer; 
    transition: background-color 0.2s ease; 
}

.week-pill[data-action="week-click"]:hover { 
    background-color: var(--accent-color); 
}

/* === ESDEVENIMENTS === */
.events-container { 
    margin-top: 10px; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
}

.event {
    font-size: 0.85em;
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    margin-bottom: 5px;
    display: block;
    word-wrap: break-word;
}

.event.is-user-event {
    cursor: pointer;
}

.add-event-btn { 
    position: absolute; 
    bottom: 8px; 
    right: 8px; 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    background-color: #f1f3f5; 
    color: var(--secondary-text-color); 
    border: none; 
    cursor: pointer; 
    font-size: 1.5em; 
    line-height: 28px; 
    text-align: center; 
    opacity: 0; 
    transition: all 0.2s ease-in-out; 
}

.add-event-btn:hover { 
    background-color: var(--accent-color); 
    color: white; 
}

/* === VISTA GLOBAL === */
.global-view-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.global-month {
    background-color: transparent;
    transition: transform 0.2s ease;
}

.global-month-header {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--secondary-text-color);
    padding: 10px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 12px;
}

.global-month-header:hover {
    border-color: var(--accent-color);
    background-color: #f8f9fa;
}

.global-month-content {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 12px;
}


.global-month .calendar-grid {
    gap: 4px;
}

.global-month .day-cell {
    min-height: 35px;
    padding: 4px;
    font-size: 0.85em;
    transition: all 0.2s ease;
}

.global-month .day-cell[data-action="day-click"]:hover {
    transform: scale(1.05);
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.global-month .day-number {
    font-size: 0.9em;
    font-weight: 600;
}

.global-month .week-pill {
    /* Tamaño fijo para consistencia y mayor reducción visible */
    font-size: 10px;
    padding: 1px 4px;
    top: 2px;
    right: 2px;
}

.global-month .day-header {
    font-size: 0.85em;
    font-weight: 600;
    padding: 6px 4px;
    min-width: 20px;
    text-align: center;
}

.global-month .day-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.2em;
    font-weight: 600;
    margin: 0;
}

.global-month .day-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-month .add-event-btn {
    display: none; /* Amagar botons d'afegir event en vista global */
}

/* Responsive: Ajustar graella segons pantalla */
@media (max-width: 1200px) {
    .global-view-container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
        padding: 15px;
    }
}

@media (max-width: 768px) {
    .global-view-container {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }
    
    .global-month .day-cell {
        min-height: 30px;
        font-size: 0.8em;
    }
}

/* === MODALS === */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.4); 
    justify-content: center; 
    align-items: center; 
 
}

.modal.show { 
    display: flex; 
}

.modal-content { 
    background-color: var(--card-bg-color); 
    border: none; 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); 
    margin: auto; 
    padding: 0; 
    border-radius: 12px; 
    width: 90%; 
    max-width: 480px; 
    animation: fadeInScaleUp 0.2s ease-out; 
    overflow: hidden; 
}

@keyframes fadeInScaleUp { 
    from {opacity: 0; transform: scale(0.95);} 
    to {opacity: 1; transform: scale(1);} 
}

.modal-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 24px 24px 0 24px; 
    margin-bottom: 20px; 
}

.modal-header-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.modal-title { 
    color: var(--main-text-color); 
    font-size: 1.2em; 
    font-weight: 600; 
    margin: 0; 
}

.close-btn { 
    color: var(--secondary-text-color); 
    font-size: 1.5em; 
    font-weight: bold; 
    cursor: pointer; 
    background: none; 
    border: none; 
    line-height: 1; 
    padding: 8px; 
    border-radius: 6px; 
    transition: all 0.2s; 
}

.close-btn:hover { 
    background-color: var(--bg-color); 
    color: var(--main-text-color); 
}

.modal-body { 
    padding: 0 24px; 
}



.modal-body .form-group { 
    margin-bottom: 20px; 
}

.modal-body label,
.modal-body .form-label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 500; 
    font-size: 0.9em; 
    color: var(--main-text-color); 
}

.modal-body input[type="text"], 
.modal-body select, 
.modal-body textarea, 
.modal-body input[type="date"] { 
    appearance: none; 
    width: 100%; 
    padding: 12px 16px; 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    background-color: var(--bg-color); 
    color: var(--main-text-color); 
    font-size: 0.95em; 
    font-family: inherit; 
    transition: border-color 0.2s, box-shadow 0.2s; 
}

.modal-body input:focus, 
.modal-body select:focus, 
.modal-body textarea:focus { 
    outline: none; 
    border-color: var(--accent-color); 
    box-shadow: 0 0 0 3px rgba(79, 93, 149, 0.1); 
}

.modal-body ::placeholder { 
    color: var(--secondary-text-color); 
    opacity: 0.7; 
}

.modal-body textarea { 
    min-height: 90px; 
    resize: vertical; 
}

.modal-footer { 
    display: flex; 
    justify-content: flex-end; 
    gap: 12px; 
    padding: 24px; 
    margin-top: 10px; 
}

/* === VISTA ULTRA COMPACTA === */
body[data-current-view="compact"] .calendar-grid-wrapper {
    padding: 0;
}

.compact-view-container {
    height: 100%;
    background-color: var(--bg-color);
    border-radius: 0; /* cantonades quadrades per al marc del calendari compacte */
    overflow: hidden;
}

/* Contenidor principal amb columnes fixades */
.compact-calendar-wrapper {
    /* Amb el grid unificat, el wrapper només apila headers + grid */
    display: block;
    position: relative;
}

.compact-calendar-grid-container {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 0;
    position: relative;
}

/* Grid unificat: mes + (número,dia)x7 + setmana */
.compact-unified-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 12px 1fr) 30px;
    gap: 0;
    background-color: var(--border-color);
}

.compact-months-column {
    width: 60px;
    position: relative;
}

.compact-calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: var(--border-color);
}

.compact-calendar-row {
    display: grid;
    grid-template-columns: repeat(7, 12px 1fr) 30px;
    gap: 0;
    background-color: var(--border-color);
}

/* Headers */
.compact-headers-row {
    display: grid;
    grid-template-columns: 60px repeat(7, 12px 1fr) 30px;
    gap: 0;
    background-color: var(--card-bg-color);
}

.compact-month-header-spacer,
.compact-week-header {
    background-color: var(--card-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5em;
    font-weight: 700;
    color: var(--main-text-color);
    border: none;
}

/* Cel·la de mes que ocupa múltiples files */
.compact-month-cell {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Mostrar el nom del mes en horitzontal per millorar la llegibilitat */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: normal;
    text-align: center;
    line-height: 1.1;
    padding: 2px 4px;
    /* Fixar mida per assegurar canvi visible i consistència */
    font-size: 8px !important;
    font-weight: 600;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.compact-month-cell:hover {
    background-color: var(--accent-color);
    color: white;
}

.compact-month-cell.empty {
    background-color: var(--card-bg-color);
    border: none;
}

/* Números de dia del grid unificat */
.compact-day-number {
    /* Usar colors de tema per suportar mode fosc */
    background-color: var(--card-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.4em;
    font-weight: 600;
    color: var(--main-text-color);
    border: 1px solid var(--border-color);
}

.compact-day-number.empty {
    background-color: var(--bg-color);
}

/* Números de setmana del grid unificat */
.compact-week-number {
    background-color: var(--card-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.4em;
    font-weight: 600;
    color: var(--main-text-color);
    border: 1px solid var(--border-color);
}

.compact-week-number.empty {
    background-color: var(--bg-color);
}

/* Overlay de mesos amb posicionament absolut */
.compact-months-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    z-index: 10;
}

.compact-month-overlay-label {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 1px;
}

.compact-month-overlay-label:hover {
    background-color: var(--accent-color);
    color: white;
}

.compact-month-overlay-label .month-text {
    writing-mode: horizontal-tb;
    font-size: 0.25em;
    font-weight: 700;
    color: var(--main-text-color);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    word-break: break-all;
}

.compact-month-label {
    cursor: pointer;
    padding: 4px 2px;
    border-radius: 3px;
    transition: background-color 0.2s;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    text-align: center;
    font-weight: 600;
    font-size: 0.4em;
    color: var(--main-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color-light);
}

.compact-month-label:hover {
    background-color: var(--accent-color);
    color: white;
}

.compact-month-label .month-text {
    transform: rotate(180deg);
}

/* Àrea principal del calendari */
.compact-calendar-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.compact-headers-row {
    display: grid;
    grid-template-columns: 60px repeat(7, 12px 1fr) 30px;
    gap: 1px;
    background-color: var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

.compact-month-header-spacer {
    background-color: var(--card-bg-color);
    padding: 4px 2px;
    font-size: 0.4em;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sense bordes visibles en la cel·la buida */
    border: none !important;
}

.compact-day-header {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    padding: 6px 4px;
    text-align: center;
    font-weight: 600;
    color: var(--secondary-text-color);
    font-size: 0.75em;
    grid-column: span 2;
}

.compact-day-header:last-child {
    border-right: none;
}

.compact-calendar-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: var(--border-color);
    overflow-y: auto;
}

/* CSS per debugging - línies visibles */

/* Cel·les de dia principals */
.compact-day-cell {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    padding: 1px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-size: 0.3em;
    min-height: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s;
}

.compact-week-number.empty {
    background-color: var(--card-bg-color);
    opacity: 0.5;
}

/* Header de setmana */
.compact-week-header {
    background-color: var(--card-bg-color);
    padding: 4px 2px;
    font-size: 0.4em;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
}

.compact-integrated-row > .compact-day-cell {
    border-right: 1px solid var(--border-color);
}

.compact-integrated-row > .compact-day-cell:nth-child(14) {
    border-right: none;
}

.compact-day-cell {
    background-color: var(--card-bg-color);
    padding: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: background-color 0.2s;
    cursor: pointer;
    min-height: 12px;
}

/* No canviem el fons en hover a la vista compacta */
body[data-current-view="compact"] .compact-day-cell:hover {
    background-color: var(--card-bg-color);
}

.compact-day-cell.today {
    /* En vista compacta no remarquem el dia d'avui amb fons diferent */
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
}

.compact-day-cell.has-events {
    background-color: var(--card-bg-color);
}

.compact-day-cell.empty {
    background-color: var(--bg-color);
    cursor: default;
}

.compact-events-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
    overflow: hidden;
    padding: 1px;
}

.compact-event {
    /* Tamaño fijo para consistencia entre navegadores */
    font-size: 8px;
    padding: 1px 2px;
    border-radius: 2px;
    color: white;
    line-height: 1.1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    font-weight: 400;
    margin-bottom: 1px;
}

.compact-event.is-user-event {
    cursor: pointer;
}

.more-events {
    font-size: 0.4em;
    color: var(--secondary-text-color);
    font-weight: bold;
    text-align: center;
    padding: 1px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}

.compact-add-event-btn {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #f1f3f5;
    color: var(--secondary-text-color);
    border: none;
    cursor: pointer;
    font-size: 0.8em;
    line-height: 16px;
    text-align: center;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    z-index: 3;
}

.compact-day-cell:hover .compact-add-event-btn {
    opacity: 1;
}

.compact-add-event-btn:hover {
    background-color: var(--accent-color);
    color: white;
}

/* Barra dreta de setmanes */
.compact-weeks-bar {
    background-color: var(--card-bg-color);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow-y: auto;
}

/* Espaiador per alinear amb headers */
.compact-weeks-header-spacer {
    min-height: 32px;
    background-color: var(--card-bg-color);
    border-bottom: 1px solid var(--border-color);
}

.compact-week-label {
    text-align: center;
    font-weight: 600;
    font-size: 0.7em;
    color: var(--secondary-text-color);
    padding: 4px 2px;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estils per exportació HTML */
.compact-view-export {
    display: grid;
    grid-template-columns: 80px 1fr 40px;
    gap: 10px;
    max-width: 100%;
    font-size: 0.8em;
}

.compact-months-list,
.compact-weeks-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.compact-months-list .month-label,
.compact-weeks-list .week-label {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    text-align: center;
    font-size: 0.8em;
    padding: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg-color);
}

/* Responsive per vista compacta */
@media (max-width: 1024px) {
    .compact-view-container {
        grid-template-columns: 60px 1fr;
    }
    
    .compact-headers-row {
        grid-template-columns: repeat(7, 12px 1fr) 25px;
    }
    
    .compact-integrated-row {
        grid-template-columns: repeat(7, 12px 1fr) 25px;
    }
    
    .compact-day-number {
        width: 18px;
        font-size: 0.65em;
    }
    
    .compact-weeks-header-spacer {
        min-height: 28px;
    }
    
    .compact-event {
        font-size: 0.4em;
    }
}

@media (max-width: 768px) {
    .compact-view-container {
        grid-template-columns: 1fr;
        grid-template-rows: 40px 1fr;
    }
    
    .compact-headers-row {
        grid-template-columns: repeat(7, 10px 1fr) 20px;
    }
    
    .compact-integrated-row {
        grid-template-columns: repeat(7, 10px 1fr) 20px;
    }
    
    .compact-months-bar,
    .compact-weeks-bar {
        flex-direction: row;
        writing-mode: horizontal-tb;
        height: 40px;
        overflow-x: auto;
    }
    
    .compact-month-label .month-text {
        transform: none;
    }
    
    .compact-day-number {
        width: 15px;
        font-size: 0.6em;
    }
    
    .compact-weeks-header-spacer {
        min-height: 25px;
    }
    
    .compact-event {
        font-size: 0.35em;
    }
}

/* === BOTONS === */
.btn { 
    padding: 10px 20px; 
    border: none; 
    border-radius: 8px; 
    font-size: 0.9em; 
    font-weight: 500; 
    cursor: pointer; 
    transition: all 0.2s; 
}

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

.btn-primary { 
    background-color: var(--accent-color); 
    color: white; 
}

.btn-primary:hover { 
    background-color: var(--accent-hover); 
}

.btn-secondary { 
    background-color: var(--secondary-btn-bg); 
    color: white; 
}

.btn-secondary:hover { 
    background-color: var(--secondary-btn-hover); 
}

.btn-danger { 
    background-color: var(--danger-color); 
    color: white; 
}

.btn-danger:hover { 
    background-color: var(--danger-hover); 
}

/* === DRAG & DROP === */
.event.is-user-event[draggable="true"] {
    cursor: grab;
    transition: transform 0.2s, opacity 0.2s;
}

.event.is-user-event[draggable="true"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.event.dragging,
.compact-event.dragging {
    opacity: 0.6;
    transform: rotate(2deg) scale(0.95);
    cursor: grabbing;
    z-index: 1000;
}

.day-cell.drop-target {
    border-color: var(--accent-color);
    background-color: rgba(79, 93, 149, 0.1);
    box-shadow: 0 0 0 2px rgba(79, 93, 149, 0.3);
}

.day-cell.drop-invalid {
    border-color: var(--danger-color);
    background-color: rgba(229, 62, 62, 0.1);
    box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.3);
}

/* Estats de drop per a vista compacta */
.compact-day-cell.drop-target {
    border-color: var(--accent-color);
    background-color: rgba(79, 93, 149, 0.1);
    box-shadow: 0 0 0 2px rgba(79, 93, 149, 0.3);
}

.compact-day-cell.drop-invalid {
    border-color: var(--danger-color);
    background-color: rgba(229, 62, 62, 0.1);
    box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.3);
}

.day-cell.drop-target .add-event-btn,
.day-cell.drop-invalid .add-event-btn {
    opacity: 0;
}

/* === ESDEVENIMENTS PENDENTS === */
.unplaced-events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.unplaced-event-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: grab;
    transition: all 0.2s ease;
    position: relative;
}

.unplaced-event-item:hover {
    border-color: var(--accent-color);
    background-color: var(--card-bg-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.unplaced-event-item[draggable="true"]:active {
    cursor: grabbing;
    opacity: 0.8;
    transform: rotate(2deg) scale(0.98);
}

.unplaced-event-item.dragging {
    opacity: 0.6;
    transform: rotate(3deg) scale(0.95);
    cursor: grabbing;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.unplaced-event-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.unplaced-event-item .event-title {
    font-weight: 600;
    color: var(--main-text-color);
    font-size: 0.95em;
    line-height: 1.3;
}

.unplaced-event-item .event-category {
    font-size: 0.8em;
    color: var(--accent-color);
    font-weight: 500;
}

.unplaced-event-item .event-original-date {
    font-size: 0.8em;
    color: var(--secondary-text-color);
    font-weight: 500;
}

.dismiss-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--danger-color);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.7;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dismiss-btn:hover {
    opacity: 1;
    background-color: var(--danger-hover);
    transform: scale(1.1);
}

.unplaced-event-item:hover .dismiss-btn {
    opacity: 1;
}

.unplaced-event-item.active {
    background-color: #e9ecef;
    border-color: var(--accent-color);
}

.unplaced-events-list:empty::after {
    content: "No hi ha esdeveniments pendents de col·locar";
    color: var(--secondary-text-color);
    font-style: italic;
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
}

/* === VISTA DIÀRIA === */
.day-view-container {
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
}

.day-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 16px;
}

.day-title h2 {
    margin: 0;
    color: var(--main-text-color);
    font-size: 1.8em;
    font-weight: 600;
}

.week-info {
    display: inline-block;
    background-color: var(--accent-color);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
    margin-top: 8px;
}

.week-info[data-action="week-click"] { 
    cursor: pointer; 
    transition: background-color 0.2s ease; 
}

.week-info[data-action="week-click"]:hover { 
    background-color: var(--accent-hover); 
}

.add-event-day-btn {
    padding: 10px 20px;
    font-size: 0.95em;
    border-radius: 8px;
    white-space: nowrap;
}

.day-view-content {
    background-color: var(--card-bg-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.events-list {
    min-height: 300px;
}

.event-list-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.event-list-item:last-child {
    border-bottom: none;
}

.event-list-item:hover {
    background-color: #f8f9fa;
}

.event-list-item.is-user-event:hover {
    background-color: #e3f2fd;
}

.event-color-bar {
    width: 6px;
    height: 60px;
    border-radius: 3px;
    margin-right: 16px;
    flex-shrink: 0;
}

.event-details {
    flex-grow: 1;
    min-width: 0;
}

.event-details .event-title {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--main-text-color);
    margin-bottom: 4px;
    line-height: 1.4;
}

.event-details .event-category {
    font-size: 0.85em;
    color: var(--accent-color);
    font-weight: 500;
    margin-bottom: 8px;
}

.event-details .event-description {
    font-size: 0.9em;
    color: var(--secondary-text-color);
    line-height: 1.4;
    margin-top: 8px;
}

.event-details .event-description a {
    color: var(--link-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.event-details .event-description a:hover {
    color: var(--link-hover);
    border-bottom-color: var(--link-hover);
}

.event-details .event-description a:visited {
    color: var(--link-visited);
}

.event-actions {
    color: var(--secondary-text-color);
    font-size: 1.2em;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.event-actions:hover {
    background-color: var(--border-color);
}

.no-events {
    text-align: center;
    padding: 60px 20px;
    color: var(--secondary-text-color);
    font-style: italic;
    font-size: 1.1em;
}

.day-view-container.drop-target {
    background-color: #e8f5e8;
    border: 2px dashed #4caf50;
}

.day-view-container.drop-invalid {
    background-color: #ffeaea;
    border: 2px dashed #f44336;
}

/* === ANIMACIONS === */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* === VISTA SEMESTRAL === */
body[data-current-view="semester"] .calendar-grid .day-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--card-bg-color);
}

body[data-current-view="semester"] .day-cell.month-even {
    background-color: var(--card-bg-color);
}

body[data-current-view="semester"] .day-cell.month-odd {
    background-color: rgba(79, 93, 149, 0.03);
}