/*
 * Approval-only styles
 * Scoped to pages using the "approval" layout.
 * These styles establish requester/approval-specific affordances only.
 * Generic admin/finance/approval-admin primitives live in admin_only.css and
 * DESIGN.md; do not duplicate those table/filter/panel vocabularies here.
 */

/* ================================================
   Mode banner — thin system stripe at page top
   ================================================ */
.approval-mode-banner {
  background: #020617;
  height: 3px;
  width: 100%;
  flex-shrink: 0;
}

html[data-approval-shell="true"],
body[data-approval-shell="true"] {
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

.approval-page-shell {
  overscroll-behavior-y: contain;
}

body[data-pwa-standalone="true"] {
  padding-top: env(safe-area-inset-top);
}

body[data-pwa-standalone="true"] [data-pwa-shell-target="hintBanner"] {
  display: none;
}

body[data-pwa-standalone="true"] .approval-page-shell {
  min-height: calc(100vh - env(safe-area-inset-top));
  min-height: calc(100svh - env(safe-area-inset-top));
  min-height: calc(100dvh - env(safe-area-inset-top));
}

body[data-pwa-standalone="true"] .approval-standalone-safe-bottom {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

@supports (height: 100dvh) {
  .approval-page-shell {
    min-height: 100dvh;
  }
}

/* ================================================
   Form inputs — clean, no shadow
   ================================================ */
.approval-form-input,
.approval-form-select,
.approval-form-textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #111827;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
}

.approval-form-input:focus,
.approval-form-select:focus,
.approval-form-textarea:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}

.approval-form-input::placeholder,
.approval-form-textarea::placeholder {
  color: #94a3b8;
}

.approval-form-input.datepicker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.approval-amount-display[readonly] {
  background-color: #f8fafc;
  border-color: #e2e8f0;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  cursor: default;
  pointer-events: none;
  user-select: none;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.approval-amount-display[readonly]:focus,
.approval-amount-display[readonly]:focus-visible {
  border-color: #e2e8f0;
  box-shadow: none;
  outline: none;
}

.approval-amount-display[readonly]::placeholder {
  color: #94a3b8;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0;
}

.approval-form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.approval-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}

/* Inline label row (label + badge) */
.approval-form-label-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
  min-width: 0;
}

.approval-form-label-row .approval-form-label {
  margin-bottom: 0;
}

/* Required star */
.approval-required-star {
  color: #ef4444;
  font-size: 0.875rem;
  line-height: 1;
}

/* Required marker — quiet inline annotation, NOT a filled pill. A small square
   tick + the word 必填 in muted red; ties to the squared status language used in
   admin_only.css. The active :required:invalid field highlight below is the
   primary "still empty" signal, so this stays deliberately understated. */
.approval-field-required {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  color: #be123c;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* 本檔晚於 tailwind.css 載入，display 會蓋掉 .hidden（同 specificity 後者勝）。
   附件說明的「必填」badge 由 JS 以 .hidden 切換（僅出款急件時顯示），必須讓 .hidden 贏。 */
.approval-field-required.hidden {
  display: none;
}

.approval-field-required::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 1px;
  background-color: currentColor;
  flex: none;
}

/* Optional badge */
.approval-optional-badge {
  font-size: 0.75rem;
  color: #64748b;
}

/* Required-empty "todo" highlight — fills the cells the employee must still
   complete. Keyed off :required:invalid, so an empty (or format-invalid)
   required field is tinted and the highlight clears automatically once a valid
   value is entered (:valid). readonly/disabled fields are barred from
   constraint validation and never light up; AI-filled fields have values, so
   they stay :valid and don't collide with the amber low-confidence rule below.
   Background and border are split so focus yields to the charcoal focus ring. */
.approval-form-input:required:invalid,
.approval-form-select:required:invalid,
[data-datepicker-target="input"]:required:invalid {
  background-color: #f1f5f9;
}

.approval-form-input:required:invalid:not(:focus),
.approval-form-select:required:invalid:not(:focus),
[data-datepicker-target="input"]:required:invalid:not(:focus) {
  border-color: #64748b;
  box-shadow: inset 0 0 0 1px #64748b;
}

