/* The dashboard of the location server.
 *
 * The page shares the look and feel of the rest of the pages: a dark base, a
 * raised surface, the red of the brand and the steel blue of the secondary
 * accent. The palette is the one of the style sheet of the other pages, so
 * that the dashboard does not look like a different site. */
:root {
  color-scheme: dark;

  --br-red: #ff4949;
  --br-grey0: #f5f5f5;
  --br-grey1: #c1c1c1;
  --br-grey2: #868686;
  --bg-base: #121212;
  --bg-surf: #1e1e1e;
  --bg-hovr: #2a2a2a;
  --bg-map: #0d0d0d;
  --bg-row: rgba(255, 255, 255, 0.03);
  --bg-legend: rgba(30, 30, 30, 0.94);
  --bg-control: rgba(30, 30, 30, 0.92);
  --bg-overlay: rgba(18, 18, 18, 0.82);
  --bg-error: rgba(255, 73, 73, 0.08);
  --bg-success: rgba(91, 139, 107, 0.08);
  --bo-subt: #363636;
  --bo-focs: #545454;
  --bo-row: rgba(255, 255, 255, 0.05);
  --bo-row-strong: rgba(255, 255, 255, 0.06);
  --bo-swatch: rgba(0, 0, 0, 0.6);
  --tx-base: #f5f5f5;
  --tx-mute: #c1c1c1;
  --tx-disp: #868686;
  --tx-on-primary: #121212;
  --pc-prim: #ff4949;
  --pc-mute: #491919;
  --sc-prim: #5c7c9c;
  --sc-mute: #3c4c5c;
  --err: #ff4949;
  --suc: #5b8b6b;
  --inf: #5c7c9c;
  --wrn: #c59565;
  --marker-casing: #f5f5f5;
  --marker-halo: #121212;
}

/* The light theme keeps the look of the dark one: the same counter colours,
   the same red of the brand and the same steel blue of the secondary accent,
   darkened where a light background needs more contrast. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-base: #f2f0ec;
  --bg-surf: #ffffff;
  --bg-hovr: #e9e5df;
  --bg-map: #e7e3dc;
  --bg-row: rgba(0, 0, 0, 0.03);
  --bg-legend: rgba(255, 255, 255, 0.94);
  --bg-control: rgba(255, 255, 255, 0.92);
  --bg-overlay: rgba(255, 255, 255, 0.85);
  --bg-error: rgba(179, 38, 30, 0.08);
  --bg-success: rgba(47, 107, 69, 0.08);
  --bo-subt: #d8d3cb;
  --bo-focs: #a8a29a;
  --bo-row: rgba(0, 0, 0, 0.06);
  --bo-row-strong: rgba(0, 0, 0, 0.09);
  --bo-swatch: rgba(0, 0, 0, 0.35);
  --tx-base: #1a1a1a;
  --tx-mute: #3f3f3f;
  --tx-disp: #6b6862;
  --tx-on-primary: #ffffff;
  --pc-prim: #d42f2f;
  --pc-mute: #f0c4c4;
  --sc-prim: #3f6485;
  --sc-mute: #d7e0e9;
  --err: #b3261e;
  --suc: #2f6b45;
  --inf: #3f6485;
  --wrn: #8a5a24;
  --marker-casing: #ffffff;
  --marker-halo: #f2f0ec;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background: var(--bg-base);
  color: var(--tx-base);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The bar at the top of the page. */
.header {
  flex: 0 0 auto;
  background: var(--bg-surf);
  border-bottom: 1px solid var(--bo-subt);
}
.header-inner {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-brand {
  font-weight: 700;
  font-size: 17px;
  color: var(--pc-prim);
  white-space: nowrap;
}
.header-note {
  color: var(--tx-disp);
  font-size: 12px;
  white-space: nowrap;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The picker of the colour theme. */
.theme-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tx-disp);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.theme-picker select {
  padding: 3px 6px;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

/* The bar at the bottom of the page. The text is deliberately small: it is
   there for the record, not to draw the eye. */
.footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 5px 16px;
  border-top: 1px solid var(--bo-subt);
  background: var(--bg-surf);
  color: var(--tx-disp);
  font-size: 10px;
  line-height: 1.4;
}
.footer a {
  color: var(--tx-disp);
  text-decoration: none;
}
.footer a:hover {
  color: var(--tx-mute);
  text-decoration: underline;
}

/* The layout is a list on the left and the map with the details of the
   picked device on the right. */
.layout {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* The bars that are dragged to give more room to the list or to the map.
   The bar itself is a small gutter; the line in the middle is the border
   between the panels. */
.resizer {
  flex: 0 0 auto;
  position: relative;
  z-index: 15;
  background: var(--bg-base);
  touch-action: none;
}
.resizer::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--bo-subt);
  transition: background 0.15s;
}
.resizer-vertical {
  width: 7px;
  cursor: col-resize;
}
.resizer-vertical::after {
  width: 1px;
}
.resizer-horizontal {
  height: 7px;
  cursor: row-resize;
}
.resizer-horizontal::after {
  height: 1px;
}
.resizer:hover::after,
.resizer:focus-visible::after,
.resizer.dragging::after {
  background: var(--sc-prim);
}
.resizer:focus-visible {
  outline: none;
}
/* While a bar is dragged, the pointer keeps its shape over the whole page. */
body.resizing-columns,
body.resizing-columns * {
  cursor: col-resize !important;
  user-select: none !important;
}
body.resizing-rows,
body.resizing-rows * {
  cursor: row-resize !important;
  user-select: none !important;
}

