/* Pal Atlas final theme/loading consistency hotfix - 2026-08-19 */

/* One route loader, one position, one visual treatment.
   Keep the Versys header and Pal Atlas sidebar visible while page content changes. */
.view-container.is-loading,
.pal-atlas-content:has(> .pal-atlas-route-loader) {
  background: #050507 !important;
}

.view-container.is-loading > .pal-atlas-loading-overlay,
.pal-atlas-content > .pal-atlas-route-loader > .pal-atlas-loading-overlay {
  background: #050507 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.pal-atlas-content > .pal-atlas-route-loader {
  position: fixed !important;
  z-index: 120 !important;
  top: var(--pa-header-offset, 82px) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: var(--pa-sidebar, 205px) !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  inset: var(--pa-header-offset, 82px) 0 0 var(--pa-sidebar, 205px) !important;
  transform: none !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  background: #050507 !important;
  pointer-events: all !important;
}

.pal-atlas-content > .pal-atlas-route-loader > .pal-atlas-loading-overlay {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(28px, 5vh, 56px) 18px !important;
  box-sizing: border-box !important;
}

/* Boot load and route load share the same content-area dimensions. */
.view-container.is-loading {
  width: 100% !important;
  min-height: calc(100dvh - var(--pa-header-offset, 82px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.view-container.is-loading > .pal-atlas-loading-overlay {
  width: 100% !important;
  min-height: calc(100dvh - var(--pa-header-offset, 82px)) !important;
  margin: 0 !important;
  padding: clamp(28px, 5vh, 56px) 18px !important;
}

/* Prevent the loader artwork/text from changing size between first load and route load. */
.pal-atlas-loading-overlay .pal-atlas-loading-flipbook,
.pal-atlas-boot-loader .pal-atlas-loading-flipbook {
  width: clamp(112px, 11vw, 140px) !important;
  height: clamp(112px, 11vw, 140px) !important;
  flex: 0 0 auto !important;
  margin: 0 0 14px !important;
}
.pal-atlas-loading-overlay strong,
.pal-atlas-boot-loader strong {
  color: #fff !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.15 !important;
}
.pal-atlas-loading-overlay small,
.pal-atlas-boot-loader small {
  max-width: 460px !important;
  color: #b8b8c0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Technology cards: keep labels readable instead of hiding useful names in ellipsis. */
.tech-node-card > strong {
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}
.tech-node-card {
  min-width: 0 !important;
}
.tech-node-image img {
  max-width: 92px !important;
  max-height: 92px !important;
}
.tech-node-card:focus-visible {
  outline: 3px solid rgba(217, 10, 44, .38) !important;
  outline-offset: 2px !important;
}

/* Technology detail modal. */
.tech-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr);
  gap: 18px;
}
.tech-detail-hero {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel, #fff);
}
.tech-detail-image {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 10px;
  background: #0b3a4c;
  overflow: hidden;
}
.tech-detail-image img { max-width: 88px; max-height: 88px; object-fit: contain; }
.tech-detail-image .tech-node-placeholder { width: 72px; height: 72px; }
.tech-detail-copy p { margin: 8px 0 0; color: var(--muted); line-height: 1.65; }
.tech-detail-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.tech-detail-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2, #f2f2f5); font-size: 10px; font-weight: 800; }
.tech-detail-section { margin-top: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel, #fff); }
.tech-detail-section h3 { margin: 0 0 10px; font-size: 14px; }
.tech-detail-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tech-detail-list li { padding: 9px 10px; border-radius: 8px; background: var(--panel-2, #f2f2f5); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.tech-detail-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

@media (max-width: 900px) {
  .pal-atlas-content > .pal-atlas-route-loader {
    top: var(--pa-header-offset, 72px) !important;
    left: 0 !important;
    inset: var(--pa-header-offset, 72px) 0 0 0 !important;
  }
  .view-container.is-loading,
  .view-container.is-loading > .pal-atlas-loading-overlay {
    min-height: calc(100dvh - var(--pa-header-offset, 72px)) !important;
  }
  .tech-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .tech-detail-hero { grid-template-columns: 82px minmax(0, 1fr); padding: 12px; }
  .tech-detail-image { width: 82px; height: 82px; }
  .tech-detail-image img { max-width: 68px; max-height: 68px; }
}


/* Sidebar/menu readability: never hide long route labels behind ellipsis. */
.sidebar-nav .nav-item,
.sidebar-nav .nav-dropdown-toggle {
  height: auto !important;
  min-height: 36px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.3 !important;
}
.sidebar-nav .nav-dropdown-menu .nav-item {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.sidebar-nav .dropdown-icon {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}