/* ===== 全螢幕行程地圖 =====
   規劃頁（Trips/Detail）與公開分享頁（Trips/Share）共用，比照 lightbox.css
   已經兩頁共用的做法。刻意不放進 planner.css：分享頁根本不載入那個檔，而複製
   一份到 share.css 正是當初把燈箱拆出來要避免的漂移。

   行為見 wwwroot/js/journee-trip-map.js，標記見 Pages/Trips/_TripMapOverlay.cshtml。 */

/* z-index 900 刻意比所有既有浮層都低：modal overlay 1000、.jn-map-popup 1001、
   ⋯選單與時間選擇器 1002、圖片管理 1010、toast 1100、燈箱 3000。地圖是「背景」，
   點地圖加景點的小面板要浮在它上面 —— 這樣既有的 z-index 一個都不用改。
   900 仍然蓋得住 nav(10) 和固定在底部的 .jn-interest-panel(40)。 */
.jn-map-overlay { position: fixed; inset: 0; z-index: 900; display: none; flex-direction: column; background: var(--jn-bg); }
.jn-map-overlay.is-open { display: flex; }

.jn-map-overlay-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--jn-surface); border-bottom: 1px solid var(--jn-border); }
.jn-map-overlay-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: var(--jn-fw-bold); white-space: nowrap; }
.jn-map-overlay-title i { color: var(--jn-primary); }
.jn-map-hint { flex: 1; min-width: 0; margin: 0; font-size: 12.5px; color: var(--jn-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-map-overlay-close { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--jn-radius-md); background: var(--jn-surface-alt); color: var(--jn-text-secondary); font-size: 15px; cursor: pointer; }
.jn-map-overlay-close:hover { background: var(--jn-border); }

/* 額度用完切到 OSM 圖磚時的提示。放在覆蓋層裡面，所以關掉地圖它就跟著消失 ——
   舊版的 #mapMessage 在地圖容器外面，關掉地圖之後警告還留在頁面上。 */
.jn-map-overlay-message { flex: 0 0 auto; padding: 8px 16px; background: var(--jn-warning-bg); color: oklch(40% 0.12 80); font-size: 12.5px; }

/* flex:1 要配 min-height:0 —— 少了它，flex 子項預設的 min-height:auto 會讓
   地圖把覆蓋層撐到超出畫面，Leaflet/Google 量到的高度也會是錯的。 */
.jn-map-overlay-stage { position: relative; flex: 1 1 auto; min-height: 0; }
/* 不再自己決定高度（舊版是固定 420px），填滿 stage。全螢幕沒有圓角。 */
.jn-map-overlay .jn-map-container { position: absolute; inset: 0; display: block; height: auto; border-radius: 0; }

/* ===== 天數勾選面板 ===== */
/* 浮在地圖右上角。max-height 讓 30 天的行程自己長出捲軸，表頭的全選/全不選
   固定不動。z-index 2 是覆蓋層自己的區域堆疊，跟全站的 z-index 沒有互動。 */
.jn-map-days { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; width: 178px; max-height: calc(100% - 24px); background: var(--jn-surface); border: 1px solid var(--jn-border); border-radius: var(--jn-radius-md); box-shadow: var(--jn-shadow-lg); overflow: hidden; }
.jn-map-days-head { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--jn-border); }
.jn-map-days-title { flex: 1; font-size: 12px; font-weight: var(--jn-fw-bold); color: var(--jn-text-secondary); }
.jn-map-days-bulk { border: none; background: none; padding: 2px 4px; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--jn-primary); cursor: pointer; }
.jn-map-days-bulk:hover { text-decoration: underline; }
.jn-map-days-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; }
.jn-map-days-empty { margin: 0; padding: 10px; font-size: 12px; color: var(--jn-text-tertiary); }

/* 「只看」是獨立的 <button>，刻意不包在 <label> 裡面 —— label 裡的按鈕在部分
   瀏覽器上會順便觸發 label 綁的 checkbox，變成按一下又勾選又只看。 */
