/**
 * TTN Global – fluid responsive layout
 * Works with html[data-viewport] set by js/layout.js (xs | sm | md | lg | xl)
 * Media queries below are fallbacks when JS has not run yet.
 */

:root {
  --content-padding: clamp(0.75rem, 2.5vw, 1.5rem);
  --page-title-size: clamp(1.15rem, 2.5vw, 1.5rem);
  --card-padding: clamp(0.85rem, 2vw, 1.25rem);
  --chart-height: clamp(100px, 22vw, 140px);
  --table-scroll-min: 480px;
}

/* Prevent horizontal page scroll – tables scroll inside .table-wrap only */
#page-content,
.dashboard-content,
.main-area,
.card,
.card--full,
.table-card {
  min-width: 0;
  max-width: 100%;
}

.table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap .data-table {
  width: 100%;
  min-width: var(--table-scroll-min);
}

.card > .data-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Fluid grids – adapt to any container width */
.kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.stats-row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
}

.tables-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.form-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.page-header h1 {
  font-size: var(--page-title-size);
}

.dashboard-content {
  padding: var(--content-padding);
}

.card {
  padding: var(--card-padding);
}

.card-chart-wrap {
  height: var(--chart-height);
}

.card-chart-wrap.tall {
  height: calc(var(--chart-height) + 20px);
}

.menu-toggle {
  display: none;
}

.sidebar-overlay {
  display: none;
}

/* ── XL: large desktop (≥1200px) ── */
html[data-viewport="xl"] {
  --sidebar-width: 220px;
  --topbar-height: 96px;
}

/* ── LG: desktop (992–1199px) ── */
html[data-viewport="lg"] {
  --sidebar-width: 220px;
  --topbar-height: 80px;
}

html[data-viewport="lg"] .topbar .brand-logo {
  width: 64px;
  height: 64px;
}

html[data-viewport="lg"] .search-wrap {
  max-width: 360px;
}

/* ── MD: tablet (768–991px) – compact icon sidebar ── */
html[data-viewport="md"] {
  --sidebar-width: 72px;
  --topbar-height: 64px;
}

html[data-viewport="md"] .sidebar {
  width: var(--sidebar-width);
  padding: 0.65rem 0.4rem;
  transform: none;
}

html[data-viewport="md"] .sidebar-brand {
  justify-content: center;
  padding: 0.35rem 0.25rem 0.75rem;
  margin-bottom: 0.15rem;
}

html[data-viewport="md"] .sidebar-brand-text,
html[data-viewport="md"] .sidebar-label {
  display: none;
}

html[data-viewport="md"] .sidebar-brand img {
  width: 40px;
  height: 40px;
}

html[data-viewport="md"] .sidebar-nav a {
  justify-content: center;
  padding: 0.55rem;
}

html[data-viewport="md"] .main-area {
  margin-left: var(--main-gutter, 72px);
}

html[data-viewport="md"] .topbar .brand-logo {
  width: 44px;
  height: 44px;
}

html[data-viewport="md"] .search-wrap {
  display: none;
}

html[data-viewport="md"] .user-label {
  display: none;
}

/* ── SM: mobile landscape / large phone (576–767px) ── */
html[data-viewport="sm"] {
  --sidebar-width: min(85vw, 280px);
  --topbar-height: 60px;
}

html[data-viewport="sm"] .menu-toggle {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
}

html[data-viewport="sm"] .sidebar-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

html[data-viewport="sm"] body.sidebar-open .sidebar-overlay {
  opacity: 1;
  pointer-events: auto;
}

