/*
 * The signed-in app's brand block (sidebar header and mobile top bar): the
 * Grandstream logo, "Internal Training Center", a small "Employee portal" label
 * and the version badge. Plain CSS, loaded by the layout. The logo is the same
 * file the auth pages use; it is made white with a filter wherever the bar behind
 * it is dark (the navy sidebar, any sidebar in dark mode, and the mobile top bar).
 */
.gitc-brand {
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px 24px 14px; border-bottom: 1px solid var(--sidebar-border);
}
/*
 * Sizing the logo: the PNG (800 x 179) has transparent margins, so the mark itself
 * (rows 41 to 144, 104 rows) is only 58% of the image height. A plain "height: 26px"
 * showed a mark about 15px tall. So the size is set for the MARK, in --mark, and the
 * image box is made taller to match (179 / 104 of --mark) with the empty top (41 / 104)
 * and bottom (34 / 104) pulled back in by negative margins, so the layout is the
 * mark's height. Sidebar: 22px. The mobile top bar sets --mark: 20px on the image.
 */
.gitc-brand-logo {
  --mark: 22px;
  display: block; flex: none; align-self: flex-start;
  width: auto; max-width: none; max-height: none;
  height: calc(var(--mark) * 179 / 104);
  margin: calc(var(--mark) * -41 / 104) 0 calc(var(--mark) * -34 / 104);
}
.sidebar-indigo .gitc-brand-logo, .dark .gitc-brand-logo, .gitc-brand-logo.on-dark { filter: brightness(0) invert(1); }
.gitc-brand-name { font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--sidebar-text); }
.gitc-brand-meta { display: flex; align-items: center; gap: 8px; }