/* ==========================================================================
   Sidebar product logo — the tenant dashboard's brand mark.

   The old sticky top app-bar (logo + notifications bell + theme toggle +
   account) was removed: it stranded a mostly-empty band across the top and,
   being a second sticky element, overlapped the page. Its three real controls
   moved into the sidebar instead —
     • logo        → top of the sidebar, above the tenant brand-block (below)
     • theme toggle → sidebar footer (id kept; base .qf-theme-toggle styling)
     • account     → a sidebar nav-item (data-route="account")
   and the redundant bell was dropped (the Leads nav-item carries the new-lead
   badge). With the bar gone, .app-main / #page-content return to their base
   layout (style.css + dashboard-freight-shell.css) — no overrides needed here.

   Theme-aware via design tokens only (no raw colors). Spacing snapped to the
   8px ramp {0,4,8,12,16,24,32,48,60,80,120}. Loaded LAST in app.html; the id
   selectors below win over the generic `.sidebar a` nav-row styling in both
   themes.
   ========================================================================== */

/* The QuoteFleet product mark sits at the very top of the sidebar, above the
   tenant's own name. It's a link to the homepage (new tab), NOT a nav row, so
   these id-scoped rules undo the generic `.sidebar a` nav styling (padding,
   min-height, border-left, hover fill) in both light and dark themes. */
#qf-sidebar .qf-sb-logo {
  display: flex;
  align-items: center;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0 var(--space-2) var(--space-1-5);
  border: 0;
  border-radius: 0;
  background: transparent;
}
#qf-sidebar .qf-sb-logo:hover {
  background: transparent;
}
#qf-sidebar .qf-sb-logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Two source images; CSS shows the variant that reads on the current surface
   (on-dark art in dark theme, full-color in light). */
#qf-sidebar .qf-sb-logo-img {
  height: 24px;
  width: auto;
}
#qf-sidebar .qf-sb-logo-ondark {
  display: block;
}
#qf-sidebar .qf-sb-logo-onlight {
  display: none;
}
html[data-theme="light"] #qf-sidebar .qf-sb-logo-ondark {
  display: none;
}
html[data-theme="light"] #qf-sidebar .qf-sb-logo-onlight {
  display: block;
}

/* ==========================================================================
   Flat tenant brand-block — no card, single-line name, full-width clickable
   slug. Loaded LAST, so these win over style.css / dashboard-polish.css /
   dashboard-freight-shell.css in BOTH themes (light rules are duplicated with
   the html[data-theme="light"] prefix to match/beat the shell's specificity).
   The card removal itself lives in dashboard-polish.css. Tokens only; spacing
   on the 8px ramp {0,4,8,12,16,24,...}.
   ========================================================================== */

/* Flat block: gutters match the nav rows; only a bottom hairline (set in
   dashboard-polish.css / the light shell), never a filled/rounded card. */
.sidebar .brand-block,
html[data-theme="light"] .sidebar .brand-block {
  margin: 0;
  padding: 12px 8px 16px;
}

/* Business name — ALWAYS one line. Never wraps; ellipsis if it can't fit.
   (Light keeps its avatar ::before via the shell's display:flex; we don't
   touch display here so the avatar tile stays beside the name.) */
.sidebar .brand-block .name,
html[data-theme="light"] .sidebar .brand-block .name {
  padding: 0 12px;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}

/* Hosted-URL slug → a subtle, clearly-clickable link that spans almost the
   whole sidebar (the active nav-item's highlight band). One line; ellipsis on
   genuinely longer slugs. Muted mono; hover/focus lifts to the brand accent. */
.sidebar .brand-block a.sub,
html[data-theme="light"] .sidebar .brand-block a.sub {
  display: block;
  margin: 8px 0 0;
  padding: 8px 12px;
  max-width: 100%;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
  transition: all .2s ease;
}
.sidebar .brand-block a.sub:hover,
.sidebar .brand-block a.sub:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.sidebar .brand-block a.sub:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}