html[data-viewport="sm"] .sidebar {
  width: var(--sidebar-width);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 120;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

html[data-viewport="sm"] body.sidebar-open .sidebar {
  transform: translateX(0);
}

html[data-viewport="sm"] body.sidebar-open {
  overflow: hidden;
}

html[data-viewport="sm"] .main-area {
  margin-left: 0;
}

html[data-viewport="sm"] .topbar {
  height: var(--topbar-height);
  gap: 0.5rem;
  padding: 0 max(0.75rem, env(safe-area-inset-right)) 0 max(0.75rem, env(safe-area-inset-left));
}

html[data-viewport="sm"] .brand {
  min-width: 0;
  flex: 1;
}

html[data-viewport="sm"] .topbar .brand-logo {
  width: 38px;
  height: 38px;
}

html[data-viewport="sm"] .brand-name {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-viewport="sm"] .search-wrap,
html[data-viewport="sm"] .user-label {
  display: none;
}

html[data-viewport="sm"] .page-toolbar {
  flex-direction: column;
  align-items: stretch;
}

html[data-viewport="sm"] .page-toolbar > .btn,
html[data-viewport="sm"] .page-toolbar > .btn-primary {
  width: 100%;
  justify-content: center;
}

html[data-viewport="sm"] .table-wrap .data-table {
  font-size: 0.82rem;
}

html[data-viewport="sm"] .modal-overlay {
  padding: 0;
  align-items: flex-end;
}

html[data-viewport="sm"] .modal {
  width: 100%;
  max-width: none;
  max-height: 92vh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

html[data-viewport="sm"] .modal-footer {
  flex-direction: column-reverse;
}

html[data-viewport="sm"] .modal-footer .btn {
  width: 100%;
  justify-content: center;
}

html[data-viewport="sm"] .actions-cell {
  flex-direction: column;
  align-items: stretch;
}

html[data-viewport="sm"] .actions-cell .btn {
  width: 100%;
  justify-content: center;
}

/* ── XS: small phone (<576px) ── */
html[data-viewport="xs"] {
  --sidebar-width: min(92vw, 300px);
  --topbar-height: 56px;
  --table-scroll-min: 440px;
}

html[data-viewport="xs"] .menu-toggle {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
}

html[data-viewport="xs"] .sidebar-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

html[data-viewport="xs"] body.sidebar-open .sidebar-overlay {
  opacity: 1;
  pointer-events: auto;
}

html[data-viewport="xs"] .sidebar {
  width: var(--sidebar-width);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 120;
}

html[data-viewport="xs"] body.sidebar-open .sidebar {
  transform: translateX(0);
}

html[data-viewport="xs"] body.sidebar-open {
  overflow: hidden;
}

html[data-viewport="xs"] .main-area {
  margin-left: 0;
}

html[data-viewport="xs"] .topbar {
  height: var(--topbar-height);
  padding: 0 max(0.65rem, env(safe-area-inset-right)) 0 max(0.65rem, env(safe-area-inset-left));
}

html[data-viewport="xs"] .topbar .brand-logo {
  width: 34px;
  height: 34px;
}

html[data-viewport="xs"] .brand-name {
  font-size: 0.85rem;
}

html[data-viewport="xs"] .search-wrap,
html[data-viewport="xs"] .user-label {
  display: none;
}

html[data-viewport="xs"] .page-toolbar {
  flex-direction: column;
  align-items: stretch;
}

html[data-viewport="xs"] .page-toolbar > .btn,
html[data-viewport="xs"] .page-toolbar > .btn-primary {
  width: 100%;
}

html[data-viewport="xs"] .kpi-grid,
html[data-viewport="xs"] .stats-row {
  grid-template-columns: 1fr;
}

html[data-viewport="xs"] .alert-metrics {
  grid-template-columns: 1fr 1fr;
}

html[data-viewport="xs"] .table-wrap .data-table {
  font-size: 0.78rem;
}

html[data-viewport="xs"] .modal-overlay {
  padding: 0;
  align-items: flex-end;
}

html[data-viewport="xs"] .modal {
  width: 100%;
  max-width: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

html[data-viewport="xs"] .modal-footer {
  flex-direction: column-reverse;
}

html[data-viewport="xs"] .modal-footer .btn {
  width: 100%;
}

html[data-viewport="xs"] .actions-cell .btn {
  width: 100%;
}

html[data-viewport="xs"] .form-group input,
html[data-viewport="xs"] .form-group select,
html[data-viewport="xs"] .form-group textarea {
  font-size: 16px;
  min-height: 44px;
}

html[data-viewport="xs"] .btn {
  min-height: 44px;
}

html[data-viewport="xs"] .filter-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html[data-viewport="xs"] .table-card .card-header {
  flex-direction: column;
  align-items: flex-start;
}

/* Touch + small viewports */
html[data-viewport="xs"] .toast,
html[data-viewport="sm"] .toast {
  left: 1rem;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
}

/* ── CSS-only fallbacks (no JS) ── */
@media (max-width: 991px) and (min-width: 768px) {
  :root {
    --main-gutter: 72px;
  }

  .sidebar:not([data-force-drawer]) {
    width: 72px;
    padding: 0.65rem 0.4rem;
  }

  .sidebar-brand-text,
  .sidebar-label {
    display: none;
  }

  .sidebar-nav a {
    justify-content: center;
  }

  .main-area {
    margin-left: var(--main-gutter, 72px);
  }

  .search-wrap {
    display: none;
  }
}

@media (max-width: 767px) {
  :root {
    --main-gutter: 0px;
    --topbar-height: 56px;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    opacity: 0;
    pointer-events: none;
  }

  body.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.45);
  }

  .sidebar {
    transform: translateX(-100%);
    z-index: 120;
    width: min(88vw, 280px);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .main-area {
    margin-left: 0 !important;
    width: 100%;
  }

  .topbar {
    gap: 0.35rem;
    padding: 0 max(0.65rem, env(safe-area-inset-right)) 0 max(0.65rem, env(safe-area-inset-left));
    height: var(--topbar-height);
  }

  .topbar .brand-logo {
    width: 36px;
    height: 36px;
  }

  .search-wrap,
  .user-label {
    display: none;
  }

  .kpi-grid,
  .stats-row {
    grid-template-columns: 1fr;
  }

  .page-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .page-toolbar > .btn,
  .page-toolbar > .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}