/* ts-nav.css — "tansinh nav-v1" (9 Oct 2026)
   The left menu for the pages that are not the Schedule page: index.html (Sessions)
   and breakoutstatus.html. It copies the look of the Schedule page's menu
   (availability-grid.css, tansinh tg-v5, "#sidebarNav.tg-sbx"), so moving between the
   three pages feels like one app. If you restyle that menu, restyle this one too.
     - signed in, screen 1100px or wider: the menu stays open and the page moves over
     - otherwise: a drawer behind the menu button (#sidebarToggle), exactly as before
   Every rule sits under #sidebarNav.ts-nav, #sidebarToggle or #sidebarOverlay, so it
   wins over the older .sidebar-* rules inside breakoutstatus.html's own <style>. */

#sidebarNav.ts-nav {
  position: fixed; top: 0; left: 0; z-index: 2000;
  width: 264px; height: 100vh; height: 100dvh; padding: 0; margin: 0;
  display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #334155 transparent;
  background: linear-gradient(180deg, #0f172a 0%, #111b2e 55%, #0f172a 100%);
  border-right: 1px solid rgba(148, 163, 184, 0.12); color: #cbd5e1;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  transform: translateX(-100%); transition: transform 0.25s ease;
}
#sidebarNav.ts-nav.open { transform: none; box-shadow: 0 0 40px rgba(15, 23, 42, 0.35); }

#sidebarNav.ts-nav .sidebar-brand {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  color: #f8fafc; font-size: 1rem; font-weight: 800; letter-spacing: 1.5px;
}
#sidebarNav.ts-nav .sidebar-brand::before {
  content: "\f274"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.9rem; letter-spacing: 0;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #6366f1); box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

#sidebarNav.ts-nav .sidebar-link {
  display: flex; align-items: center; gap: 10px; margin: 1px 10px; padding: 8px 12px; border-radius: 10px;
  color: #94a3b8; text-decoration: none; font-size: 0.82rem; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
#sidebarNav.ts-nav .sidebar-brand + .sidebar-link { margin-top: 10px; }
#sidebarNav.ts-nav .sidebar-link i { width: 18px; text-align: center; font-size: 0.85rem; }
#sidebarNav.ts-nav .sidebar-link:hover { background: rgba(148, 163, 184, 0.1); color: #e2e8f0; }
#sidebarNav.ts-nav .sidebar-link.active { background: rgba(96, 165, 250, 0.14); color: #93c5fd; font-weight: 600; }
#sidebarNav.ts-nav .sidebar-link:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }

#sidebarNav.ts-nav .ts-nav-gap { flex: 1 1 auto; }
#sidebarNav.ts-nav #sidebarLogout {
  margin: 6px 10px 12px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0 0 10px 10px; color: #f87171;
}
#sidebarNav.ts-nav #sidebarLogout:hover { background: rgba(248, 113, 113, 0.1); color: #fca5a5; }

/* the menu button and the dim layer behind an open drawer */
#sidebarToggle {
  position: fixed; top: 10px; left: 10px; z-index: 2001; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: #1e293b; color: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: 0.85rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
#sidebarToggle:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
#sidebarOverlay { position: fixed; inset: 0; z-index: 1999; display: none; background: rgba(15, 23, 42, 0.35); }
#sidebarOverlay.open { display: block; }

/* drawer mode: keep the logo clear of the menu button */
@media (max-width: 1099px) {
  #sidebarNav.ts-nav .sidebar-brand { padding-left: 56px; }
}

/* signed in on a wide screen: the menu is a real sidebar.
   #appMain is the Sessions page, #avApp.visible the Breakout Status page. */
