/* =============================================================================
 * brand.css — VTP GO's own logo and the sidebar's look (Andrei, 2026-10-04).
 *
 * 1. The VTP GO mark — the flame and the lettering, WITHOUT the sphere/tile —
 *    replaces the white „VTP" circle wherever it appears: every sidebar and the
 *    sign-in headers (Andrei: „the sphere doesn't blend well enough. The sphere
 *    was just for avatars, site icon"). Light lettering by default (dark bars);
 *    a white bar sets `--vtp-mark` to the navy version (auth-funnel.css,
 *    inregistrare.css). The markup still says „VTP" inside `.logo-circle`; the
 *    image covers it. The mark says „VTP GO", so the written name beside it is
 *    hidden on screen (kept for screen readers) and the subtitle sits alone
 *    beside it.
 * 2. The sidebar from Andrei's reference: a deep navy gradient with one soft
 *    light in the top-right corner, each menu section in its own translucent
 *    panel, the active item lit with a cyan edge, „Suport" as a panel of its own
 *    with a chevron, the profile card and „Deconectare" as soft panels.
 *    The sections are `.menu-group` wrappers built by nav-builder.js.
 *
 * Linked on every page that shows the logo or the sidebar, after the page's
 * own sheet and type-d.css and BEFORE responsive.css, so the phone drawer
 * (responsive.css §5) still decides position, width and the slide-in.
 * Everything is scoped under `.sidebar` or `.logo-circle`.
 * ============================================================================= */

/* §1 THE LOGO ------------------------------------------------------------------ */
/* The mark is a little wider than tall (≈1.16 : 1): contained, never cropped.
   No disc, no ring, no shadow behind it. */
.logo-circle {
  background: transparent var(--vtp-mark, url("/icons/vtpgo-mark-light-256.png")) center / contain no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden;
}

/* The logo carries the name (Andrei: „if the logo says 'VTP GO' then the 'VTP GO'
   label next to it is redundant"). Hidden on screen only: it is the logo's
   accessible name, so not display:none. */
.sidebar .logo-text .name,
.topbar .app-name,
.legal-topbar .name {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* What is left beside the logo — „Verificări Tehnice Periodice" — set as its caption. */
.topbar .logo-circle { width: 46px; height: 40px; flex: none; }
.topbar .app-subtitle { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.legal-topbar .logo-circle { width: 51px; height: 44px; flex: none; }
.legal-topbar .sub { font-size: 13.5px; font-weight: 600; line-height: 1.3; }

/* §2 THE SIDEBAR --------------------------------------------------------------- */
.sidebar {
  background:
    radial-gradient(140% 55% at 108% -8%, rgba(110, 160, 255, .26), transparent 52%),
    linear-gradient(180deg, #1c3d9c 0%, #17348b 42%, #132c76 100%);
  font-family: "Nunito Sans", "Segoe UI", sans-serif;
}
.sidebar .sidebar-logo { align-items: center; gap: 14px; padding: 20px 18px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar .logo-circle { width: 60px; height: 52px; flex: 0 0 60px; box-shadow: none; }
.sidebar .logo-text .sub { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #c9d8fb; }

.sidebar .sidebar-menu { gap: 12px; padding: 16px 14px 10px; }
.sidebar .menu-group {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 8px 8px;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px;
  background: rgba(255, 255, 255, .035); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.sidebar .menu-group--solo { padding: 6px 8px; }
.sidebar .menu-label { padding: 0 10px 8px; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #8fb0ff; }
.sidebar .menu-item {
  position: relative; gap: 14px; padding: 10px 12px;
  border-left: 0; border-radius: 12px;
  color: #dde6fb; font-size: 14.5px; font-weight: 600;
}
.sidebar .menu-item .icon { color: #c4d3f7; }
.sidebar .menu-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar .menu-item.active {
  background: linear-gradient(90deg, rgba(86, 136, 255, .34), rgba(86, 136, 255, .18));
  color: #fff; box-shadow: inset 0 0 0 1px rgba(150, 185, 255, .16);
}
.sidebar .menu-item.active .icon { color: #fff; }
.sidebar .menu-item.active::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px;
  background: #3fb8ff; box-shadow: 0 0 10px rgba(63, 184, 255, .7);
}
.sidebar .menu-item:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 1px; }
.sidebar .menu-chev { flex: none; width: 16px; height: 16px; margin-left: auto; color: #a9c1f2; }

/* The profile card's panel is drawn inline by auth-guard.js (two pages do not
   load shared.css); its values match these. */
.sidebar .sidebar-bottom { display: flex; flex-direction: column; gap: 12px; padding: 14px 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sidebar .btn-logout {
  margin-top: 0; min-height: 46px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .08);
  color: #e3eafb; font-family: inherit; font-size: 14.5px; font-weight: 600;
}
.sidebar .btn-logout:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sidebar .btn-logout:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }