/* Slide Viewer Demo Styles - Matching scopelis LIS styling exactly */

/* Viewer Container */
#viewer-container {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Slide List Overlay - Open and locked by default */
#slide-list-overlay {
  pointer-events: auto;
  width: 240px;
}

#slide-list-overlay.slide-list-visible {
  width: 240px;
  pointer-events: auto;
}

#slide-list-overlay.slide-list-locked {
  width: 240px;
  pointer-events: auto;
}

#slide-list-menu {
  pointer-events: auto;
  transform: translateX(0);
}

#slide-list-overlay:not(.slide-list-visible) #slide-list-menu {
  transform: translateX(-100%);
}

/* Trigger handle - shown when sidebar is closed/unlocked */
#slide-list-trigger {
  pointer-events: auto;
  display: none;
}

#slide-list-overlay:not(.slide-list-visible):not(.slide-list-locked) #slide-list-trigger {
  display: block;
}

/* Viewer main area adjusts when slide list is visible */
#slide-list-overlay.slide-list-visible ~ #viewer-main,
#slide-list-overlay.slide-list-locked ~ #viewer-main {
  margin-left: 240px;
  width: calc(100% - 240px);
}

/* Default state: slide list is visible, so viewer starts with margin */
#viewer-main {
  margin-left: 240px;
  width: calc(100% - 240px);
  transition: margin-left 0.3s, width 0.3s;
}

#slide-list-overlay:not(.slide-list-visible) ~ #viewer-main {
  margin-left: 0;
  width: 100%;
}

/* ======================== */
/* Mobile: full-width viewer, sidebar as overlay/drawer */
/* ======================== */
@media (max-width: 768px) {
  #viewer-container {
    flex-direction: column;
  }

  #viewer-main {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0;
  }

  #slide-list-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    height: 100dvh;
    width: 280px;
    max-width: 85vw;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: none;
  }

  #slide-list-overlay.slide-list-visible,
  #slide-list-overlay.slide-list-locked {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  }

  #slide-list-overlay:not(.slide-list-visible):not(.slide-list-locked) #slide-list-trigger {
    display: block;
  }

  #slide-list-trigger {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Slide thumbnails */
.slide-thumbnail {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s;
  cursor: pointer;
  border-radius: 0.375rem;
  overflow: hidden;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.slide-thumbnail:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.slide-thumbnail.selected {
  border-color: hsl(217, 91%, 60%);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  background: rgba(255, 255, 255, 0.2);
}

/* Navigation buttons */
.nav-button {
  pointer-events: auto;
}

.nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Bottom controls - auto-hide */
#bottom-controls {
  pointer-events: auto;
}

#bottom-controls .controls-content {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}

#bottom-controls:hover .controls-content,
#bottom-controls.controls-visible .controls-content {
  opacity: 1;
  transform: translateY(0);
}

/* Rotation slider styling */
#rotation-slider {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  outline: none;
}

#rotation-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}

#rotation-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* Loading overlay */
.loading-overlay {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* OpenSeadragon customizations - White background for website */
/* Only target the OpenSeaDragon viewer container, not sidebar or other elements */
.openseadragon-container {
  background-color: #fff !important;
}

/* Target only the OpenSeaDragon viewer wrapper div (the one that wraps the viewerRef) */
/* This specifically targets the div with bg-black that contains the OpenSeaDragon viewer */
#slide-viewer-root div[class*="rounded-lg"][class*="bg-black"]:has(.openseadragon-container),
#slide-viewer-root div[class*="rounded-lg"][class*="bg-black"]:has([class*="openseadragon"]),
#slide-viewer-root div.bg-black:has(.openseadragon-container),
#slide-viewer-root div.bg-black:has([class*="openseadragon"]) {
  background-color: #fff !important;
}

/* Target OpenSeaDragon canvas and container elements directly */
#slide-viewer-root .openseadragon-canvas,
#slide-viewer-root .openseadragon-viewport,
#slide-viewer-root .openseadragon-container canvas {
  background-color: #fff !important;
}

