:root {
  --wsa-sidebar-width: 16rem;
  --wsa-navbar-height: 3.75rem;
  --wsa-surface: var(--bs-body-bg);
  --wsa-border: var(--bs-border-color);
}

body {
  min-height: 100vh;
  padding-top: var(--wsa-navbar-height);
  background: var(--bs-tertiary-bg);
}

.navbar-brand {
  font-weight: 700;
}

.theme-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  vertical-align: -0.125em;
}

.theme-icon[hidden] {
  display: none;
}

.app-sidebar {
  position: fixed;
  inset: var(--wsa-navbar-height) auto 0 0;
  width: var(--wsa-sidebar-width);
  overflow-y: auto;
  border-right: 1px solid var(--wsa-border);
  background: var(--wsa-surface);
}

.app-main {
  min-width: 0;
}

.app-sidebar .nav-link.active,
.offcanvas .nav-link.active {
  color: var(--bs-primary-text-emphasis);
  background: var(--bs-primary-bg-subtle);
}

@media (min-width: 992px) {
  .app-main {
    margin-left: var(--wsa-sidebar-width);
    width: calc(100% - var(--wsa-sidebar-width));
  }
}

.admin-users-table {
  min-width: 0;
}

.admin-users-table .admin-users-controls {
  max-width: 100%;
}

.admin-users-table .admin-users-controls label {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: var(--bs-body-color);
  font-size: 0.875rem;
  font-weight: 600;
}

.admin-users-table .admin-users-message {
  min-height: 2rem;
  color: var(--bs-danger-text-emphasis);
}

.admin-users-table .admin-users-message .btn {
  margin-left: 0.5rem;
}

.admin-users-table .table-responsive {
  max-width: 100%;
}

.admin-users-table .dt-processing {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  background: var(--bs-body-bg);
}

.admin-users-table .dt-length,
.admin-users-table .dt-length label {
  display: flex;
  align-items: center;
}

.admin-users-table .dt-length label {
  gap: 0.5rem;
  margin: 0;
}

.admin-users-table .dt-length select {
  margin: 0;
}

.admin-users-table .dt-paging-button.disabled .page-link,
.admin-users-table .dt-paging-button .page-link:disabled,
.admin-users-table .dt-paging-button:disabled {
  color: var(--bs-secondary-color);
  border-color: var(--bs-border-color);
  background-color: var(--bs-secondary-bg);
  opacity: 0.75;
}

.admin-users-table :is(input, select, button, a):focus-visible {
  outline: 0.2rem solid rgba(var(--bs-primary-rgb), 0.35);
  outline-offset: 0.125rem;
}

.installs-table,
.licenses-table {
  min-width: 0;
}

.installs-table label,
.licenses-table label {
  color: var(--bs-body-color);
  font-size: 0.875rem;
  font-weight: 600;
}

.installs-table :is(#installs-table-message),
.licenses-table :is(#licenses-table-message) {
  min-height: 2rem;
  color: var(--bs-danger-text-emphasis);
}

.installs-table .table-responsive,
.licenses-table .table-responsive {
  max-width: 100%;
}

.installs-table .dt-processing,
.licenses-table .dt-processing {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  background: var(--bs-body-bg);
}

.credential-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 18rem;
}

.credential-value {
  color: var(--bs-body-color);
  overflow-wrap: anywhere;
  user-select: all;
}

.installs-table :is(input, select, button, a):focus-visible,
.licenses-table :is(input, select, button, a):focus-visible {
  outline: 0.2rem solid rgba(var(--bs-primary-rgb), 0.35);
  outline-offset: 0.125rem;
}

@media (max-width: 575.98px) {
  .admin-users-table .admin-users-controls > * {
    min-width: 0;
  }

  .admin-users-table .admin-users-message .btn {
    display: block;
    margin: 0.5rem 0 0;
  }

  .admin-users-table .dt-length {
    justify-content: center;
  }

  .credential-cell {
    align-items: flex-start;
    flex-direction: column;
    min-width: 14rem;
  }

  .installs-table .dt-length,
  .licenses-table .dt-length {
    justify-content: center;
  }
}

/* Shared brand colour; icon shape and product name distinguish the applications. */
.wsa-product-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.wsa-product-brand img {
  flex-shrink: 0;
}
.navbar .wsa-product-brand {
  color: #579b73;
}
.navbar .wsa-product-brand:hover,
.navbar .wsa-product-brand:focus-visible {
  color: #75af8d;
}
@media (max-width: 575.98px) {
  .navbar .wsa-product-brand {
    font-size: .9rem;
  }
  .wsa-product-brand img {
    width: 28px;
    height: 28px;
  }
}