/* ============================================================
   診別視覺（早／午／晚）— 全站單一來源
   權威參考：ClinicSettings 營業時段月曆、StaffSchedules/Calendar
   圖示：bi-sunrise-fill / bi-sun-fill / bi-moon-stars-fill
   ============================================================ */

:root {
  --clinic-session-morning-bg: #fff7ed;
  --clinic-session-morning-border: #fdba74;
  --clinic-session-morning-accent: #ea580c;
  --clinic-session-morning-text: #9a3412;

  --clinic-session-afternoon-bg: #ecfeff;
  --clinic-session-afternoon-border: #67e8f9;
  --clinic-session-afternoon-accent: #0891b2;
  --clinic-session-afternoon-text: #0369a1;

  --clinic-session-evening-bg: #eff6ff;
  --clinic-session-evening-border: #93c5fd;
  --clinic-session-evening-accent: #1e3a8a;
  --clinic-session-evening-text: #1e3a8a;
}

/* 員工 LIFF Layout（_LayoutLiff）預設底色 — 取代原 inline style */
body.liff-shell {
  background: var(--ds-bg-liff, #f6f8fa);
  min-height: 100vh;
}

/* ── 實心徽章（排班、圖例） ── */
.session-badge-morning,
.clinic-session-badge--morning {
  background-color: var(--clinic-session-morning-accent);
  color: #fff;
}
.session-badge-afternoon,
.clinic-session-badge--afternoon {
  background-color: var(--clinic-session-afternoon-accent);
  color: #fff;
}
.session-badge-evening,
.clinic-session-badge--evening {
  background-color: var(--clinic-session-evening-accent);
  color: #fff;
}

/* ── 左側色條卡片 ── */
.session-card-morning,
.clinic-session-card--morning {
  border-left: 3px solid var(--clinic-session-morning-accent);
  background-color: var(--clinic-session-morning-bg);
}
.session-card-afternoon,
.clinic-session-card--afternoon {
  border-left: 3px solid var(--clinic-session-afternoon-accent);
  background-color: var(--clinic-session-afternoon-bg);
}
.session-card-evening,
.clinic-session-card--evening {
  border-left: 3px solid var(--clinic-session-evening-accent);
  background-color: var(--clinic-session-evening-bg);
}

.session-card-current {
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.35);
}

/* ── 時段 outline 按鈕 ── */
.session-btn-morning {
  color: var(--clinic-session-morning-text);
  border-color: var(--clinic-session-morning-accent);
  background-color: transparent;
}
.session-btn-morning:hover,
.session-btn-morning:focus,
.session-btn-morning.active {
  color: #fff;
  background-color: var(--clinic-session-morning-accent);
  border-color: var(--clinic-session-morning-accent);
}
.session-btn-afternoon {
  color: var(--clinic-session-afternoon-text);
  border-color: var(--clinic-session-afternoon-accent);
  background-color: transparent;
}
.session-btn-afternoon:hover,
.session-btn-afternoon:focus,
.session-btn-afternoon.active {
  color: #fff;
  background-color: var(--clinic-session-afternoon-accent);
  border-color: var(--clinic-session-afternoon-accent);
}
.session-btn-evening {
  color: var(--clinic-session-evening-text);
  border-color: var(--clinic-session-evening-accent);
  background-color: transparent;
}
.session-btn-evening:hover,
.session-btn-evening:focus,
.session-btn-evening.active {
  color: #fff;
  background-color: var(--clinic-session-evening-accent);
  border-color: var(--clinic-session-evening-accent);
}

/* ── 列表／固定門診 pill ── */
.clinic-session-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 3.25rem;
  justify-content: center;
  padding: 0.2rem 0.45rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  flex-shrink: 0;
}
.clinic-session-pill--morning {
  background: var(--clinic-session-morning-bg);
  border-color: var(--clinic-session-morning-border);
  color: var(--clinic-session-morning-text);
}
.clinic-session-pill--afternoon {
  background: var(--clinic-session-afternoon-bg);
  border-color: var(--clinic-session-afternoon-border);
  color: var(--clinic-session-afternoon-text);
}
.clinic-session-pill--evening {
  background: var(--clinic-session-evening-bg);
  border-color: var(--clinic-session-evening-border);
  color: var(--clinic-session-evening-text);
}
.clinic-session-pill .bi {
  font-size: 0.95em;
}

/* ── 週曆／掛號格（邊框 + 淡底） ── */
.clinic-session-slot--morning,
.ci-slot.morning,
.cal-slot.morning {
  border-color: var(--clinic-session-morning-border);
  background: var(--clinic-session-morning-bg);
  color: inherit;
}
.clinic-session-slot--afternoon,
.ci-slot.noon,
.ci-slot.afternoon,
.cal-slot.noon,
.cal-slot.afternoon {
  border-color: var(--clinic-session-afternoon-border);
  background: var(--clinic-session-afternoon-bg);
  color: inherit;
}
.clinic-session-slot--evening,
.ci-slot.evening,
.cal-slot.evening {
  border-color: var(--clinic-session-evening-border);
  background: var(--clinic-session-evening-bg);
  color: inherit;
}

/* ── 圖例色塊 ── */
.clinic-session-legend-swatch,
.ci-legend {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 2px;
}
.clinic-session-legend-swatch--morning,
.ci-legend-morning {
  background: var(--clinic-session-morning-bg);
  border: 1px solid var(--clinic-session-morning-border);
}
.clinic-session-legend-swatch--afternoon,
.ci-legend-noon {
  background: var(--clinic-session-afternoon-bg);
  border: 1px solid var(--clinic-session-afternoon-border);
}
.clinic-session-legend-swatch--evening,
.ci-legend-evening {
  background: var(--clinic-session-evening-bg);
  border: 1px solid var(--clinic-session-evening-border);
}