/* Fallback: Target the viewer wrapper more specifically */
/* Only apply to divs that contain OpenSeaDragon elements, not sidebar */
#slide-viewer-root > div > div > div[class*="bg-black"]:has(div[class*="openseadragon"]),
#slide-viewer-root > div > div > div[class*="bg-black"]:has(.openseadragon-container) {
  background-color: #fff !important;
}

/* Scale bar */
#scale-bar {
  pointer-events: none;
  z-index: 10;
}

/* Scale bar should be positioned relative to viewer main, not slide list */
#viewer-main #scale-bar {
  position: absolute;
  bottom: 4rem; /* Above bottom controls */
  left: 1rem;
}

/* Re-enable pointer events on the disabled ruler button so we can intercept clicks */
/* Shadcn ghost buttons apply disabled:pointer-events-none via Tailwind, which blocks all events */
#slide-viewer-root button[title="Measurement Tool (Ctrl+Q)"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Toolbar: ensure Settings (cog) and other icon buttons are visible on light background */
/* Ghost buttons get no default text color; toolbar passes buttonClass to some but not Settings trigger */
/* Use color only (no fill) so Lucide outline icons keep stroke style, not solid fill */
#slide-viewer-root button[title="Settings"],
#slide-viewer-root button[title="Settings"] svg {
  color: hsl(222.2, 84%, 4.9%) !important;
}
#slide-viewer-root div[class*="backdrop-blur-sm"][class*="rounded-lg"] button,
#slide-viewer-root div[class*="backdrop-blur-sm"][class*="rounded-lg"] button svg {
  color: hsl(222.2, 84%, 4.9%);
}
#slide-viewer-root div[class*="backdrop-blur-sm"][class*="rounded-lg"] button:hover,
#slide-viewer-root div[class*="backdrop-blur-sm"][class*="rounded-lg"] button:hover svg {
  color: hsl(222.2, 47.4%, 11.2%);
}

/* Popup when ruler (measurement) is clicked - LIS-only feature message */
.measurement-lis-only-popup {
  position: fixed;
  transform: translate(-50%, -100%);
  z-index: 10002;
  max-width: 220px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.35;
  color: hsl(222.2, 84%, 4.9%);
  background: #fff;
  border: 1px solid hsl(214.3, 31.8%, 91.4%);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  white-space: normal;
}

/* Exit button - always visible */
#exit-button-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

#exit-btn {
  transition: background-color 0.2s;
  pointer-events: auto;
  cursor: pointer;
}

#exit-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}


/* Lock button states */
#slide-list-lock.locked {
  color: rgba(250, 204, 21, 1); /* Yellow when locked */
}

#slide-list-lock.locked i {
  color: rgba(250, 204, 21, 1); /* Yellow icon when locked */
}

#slide-list-lock.unlocked {
  color: rgba(255, 255, 255, 0.6); /* Grey when unlocked */
}

#slide-list-lock.unlocked i {
  color: rgba(255, 255, 255, 0.6); /* Grey icon when unlocked */
}

#slide-list-lock.unlocked:hover {
  color: rgba(255, 255, 255, 1);
}

#slide-list-lock.unlocked:hover i {
  color: rgba(255, 255, 255, 1);
}

/* Search input styling */
#slide-search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Sort and filter controls */
#slide-sort-select option {
  background-color: #1f2937;
  color: white;
}

/* Button hover states */
#slide-settings-btn:hover,
#slide-sort-btn:hover,
#slide-list-lock:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem;
}

/* Hide delete and edit functionality for public website */
/* Hide individual delete buttons */
button[title="Delete slide"],
button[title*="Delete"] svg.lucide-trash-2,
button[title*="Delete"] svg[class*="trash"],
.lucide-trash-2,
button:has(svg.lucide-trash-2) {
  display: none !important;
}

