/* TeachTally · side menu (desktop and tablet). Phones keep the top bar. */
.tgh-side-top,.tgh-side .tgh-ni{display:none}
@media (min-width:821px){
  :root{--tgh-rail:68px;--tgh-open:232px}
  .panel.ready,.demo-shell{grid-template-rows:1fr!important;grid-template-columns:var(--tgh-rail) minmax(0,1fr)!important}
  html[data-tgh-side="open"] .panel.ready,html[data-tgh-side="open"] .demo-shell{grid-template-columns:var(--tgh-open) minmax(0,1fr)!important}
  .panel>:not(.tgh-side),.demo-shell>:not(.tgh-side){grid-column:2;grid-row:1;min-width:0}
  .tgh-side{grid-column:1;grid-row:1;position:relative;z-index:70;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:4px!important;
    width:var(--tgh-rail);height:100%;padding:14px 10px!important;overflow:hidden;
    background:#141d34!important;border:0!important;border-right:1px solid var(--tgh-line)!important;box-shadow:none!important;backdrop-filter:none!important;
    transition:width .2s ease,box-shadow .2s ease}
  html[data-tgh-side="open"] .tgh-side{width:var(--tgh-open)}
  html[data-tgh-side="rail"] .tgh-side.tgh-hover{width:var(--tgh-open);box-shadow:18px 0 40px rgba(0,0,0,.35)!important}
  /* top: toggle at the top left, logo beside it */
  .tgh-side-top{display:flex;align-items:center;gap:8px;min-height:44px;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--tgh-line)}
  .tgh-side-toggle{flex:0 0 auto;display:grid!important;place-items:center;width:28px!important;height:28px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--tgh-mute)!important;cursor:pointer}
  .tgh-side-toggle:hover,.tgh-side-toggle[aria-pressed="true"]{color:var(--tgh-ink)!important;background:rgba(255,255,255,.06)!important}
  .tgh-side-toggle .tgh-ni{display:block;width:18px;height:18px}
  .tgh-side-logo{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none}
  .tgh-side-mark{flex:0 0 auto;width:20px;height:20px;background:url("/theme/logo-mark.svg") center/contain no-repeat}
  .tgh-side-word{flex:0 0 auto;width:112px;height:26px;background:url("/theme/teachtally-logo-on-dark.svg") left center/contain no-repeat}
  html[data-tgh-side="rail"] .tgh-side:not(.tgh-hover) .tgh-side-top{flex-direction:column;gap:12px}
  html[data-tgh-side="rail"] .tgh-side:not(.tgh-hover) .tgh-side-word{display:none}
  html[data-tgh-side="open"] .tgh-side .tgh-side-mark,.tgh-side.tgh-hover .tgh-side-mark{display:none}
  /* the old brand text is replaced by the logo */
  .tgh-side>.bar-left>.brand,.tgh-side>.brand{display:none!important}
  .tgh-side>.bar-left{display:contents}
  /* items */
  .tgh-side nav,.tgh-side .demo-nav,.tgh-side .actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;margin:0!important;width:auto!important;overflow:visible!important}
  /* main links at the top; account and demo tools at the bottom, after a thin line */
  .tgh-side nav,.tgh-side .demo-nav{flex:1 1 auto!important;min-height:0}
  .tgh-side #downloadBackup,.tgh-side .actions{position:relative;margin-top:auto!important;padding-top:12px!important}
  .tgh-side .actions{height:auto}
  .tgh-side #downloadBackup{height:52px!important}
  .tgh-side #downloadBackup::before,.tgh-side .actions::before{content:"";position:absolute;left:4px;right:4px;top:0;border-top:1px solid var(--tgh-line)}
  .tgh-side .network{order:99;border:0!important;background:transparent!important}
  .tgh-side .tgh-side-item{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;min-height:40px!important;height:40px;padding:0 12px!important;
    border:0!important;border-radius:12px!important;background:transparent!important;color:var(--tgh-mute)!important;font-size:14px!important;font-weight:500!important;line-height:1!important;text-align:left;white-space:nowrap;text-decoration:none!important;box-shadow:none!important;cursor:pointer}
  .tgh-side .tgh-side-item:hover{background:rgba(255,255,255,.05)!important;color:var(--tgh-ink)!important}
  .tgh-side .tgh-side-item[aria-current="page"]{background:var(--tgh-ink)!important;color:#121a2e!important}
  .tgh-side .tgh-ni{display:block;flex:0 0 auto;width:20px;height:20px}
  .tgh-side .tgh-theme-btn svg{width:20px;height:20px}
  .tgh-side .tgh-nl,.tgh-side .tgh-theme-btn span{overflow:hidden;text-overflow:ellipsis;transition:opacity .15s ease}
  html[data-tgh-side="rail"] .tgh-side:not(.tgh-hover) .tgh-nl,html[data-tgh-side="rail"] .tgh-side:not(.tgh-hover) .tgh-theme-btn span{opacity:0;width:0}
  .tgh-side nav,.tgh-side .demo-nav{justify-content:flex-start!important}
  html body .tgh-side .actions a.primary{background:transparent!important;border:0!important;color:#4fe3b0!important}
  html body .tgh-side .actions a.primary:hover{background:rgba(79,227,176,.1)!important}
  /* connection status: a dot in the rail, text when open */
  .tgh-side .network{display:flex!important;align-items:center;gap:10px;min-height:28px;padding:0 12px;color:var(--tgh-mute)!important;font-size:12px!important;white-space:nowrap}
  .tgh-side .network::before{content:"";flex:0 0 auto;width:8px;height:8px;margin:0 6px;border-radius:50%;background:#4fe3b0}
  .tgh-side .network[data-offline="true"]::before{background:#ffc75a}
  html[data-tgh-side="rail"] .tgh-side:not(.tgh-hover) .network{font-size:0!important}
  .tgh-side [hidden]{display:none!important}
}

/* each menu item has its own colour: the icon always, the background on hover and when active */
@media (min-width:821px){
  .tgh-side .tgh-side-item{--c:#9ba8c8}
  .tgh-side [data-tgh-k="grades"]{--c:#6cb8ff}
  .tgh-side [data-tgh-k="schedule"]{--c:#4fe3b0}
  .tgh-side [data-tgh-k="timer"]{--c:#ffc75a}
  .tgh-side [data-tgh-k="access"]{--c:#b8a2ff}
  .tgh-side [data-tgh-k="student"]{--c:#ff9ed1}
  .tgh-side [data-tgh-k="owner"]{--c:#5ee0f0}
  .tgh-side [data-tgh-k="backup"]{--c:#8fb3ff}
  .tgh-side [data-tgh-k="install"]{--c:#5ee0f0}
  .tgh-side [data-tgh-k="name"]{--c:#ffb27a}
  .tgh-side [data-tgh-k="signout"]{--c:#ff8a7a}
  .tgh-side [data-tgh-k="tour"]{--c:#b8a2ff}
  .tgh-side [data-tgh-k="reset"]{--c:#ffc75a}
  .tgh-side [data-tgh-k="signin"]{--c:#4fe3b0}
  .tgh-side .tgh-theme-btn{--c:#ffd36e}
  .tgh-side .tgh-side-item .tgh-ni,.tgh-side .tgh-theme-btn svg{color:var(--c)}
  .tgh-side .tgh-side-item:hover{background:color-mix(in srgb,var(--c) 13%,transparent)!important;color:var(--tgh-ink)!important}
  .tgh-side .tgh-side-item[aria-current="page"]{background:color-mix(in srgb,var(--c) 18%,transparent)!important;color:#fff!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)!important}
  html body .tgh-side .actions a.primary{color:var(--tgh-soft)!important}
  html body .tgh-side .actions a.primary:hover{background:color-mix(in srgb,var(--c) 13%,transparent)!important}
}