@import "page.css";

/* Firefox-specific fixes for OpenSeadragon SVG overlay */
@-moz-document url-prefix() {
  /* Fix for SVG overlay transparency and z-index issues in Firefox */
  .openseadragon-container svg {
    pointer-events: none !important;
    z-index: 10 !important;
    background: none !important;
    background-color: transparent !important;
    fill: none !important;
    fill-opacity: 0 !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    isolation: auto !important;
  }
  
  /* Allow pointer events only on hotpoint elements */
  .openseadragon-container svg g.hotpoint {
    pointer-events: all !important;
    isolation: isolate !important;
  }
  
  /* Firefox-specific text visibility - only target text inside hotpoint groups */
  .openseadragon-container svg g.hotpoint text {
    fill: red !important;
  }
  
  /* Ensure proper canvas rendering behind SVG */
  .openseadragon-container canvas {
    z-index: 1 !important;
    background: transparent !important;
  }
  
  /* Force Firefox to render SVG as transparent overlay */
  .openseadragon-container {
    background: transparent !important;
  }
}

body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
body,
button,
input,
optgroup,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
div,
span,
p,
a {
  font-family: "Source Sans Pro", Helvetica, sans-serif;
}

.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline;
}
.htmx-request.htmx-indicator {
  display: inline;
}

.link {
  color: #257fba;
  cursor: pointer;
  text-decoration: none;
}

.link:hover {
  color: #065f9b;
}

.link-unavailable {
  color: #587182;
  cursor: not-allowed;
  text-decoration: none;
}

.link-unavailable:hover {
  color: #455967;
}

.hotpoint {
  pointer-events: all;
  cursor: pointer;
}

.hotpoint-label {
  fill: white;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
}

.hotpoint.selected > circle,
.hotpoint.selected > rect {
  fill: #00aaff !important;
}

.hotpoint.selected > text {
  fill: #e0f2fe !important;
}

.hotpoint.active > circle,
.hotpoint.highlighted > circle,
.hotpoint.active > rect,
.hotpoint.highlighted > rect {
  fill: #47a6d5;
}

.hotpoint.active > text,
.hotpoint.highlighted > text {
  fill: #e0f2fe;
}

.table-row-selection.showing-selections tr.selected {
  background-color: #e0f2fe;
}

.zebra-striped li:nth-child(even) {
  background-color: #f4f4f0;
}

i.bi.thick-icon::before {
  font-weight: 900 !important;
}

/* @keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(90px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-90px);
  }
}

@keyframes slide-from-left {
  from {
    transform: translateX(-90px);
  }
}

@keyframes slide-to-right {
  to {
    transform: translateX(90px);
  }
}

@keyframes slide-from-top {
  from {
    transform: translateY(-90px);
  }
}

@keyframes slide-to-bottom {
  to {
    transform: translateY(90px);
  }
}

::view-transition-old(slide-it) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(slide-it) {
  animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

::view-transition-old(slide-it-reverse) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
::view-transition-new(slide-it-reverse) {
  animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

::view-transition-old(slide-vertical) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-bottom;
}
::view-transition-new(slide-vertical) {
  animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-top;
}

::view-transition-old(slide-vertical-reverse) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-top;
}
::view-transition-new(slide-vertical-reverse) {
  animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-bottom;
}

.route-transition {
  view-transition-name: slide-it;
}

.route-transition-reverse {
  view-transition-name: slide-it-reverse;
}

.route-transition-vertical {
  view-transition-name: slide-vertical;
}

.route-transition-vertical {
  view-transition-name: slide-vertical-reverse;
}

@view-transition {
  navigation: auto;
}

table-row-selection {
  display: none;
}

@keyframes slideDown {
  from {
    opacity: 0.6;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slideDown 0.1s ease-out forwards;
} */

a[hx-get] {
  cursor: pointer;
}

/* Line clamp utility for text truncation */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow: hidden !important;
}

osd-illustration {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
}

/* Supersession tree visual hierarchy */
.supersession-tree-symbol {
  font-family: monospace;
  color: #9ca3af; /* gray-400 */
  user-select: none;
  white-space: pre;
}

.supersession-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  gap: 0.25rem;
}

.supersession-badge.original {
  background-color: #dbeafe; /* blue-100 */
  color: #1e40af; /* blue-800 */
}

.supersession-badge.latest {
  background-color: #dcfce7; /* green-100 */
  color: #166534; /* green-800 */
}

.supersession-badge.current {
  background-color: #d1fae5; /* emerald-100 */
  color: #065f46; /* emerald-800 */
}

.supersession-badge.discontinued {
  background-color: #fee2e2; /* red-100 */
  color: #991b1b; /* red-800 */
}

.supersession-badge.replacement {
  background-color: #fef3c7; /* amber-100 */
  color: #92400e; /* amber-800 */
}

.supersession-badge.replacement-numbered {
  background-color: #f3e8ff; /* purple-100 */
  color: #6b21a8; /* purple-800 */
}

.supersession-badge.pattern-indicator {
  background-color: #f3f4f6; /* gray-100 */
  color: #374151; /* gray-700 */
}

/* Mobile-specific improvements */
@media (max-width: 767px) {
  /* Ensure touch targets are at least 44px */
  .card-part {
    min-height: 44px;
  }
  
  /* Better mobile spacing */
  .mobile-page-card {
    min-height: 120px;
  }
  
  /* Optimize text for mobile */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    word-break: break-word;
  }
  
  /* Mobile back button styling */
  .mobile-back-btn {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Supersession mobile adjustments */
  .supersession-tree-symbol {
    font-size: 0.625rem; /* Make symbols smaller on mobile */
  }
  
  .supersession-badge {
    font-size: 0.625rem; /* Smaller badges on mobile */
    padding: 0.125rem 0.375rem;
  }
}