/* The list of the devices and of the gateways. The width is set by the
   resizer next to it, and kept in the browser, so the width here is only the
   one of the first visit. */
.sidebar {
  flex: 0 0 auto;
  width: var(--sidebar-width, 360px);
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-surf);
}
.sidebar-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.sidebar-section.devices {
  flex: 3 1 0;
}
.sidebar-section.gateways {
  flex: 2 1 0;
}
.sidebar-section.stats {
  flex: 0 0 auto;
  min-height: 0;
}
.sidebar-section .list {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.sidebar-section.stats .stats {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}
.list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--bo-row);
  cursor: pointer;
}
.list-item:hover {
  background: var(--bg-hovr);
}
/* The device that is picked stays marked, also when the list of the devices
   is fetched again. */
.list-item.selected {
  background: var(--sc-mute);
  box-shadow: inset 3px 0 0 var(--sc-prim);
}
.list-item.selected:hover {
  background: var(--sc-mute);
}
.list-item .item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--tx-mute);
}
.list-item.selected .item-name {
  color: var(--tx-base);
}
.list-item .item-time {
  color: var(--tx-disp);
  font-size: 11px;
  white-space: nowrap;
}

/* The headings of the panels. */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bo-subt);
  background: var(--bg-surf);
}
.panel-header h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tx-disp);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-header small {
  color: var(--tx-disp);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hint {
  color: var(--tx-disp);
  font-size: 11px;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

/* The counters of the network. */
.stats {
  padding: 8px 12px 10px;
  overflow-x: auto;
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.stats-table th {
  text-align: left;
  font-weight: 400;
  color: var(--tx-disp);
  padding: 2px 8px 2px 0;
  white-space: nowrap;
}
.stats-table td {
  text-align: right;
  padding: 2px 0;
  white-space: nowrap;
  color: var(--tx-base);
}
.stats-table thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--bo-subt);
}
.stats-table thead .stats-group {
  text-align: center;
}
.stats-table tbody tr:hover {
  background: var(--bg-row);
}

/* The map and the panel with the details. */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-base);
}
.map-panel {
  flex: 1 1 60%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#map {
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
  background: var(--bg-map);
}
/* The pane below the map: the details of the picked entry on the left and
   the live log of the incoming events on the right. The two columns scroll
   on their own, so that the log does not move the details and the other way
   around. */
.lower-panel {
  flex: 1 1 40%;
  min-height: 0;
  display: flex;
  overflow: hidden;
  background: var(--bg-base);
}
.info-panel {
  flex: 1 1 0;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg-base);
}
/* The live log is a little narrower than the details by default. The
   resizer next to it sets its width, and the browser keeps the width that
   was picked. */
.log-panel {
  flex: 0 0 38%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-base);
}
.log-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.log-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--bo-row);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.log-entry[data-eui] {
  cursor: pointer;
}
.log-entry[data-eui]:hover {
  background: var(--bg-hovr);
}
.log-time {
  flex: 0 0 auto;
  color: var(--tx-disp);
}
.log-event {
  flex: 0 0 auto;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sc-prim) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-prim) 45%, transparent);
  color: var(--sc-prim);
  line-height: 16px;
}
.log-device {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tx-mute);
}
.log-meta {
  flex: 0 0 auto;
  color: var(--tx-disp);
}
/* The name of the picked device or gateway stays prominent, even though the
   headings of the panels are the small labels of the rest of the page. */
#infoPanel .panel-header h2 {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tx-base);
}

