/* GasOwl admin header. Brand colours from the GasOwl logo. */
:root {
  --gasowl-ink: #3b3b3d;
  --gasowl-orange: #f26a21;
  --gasowl-sky: #7fd1ee;
}

#header {
  background: #ffffff;
  color: var(--gasowl-ink);
  border-bottom: 3px solid var(--gasowl-orange);
  align-items: center;
  flex-wrap: wrap;
}

#site-name a:link, #site-name a:visited {
  color: var(--gasowl-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.gasowl-logo {
  height: 40px;
  width: auto;
}

.gasowl-admin-label {
  font-size: 1rem;
  color: var(--gasowl-ink);
}

.gasowl-release {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-left: 16px;
  font-size: 0.8rem;
}

.gasowl-version, .gasowl-env {
  padding: 2px 8px;
  border-radius: 3px;
  color: #ffffff;
  background: var(--gasowl-ink);
  white-space: nowrap;
}

.gasowl-env { text-transform: uppercase; font-weight: 600; }

/* Anything that is not production is coloured, so it can never pass for it. */
.gasowl-env-local { background: #f2b229; color: #222; }
.gasowl-env-development { background: #8e44ad; }
.gasowl-env-staging { background: #1f9bb0; }
.gasowl-env-test { background: #777777; }

#user-tools, #user-tools a:link, #user-tools a:visited,
#user-tools button, #logout-form button {
  /* Django 5's log-out is a <button>, white by default: invisible on white. */
  color: var(--gasowl-ink);
}

.gasowl-nav {
  /* Django renders nav-global inside #header; give it a full-width row of its
     own under the logo and user tools, edge to edge (#header pads 10px 40px). */
  flex: 0 0 calc(100% + 80px);
  order: 10;
  margin: 10px -40px -10px;
  display: flex;
  flex-wrap: wrap;
  background: var(--gasowl-ink);
  padding: 0 40px;
}

.gasowl-nav a:link, .gasowl-nav a:visited {
  color: #ffffff;
  padding: 9px 16px;
  text-decoration: none;
}

.gasowl-nav a:hover {
  background: var(--gasowl-orange);
}