/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Turbo 8 頁面切換：快速交叉淡入，降低換頁感。尊重「減少動態」偏好。 */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.18s;
  }
}

/* Turbo 導航進度條（光裕 2026-08-06）：application.js 把出現時機提前到 100ms，
   這裡把預設的亮藍換成品牌漸層帶，並加粗到 3px 讓手機也看得見。 */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(to right, #3E5C76, #7DD3FC);
}

/* Turbo Frame 載入中（光裕 2026-08-06）：局部更新時 Turbo 會在 frame 上掛 [busy]/[aria-busy]。
   台灣連美國機房單趟就要 210ms，沒有這個回饋使用者會以為按了沒反應而重複點。 */
turbo-frame[busy], turbo-frame[aria-busy="true"] {
  opacity: 0.55;
  transition: opacity 0.12s ease-out;
  pointer-events: none;  /* 載入中禁止重複點，避免連發請求 */
}

/* 骨架屏微光（給 lazy frame 的 placeholder 用） */
@keyframes skeleton-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.skeleton-line {
  border-radius: 0.375rem;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; }
}

/* 海豹吉祥物動畫 */
@keyframes seal-float { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-9px) rotate(2deg)} }
@keyframes seal-pop { 0%,100%{transform:translateY(0) scale(1)} 30%{transform:translateY(-12px) scale(1.06)} 62%{transform:translateY(0) scale(.97)} }
@keyframes seal-wave { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-24deg)} 60%{transform:rotate(-6deg)} }
@keyframes seal-blink { 0%,90%,100%{transform:scaleY(1)} 95%{transform:scaleY(.12)} }
@keyframes seal-bubble { 0%{transform:translateY(0);opacity:0} 25%{opacity:.85} 100%{transform:translateY(-46px);opacity:0} }
.seal-float { animation: seal-float 3s ease-in-out infinite; }
.seal-pop { animation: seal-pop 1.6s ease-in-out infinite; }
.seal-wave { transform-box: fill-box; transform-origin: top center; animation: seal-wave 1.8s ease-in-out infinite; }
.seal-eye { transform-box: fill-box; transform-origin: center; animation: seal-blink 4.5s ease-in-out infinite; }
.seal-bubble { position: absolute; border-radius: 9999px; background: #7DD3FC; animation: seal-bubble 1.7s ease-in infinite; }
@media (prefers-reduced-motion: reduce) {
  .seal-float, .seal-pop, .seal-wave, .seal-eye, .seal-bubble { animation: none; }
}

/* 月曆選定日期高亮 */
.cal-selected { outline: 2px solid #3E5C76; outline-offset: -2px; background: #eff6ff !important; }

/* 床位管理・房客圖卡 bottom sheet 動畫（EPIC-013，照 HANDOFF.md：遮罩 fade .18s、sheet slide up .24s） */
@keyframes bed-card-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes bed-card-up { from { transform: translateY(28px); opacity: .4 } to { transform: translateY(0); opacity: 1 } }
.bed-sheet-overlay { opacity: 0; }
.bed-sheet-overlay.is-open { animation: bed-card-fade .18s ease-out forwards; }
.bed-sheet-panel { transform: translateY(28px); opacity: 0; }
.bed-sheet-panel.is-open { animation: bed-card-up .24s cubic-bezier(.2,.9,.3,1) forwards; }

/* 時間軸空窗 segment：紅 45° 斜紋（Tailwind 難表達漸層條紋，直接用 class） */
.bed-gap-stripe {
  background-image: repeating-linear-gradient(45deg, #cf3b3b, #cf3b3b 3px, #f6c9c9 3px, #f6c9c9 6px);
}


/* 官網文章後台的繁中預覽（JON-43 /public-pages）：Markdown 轉出來的 HTML 沒有 class，這裡給最基本的排版
   （官網本身的版面在 public_site.css，後台不載入；預覽只求看得清楚段落、表格、連結）。 */
.cp-preview { color: #1F2937; font-size: 0.9rem; line-height: 1.75; overflow-wrap: anywhere; }
.cp-preview h1 { font-size: 1.35rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.5rem; }
.cp-preview .cp-lead { color: #4B5A6E; margin-bottom: 1rem; }
.cp-preview h2 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid #e2e8f0; }
.cp-preview h3 { font-size: 0.98rem; font-weight: 700; margin: 1.1rem 0 0.4rem; }
.cp-preview p { margin: 0.5rem 0; }
.cp-preview ul, .cp-preview ol { margin: 0.5rem 0; padding-left: 1.4rem; }
.cp-preview ul { list-style: disc; }
.cp-preview ol { list-style: decimal; }
.cp-preview li { margin: 0.2rem 0; }
.cp-preview a { color: #3E5C76; text-decoration: underline; }
.cp-preview blockquote { margin: 0.75rem 0; padding: 0.5rem 0.9rem; border-left: 4px solid #7DD3FC; background: #f8fafc; color: #4B5A6E; }
.cp-preview .tbl { overflow-x: auto; margin: 0.75rem 0; }
.cp-preview table { border-collapse: collapse; font-size: 0.82rem; min-width: 100%; }
.cp-preview th, .cp-preview td { border: 1px solid #e2e8f0; padding: 0.35rem 0.55rem; text-align: left; vertical-align: top; }
.cp-preview th { background: #f1f5f9; font-weight: 600; }
.cp-preview hr { margin: 1.25rem 0; border-color: #e2e8f0; }
.cp-preview code { font-size: 0.85em; background: #f1f5f9; padding: 0.05rem 0.3rem; border-radius: 0.25rem; }
.cp-preview sup { font-size: 0.7em; }
.cp-preview section.footnotes { margin-top: 1.5rem; font-size: 0.8rem; color: #4B5A6E; }