/* Hide rename/edit buttons */
button[title="Rename slide"],
button[title="Edit OCR data"],
button[title*="Rename"] svg.lucide-pencil,
button[title*="Edit"] svg.lucide-pencil,
button:has(svg.lucide-pencil) {
  display: none !important;
}

/* Hide selection checkboxes and bulk action controls */
button[role="checkbox"],
[role="checkbox"],
input[type="checkbox"]:not([type="checkbox"][role="switch"]),
button[title*="Select"],
.bulk-actions-toolbar,
button:has(svg.lucide-check) {
  display: none !important;
}

/* Hide Accept & Relabel button (OCR feature) */
button[title="Accept & Relabel"] {
  display: none !important;
}

/* Hide Send to Viewer button */
button[title*="Send to Viewer"],
button:has(svg.lucide-users) {
  display: none !important;
}

/* Additional specificity: Hide any button containing Trash2 or Pencil icons */
#slide-viewer-root button svg[class*="trash"],
#slide-viewer-root button svg[class*="pencil"] {
  display: none !important;
}

/* Hide parent buttons if they only contain hidden icons */
#slide-viewer-root button:has(svg[class*="trash"]),
#slide-viewer-root button:has(svg[class*="pencil"]) {
  display: none !important;
}

/* Hide label image section in slide list sidebar for de-identified educational slides */
/* The label container is w-24 h-24 (macro thumbnail is w-24 h-20, so we target h-24 specifically) */
/* Target the first child div in flex-col containers that has w-24 h-24 (label, not macro) */
#slide-viewer-root div[class*="flex-col"] > div[class*="w-24"][class*="h-24"]:first-child,
#slide-viewer-root div[class*="flex-col"] > div:first-child[class*="w-24"][class*="h-24"],
/* Target label containers with bg-white/5 and h-24 (label is h-24, macro is h-20) */
#slide-viewer-root div[class*="bg-white/5"][class*="rounded"][class*="w-24"][class*="h-24"],
#slide-viewer-root div[class*="w-24"][class*="h-24"][class*="bg-white/5"],
/* Target containers that contain label images (alt="Label") */
#slide-viewer-root div:has(img[alt="Label"])[class*="w-24"][class*="h-24"],
/* Target containers with Microscope icon fallback */
#slide-viewer-root div:has(svg[class*="microscope" i])[class*="w-24"][class*="h-24"] {
  display: none !important;
}

/* Hide Microscope icon fallbacks in slide list sidebar */
#slide-viewer-root div[class*="flex-col"] svg[class*="microscope" i],
#slide-viewer-root div[class*="w-24"][class*="h-24"] svg {
  display: none !important;
}

/* Make slide titles smaller to reduce line wrapping */
/* Target h3 elements with text-sm in slide list (SlideListOverlay) */
#slide-viewer-root h3[class*="font-medium"][class*="text-sm"],
#slide-viewer-root h3[class*="text-sm"][class*="text-white"],
#slide-viewer-root h3[class*="text-sm"][class*="text-green-200"] {
  font-size: 0.75rem !important; /* 12px instead of 14px (text-sm) */
  line-height: 1.2 !important;
}

/* Target slide title text in SlideCard component (uses inline fontSize style) */
/* Override inline styles for slide titles - reduce from 10px to 8.5px */
#slide-viewer-root div[class*="font-medium"][class*="leading-tight"][style*="fontSize"],
#slide-viewer-root div[class*="font-medium"][style*="fontSize"]:has(span[class*="truncate"]) {
  font-size: 8.5px !important; /* Reduce from default 10px to 8.5px (15% smaller) */
  line-height: 1.2 !important;
}

/* Also target slide titles in the right column of slide list items */
#slide-viewer-root div[class*="flex-col"] ~ div[class*="font-medium"],
#slide-viewer-root div[class*="space-y-1"] h3 {
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
}

/* Fix settings dialog positioning - make it appear above header using z-index */
/* Target Radix UI Dialog overlay/backdrop - ensure it's above header */
[data-radix-dialog-overlay],
[data-radix-portal] > [data-radix-dialog-overlay] {
  z-index: 10000 !important; /* Above header (z-index: 9999) */
}

