/**
 * Chargé pour la vue calendrier
 * TODO - Affiner les tailles de polices et la taille des jours, 
 * voir changer la disposition pour l'affichage mobile en mode portrait (7 lignes de 5 semaines au lieu de 5 ligne de 7 jours)
 * choses à revoir dans ce fichier
 */

:root {
    --color-border-day: #1f1f1f;
    --color-border-day-num: #ccc;
    --color-border-day_hover: #0855AD;
    --color-box-shadow-day-num: rgba(43, 41, 41, 0.1);
    --color-box-shadow-container-day: rgba(0,0,0,0.2);
    
    /* --toolbar-height: 64px;
    --header-height: 48px;
    --main-height: calc(100vh - calc(var(--toolbar-height) + var(--header-height))); */
    
    --calendar-navigation: 32px;
    --height-calendar: calc(var(--main-height) - var(--calendar-navigation));
    --height-container-day: 120px;
    --padding-top-calendar-wrapper: var(--header-height);

    --font-size--title-page: 2em;
    --font-size--header-day-num: 1.2em;
    --font-size--row-holyday-title: .9em;
    --font-size--year-num: 2.25em;
    --font-size--month-name: 1.75em;
    --font-size--row-holyday-description: .7em;
    --font-size--footer-day-gregorian-date: .85rem;
}

