/* ops-date-range.css — 共用日期區間元件＋營運報表樣式（A1-2）
 * 記號：cyc-ride-ui159-a1-2-ops-report-20260913
 * 🔴 所有樣式都在這裡：兩支新 JS 一律不得寫行內樣式（裁示十一-精確版）。
 * 🔴 列印：只印營運報表那一塊，其餘 display:none（裁示二十六 5）。 */

/* ── 日期區間元件 ── */
.odr { display: block; margin: 0 0 12px; }
.odr-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.odr-preset.is-on { background: #1565c0; color: #fff; border-color: #1565c0; }
.odr-fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.odr-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.odr-f > span { color: #546e7a; font-weight: 700; }
.odr-f input, .odr-f select { min-width: 150px; }

/* ── 營運報表四塊 ── */
.orp { display: block; }
.orp-msg { font-size: 13px; margin-left: 10px; }
.orp-msg.is-ok { color: #2e7d32; }
.orp-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.orp-block { margin: 0 0 18px; }
.orp-block > h3 { font-size: 14px; font-weight: 800; margin: 0 0 8px; }
.orp-block table { width: 100%; border-collapse: collapse; }
.orp-block th, .orp-block td { padding: 6px 8px; border-bottom: 1px solid #eceff1; text-align: left; font-size: 13px; white-space: nowrap; }
.orp-block th { color: #546e7a; font-weight: 700; }
.orp-block tfoot td { font-weight: 800; border-top: 2px solid #cfd8dc; }
.orp-num { text-align: right; }
.orp-note { width: 100%; min-width: 180px; }
.orp-empty { color: #90a4ae; font-size: 13px; padding: 8px 0; }
.orp-count { font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.orp-bar-cell { min-width: 120px; }
.orp-bar-fill { display: block; height: 10px; background: #42a5f5; border-radius: 5px; }
.orp-spark { display: flex; align-items: flex-end; gap: 3px; height: 60px; }
.orp-spark i { display: block; width: 10px; background: #66bb6a; border-radius: 2px 2px 0 0; }
.orp-spark i.is-pt { background: #ffa726; }
.orp-legend { font-size: 12px; color: #546e7a; margin-top: 4px; }

/* ── 列印：只留營運報表（規格：其他區塊 display:none）──
 * 🔴 09-13 修正：舊版用 visibility:hidden，被藏的區塊仍佔高度，會印出空白頁。
 *   display:none 不能直接套 body *（會連報表的上層一起藏掉），所以沿著
 *   body → .app → main.container → #mainCard → 總覽分頁 → #opsReportCard 這條路，逐層把「不是這條路上的兄弟」藏掉。 */
@media print {
  body > *:not(.app),
  .app > *:not(main),
  main.container > *:not(#mainCard),
  #mainCard > *:not([data-view="overview"]),
  [data-view="overview"] > *:not(#opsReportCard),
  #opsReportRoot .odr-presets,
  #opsReportRoot .orp-bar { display: none !important; }
  #opsReportCard { width: 100%; margin: 0; }
  @page { size: A4 landscape; margin: 10mm; }
}