/* Responsive layout helpers (Windows/Linux/mobile/tablet)
 *
 * IMPORTANT:
 * - Do NOT force global font scaling here.
 * - Let the browser/OS handle actual screen scaling (the user’s zoom/DPI).
 *
 * This file should only contain layout resilience fixes (vh/dvh, wrapping, small-screen layout),
 * not cross-OS font-size overrides that can make Linux appear “too big”.
 */

:root {
  /* Spacing tokens (fixed, so we don't "inflate" on large screens).
   * Using vw-based spacing makes Windows (often higher resolution) feel oversized.
   */
  --ui-space-1: 6px;
  --ui-space-2: 12px;
  --ui-space-3: 16px;
  --ui-radius: 10px;
}

/* Never force font-size here; only keep text-size-adjust safety */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Prevent flex children from overflowing and "overlapping" */
.top-navbar,
.nav-left,
.nav-right,
.nav-tabs,
.top-bar,
.center-area {
  min-width: 0;
}

/* Better viewport height behavior on mobile browsers */
.dashboard-container,
.viewer-container {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ===== Main app (templates/base.html) ===== */
.top-navbar {
  height: auto !important;
  min-height: 50px;
  padding: var(--ui-space-1) var(--ui-space-2) !important;
  gap: var(--ui-space-2);
  flex-wrap: wrap;
  row-gap: var(--ui-space-1);
}

.nav-right,
.nav-left {
  flex-wrap: wrap;
}

.nav-tabs {
  flex-wrap: wrap;
  row-gap: var(--ui-space-1);
}

.nav-tab {
  padding: 0.45rem 0.75rem !important;
}

.controls-bar {
  height: auto !important;
  min-height: 42px;
  padding: var(--ui-space-1) var(--ui-space-2) !important;
  gap: var(--ui-space-1) !important;
}

/* Make dense tables usable on small screens */
@media (max-width: 900px) {
  .data-table-container {
    /* Prefer wrapping/reflow over sideways scrolling */
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* Phone layout: keep tabs accessible without breaking */
@media (max-width: 600px) {
  /* Stack left/right sections to avoid overlap on very narrow widths */
  .top-navbar {
    align-items: flex-start;
  }

  .nav-left,
  .nav-right {
    width: 100%;
  }

  /* Ensure tab strip drops to its own line below the logo */
  .nav-tabs {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Prefer wrapping (no sideways scrolling / hidden tabs) */
  .nav-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
    gap: var(--ui-space-1);
  }
  .nav-tab {
    flex: 1 1 auto;
    white-space: normal;
  }

  /* Controls bar: avoid horizontal overflow from min-width inputs */
  .controls-bar .control-group {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .controls-bar .control-input,
  .controls-bar .control-select {
    width: 100%;
    min-width: 0;
  }
}

/* Tiny phones / worst-case widths: keep actions reachable (scroll instead of overlap) */
@media (max-width: 420px) {
  .top-navbar {
    gap: var(--ui-space-1);
    padding: var(--ui-space-1) var(--ui-space-1) !important;
  }

  .nav-left {
    gap: var(--ui-space-1);
  }

  .nav-right {
    /* Prefer wrapping (no sideways scrolling / hidden buttons) */
    flex-wrap: wrap;
    overflow-x: visible;
    max-width: 100%;
    gap: var(--ui-space-1);
    padding-bottom: 0;
  }

  .nav-right > * {
    flex: 1 1 auto;
    white-space: normal;
  }
}

/* ===== DICOM viewer (templates/dicom_viewer/base.html) ===== */
.viewer-container {
  height: 100vh !important;
  height: 100dvh !important;
  /* Let header/footer grow if they wrap; keep viewport from being pushed out. */
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

/* DICOM viewer header: avoid wrapping-induced overlap into viewport */
.viewer-container .top-navbar {
  flex-wrap: wrap;
  align-content: center;
}

.viewer-container .top-navbar .nav-left {
  /* Allow patient/study text to shrink instead of forcing overlaps */
  flex: 1 1 auto;
  min-width: 0;
}

.viewer-container .top-navbar .nav-right {
  /* Keep action buttons visible; wrap if needed */
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.viewer-container .patient-info {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Viewer panels must be allowed to shrink within minmax(0, 1fr) rows */
.viewer-container .toolbar,
.viewer-container .right-panel,
.viewer-container .viewport {
  min-height: 0;
}

/* Right-panel popups should be positioned relative to the rail, not the viewport */
.viewer-container .right-panel {
  position: relative !important;
}

.viewer-container .control-popup {
  /* Anchor the popup to the left of the right rail reliably */
  top: var(--ui-space-2) !important;
  right: calc(100% + var(--ui-space-2)) !important;
  left: auto !important;
}

/* Right-panel popups: keep them inside the viewport on narrow/short screens */
.viewer-container .control-popup {
  width: min(280px, calc(100vw - 90px));
  max-width: 92vw;
  max-height: calc(100dvh - 90px);
  overflow: auto;
}

/* Fixed-position floating panels (AI/3D/etc): keep them on-screen on small viewports */
.viewer-container .floating-panel {
  width: min(320px, 92vw) !important;
  right: var(--ui-space-2) !important;
  left: auto !important;
  max-height: calc(100dvh - 90px) !important;
}

.viewer-container .floating-panel .panel-content {
  max-height: calc(100dvh - 220px) !important;
}

/* Any modal-ish content should never exceed the viewport */
.viewer-container .modal-content {
  max-width: 95vw;
  max-height: 95dvh;
}

/* ===== DICOM viewer (templates/dicom_viewer/masterpiece_viewer.html) ===== */
.viewer-container {
  /* Used by masterpiece_viewer.html for positioning fixed UI elements reliably */
  --viewer-toolbar-w: clamp(56px, 6vw, 70px);
  --viewer-topbar-h: 60px;
}

.viewer-container .top-bar {
  height: auto !important;
  min-height: var(--viewer-topbar-h);
  flex-wrap: wrap;
  padding: var(--ui-space-1) var(--ui-space-2) !important;
  row-gap: var(--ui-space-1);
}

/* Long patient identifiers should not force layout overlap */
.viewer-container .patient-info {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Crosshair rotate control: anchor to toolbar/topbar sizes, not hardcoded pixels */
.mpr-crosshair-rotate {
  left: calc(var(--viewer-toolbar-w) + var(--ui-space-3)) !important;
  top: calc(var(--viewer-topbar-h) + 32px) !important;
  width: min(320px, 92vw) !important;
  max-height: calc(100dvh - 120px);
  overflow: auto;
}

@media (max-width: 768px) {
  /* Masterpiece viewer stacks toolbar + top-bar; keep overlay usable */
  .mpr-crosshair-rotate {
    left: var(--ui-space-2) !important;
    top: calc((var(--viewer-topbar-h) * 2) + var(--ui-space-2)) !important;
  }
}

/* Short-height screens: reduce chrome before it starts covering the viewport */
@media (max-height: 560px) {
  .viewer-container .top-bar {
    padding: var(--ui-space-1) var(--ui-space-2) !important;
    gap: var(--ui-space-1);
  }
}

/* Tablet: slightly narrower rails */
@media (max-width: 900px) {
  .viewer-container {
    grid-template-columns: 64px 1fr 54px !important;
    /* Keep header/footer flexible to prevent overlap when content wraps */
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }
}

/* Phone: stack layout, move left toolbar to bottom, hide right panel */
@media (max-width: 640px) {
  .viewer-container {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .top-navbar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    flex-wrap: wrap;
    gap: var(--ui-space-1);
    padding: var(--ui-space-1) var(--ui-space-2) !important;
  }

  .viewport {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 0;
  }

  .right-panel {
    display: none !important;
  }

  .toolbar {
    grid-column: 1 !important;
    grid-row: 3 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    min-width: 100% !important;
    max-width: none !important;
    width: 100% !important;
    border-right: none !important;
    border-top: 1px solid var(--border-color);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Avoid the toolbar covering the whole viewport */
    max-height: min(34dvh, 240px) !important;
    padding: var(--ui-space-1) !important;
    gap: var(--ui-space-1) !important;
  }

  .tool-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--ui-space-1) !important;
  }

  .tool-separator {
    display: none !important;
    width: 1px !important;
    height: 100% !important;
    margin: 0 var(--ui-space-1) !important;
  }

  .tool {
    width: 44px !important;
    height: 44px !important;
    font-size: 0 !important; /* icons only on phone; titles still provide tooltips */
  }

  .tool i {
    font-size: 18px !important;
  }
}

/* Tables: wrap content on small screens (avoid horizontal overflow) */
@media (max-width: 768px) {
  table {
    width: 100%;
    table-layout: fixed;
  }
  .table-responsive {
    /* Avoid “sideways scrolling containers” where possible */
    overflow-x: hidden !important;
  }
  th,
  td {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Buttons with fixed labels should wrap too */
  .btn-viewer {
    white-space: normal !important;
  }
}

/* App-wide small-screen overflow hardening */
@media (max-width: 768px) {
  /* Media should never force page width */
  img,
  svg,
  canvas,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* Common “search box in header” patterns */
  .chat-rooms-page .chat-search,
  .notifs-page .notifs-search,
  .perm-page .perm-search,
  .perm-edit .perm-search {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Mini counters/labels should wrap instead of pushing headers wider */
  .chat-rooms-page .chat-mini,
  .notifs-page .notifs-mini,
  .perm-page .perm-mini,
  .perm-edit .perm-mini {
    white-space: normal !important;
  }

  /* Grid cards: avoid min column widths that overflow on narrow phones */
  .chat-rooms-page .rooms-grid {
    grid-template-columns: 1fr !important;
  }

  /* Permission tables: shrink “min-width” columns so the table can fit */
  .perm-page .perm-cap-col {
    min-width: 44px !important;
  }
  .perm-page .perm-sticky-right {
    min-width: 72px !important;
  }
}

/* Fixed-position toasts/alerts: keep them on-screen */
@media (max-width: 600px) {
  .toast,
  .alert {
    max-width: calc(100vw - 24px) !important;
  }

  /* Template-local styles often force nowrap; override globally on phone widths */
  .btn-viewer {
    white-space: normal !important;
  }

  /* Form controls should never overflow their containers */
  input,
  select,
  textarea {
    max-width: 100%;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}