/* The floating navigation capsule of the teacher and administrator pages: the brand
   on the left, the menu in the middle, the icon buttons and the sign-out button on
   the right. It takes its colours from the page's own theme tokens (and from the
   banner colour a teacher picked in their settings), so it follows light/dark and
   the chosen accent. Loaded after the other stylesheets. */
.fnav-wrap{position:sticky;top:0;z-index:40;padding:24px 16px 0;pointer-events:none;}
.fnav{pointer-events:auto;position:relative;max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 24px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);box-shadow:0 8px 28px rgba(15,23,42,.10);color:var(--ink);}
.fnav .brand{flex:0 1 auto;min-width:0;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px;font:700 15px/1.2 'Prompt','Sarabun',sans-serif;color:var(--ink);}
.fnav .brand-who{display:none;}
.fnav .brand-sub{font:500 11px/1 'Prompt','Sarabun',sans-serif;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:3px 8px;}

/* the menu */
.fnav .admin-tabs-wrap{flex:1 1 auto;min-width:0;display:flex;justify-content:center;position:static;}
.fnav .admin-tabs-wrap::after{display:none;}
.fnav .admin-tabs{display:flex;gap:2px;align-items:center;flex-wrap:nowrap !important;overflow:visible !important;position:relative !important;top:auto !important;padding:0 !important;background:none !important;border:0 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;scroll-snap-type:none;}
.fnav > .admin-tabs{flex:1 1 auto;min-width:0;justify-content:center;}
.fnav .tab-indicator{display:none;}
.fnav .admin-tab-btn,.fnav .admin-group-btn{flex:0 0 auto;appearance:none;border:0 !important;border-radius:999px !important;padding:8px 10px !important;min-height:0 !important;height:auto !important;background:none !important;color:var(--sub) !important;font:500 13px/1.2 'Prompt','Sarabun',sans-serif !important;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s;}
.fnav .admin-tab-btn:hover,.fnav .admin-group-btn:hover{background:color-mix(in srgb,var(--ink) 7%,transparent) !important;color:var(--ink) !important;}
.fnav .admin-tab-btn.active,.fnav .admin-group-btn.active{background:color-mix(in srgb,var(--blue) 13%,transparent) !important;color:var(--blue) !important;}
.fnav .admin-tab-btn:focus-visible,.fnav .admin-group-btn:focus-visible,.fnav-icon:focus-visible,.fnav-cta:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* the right-hand side */
.fnav-actions{flex:0 0 auto;display:flex;align-items:center;gap:2px;}.fnav-actions .fnav-logout{margin-left:8px;}
.fnav-icon{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);display:grid;place-items:center;font-size:0;line-height:1;cursor:pointer;transition:background-color .15s;}
.fnav-icon:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);}
.fnav-icon::before{font-size:16px;line-height:1;}
#langToggleBtn::before{content:'🌐';}
#themeToggleBtn::before{content:'🌙';}
html[data-theme="dark"] #themeToggleBtn::before{content:'☀️';}
#pageRefreshBtn::before{content:'↻';font-size:19px;}
.fnav-menu{display:none;}
.fnav-menu::before{content:'☰';font-size:17px;}
.fnav-cta{height:36px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:var(--surface);font:600 13px/1 'Prompt','Sarabun',sans-serif;white-space:nowrap;cursor:pointer;transition:opacity .15s;}
.fnav-cta:hover{opacity:.86;}
.fnav-logout{position:relative;}
.fnav-logout .floating-confirm{left:auto;right:0;color:var(--ink);}
.fnav-logout .floating-confirm::before{left:auto;right:30px;}

