/* Shared wide-screen layout: 1180px * 1.25 = 1475px. */
@media(max-width:800px){
  body.endpoint-gantt.board-focused main {width:100%;margin:0;padding:0}
  body.endpoint-gantt.board-focused .board-workspace {top:0;margin:0}
  body.endpoint-gantt.board-focused .gantt-period-sticky {display:none}
  body.endpoint-gantt.board-focused .gantt-shell {height:calc((100dvh - 48px - env(safe-area-inset-bottom,0px)) / var(--board-zoom));max-height:calc((100dvh - 48px - env(safe-area-inset-bottom,0px)) / var(--board-zoom));border-radius:0;align-content:start}
  body.endpoint-gantt.board-focused .gantt-shell > .timeline-head,
  body.endpoint-gantt.board-focused .gantt-shell > .gantt-left-head {top:0}
  body.endpoint-gantt.board-focused .board-width-controls {bottom:0;left:0;transform:none;width:100%;max-width:none;min-height:44px;border-radius:0;padding:3px 4px calc(3px + env(safe-area-inset-bottom,0px));gap:3px;justify-content:center;box-shadow:0 -2px 8px #102a4320}
  body.endpoint-gantt.board-focused .board-width-controls button {min-height:34px;padding:5px 7px;font-size:11px;margin:0;box-shadow:none}
  body.endpoint-gantt.board-focused .board-width-controls output {width:40px;flex-basis:40px;font-size:11px}
  body.endpoint-gantt.board-focused #board-width-reset {display:none}
  body.endpoint-gantt.board-focused .board-focus-tools {display:flex;bottom:calc(54px + env(safe-area-inset-bottom,0px));right:8px}
}
.board-touch-preview {position:fixed;inset:auto;transform-origin:top left;width:min(440px,calc(100vw - 24px));max-width:none;max-height:80dvh;margin:0;padding:0;border:0;border-radius:14px;color:#172033;background:#fff;overflow:hidden;overflow-wrap:anywhere;-webkit-text-size-adjust:none;text-size-adjust:none}
.board-touch-preview[open] {display:flex;flex-direction:column}
.board-touch-content {overflow:auto;overscroll-behavior:contain;min-height:0;padding:16px 20px 20px;-webkit-overflow-scrolling:touch}
.board-touch-preview::backdrop {background:#102a4380}
.board-touch-preview small {font-size:14px;color:#52677d}
.board-touch-preview strong {display:block;font-size:24px;line-height:1.4;margin:8px 0}
.board-touch-preview p {font-size:17px;white-space:pre-line;line-height:1.5}
.board-touch-preview .board-touch-close {flex:0 0 auto;align-self:flex-end;width:auto;min-width:72px;min-height:44px;margin:8px 8px 0;padding:10px 16px;font-size:16px}
.board-focus-tools {position:fixed;bottom:76px;right:12px;z-index:51;display:flex;gap:6px}
.board-focus-tools > button {min-height:44px;padding:8px 12px;font-size:12px;box-shadow:0 2px 12px #102a4330}
body.endpoint-gantt.board-focused > header,
.endpoint-gantt.board-focused main > .title,
.endpoint-gantt.board-focused .gantt-filter,
.endpoint-gantt.board-focused .gantt-help {display:none!important}
.endpoint-gantt.board-focused main {margin-top:4px;margin-bottom:0}
.endpoint-gantt.board-focused .board-workspace {margin-top:0;top:4px}
.endpoint-gantt.board-focused .gantt-shell {max-height:calc((100dvh - 140px) / var(--board-zoom))}
@media(min-width:801px){
  body.endpoint-gantt.board-focused .gantt-shell {max-height:calc((100dvh - 80px) / var(--board-zoom))}
  .endpoint-gantt .board-width-controls > button[aria-pressed] {background:#087e8b;color:#fff}
}
.board-info-preview {position:fixed;z-index:100;box-sizing:border-box;width:max-content;max-width:min(380px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:14px 18px;border:1px solid #91b8c8;border-radius:12px;background:#fff;color:#172033;box-shadow:0 8px 30px #102a4340;overflow-wrap:anywhere}
.board-info-preview[hidden],.board-info-preview button[hidden] {display:none}
.board-info-preview small {display:block;font-size:13px;color:#52677d}
.board-info-preview strong {display:block;margin:5px 0;font-size:22px;line-height:1.4}
.board-info-preview p {margin:6px 0 0;font-size:16px;line-height:1.5;white-space:pre-line}
.board-info-preview button {min-height:44px;margin-top:10px;width:100%}
.gantt-guide-segment,.gantt-hotel-segment,.transport-inline-edit {-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.board-preview-mode {display:none}
@media(max-width:800px),(pointer:coarse){
  .board-preview-mode {display:inline-block;min-height:44px;padding:6px 8px;font-size:11px;background:#edf5f6;color:#17616a;border:1px solid #a0cbd0;white-space:nowrap}
  .board-preview-mode[aria-pressed=true] {background:#087e8b;color:#fff;border-color:#087e8b}
  .endpoint-gantt .board-view-actions {gap:4px;flex-wrap:nowrap}
}
.mobile-menu-toggle,.mobile-page-title {display:none}
@media(max-width:800px){
  body > .site-header.mobile-nav-ready {display:flex;align-items:center;flex-wrap:nowrap;gap:10px;height:56px;padding:6px 12px;z-index:50}
  .site-header.mobile-nav-ready .brand {flex:0 0 auto;font-size:18px;padding:0;line-height:1.2}
  .site-header.mobile-nav-ready .mobile-page-title {display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#c6dce9;text-align:right}
  .site-header.mobile-nav-ready .mobile-menu-toggle {display:flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-width:72px;min-height:44px;padding:8px 10px;border:1px solid #ffffff40;background:#ffffff12;color:#fff;font-size:14px}
  .site-header.mobile-nav-ready .top-nav {display:none!important;position:absolute;top:100%;left:0;right:0;width:100%;max-height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain;padding:10px 12px 16px;background:#102a43!important;box-shadow:0 12px 24px #102a4350;grid-template-columns:1fr!important;gap:6px}
  .site-header.mobile-menu-open .top-nav {display:grid!important}
  .site-header.mobile-nav-ready .top-nav > a,
  .site-header.mobile-nav-ready .top-nav > .menu,
  .site-header.mobile-nav-ready .top-nav > .menu > summary {width:100%!important;min-width:0!important}
  .site-header.mobile-nav-ready .top-nav > a,
  .site-header.mobile-nav-ready .top-nav > .menu > summary {display:flex!important;justify-content:flex-start!important;align-items:center!important;min-height:44px;height:auto;padding:12px!important;font-size:15px;line-height:1.3;text-align:left;border-radius:8px}
  .site-header.mobile-nav-ready .top-nav .menu-panel {position:static;transform:none;width:100%;max-height:none;overflow:visible;margin:4px 0 8px;padding:5px;background:#fff;border-radius:10px;box-shadow:none}
  .site-header.mobile-nav-ready .top-nav .menu-panel a {min-height:44px;padding:11px 14px;font-size:15px;white-space:normal}
  .site-header.mobile-nav-ready .top-nav a:focus-visible,
  .site-header.mobile-nav-ready .top-nav summary:focus-visible,
  .mobile-menu-toggle:focus-visible {outline:2px solid #58cbd2!important;outline-offset:-2px}
  main {margin-top:14px}
  main > .title {flex-wrap:wrap;gap:8px}
  main > .title h1 {margin-top:0;font-size:25px}
  main > .title p {margin:5px 0;font-size:13px}
  .title-actions {flex-wrap:wrap}
  .endpoint-gantt .board-workspace {margin-top:10px}
  .endpoint-gantt .gantt-filter {padding:10px;gap:6px;min-height:0;margin-bottom:10px}
  .endpoint-gantt .gantt-mode-select {display:flex;gap:18px}
  .endpoint-gantt .gantt-filter-label {min-height:36px;font-size:13px}
  .endpoint-gantt .month-slicer {gap:6px}
  .endpoint-gantt .month-slicer-item {flex-basis:66px;min-height:44px;padding:5px 8px;gap:0}
  .endpoint-gantt .month-slicer-item b {font-size:17px}
  .endpoint-gantt .month-slicer-item small {font-size:10px}
}
main {
  max-width: 1475px;
}

.endpoint-gantt main {width:min(1475px,100%);max-width:100%;padding-bottom:0;margin-bottom:48px}
.endpoint-gantt .gantt-shell {
  /* Mobile text autosizing must not enlarge labels independently of grid zoom. */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  --board-zoom: 1;
  zoom: var(--board-zoom);
  width: 100%;
  max-height: calc(max(140px, 100dvh - var(--board-header-height, 70px) - var(--board-filter-height, 120px) - 116px) / var(--board-zoom));
  grid-template-columns: 210px minmax(calc(var(--days) * 54px), 1fr);
}
.endpoint-gantt .gantt-shell .timeline {grid-template-columns:repeat(var(--days),minmax(54px,1fr))}
.endpoint-gantt .gantt-shell .gantt-guide-segment,
.endpoint-gantt .gantt-shell .gantt-hotel-segment,
.endpoint-gantt .gantt-shell .gantt-day-transport,
.endpoint-gantt .gantt-shell .transport-inline-edit {
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
  font-family:inherit;
  font-size:11px;
  line-height:18px;
  min-width:0;
  min-height:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.endpoint-gantt .gantt-shell .board-day-transports {font-size:inherit;line-height:inherit;max-width:100%}
.endpoint-gantt .timeline-head {overflow:clip}
/* Fit the actual date grid, including the vertical scrollbar, to the viewport. */
.endpoint-gantt .gantt-shell.is-fit-mode {overflow-x:hidden;grid-template-columns:210px minmax(0,1fr)}
.endpoint-gantt .gantt-shell.is-fit-mode .timeline {min-width:0;grid-template-columns:repeat(var(--days),minmax(0,1fr))}
.endpoint-gantt .gantt-shell.is-fit-mode .day-head {min-width:0}
.endpoint-gantt .month-boundary-label.month-boundary-end {left:auto;right:5px;width:max-content;text-align:right}
@media(max-width:800px){.endpoint-gantt .gantt-shell{grid-template-columns:165px minmax(calc(var(--days) * 54px),1fr)}}
@media(max-width:800px){.endpoint-gantt .gantt-shell.is-fit-mode{grid-template-columns:165px minmax(0,1fr)}}
.board-view-actions {display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.board-width-controls {position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:6px;padding:7px;border:1px solid #ccd5df;border-radius:11px;background:#fff;box-shadow:0 4px 24px #17203330}
.board-width-controls button {padding:8px 12px;background:#edf3f7;color:#17324d;white-space:nowrap}
.board-width-controls button:disabled {opacity:.4;cursor:default}
.board-width-controls output {width:70px;flex:0 0 70px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.board-width-controls button {flex-shrink:0}
@media(max-width:480px){.board-width-controls{gap:3px;padding:5px;bottom:8px;max-width:calc(100vw - 12px)}.board-width-controls button{padding:8px 7px;font-size:12px}.board-width-controls output{width:56px;flex-basis:56px;font-size:13px}}
.endpoint-gantt .title {flex-wrap:wrap;gap:12px}

/* Pin the filter and board as one workspace; only the schedule rows scroll. */
.endpoint-gantt .board-workspace {
  position: sticky;
  top: calc(var(--board-header-height, 70px) + 8px);
  z-index: 19;
  margin-top: 18px;
  background: #f4f7fb;
}
.endpoint-gantt .gantt-filter {
  position: static;
  margin: 0 0 18px;
  background: #fff;
  box-shadow: 0 6px 20px #17324d18;
}
.endpoint-gantt .gantt-shell > .timeline-head,
.endpoint-gantt .gantt-shell > .gantt-left-head {
  top: var(--board-period-height, 67px);
}

@media(max-width:800px){
  /* The app header already names this screen; keep only useful board controls. */
  .endpoint-gantt main {margin-top:4px;padding-left:6px;padding-right:6px}
  .endpoint-gantt main > .title {flex-wrap:nowrap;align-items:center;gap:4px;min-height:44px}
  .endpoint-gantt main > .title > div:first-child {min-width:0;flex:1}
  .endpoint-gantt main > .title h1 {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .endpoint-gantt main > .title p {margin:0;font-size:11px;line-height:1.4}
  .endpoint-gantt .board-settings-button {min-height:44px;padding:6px 8px;font-size:11px;white-space:nowrap}
  .endpoint-gantt .board-workspace {margin-top:4px;top:calc(var(--board-header-height,56px) + 4px)}
  .endpoint-gantt .gantt-filter {padding:4px 6px;gap:2px;margin-bottom:4px;border-radius:10px;box-shadow:none}
  .endpoint-gantt .gantt-mode-select {gap:16px}
  .endpoint-gantt .gantt-filter-label {min-height:44px;font-size:12px}
  .endpoint-gantt .month-slicer {padding:0;gap:4px;scrollbar-width:none}
  .endpoint-gantt .month-slicer::-webkit-scrollbar {display:none}
  .endpoint-gantt .month-slicer-item {display:flex;align-items:center;justify-content:center;flex:0 0 auto;gap:4px;min-height:44px;padding:5px 9px;border-radius:7px}
  .endpoint-gantt .month-slicer-item b {font-size:14px}
  .endpoint-gantt .month-slicer-item small {font-size:10px}
  .endpoint-gantt .gantt-period-sticky {padding:6px 10px;font-size:19px}
  .endpoint-gantt .range-filter-group {grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);gap:4px}
  .endpoint-gantt .range-filter-group .range-mark {display:grid;min-width:0}
  .endpoint-gantt .range-filter-group > input[type=date] {width:100%;min-width:0;min-height:44px;padding:6px;font-size:12px}
  .endpoint-gantt .range-filter-group > button {grid-column:1/-1;min-height:44px;padding:7px}
}

@media (min-width: 801px) {
  /* Keep desktop board controls compact, leaving the height for schedule rows. */
  .endpoint-gantt main {margin-top:10px}
  .endpoint-gantt main > .title {gap:8px;min-height:36px}
  .endpoint-gantt main > .title > div:first-child {display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px}
  .endpoint-gantt main > .title h1 {margin:0;font-size:24px;line-height:1.3}
  .endpoint-gantt main > .title p {margin:0;font-size:13px;color:#52677d}
  .endpoint-gantt .board-settings-button {padding:8px 12px;font-size:13px;min-height:36px}
  .endpoint-gantt .board-workspace {margin-top:8px}
  .endpoint-gantt .gantt-filter {display:flex;align-items:center;flex-wrap:nowrap;min-height:0;padding:8px 12px;margin-bottom:8px;gap:14px;border-radius:12px}
  .endpoint-gantt .gantt-mode-select {flex:0 0 auto;gap:16px}
  .endpoint-gantt .gantt-filter-label {min-height:36px;font-size:13px}
  .endpoint-gantt .month-slicer {width:auto;gap:6px;padding:2px}
  .endpoint-gantt .month-slicer-item {display:flex;align-items:center;justify-content:center;flex:0 0 auto;gap:5px;min-height:40px;padding:7px 12px;border-radius:8px}
  .endpoint-gantt .month-slicer-item small {font-size:11px}
  .endpoint-gantt .month-slicer-item b {font-size:15px}
  .endpoint-gantt .range-filter-group {min-width:0}
  .endpoint-gantt .range-filter-group > input[type=date] {min-width:0;padding:8px 10px}
  .endpoint-gantt .range-filter-group > button {padding:9px 12px;white-space:nowrap}
  .endpoint-gantt .gantt-period-sticky {font-size:24px;padding:8px 14px}
  .endpoint-gantt .gantt-shell {max-height:calc(max(140px,100dvh - var(--board-header-height,70px) - var(--board-filter-height,62px) - 140px) / var(--board-zoom))}
  .cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* The home page opts out of the shared main container, so align its sections too. */
@media (min-width: 601px) {
  .endpoint-home .flash {
    max-width: 1475px;
  }

  .home-hero-content,
  .hero-stats,
  .home-section {
    width: min(1475px, calc(100% - 40px));
  }
}

@media (min-width: 1200px) {
  .home-trip-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Reservation-board month slicer. */
.month-slicer {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.month-slicer-item {
  display: grid;
  flex: 0 0 94px;
  gap: 1px;
  padding: 10px 12px;
  border: 1px solid #cbd6e2;
  border-radius: 10px;
  background: #fff;
  color: #33475b;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.month-slicer-item small {
  color: #718295;
  font-size: 11px;
}

.month-slicer-item b {
  font-size: 17px;
}

.month-slicer-item:hover,
.month-slicer-item:focus-visible {
  border-color: #1596a1;
  background: #edf9f8;
  outline: none;
}

.month-slicer-item.is-active {
  border-color: #087e8b;
  background: #087e8b;
  color: #fff;
  box-shadow: 0 4px 12px #087e8b33;
}

.month-slicer-item.is-active small {
  color: #d9ffff;
}

@media (max-width: 900px) {
  .month-slicer {
    width: 100%;
  }
}

.hotel-delete-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #efd39a;
  border-radius: 9px;
  background: #fff8e8;
  color: #70551e;
  font-size: 13px;
}

.hotel-row-actions .danger-button {
  white-space: nowrap;
}

.hotel-admin-table .hotel-management-column {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 190px;
  background: #fff;
  box-shadow: 1px 0 0 #dfe6eb;
}

.hotel-admin-table thead .hotel-management-column {
  z-index: 3;
  background: #f4f7f9;
}

.gantt-guide-segment,
.gantt-hotel-segment {
  grid-row: 3;
  z-index: 3;
  align-self: stretch;
  min-width: 0;
  margin: 2px 1px;
  padding: 2px 7px;
  overflow: hidden;
  border: 1px solid #ffffffaa;
  border-radius: 5px;
  color: #234f68;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  line-height: 18px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.gantt-guide-segment {
  background: var(--guide-segment-color);
}

.gantt-hotel-segment {
  grid-row: 1;
  background: var(--hotel-segment-color);
  color: #684500;
}

.gantt-guide-segment:hover,
.gantt-guide-segment:focus-visible,
.gantt-hotel-segment:hover,
.gantt-hotel-segment:focus-visible {
  filter: brightness(.94);
  outline: 2px solid #168d98;
  outline-offset: -2px;
}

.gantt-guide-segment.is-empty,
.gantt-hotel-segment.is-empty {
  color: #788997;
  text-align: center;
  opacity: .55;
}

.timeline-row {
  min-height: 134px;
  grid-template-rows: 26px 56px 26px 26px;
}

.timeline-row .day-cell {
  grid-row: 1 / 5;
}

.timeline-row .gantt-bar {
  border: 2px solid #172033;
  box-shadow: 0 2px 5px #17203326;
}

.gantt-day-transport {
  display: flex;
  grid-row: 4;
  align-items: center;
  justify-content: center;
  color: #087e8b;
}

.gantt-day-transport .board-day-transports,
.gantt-day-transport .transport-inline-edit {
  position: relative;
  z-index: 4;
  pointer-events: auto;
}

.gantt-day-transport .board-day-transports {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.gantt-day-hotel .board-add-item,
.gantt-day-transport .board-add-item {
  width: 100%;
  min-height: 18px;
}

/* Keep the center project bar compact and enlarge operational labels. */
@media(min-width:801px){
  .endpoint-gantt .gantt-shell .timeline-row{min-height:130px;grid-template-rows:30px 40px 30px 30px}
  .endpoint-gantt .gantt-shell .gantt-bar{min-height:34px;margin:3px 2px;padding:4px 9px}
  .endpoint-gantt .gantt-shell .gantt-guide-segment,
  .endpoint-gantt .gantt-shell .gantt-hotel-segment{box-sizing:border-box;margin:2px 1px;padding:2px 7px;font-size:14px;font-weight:850;line-height:24px}
  .endpoint-gantt .gantt-shell .gantt-day-transport{padding:2px 3px;font-size:13px;line-height:24px}
  .endpoint-gantt .gantt-shell .transport-inline-edit{font-size:13px;line-height:24px}
}