/* 處方用藥（prescriptions.js）與藥品主檔（drugs.js）。view 層：只用 tokens，不寫顏色字面值。
   自成一個檔：看診畫面的 doctor.css／views.css 同時在別的分支改版，分開放比較不會撞。 */

.rx { margin-top: var(--sp-3); }
/* 草稿畫面：處置表那一欄自己用 grid gap 排間距（doctor.css .po-proc），這裡再加 margin 就疊成雙倍。 */
.po-proc > .rx { margin-top: 0; }
/* 「處方」＋過敏標記＋開藥搜尋格同一行：沒開藥時整個處方區就是這一行 40，不是標題一行、
   空搜尋框再一行（使用者 2026-10-26）。放不下就換行，不把搜尋格擠成一條縫。 */
.rx-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.rx-head { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--h-control-sm); flex: 0 0 auto; }
.rx-title { font-weight: var(--fw-semibold); color: var(--ink-2); }
.rx-rows { display: grid; gap: var(--sp-1); }
.rx-line { color: var(--ink-2); }

/* 一種藥一列：藥名吃掉剩下的寬度，其他欄固定寬度、對齊成一欄一欄。 */
.rx-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid var(--hairline); }
.rx-name { flex: 1 1 12em; min-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-cap, .rx-unit { color: var(--ink-3); }
.rx-row input, .rx-row select { min-height: var(--h-control-sm); padding: 0 var(--sp-2); }
.rx-dose, .rx-days, .rx-qty { width: 4.5em; text-align: right; font-feature-settings: var(--numerals); }
.rx-freq { width: 6.5em; }
.rx-route { width: 7em; }
.rx-del { min-width: var(--h-control-sm); }

/* 開藥的搜尋格與結果：清單一次放 8 筆不必捲（每筆一行高）。
   搜尋格跟著標題排在同一行，寬度照內容收（14em 夠打藥名或簡碼），不再是一條佔滿整欄的空框；
   高度與這個畫面其他動作一致（--h-control-sm 40，本來是 44，比每一顆按鈕都高一級）。 */
.rx-add { position: relative; flex: 0 1 14em; min-width: 11em; }
.rx-search { width: 100%; min-height: var(--h-control-sm); }
.rx-results {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin: var(--sp-1) 0 0; padding: var(--sp-1) 0; list-style: none;
  background: var(--group); border: 1px solid var(--hairline-strong); border-radius: var(--r-input);
  box-shadow: 0 4px 14px var(--scrim);
}
.rx-result { display: flex; justify-content: space-between; gap: var(--sp-3); min-height: var(--h-control-sm); align-items: center; padding: 0 var(--sp-3); cursor: pointer; }
.rx-result.is-active, .rx-result:hover { background: var(--fill); }
.rx-result-meta { color: var(--ink-3); white-space: nowrap; }
/* 「還有幾筆」那一行：選不到，只是告知，所以不給 hover 也不給游標。 */
.rx-result-more { min-height: var(--h-control-sm); display: flex; align-items: center; padding: 0 var(--sp-3); color: var(--ink-3); border-top: 1px solid var(--hairline); }

/* 藥物過敏擋下來的紅色區塊（prescriptions.js blockPanel）：不會自己消失，只有一顆
   「回去修改」。外觀比行內錯誤重一級（整塊紅、有框），因為它擋住的是病人安全。 */
.rx-block {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--danger); border-radius: 12px;
  background: var(--danger-wash); color: var(--danger);
}
.rx-block-text { flex: 1 1 18em; margin: 0; font-weight: var(--fw-semibold); }

/* 不會自己消失的錯誤（prescriptions.js stickyError）：放在 .rx-row 裡時要自己佔一整行，
   不然會被 flex 擠在欄位之間把那一列撐開。 */
.rx-error {
  flex: 1 0 100%;
  margin: var(--sp-1) 0 0;
  color: var(--danger);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
}

/* 這一列有東西沒存進去：左邊一條紅，直到下一次存成功。 */
.rx-row.is-error {
  border-left: 3px solid var(--danger);
  padding-left: var(--sp-2);
  background: var(--danger-wash);
}

/* 藥品主檔的表單：欄位多，排成兩欄。 */
.drug-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(16em, 1fr)); gap: var(--sp-3); }
.drug-form .form-actions { grid-column: 1 / -1; }

/* 還沒填過敏比對關鍵字的那幾種：用警示色點出來（這一欄空著＝開藥時幾乎擋不住）。 */
.drug-allergy-empty { color: var(--warn); }

/* === 處方畫面（整個跳出來）=====================================================
   使用者 2026-10-26：「點下去會跳出處方畫面(完整)讓我們選」。同 §10.9 的「選代碼整頁跳出來」。

   內容盒**鋪滿整個殼**（沒有置中的窄欄）：
     1. 開藥是一張寬表（藥名、每次量、頻率、天數、總量、途徑、刪除），窄欄會把它擠到換行。
     2. 置中的窄欄會在殼上留出一圈「看起來是頁面、其實是遮罩」的空白；共用的
        「點到殼本身就關」寫法在那一圈會誤觸（知識庫
        modal-restyled-as-full-page-inherits-backdrop-click-close）。這裡沒有那一圈。
   內容的寬度用左右內距收，不用 max-width。 */
.rx-screen {
  width: min(72rem, calc(100vw - 2 * var(--sp-4)));
  height: min(48rem, calc(100dvh - 2 * var(--sp-4)));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-group);
  background: var(--group);
  color: var(--ink);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.25);
  overflow: hidden;
}

.rx-screen[open] {
  display: flex;
  flex-direction: column;
}

.rx-screen::backdrop {
  background: rgb(0 0 0 / 0.35);
}

/* 標題列固定在上面：「處方」、從哪一列進來的、「關閉」。清單再長都看得到出口
   （§10.2：流程的尾巴也要量——離開的按鈕不可以跑到捲動之後才出現）。 */
.rx-screen-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}

.rx-screen-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title3);
  font-weight: var(--fw-semibold);
}

/* 從哪一列按進來的（脈絡，不是說明）：淡字，吃掉中間的空間把「關閉」推到最右邊。 */
.rx-screen-from {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-3);
}

.rx-screen-close {
  flex: none;
  margin-left: auto;
}

/* 清單自己捲，標題列不動。 */
.rx-screen-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--sp-4) var(--sp-4);
}

/* 這個畫面裡的處方區不必再跟上面的東西留間距（標題列已經有 border 分隔）。 */
.rx-screen-body > .rx { margin-top: var(--sp-3); }

/* 搜尋結果的浮動清單在這個畫面裡要壓在上層，不被下面的列蓋住。 */
.rx-screen .rx-results { z-index: 2; }

/* 平板直放（768）：寬度吃滿，表格換行照 .rx-row 原本的 flex-wrap。 */
@media (max-width: 820px) {
  .rx-screen {
    width: calc(100vw - 2 * var(--sp-3));
    height: calc(100dvh - 2 * var(--sp-3));
  }
}

/* 觸控：標題列與「關閉」至少 44（spec §0）。 */
@media (pointer: coarse) {
  .rx-screen-head {
    min-height: 56px;
  }

  .rx-screen button,
  .rx-screen input,
  .rx-screen select {
    min-height: 44px;
  }
}