/*##################################################################################*/
/* FASES — CBT zijmenu (lichte sidebar met accordion per fase) */

#menu_fases{
   --menu-w: min(390px, 85vw);
   --menu-accent: var(--theme-color, #1f5fd6);
   --menu-bg: #ffffff;
   --menu-line: #e5e7eb;
   --menu-text: var(--menu-accent);
   --menu-muted: #6b7280;
   --menu-hover: rgba(15,23,42,.05);
   --menu-active: var(--menu-accent);
   --menu-active-sub: rgba(31,95,214,.10);
   --menu-dot: #cbd5e1;
   --menu-done: var(--menu-accent);

   --menu-home-h: 60px;

   --menu-speed: .3s;
   --menu-ease: cubic-bezier(.4,0,.2,1);

   position:fixed;
   left:0;
   top:0;
   margin-left:0;
   height:100%;
   width:100%;
   overflow:hidden; /* scrollen gebeurt in ul.fase_lijst */
   isolation:isolate; /* eigen stacking context, zodat :after (z-index:-1) achter de inhoud blijft */
   font-family: inherit;
   /* dicht: onzichtbaar + overlay transparant; visibility pas na de animatie uit
      (open/dicht via .is-open in global_leerplein.js) */
   visibility:hidden;
   pointer-events:none;
   background:rgba(15,23,42,0);
   transition:background-color var(--menu-speed) var(--menu-ease), visibility 0s linear var(--menu-speed);
}
/* custom properties worden niet gevalideerd, dus een dubbele declaratie is geen fallback */
@supports (color: color-mix(in srgb, red 10%, transparent)){
   #menu_fases{
      --menu-active-sub: color-mix(in srgb, var(--menu-accent) 10%, transparent);
   }
}
#menu_fases.is-open{
   visibility:visible;
   pointer-events:auto;
   background-color:rgba(15,23,42,.45);
   transition:background-color var(--menu-speed) var(--menu-ease), visibility 0s;
}
/* sidebar-achtergrond: fixed, dus altijd schermhoog (home-knop + lijst) */
#menu_fases:after{
   content:'';
   position:fixed;
   left:0;
   top:0;
   bottom:0;
   width:var(--menu-w);
   z-index:-1;
   background:var(--menu-bg);
   box-shadow:4px 0 24px rgba(15,23,42,.12);
}
/* sidebar schuift in/uit */
#menu_fases:after,
#menu_fases:before,
#menu_fases > *{
   transform:translateX(calc(-1 * var(--menu-w) - 30px));
   transition:transform var(--menu-speed) var(--menu-ease);
   will-change:transform;
}
#menu_fases.is-open:after,
#menu_fases.is-open:before,
#menu_fases.is-open > *{
   transform:translateX(0);
}
#menu_fases *{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}

/* scheidingslijn zit nu als border-bottom op #menubtn_home (alleen als die er is) */
#menu_fases:before{display:none;}

/*************************************************************************************/
/* lijsten */
#menu_fases ul, #menu_fases li{
   list-style:none;
   padding:0;
   margin:0;
}
#menu_fases ul.fase_lijst{
   position:relative;
   width:var(--menu-w);
   height:auto;
   padding:16px 16px 20px;
   background:transparent; /* achtergrond zit op #menu_fases:after */
}
/* buitenste lijst scrollt zelf (schermhoog, min. de home-knop als die er staat);
   #menu_fases kan geen flex zijn omdat jQuery .show() er display:block op zet */
#menu_fases > ul.fase_lijst{
   height:100%;
   overflow-y:auto;
   overscroll-behavior:contain; /* scrollen in het menu niet doorgeven aan de pagina */
}
/* met home-knop: lijst = scherm min de vaste hoogte van de home-balk */
#menu_fases > #menubtn_home ~ ul.fase_lijst{
   height:calc(100% - var(--menu-home-h));
}
#menu_fases ul.fase_lijst > li{
   margin-bottom:8px;
}

/* opdrachten: inline onder de fase i.p.v. uitklap-flyout, alleen bij de actieve fase */
#menu_fases ul.opdracht_lijst,
#menu_fases ul.item_lijst{
   position:static;
   visibility:inherit; /* niet 'visible': dan blijven ze zichtbaar/tabbaar als het menu dicht is */
   opacity:1;
   width:auto;
   min-height:0;
   margin:0 !important;
   padding:0 !important;
   transition:none;
}
#menu_fases ul.fase_lijst > li.sel > ul.opdracht_lijst{
   display:block;
   padding:6px 0 4px !important;
}
/* één-fase CBT: geneste fase_lijst bevat direct de opdrachten */
#menu_fases ul.fase_lijst ul.fase_lijst{
   width:auto;
   padding:0;
}
/* derde niveau (items): inline onder de actieve opdracht,
   alleen als er meer dan één zichtbaar item is */
