/* Original supplied logo: 533 × 434 transparent PNG. Never crop or recolor it. */
:root {
  --logo-login-width: 240px;
  --logo-sidebar-width: 176px;
  --logo-employee-width: 82px;
}

.brand-logo {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
  line-height: 0;
}

.brand-logo__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 533 / 434;
  object-fit: contain;
}

/* The source has dark artwork; a warm white surface keeps it legible on green. */
.brand-logo--login {
  width: var(--logo-login-width);
  padding: 10px 14px;
  background: var(--surface, #fffefa);
  border: 1px solid var(--line, #dedccf);
  border-radius: var(--radius, 8px);
}

.brand-logo--sidebar {
  width: var(--logo-sidebar-width);
}

.brand-logo--employee {
  width: var(--logo-employee-width);
}

.employee-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.employee-brand .employee-title {
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
}

.employee-brand .employee-title span {
  display: block;
  margin: 2px 0 0;
  font-size: 12px;
}

.employee-header .account > .small {
  max-width: 5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  :root { --logo-sidebar-width: 156px; }
}

@media (max-width: 800px) {
  :root { --logo-login-width: 156px; --logo-sidebar-width: 52px; }
}

@media (max-width: 560px) {
  :root { --logo-sidebar-width: 84px; }
  .employee-brand { gap: 8px; }
  .employee-brand .employee-title { font-size: 14px; }
  .employee-brand .employee-title span { display: none; }
}

@media (max-width: 360px) {
  :root { --logo-employee-width: 68px; }
  .employee-brand .employee-title { font-size: 14px; }
  .employee-header .account { gap: 4px; }
}