/*
 * High-resolution layout (QHD / 2K @ 2560px+, 4K UHD @ 3840px+).
 * Loaded after Tailwind + app_ui.css. Baseline matches 1080p (1920×1080) behavior below 2560px width.
 */

:root {
  --ui-content-max: 72rem;
  --ui-sidebar-width: 14rem;
  --ui-drawer-width: 360px;
  --ui-shell-narrow: 28rem;
  --ui-shell-medium: 42rem;
  --ui-shell-wide: 32rem;
}

/* ----- 2560px+ (QHD / common "2K" desktop width) ----- */
@media (min-width: 2560px) {
  :root {
    --ui-content-max: 110rem;
    --ui-sidebar-width: 17rem;
    --ui-drawer-width: 440px;
    --ui-shell-narrow: 36rem;
    --ui-shell-medium: 56rem;
    --ui-shell-wide: 42rem;
  }

  html {
    font-size: 112.5%;
  }

  #dashboard-main-scroll,
  #platform-main-scroll {
    padding: 2.5rem 3rem;
  }

  #sopcheck-toast-host {
    max-width: 28rem !important;
  }

  .sopcheck-confirm-panel {
    max-width: 36rem !important;
  }

  .ui-page-heading {
    font-size: clamp(1.75rem, 1.2vw + 1rem, 2.25rem);
    line-height: 1.2;
  }

  .ui-stat {
    font-size: clamp(2rem, 1.5vw + 1rem, 3rem);
  }

  .ui-panel__title {
    font-size: 1.25rem;
  }
}

/* ----- 3840px+ (4K UHD width) ----- */
@media (min-width: 3840px) {
  :root {
    --ui-content-max: min(140rem, 88vw);
    --ui-sidebar-width: 19rem;
    --ui-drawer-width: 480px;
    --ui-shell-narrow: 40rem;
    --ui-shell-medium: 64rem;
    --ui-shell-wide: 48rem;
  }

  html {
    font-size: 125%;
  }

  #dashboard-main-scroll,
  #platform-main-scroll {
    padding: 3rem 4rem;
  }

  #sopcheck-toast-host {
    max-width: 32rem !important;
  }

  .sopcheck-confirm-panel {
    max-width: 42rem !important;
  }
}

/* ----- App shell: sidebar + main content cap ----- */
#dashboard-sidebar,
#platform-sidebar {
  width: var(--ui-sidebar-width) !important;
  flex-shrink: 0;
}

.ui-app-content,
.max-w-6xl {
  width: 100%;
  max-width: var(--ui-content-max);
}

.ui-app-content--centered {
  margin-left: auto;
  margin-right: auto;
}

/* Tailwind max-width utilities used on auth / quiz / forms */
.max-w-md {
  max-width: var(--ui-shell-narrow) !important;
}

.max-w-lg {
  max-width: var(--ui-shell-wide) !important;
}

.max-w-2xl {
  max-width: var(--ui-shell-medium) !important;
}

/* Mobile navigation drawers */
#nav-drawer,
#platform-nav-drawer {
  width: var(--ui-drawer-width) !important;
  min-width: var(--ui-drawer-width) !important;
  max-width: min(var(--ui-drawer-width), 100vw) !important;
  box-sizing: border-box;
}

/* ClickUp preview drawer (upload page) */
#cu-preview-drawer {
  max-width: var(--ui-drawer-width) !important;
}

/* Filter bars: avoid tiny controls on ultra-wide tables pages */
@media (min-width: 2560px) {
  .ui-filter-panel {
    padding: 1.25rem 1.5rem;
  }

  .ui-data-table th,
  .ui-data-table td {
    padding: 0.625rem 1.25rem;
  }
}

@media (min-width: 3840px) {
  .ui-filter-panel {
    padding: 1.5rem 2rem;
  }

  .ui-data-table th,
  .ui-data-table td {
    padding: 0.75rem 1.5rem;
  }
}