#menu_fases ul.opdracht_lijst > li.sel > ul.item_lijst:has(> li:not(.menu_item_hidden) ~ li:not(.menu_item_hidden)),
#menu_fases ul.fase_lijst ul.fase_lijst > li.sel > ul.opdracht_lijst:has(> li:not(.menu_item_hidden) ~ li:not(.menu_item_hidden)){
   display:block;
   padding:2px 0 6px !important;
}

.menu_item_hidden{/*item in fase menu moet niet zichtbaar zijn, maar wel bestaan*/
   position:absolute;
   margin-left:-9999px;
   left:-9999px;
   height:0;width:0;
}

/*************************************************************************************/
/* basis links */
#menu_fases a,
#menu_fases span.menu_opdracht{
   display:block;
   width:100%;
   margin:0;
   color:var(--menu-text);
   background:transparent;
   border:0;
   border-left:0 !important;
   word-wrap:break-word;
   text-decoration:none;
}
#menu_fases a:hover{
   text-decoration:none;
}
#menu_fases a div{
   font-size:inherit;
   line-height:inherit;
}
#menu_fases .clear{display:none;}

/*************************************************************************************/
/* fase (hoofdstuk) + home */
#menu_fases a.menu_fase{
   display:flex;
   align-items:center;
   gap:16px;
   min-height:54px;
   padding:16px 16px 16px 14px;
   border-radius:8px;
   font-size:17px;
   font-weight:600;
   line-height:1.3;
   color:var(--menu-text);
   transition:background-color .15s ease;
}
#menu_fases a.menu_fase:hover{
   background-color:var(--menu-hover);
   color:var(--menu-text) !important;
}
#menu_fases ul.fase_lijst > li.sel > a.menu_fase,
#menu_fases a.menu_fase.sel{
   background-color:var(--menu-active);
   color:#fff !important;
   box-shadow:0 2px 6px rgba(15,23,42,.15);
}

a.menu_fase .btnFase,
a.menu_fase .titeltje{
   float:none;
}
#menu_fases a.menu_fase .btnFase{
   flex:0 0 28px;
   width:28px;
   height:28px;
   display:flex;
   align-items:center;
   justify-content:center;
   border-radius:4px;
   font-size:0;
   letter-spacing:normal;
}
#menu_fases a.menu_fase .titeltje{
   flex:1 1 auto;
   min-width:0;
}

/* iconen (Font Awesome) — alleen als er geen eigen menu_img is ingesteld */
#menu_fases a.menu_fase .btnFase:not([style]):before,
#menu_fases a.menu_fase:after{
   font-family:'Font Awesome 7 Pro';
   font-weight:300;
   font-style:normal;
   text-decoration:none;
   line-height:1;
}
#menu_fases a.menu_fase .btnFase:not([style]):before{
   content:'\f15c'; /* file-lines */
   font-size:24px;
}
/* chevron rechts: dicht = rechts, actieve fase = omlaag */
#menu_fases a.menu_fase:after{
   content:'\f054';
   flex:0 0 auto;
   font-size:15px;
   font-weight:400;
   opacity:.9;
}
#menu_fases ul.fase_lijst > li.sel > a.menu_fase:after,
#menu_fases a.menu_fase.sel:after{
   content:'\f078';
}

/* chevron als klikbare toggle (zie global_leerplein.js): groter klikvlak */
#menu_fases a.menu_fase:after{
   width:32px;
   margin-right:-8px;
   padding:8px 0;
   text-align:center;
   border-radius:6px;
   transition:background-color .15s ease;
}
#menu_fases a.menu_fase.chevron-hover:after{
   background-color:rgba(15,23,42,.08);
}
#menu_fases ul.fase_lijst > li.sel > a.menu_fase.chevron-hover:after,
#menu_fases a.menu_fase.sel.chevron-hover:after{
   background-color:rgba(255,255,255,.2);
}
/* handmatig in-/uitgeklapt: gaat voor op de standaard (.sel) */
#menu_fases ul.fase_lijst > li.is-collapsed > ul.opdracht_lijst{
   display:none !important;
}
#menu_fases ul.fase_lijst > li.is-expanded > ul.opdracht_lijst{
   display:block;
   padding:6px 0 4px !important;
}
#menu_fases ul.fase_lijst > li.is-collapsed > a.menu_fase:after{
   content:'\f054';
}
#menu_fases ul.fase_lijst > li.is-expanded > a.menu_fase:after{
   content:'\f078';
}