/* the colour banner a teacher can choose in their settings */
html[data-banner="color"] .fnav{background:var(--banner);border-color:transparent;color:#fff;}
html[data-banner="color"] .fnav .brand{color:#fff;}
html[data-banner="color"] .fnav .brand-sub{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.35);}
html[data-banner="color"] .fnav .admin-tab-btn,html[data-banner="color"] .fnav .admin-group-btn{color:rgba(255,255,255,.82) !important;}
html[data-banner="color"] .fnav .admin-tab-btn:hover,html[data-banner="color"] .fnav .admin-group-btn:hover{background:rgba(255,255,255,.14) !important;color:#fff !important;}
html[data-banner="color"] .fnav .admin-tab-btn.active,html[data-banner="color"] .fnav .admin-group-btn.active{background:rgba(255,255,255,.22) !important;color:#fff !important;}
html[data-banner="color"] .fnav-icon{color:#fff;}
html[data-banner="color"] .fnav-icon:hover{background:rgba(255,255,255,.16);}
html[data-banner="color"] .fnav-cta{background:#fff;color:var(--banner);}

/* the sub-menu row of the administrator page, under the capsule */
.admin-tabs-wrap > .admin-subtabs{padding-top:12px;}

/* narrower than a desktop: the menu folds into a panel under the capsule; the icons and the sign-out button stay */
@media (max-width:1180px){
  .fnav{padding-left:20px;}
  .fnav-menu{display:grid;}
  .fnav #fnavLinks{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:5;padding:10px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 14px 36px rgba(15,23,42,.18);max-height:calc(100vh - 110px);overflow:auto;}
  .fnav.is-open #fnavLinks{display:block;}
  .fnav.is-open #fnavLinks .admin-tabs,.fnav.is-open > .admin-tabs#fnavLinks{display:flex;flex-direction:column;align-items:stretch;gap:2px;}
  .fnav #fnavLinks .admin-tab-btn,.fnav #fnavLinks .admin-group-btn{text-align:left;padding:12px 16px !important;font-size:14px !important;}
  .fnav > .admin-tabs#fnavLinks{position:absolute !important;top:calc(100% + 10px) !important;left:0;right:0;z-index:5;padding:10px !important;border:1px solid var(--line) !important;border-radius:22px;background:var(--surface) !important;box-shadow:0 14px 36px rgba(15,23,42,.18);max-height:calc(100vh - 110px);overflow:auto !important;}
  html[data-banner="color"] .fnav > .admin-tabs#fnavLinks{background:var(--banner) !important;border-color:rgba(255,255,255,.25) !important;}
  .fnav #fnavLinks .hidden{display:none !important;}
  html[data-banner="color"] .fnav #fnavLinks{background:var(--banner);border-color:rgba(255,255,255,.25);}
}
@media (max-width:560px){
  .fnav-wrap{padding:12px 10px 0;}
  .fnav{gap:8px;padding:9px 10px 9px 16px;}
  .fnav .brand{flex:1 1 auto;font-size:14px;}
  .fnav .brand-sub,.fnav .brand-face{display:none;}
  .fnav-actions{gap:0;}
  .fnav-icon{width:32px;height:32px;}
  .fnav-cta{height:34px;padding:0 13px;font-size:12.5px;}
}
@media (prefers-reduced-motion:reduce){.fnav *{transition:none !important;}}

/* "Sign out?" asks in the middle of the screen, over a dimmed page */
.fnav-confirm-backdrop{position:fixed;inset:0;z-index:9400;background:rgba(15,23,42,.5);}
#logoutConfirmPopover,#adminLogoutConfirmPopover{position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);z-index:9500;width:min(340px,calc(100vw - 32px));padding:26px 24px 22px;border-radius:20px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35);}
#logoutConfirmPopover::before,#adminLogoutConfirmPopover::before{display:none;}
#logoutConfirmPopover p,#adminLogoutConfirmPopover p{margin:0 0 18px;font:600 17px/1.4 'Prompt','Sarabun',sans-serif;}
#logoutConfirmPopover p::before,#adminLogoutConfirmPopover p::before{content:'👋';display:block;font-size:34px;line-height:1.2;margin-bottom:8px;}
#logoutConfirmPopover .floating-confirm-actions,#adminLogoutConfirmPopover .floating-confirm-actions{justify-content:center;gap:10px;}
#logoutConfirmPopover .btn,#adminLogoutConfirmPopover .btn{min-width:108px;padding:10px 16px;}