/**
 * Summer Camp Hub — shared mobile / touch layout overrides (CSS only).
 * Loaded after page styles so these rules win on narrow viewports.
 */

/* ── Foundations ─────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 768px) {
  html {
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
  }

  /* Hub shell only — fixed viewport height for dashboard + iframe tools */
  body:has(#app) {
    height: 100dvh;
    height: 100vh;
  }

  /* Avoid iOS input zoom while keeping readable body copy */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }

  button,
  .mini-btn,
  .topbar-btn,
  .session-manage-btn,
  label.file-btn,
  .import-file-btn,
  .tab,
  .tab-btn,
  .tabs button {
    min-height: 44px;
  }

  .table-wrap,
  .data-table-wrap,
  .tbl-scroll,
  .summary-table-wrap,
  .glis-table-wrap,
  .tbl-outer,
  .admin-legacy-import-table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Staff inline Remove / compact controls — not full-size tap targets */
  body:has(.sac-screen) #special-roles-grid .name-list button,
  body:has(.sac-screen) #night-off-grid .name-list button,
  body:has(.sac-screen) #card-special-assignments .special-def-row button {
    min-height: 0;
  }

  /* Hub chrome buttons — compact; global 44px tap targets not needed here */
  #app .topbar-btn,
  #app .topbar-home-btn,
  #app .session-manage-btn {
    min-height: 0;
  }
}

/* ── Hub shell (summer-camp-hub.html) ────────────────────────── */
@media (max-width: 768px) {
  .gate {
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .gate .box {
    padding: 22px 20px;
  }

  #app .topbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    padding-top: max(6px, env(safe-area-inset-top));
  }

  #app .topbar-home-btn {
    align-self: center;
    margin-right: 0;
    min-height: 0;
    padding: 5px 10px;
    font-size: 11px;
  }

  #app .topbar-right {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
  }

  #app .topbar-session {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }

  /* Selects are labeled in the UI — hide redundant YEAR/SESSION captions */
  #app .topbar-session .session-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  #app .cloud-year-select {
    flex: 0 0 68px;
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    padding: 5px 4px;
    font-size: 12px;
  }

  #app .cloud-session-select {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 5px 8px;
    font-size: 12px;
  }

  #app .hub-presence {
    flex: 0 1 auto;
    max-width: min(42vw, 160px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    padding: 3px 8px;
    font-size: 10px;
  }

  /* Sync + session meta already shown in the status strip below */
  #app .topbar-sync {
    display: none;
  }

  #app .topbar-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    min-height: 0;
    padding: 6px 4px;
    font-size: 9px;
    letter-spacing: 0.03em;
  }

  #app .status {
    padding: 4px 10px;
    font-size: 10px;
    line-height: 1.35;
    gap: 6px;
  }

  #app .hub-page-banner {
    padding: 14px 14px 10px;
  }

  #app .hub-page-banner-title {
    font-size: 18px;
  }

  #app .panel-body {
    padding: 12px 12px 20px;
  }

  #app .dash-kpi-row {
    grid-template-columns: 1fr;
  }

  #app .dash-kpi-val {
    font-size: 24px;
  }

  #app .dash-tool-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #app .dash-tool-card {
    min-height: 0;
  }

  #app .dash-tool-card:hover {
    transform: none;
  }

  #app .dash-tool-stat {
    font-size: 20px;
  }

  #app .dash-master-roster-head {
    flex-direction: column;
    align-items: stretch;
  }

  #app .dash-master-roster-search {
    min-width: 0;
    width: 100%;
  }

  #app .dash-master-roster-actions {
    width: 100%;
  }

  #app .dash-master-roster-actions .mini-btn {
    flex: 1 1 auto;
  }

  #app .data-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #app .data-toolbar .mini-btn {
    width: 100%;
  }

  #app .admin-main {
    padding: 16px 14px 28px;
  }

  #app .admin-main-head h3 {
    font-size: 20px;
  }

  #app .admin-sessions-wrap .session-form-grid {
    grid-template-columns: 1fr;
  }

  #app .admin-sessions-wrap .session-form-grid .span-2 {
    grid-column: auto;
  }

  #app .admin-sessions-wrap .session-list-item {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #app .admin-sessions-wrap .session-list-actions {
    width: 100%;
    justify-content: flex-end;
  }

  #app .admin-property-form {
    flex-direction: column;
    align-items: stretch;
  }

  #app .admin-property-form input[type="text"] {
    width: 100%;
  }

  #app .admin-staff-frame-wrap {
    min-height: 420px;
    height: min(62dvh, 720px);
  }

  #app .session-modal-backdrop,
  #app .hub-child-confirm-backdrop,
  #app .admin-property-remove-backdrop {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  #app .hub-presence {
    display: none;
  }

  #app .dash-hero {
    padding: 14px 16px;
  }

  #app .dash-hero h3 {
    font-size: 16px;
  }

  #app .admin-nav-item {
    flex: 1 1 calc(50% - 6px);
    font-size: 12px;
    padding: 10px 8px;
  }
}