/* Target Radix UI Dialog content - settings dialog uses max-w-md */
/* Override the default centered positioning (top-[50%] translate-y-[-50%]) */
[data-radix-dialog-content][class*="max-w-md"],
[data-radix-dialog-content][class*="max-w-md"][class*="top-[50%]"] {
  top: 50% !important; /* Keep centered vertically */
  max-height: calc(100vh - 100px) !important; /* Reduce height slightly */
  transform: translate(-50%, -50%) !important; /* Center both horizontally and vertically */
  max-width: 24rem !important; /* Reduce from ~28rem (max-w-md) to 24rem (~384px) */
  z-index: 10001 !important; /* Above overlay (10000) and header (9999) */
}

/* Target any dialog content that uses the default centered positioning */
/* Match the exact classes used by Radix UI Dialog */
[data-radix-dialog-content][class*="fixed"][class*="left-[50%]"][class*="top-[50%]"],
[data-radix-dialog-content][style*="top"][style*="50%"],
/* Target by transform classes */
[data-radix-dialog-content][class*="translate-x-[-50%]"][class*="translate-y-[-50%]"],
[data-radix-dialog-content][class*="translate-x-[-50%]"][class*="translate-y-[-48%]"] {
  top: 50% !important;
  max-height: calc(100vh - 100px) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10001 !important;
}

/* Override translate-y-[-50%] if present - ensure proper centering */
[data-radix-dialog-content][class*="translate-y-[-50%]"],
[data-radix-dialog-content][class*="translate-y-[-48%]"] {
  transform: translate(-50%, -50%) !important;
  z-index: 10001 !important;
}

/* Target slide viewer settings dialog specifically - more aggressive override */
/* Settings dialog is max-w-md and contains "Slide Viewer Settings" title */
#slide-viewer-root ~ [data-radix-dialog-content],
#slide-viewer-root [data-radix-dialog-content],
/* Target dialogs that appear when slide viewer is present */
body:has(#slide-viewer-root) [data-radix-dialog-content][class*="max-w-md"],
/* Target any Radix dialog content */
[data-radix-dialog-content] {
  z-index: 10001 !important; /* Ensure it's above header */
}

/* Target Radix Dialog Portal container if it exists */
[data-radix-portal] {
  z-index: 10000 !important;
}

/* More aggressive: Target any element containing Radix dialog that might be limiting z-index */
/* Note: :has() has limited browser support, but Radix typically renders portals at body level */
body > [data-radix-portal],
html > body > [data-radix-portal] {
  z-index: 10000 !important;
}

/* Ensure dialog content is always above everything - most aggressive rule */
[data-radix-dialog-content] {
  position: fixed !important;
  z-index: 10001 !important;
}

/* Fallback: Target by common Radix UI class patterns if data attributes don't work */
[class*="DialogContent"],
[class*="DialogOverlay"] {
  z-index: 10001 !important;
}

/* Ensure dialog title is visible and has proper spacing */
[data-radix-dialog-content] h2:first-child,
[data-radix-dialog-content] [class*="DialogTitle"],
[data-radix-dialog-content] > div:first-child h2 {
  padding-top: 0.5rem !important;
  margin-top: 0 !important;
}

/* Force white background on settings dialog - override bg-background variable */
[data-radix-dialog-content],
[data-radix-dialog-content][class*="bg-background"],
[data-radix-dialog-content][class*="max-w-md"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Ensure dialog content has opaque white background */
body:has(#slide-viewer-root) [data-radix-dialog-content],
#slide-viewer-root ~ [data-radix-dialog-content],
#slide-viewer-root [data-radix-dialog-content] {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Actual rendered shadcn/radix selectors for dialog content */
/* Some builds do not emit data-radix-dialog-content attributes */
[role="dialog"][class*="bg-background"],
[role="dialog"][class*="max-w-md"][class*="bg-background"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  background-image: none !important;
}