/* Stijldefinities voor WZ Agenda
    Auteur: Peter Ooms
    Datum: 2026-03-11
    */

body{
    font-family: Arial, sans-serif;
    margin: 0;
    padding:0px;
}

h1, h2, h3 {
    margin: 0;
    padding: 10px 0px;
    color: #006077;
}

a {
    text-decoration: none;
    display: contents;
    color: inherit;
}

/* #region Pagina secties indeling */
.paginacontainer{
    display: grid;
}
.wijzigingencontainer {
    order: 2;
    display: grid;    
    grid-template-columns: minmax(100px,8%) minmax(80px,10%) 1fr;
    grid-gap:5px;    
    color: hsl(192, 100%, 10%);
    padding: 0px;
    font-size: normal;
    text-align: left;
    margin-bottom: 20px;
}
.agendacontainer{
    order: 3;
    flex-grow: 1;
}
.vakantiescontainer{
    order: 1;
    flex-grow: 1;
    margin-bottom: 20px;
}
/* #endregion */

/* #region Vakanties*/

.vakantiescontainer {
    order: 1;
    display: grid;    
    grid-template-columns: minmax(200px,30%) 1fr;
    grid-gap:5px;    
    color: hsl(192, 100%, 10%);
    padding: 0px;
    font-size: normal;
    text-align: left;
}

.vakantiescontainer .schooljaar {
    grid-column: 1 / -1;
    /* background-color: hsl(170, 44%, 83%);
    text-align: center;
    font-size: large; 
    padding: 5px;
    color: #008972;
    border-radius: 10px;
    border: #008972 solid;
    border-width: 0px 0px 2px 0px; */
}

.vakantiescontainer .vakantie {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 3;
    gap: inherit;    
    /* background-color: hsl(170, 100%, 95%);  */
    padding: 5px;
    /* border-bottom: #fdce43 solid 1px; 
    border-radius: 10px; */
    /* margin-bottom: 10px; */
}

.vakantie .datums {
    grid-column: 1 / -1;
    grid-row: 2/2;
    text-align: left;
}
.vakantie .naam {
    grid-column: 1 / -1;
    text-align: left;
    color: #eb6334;
    font-weight: 600;
    font-size: larger;
}
.vakantie .beschrijving {
    grid-column: 1 / -1;
    font-style: italic;
    color: #006077;
    padding: 3px;
}

/* #endregion */

/* #region CSS Grid gebaseerd WZ Agenda Wijzigingen*/
 
.wijziging {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 4;
    gap: inherit;    
    /* background-color: hsl(44, 100%, 95%); */
    padding: 5px;
    border-bottom: #fdce43 solid 1px; 
    border-radius: 8px;
}
.geenwijzigingen {
    grid-column: 1 / 4;
    /* background-color: hsl(44, 100%, 95%); */
    padding: 10px;
    border-bottom: #fdce43 solid 1px; 
    border-radius: 8px;
    text-align: center;
    font-style: italic;
}

.wijzigingstatus{
    grid-column: 1 /2;
    grid-row: 1/2;
    font-style: italic;
    /* font-size: normal; */
    padding: 3px;
    border-radius: 10px;
    text-align: center;
}
.wijzigingstatus.gewijzigd {
    background-color: #fdce43;
}
.wijzigingstatus.nieuw {
    background-color: hsl(170, 100%, 27%);
    color: white;
}
.wijzigingstatus.geannuleerd {
    background-color: #c00;
    color: white;
}

.datum{
    grid-column: 1 / 2;
    grid-row: 2/3;
    /* font-size: normal; */
    text-align: center;
}

.onderwerp{
    grid-column: 2 / 4;
    grid-row: 2/3;
    /* font-size: small; */
}

.toelichting{
    /* font-size: small; */
    font-style: italic;
    color: #eb6334;
    grid-column: 2/4;
    grid-row: 1/2;
    padding: 3px;
}

/* #endregion */

