/* =========================================
   TEXAS OHIF - FINAL POLISH
========================================= */

:root {
  --tx-side-width: 175px;
  --tx-toolbar-width: 92px;
  --tx-panel-bg-1: #081320;
  --tx-panel-bg-2: #0d2236;
  --tx-panel-border: rgba(120, 180, 255, 0.22);
  --tx-panel-glow: rgba(40, 120, 255, 0.12);
}

/* Remove default OHIF bars */
.entry-header,
.notification-bar,
section.sidepanel.from-right {
  display: none !important;
}

/* Global */
html,
body,
#root {
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  height: 100vh !important;
  overflow: hidden !important;
}

#root > div:last-of-type {
  height: 100vh !important;
}

/* Main shell */
.FlexboxLayout {
  display: flex !important;
  height: 100vh !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  background: #000 !important;
}

/* -----------------------------------------
   LEFT PANEL
----------------------------------------- */
section.sidepanel.from-left.is-open {
  flex: 0 0 var(--tx-side-width) !important;
  width: var(--tx-side-width) !important;
  min-width: var(--tx-side-width) !important;
  max-width: var(--tx-side-width) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-right: 1px solid var(--tx-panel-border) !important;
  background:
    linear-gradient(180deg, var(--tx-panel-bg-1) 0%, var(--tx-panel-bg-2) 100%) !important;
  box-shadow: inset -8px 0 20px var(--tx-panel-glow) !important;
}

.study-browser {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 6px 6px 64px 6px !important; /* bottom padding for logo */
  box-sizing: border-box !important;
  background: transparent !important;
  overflow-y: auto !important;
}

.scrollable-study-thumbnails {
  padding: 0 !important;
  gap: 8px !important;
}

.thumbnail-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.thumbnail-container > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.thumbnail-container canvas,
.thumbnail-container img,
.thumbnail-container .thumbnail,
.thumbnail-container [class*="thumbnail"],
.thumbnail-container [class*="Thumbnail"] {
  display: block !important;
  width: calc(100% - 10px) !important;
  max-width: calc(100% - 10px) !important;
  height: auto !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* left text */
.study-browser,
.study-browser * {
  font-size: 12px !important;
}

/* logo footer */
.tx-left-logo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0.9;
}

.tx-left-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(70, 140, 255, 0.18));
}

/* -----------------------------------------
   CENTER PANEL
----------------------------------------- */
.main-content {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 120px 0 0 !important;
  box-sizing: border-box !important;
  background: #000 !important;
  overflow: hidden !important;
}

.ViewerMain {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.main-content > .ViewerMain > div,
.viewport-drop-target.viewport-container.active {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.viewport-element {
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
}

.viewport-element > div {
  top: 10px !important;
}

.viewport-element * {
  font-size: 0.95em !important;
}

/* -----------------------------------------
   RIGHT FLOATING TOOLBAR
----------------------------------------- */
.ToolbarRow {
  position: fixed !important;
  top: 14px !important;
  right: 14px !important;
  transform: none !important;
  z-index: 1000 !important;

  width: var(--tx-toolbar-width) !important;
  max-width: var(--tx-toolbar-width) !important;
  padding: 14px 10px !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important; /* more vertical spacing */

  background:
    linear-gradient(180deg, rgba(8,19,32,0.94) 0%, rgba(13,34,54,0.94) 100%) !important;
  border: 1px solid var(--tx-panel-border) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.35),
    inset 0 0 18px var(--tx-panel-glow) !important;
  overflow: visible !important;
}

/* hide OHIF wrapper groups */
.ToolbarRow > .pull-left,
.ToolbarRow > .pull-right,
.ToolbarRow > .btn-group {
  display: none !important;
}

.ToolbarRow > .toolbar-button,
.ToolbarRow > .expandableToolMenu {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 2px 0 !important;
  padding: 10px 4px !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-sizing: border-box !important;
}

/* larger icons */
.ToolbarRow svg {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

/* labels */
.toolbar-button-label {
  font-size: 12px !important;
  line-height: 1.18 !important;
  text-align: center !important;
  white-space: normal !important;
}

/* hover */
.ToolbarRow > .toolbar-button:hover,
.ToolbarRow > .expandableToolMenu:hover {
  background: rgba(100, 170, 255, 0.10) !important;
}

* {
  scrollbar-width: thin;
}