/* =========================================================
   GLOBAL PAGE STYLES
========================================================= */

@font-face {
  font-family: "Conthrax";
  src: url("../fonts/conthrax.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ADBlue: #4FC3E8;
  --ADGrey: #6c757d;
}

body {
  background: #f8f9fa;
  font-family: "Source Sans 3", Arial, sans-serif !important;
}

body,
button,
input,
select,
textarea {
  font-family: inherit;
}


/* =========================================================
   HEADER / LOGO
========================================================= */

.app-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.app-logo-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.02em;
  font-family: "Conthrax", "Source Sans 3", Arial, sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.85rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

.app-logo-aero {
  color: var(--ADBlue);
}

.app-logo-designer {
  color: #000000;
}

.app-logo-tagline {
  margin-top: 0.2rem;
  padding-left: 0.08rem;
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: clamp(0.58rem, 0.95vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  color: var(--ADGrey);
}

.page-copyright {
  margin-top: 1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
}

#helpButton.help-button {
  padding: 4px !important;
  font-size: 1.6rem;
  line-height: 1;
  color: #ced4da;
  transform: translateY(2px);
  transition: color 0.2s ease;
}

#helpButton.help-button:hover,
#helpButton.help-button:focus {
  color: var(--ADGrey);
}

#helpButton.help-button i {
  display: block;
}


/* =========================================================
   GENERAL BOOTSTRAP TWEAKS
========================================================= */

.card-header strong {
  font-weight: 600;
}

.btn {
  font-weight: 500;
}

.undo-icon {
  display: block;
  width: 16px;
  height: 16px;
  background-color: #6c757d;
  mask-image: url("../images/buttons/undo.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("../images/buttons/undo.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

#undoAction,
.artificial-toolbar-action-btn[data-toolbar-action="undo"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#undoAction:hover .undo-icon,
#undoAction:focus .undo-icon,
#undoAction:active .undo-icon,
.artificial-toolbar-action-btn[data-toolbar-action="undo"]:hover .undo-icon,
.artificial-toolbar-action-btn[data-toolbar-action="undo"]:focus .undo-icon,
.artificial-toolbar-action-btn[data-toolbar-action="undo"].active .undo-icon {
  background-color: #ffffff;
}


/* =========================================================
   3D VIEWER
========================================================= */

#viewer {
  position: relative;
  width: 100%;
  height: 620px;
  background: #eeeeee;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
  overflow: hidden;
}

#viewer canvas {
  display: block;
}

/* Watermark now renders inside the WebGL preview in js/main.js. */


/* =========================================================
   BOOTBOX MODALS
========================================================= */

.bootbox .modal-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.bootbox .modal-title {
  font-weight: 600;
}

.bootbox[aria-hidden="true"] {
  pointer-events: none;
}


/* =========================================================
   VISUAL PDF OVERLAY
========================================================= */

body.visual-pdf-busy {
  overflow-y: scroll !important;
}

#visualPdfOverlay {
  overflow: hidden;
}

/* =========================================================
   3D MODEL UNAVAILABLE
========================================================= */


#viewer.render-unavailable canvas,
#viewer.render-paused canvas {
  display: none;
}

.viewer-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 249, 250, 0.98) 100%);
  border-radius: inherit;
}

#viewer.viewer-loading .viewer-loading-overlay {
  display: flex;
}

.viewer-loading-card {
  min-width: 220px;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(222, 226, 230, 0.95);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.12);
  text-align: center;
}

.viewer-loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.9rem;
  border: 0.22rem solid rgba(13, 110, 253, 0.18);
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: viewer-loading-spin 0.9s linear infinite;
}

.viewer-loading-title {
  font-size: 1rem;
  font-weight: 600;
  color: #344054;
}

.viewer-loading-progress {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0d6efd;
  font-variant-numeric: tabular-nums;
}

@keyframes viewer-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.viewer-unavailable-message {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  font-weight: 600;
  color: #667085;
  background: #f8f9fa;
  border-radius: 0.75rem;
}

#viewer.render-unavailable:not(.render-paused) #viewerUnavailableMessage,
#viewer.render-paused #viewerPausedMessage {
  display: flex;
}

#viewer.viewer-screenshot-protected canvas {
  filter: blur(18px) brightness(0.65);
}

.viewer-screenshot-protection {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  border-radius: inherit;
}

.viewer-screenshot-protection-box {
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
}

/* =========================================================
   HELP SIDEBAR
========================================================= */

.help-sidebar {
  --bs-offcanvas-width: 500px;
  background: #ffffff;
}

.help-sidebar .offcanvas-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.help-sidebar-brand {
  font-family: "Conthrax", "Source Sans 3", Arial, sans-serif;
  font-weight: 400;
}

.help-sidebar-brand-aero {
  color: var(--ADBlue);
}

/* =========================================================
   HELP MODAL
========================================================= */


/* Help modal styling */
.help-section-body {
  padding: 18px 22px;
}

.help-item {
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.help-item:last-child {
  margin-bottom: 0;
}

.accordion-button {
  font-weight: 700!important; /* bold section titles */
}

#helpAccordion .accordion-button:hover {
  background-color: #eaf3ff;
}

#helpAccordion .accordion-button:not(.collapsed) {
  background-color: #d8eaff;
  color: #0b3a66;
}


/* =========================================================
   FOOTER STYLING
========================================================= */

.app-footer {
  min-height: 58px;
  font-size: 0.9rem;
}

.footer-logo {
  height: 30px;
  width: auto;
  display: block;
}

.footer-label,
.footer-version,
.footer-copyright {
  white-space: nowrap;
}

@media (min-width: 999px) {
  .app-footer .footer-meta {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
  }

  .app-footer .footer-user-row,
  .app-footer .footer-version-row {
    width: auto;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
  }

  .app-footer .footer-user-row {
    display: contents;
  }

  .app-footer .footer-version-text {
    order: 2;
    margin: 0 0.75rem;
  }

  .app-footer .footer-version-text::before,
  .app-footer .footer-version-text::after {
    content: "|";
    color: inherit;
    opacity: 0.65;
    margin: 0 0.75rem;
  }

  .app-footer .footer-version-row {
    display: contents;
  }

  .app-footer .footer-version-row #adminPanelLink {
    order: 3;
    margin-right: 0.75rem;
  }

  .app-footer .footer-user-row #currentUsernameDisplay {
    order: 1;
  }

  .app-footer .footer-user-row a[title="Sign out"] {
    order: 4;
  }
}

.footer-btn-text {
  display: inline;
}