body {
    background-color: var(--bg-body);
    color: var(--fg-body);
}
.title-page {
    font-size: var(--font-size--title-page);
    text-align: center;
}
/* ========== BASE ========== */
#calendarWrapper {
    position: relative;
    width: auto;
    height: var(--main-height);
    padding-top: 4px;
    padding-bottom: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    border-bottom: 4px transparent solid;
}
.container-target {
    height: auto;
    transform: scale(1);
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.calendar-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    gap: calc(4 * var(--one-pixel));
    width: 100%;
    height: auto;
    max-height: var(--height-calendar);
    padding: 4px;
}
/* Nav calendar */
.calendar-navigation {
    margin: auto auto 1rem auto;
    width: 100%;
    height: var(--calendar-navigation);
    max-height: var(--calendar-navigation);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.button-nav-month {
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.button-nav-prev {
    margin-left: 2rem;
    margin-right: auto;
}
.button-reset-calendar {
    margin-left: auto;
    margin-right: auto;
}
.button-nav-next {
    margin-left: auto;
    margin-right: 2rem;
}
.button-nav-span-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-nav-span-icon.header {
    font-size: 26px;
}
/* Si système de pointage retire les boutons de navigation */
@media (pointer: coarse) {
    .calendar-navigation {
        display: none;
    }
}

.container-year-month {
    display: grid;
    grid-template-columns: 1fr;
    /* font-family: "Handlee", cursive; */
    font-family: "Poppins";
    font-weight: 700;
    font-style: normal;
    color: rgba(43, 41, 41, 0.85);
}
.month-year-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex: 0 0 100.00002%;
    max-width: 100.00002%;
    padding-top: .25em .5em;
}
.year-num {
    font-size: var(--font-size--year-num);
    margin-left: auto;
    margin-right: auto;
}
.month-name,
.separator {
    font-size: var(--font-size--month-name);
}
/* barre de titre jours */
.container-day-title{
    display: grid;
    grid-column: 1 / 8;
}
.days-title-row{
    grid-column: 1 / 8;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.day-title{
    text-align: center;
}
.text-b {
    font-weight: bold;
}
/* ========== JOUR ========== */
.container-day {
    display: grid;
    grid-template-rows: auto 1fr auto;
    box-sizing: border-box;
    height: var(--height-container-day);
    width: 100%;
    max-width: 256px;
    border: 1px solid var(--color-border-day);
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.container-day,
.container-day * {
    user-select: none;
}
.container-day {
  touch-action: manipulation; /* ou none pour bloquer scroll/zoom sur la zone */
}
.header-day {
    text-align: center;
    width: auto;
}
.container-holydays {
    /* max-height: 95%; */
    overflow-y: auto;
    overflow-x: hidden;
    /* padding: .5em 0 .25em 0; */
    flex-grow: 1;
}
.row-holyday {
    display: flex;
    flex-direction: column;
    /* margin: .25em 0; */
    width: 100%;
}
.footer-day {
    text-align: center;
}
.header-day h2.num {
    font-size: var(--font-size--header-day-num);
    font-weight: bold;
    border: 1px solid var(--color-border-day-num);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 2px 2px 5px var(--color-box-shadow-day-num);
    margin: 0 auto!important;
    /* padding: .125em; */
    width: auto;
}
.row-holyday .title {
    font-size: var(--font-size--row-holyday-title);
    font-weight: bold;
    text-align: center;
}
.row-holyday .container-description {
    display: block;
    width: 100%;
    padding: .125em .133em 1.125em .133em;
}
.row-holyday .description {
    font-size: var(--font-size--row-holyday-description);
    text-align: center;
    padding: .125em;
}
.gregorian-date{
    font-size: var(--font-size--footer-day-gregorian-date)!important;
    font-weight: bold;
    padding-bottom: 2px;
    text-align: center!important;
    border-top: 1px solid #cccccc;
}
.holyday-day > .gregorian-date,
.great-shabbat > .gregorian-date,
.period-day > .gregorian-date {
    padding-bottom: 0;
}
.container-day {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.empty {
    width: 100%;
    background-color: #e5ebee!important;
}
/* ========== PERIODS ========== */
/* --- Périodes sur les jours --- */
.period-day {
    /* border-radius: 5px; */
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.shabbat-day {
    background-color: var(--bg-color--shabbat)!important;
    color: var(--fg-color--shabbat)!important;
    font-weight: bold!important;
}

@media (hover: hover) { 
    .container-day:not(.empty):hover {
        border: 2px solid var(--color-border-day_hover);
        box-shadow: 0 0 3px var(--color-box-shadow-container-day);
        cursor: pointer;
    }
}
/* résoud certains problème sur 24FE */
/* #calendarWrapper { touch-action: manipulation; }
.container-day,
.container-holydays,
.holyday-day,
.period-day { touch-action: manipulation; pointer-events: auto; } */
/* ========== PANEL ========== */
.side-panel {
    position: fixed;
    top: calc(var(--header-height));
    margin-top: 0;
    margin-bottom: auto;
    right: -500px;
    width: 480px;
    max-width: 82dvw;
    padding: 1rem 4px;
    min-height: calc(100dvh - calc(var(--toolbar-height) + var(--header-height)))!important;
    height: calc(100dvh - calc(var(--toolbar-height) + var(--header-height)))!important;
    max-height: calc(100dvh - calc(var(--toolbar-height) + var(--header-height)))!important;
    background: #fff;
    padding: .5em;
    overflow-y: auto;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    transition: right 0.45s ease;
    z-index: 9999;
}
.side-panel.visible {
    right: 0;
}
.side-panel .day-details {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.side-panel.visible .day-details {
    opacity: 1;
}
.side-panel .day-details .title-panel {
    text-align: center;
    font-size: .85em;
    margin-top: 6px;
    margin-bottom: 4px;
}
.offline {
    text-align: center;
    color: crimson;
}
.offline h2 {
    font-size: 1.7em;
    font-weight: bold;
}
.offline p {
    font-size: 1em;
}
.great-shabbat {
    border: outset 2px var(--bg-color--shabbat)!important;
}
.great-shabbat  > .header-day > h2.num {
    border-top: 2px;
    border-top-left-radius:5px!important;
    border-top-right-radius:5px!important;
    color: var(--bd-color--shabbat)!important;
}
.day-current-date {
    border: 3px outset var(--bd-color--current-date)!important;
    border-radius: 5px!important;
}
.day-current-date .header-day,
.day-current-date .header-day h2.num {
    color: var(--fg-color--current-date)!important;
    border-top: 2px;
    border-top-left-radius:5px!important;
    border-top-right-radius:5px!important;
}
/* .day-current-date > .container-holydays {
    background-color: var(--bg-color--current-date)!important;
}
.great-shabbat > .container-holydays > .row-holyday {
    background-color: var(--bg-color--great-shabbat)!important;
} */
/* ========== Responsive ========== */
@media (max-width: 992px) {
    .day-title {
        font-size: .75em;
    }
    .button-nav-span-icon:not(.header) {
        font-size: 18px;
    }
    .mobile {
        display: block;
    }
    .desktop {
        display: none;
    }
}
@media (min-width: 993px) {
    .day-title {
        font-size: .9em;
    }
    .button-nav-span-icon:not(.header) {
        font-size: 22px;
    }
    .mobile {
        display: none;
    }
    .desktop {
        display: block;
    }
}
@media (max-width: 359px) {
    .container-day {
        --height-container-day: 64px;
    }
    .calendar-container {
        gap: calc(1 * var(--one-pixel));
    }
    .header-day h2.num {
        --font-size--header-day-num: .6em;
    }
    .row-holyday .title {
        --font-size--row-holyday-title: .45em;
    }
    .row-holyday .description {
        --font-size--row-holyday-description: .4em;
    }
    .gregorian-date {
        --font-size--footer-day-gregorian-date: .33rem!important;
    }
    .month-name,
    .separator {
        --font-size--month-name: .85em;
    }
    .year-num {
        --font-size--year-num: .85em;
    }
    .title-page {
        --font-size--title-page: 1em;
    }
    .day-current-date {
        border: 2px outset var(--bd-color--current-date)!important;
    }
    .great-shabbat {
        border: outset 2px var(--bg-color--shabbat)!important;
    }
}
@media (min-width: 360px) and (max-width: 767px) {
    .container-day {
        --height-container-day: 80px;
    }
    .calendar-container {
        gap: calc(2 * var(--one-pixel));
    }
    .header-day h2.num {
        --font-size--header-day-num: .65em;
    }
    .row-holyday .title {
        --font-size--row-holyday-title: .55em;
    }
    .row-holyday .description {
        --font-size--row-holyday-description: .45em;
    }
    .gregorian-date {
        --font-size--footer-day-gregorian-date: .5rem!important;
    }
    .month-name,
    .separator {
        --font-size--month-name: 1em;
    }
    .year-num {
        --font-size--year-num: 1em;
    }
    .title-page {
        --font-size--title-page: 1.25em;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .container-day {
        --height-container-day: 84px;
    }
    .calendar-container {
        gap: calc(2 * var(--one-pixel));
    }
    .header-day h2.num {
        --font-size--header-day-num: .65em;
    }
    .row-holyday .title {
        --font-size--row-holyday-title: .55em;
    }
    .row-holyday .description {
        --font-size--row-holyday-description: .5em;
    }
    .gregorian-date {
        --font-size--footer-day-gregorian-date: .6rem!important;
    }
    .month-name,
    .separator {
        --font-size--month-name: 1em;
    }
    .year-num {
        --font-size--year-num: 1em;
    }
    .title-page {
        --font-size--title-page: 1.5em;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .container-day {
        --height-container-day: 100px;
    }
    .calendar-container {
        gap: calc(3 * var(--one-pixel));
    }
    .header-day h2.num {
        --font-size--header-day-num: 1em;
    }
    .row-holyday .title {
        --font-size--row-holyday-title: .7em;
    }
    .row-holyday .description {
        --font-size--row-holyday-description: .5em;
    }
    .gregorian-date {
        --font-size--footer-day-gregorian-date: .8rem!important;
    }
    .month-name,
    .separator {
        --font-size--month-name: 1em;
    }
    .year-num {
        --font-size--year-num: 1em;
    }
    .title-page {
        --font-size--title-page: 1.75em;
    }
}
@media (min-width: 1200px) {
    .container-day {
        --height-container-day: 120px;
    }
    .calendar-container {
        gap: calc(4 * var(--one-pixel));
    }
    .header-day h2.num {
        --font-size--header-day-num: 1em;
    }
    .row-holyday .title {
        --font-size--row-holyday-title: .9em;
    }
    .row-holyday .description {
        --font-size--row-holyday-description: .7em;
    }
    .gregorian-date {
        --font-size--footer-day-gregorian-date: .85rem!important;
    }
    .month-name,
    .separator {
        --font-size--month-name: 1em;
    }
    .year-num {
        --font-size--year-num: 1em;
    }
    .title-page {
        --font-size--title-page: 2em;
    }
}
/* @media screen and (min-width: 1440px) {
    .container-day {
        --height-container-day: 140px;
    }
} */
@media screen and (max-width: 1366px) {
    #calendarWrapper {
        width: 100%;
    }
}
@media screen and (min-width: 1367px) {
    #calendarWrapper {
        width: 80%;
    }
}

/* ========== COULEURS PAR TYPE DE FÊTE ========== */
.biblical           { background-color: var(--bg-color--biblical); color: var(--fg-color--biblical); }
.period-biblical    { background-color: var(--bg-color--period-biblical); color: var(--fg-color--period-biblical); }

.judaic             { background-color: var(--bg-color--judaic);            color: var(--fg-color--judaic); }
.period-judaic      { background-color: var(--bg-color--period-judaic);     color: var(--fg-color--period-judaic); }

.addJudaic          { background-color: var(--bg-color--addjudaic);         color: var(--fg-color--addjudaic); }
.period-addJudaic   { background-color: var(--bg-color--period-addjudaic);  color: var(--fg-color--period-addjudaic); }

.christian          { background-color: var(--bg-color--christian);         color: var(--fg-color--christian); }
.period-christian   { background-color: var(--bg-color--period-christian);  color: var(--fg-color--period-christian); }

.essene             { background-color: var(--bg-color--essene);            color: var(--fg-color--essene); }
.period-essene      { background-color: var(--bg-color--period-essene);     color: var(--fg-color--period-essene); }

.tekoufa            { background-color: var(--bg-color--tekoufa);           color: var(--fg-color--tekoufa); }
.intercalary        { background-color: var(--bg-color--intercalary);       color: var(--fg-color--intercalary); }

.civil              { background-color: var(--bg-color--civil); }

/* === Couleurs simples par type de période === */
.bg-biblical {
    background-color: var(--bg-color--biblical);
}
.bg-period-biblical {
    background-color: var(--bg-color--period-biblical);
}
.bg-judaic {
    background-color: var(--bg-color--judaic);
    color: #fff;
}
.bg-period-judaic {
    background-color: var(--bg-color--period-judaic);
    color: #fff;
}
.bg-addJudaic {
    background-color: var(--bg-color--addjudaic);
    color: #0e0606;
}
.bg-period-addJudaic {
    background-color: var(--bg-color--addjudaic);
    color: #0e0606;
}
.bg-christian {
    background-color: var(--bg-color--christian);
}
.bg-period-christian {
    background-color: var(--bg-color--period-christian);
}
.bg-period-essene {
    background-color: var(--bg-color--period-essene);
}
.bg-essene {
    background-color: var(--bg-color--essene);
}
.bg-tekoufa {
    background-color: var(--bg-color--tekoufa);
}
.bg-intercalary { 
    background-color: var(--bg-color--intercalary);
}

/* === Dégradés pour 2 périodes sur le titre === */
.gradient-biblical-judaic {
    background: linear-gradient(to right, var(--bg-color--biblical) 50%, var(--bg-color--judaic) 50%);
}
.gradient-biblical-christian {
    background: linear-gradient(to right, var(--bg-color--biblical) 50%, var(--bg-color--period-christian) 50%);
    color: #fff!important;
    text-shadow: var(--fg-title-day--shadow);
}
.gradient-biblical-essene {
    background: linear-gradient(to right, var(--bg-color--biblical) 50%, var(--bg-color--essene) 50%);
}
.gradient-judaic-christian {
    background: linear-gradient(to right, var(--bg-color--judaic) 50%, var(--bg-color--period-christian) 50%);
    color: #fff!important;
    text-shadow: var(--fg-title-day--shadow);
}
.gradient-judaic-essene {
    background: linear-gradient(to right, var(--bg-color--judaic) 50%, var(--bg-color--essene) 50%);
}
.gradient-christian-essene {
    background: linear-gradient(to right, var(--bg-color--period-christian) 50%, var(--bg-color--essene) 50%);
}
/* voir pour add autres combinaisons pour autres types périodes */

/* ========== POPUP ========== */
/* --- Popup globale --- */
.calendar-popup {
    position: fixed; /* absolute; */
    z-index: 1001;
    background-color: #ece9e9;
    color: #1e1e1e;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    height: auto;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
    font-size: 14px;
    line-height: 1.4;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: hidden;
}
/* --- Animation fadeIn --- */
.calendar-popup.show {
    display: block;
    opacity: 1;
    animation: fadeIn 0.3s ease;
}

/* --- Contenu de la popup --- */
.calendar-popup-content h3 {
    margin-top: 0;
    font-size: 16px;
    color: #222;
}
.calendar-popup-content p {
    margin: 4px 0;
}
.calendar-popup-content small {
    display: block;
    color: #666;
}

/* --- Keyframes pour fadeIn --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Ajustement mobile --- */
@media screen and (max-width: 768px) {
    .calendar-popup {
        font-size: 12px;
    }
}
.day-gregorian-date-locked {
    color: #660c0c!important;
    font-size: 0.75em;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #cecaca!important;
}
@media screen and (max-width: 993px) {
    .day-gregorian-date-locked {
        font-size: 0.6em;
    }
}
/* fin */
/* flex 
supprimer ceux qui ne sont plus utilisées: */
.container-row{
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    margin-right: -6px;
}
.cell-12{
    flex: 0 0 100.00002%;
    max-width: 100.00002%;
}
.d-flex{
    display: flex!important;
}
.flex-column{
    flex-direction: column!important;
}
.flex-justify-center{
    justify-content: center !important;
}
.flex-justify-between{
    justify-content: space-between !important;
}
.flex-justify-around{
    justify-content: space-around !important;
}
.flex-align-center{
    align-items: center !important;
}
.flex-align-stretch{
    align-items: stretch !important;
}
.flex-content-center{
    align-content: center !important;
}
.flex-content-between{
    align-content: space-between !important;
}
.flex-content-around{
    align-content: space-around !important;
}
.flex-content-stretch{
    align-content: stretch !important;
}
/* fin flex */
.m-0 {
    margin: 0;
}
.p-0{ 
    padding: 0;
}
.p-2{
    padding: 2px;
}
.p-3{
    padding: 3px;
}
.p-4{
    padding: 4px;
}
.pb-8{
    padding-bottom: 8px;
}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}