.jn-map-day { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: var(--jn-radius-sm, 6px); }
.jn-map-day:hover { background: var(--jn-surface-alt); }
.jn-map-day > label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.jn-map-day input { margin: 0; accent-color: var(--jn-primary); cursor: pointer; }
.jn-map-day-swatch { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; }
.jn-map-day-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-map-day-count { margin-left: 5px; font-size: 11px; font-weight: 400; color: var(--jn-text-tertiary); }
.jn-map-day.is-hidden .jn-map-day-label { color: var(--jn-text-tertiary); }
.jn-map-day.is-hidden .jn-map-day-swatch { opacity: .3; }
.jn-map-day-solo { flex: 0 0 auto; border: none; background: none; padding: 2px 3px; font-family: inherit; font-size: 11px; color: var(--jn-text-tertiary); cursor: pointer; }
.jn-map-day-solo:hover { color: var(--jn-primary); }
.jn-map-day.is-solo .jn-map-day-solo { color: var(--jn-primary); font-weight: 700; }

/* 標記 popup 的內容。Google 的 InfoWindow 和 Leaflet 的 popup 吃同一段 HTML。 */
.jn-map-pop-name { font-size: 13.5px; font-weight: var(--jn-fw-bold); margin-bottom: 5px; }
.jn-map-pop-day { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--jn-text-secondary); line-height: 1.7; }
.jn-map-pop-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }

/* 分享頁工具列上的看地圖/行前資訊/記帳/行李確認表，一組獨立的 flex item
   （見 Share.cshtml 的 .jn-share-nav-actions），這樣窄螢幕縮的是這一群，不
   會連帶把左邊的 Logo 或右邊的 CTA 也一起擠壓。 */
.jn-share-nav-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.jn-share-nav-map { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--jn-border); background: var(--jn-surface); color: var(--jn-text-secondary); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--jn-radius-pill); cursor: pointer; white-space: nowrap; }
.jn-share-nav-map:hover { border-color: var(--jn-primary); color: var(--jn-primary); }

/* Hamburger toggle for the 4 action buttons below -- hidden on desktop,
   same look as planner.css's own .jn-nav-menu-toggle for the owner's nav. */
.jn-share-nav-menu-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: none; background: var(--jn-surface-alt); border-radius: var(--jn-radius-md); color: var(--jn-text-secondary); font-size: 18px; cursor: pointer; }

/* Four of these plus the logo and CTA no longer fit a phone-width row with
   their labels -- 2026-10-21 feedback first showed each pill's Chinese label
   wrapping one character per line into a tall oval once 行前資訊 made it
   four buttons; an icon-only row fixed that overflow but left a second
   complaint (same conversation): an icon alone needs guessing what it does,
   where a plain labelled list is unambiguous. Below 560px this is now a
   dropdown menu instead of an inline row -- toggled open by
   .jn-share-nav-menu-toggle (JS in Share.cshtml), each item its own full-
   width labelled row, closed on an outside click or on Escape. */
@media (max-width: 560px) {
  /* CTA + hamburger pulled together as one group hugging the row's true
     right edge -- .jn-share-nav's own justify-content:space-between (meant
     for its wider desktop row) was spacing exactly 3 mobile children evenly,
     so the hamburger landed in the middle (fixed first) and then the CTA sat
     centered between the logo and it (2026-10-21 feedback, a second
     screenshot after the first fix). margin-left:auto on the first of the
     two right-side items pushes both together as a unit instead. */
  .jn-share-nav { justify-content: flex-start; gap: 10px; }
  .jn-share-nav-cta { order: 2; margin-left: auto; }
  .jn-share-nav-menu-toggle { display: flex; order: 3; }
  .jn-share-nav-actions {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--jn-surface);
    border: 1px solid var(--jn-border);
    border-radius: var(--jn-radius-md);
    box-shadow: var(--jn-shadow-lg);
    padding: 8px;
    z-index: 30;
  }
  .jn-share-nav.is-menu-open .jn-share-nav-actions { display: flex; }
  .jn-share-nav-map { width: auto; height: auto; justify-content: flex-start; gap: 10px; padding: 10px 12px; border: none; border-radius: var(--jn-radius-sm); font-size: 14px; }
  .jn-share-nav-map:hover { background: var(--jn-surface-alt); border-color: transparent; color: var(--jn-text-secondary); }
  .jn-share-nav-map i { width: 18px; text-align: center; color: var(--jn-primary); }
}

@media (max-width: 767.98px) {
  /* 手機上面板改貼底部，不然 178px 寬會蓋掉大半張地圖。 */
  .jn-map-days { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 42%; }
  .jn-map-hint { display: none; }
}