/*
  Cross-device layout layer
  -------------------------
  Wide content such as attendance tables and seating plans keeps its readable
  size.  On small screens only its own viewport scrolls horizontally; the page
  itself never needs to be dragged sideways.
*/

:root {
  --responsive-gutter: clamp(12px, 3.5vw, 56px);
  --responsive-touch-target: 44px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body {
  overflow-x: clip;
}

img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

button,
.btn,
.button,
.role,
.lang-btn,
.map-scroll-button,
.seat-map-scroll-control {
  touch-action: manipulation;
}

input,
select,
textarea,
.btn,
.button {
  min-height: var(--responsive-touch-target);
}

.layout,
.main,
.section,
.card,
.overview,
.banner,
.event,
.event-row,
.wrap,
.seat-map,
.seat-map-viewport,
.seat-map-scroll-window,
.table-layout-page,
.table-layout-shell,
.layout-frame,
.status-dialog,
.modalbox {
  min-width: 0;
}

/* Deliberately scrollable sections. These are the only horizontal scroll
   surfaces on a phone, so large tables and plans remain legible. */
.table-scroll,
.seat-map-scroll-window,
.layout-scroll,
#viewGuests {
  max-width: 100%;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.table-scroll,
.seat-map-scroll-window,
.layout-scroll {
  overflow-x: auto;
}

@media (min-width: 701px) and (max-width: 1120px) {
  .main {
    min-width: 0 !important;
    padding-right: clamp(22px, 3vw, 34px) !important;
    padding-left: clamp(22px, 3vw, 34px) !important;
  }

  .dashboard-overview .overview-stats,
  .dashboard-home .recent-programs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  .landing {
    min-height: 100svh;
    padding: 12px !important;
  }

  .landing .box {
    width: 100% !important;
    max-width: 680px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .top,
  .head {
    height: auto !important;
    min-height: 60px;
    padding-inline: var(--responsive-gutter) !important;
  }

  .wrap {
    min-height: calc(100svh - 60px);
    padding: 24px 12px !important;
  }

  .card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 14px !important;
  }

  .row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .modal {
    align-items: flex-start !important;
    padding: 12px !important;
    overflow-y: auto !important;
  }

  .modalbox,
  .status-dialog {
    width: min(100%, 720px) !important;
    max-width: 100% !important;
    max-height: calc(100svh - 24px) !important;
    margin-block: auto !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  /* Urusetia turns into a compact, touch-friendly top navigation. */
  .layout {
    display: block !important;
    min-height: 100svh !important;
  }

  #sidePanel.side {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 12px !important;
  }

  #sidePanel .side-toggle {
    display: none !important;
  }

  #sidePanel .brand {
    margin-bottom: 10px !important;
  }

  #sidePanel .nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #sidePanel .nav button {
    min-height: var(--responsive-touch-target) !important;
    justify-content: center;
    padding: 10px 8px !important;
  }

  #sidePanel .nav-label {
    line-height: 1.12;
    white-space: normal;
  }

  .main {
    width: 100% !important;
    max-width: none !important;
    padding: 20px 14px 34px !important;
  }

  .dashboard-topbar,
  .overview-head,
  .event,
  .program-shelf-toolbar {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .dashboard-top-actions {
    align-self: flex-start;
  }

  .dashboard-search-wrap,
  .dashboard-overview select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .dashboard-overview .overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .dashboard-metric {
    min-height: 96px;
    gap: 9px;
    padding: 12px !important;
  }

  .metric-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .program-shelf-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .program-shelf-filters .btn {
    width: 100%;
  }

  .program-shelf-filters .btn:last-child {
    grid-column: 1 / -1;
  }

  .dashboard-home .recent-programs {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .event > .btn,
  .event > .primary {
    width: 100%;
  }

  /* Attendance: keep a real table and slide only inside this wrapper. */
  .table-scroll {
    width: 100% !important;
    border-radius: 14px;
    scroll-snap-type: x proximity;
  }

  .table-scroll table {
    min-width: 900px !important;
  }

  .table-scroll th,
  .table-scroll td {
    scroll-snap-align: start;
  }

  /* Urusetia participant lists: the modal/table is the scroll surface. */
  #viewGuests {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
  }

  #viewGuests .guest-table,
  .modalbox .guest-table {
    display: table !important;
    width: 700px !important;
    min-width: 700px !important;
    white-space: normal !important;
  }

  /* Seating and table plans retain readable labels and slide inside their own
     frames, never across the whole page. */
  .seat-map-viewport {
    width: 100% !important;
    max-width: 100% !important;
  }

  .seat-map-scroll-window,
  .layout-scroll {
    touch-action: pan-x;
  }

  .table-layout-page {
    padding: 12px !important;
  }

  .table-layout-shell {
    padding: 24px 14px 28px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 520px) {
  .landing .roles {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .landing .roles .role {
    min-height: 112px !important;
  }

  .dashboard-overview .overview-stats {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dashboard-metric {
    min-height: 82px;
  }

  #sidePanel .nav button {
    font-size: 12px !important;
  }

  .status-dialog .btn {
    width: 100%;
  }
}