/* AI confidence badge — inline signal beside the field label.
   Rendered by approval_form_controller#renderAIBadge when AI fills a value. */
.approval-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.125rem 0.4375rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  margin-left: auto;
}

.approval-ai-badge::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 1px;
  background-color: currentColor;
  flex: none;
}

.approval-ai-badge.is-high {
  background-color: #ecfdf5;
  color: #047857;
}

.approval-ai-badge.is-medium {
  background-color: #fffbeb;
  color: #b45309;
}

.approval-ai-badge.is-low {
  background-color: #fff1f2;
  color: #be123c;
}

.approval-ai-badge.is-edited {
  background-color: #f1f5f9;
  color: #475569;
}

/* When a field is AI-filled but still needs confirmation (< 0.95), nudge it visually. */
.approval-form-input[data-ai-filled="true"][data-ai-confidence^="0.7"],
.approval-form-input[data-ai-filled="true"][data-ai-confidence^="0.8"],
.approval-form-input[data-ai-filled="true"][data-ai-confidence^="0.9"]:not([data-ai-confidence^="0.95"]):not([data-ai-confidence^="0.96"]):not([data-ai-confidence^="0.97"]):not([data-ai-confidence^="0.98"]):not([data-ai-confidence^="0.99"]),
.approval-form-select[data-ai-filled="true"][data-ai-confidence^="0.7"],
.approval-form-select[data-ai-filled="true"][data-ai-confidence^="0.8"],
.approval-form-select[data-ai-filled="true"][data-ai-confidence^="0.9"]:not([data-ai-confidence^="0.95"]):not([data-ai-confidence^="0.96"]):not([data-ai-confidence^="0.97"]):not([data-ai-confidence^="0.98"]):not([data-ai-confidence^="0.99"]) {
  background-color: #fffbeb;
  border-color: #fcd34d;
}

.approval-form-input[data-ai-user-edited="true"],
.approval-form-select[data-ai-user-edited="true"] {
  background-color: #ffffff;
  border-color: #d1d5db;
}

/* ================================================
   Requester form cards
   ================================================
   .approval-card is intentionally scoped to approval request form steps.
   Generic cards/panels/chips/tables are documented in admin_only.css and
   DESIGN.md so approval-only pages do not grow a second mini design system.
*/
.approval-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.approval-card--muted {
  background-color: #f8fafc;
  border: 0;
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: none;
}

.approval-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #eef2f7;
  background-color: #fbfcfe;
}

/* Numbered step marker — gives the form a guided top-to-bottom sequence
   instead of an undifferentiated stack of cards. */
.approval-card-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background-color: #0f172a;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.approval-card--muted .approval-card-header {
  border-bottom: 0;
  padding-bottom: 0.5rem;
  background-color: transparent;
}

.approval-card-body {
  padding: 1.25rem;
}

.approval-card--muted .approval-card-body {
  padding-top: 0.25rem;
}

/* ================================================
   Progressive disclosure toggle
   ================================================ */
.approval-disclosure-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.approval-disclosure-toggle:hover {
  color: #0f172a;
}

.approval-disclosure-toggle:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.approval-disclosure-toggle svg {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* ================================================
   Active filter chips
   ================================================
   Removable summary of the filters currently applied to a queue.
   Slate pill + charcoal remove control; no gray-* utilities.
*/
.approval-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.25rem 0.25rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #334155;
  background-color: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
}

.approval-filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  min-height: 1.25rem;
  font-size: 1rem;
  line-height: 1;
  color: #64748b;
  border-radius: 9999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.approval-filter-chip__remove:hover {
  color: #0f172a;
  background-color: #f1f5f9;
}

.approval-filter-chip__remove:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .approval-filter-chip__remove {
    min-width: 1.75rem;
    min-height: 1.75rem;
  }
}

/* ================================================
   Requester hint box
   ================================================
   This remains a form affordance; admin/finance notices use .admin-state-panel.
*/
.approval-hint-box {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.625rem;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #64748b;
}