/* The key of the map: the layers with their markers and the actions. */
.legend {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 20;
  min-width: 184px;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--bg-legend);
  border: 1px solid var(--bo-subt);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  color: var(--tx-mute);
}
.legend-title {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tx-disp);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  cursor: pointer;
  white-space: nowrap;
}
.legend-item input {
  margin: 0;
  accent-color: var(--pc-prim);
}
.legend-swatch {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--colour) 75%, transparent);
  box-shadow: 0 0 0 1px var(--bo-swatch);
}
.legend-swatch[data-shape="ring"] {
  background: transparent;
  border: 3px solid color-mix(in srgb, var(--colour) 75%, transparent);
}
.legend-swatch[data-shape="diamond"] {
  background: var(--colour);
  border-radius: 2px;
  transform: rotate(45deg);
}
.legend-swatch[data-shape="star"] {
  background: var(--colour);
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.legend-swatch[data-shape="triangle"] {
  background: var(--colour);
  border-radius: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.legend-swatch[data-shape="square"] {
  background: var(--colour);
  border-radius: 2px;
}
.legend-swatch[data-shape="pentagon"] {
  background: var(--colour);
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.legend-swatch[data-shape="hexagon"] {
  background: var(--colour);
  border-radius: 0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.legend-options {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bo-subt);
}
.legend-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bo-subt);
}
.legend-actions button {
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--bo-subt);
  border-radius: 4px;
  background: var(--bg-surf);
  color: var(--tx-base);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.legend-actions button:hover {
  background: var(--bg-hovr);
  border-color: var(--bo-focs);
}

/* The details of the picked device or gateway. */
.info {
  display: flex;
  flex-direction: column;
}
.info-body {
  padding: 12px 16px 20px;
}
.info-section {
  margin-bottom: 20px;
}
.info-section h3 {
  margin: 0 0 8px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tx-disp);
}
/* The identity of the picked entry comes first, in a card of its own. */
.info-section.info-identity {
  padding: 10px 12px 8px;
  background: var(--bg-surf);
  border: 1px solid var(--bo-subt);
  border-radius: 6px;
}
.info-section.info-identity h3 {
  margin-bottom: 6px;
}
.info-section.info-identity .info-table td {
  border-bottom: none;
}
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.info-table th {
  text-align: left;
  font-weight: 500;
  color: var(--tx-disp);
  padding: 4px 10px 4px 0;
  white-space: nowrap;
  vertical-align: top;
}
.info-table td {
  padding: 4px 10px 4px 0;
  border-bottom: 1px solid var(--bo-row-strong);
  white-space: nowrap;
  color: var(--tx-base);
}
.info-table tbody tr:hover {
  background: var(--bg-row);
}
.info-table thead th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--bo-subt);
}
.info-table td.value {
  white-space: normal;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}
.placeholder {
  padding: 16px;
  color: var(--tx-disp);
  font-style: italic;
}

/* The kinds of the solvers. The colour is the one of the layer of the map. */
.solver-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--colour, var(--sc-prim)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--colour, var(--sc-prim)) 45%, transparent);
  color: var(--colour, var(--sc-prim));
  margin-right: 4px;
  font-size: 11px;
  white-space: nowrap;
}

/* The popup of a point of the map. */
.popup {
  display: none;
  position: absolute;
  z-index: 10;
  background: var(--bg-surf);
  border: 1px solid var(--bo-subt);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--tx-mute);
  white-space: nowrap;
}
.popup.visible {
  display: block;
}
.popup-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--tx-base);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The controls of the map. OpenLayers draws them in its own colours, which
   are the light ones of a default page. */
.ol-zoom {
  top: 10px;
  left: 10px;
  right: auto;
  padding: 0;
  background: transparent;
}
.ol-control {
  background: transparent;
}
.ol-control button {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 0 4px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  border: 1px solid var(--bo-subt);
  border-radius: 4px;
  background: var(--bg-control);
  color: var(--tx-base);
  cursor: pointer;
}
.ol-control button:hover,
.ol-control button:focus {
  background: var(--bg-hovr);
  border-color: var(--bo-focs);
}
.ol-attribution {
  right: 4px;
  bottom: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-overlay);
  font-size: 10px;
}
.ol-attribution ul {
  margin: 0;
  padding: 0;
  color: var(--tx-disp);
  text-shadow: none;
}
.ol-attribution a {
  color: var(--sc-prim);
}
.ol-attribution button {
  color: var(--tx-mute);
  background: transparent;
  border: none;
}

