/* TripCraft PWA and mobile enhancement layer.
   Load this file after styles.css. All PDF sizing changes are screen-only. */

:root {
  --pwa-safe-top: env(safe-area-inset-top, 0px);
  --pwa-safe-right: env(safe-area-inset-right, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-safe-left: env(safe-area-inset-left, 0px);
}

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

.pwa-update-notice,
.pwa-offline-status {
  position: fixed;
  z-index: 5000;
  right: max(14px, var(--pwa-safe-right));
  left: max(14px, var(--pwa-safe-left));
  font-family: Montserrat, Arial, sans-serif;
}

.pwa-update-notice {
  bottom: max(14px, var(--pwa-safe-bottom));
  display: flex;
  width: min(520px, calc(100vw - 28px - var(--pwa-safe-left) - var(--pwa-safe-right)));
  margin-left: auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid #d9e3e5;
  border-radius: 13px;
  background: rgb(255 255 255 / 97%);
  color: #354449;
  box-shadow: 0 18px 45px rgb(28 42 47 / 24%);
  backdrop-filter: blur(16px);
}

.pwa-update-notice > div:first-child { display: grid; gap: 3px; }
.pwa-update-notice strong { font-size: 12px; }
.pwa-update-notice span { color: #718085; font-size: 9px; line-height: 1.35; }
.pwa-update-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.pwa-update-actions button {
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
}
.pwa-update-later { background: #edf2f3; color: #55656a; }
.pwa-update-now { background: #ec5849; color: #fff; }
.pwa-update-actions button:disabled { opacity: .62; cursor: wait; }

.pwa-offline-status {
  top: max(8px, var(--pwa-safe-top));
  width: fit-content;
  max-width: min(560px, calc(100vw - 28px));
  margin-inline: auto;
  padding: 8px 11px;
  border: 1px solid #e5c980;
  border-radius: 999px;
  background: #fff7df;
  color: #745c20;
  box-shadow: 0 7px 20px rgb(61 48 17 / 14%);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.pwa-install-button { white-space: nowrap; }

@media screen and (display-mode: standalone) {
  .app-header {
    padding-top: var(--pwa-safe-top);
    padding-right: max(26px, var(--pwa-safe-right));
    padding-left: max(26px, var(--pwa-safe-left));
  }

  .builder-panel { padding-bottom: max(42px, calc(22px + var(--pwa-safe-bottom))); }
  .preview-area { padding-bottom: var(--pwa-safe-bottom); }
}

@media screen and (pointer: coarse) {
  :where(button, [role="button"], input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: 44px;
  }

  :where(input[type="checkbox"], input[type="radio"]) {
    width: 24px;
    height: 24px;
  }

  :where(.preview-drag-handle, .drag-handle, [data-drag-handle]) {
    min-width: 44px;
    min-height: 44px;
    touch-action: none;
  }

  :where(.builder-tab, .dashboard-tab, .view-button, .preview-context-button) {
    min-height: 44px;
  }
}

/* Shared management-dashboard primitives. They are intentionally class-based
   so the forthcoming dashboard can adopt them without affecting print pages. */
.dashboard-shell,
.management-dashboard,
[data-dashboard-layout] {
  min-width: 0;
  min-height: 0;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  min-height: 100dvh;
  overflow: hidden;
}

.dashboard-sidebar,
.dashboard-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.dashboard-table-wrap,
.table-scroll,
[data-table-scroll] {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.dashboard-table-wrap table,
.table-scroll table,
[data-table-scroll] table {
  min-width: 720px;
}

.dashboard-toolbar,
.dashboard-filter-bar,
.dashboard-page-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-metric-grid,
.dashboard-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

@media screen and (max-width: 900px) {
  html,
  body { height: 100%; overflow: hidden; overscroll-behavior: none; }

  /* The management workspace uses its own bounded scroll regions. Without
     these constraints the global mobile body lock can clip setup forms and
     long dashboard panels below the viewport. */
  .auth-shell {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-app {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .dashboard-app .workspace {
    display: grid;
    width: 100%;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .dashboard-app .workspace-main {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .app-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  .app-header {
    position: relative;
    top: auto;
    min-height: 56px;
    padding: var(--pwa-safe-top) max(10px, var(--pwa-safe-right)) 0 max(10px, var(--pwa-safe-left));
  }

  .brand { flex: 0 0 auto; }
  .brand-mark { width: 29px; height: 29px; }
  .brand strong,
  .brand em { font-size: 14px; }

  .header-actions {
    min-width: 0;
    margin-left: 10px;
    padding-block: 5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .header-actions::-webkit-scrollbar { display: none; }
  .header-actions .button { flex: 0 0 auto; min-height: 40px; }

  .studio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(46%, 1fr) minmax(42%, .92fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .workspace-resizer { display: none; }

  .builder-panel {
    min-height: 0;
    padding: 16px 12px max(28px, calc(18px + var(--pwa-safe-bottom)));
    border-right: 0;
    border-bottom: 1px solid #d8e1e3;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .builder-navigation {
    top: -16px;
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .preview-area {
    display: flex;
    min-width: 0;
    min-height: 0;
    padding-bottom: var(--pwa-safe-bottom);
    flex-direction: column;
    overflow: hidden;
  }

  .preview-toolbar {
    min-height: 48px;
    padding: 6px 10px;
  }
  .preview-toolbar h2 { font-size: 14px; }
  .preview-controls { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .preview-controls::-webkit-scrollbar { display: none; }

  .preview-context-toolbar {
    min-height: 44px;
    padding: 4px 10px;
  }

  .document-preview {
    min-width: 0;
    min-height: 0;
    padding: 12px 10px max(24px, calc(12px + var(--pwa-safe-bottom)));
    align-content: start;
    justify-items: center;
    gap: 14px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* CSS zoom participates in layout, so scaled 7in × 15in pages do not leave
     unscaled blank height. pwa.js computes the exact available-width ratio. */
  @supports (zoom: 1) {
    .document-preview .itinerary-page { zoom: var(--pwa-preview-scale, .55); }
  }

  .modal {
    max-width: calc(100vw - max(20px, var(--pwa-safe-left)) - max(20px, var(--pwa-safe-right)));
    max-height: calc(100dvh - max(20px, var(--pwa-safe-top)) - max(20px, var(--pwa-safe-bottom)));
  }

  .modal-card {
    max-height: inherit;
    padding: 18px 14px max(18px, var(--pwa-safe-bottom));
    overflow-y: auto;
  }

  :where(.builder-panel, .modal-card, .dashboard-main) :where(input, select, textarea) {
    font-size: 16px;
  }

  .dashboard-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
  }

  .dashboard-sidebar {
    display: flex;
    max-height: none;
    padding: max(8px, var(--pwa-safe-top)) max(10px, var(--pwa-safe-right)) 8px max(10px, var(--pwa-safe-left));
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid #dce4e5;
    scrollbar-width: none;
  }
  .dashboard-sidebar::-webkit-scrollbar { display: none; }
  .dashboard-sidebar :where(a, button, [role="tab"]) { flex: 0 0 auto; }

  .dashboard-main {
    padding-right: max(12px, var(--pwa-safe-right));
    padding-bottom: max(20px, var(--pwa-safe-bottom));
    padding-left: max(12px, var(--pwa-safe-left));
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-toolbar,
  .dashboard-filter-bar,
  .dashboard-page-actions { align-items: stretch; }

  .dashboard-toolbar > *,
  .dashboard-filter-bar > * { flex: 1 1 160px; }

  .dashboard-tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dashboard-tabs::-webkit-scrollbar { display: none; }
  .dashboard-tabs .dashboard-tab { flex: 0 0 auto; min-width: max-content; }
}

@media screen and (max-width: 560px) {
  .brand > span:last-child { display: none; }
  .app-header { min-height: 52px; }
  .header-actions { margin-left: 6px; gap: 5px; }
  .header-actions .button { min-height: 38px; padding-inline: 9px; font-size: 9px; }
  .pwa-install-button { padding-inline: 8px !important; }

  .studio-layout { grid-template-rows: minmax(52%, 1.12fr) minmax(36%, .88fr); }
  .builder-tabs { grid-template-columns: repeat(3, minmax(82px, 1fr)); overflow-x: auto; }
  .builder-tab { min-height: 48px; }
  .image-library-filterbar { align-items: stretch; flex-direction: column; }
  .image-library-source-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .image-library-filter,.image-library-filterbar-modal .image-library-filter { min-height: 44px; font-size: 11px; }
  .image-library-destination select,.image-library-filterbar-modal .image-library-destination select { min-height: 46px; font-size: 16px; }
  .image-library-dialog-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pwa-update-notice {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .pwa-update-actions { width: 100%; }
  .pwa-update-actions button { flex: 1 1 0; min-height: 44px; }
  .pwa-offline-status { border-radius: 10px; }

  .dashboard-metric-grid,
  .dashboard-card-grid,
  .dashboard-toggles,
  .dashboard-field-grid,
  .dashboard-filter-grid,
  .dashboard-metrics { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-update-notice,
  .pwa-offline-status,
  .pwa-install-button { scroll-behavior: auto; transition: none; animation: none; }
}

@media print {
  .pwa-update-notice,
  .pwa-offline-status,
  .pwa-install-button { display: none !important; }

  /* PWA preview fitting must never alter the physical PDF page. */
  .document-preview .itinerary-page {
    zoom: 1 !important;
    transform: none !important;
  }
}