.clinic-session-legend-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.clinic-session-legend-inline .bi {
  font-size: 0.95rem;
}
.clinic-session-legend-inline--morning .bi { color: var(--clinic-session-morning-accent); }
.clinic-session-legend-inline--afternoon .bi { color: var(--clinic-session-afternoon-accent); }
.clinic-session-legend-inline--evening .bi { color: var(--clinic-session-evening-accent); }

/* ── 週曆列標（含圖示） ── */
.clinic-session-row-label--morning .bi,
.clinic-session-row-label--morning {
  color: var(--clinic-session-morning-accent);
}
.clinic-session-row-label--afternoon .bi,
.clinic-session-row-label--afternoon {
  color: var(--clinic-session-afternoon-accent);
}
.clinic-session-row-label--evening .bi,
.clinic-session-row-label--evening {
  color: var(--clinic-session-evening-accent);
}

/* ── 營業時段月曆 pill（ClinicSettings） ── */
.sess-open {
  background: #e8f4fd;
  border-color: #bee3f8;
  color: #1e5a8a;
}
.sess-open.sess-s-1 {
  background: var(--clinic-session-morning-bg);
  border-color: var(--clinic-session-morning-border);
  color: var(--clinic-session-morning-text);
}
.sess-open.sess-s-2 {
  background: var(--clinic-session-afternoon-bg);
  border-color: var(--clinic-session-afternoon-border);
  color: var(--clinic-session-afternoon-text);
}
.sess-open.sess-s-3 {
  background: var(--clinic-session-evening-bg);
  border-color: var(--clinic-session-evening-border);
  color: var(--clinic-session-evening-text);
}

/* 官網門診表列標 */
.public-site .jy-weekly-row--morning .jy-weekly-schedule__session {
  background: var(--clinic-session-morning-bg);
  color: var(--clinic-session-morning-text);
}
.public-site .jy-weekly-row--morning .jy-weekly-schedule__session .bi {
  color: var(--clinic-session-morning-accent);
}
.public-site .jy-weekly-row--afternoon .jy-weekly-schedule__session {
  background: var(--clinic-session-afternoon-bg);
  color: var(--clinic-session-afternoon-text);
}
.public-site .jy-weekly-row--afternoon .jy-weekly-schedule__session .bi {
  color: var(--clinic-session-afternoon-accent);
}
.public-site .jy-weekly-row--evening .jy-weekly-schedule__session {
  background: var(--clinic-session-evening-bg);
  color: var(--clinic-session-evening-text);
}
.public-site .jy-weekly-row--evening .jy-weekly-schedule__session .bi {
  color: var(--clinic-session-evening-accent);
}

/* LIFF 狀態 badge（禁止頁面自訂 .badge-normal 等平行 class） */
.liff-badge-normal { background-color: #198754; color: #fff; }
.liff-badge-late { background-color: #ffc107; color: #212529; }
.liff-badge-absent { background-color: #dc3545; color: #fff; }
.liff-badge-leave { background-color: var(--ds-accent); color: #fff; }
.liff-badge-missout { background-color: #6f42c1; color: #fff; }
.liff-badge-pending { background-color: #6c757d; color: #fff; }
.liff-badge-override { background-color: #b35a00; color: #fff; } /* WCAG AA: 白字 4.80:1（原 #fd7e14 2.57） */
.liff-badge-dayoff { background-color: #adb5bd; color: #212529; }
.liff-badge-done { background-color: #198754; color: #fff; }
.liff-badge-active { background-color: var(--ds-accent); color: #fff; }

/* ============================================================
   LIFF / Public 焦點無障礙（Layout 可能不載 site.css）
   對齊 wwwroot/css/site.css：鍵盤 :focus-visible 顯示 ring，
   滑鼠 :focus:not(:focus-visible) 不顯示。
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--ds-primary, var(--clinic-session-afternoon-accent, #0891b2));
  outline-offset: 2px;
  box-shadow: var(--ds-focus-ring, 0 0 0 3px rgba(8, 145, 178, 0.35));
}

:focus:not(:focus-visible) {
  outline: none;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a.btn:focus-visible {
  outline: 2px solid var(--ds-primary, var(--clinic-session-afternoon-accent, #0891b2));
  outline-offset: 2px;
  box-shadow: var(--ds-focus-ring, 0 0 0 3px rgba(8, 145, 178, 0.35));
}

/* a11y: skip-to-content（與 site.css 同語意；LIFF Layout 不載 site.css）*/
.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--clinic-session-afternoon-accent, #0891b2);
  color: #fff;
  border-radius: 0 0 0.375rem 0.375rem;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 0;
}

/* 行動裝置點擊範圍：按鈕與導覽連結最小 44x44 px (WCAG 2.5.5 Target Size - Enhanced) */
.btn-sm,
.nav-link,
.page-link {
  min-height: 36px;
}

@media (max-width: 575.98px) {
  .btn { min-height: 40px; }
}

/* 觸控時不要讓 hover 樣式殘留（部分裝置 hover 會卡住） */
@media (hover: none) {
  .btn:hover { background-color: inherit; }
}

/* ============================================================
   WCAG 2.3.3 prefers-reduced-motion（LIFF 版；site.css 不載入）
   對齊 wwwroot/css/site.css 同名規則。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}