/* Grid Calendar Styles */

/* Base structure for sticky footer with flexbox */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Header automatically responsive with viewport units - no breakpoints needed! */

/* Main Content - Calendar responsive */
.main-content {
    padding: 15px 0 auto; /* Auto bottom padding to avoid footer overlap */
    margin: 0;
    overflow: visible;
    min-height: auto !important; /* Much larger minimum height for full calendar */
    height: auto !important; /* Force auto height */
    max-height: none !important; /* Remove any max-height constraint */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Start from top, don't force spacing */
    flex: 1 0 auto; /* Allow content to grow while preventing unwanted shrink */
}

/* Responsive Main Content padding for mobile */
@media (max-width: 767.98px) {
    .main-content {
        padding: 20px 0;
    }
}

/* Medium screens (768px - 941px) - prevent calendar behind footer */
@media (min-width: 768px) and (max-height: 941px) {
    .main-content {
        padding: 15px 0 auto; /* Auto bottom padding for shorter screens */
        min-height: 700px !important; /* Larger minimum height */
    }
}

/* Short screens (max-height: 800px) - even more space */
@media (max-height: 800px) {
    .main-content {
        padding: 15px 0 auto; /* Auto bottom padding */
        min-height: 600px !important; /* Larger minimum height for short screens */
    }
}

/* Footer - At the bottom of the page with Bootstrap warning color */
.footer-info {
    width: 100%;
    padding: 20px 0;
    background-color: #fff3cd !important; /* Bootstrap warning background */
    border-color: #ffecb5 !important; /* Bootstrap warning border */
    color: #664d03 !important; /* Bootstrap warning text */
    flex-shrink: 0; /* Prevent footer from shrinking */
}

/* Alert transparent - No colors or shadows */
.footer-info .alert-warning {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Calendar Container - Responsive with viewport units */
.calendar-container {
    max-width: min(90vw, 1200px) !important;
    margin: 0 auto !important;
    padding: 0 !important; /* No padding, let main-content handle spacing */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important; /* Auto width for proper centering */
    flex: 0 0 auto; /* Don't grow, just take needed space */
}

/* Calendar container automatically responsive with viewport units - no breakpoints needed! */

/* Override Bootstrap container padding */
.main-content .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    height: auto !important; /* Remove fixed height */
    overflow: visible !important; /* Remove scroll */
}

/* Calendar Grid - Responsive with viewport units */
.calendar {
    display: grid;
    grid-template-columns: repeat(3, minmax(80px, 130px)); /* Cap day width at 130px while keeping a safe minimum */
    gap: clamp(0.75rem, 2vw, 1.5rem); /* Gap scales with viewport while keeping proportion */
    background: transparent;
    border-radius: 0;
    padding: 0 clamp(1rem, 3vw, 2.5rem); /* Maintain proportional side padding */
    box-shadow: none;
    backdrop-filter: none;
    width: 95vw;
    max-width: 900px;
    width: min(95vw, 900px);
    margin: 0 auto;
    box-sizing: border-box;
    justify-content: center;
    justify-items: stretch;
}

@media (max-width: 360px) {
    .calendar {
        grid-template-columns: repeat(3, minmax(45px, 130px)); /* Aggressively shrink footprints on ultra narrow screens */
        gap: clamp(0.25rem, 1.8vw, 0.45rem);
        padding: 0 clamp(0.25rem, 3vw, 0.8rem);
        width: min(92vw, 640px); /* Prevent the grid from exceeding the viewport width */
        max-width: 640px;
    }

    .calendar-day {
        font-size: clamp(0.6rem, 2vw, 0.85rem);
    }
}

@media (min-width: 768px) {
    .calendar {
        grid-template-columns: repeat(4, minmax(80px, 130px)); /* Four columns on medium viewports */
    }
}

@media (min-width: 1200px) {
    .calendar {
        grid-template-columns: repeat(4, minmax(80px, 130px)); /* Four columns on wide viewports (matching config) */
    }
}

/* Calendar responsive columns: 3 (mobile) → 4 (tablet+) matching config.js */

.calendar-row {
    display: contents;
}

