/* Shared chrome components.
 *
 * The portal has TWO shells: the dashboard shell (signs.css, header rendered by
 * SIGNS_UI.header) and the standalone report/book shells (reports.css /
 * campaign.css, which build their own top bar). Anything that must look and
 * behave identically in both belongs here, loaded by every page, so there is one
 * definition rather than a copy per shell.
 *
 * The theme toggle and the client's logo tile are such components: both travel
 * with signs-ui.js, so they have to be styled wherever that module is included.
 *
 * Still duplicated across the three shells and not yet extracted: .navbtn,
 * .rbtn, .print-report-btn. Extracting them needs a visual pass first, since the
 * copies have drifted slightly.
 */

.themebtn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--icon-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.themebtn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-subtle); }
.themebtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.themebtn .ic { width: 16px; height: 16px; }

/* The client's logo tile, beside the Midani mark in every top bar. It is a tile
 * of the brand green because the logo exists only in white. */
.mark-client {
  display: grid;
  place-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--brand), var(--brand-active));
}
.mark-client img { display: block; height: 18px; width: auto; }
/* The report and book top bars do not wrap. Under 720px the tile would squeeze
 * the title onto another line, and on a phone push "Exit to Reports" off the
 * screen. The dashboard header wraps and keeps it. */
@media (max-width: 720px) {
  .rpt-brand .mark-client, .camp-brand .mark-client { display: none; }
}