/*
 * MedM brand furniture: the topbar lockup shared with backup_monitoring and
 * customer_stats. The two Rails apps take these values from their tokens.css;
 * this app has no theme system, so the light values are declared here directly
 * and there is no dark variant -- the page itself is Bootstrap 4, light only.
 */

:root {
  --mark-1: #cd2031;
  --mark-2: #bc232c;
  --mark-3: #ac1f26;
  --mark-4: #811e20;

  --topbar-bg: #ffffff;
  --topbar-text: #1c2024;
  --topbar-faint: #8b95a3;
  --topbar-border: #dcdfe4;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 8px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--topbar-text);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.topbar__brand:hover,
.topbar__brand:focus {
  color: var(--topbar-text);
  text-decoration: none;
}

.brand-mark { display: block; flex: none; height: 21px; width: 42px; }
.brand-sep { color: var(--topbar-faint); font-weight: 400; }

.topbar__spacer { flex: 1; }

.topbar__user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--topbar-faint);
}

/* Narrow screens keep the mark and the app name; the wordmark is the redundant part. */
@media (max-width: 575.98px) {
  .brand-word, .brand-sep { display: none; }
}