@media (max-width: 767px) {
  .approval-form-input,
  .approval-form-select,
  .approval-form-textarea {
    font-size: 1rem;
    min-height: 2.75rem;
  }

  .approval-card-header {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0.875rem 1rem;
  }

  .approval-card-body {
    padding: 1rem;
  }

  .approval-form-label-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .approval-form-label {
    min-width: 0;
  }

  .approval-disclosure-toggle {
    min-height: 2.75rem;
    padding-block: 0.25rem;
  }

  .approval-actions-panel {
    position: static;
    z-index: auto;
  }

  .approval-actions-panel [type="submit"],
  .approval-actions-panel button,
  .approval-actions-panel a {
    min-height: 2.75rem;
  }

  .expense-line-item-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .expense-line-item-header button {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  .expense-line-item-summary {
    flex-basis: calc(100% - 5.5rem);
    order: 2;
  }

  .expense-line-item-status {
    order: 3;
  }

  .expense-line-item-controls {
    margin-left: auto;
    order: 1;
  }
}

@media (max-width: 420px) {
  .expense-line-item-remove-button {
    min-width: 2.5rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .expense-line-item-remove-label {
    display: none;
  }
}

/* ================================================
   Unified page header — one designed band shared by
   new + edit so the two entry points read as one screen.
   ================================================ */
.approval-page-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.approval-page-header--surface {
  padding: 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.approval-page-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background-color: #0f172a;
  color: #ffffff;
}

.approval-page-header-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.approval-page-header-main {
  min-width: 0;
  flex: 1;
  padding-top: 0.0625rem;
}

.approval-page-header-eyebrow {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: #475569;
}

.approval-page-header-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.approval-page-header-title {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #0f172a;
}

.approval-page-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #64748b;
}

.approval-page-header-description {
  margin-top: 0.375rem;
  max-width: 64ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #475569;
}

.approval-page-header-tabs {
  margin-top: 1rem;
}

.approval-page-header-action {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.approval-page-header-id {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.01em;
}

/* Non-pill state tag — squared marker + label, matching the admin status
   language. Used for draft / returned state in the header. */
.approval-state-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.25rem;
  padding: 0.1875rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.approval-state-tag::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 1px;
  background-color: currentColor;
  flex: none;
}

.approval-state-tag--neutral { background-color: #f1f5f9; color: #475569; }
.approval-state-tag--warning { background-color: #fef3c7; color: #b45309; }
.approval-state-tag--info { background-color: #e0f2fe; color: #0369a1; }

/* Unified inline alert — one shape for the returned-edit notice and any
   form-level message, replacing ad-hoc amber/rose Tailwind boxes. */
.approval-inline-alert {
  display: flex;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
}

.approval-inline-alert-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
}

.approval-inline-alert-body {
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.approval-inline-alert-title {
  font-weight: 600;
}

/* Flush variant — for alerts inside a space-y stack that owns the gap. */
.approval-inline-alert--flush {
  margin-bottom: 0;
}

.approval-inline-alert--warning {
  background-color: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.approval-inline-alert--warning .approval-inline-alert-icon { color: #d97706; }

.approval-inline-alert--danger {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.approval-inline-alert--danger .approval-inline-alert-icon { color: #dc2626; }

/* ================================================
   Guided step spine — turns the flat card stack into a
   clearly-sequenced document builder (上傳 → 填寫 → 預覽).
   Step count is flow-independent (always 3), so the numbers
   are stable across money / contract / seal.
   ================================================ */
.approval-flow-steps {
  display: flex;
  flex-direction: column;
}

.approval-step {
  display: flex;
  gap: 1.125rem;
  align-items: stretch;
}

.approval-step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 2.25rem;
}

.approval-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background-color: #0f172a;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
}

.approval-step-line {
  width: 2px;
  flex: 1 1 auto;
  min-height: 1.25rem;
  margin: 0.375rem 0;
  background: linear-gradient(#cbd5e1, #e2e8f0);
  border-radius: 1px;
}

.approval-step-content {
  flex: 1;
  min-width: 0;
  padding-bottom: 1.75rem;
}

.approval-step:last-child .approval-step-content {
  padding-bottom: 0;
}

.approval-step-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.5rem;
  padding-top: 0.4375rem;
}

@media (max-width: 640px) {
  /* 手機：移除左側步驟導軌（號碼＋連接線），內容改為滿版、與頁首和橫幅同一左右邊距，
     不再被導軌往右推（修正「畫面內容偏移」）。步驟改由各區塊既有標題
     （上傳單據照片／申請資訊／費用明細）指引，號碼在窄螢幕本來就與標題重複。 */
  .approval-step {
    display: block;
  }

  .approval-step-rail {
    display: none;
  }

  .approval-step-content {
    padding-bottom: 1.25rem;
  }
}

/* 送審前流程預覽（步驟 3）為桌機專屬：手機上由底部 _mobile_preview 收合區
   擔任唯一的流程預覽，避免同一份預覽在手機渲染兩次。節點仍留在 DOM，
   sidebarPreviewContent 這個 Stimulus target 照常解析、照常被填入。
   斷點對齊 _mobile_preview 的 md:hidden（768px）。 */
@media (max-width: 767px) {
  .approval-step--routing-preview {
    display: none;
  }
}

/* 例外優先著陸：已確認的明細整批收起，只留待補卡片在眼前。
   用獨立 class（非 .hidden），收起的列仍留在 activeRows／驗證／送審 —
   切換「顯示已確認」時由 expense_line_items_controller#applyCompleteFilter 解除。 */
.expense-row--collapsed-complete {
  display: none;
}

/* AI 辨識信心分級徽章（高/中）。用分級而非精確 %（信心是 LLM 自評、未校準）。
   由 expense_line_items_controller#renderRowConfidence 切換 hidden/is-high/is-medium。 */
.expense-confidence-badge {
  gap: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.expense-confidence-badge:not(.hidden) {
  display: inline-flex;
  align-items: center;
}

.expense-confidence-badge::before {
  content: "";
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-right: 0.25rem;
  border-radius: 1px;
  background-color: currentColor;
}

.expense-confidence-badge.is-high {
  background-color: #ecfdf5;
  color: #047857;
}

.expense-confidence-badge.is-medium {
  background-color: #fffbeb;
  color: #b45309;
}

/* 類別快選晶片：低信心類別時的快速選定（封閉集合）。由 renderCategoryChips 切換 hidden/flex、is-selected。 */
.expense-category-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  background-color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.expense-category-chip:hover {
  background-color: #f8fafc;
}

.expense-category-chip.is-selected {
  border-color: #0f172a;
  background-color: #0f172a;
  color: #ffffff;
}

/* 金額候選晶片：低信心金額且帶 ≥2 個相異候選時的快速選定（與類別晶片同一視覺語彙，無紫/靛色）。
   由 renderAmountCandidates 切換 hidden/flex、is-selected。 */
.expense-amount-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  background-color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.expense-amount-chip:hover {
  background-color: #f8fafc;
}

.expense-amount-chip.is-selected {
  border-color: #0f172a;
  background-color: #0f172a;
  color: #ffffff;
}

/* 收據甲板：全螢幕逐張審查待補明細。重用既有卡片節點（不搬移、不另開第二套輸入），
   甲板模式下把目前這張卡片升成全螢幕固定面板，其餘卡片／著陸／固定操作列暫時隱藏，
   底部由 .expense-deck-bar 提供「返回總表 / 確認下一筆」。退出甲板即回復原樣。 */
.expense-deck-bar {
  display: none;
}

.expense-line-items--deck .expense-landing,
.expense-line-items--deck .expense-line-items-fixed-action {
  display: none;
}

.expense-line-items--deck [data-expense-line-items-target="item"]:not(.expense-deck-current) {
  display: none;
}

.expense-line-items--deck .expense-deck-current {
  position: fixed;
  inset: 0;
  z-index: 50;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top);
  padding-bottom: 6rem;
  background: #ffffff;
}

.expense-line-items--deck .expense-deck-bar {
  display: block;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 51;
}

/* 甲板右上角關閉鍵：除了底部「返回總表」，提供符合慣例的退出出口，
   top 對齊 safe-area 避開瀏海/狀態列，避免使用者被困在全螢幕甲板。 */
.expense-deck-close {
  display: none;
}

.expense-line-items--deck .expense-deck-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0.5rem);
  right: 0.75rem;
  z-index: 52;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
}

.expense-line-items--deck .expense-deck-close:hover {
  background: #f1f5f9;
}

/* ================================================
   Requester 行動按鈕契約 — 申請人／簽核中心唯一按鈕字彙
   ================================================
   一套 .approval-btn 取代散落各 partial 的 raw Tailwind 按鈕組合。
   主色 charcoal #0f172a（pressed #020617）是 requester surface 的
   named exception（DESIGN.md §5）；圓角統一 rounded-md（0.375rem），
   觸控高度底線 44px，--lg 提供 48px 的單手決策尺寸。 */
.approval-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.approval-btn:active {
  transform: scale(0.98);
}

.approval-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0f172a;
}

.approval-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .approval-btn {
    transition: none;
  }

  .approval-btn:active {
    transform: none;
  }
}

.approval-btn--primary {
  background-color: #0f172a;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.approval-btn--primary:hover { background-color: #1e293b; }
.approval-btn--primary:active { background-color: #020617; }

.approval-btn--secondary {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.approval-btn--secondary:hover {
  background-color: #f8fafc;
  border-color: #94a3b8;
}

/* 安靜層級：儲存草稿／取消這類「誠實送審」降級行動 — 文字鈕但保留 44px 觸控高度 */
.approval-btn--quiet {
  background: none;
  border-color: transparent;
  color: #334155;
  font-weight: 500;
}

.approval-btn--quiet:hover {
  color: #0f172a;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.approval-btn--danger {
  background-color: #ffffff;
  border-color: #fecdd3;
  color: #be123c;
}

.approval-btn--danger:hover {
  background-color: #fff1f2;
  border-color: #fda4af;
}

.approval-btn--danger:focus-visible,
.approval-btn--reject:focus-visible {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f43f5e;
}

/* 簽核決策三色（named exception，DESIGN.md §5）：
   核准＝實心 emerald、拒絕＝rose 淡底、退回＝amber 淡底 — 與步驟狀態語言同色。 */
.approval-btn--approve {
  background-color: #047857;
  border-color: #047857;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.approval-btn--approve:hover { background-color: #065f46; }

.approval-btn--approve:focus-visible {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #047857;
}

.approval-btn--reject {
  background-color: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

.approval-btn--reject:hover {
  background-color: #ffe4e6;
  border-color: #fda4af;
}

.approval-btn--return {
  background-color: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.approval-btn--return:hover {
  background-color: #fef3c7;
  border-color: #fcd34d;
}

.approval-btn--return:focus-visible {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f59e0b;
}

/* 48px 決策尺寸：固定操作列與簽核面板的主決策 */
.approval-btn--lg {
  min-height: 3rem;
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
}

/* 誠實送審：母單還有待補費用明細時，把「送審」主行動降為次要（純視覺，不影響 disabled 防呆）。
   key 在 form 的 data-expense-exceptions（由 expense_line_items_controller#renderSubmitGating 設定，
   且只在費用明細模式設定）；合約／用印不掛該控制器 → 無此屬性 → 維持主要 charcoal 樣式。
   鎖定 submitButton target 而非按鈕 class，避免之後表單內其他 --primary 按鈕被誤降級。 */
form[data-expense-exceptions]:not([data-expense-exceptions="0"]) [data-approval-form-target~="submitButton"] {
  background-color: #e2e8f0;
  color: #475569;
  box-shadow: none;
}

form[data-expense-exceptions]:not([data-expense-exceptions="0"]) [data-approval-form-target~="submitButton"]:hover {
  background-color: #cbd5e1;
}

/* 費用明細模式時送審主鈕住在固定操作列；footer 的主鈕收起，避免同頁雙主鈕。
   key 與固定操作列的顯示同源（expense-line-items-fixed-action-reserved，
   由 expense_line_items_controller 隨明細模式切換），不另設旗標。 */
form.expense-line-items-fixed-action-reserved [data-testid="approval-form-actions"] [data-approval-form-target~="submitButton"] {
  display: none;
}

@media (max-width: 767px) {
  .approval-page-header {
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }

  .approval-page-header-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .approval-page-header-title {
    font-size: 1.3125rem;
  }
}