/* Calendar Days - Responsive with viewport units */
.calendar-day {
    width: min(100%, 130px);
    max-width: 130px;
    max-height: 130px;
    aspect-ratio: 1 / 1; /* Keep the boxes perfectly square */
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: clamp(1rem, 1.2vw, 1.35rem); /* Scale text with viewport but keep upper bound */
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    background: transparent;
    color: white;
    box-shadow: none;
    margin: 0;
    border: none;
    overflow: hidden;
    padding: 0;
}

/* Solo i giorni cliccabili hanno il cursore pointer */
.calendar-day.clickable {
    cursor: pointer !important;
}

/* Overlay con animazione luci per i giorni cliccabili */
.calendar-day.clickable::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: url('../images/titles/luci2.gif');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
}

/* Calendar days automatically responsive with viewport units - no breakpoints needed! */

.calendar-day:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: none;
}

.calendar-day::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0;
}

.calendar-day:hover::before {
    opacity: 1;
}

/* Day States */
.calendar-day.unlocked {
    background: transparent;
    color: white;
    animation: pulse 2s infinite;
    border: none;
}

.calendar-day.unlocked:hover {
    border: none;
    transform: translateY(-3px) scale(1.05);
}

.calendar-day.locked {
    background: transparent;
    color: white;
    border: none;
}

.calendar-day.locked:hover {
    transform: none;
    box-shadow: none;
}

.calendar-day.expired {
    background: transparent;
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

.calendar-day.expired .expired-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

.calendar-day.today {
    background: transparent;
    color: white;
    animation: currentDay 3s infinite;
    border: none;
}

/* Overlay con animazione luci per il giorno cliccabile/oggi */
.calendar-day.clickable::after,
.calendar-day.today::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: url('../images/titles/luci2.gif');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
}

.calendar-day.empty {
    visibility: hidden;
    pointer-events: none;
    cursor: default;
}

/* Day Numbers */
.day-number {
    font-weight: 700;
    font-size: 1.2rem;
}

/* Day Case Images - Now handled by background-image */

/* Animations */
@keyframes pulse {
    0% { box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3); }
    50% { box-shadow: 0 4px 25px rgba(46, 204, 113, 0.6); }
    100% { box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3); }
}

@keyframes currentDay {
    0%, 100% { 
        box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 4px 25px rgba(243, 156, 18, 0.6);
        transform: scale(1.02);
    }
}

.calendar-stage {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    background-image: url('../images/calendar/1920x1080px_calendario avvento tato.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-color: #BF0413; /* Base tone from artwork to avoid stark transitions */
    min-height: 100vh; /* Assurer que le stage couvre toute la hauteur */
}

/* Allow normal scroll on mobile */
@media (max-width: 767.98px) { /* Bootstrap 'sm' breakpoint */
    body {
        display: flex; /* Garder flexbox pour que le footer soit collé en bas */
        flex-direction: column;
        min-height: 100vh; /* Assurer la hauteur minimale */
    }
    .main-content {
        flex: 1 0 auto; /* Permettre au contenu de grandir */
    }
    .footer-info {
        flex-shrink: 0; /* Empêcher le footer de rétrécir */
        margin-top: auto; /* Coller le footer en bas */
    }
    .calendar-stage {
        background-image: url('../images/calendar/1080px_calendario avvento tato.png');
        background-size: cover;
        background-position: center top; /* Aligner en haut pour mobile portrait */
        background-repeat: no-repeat;
        background-attachment: scroll;
        min-height: 100vh; /* Assurer que le stage couvre toute la hauteur */
    }
}

/* Tablets et laptops (768px - 1919px) */
@media (min-width: 768px) and (max-width: 1919px) {
    .calendar-stage {
        background-image: url('../images/calendar/1920x1080px_calendario avvento tato.png');
        background-size: cover;
        background-position: center;
    }
}

/* Desktop 1920x1080 (1920px - 2559px) */
@media (min-width: 1920px) and (max-width: 2559px) {
    .calendar-stage {
        background-image: url('../images/calendar/1920x1080px_calendario avvento tato.png');
        background-size: cover;
        background-position: center;
    }
}

/* Ultrawide (≥ 2560px) */
@media (min-width: 2560px) {
    .calendar-stage {
        background-image: url('../images/calendar/3440x1440px calendario avvento tato.png');
        background-size: cover;
        background-position: center;
    }
}