/* The management and availability pages deliberately share this exact component.
   Keep its names independent of generic .icon/.brand/.nav-item rules. */
html { scrollbar-gutter: stable; background: #F7FAF7; }
body { background-color: #F7FAF7; }
.sidebar.app-sidebar {
    position:fixed; inset:0 auto 0 0; width:248px; height:100dvh;
    margin:0; padding:24px 18px; display:flex; flex-direction:column; gap:24px;
    border:0; border-right:1px solid #CCE3DC; border-radius:0; box-shadow:none;
    background:linear-gradient(165deg,#E0F3F0,#EAF5EF); color:#173E3D;
    font:400 15px/1.4 Outfit,system-ui,sans-serif; letter-spacing:normal;
    overflow-y:auto; overscroll-behavior:contain; z-index:10;
    min-height:0; max-height:100dvh; view-transition-name:teacher-menu;
}
.app-sidebar *, .app-bottom-nav * { box-sizing:border-box; }
.sidebar.app-sidebar > * { flex-shrink:0; }
.app-sidebar .app-nav-brand {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    margin:0; padding:10px 0 22px; border:0; border-radius:0;
    color:#173E3D; background:none; text-decoration:none; white-space:nowrap;
    font:500 27px/1.2 Fraunces,Georgia,serif; letter-spacing:-.035em;
}
.app-sidebar .app-nav-brand:hover { color:#173E3D; text-decoration:none; background:none; }
.app-sidebar .app-nav-brand img { display:block; width:57px; height:78px; object-fit:contain; flex:none; }
.app-sidebar .app-nav-profile {
    display:flex; align-items:center; gap:12px; padding:16px 4px; margin:0;
    border:0; border-top:1px solid #C6DED5; border-bottom:1px solid #C6DED5; border-radius:0;
    text-decoration:none; color:#173E3D; background:none; font:400 15px/1.4 Outfit,system-ui,sans-serif;
}
.app-sidebar .app-nav-profile:hover { background:#D4EBE580; text-decoration:none; }
.app-sidebar .app-nav-avatar { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 40px; border-radius:50%; overflow:hidden; background:#E0F3F0; color:#146C68; font:600 18px/1.4 Outfit,system-ui,sans-serif; }
.app-sidebar .app-nav-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.app-sidebar .app-nav-identity { min-width:0; display:block; }
.app-sidebar .app-nav-identity b { display:block; font:600 14px/1.4 Outfit,system-ui,sans-serif; }
.app-sidebar .app-nav-identity small { display:block; margin-top:3px; color:#526C63; font:400 12px/1.4 Outfit,system-ui,sans-serif; }
.app-sidebar .app-nav-links { display:flex; flex-direction:column; gap:8px; padding:0; margin:0; overflow:visible; }
.app-sidebar .app-nav-link {
    display:flex; align-items:center; justify-content:flex-start; gap:10px;
    width:100%; min-height:48px; margin:0; padding:12px; border:0; border-radius:10px;
    background:transparent; color:#173E3D; text-decoration:none; text-align:left;
    font:400 15px/1.4 Outfit,system-ui,sans-serif; letter-spacing:normal; box-shadow:none;
    cursor:pointer; transition:background-color .15s;
}
.app-sidebar .app-nav-link:hover { background:#D4EBE5; text-decoration:none; }
.app-sidebar .app-nav-link.active { background:#C5E5DF; color:#105653; font-weight:600; }
.app-sidebar .app-nav-icon, .app-bottom-nav .app-nav-icon { display:inline-flex; width:24px; height:24px; flex:0 0 24px; padding:0; margin:0; border:0; border-radius:0; color:#146C68; }
.app-sidebar .app-nav-icon svg, .app-bottom-nav .app-nav-icon svg { width:100%; height:100%; }
.app-sidebar .app-nav-mask, .app-bottom-nav .app-nav-mask { background:currentColor; mask:var(--nav-icon) center/contain no-repeat; }
.app-sidebar .app-nav-footer { display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:20px; border-top:1px solid #C6DED5; }
.app-sidebar .app-nav-footer .app-nav-link { font-size:14px; }
.app-sidebar .app-nav-footer .app-nav-organisation { background:#E0F3F0; font-weight:600; }
.app-sidebar .app-nav-footer .app-nav-organisation:hover { background:#D4EBE5; }
.app-sidebar .app-nav-footer .app-nav-organisation.active { background:#C5E5DF; }
.app-sidebar .app-nav-footer .app-nav-logout { font-size:15px; }
/* Referral entry: highlighted just above Settings, peach like the brand's warm accents. */
.app-sidebar .app-nav-footer .app-nav-referral { align-items:center; background:linear-gradient(135deg,#FBE9DC,#F7E5D8 55%,#E0F3F0); border:1px solid #F0D2BD; color:#5C3A22; }
.app-sidebar .app-nav-footer .app-nav-referral:hover { background:linear-gradient(135deg,#F8DFCC,#F3DCCB 55%,#D4EBE5); }
.app-sidebar .app-nav-footer .app-nav-referral.active { border-color:#A25C32; background:#F7E5D8; color:#5C3A22; }
.app-sidebar .app-nav-referral .app-nav-icon { color:#A25C32; }
.app-sidebar .app-nav-referral-copy { display:flex; flex-direction:column; min-width:0; }
.app-sidebar .app-nav-referral-copy b { font:600 14px/1.3 Outfit,system-ui,sans-serif; }
.app-sidebar .app-nav-referral-copy small { font:400 12px/1.3 Outfit,system-ui,sans-serif; color:#7A4A2B; }
.app-sidebar .app-nav-legal { padding:10px 12px; color:#526C63; font:400 11px/1.5 Outfit,system-ui,sans-serif; text-decoration:none; }
.app-sidebar .app-nav-legal:hover { text-decoration:underline; }
.app-sidebar .app-nav-local { color:#526C63; font:400 11px/1.4 Outfit,system-ui,sans-serif; }
.app-sidebar [hidden] { display:none!important; }
.app-sidebar a:focus-visible, .app-sidebar button:focus-visible { outline:3px solid #146C68; outline-offset:2px; }
.app-bottom-nav { display:none; }
.app-page-loading { padding-top:10px; display:grid; gap:18px; max-width:1050px; }
.app-page-loading > span { height:22px; width:190px; border-radius:8px; background:#E8F0ED; }
.app-page-loading > span:nth-child(2) { height:12px; width:280px; max-width:80%; }
.app-page-loading > div { margin-top:20px; min-height:320px; border:1px solid #DCE9E4; border-radius:20px; background:#FFFFFFB3; }
@media (min-width:761px) and (max-width:1100px) {
    .sidebar.app-sidebar { width:216px; padding:20px 14px; }
    .app-sidebar .app-nav-brand { font-size:24px; }
}
@media (max-width:760px) {
    .sidebar.app-sidebar { display:none; }
    .bottom-nav.app-bottom-nav { position:fixed; inset:auto 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid #C6DED5; background:#E0F3F0; z-index:12; view-transition-name:teacher-bottom-menu; }
    .app-bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 4px; color:#173E3D; text-decoration:none; border-radius:14px; font:400 12px/1.4 Outfit,system-ui,sans-serif; }
    .app-bottom-nav a.active { background:#C5E5DF; color:#105653; }
}
@view-transition { navigation:auto; }
::view-transition-group(root) { animation-duration:.14s; }
::view-transition-group(teacher-menu), ::view-transition-group(teacher-bottom-menu) { animation:none; }
::view-transition-old(teacher-menu), ::view-transition-old(teacher-bottom-menu) { display:none; }
::view-transition-new(teacher-menu), ::view-transition-new(teacher-bottom-menu) { animation:none; }
@keyframes app-page-hold { from,to { opacity:1; } }
html[data-page-arriving]::view-transition-old(root) { animation:app-page-hold 3s linear both; z-index:1; }
html[data-page-arriving]::view-transition-new(root) { animation:none; opacity:0; }
@media (prefers-reduced-motion:reduce) {
    ::view-transition-group(*) { animation-duration:0s; }
    .app-sidebar .app-nav-link { transition:none; }
}

@media(max-width:760px){
 body:has(.integrated-organisation) .bottom-nav.app-bottom-nav{height:calc(88px + env(safe-area-inset-bottom));}
}