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

/* #region Algemene stijlen */
body{
    font-family: Arial, sans-serif;
    font-size: small;
    margin: 0;
    padding:5px;
    background-color: #f3f9fb;
    /* width: 94%; */
}

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

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

.paginacontainer{
    display: grid;
}


.grid > * {
  min-width: 0;
}

button {
    background-color: #008972;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.icon {
    display: inline-block;
    font-size: 12px;
    width: 1em;
    text-align: center  ;
}

.collapsible {
    background-color: #008972;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    font-size: larger;
    /* display: inline-block; */
    vertical-align: middle;
    position: relative;
    grid-column: 1/-1;
}

.collapsed {
    display: none !important;
}
/* #endregion */

/* #region Vakanties */

#toggleVakanties {
    order: 0;
    margin-bottom: 10px;
}

.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;
    flex-grow: 1;
    margin-bottom: 20px;
}

.vakantiescontainer .schooljaar {
    grid-column: 1 / -1;
}

.vakantiescontainer .vakantie {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 3;
    gap: inherit;    
    padding: 5px;
}

.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: normal;
}
.vakantie .beschrijving {
    grid-column: 1 / -1;
    font-style: italic;
    color: #006077;
    padding: 3px;
}

/* #endregion */

/* #region Wijzigingen */


#toggleWijzigingen {
    order: 1;
    margin-bottom: 10px;
}
.wijzigingencontainer {
    order: 2;
    display: grid;    
    /* grid-template-columns: minmax(80px,8%) minmax(60px,10%) 1fr; */
    grid-template-columns: minmax(100px,8%) minmax(100px,1fr);
    grid-gap:5px;    
    color: hsl(192, 100%, 10%);
    padding: 0px;
    text-align: left;
    margin-bottom: 20px;
    min-width: 0px;
}


 
.wijziging {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 3;
    gap: inherit;    
    /* background-color: hsl(44, 100%, 95%);  */
    padding: 5px;
    /* border-bottom: #fdce43 solid 1px;  */
    border-left: #fdce43 solid 3px; 
    /* 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/2;
    grid-row: 2/3;
    /* font-size: small; */
}

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

/* #endregion */

/* #region CSS Grid gebaseerd WZ Agenda*/

#toggleAgenda {
    order: 3;
    margin-bottom: 10px;
}
.agendacontainer{
    order: 4;
    flex-grow: 1;

        display: grid;
    /* grid-template-columns: 6% 5% 8% 1fr; */
    grid-template-columns: minmax(30px,8%) minmax(90px,10%) minmax(100px,1fr);
    grid-gap: 5px;
    /* color: #006077; */
    color: hsl(192, 100%, 10%);
    padding: 0px;
    font-size: normal;
    text-align: left;
    min-width: 0px;
    /* max-width: 300px; */
}

.container {
    display: grid;
    /* grid-template-columns: 6% 5% 8% 1fr; */
    grid-template-columns: minmax(30px,8%) minmax(90px,10%) minmax(100px,1fr);
    grid-gap: 5px;
    /* color: #006077; */
    color: hsl(192, 100%, 10%);
    padding: 0px;
    font-size: normal;
    text-align: left;
    min-width: 0px;
    /* max-width: 300px; */
}

.dagcontainer {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 4;
    gap: inherit;
    /* background: linear-gradient(to right, #00607717, white); */
    background:  #00607717;

}
.eventscontainer {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 2 / -1;

}
.eventcontainer {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    margin: 2px 0px;
    padding: 0% 5px;

}

.jaardiv {
    display:none;
}

.maanddiv, .jaardiv {
     grid-column: 1 / -1; 
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 5px;
    /* color: #008972; */
    color:#eb6334;
    border-left: #eb6334 solid 3px;
}
.weekdiv {
    grid-column: 1 / 4;
    text-align: left;
    font-size: larger;
    padding: 5px;
     box-shadow: #006077 0px 1px 3px;
     margin-left: 5px;
     margin-right: 5px;
}
.datumdiv {
    grid-column: 1 / 2;
    padding: 5px;
    text-align: center;
    border-left: #006077 solid 3px;
}


.tijddiv {
    grid-column: 1 / 2;
    padding: 5px;
    text-align: center;
}
.eventdiv {
    grid-column: 2 / 4;
    text-align: left;
    padding: 5px;
    border-radius: 10px;
}

.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; */
    border-left: #fdce43 solid 3px;
 }


.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;
    font-style: italic;
    color: white;
    padding: 2px 10px;
    border-radius: 10px;
    text-align: center;
    display: none;   
}
.status.gewijzigd {    
    background-color: #006077;
    display:inline-block;
}
.status.nieuw {    
    background-color: #008972;
    display:inline-block;
}
.status.geannuleerd {
    background: #c00;
    display:inline-block;
}

/* #endregion */