@media (min-width: 1100px) {
  body:has(#appMain:not(.hidden)),
  body:has(#avApp.visible) { padding-left: 264px; }
  body:has(#appMain:not(.hidden)) #sidebarNav.ts-nav,
  body:has(#avApp.visible) #sidebarNav.ts-nav { transform: none; box-shadow: none; }
  body:has(#appMain:not(.hidden)) #sidebarToggle,
  body:has(#appMain:not(.hidden)) #sidebarOverlay,
  body:has(#avApp.visible) #sidebarToggle,
  body:has(#avApp.visible) #sidebarOverlay { display: none; }
}

/* === tansinh nav-v2 BEGIN (9 Oct 2026): Điều phối and Giáo viên, drawn by ts-nav.js === */
/* Copied from the Schedule sidebar (availability-grid.css, tansinh tg-v4 + tg-v5) and
   scoped to this menu, so it looks the same. If the Schedule sidebar changes, change this. */
#sidebarNav.ts-nav .tg-sb-label {
  display: flex; align-items: center; gap: 8px; padding: 16px 20px 6px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #64748b;
}
#sidebarNav.ts-nav .ts-sb-busy { font-size: 0.62rem; letter-spacing: 0; animation: ts-nav-spin 1s linear infinite; }
@keyframes ts-nav-spin { to { transform: rotate(360deg); } }

/* Điều phối */
#sidebarNav.ts-nav .tg-sbp { flex: none; display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
#sidebarNav.ts-nav .tg-sbp-item {
  position: relative; display: flex; align-items: center; gap: 10px; margin: 0 10px; padding: 7px 10px;
  border-radius: 12px; color: #e2e8f0; text-decoration: none; transition: background 0.15s;
}
#sidebarNav.ts-nav .tg-sbp-item:hover { background: rgba(148, 163, 184, 0.1); }
#sidebarNav.ts-nav .tg-sbp-item:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }
#sidebarNav.ts-nav .tg-sbp-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 0.85rem; }
#sidebarNav.ts-nav .tg-sbp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#sidebarNav.ts-nav .tg-sbp-title { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebarNav.ts-nav .tg-sbp-sub { font-size: 0.68rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebarNav.ts-nav .tg-sbp-bar { height: 3px; margin-top: 2px; border-radius: 3px; background: rgba(148, 163, 184, 0.18); overflow: hidden; }
#sidebarNav.ts-nav .tg-sbp-bar i { display: block; height: 100%; border-radius: 3px; }
#sidebarNav.ts-nav .tg-sbp-n {
  flex: none; display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
#sidebarNav.ts-nav .tg-sbp-ok { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.6rem; background: rgba(52, 211, 153, 0.18); color: #6ee7b7; }
#sidebarNav.ts-nav .tg-sbp-item.tone-r .tg-sbp-ic { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
#sidebarNav.ts-nav .tg-sbp-item.tone-r .tg-sbp-n { background: #ef4444; color: #fff; }
#sidebarNav.ts-nav .tg-sbp-item.tone-w .tg-sbp-ic { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }
#sidebarNav.ts-nav .tg-sbp-item.tone-w .tg-sbp-n { background: #f59e0b; color: #1f2937; }
#sidebarNav.ts-nav .tg-sbp-item.tone-w .tg-sbp-bar i { background: #f59e0b; }
#sidebarNav.ts-nav .tg-sbp-item.tone-ok .tg-sbp-ic { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; }
#sidebarNav.ts-nav .tg-sbp-item.tone-ok .tg-sbp-bar i { background: #34d399; }
#sidebarNav.ts-nav .tg-sbp-item.tone-plain .tg-sbp-ic { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
#sidebarNav.ts-nav .tg-sbp-item.tone-plain .tg-sbp-n { background: #334155; color: #e2e8f0; }
#sidebarNav.ts-nav .tg-sbp-item.is-empty { color: #94a3b8; }
#sidebarNav.ts-nav .tg-sbp-item.is-empty .tg-sbp-ic { background: rgba(148, 163, 184, 0.08); color: #64748b; }
#sidebarNav.ts-nav .tg-sbp-item.is-empty .tg-sbp-sub { color: #64748b; }

/* Giáo viên */
#sidebarNav.ts-nav .tg-sb {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  margin-top: 6px; padding: 0 0 10px; border-top: 1px solid rgba(148, 163, 184, 0.12);
  scrollbar-width: thin; scrollbar-color: #334155 transparent;
}
#sidebarNav.ts-nav .tg-sb[hidden] { display: none; }
#sidebarNav.ts-nav .tg-sb::-webkit-scrollbar { width: 8px; }
#sidebarNav.ts-nav .tg-sb::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; border: 2px solid #0f172a; }
#sidebarNav.ts-nav .tg-sb::-webkit-scrollbar-track { background: transparent; }
#sidebarNav.ts-nav .tg-sb-head {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 20px); margin: 6px 10px 2px; padding: 6px 10px;
  border: 0; border-radius: 8px; background: transparent; color: #94a3b8;
  font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer;
}
#sidebarNav.ts-nav .tg-sb-head:hover { background: rgba(148, 163, 184, 0.08); color: #e2e8f0; }
#sidebarNav.ts-nav .tg-sb-head:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }
#sidebarNav.ts-nav .tg-sb-head span:first-of-type { flex: 1; text-align: left; }
#sidebarNav.ts-nav .tg-sb-head > i { width: 12px; font-size: 0.6rem; transition: transform 0.15s; }
#sidebarNav.ts-nav .tg-sb-head.shut > i { transform: rotate(-90deg); }
#sidebarNav.ts-nav .tg-sb-count { padding: 0 7px; border-radius: 999px; background: rgba(148, 163, 184, 0.16); color: #cbd5e1; font-size: 0.68rem; font-weight: 700; }
#sidebarNav.ts-nav .tg-sb-list { display: flex; flex-direction: column; }
#sidebarNav.ts-nav .tg-sb-row {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 1px 10px; padding: 6px 10px;
  border-radius: 10px; color: #e2e8f0; font-size: 0.8rem; text-align: left; text-decoration: none; cursor: pointer;
}
#sidebarNav.ts-nav .tg-sb-row:hover { background: rgba(148, 163, 184, 0.1); color: #fff; }
#sidebarNav.ts-nav .tg-sb-row:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }
#sidebarNav.ts-nav .tg-sb-static { cursor: default; }
#sidebarNav.ts-nav .tg-sb-static:hover { background: transparent; color: #e2e8f0; }
#sidebarNav.ts-nav .tg-sb-row.tg-sb-compact { padding: 4px 10px; }
#sidebarNav.ts-nav .tg-sb-row.is-off .tg-sb-name { color: #94a3b8; }
#sidebarNav.ts-nav .tg-sb-all { margin: 2px 10px 4px; }
#sidebarNav.ts-nav .tg-sb-av {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3px;
}
#sidebarNav.ts-nav .tg-sb-compact .tg-sb-av { width: 24px; height: 24px; font-size: 0.56rem; }
#sidebarNav.ts-nav .tg-sb-av-all { background: rgba(96, 165, 250, 0.18); color: #93c5fd; font-size: 0.75rem; border-radius: 9px; }
#sidebarNav.ts-nav .tg-sb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#sidebarNav.ts-nav .tg-sb-name { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebarNav.ts-nav .tg-sb-sub { font-size: 0.67rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#sidebarNav.ts-nav .tg-sb-dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
#sidebarNav.ts-nav .tg-tag { display: inline-block; flex: none; padding: 0 6px; border-radius: 999px; font-size: 0.62rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
#sidebarNav.ts-nav .tg-tag-off { background: #fef3c7; color: #92400e; }
#sidebarNav.ts-nav .tg-sb-search { position: relative; padding: 4px 10px 6px; }
#sidebarNav.ts-nav .tg-sb-search i { position: absolute; left: 22px; top: 50%; transform: translateY(-60%); font-size: 0.7rem; color: #64748b; pointer-events: none; }
#sidebarNav.ts-nav .tg-sb-search input {
  width: 100%; height: 32px; padding: 0 8px 0 30px; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 10px;
  background: rgba(15, 23, 42, 0.7); color: #e2e8f0; font: inherit; font-size: 0.78rem; outline: none;
}
#sidebarNav.ts-nav .tg-sb-search input:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18); }
#sidebarNav.ts-nav .tg-sb-empty { padding: 6px 20px; font-size: 0.74rem; font-style: italic; color: #64748b; }
#sidebarNav.ts-nav .tg-sb-empty a { color: #93c5fd; }

@media (prefers-reduced-motion: reduce) {
  #sidebarNav.ts-nav .ts-sb-busy { animation: none; }
  #sidebarNav.ts-nav .tg-sbp-item, #sidebarNav.ts-nav .tg-sb-head > i { transition: none; }
}
/* === tansinh nav-v2 END === */

@media (prefers-reduced-motion: reduce) {
  #sidebarNav.ts-nav, #sidebarNav.ts-nav .sidebar-link { transition: none; }
}