/* The scale reference of the map. */
.ol-scale-line {
  left: 10px;
  bottom: 10px;
  padding: 3px 6px;
  border: 1px solid var(--bo-subt);
  border-radius: 4px;
  background: var(--bg-overlay);
}
.ol-scale-line-inner {
  margin: 0;
  border-color: var(--tx-mute);
  border-top-width: 2px;
  color: var(--tx-mute);
  font-size: 10px;
  line-height: 1.2;
  text-shadow: none;
}

/* The scrollbars follow the dark theme. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
  background: var(--bo-subt);
  border: 2px solid var(--bg-base);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bo-focs);
}

/* On a narrow screen the list takes less of the width, so that the map and
   the details keep the room they need. */
@media (max-width: 900px) {
  .sidebar {
    --sidebar-width: 240px;
  }
  .header-note {
    display: none;
  }
}

/* The sign-in page and the pages that manage the users scroll as a whole,
   unlike the dashboard, which keeps the map in place. */
body.auth-page,
body.admin-page {
  overflow: auto;
}

/* The sign-in card. */
.auth-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 16px;
}
.auth-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--bg-surf);
  border: 1px solid var(--bo-subt);
  border-radius: 8px;
}
.auth-card h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
.auth-note {
  margin: 0;
  color: var(--tx-mute);
  font-size: 12px;
  line-height: 1.5;
}

/* A labelled form field. */
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field > span {
  color: var(--tx-disp);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* The inputs and the buttons of the forms. */
input[type="text"],
input[type="password"],
select {
  min-width: 0;
  padding: 7px 9px;
  background: var(--bg-base);
  color: var(--tx-base);
  border: 1px solid var(--bo-subt);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
}
input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
  outline: none;
  border-color: var(--bo-focs);
}
button,
.button {
  padding: 7px 14px;
  background: var(--bg-hovr);
  color: var(--tx-base);
  border: 1px solid var(--bo-subt);
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
button:hover,
.button:hover {
  border-color: var(--bo-focs);
}
button.primary,
.button.primary {
  background: var(--pc-prim);
  border-color: var(--pc-prim);
  color: var(--tx-on-primary);
  font-weight: 600;
}
button.primary:hover,
.button.primary:hover {
  filter: brightness(1.08);
}
button.danger {
  color: var(--err);
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The outcome of an action. */
.flash {
  margin: 0;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid var(--bo-subt);
}
.flash-error {
  color: var(--err);
  border-color: var(--pc-mute);
  background: var(--bg-error);
}
.flash-notice {
  color: var(--suc);
  border-color: var(--sc-mute);
  background: var(--bg-success);
}

/* The signed-in user and the links of the header. */
.header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.header-nav a,
.header-link {
  color: var(--tx-mute);
  text-decoration: none;
  white-space: nowrap;
}
.header-nav a:hover,
.header-link:hover {
  color: var(--tx-base);
}
.header-user {
  color: var(--tx-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.logout-form {
  margin: 0;
}
.logout-form button {
  padding: 3px 9px;
  font-size: 11px;
}

/* The page that manages the users. */
.admin-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.admin-main > .panel-header {
  border: none;
  background: none;
  padding: 0 0 12px;
}
.admin-main > .panel-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--tx-base);
}
.users-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-surf);
  border: 1px solid var(--bo-subt);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
}
.users-table th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tx-disp);
  border-bottom: 1px solid var(--bo-subt);
  white-space: nowrap;
}
.users-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bo-subt);
  vertical-align: middle;
}
.users-table tbody tr:last-child td {
  border-bottom: none;
}
.users-table tbody tr:hover {
  background: var(--bg-hovr);
}
.users-table .value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--tx-base);
}
.users-table .muted {
  color: var(--tx-disp);
  white-space: nowrap;
}
.users-table .inline-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.users-table .inline-form input[type="password"] {
  width: 130px;
  padding: 4px 7px;
  font-size: 12px;
}
.users-table .inline-form select {
  padding: 4px 7px;
  font-size: 12px;
}
.users-table .inline-form button {
  padding: 4px 10px;
  font-size: 11px;
}
.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-hovr);
  border: 1px solid var(--bo-subt);
  color: var(--tx-mute);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-admin {
  color: var(--pc-prim);
  border-color: var(--pc-mute);
}

/* The form that adds a user. */
.admin-create {
  margin-top: 28px;
  background: var(--bg-surf);
  border: 1px solid var(--bo-subt);
  border-radius: 6px;
  overflow: hidden;
}
.admin-create .panel-header h2 {
  font-size: 11px;
}
.create-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
}
.create-form .field {
  flex: 1 1 180px;
  max-width: 260px;
}
.create-form button {
  flex: 0 0 auto;
}