/* =========================================================
   Hero Frequencies – site-wide styles
   ========================================================= */

/* Mandala watermark – visible on every page behind content   */
.page-watermark {
  position: fixed;
  inset: 0;
  background: url('/images/MandalaFlattened.svg')
    calc(50% + 125px) 50% / min(68vh, 68vw) no-repeat;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}

/* On smaller screens the sidebar collapses – center the mandala */
@media (max-width: 1199.98px) {
  .page-watermark {
    background-position: 50% 50%;
  }
}

/* Ensure page content renders above the watermark layer */
.main-content > .container-fluid,
.main-content > .container {
  position: relative;
  z-index: 1;
}

/* Breadcrumb / hamburger bar — sticky above scrolling cards (do not set position:relative here) */
.main-content > nav.navbar-main {
  position: sticky;
  z-index: 1020;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

/* Keep the top bar (and mobile hamburger) visible below Bootstrap's lg collapse breakpoint.
   Without this, #iconNavbarSidenav inside .navbar-collapse is display:none on phones. */
.navbar-main > .container-fluid {
  flex-wrap: nowrap;
  min-width: 0;
}
.navbar-main .sidenav-toggler {
  flex: 0 0 auto;
}
@media (max-width: 991.98px) {
  .navbar-main.navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
  }
}

/* Sidenav is also .navbar, which sets flex-wrap:wrap, align-items:center,
   and justify-content:space-between. Those turn the column into a centered
   wrap and slide the header (brand + COM gate) right, off the white panel. */
#sidenav-main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  max-height: calc(100vh - 1rem);
  overflow-x: hidden;
}
#sidenav-main > .sidenav-header,
#sidenav-main > hr,
#sidenav-main > #sidenav-collapse-main,
#sidenav-main > .sidenav-build-info {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}
#sidenav-main #sidenav-collapse-main {
  flex: 1 1 auto;
  flex-shrink: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
}
.sidenav-build-info {
  flex-shrink: 0;
  margin-top: auto;
  padding: 0.65rem 1.25rem 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.sidenav-build-info .build-line {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: #7b809a;
}

#sidenav-main .sidenav-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}
#sidenav-main .sidenav-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
#sidenav-main .sidenav-station-name {
  font-size: 0.75rem;
  color: #7b809a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sticky COM-port gate under sidenav brand */
#sidenav-main .sidenav-com-gate {
  margin-top: -0.25rem;
}
#sidenav-main .sidenav-com-btn {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #344767;
  box-shadow: none;
}
#sidenav-main .sidenav-com-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.2);
}
#sidenav-main .sidenav-com-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
#sidenav-main .sidenav-com-btn--released {
  border-color: rgba(46, 125, 50, 0.45);
  color: #1b5e20;
  background: rgba(46, 125, 50, 0.08);
}

/* Hamburger is always available so the sidenav can collapse on every page */
body.collapsible-sidenav .navbar-main .sidenav-toggler,
body.scan-page .navbar-main .sidenav-toggler {
  display: block !important;
}
body.collapsible-sidenav .navbar-main:has(.sidenav-toggler) li:has(#iconNavbarSidenav),
body.scan-page .navbar-main:has(.sidenav-toggler) li:has(#iconNavbarSidenav) {
  display: none !important;
}

/* Collapsible sidenav: hide when collapsed; scan-sidenav-open is the source of truth */
body.scan-page:not(.scan-sidenav-open) #sidenav-main,
body.collapsible-sidenav:not(.scan-sidenav-open) #sidenav-main {
  transform: translateX(calc(-100% - 1rem)) !important;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

body.scan-page:not(.scan-sidenav-open) .sidenav.fixed-start + .main-content,
body.collapsible-sidenav:not(.scan-sidenav-open) .sidenav.fixed-start + .main-content {
  margin-left: 0 !important;
}

body.scan-page.scan-sidenav-open #sidenav-main,
body.collapsible-sidenav.scan-sidenav-open #sidenav-main {
  transform: translateX(0) !important;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  z-index: 10050;
}

.scan-sidenav-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10040;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(52, 71, 103, 0.4);
  cursor: pointer;
}

.scan-sidenav-backdrop[hidden] {
  display: none !important;
}

@media (min-width: 1200px) {
  .scan-sidenav-backdrop {
    display: none !important;
  }

  body.scan-page:not(.scan-sidenav-open) #sidenav-main,
  body.collapsible-sidenav:not(.scan-sidenav-open) #sidenav-main {
    max-width: 15.5rem !important;
  }

  body.scan-page.scan-sidenav-open #sidenav-main,
  body.collapsible-sidenav.scan-sidenav-open #sidenav-main {
    max-width: 14rem !important;
  }

  body.scan-page.scan-sidenav-open .sidenav.fixed-start + .main-content,
  body.collapsible-sidenav.scan-sidenav-open .sidenav.fixed-start + .main-content {
    margin-left: 15rem !important;
  }
}

/* Center watermark when collapsible sidenav is collapsed */
body.scan-page:not(.scan-sidenav-open) .page-watermark,
body.collapsible-sidenav:not(.scan-sidenav-open) .page-watermark {
  background-position: 50% 50%;
}

/* Panel borders: theme (#e5e5e5) and per-page --line (#e9ecef) are nearly invisible on white.
   html:root outranks the inline :root blocks each page declares after this stylesheet. */
html:root {
  --line: #b4bcc8;
  --bs-border-color: #b4bcc8;
}
.main-content .card {
  border: 1px solid #b4bcc8;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

/* Bootstrap modals must stack above the sidebar (open sidenav is 10050) */
.modal-backdrop { z-index: 10100 !important; }
.modal         { z-index: 10105 !important; }

/* Edit fields: Material Dashboard borders are nearly invisible on white cards */
.form-control,
.form-select,
.form-control-sm,
.input-group .form-control,
.input-group.input-group-outline .form-control,
.input-group.input-group-dynamic .form-control,
.main-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="color"]),
.main-content select,
.main-content textarea,
.modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="color"]),
.modal select,
.modal textarea {
  border: 1px solid #7d8798 !important;
  background-color: #fff;
  padding: 0.45rem 0.7rem;
}

.form-control-sm,
.input-group .form-control-sm {
  padding: 0.3rem 0.55rem;
}

textarea.form-control,
.main-content textarea,
.modal textarea {
  padding: 0.55rem 0.7rem;
}

select,
select.form-control,
select.form-select,
select.form-control-sm,
.main-content select,
.modal select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23344767' d='M1.4.8 6 5.4 10.6.8 12 2.2 6 8.2 0 2.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

select:disabled,
select.form-control:disabled,
.main-content select:disabled,
.modal select:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa3b2' d='M1.4.8 6 5.4 10.6.8 12 2.2 6 8.2 0 2.2z'/%3E%3C/svg%3E");
  cursor: default;
}

.form-control:focus,
.form-select:focus,
.input-group .form-control:focus,
.input-group.input-group-outline .form-control:focus,
.main-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="color"]):focus,
.main-content select:focus,
.main-content textarea:focus,
.modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="color"]):focus,
.modal select:focus,
.modal textarea:focus {
  border-color: #3260a8 !important;
  box-shadow: 0 0 0 0.15rem rgba(50, 96, 168, 0.18);
  outline: none;
}

.form-control:disabled,
.form-select:disabled,
.main-content input:disabled,
.main-content select:disabled,
.main-content textarea:disabled {
  border-color: #b4bcc8 !important;
  background-color: #f4f6f8;
}