/* #region CSS Grid gebaseerd WZ Agenda*/
.container {
    display: grid;
    /* grid-template-columns: 6% 5% 8% 1fr; */
    grid-template-columns: minmax(30px,8%) minmax(120px,10%) 1fr;
    grid-gap: 10px;
    /* color: #006077; */
    color: hsl(192, 100%, 10%);
    padding: 0px;
    font-size: normal;
    text-align: left;
}

.dagcontainer {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 4;
    gap: inherit;
    /* margin-left: 20px; */
    /* border: #006077 solid; */
    /* border-width: 2px 0px 0px 2px; */
}
.eventscontainer {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 2 / -1;
    /* background-color: hsl(44, 100%, 95%); */
    /* border-bottom: #fdce43 solid 1px; */
     /* margin: 2px 0px; */
}
.eventcontainer {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    /* background-color: hsl(44, 100%, 95%); */
    border-bottom: #fdce43 solid 1px; 
    margin: 2px 0px;
    padding: 0% 5px;
    border-radius: 8px;
}

/* .jaardiv {
    grid-column: 1 / -2;
    background-color:  #006077; 
    padding: 10px;
    color: white;
    font-size: x-large;
    border-radius: 10px;
    
} */

.jaardiv {
    display:none;
}

.maanddiv, .jaardiv {
     grid-column: 1 / -1; 
    width: 100%;
    margin: auto;
    background-color:hsl(170, 44%, 83%);
    text-align: center;
    /* font-size: large; */
    padding: 5px;
    color: #008972;
    border-radius: 10px;
    border: #008972 solid;
    border-width: 0px 0px 2px 0px;
}
.weekdiv {
    grid-column: 1 / 5;
    background-color: #fdce43;
    text-align: left;
    font-size: x-large;
    padding: 5px;
    /* border: #fdce43 solid 2px; */
}
.datumdiv {
    grid-column: 1 / 2;
    background-color: #fdce43;    padding: 5px;
    text-align: center;
    /* border: #fdce43 solid 2px; */
}


.tijddiv {
    grid-column: 1 / 2;
    padding: 5px;
    margin: 5px 0px;
    text-align: center;
}
.eventdiv {
    grid-column: 2 / 4;
    text-align: left;
    padding: 0px 10px;
    /* background-color: hsl(45, 98%,90%);    */
    /* border-bottom: #fdce43 solid 1px; */
    border-radius: 10px;
    margin: 5px 0px;
}

.weekdag_6 .eventcontainer,
.weekdag_0 .eventcontainer{
    /* background-color: #cbf5ff; */
    border-bottom: #006077 solid 1px; 
    /* color: white; */
}

.weekdag_6 .eventdiv,
.weekdag_0 .eventdiv {
    /* background-color: #006077; */
    /* color: #006077;  */
    /* border-bottom: #006077 solid 1px;  */
}
.weekdag_6 .datumdiv,
.weekdag_0 .datumdiv {
    background-color: hsl(192, 100%, 80%);
    /* color: white; */
    /* border: #006077 solid 2px; */
 }

.eventdiv.verjaardag {
    background-color: hsl(15, 60%, 80%);
    /* color: white; */
    border-radius: 10px;
}
.eventdiv.vergadering {
    /* background-color: hsl(192, 80%,90%); */
    /* color: white; */
    border-radius: 10px;
}
.eventdiv.excursie {
    /* background-color: hsl(170, 80%, 80%); */
    /* color: white; */
    border-radius: 10px;
}
.eventdiv.werving {
    /* background-color: hsl(193, 70%, 80%); */
    /* color: white; */
    border-radius: 10px;
}
.eventdiv.vakantie {
    /* background-color: #1c829e; */
    /* color: white; */
    border-radius: 10px;
}

.status {
    grid-column: 1 /3;
    grid-row: 1/2;
    width: 100px;
    font-style: italic;
    color: white;
    padding: 3px;
    border-radius: 10px;
    text-align: center;
    display: none;   
}
.status.gewijzigd {    
    background-color: #006077;
    display:block;
}
.status.nieuw {    
    background-color: #008972;
    display:block;
}
.status.geannuleerd {
    color: #c00;
    display:block;
}

/* #endregion */