/*
  Base skin. Every brandable colour is read from a CSS variable that the layout emits per tenant,
  so a whitelabel stylesheet only has to override the variables it cares about.
*/

:root {
  --brand-primary: #0d6efd;
  --brand-accent: #6610f2;
  --brand-nav-bg: #101828;
  --brand-nav-fg: #f8f9fa;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--brand-primary);
}

/* ---------------------------------------------------------------- Navbar */

.app-navbar {
  background-color: var(--brand-nav-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .navbar-toggler {
  color: var(--brand-nav-fg);
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
  color: var(--brand-nav-fg);
  opacity: .8;
}

.app-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .35);
}

/* The stock toggler icon is a dark SVG; recolour it for the dark navbar. */
.app-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Sign-out is a form button styled to sit inline with the other links. */
.app-navbar .nav-link.btn-link {
  text-decoration: none;
  border: 0;
  padding: .5rem 1rem;
}

.app-brand-logo {
  max-height: 36px;
  max-width: 180px;
  object-fit: contain;
}

/* ------------------------------------------------------------- Offcanvas */

/*
  Desktop: the offcanvas markup behaves as an ordinary inline navbar.
  Mobile (< lg): it stays a real offcanvas panel that slides in from the left.
*/
@media (min-width: 992px) {
  .app-offcanvas {
    position: static;
    display: flex;
    flex-grow: 1;
    background: transparent;
    border: 0;
    transform: none;
    visibility: visible !important;
    width: auto;
    z-index: auto;
  }

  .app-offcanvas .offcanvas-header {
    display: none;
  }

  .app-offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    padding: 0;
  }
}

/*
  Desktop dropdowns open on hover. Guarded by both the lg breakpoint and a hover-capable
  pointer, so touch devices keep tap-to-open — on a touchscreen a hover rule would otherwise
  make the first tap open the menu and swallow the navigation.
  Clicking still works: Bootstrap's own .show is unaffected by this.
*/
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .app-navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  /* The menu sits flush under the toggle; without this bridge the gap between them
     counts as "not hovering" and the menu flickers shut on the way down. */
  .app-navbar .nav-item.dropdown > .dropdown-menu {
    margin-top: 0;
  }

  .app-navbar .nav-item.dropdown > .dropdown-toggle {
    padding-bottom: .75rem;
  }
}

@media (max-width: 991.98px) {
  .app-offcanvas {
    background-color: var(--brand-nav-bg);
    color: var(--brand-nav-fg);
    width: 280px;
  }

  .app-offcanvas .nav-link {
    color: var(--brand-nav-fg);
    padding: .65rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .app-offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }

  .app-offcanvas .dropdown-menu {
    background-color: rgba(255, 255, 255, .06);
    border: 0;
  }

  .app-offcanvas .dropdown-item {
    color: var(--brand-nav-fg);
  }

  .app-offcanvas .dropdown-item:hover {
    background-color: rgba(255, 255, 255, .12);
    color: var(--brand-nav-fg);
  }
}

/* --------------------------------------------------------------- Content */

.app-content {
  padding-top: 1.25rem;
}

.impersonation-bar {
  background-color: #b54708;
  color: #fff;
  padding: .5rem 0;
  font-size: .9rem;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}

.btn-brand {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
}

.qr-code {
  image-rendering: pixelated;
  max-width: 240px;
}

.mono-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
}

/* Tables stay usable on a phone by scrolling inside their own container. */
.table-responsive-wrap {
  overflow-x: auto;
}