html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* EIP UI 規範：主色與表格表頭（與 InvSite / HrmSite / eip-ui-design-skills 一致）
   色票變數以 eip-theme.css 為準；此處僅補站台專用結構 class，不重複定義 :root 色票。 */

/* 唯讀欄位一致呈現：檢視模式請使用 <input class="form-control" readonly /> 與輸入框同款樣式，勿使用 .form-control-plaintext 造成有框/無框混雜。 */

/* 清單頁容器：規範頁面容器 bg-main（ui-design-standards） */
.list-page-container {
  background-color: var(--bg-main);
  min-height: 100vh;
}

/* 頁面標題區：規範左 32px、上 16px（ui-design-standards），避免頂部過空 */
.page-title-block {
  margin-left: 32px;
  margin-top: 16px;
}

/* 頁面主標題：規範 24px/700、text-primary */
.page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

/* 頁面副標題：規範 14px、text-muted */
.page-subtitle {
  font-size: 14px;
}

/* 區塊標題列：淡灰背景、單一左側強調條 4px（清單頁查詢區/清單區） */
.block-title-header {
  background-color: var(--table-header-bg);
  border-left: 4px solid var(--accent-primary);
}

.block-title-header h5,
.block-title-header h2,
.block-title-header .h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

/* 深色主題：板塊標題列與清單頁容器（對齊 eip-theme.css 變數） */
[data-theme="dark"] .list-page-container {
  background-color: var(--bg-main);
}

[data-theme="dark"] .block-title-header {
  background-color: var(--card-header-bg, var(--table-header-bg));
  border-left-color: var(--accent-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .block-title-header h5,
[data-theme="dark"] .block-title-header h2,
[data-theme="dark"] .block-title-header .h5 {
  color: var(--text-primary);
}

[data-theme="dark"] .page-title {
  color: var(--text-primary);
}

[data-theme="dark"] .thead-table-header-bg {
  background-color: var(--table-header-bg);
}

/* 清單頁表單 Label：規範 12px（text-muted 由 class 另加） */
.list-page-container .form-label {
  font-size: 12px;
}

/* 表格表頭：規範 table-header-bg */
.thead-table-header-bg {
  background-color: var(--table-header-bg);
}

/* 表格底色：白底卡片內表格（規範 bg-white） */
.table-bg-white {
  background-color: var(--bg-white);
}

/* 欄位說明 icon（Popover 觸發）：規範 cursor help */
.cursor-help {
  cursor: help;
}

/* 區塊標題左側強調條（eip-ui-design-skills §2.2）
   必須使用 EIP 色票 --text-primary，勿用 Bootstrap --bs-body-color（EIP 主題為 data-theme，非 data-bs-theme）。 */
.admin-content .card-header {
  border-left: 4px solid var(--accent-primary);
}

.admin-content .card-header h5,
.admin-content .card-header h2,
.admin-content .card-header .h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* 狀態 chip（對齊 EIP 子系統 UI 規範） */
.status-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.status-chip.status-approved,
.status-approved {
  background-color: #DCFCE7;
  border: 1px solid #86EFAC;
  color: #166534;
}

.status-chip.status-draft,
.status-draft {
  background-color: #F3F4F6;
  border: 1px solid #D1D5DB;
  color: #374151;
}

.status-chip.status-pending,
.status-pending {
  background-color: #FEF3C7;
  border: 1px solid #FCD34D;
  color: #92400E;
}

.status-chip.status-rejected,
.status-rejected {
  background-color: #FEE2E2;
  border: 1px solid #FCA5A5;
  color: #991B1B;
}

.status-chip.status-reviewing,
.status-reviewing {
  background-color: #DBEAFE;
  border: 1px solid #93C5FD;
  color: #1D4ED8;
}

.status-chip.status-neutral,
.status-neutral {
  background-color: #E2E8F0;
  border: 1px solid #CBD5E1;
  color: #334155;
}