/* 名字前的三顆星（smooth-ops A17，設計 v3：dsr-smooth-audit/design/stars-v3-preview.html）。
   這一份是星的全部長相（字形在 visit-marks-view.js 的 STAR_SYMBOLS）；尺寸 token 在 tokens.css（--star-*）。
   顏色全用既有 token：完成 --ok、還缺 --ink-3、半星（已看、病歷沒寫入）--ink、寫卡失敗 --danger、自費 --selfpay
   （v3.1 新增的灰藍色，只用在自費收費星上；--warn 是警告色，不混用）。
   形狀本身就分得出每一種（實心／空心框／半星／紅星帶圓點），自費的收費星另用灰藍色，顏色只是第二道提示。
   不加動畫：看板每幾秒重讀，星一閃一閃會讓人分心；狀態一變形狀就直接換。 */

/* ---------- 元件本體 ---------- */
.vstar-group {
  display: inline-flex;
  flex: none;
  align-items: center;
}

.vstar {
  display: inline-grid;
  place-items: center;
  width: var(--star-box-w);
  height: var(--star-box-h);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-tag);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-micro);
}

.vstar svg {
  display: block;
  width: var(--star-glyph);
  height: var(--star-glyph);
  overflow: visible;
}

.vstar:hover {
  background: var(--nav-hover);
}

.vstar:active {
  transform: scale(var(--press-scale));
}

/* 貼著按鈕盒（不用全域的 3px offset，免得壓到旁邊那顆星）。 */
.vstar:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
}

button.vstar.is-done { color: var(--ok); }
button.vstar.is-todo { color: var(--ink-3); }
button.vstar.is-seen { color: var(--ink); }
button.vstar.is-failed { color: var(--danger); }
button.vstar.is-selfpaid,
button.vstar.is-selftodo,
button.vstar.is-selfmark { color: var(--selfpay); }

/* 做完的星、醫師的自費記號：不做出「可以點」的樣子，只有提示。
   用 button.vstar 提高權重：看診畫面的 .po-page button[aria-disabled] 會把停用鈕塗成灰底灰字。 */
button.vstar[aria-disabled="true"] {
  background: transparent;
  cursor: default;
}

button.vstar[aria-disabled="true"]:hover {
  background: transparent;
}

.vstar[aria-disabled="true"]:active {
  transform: none;
}

.vstar-group.is-lg .vstar { width: var(--star-box-w-lg); height: var(--star-box-h-lg); }
.vstar-group.is-lg svg { width: var(--star-glyph-lg); height: var(--star-glyph-lg); }

@media (prefers-reduced-motion: reduce) {
  .vstar { transition: none; }
  .vstar:active { transform: none; }
}

/* ---------- 清單的格子（看板、候診清單）：固定三顆星寬，沒報到的列、醫師的兩顆星也留同樣寬 ---------- */
.vm-stars-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* 第一顆星的字形左緣對齊時間欄的格線。 */
.vm-stars-cell .vstar-group {
  margin-inline-start: -4px;
}

/* ---------- 單一病患（看診標頭、叫號椅卡、收費那一行）：名字前一小塊 ---------- */
.vmark-inline {
  display: inline-flex;
  flex: none;
  align-items: center;
  margin-inline: -4px var(--sp-3);
  vertical-align: middle;
}

.po-name-marks {
  display: inline-flex;
  flex: none;
  align-items: center;
}

.po-name-marks:empty {
  display: none;
}

.po-banner-row > .po-name-marks .vmark-inline {
  margin-inline-end: 0;
}

/* 看診標頭窄版（名字 20px）：md 尺寸。 */
@media (max-width: 899px) {
  .po-banner-row > .po-name-marks .vstar-group.is-lg .vstar { width: var(--star-box-w-md); height: var(--star-box-h-md); }
  .po-banner-row > .po-name-marks .vstar-group.is-lg svg { width: var(--star-glyph-md); height: var(--star-glyph-md); }
}

