/* =========================================
   TEXAS OHIF - BALANCED LAYOUT
========================================= */

:root {
  --tx-side-width: 175px;
  --tx-toolbar-width: 58px;
}

/* Remove default OHIF bars */
.entry-header,
.notification-bar {
  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;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  background: linear-gradient(180deg, #071018 0%, #0b1622 100%) !important;
  overflow: hidden !important;
}

.study-browser {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  overflow-y: auto !important;
}

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

/* -----------------------------------------
   RIGHT PANEL - hidden, but preserve visual balance
----------------------------------------- */
section.sidepanel.from-right {
  display: none !important;
}

/* -----------------------------------------
   CENTER PANEL
----------------------------------------- */
.main-content {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 var(--tx-side-width) 0 0 !important; /* reserve same visual width on right */
  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 {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.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;
}

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

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

/* -----------------------------------------
   FLOATING RIGHT TOOLBAR
----------------------------------------- */
.ToolbarRow {
  position: fixed !important;
  top: 50% !important;
  right: calc((var(--tx-side-width) - var(--tx-toolbar-width)) / 2) !important;
  transform: translateY(-50%) !important;
  z-index: 1000 !important;

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

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;

  background: rgba(10, 18, 28, 0.76) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px) !important;
  overflow: visible !important;
}

/* Hide awkward OHIF wrappers */
.ToolbarRow > .pull-left,
.ToolbarRow > .pull-right,
.ToolbarRow > .btn-group {
  display: none !important;
}

/* Tool buttons */
.ToolbarRow > .toolbar-button,
.ToolbarRow > .expandableToolMenu {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 2px !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

.toolbar-button-label {
  font-size: 9px !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

/* Misc */
* {
  scrollbar-width: thin;
}