/* home-knop: vaste balk bovenaan (vaste hoogte, zodat de lijst eronder exact past) */
#menu_fases #menubtn_home{
   width:var(--menu-w);
   height:var(--menu-home-h);
   min-height:0;
   margin:0;
   padding:0 32px 0 30px; /* icoon uitgelijnd met de fase-iconen eronder */
   border:0;
   border-bottom:1px solid var(--menu-line);
   border-radius:0;
   white-space:nowrap;
   overflow:hidden;
}
#menu_fases #menubtn_home .titeltje{
   overflow:hidden;
   text-overflow:ellipsis;
}
#menu_fases #menubtn_home:after{display:none;}
#menu_fases #menubtn_home .btnFase{display:flex;}
#menu_fases #menubtn_home .btnFase:before{
   content:'\f015' !important; /* house */
}
#menu_fases #menubtn_home .titeltje br{display:none;}

.opdracht_counter_streepje,
a.menu_fase .subtiteltje{
   display:none;
}

/*************************************************************************************/
/* opdrachten (paragrafen) */
#menu_fases a.menu_opdracht,
#menu_fases span.menu_opdracht{
   position:relative;
   margin:2px 0;
   padding:10px 14px 10px 58px;
   border-radius:6px;
   font-size:16px;
   font-weight:400;
   line-height:1.45;
   color:var(--menu-text);
}
#menu_fases span.menu_opdracht{
   color:var(--menu-muted);
}
/* bolletje */
#menu_fases a.menu_opdracht:before,
#menu_fases span.menu_opdracht:before{
   content:'';
   position:absolute;
   left:22px;
   top:calc(10px + .725em - 6px);
   width:12px;
   height:12px;
   border-radius:50%;
   background-color:var(--menu-dot);
}
#menu_fases a.menu_opdracht:hover{
   background-color:var(--menu-hover);
   color:var(--menu-text) !important;
}
#menu_fases a.menu_opdracht.sel,
#menu_fases span.menu_opdracht.sel{
   background-color:var(--menu-active-sub);
   color:var(--menu-accent) !important;
   font-weight:600;
}
/* afgerond: groen bolletje */
#menu_fases a.menu_opdracht.done:before,
#menu_fases span.menu_opdracht.done:before{
   background-color:var(--menu-done);
}
#menu_fases a.menu_opdracht.sel:before,
#menu_fases span.menu_opdracht.sel:before{
   background-color:var(--menu-accent);
}
span.opdracht_counter{font-size:inherit;}

/*************************************************************************************/
/* items (derde niveau) */
#menu_fases a.menu_item{
   position:relative;
   margin:4px 0;
   padding:7px 14px 7px 84px;
   border-radius:6px;
   font-size:14px;
   line-height:1.4;
   color:var(--menu-muted);
}
/* verticale lijn als inspringing */
#menu_fases a.menu_item:before{
   content:'';
   position:absolute;
   left:61px;
   top:0;
   bottom:0;
   width:2px;
   background-color:var(--menu-line);
}
#menu_fases a.menu_item:hover{
   background-color:var(--menu-hover);
   color:var(--menu-text) !important;
}
#menu_fases a.menu_item.sel{
   background-color:transparent;
   color:var(--menu-accent) !important;
   font-weight:600;
}
#menu_fases a.menu_item.done:before{
   background-color:var(--menu-done);
}
#menu_fases a.menu_item.sel:before{
   background-color:var(--menu-accent);
}

/* vorm 2 (menu_ruim = false): items staan direct in fase_lijst,
   niet inspringen, wel de verticale streep van de items houden */
#menu_fases ul.fase_lijst > li[data-item_id]{
   margin-bottom:2px;
}
#menu_fases ul.fase_lijst > li > a.menu_item{
   padding:12px 14px 12px 38px;
   font-size:16px;
   line-height:1.45;
   color:var(--menu-muted);
}
#menu_fases ul.fase_lijst > li > a.menu_item:before{
   left:16px;
   top:4px;
   bottom:4px;
   width:3px;
   border-radius:2px;
}
#menu_fases ul.fase_lijst > li > a.menu_item:hover{
   background-color:var(--menu-hover);
}
#menu_fases ul.fase_lijst > li > a.menu_item.sel{
   background-color:var(--menu-active-sub);
}

/*************************************************************************************/
/* mobiel */
@media (max-width: 768px){
   #menu_fases a.menu_fase{font-size:16px;}
   #menu_fases a.menu_opdracht,
   #menu_fases span.menu_opdracht{font-size:15px;padding-left:52px;}
   #menu_fases a.menu_opdracht:before,
   #menu_fases span.menu_opdracht:before{left:18px;}
   #menu_fases a.menu_item{padding-left:74px;}
   #menu_fases a.menu_item:before{left:55px;}
   #menu_fases ul.fase_lijst > li > a.menu_item{font-size:15px;padding-left:34px;}
   #menu_fases ul.fase_lijst > li > a.menu_item:before{left:14px;}
}