/* 收費那一行：星、名字、更換鈕；名字吃掉中間的空間，鈕仍在最右。 */
.picker-chosen > .po-name-marks ~ strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 叫號椅卡：名字前，不折行。 */
.queue-chair-who {
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

/* ---------- 今天看板：時間｜星｜姓名｜醫師・椅｜處置｜狀態｜下一步｜次要動作 ---------- */
/* 原本的「卡況」與「掛號✓ 病歷✓ 缺收費」兩欄拿掉，星欄放在 subgrid 的第二欄。 */
.po-today-grid {
  grid-template-columns: 56px calc(var(--star-box-w) * 3) fit-content(20em) minmax(7em, 12em) minmax(0, 1fr) max-content max-content max-content;
}

/* 身障證明到期、押金：名字底下第二行，從名字那一欄開始。 */
.po-today-row > .po-today-extra {
  grid-column: 3 / 6;
}

/* 中等寬度：醫師・椅、處置收起（views.css 既有規則），星欄不動。 */
@container (max-width: 1000px) {
  .po-today-grid {
    grid-template-columns: 44px calc(var(--star-box-w) * 3) minmax(6em, 1fr) max-content max-content max-content;
  }

  .po-today-row > .po-today-extra {
    display: flex;
    grid-row: 2;
    grid-column: 3 / -1;
  }

  /* 時間欄縮成 44px 後，星往左拉 4px 會貼到時間的字。 */
  .vm-stars-cell .vstar-group {
    margin-inline-start: 0;
  }
}

/* 很窄（≤680）：第一行 時間｜星｜姓名｜狀態；第二行 證明・押金｜下一步；第三行次要動作。 */
@container (max-width: 680px) {
  .po-today-grid .po-today-row {
    grid-template-columns: 44px calc(var(--star-box-w) * 3) minmax(0, 1fr) max-content;
    grid-template-areas: "time stars who state" ". extra extra next" ". more more more";
  }

  .po-today-row > .vm-stars-cell { grid-area: stars; }

  .po-today-row > .po-today-extra {
    grid-area: extra;
    grid-row: auto;
    grid-column: auto;
  }
}

/* ---------- 叫號的候診清單：號碼｜星｜姓名…（flex 列，格子給固定寬） ---------- */
.queue-row > .vm-stars-cell {
  flex: none;
  width: calc(var(--star-box-w) * 3);
}

/* 號碼欄固定寬，三位數的號碼也不把星推歪。 */
.queue-row > .queue-ticket {
  flex: none;
  width: 60px;
}

/* ---------- 窄看板一列一行（A23 使用者「空好大一格」）----------
   ≤1000：醫師・椅放回姓名後面那一格，吃掉中間的空間（以前藏起來，中間空一大段）。
   ≤680：時間｜星｜姓名｜醫師・椅｜狀態｜下一步 同一行，狀態與下一步並排靠右；證明・押金、次要動作（自費報到、改約）
   有的時候才多一行。空的那幾行不留間距（row-gap 0，間距由那幾格自己的上邊距給）。 */
@container (max-width: 1000px) {
  /* 姓名欄跟著最長的名字＋標記（上限 11em），剩下的給醫師・椅；次要動作（自費報到、改約）不另佔一欄——
     不然每一列右邊都空出那一欄的寬——有的列才在第二行、靠右。 */
  .po-today-grid {
    grid-template-columns: 44px calc(var(--star-box-w) * 3) fit-content(11em) minmax(0, 1fr) max-content max-content;
  }

  .po-today-row > .po-today-doc {
    display: block;
  }

  .po-today-row > .po-today-more {
    grid-row: 2;
    grid-column: 3 / -1;
    justify-content: flex-end;
  }

  .po-today-row > .po-today-more:empty {
    display: none;
  }
}

@container (max-width: 680px) {
  .po-today-grid .po-today-row {
    grid-template-columns: 40px calc(var(--star-box-w) * 3) fit-content(11em) minmax(0, 1fr) max-content max-content;
    grid-template-areas:
      "time stars who doc state next"
      ". . extra extra extra extra"
      ". . more more more more";
    column-gap: var(--sp-2);
    row-gap: 0;
  }

  .po-today-row > .po-today-doc { grid-area: doc; }

  .po-today-row > .po-today-extra:not(:empty),
  .po-today-row > .po-today-more:not(:empty) {
    margin-top: var(--sp-1);
  }

  .po-today-row > .po-today-more:empty {
    display: none;
  }
}