/* ── Standalone tool bar ─────────────────────────────────────── */
@media (max-width: 768px) {
  .hub-tool-bar {
    gap: 8px;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .hub-tool-bar .hub-tool-title {
    flex: 1 1 100%;
    order: 2;
    font-size: 12px;
    line-height: 1.3;
  }

  .hub-tool-bar .hub-tool-session {
    order: 3;
    flex: 1 1 100%;
    font-size: 11px;
    line-height: 1.35;
  }

  .hub-tool-bar-right {
    order: 4;
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .hub-tool-bar .hub-presence {
    max-width: none;
    flex: 1 1 auto;
    white-space: normal;
    line-height: 1.35;
  }

  .hub-tool-bar a,
  .hub-tool-bar button.hub-tool-back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── Shared page chrome ──────────────────────────────────────── */
@media (max-width: 768px) {
  .wrap {
    padding: 12px !important;
  }

  .session-page-line,
  .bible-session-line {
    font-size: 18px !important;
    line-height: 1.2 !important;
    word-break: break-word;
  }

  h1 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .hdr {
    flex-direction: column;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  .hdr h1,
  .hdr-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  .hdr .sub,
  .hdr-meta {
    max-width: none !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .page-banner {
    padding: 12px 14px !important;
  }

  .page-banner-copy {
    font-size: 11px !important;
  }

  .row {
    gap: 10px !important;
  }

  .row > button,
  .row > label.file-btn,
  .row > .import-file-btn {
    flex: 1 1 calc(50% - 10px);
    min-width: min(100%, 140px);
    justify-content: center;
    text-align: center;
  }

  .card {
    padding: 12px !important;
  }
}

@media (max-width: 480px) {
  .row > button,
  .row > label.file-btn,
  .row > .import-file-btn {
    flex: 1 1 100%;
  }
}

/* ── Bible Study ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bible-primary-nav .tabs {
    width: 100%;
  }

  .bible-primary-nav .tab-btn,
  .bible-primary-nav button.ghost {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .bible-roster-actions {
    grid-template-columns: 1fr !important;
  }

  .kpis {
    grid-template-columns: 1fr 1fr !important;
  }

  body.camp-embedded .wrap {
    padding: 10px 10px 16px !important;
  }
}

@media (max-width: 480px) {
  .bible-primary-nav .tab-btn,
  .bible-primary-nav button.ghost {
    flex: 1 1 100%;
  }

  .kpis {
    grid-template-columns: 1fr !important;
  }
}

/* ── POI Roster ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tabs button {
    flex: 1 1 auto;
    min-width: min(100%, 120px);
  }

  .dashboard-split {
    grid-template-columns: 1fr !important;
  }
}

/* ── Staff Automation Center ─────────────────────────────────── */
@media (max-width: 1100px) {
  /* JS sets inline repeat(N, 1fr) — override so role columns are not crushed on narrow screens */
  #special-roles-grid .special-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  #special-roles-grid .special-row {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  #special-roles-grid .assign-card,
  #night-off-grid .assign-card {
    padding: 10px 12px !important;
  }

  #special-roles-grid .assign-card > div[style*="font-weight:700"] {
    font-size: 14px !important;
    line-height: 1.25;
    margin-bottom: 2px;
    word-break: break-word;
  }

  #special-roles-grid .assign-meta,
  #night-off-grid .assign-meta {
    font-size: 11px;
    line-height: 1.35;
    margin-bottom: 6px;
  }

  #special-roles-grid .name-list,
  #night-off-grid .name-list {
    padding-left: 0;
    list-style: none;
    margin: 4px 0 8px;
  }

  /* Name + Remove on one row — avoids tall stacked rows */
  #special-roles-grid .name-list li,
  #night-off-grid .name-list li {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
  }

  #special-roles-grid .name-list li > span,
  #night-off-grid .name-list li > span {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
    word-break: break-word;
  }

  #special-roles-grid .name-list button,
  #night-off-grid .name-list button {
    flex-shrink: 0;
    align-self: center;
    min-height: 34px;
    padding: 4px 10px;
    font-size: 11px;
  }

  #special-roles-grid .assign-card textarea {
    width: 100%;
    min-height: 56px;
    margin-top: 2px;
  }

  #special-roles-grid .assign-card button[data-special-add],
  #night-off-grid .assign-card button[data-night-add-selected] {
    width: auto;
    min-height: 38px;
    margin-top: 6px;
    padding: 7px 14px;
  }

  .hospitality-afternoon-off-wrap {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 4px 6px;
    margin-left: 6px !important;
    width: auto;
  }

  .hospitality-afternoon-off-select {
    width: auto;
    min-width: 7.5rem;
    max-width: 100% !important;
  }

  #night-off-grid .grid3 {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  #night-off-grid .night-pick-select {
    width: 100%;
    margin-top: 4px;
  }

  /* Role definition list: name on row 1, staff count + remove on row 2 */
  #card-special-assignments .special-defs-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
  }

  #card-special-assignments .special-defs-toolbar input[type="text"] {
    flex: 1 1 100%;
    width: auto !important;
    max-width: none !important;
  }

  #card-special-assignments .special-defs-toolbar input[type="number"] {
    width: 52px !important;
    flex: 0 0 52px;
  }

  #card-special-assignments .special-defs-toolbar button {
    width: auto;
    min-height: 38px;
    flex: 1 1 auto;
  }

  #card-special-assignments .special-def-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 6px 10px;
  }

  #card-special-assignments .special-def-row .special-def-name {
    flex: 1 1 100%;
    width: auto !important;
    min-width: 0;
  }

  #card-special-assignments .special-def-row .hint {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
    font-size: 11px;
  }

  #card-special-assignments .special-def-row .special-def-req {
    width: 48px !important;
    flex: 0 0 48px;
  }

  #card-special-assignments .special-def-row .btn-special-def-remove {
    width: auto;
    min-height: 34px;
    padding: 4px 12px;
    margin-left: auto;
    font-size: 11px;
  }

  .table-wrap {
    max-height: min(58dvh, 520px);
  }

  .req-embed {
    height: min(58dvh, 560px) !important;
  }

  .sg-loc-toolbar input {
    max-width: none !important;
    width: 100%;
  }

  .sac-night-role-label-grid,
  .sac-core-group-name-grid {
    grid-template-columns: 1fr !important;
  }

  /* Staff page: use document scroll on mobile (nested overflow:auto is unreliable on iOS) */
  body:has(.sac-screen) {
    height: auto !important;
    min-height: 100dvh;
    overflow-y: auto;
  }

  body:has(.sac-screen) .wrap,
  body:has(.sac-screen) .sac-screen,
  body:has(.sac-screen) .sac-main {
    flex: none;
    min-height: 0;
    overflow: visible;
  }

  body:has(.sac-screen) .sac-screen {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .sac-nav-item {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* ── Worship Seating ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .layout {
    padding: 12px 10px 28px !important;
  }

  .prop-inner {
    padding: 10px 0 !important;
  }

  body.camp-embedded .layout {
    padding-top: 8px !important;
  }
}

/* ── Churches / GLIS ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .glis-page-banner {
    padding: 14px 14px 10px;
  }

  .glis-page-banner-title {
    font-size: 18px;
  }

  .glis-panel-body {
    padding: 12px 12px 24px;
  }

  .glis-section {
    padding: 14px;
  }

  .glis-row label,
  .glis-row input[type="text"],
  .glis-row input[type="file"],
  .glis-row textarea {
    min-width: 0;
    width: 100%;
  }

  .glis-row .mini-btn {
    flex: 1 1 calc(50% - 10px);
  }

  .glis-church-toolbar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .glis-church-toolbar .mini-btn {
    width: 100%;
  }

  .glis-kpi-val {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .glis-row .mini-btn {
    flex: 1 1 100%;
  }
}

/* ── Waterfront ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  #wf-preview-shell {
    max-height: min(62dvh, 520px);
    -webkit-overflow-scrolling: touch;
  }

  .wf-table {
    min-width: 640px;
  }
}

/* ── Fun Fangle ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .summary-head {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .summary-meta {
    text-align: left !important;
  }

  .table-wrap {
    max-height: min(58dvh, 520px);
  }
}

/* ── Camp Data Viewer ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .hdr-top {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .hdr-controls select,
  .hdr-controls .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .view {
    padding: 10px 10px 20px !important;
  }

  .view h2.tool-title {
    font-size: 17px;
  }

  .info-card .row b {
    flex: 0 0 88px;
  }

  .rot-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Admin property iframes ──────────────────────────────────── */
@media (max-width: 768px) {
  body.embedded .wrap,
  body.embed-staff-req > .wrap,
  body.embed-staff-data > .wrap,
  body.embed-staff-schedule > .wrap {
    padding: 10px !important;
  }

  .bar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .bar button,
  .bar .import-file-btn {
    width: 100%;
  }

  .modal-bd {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    align-items: flex-end;
  }

  .modal {
    max-height: min(88dvh, 640px);
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .modal-ft {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .modal-ft button {
    width: 100%;
    min-height: 44px;
  }
}