/* ERP 後台樣式：伸縮式側欄、首頁卡片、RSP 字樣 */

:root, html[data-theme="light"], html[data-theme="dark"] {
  /* ---- ERP 配色（RSP 紅色維持 #ff0000 不變） ---- */
  --erp-brand: #0f766e;          /* 主色：青綠 */
  --erp-brand-hover: #115e59;
  --erp-brand-soft: #e6f4f1;
  --erp-ink: #1e293b;            /* 頁首深藍灰 */
  --erp-bg: #f4f6f8;
  --erp-card: #ffffff;
  --erp-text: #1f2933;
  --erp-muted: #5b6776;
  --erp-line: #dfe4ea;
  --erp-danger: #c62828;
  --erp-warn: #b45309;
  --erp-ok: #2e7d32;
  --erp-info: #1d4ed8;

  /* ---- 套到 Django 後台的變數 ---- */
  --primary: var(--erp-ink);
  --secondary: var(--erp-brand);
  --accent: #f5c46b;
  --primary-fg: #ffffff;
  --body-fg: var(--erp-text);
  --body-bg: var(--erp-card);
  --body-quiet-color: var(--erp-muted);
  --body-medium-color: #3b4652;
  --body-loud-color: #0f172a;
  --header-color: #e2e8f0;
  --header-branding-color: #ffffff;
  --header-bg: var(--erp-ink);
  --header-link-color: #ffffff;
  --breadcrumbs-fg: #cfe9e5;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: var(--erp-brand);
  --link-fg: #0e6b62;
  --link-hover-color: #0b4f49;
  --link-selected-fg: var(--erp-brand);
  --hairline-color: #e8ecf0;
  --border-color: #cfd6de;
  --error-fg: var(--erp-danger);
  --message-success-bg: #e8f5e9;
  --message-warning-bg: #fff4e0;
  --message-error-bg: #fdecea;
  --darkened-bg: #f1f4f7;
  --selected-bg: #e6f4f1;
  --selected-row: #fff8e1;
  --button-fg: #ffffff;
  --button-bg: var(--erp-brand);
  --button-hover-bg: var(--erp-brand-hover);
  --default-button-bg: var(--erp-brand);
  --default-button-hover-bg: var(--erp-brand-hover);
  --close-button-bg: #6b7785;
  --close-button-hover-bg: #4b5563;
  --delete-button-bg: var(--erp-danger);
  --delete-button-hover-bg: #a61b1b;
  --object-tools-fg: #ffffff;
  --object-tools-bg: var(--erp-brand);
  --object-tools-hover-bg: var(--erp-brand-hover);
  --font-family-primary: -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color-scheme: light;
}

/* ---------- 左側選單 ---------- */
#nav-sidebar { flex: 0 0 260px; padding: 8px 0 24px; }
.erp-nav-tools { display: flex; gap: 4px; padding: 8px 10px 10px; }
.erp-nav-tools input { flex: 1; min-width: 0; padding: 6px 8px; font-size: 0.875rem;
                       border: 1px solid var(--border-color); border-radius: 6px; }
.erp-nav-tools button { padding: 4px 8px; font-size: 0.75rem; border: 1px solid var(--border-color);
                        border-radius: 6px; background: var(--body-bg); color: var(--body-fg); cursor: pointer; }

.erp-group { border-bottom: 1px solid var(--hairline-color); }
.erp-group-title {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  font-size: 1.2rem;           /* 主欄位字體：明顯大於子欄位 */
  font-weight: 700;
  color: var(--body-fg);
}
.erp-group-title::-webkit-details-marker { display: none; }
.erp-group-title::after {     /* 展開 / 收合箭頭 */
  content: "›"; margin-left: auto; font-size: 1.2rem; color: var(--body-quiet-color);
  transition: transform .15s ease;
}
.erp-group[open] > .erp-group-title::after { transform: rotate(90deg); }
.erp-group-title:hover { background: var(--darkened-bg); }
.erp-icon { width: 1.4em; text-align: center; }

/* 第二層（例如 模治具管理 → 模具／治具） */
.erp-sub { border-bottom: 0; }
.erp-sub-title { padding: 8px 14px 8px 44px; font-size: 0.9rem; font-weight: 600; }
.erp-sub .erp-children { padding-bottom: 4px; }
.erp-sub .erp-children a { padding-left: 62px; }
.erp-card-sub ul { list-style: none; margin: 4px 0 0; padding-left: 12px; }
.erp-card-sub li { border-top: 0; padding: 3px 0; }

.erp-children { list-style: none; margin: 0; padding: 0 0 8px; }
.erp-children li { margin: 0; padding: 0; }
.erp-children a {
  display: block; padding: 7px 14px 7px 44px;   /* 子欄位縮排 */
  font-size: 1rem; color: var(--body-fg); text-decoration: none;
  border-left: 4px solid transparent;
}
.erp-children a:hover { background: var(--darkened-bg); color: var(--link-hover-color); }
.erp-children a.active {
  background: var(--erp-brand-soft); color: var(--erp-brand); font-weight: 600;
  border-left-color: var(--erp-brand);
}

/* ---------- 首頁卡片 ---------- */
.erp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.erp-card { border: 1px solid var(--hairline-color); border-radius: 10px; padding: 14px 16px;
            background: var(--body-bg); }
.erp-card h2 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; color: var(--body-fg);
               background: none; padding: 0; text-transform: none; letter-spacing: 0; }
.erp-card ul { list-style: none; margin: 0; padding: 0; }
.erp-card li { padding: 5px 0; border-top: 1px solid var(--hairline-color); }
.erp-card li:first-child { border-top: 0; }
.erp-card a { text-decoration: none; }


/* ---------- 固定淺色（白色底） ---------- */
.theme-toggle { display: none !important; }

/* ===================================================================
   不讓頁面左右捲動：所有表單、明細表、列表都縮在螢幕寬度內（文字自動換行）
   =================================================================== */
#main, .main { min-width: 0; }
#content, #content-main, .colM, .colMS { min-width: 0; max-width: 100%; box-sizing: border-box; }
#content .module, #content fieldset, .inline-group, .submit-row { max-width: 100%; min-width: 0; box-sizing: border-box; }

/* 一般欄位：一列放不下就換到下一行，輸入框不超出畫面 */
.aligned .form-row, .form-row > .flex-container, .form-multiline { flex-wrap: wrap; }
.form-multiline > div { min-width: 0; }
#content input[type=text], #content input[type=number], #content input[type=email], #content input[type=url],
#content input[type=password], #content input[type=date], #content select:not(.select2-hidden-accessible),
#content textarea { max-width: 100%; box-sizing: border-box; }
#content textarea, .vLargeTextField { width: 100%; }
.related-widget-wrapper { max-width: 100%; flex-wrap: wrap; }
.select2-container { max-width: 100%; }
.aligned .help, .aligned p.help, .aligned div.help { max-width: 100%; padding-left: 0; margin-left: 0; }

/* 明細表（訂單明細、BOM、傳票分錄…）：欄寬依畫面平均分配，欄位填滿格子，文字換行 */
.inline-group .tabular { overflow: visible; }
.inline-group .tabular table { width: 100%; table-layout: fixed; }
.inline-group .tabular th, .inline-group .tabular td { white-space: normal; overflow-wrap: anywhere; padding: 6px 4px; }
.inline-group .tabular th { font-size: 0.75rem; line-height: 1.25; }
.inline-group .tabular td input:not([type=checkbox]):not([type=radio]), .inline-group .tabular td select:not(.select2-hidden-accessible),
.inline-group .tabular td textarea, .inline-group .tabular .select2-container { width: 100% !important; min-width: 0; }
.inline-group .tabular td.original, .inline-group .tabular th.original { width: 1.5em; }
/* 主要欄位（料號、品名、說明）給寬一點，數字欄位自動分配剩下的寬度 */
.inline-group .tabular th.column-product, .inline-group .tabular th.column-component,
.inline-group .tabular th.column-part, .inline-group .tabular th.column-account { width: 16%; }
.inline-group .tabular th.column-description, .inline-group .tabular th.column-name,
.inline-group .tabular th.column-title, .inline-group .tabular th.column-work_done { width: 14%; }
.inline-group .tabular td.delete, .inline-group .tabular th:last-child:empty { width: 2.5em; }
.inline-group .tabular td .related-widget-wrapper { flex-wrap: nowrap; }
.inline-group .tabular td .related-widget-wrapper-link { display: none; }  /* 明細格子太窄：新增／修改關聯資料請到該資料頁 */

/* 列表：欄位多時文字換行，不出現左右捲軸 */
#changelist .results { overflow-x: visible; }
#result_list { width: 100%; }
#result_list th, #result_list td { white-space: normal; overflow-wrap: break-word; word-break: normal; }
#result_list th .text a, #result_list th .text span { white-space: normal; }

/* 較小的筆電螢幕（1366 以下）：左側選單與右側篩選窄一點，留給內容 */
@media (max-width: 1440px) {
  #nav-sidebar { flex-basis: 220px; }
}
@media (max-width: 1100px) {
  #nav-sidebar { flex-basis: 190px; }
  #content { padding-left: 16px; padding-right: 16px; }
}


/* ===================================================================
   字體放大（全部頁面約大 15–20%）＋直覺化介面
   =================================================================== */
html { font-size: 17px; }
body { font-size: 1rem; line-height: 1.55; background: var(--erp-bg); color: var(--erp-text); }
#container, #main { background: var(--erp-bg); }
#content { padding: 20px 28px 96px; }
#content h1 { font-size: 1.6rem; font-weight: 800; color: var(--body-loud-color); margin: 4px 0 16px; }
#content h2 { font-size: 1.15rem; }
.help, p.help, div.help, .timezonewarning, .datetimeshortcuts { font-size: 0.85rem !important; color: var(--erp-muted); }
#nav-sidebar .erp-group-title { font-size: 1.15rem; }
#nav-sidebar .erp-children a { padding-top: 8px; padding-bottom: 8px; }
.erp-children a.active { background: var(--erp-brand-soft); color: var(--erp-brand); border-left-color: var(--erp-brand); }

/* ---------- 頁首、麵包屑 ---------- */
#header { padding: 12px 28px; }
#header #site-name a { font-size: 1.35rem; font-weight: 800; }
#user-tools { font-size: 0.95rem; }
div.breadcrumbs { padding: 10px 28px; font-size: 0.95rem; }
div.breadcrumbs a:hover { text-decoration: underline; }

/* ---------- 按鈕：主要動作明顯、刪除與次要動作分開 ---------- */
.button, input[type=submit], input[type=button], .submit-row input, a.button, .erp-btn {
  font-size: 1rem; padding: 10px 18px; border-radius: 8px; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.button.default, input[type=submit].default, .submit-row input.default { font-size: 1.05rem; padding: 11px 26px; }
/* 「＋ 新增」放在右上角的大按鈕 */
/* 右上角按鈕列（新增、匯入、匯出）：獨立一列靠右，不佔用列表寬度 */
.object-tools { float: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: -4px 0 12px;
                padding: 0; }
.object-tools li { margin: 0; }
.object-tools a, .object-tools a:link, .object-tools a:visited { text-transform: none; }
#content-main { float: none; width: 100%; }
.object-tools a { border-radius: 10px; padding: 12px 26px; font-size: 1.15rem; font-weight: 700; letter-spacing: 0;
                  text-transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.15); min-height: 48px; display: inline-flex;
                  align-items: center; }
.object-tools a.addlink { background-image: none; padding-left: 26px; }
.object-tools a.addlink::before { content: "＋ "; font-weight: 800; }
.object-tools a:not(.addlink) { background: #fff; color: var(--erp-brand); border: 1px solid var(--erp-brand); }
.object-tools a:not(.addlink):hover { background: var(--erp-brand-soft); color: var(--erp-brand-hover); }

/* 儲存列：固定在畫面底部，隨時看得到；刪除放最左邊、紅色 */
.submit-row { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
              padding: 12px 16px; margin: 20px 0 0; background: rgba(255,255,255,.96); border: 1px solid var(--erp-line);
              border-radius: 12px; box-shadow: 0 -4px 14px rgba(15,23,42,.08); }
.submit-row input, .submit-row a { margin: 0 !important; }
.submit-row input[name=_continue], .submit-row input[name=_addanother], .submit-row input[name=_saveasnew] {
  background: #fff; color: var(--erp-brand); border: 1px solid var(--erp-brand); }
.submit-row input[name=_continue]:hover, .submit-row input[name=_addanother]:hover { background: var(--erp-brand-soft); }
.submit-row .deletelink-box { margin-right: auto !important; order: -1; }
.submit-row a.deletelink, .submit-row a.deletelink:link, .submit-row a.deletelink:visited {
  border-radius: 8px; padding: 10px 16px; font-size: 1rem; background: #fff; height: auto; line-height: 1.2;
  color: var(--erp-danger); border: 1px solid var(--erp-danger); margin-left: auto !important; }

.submit-row a.deletelink:hover { background: var(--erp-danger); color: #fff; }
.submit-row a.closelink { border-radius: 8px; padding: 10px 16px; font-size: 1rem; }

/* ---------- 表單：區塊卡片、必填紅星、標籤清楚 ---------- */
#content fieldset.module { background: var(--erp-card); border: 1px solid var(--erp-line); border-radius: 12px;
                           padding: 0 0 6px; margin-bottom: 18px; overflow: hidden; }
#content fieldset.module > h2, .inline-group h2, .module h2, .module caption {
  background: #f8fafb; color: var(--body-loud-color); font-size: 1.05rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; padding: 12px 16px; border-bottom: 1px solid var(--erp-line); border-left: 4px solid var(--erp-brand); }
.module h2 a, .inline-group h2 a { color: var(--body-loud-color); }
fieldset.collapsed h2, details.fieldset-heading summary { cursor: pointer; }
.aligned label, .form-row label { font-size: 0.95rem; font-weight: 600; color: #334155; }
.aligned label.required::after, .form-row label.required::after { content: " *"; color: var(--erp-danger); }
.form-row { padding: 12px 16px; border-bottom: 1px solid var(--hairline-color); }
#content input[type=text], #content input[type=number], #content input[type=email], #content input[type=url],
#content input[type=password], #content input[type=date], #content input[type=time], #content select:not(.select2-hidden-accessible),
#content textarea, .select2-container--admin-autocomplete .select2-selection--single {
  font-size: 1rem; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: #fff; min-height: 40px; }
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered { line-height: 24px; }
#content input:focus, #content select:focus, #content textarea:focus {
  outline: none; border-color: var(--erp-brand); box-shadow: 0 0 0 3px rgba(15,118,110,.18); }
.errornote, .errorlist { font-size: 0.95rem; }
.errornote { border-radius: 10px; border-left: 5px solid var(--erp-danger); }

/* 明細表：新增一列的連結做成按鈕 */
.inline-group { border: 1px solid var(--erp-line); border-radius: 12px; overflow: hidden; background: var(--erp-card);
                margin-bottom: 18px; }
.inline-group .tabular tr.add-row td, .inline-group div.add-row { padding: 10px 12px; background: #fafbfc; }
.inline-group .add-row a { display: inline-block; background: var(--erp-brand-soft); color: var(--erp-brand);
                           border: 1px dashed var(--erp-brand); border-radius: 8px; padding: 8px 14px; font-weight: 700;
                           background-image: none; font-size: 0.95rem; }
.inline-group .add-row a::before { content: "＋ "; }
.inline-group .tabular th { background: #f8fafb; color: #334155; }

/* ---------- 列表：搜尋列、動作列、表格 ---------- */
#changelist #toolbar { background: var(--erp-card); border: 1px solid var(--erp-line); border-radius: 12px;
                       padding: 12px 14px; margin-bottom: 12px; }
#changelist #toolbar form input[type=text] { font-size: 1rem; min-height: 42px; width: 22em; max-width: 100%;
                                             padding-left: 38px; border-radius: 8px; }
#changelist #toolbar form #searchbar + input[type=submit], #changelist #toolbar form input[type=submit] { padding: 10px 18px; }
#changelist #toolbar #changelist-search img { left: 14px; }
#changelist .actions { background: var(--erp-card); border: 1px solid var(--erp-line); border-radius: 10px;
                       padding: 10px 14px; font-size: 0.95rem; margin-bottom: 8px; }
#changelist .actions select { min-height: 40px; font-size: 0.95rem; }
#changelist .actions .button { padding: 8px 16px; }
#changelist .results { background: var(--erp-card); border: 1px solid var(--erp-line); border-radius: 12px; }
#result_list { font-size: 0.95rem; }
#result_list thead th { background: #f8fafb; color: #334155; font-size: 0.9rem; padding: 10px 10px; border-bottom: 2px solid var(--erp-line); }
#result_list thead th a { color: #334155; }
#result_list td, #result_list th { padding: 10px 10px; vertical-align: middle; }
#result_list tbody tr:hover td, #result_list tbody tr:hover th { background: #f3faf8; }
#result_list tbody tr.selected td, #result_list tbody tr.selected th { background: var(--selected-row); }
#result_list th.field-__str__ a, #result_list th a { font-weight: 700; }
.paginator { font-size: 1rem; padding: 12px 6px; }
.paginator a, .paginator .this-page { padding: 4px 10px; border-radius: 6px; }
.paginator .this-page { background: var(--erp-brand); color: #fff; }
p.paginator { border-top: 0; }

/* ---------- 篩選：放在列表上方（不擠壓表格），每個條件一張小卡片，選項是可點的標籤 ---------- */
#changelist.filtered { flex-direction: column; }
#changelist.filtered .changelist-form-container { order: 2; width: 100%; max-width: 100%; }
#changelist-filter { order: 1; flex: none !important; width: 100%; margin: 0 0 12px !important;
                     background: var(--erp-card); border: 1px solid var(--erp-line); border-radius: 12px; padding: 0 0 10px;
                     font-size: 0.95rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
                     column-gap: 4px; align-items: start; }
#changelist-filter > h2, #changelist-filter > #changelist-filter-extra-actions, #changelist-filter > #changelist-filter-clear {
  grid-column: 1 / -1; }
#changelist-filter > h2 { background: var(--erp-ink); color: #fff; font-size: 1rem; padding: 10px 14px; margin: 0 0 4px;
                          border-radius: 12px 12px 0 0; text-transform: none; letter-spacing: 0; border: 0; }
#changelist-filter > h2::before { content: "篩選 ▾ "; }
#changelist-filter details, #changelist-filter > h3 { margin: 0; }
#changelist-filter h3, #changelist-filter details > summary {
  font-size: 0.92rem; font-weight: 700; color: var(--body-loud-color); padding: 8px 12px 2px; margin: 0;
  text-transform: none; list-style: none; cursor: pointer; }
#changelist-filter ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 6px; margin: 0; border: 0; }
#changelist-filter li { list-style: none; margin: 0; padding: 0; border: 0 !important; }
#changelist-filter li a, #changelist-filter li a:link, #changelist-filter li a:visited {
  display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-color);
  background: #fff; color: #334155; font-size: 0.9rem; line-height: 1.3; text-decoration: none; }
#changelist-filter li a:hover { border-color: var(--erp-brand); color: var(--erp-brand); }
#changelist-filter li.selected a, #changelist-filter li.selected a:link, #changelist-filter li.selected a:visited {
  background: var(--erp-brand); border-color: var(--erp-brand); color: #fff !important; font-weight: 700; }
#changelist-filter-extra-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 12px 6px; }
#changelist-filter-extra-actions h3 { padding: 0; margin: 0; }
#changelist-filter-extra-actions a { font-size: 0.9rem; }
#changelist-filter #changelist-filter-clear a { display: inline-block; margin: 2px 12px 0; padding: 6px 14px; border-radius: 8px;
                                                 background: #fdecea; color: var(--erp-danger); font-weight: 700; }
#changelist-filter #changelist-filter-clear a::before { content: "✕ "; }

/* 日期快速篩選（上方的年／月） */
.xfull .date-hierarchy, #changelist .xfull { font-size: 0.95rem; }

/* ---------- 訊息 ---------- */
ul.messagelist li { font-size: 1rem; border-radius: 10px; margin: 0 0 8px; padding: 12px 16px 12px 44px;
                    background-position: 16px 14px; border-left: 5px solid var(--erp-ok); }
ul.messagelist li.warning { border-left-color: var(--erp-warn); }
ul.messagelist li.error { border-left-color: var(--erp-danger); }

/* ---------- 首頁卡片 ---------- */
.erp-card { border-radius: 12px; border-color: var(--erp-line); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.erp-card h2 { font-size: 1.15rem; }
.erp-card li a { font-size: 1rem; }

/* ---------- 共用小元件（看板、工具列、標籤） ---------- */
.erp-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; color: #fff; font-size: 0.85rem; font-weight: 700; }
.erp-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.erp-btn { display: inline-block; background: #fff; color: var(--erp-brand); border: 1px solid var(--erp-brand); text-decoration: none; }
.erp-btn:hover { background: var(--erp-brand-soft); }
.erp-btn-primary { background: var(--erp-brand); color: #fff !important; }
.erp-btn-primary:hover { background: var(--erp-brand-hover); }
.erp-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; margin-left: auto; }
.erp-seg a { padding: 8px 14px; color: #334155; text-decoration: none; }
.erp-seg a.on { background: var(--erp-ink); color: #fff; }
.erp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.erp-stats > div { background: var(--erp-card); border: 1px solid var(--erp-line); border-radius: 12px; padding: 12px 16px; }
.erp-stats span { display: block; color: var(--erp-muted); font-size: 0.9rem; }
.erp-stats b { font-size: 1.5rem; color: var(--body-loud-color); }
.erp-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.erp-col { background: #eef2f5; border-radius: 12px; padding: 0 10px 10px; min-width: 0; }
.erp-col header { border-top: 5px solid; border-radius: 12px 12px 0 0; padding: 10px 4px 8px; }
.erp-col h2 { margin: 0; font-size: 1.05rem; background: none; border: 0; padding: 0; }
.erp-col h2 small { color: var(--erp-muted); font-weight: 600; }
.erp-col-sum { font-weight: 700; color: #334155; }
.erp-col-sum small { color: var(--erp-muted); font-weight: 500; }
.erp-opp { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--erp-line); border-radius: 10px;
           padding: 10px 12px; margin-top: 8px; color: var(--erp-text); text-decoration: none; overflow-wrap: anywhere; }
.erp-opp:hover { border-color: var(--erp-brand); box-shadow: 0 2px 8px rgba(15,118,110,.15); }
.erp-opp b { font-size: 1rem; }
.erp-opp span { font-size: 0.9rem; color: var(--erp-muted); }
.erp-opp .erp-opp-amt { color: #334155; font-weight: 600; }
.erp-opp.late { border-left: 5px solid var(--erp-danger); }
.erp-opp.late .erp-opp-next { color: var(--erp-danger); font-weight: 700; }
.erp-empty { color: var(--erp-muted); text-align: center; padding: 12px 0; margin: 0; }

/* ---------- 登入頁 ---------- */
html:has(body.login) { background: var(--erp-ink); }
body.login { min-height: 100vh; background: linear-gradient(160deg, var(--erp-ink), #0f766e) fixed; }
.login #header { background: var(--erp-ink); }
.login #header #site-name, .login #header #site-name a { color: #fff; }
.login #container { background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow: hidden; }
.login #content { padding: 24px 28px 28px; }
.login .form-row input { font-size: 1.05rem; min-height: 46px; }
.login .submit-row { position: static; box-shadow: none; border: 0; padding: 12px 0 0; }
.login .submit-row input { width: 100%; font-size: 1.1rem; padding: 12px; }


/* ---------- 篩選下拉列（admin.js 產生）：放在搜尋列旁，每個條件一個下拉選單 ---------- */
#changelist.erp-filters-moved { flex-direction: column; }
#changelist #toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
#changelist #toolbar > form { flex: 0 1 auto; }
.erp-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; flex: 1 1 360px; }
.erp-filterbar-card { background: var(--erp-card); border: 1px solid var(--erp-line); border-radius: 12px; padding: 12px 14px;
                      margin-bottom: 12px; }
.erp-filterbar-title { font-weight: 800; color: var(--body-loud-color); align-self: center; font-size: 1rem; }
.erp-filter { display: flex; flex-direction: column; gap: 3px; font-size: 0.85rem; color: var(--erp-muted); font-weight: 600; }
.erp-filter select { min-width: 9em; max-width: 16em; min-height: 42px; font-size: 1rem !important; color: var(--erp-text);
                     border-radius: 8px; }
.erp-filter.active span { color: var(--erp-brand); }
.erp-filter.active span::after { content: "（已篩選）"; font-weight: 500; }
.erp-filter.active select { border: 2px solid var(--erp-brand) !important; background: var(--erp-brand-soft) !important; font-weight: 700; }
.erp-filter-clear { align-self: center; padding: 9px 14px; border-radius: 8px; background: #fdecea; color: var(--erp-danger) !important;
                    font-weight: 700; text-decoration: none; }
.erp-filter-clear:hover { background: #f9d7d3; }
.erp-help { background: #eef7f5; border: 1px solid #cfe8e3; border-radius: 10px; padding: 10px 14px; margin: -6px 0 14px;
            color: #134e4a; font-size: 0.95rem; }
.erp-btn-sm { padding: 6px 12px !important; font-size: 0.9rem !important; border-radius: 8px; white-space: nowrap; }

.erp-plain { list-style: none; margin: 0; padding: 0; }
.erp-plain li { padding: 3px 0; border-bottom: 1px dashed var(--hairline-color); }

.erp-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; margin-right: 4px; }
.erp-tag-bad { background: #fdecea; color: var(--erp-danger); }
.erp-tag-warn { background: #fff4e0; color: var(--erp-warn); }
.erp-tag-ok { background: #e8f5e9; color: var(--erp-ok); }
.erp-inline-form { margin: 0; }
/* 右上角按鈕：取消 Django 固定的 1 行高度（避免按鈕往下壓到搜尋列、文字被擠成直的） */
.object-tools li { height: auto; float: none; display: block; }
.object-tools a, .object-tools a:link, .object-tools a:visited { white-space: nowrap; float: none; }
/* 短欄位（方式、時間、狀態、按鈕）不換行，讓長文字欄位去換行 */
#result_list td.field-kind_label, #result_list td.field-when, #result_list th.field-when, #result_list td.field-done_button,
#result_list td.field-stage_badge, #result_list td.field-win_pct_fmt, #result_list td.field-qr_button { white-space: nowrap; }
/* Django 內建 .object-tools a:link 優先權較高：用同樣的選擇器覆寫，按鈕才會真的變大 */
.object-tools { font-size: 1rem; margin-top: -4px; }
.object-tools a:link, .object-tools a:visited {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; font-size: 0.95rem; font-weight: 600;
  border-radius: 8px; letter-spacing: 0; text-transform: none; white-space: nowrap; float: none; line-height: 1.2; }
.object-tools a.addlink:link, .object-tools a.addlink:visited { background: var(--erp-brand); color: #fff; }
.object-tools a:not(.addlink):link, .object-tools a:not(.addlink):visited {
  background: #fff; color: var(--erp-brand); border: 1px solid var(--erp-brand); }
.object-tools a:not(.addlink):hover { background: var(--erp-brand-soft); }
/* 搜尋在第一列、篩選下拉在第二列（由左到右一排） */
#changelist #toolbar { display: block; }
#changelist #toolbar > form { display: block; }
#changelist #toolbar .erp-filterbar { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--erp-line);
                                      align-items: flex-end; }
.erp-filterbar-title { align-self: flex-end; padding-bottom: 10px; }


/* 左上角標誌 RSP•ERP（RSP 正紅色） */
.erp-logo { font-family: Arial, Helvetica, sans-serif; font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.erp-logo-rsp { color: #ff0000; }
.erp-logo-dot { margin: 0 3px; opacity: .8; }
#header #site-name a .erp-logo { font-size: 1.45rem; color: #fff; }

.erp-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px;
              border: 2px solid rgba(255,255,255,.7); }
/* 多行文字（例如協力廠商一行一家）在唯讀欄位也照行顯示 */
.readonly { white-space: pre-line; }
/* 密碼欄 */
.erp-pw-state { margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.erp-pw-dots { letter-spacing: 3px; color: var(--erp-muted); font-size: 1.1rem; }
.erp-pw-wrap { display: inline-flex; align-items: stretch; gap: 6px; max-width: 100%; flex-wrap: nowrap; }
.erp-pw-wrap input { flex: 1 1 auto; width: 18em; min-width: 0; }
.erp-pw-btn { border: 1px solid var(--border-color); background: #fff; color: var(--erp-text); border-radius: 8px;
              padding: 0 12px; font-size: 0.95rem; cursor: pointer; white-space: nowrap; min-height: 40px; }
.erp-pw-btn:hover { border-color: var(--erp-brand); color: var(--erp-brand); }
.erp-pw-gen { margin: 10px 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.erp-pw-gen output { font-family: Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 700; background: #fff8e1;
                     border: 1px dashed var(--erp-warn); border-radius: 8px; padding: 6px 12px; letter-spacing: 1px; }
.erp-pw-state + p { margin-bottom: 10px; }

/* 右上角：登出和其他連結一樣大（Django 預設把登出按鈕縮小、轉大寫） */
#user-tools, #user-tools a, #logout-form button { font-size: 0.95rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
#logout-form button { color: var(--header-link-color); padding: 0; }

/* 使用者表單：「重設密碼」改成小按鈕，不擋住下方說明 */
.erp-pw-state + p { margin: 0 0 8px; }
.erp-pw-state + p a.button { display: inline-block; padding: 6px 14px; font-size: 0.9rem; line-height: 1.3; border-radius: 8px; }

/* 標誌：RSP 大、ERP 小 */
.erp-logo { display: inline-flex; align-items: baseline; }
.erp-logo-rsp { font-size: 1.25em; }
.erp-logo-dot, .erp-logo-erp { font-size: 0.8em; }
/* 登出頁 */
.erp-bye { max-width: 520px; margin: 8vh auto 0; text-align: center; background: var(--erp-card); border: 1px solid var(--erp-line);
           border-radius: 18px; padding: 36px 28px 32px; box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.erp-bye-emoji { font-size: 3.2rem; line-height: 1; margin-bottom: 8px; }
.erp-bye h1 { font-size: 1.8rem !important; margin: 4px 0 10px !important; }
.erp-bye p { font-size: 1.15rem; color: var(--erp-muted); line-height: 1.7; margin: 0 0 22px; }
.erp-bye-btn { font-size: 1.3rem !important; padding: 14px 44px !important; border-radius: 12px; display: inline-block; }

/* 所有表單欄位一樣高：輸入框、下拉、搜尋下拉（select2）、日期都是 42px，同一列頂端對齊 */
#content input[type=text], #content input[type=number], #content input[type=email], #content input[type=url],
#content input[type=password], #content input[type=date], #content input[type=time],
#content select:not(.select2-hidden-accessible):not([multiple]) { height: 42px; min-height: 42px; box-sizing: border-box; }
body .select2-container--admin-autocomplete .select2-selection--single {
  height: 42px; min-height: 42px; box-sizing: border-box; display: flex; align-items: center; padding: 0 30px 0 10px; }
body .select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: 1.3; flex: 1; min-width: 0; }
body .select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; }
body .select2-container--admin-autocomplete .select2-selection--multiple { min-height: 42px; border-radius: 8px; }
.inline-group .tabular td { vertical-align: top; }
.inline-group .tabular td > p, .inline-group .tabular td input { margin: 0; }

/* 日期欄：「今天｜📅」不再擠在欄位下面撐高格子；只留月曆圖示放進輸入框右側（月曆裡也有「今天」） */
#content p.date { position: relative; margin: 0; padding: 0; display: block; }
#content p.date input.vDateField { width: 100%; padding-right: 38px; }
#content p.date .datetimeshortcuts { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 0 !important; line-height: 0; white-space: nowrap; }
#content p.date .datetimeshortcuts a:first-child { display: none; }
#content p.date .datetimeshortcuts .date-icon { display: inline-block; vertical-align: middle; }
#content .aligned p.date { width: 18rem; max-width: 100%; }

/* 一般表單（上下排列的欄位）：輸入框、下拉、日期一律同寬；長文字（備註）用整行 */
#content .aligned input[type=text], #content .aligned input[type=number], #content .aligned input[type=email],
#content .aligned input[type=url], #content .aligned input[type=password], #content .aligned input[type=date],
#content .aligned input[type=time], #content .aligned select:not(.select2-hidden-accessible):not([multiple]),
#content .aligned .select2-container { width: 18rem !important; max-width: 100%; }
#content .aligned p.date input.vDateField { width: 100% !important; }
#content .aligned .related-widget-wrapper { flex-wrap: nowrap; align-items: center; }
/* 明細表的唯讀數值（金額、已出貨…）和刪除鈕，跟輸入框垂直置中 */
.inline-group .tabular td > p:not(.date) { min-height: 42px; display: flex; align-items: center; }
.inline-group .tabular td.delete { padding-top: 16px; }

/* 手機：明細表一列變成一張卡片，每個欄位一行（左邊是欄位名稱），日期不會被擠到看不見 */
@media (max-width: 767px) {
  .inline-group .tabular table, .inline-group .tabular tbody, .inline-group .tabular tr,
  .inline-group .tabular td { display: block; width: 100% !important; box-sizing: border-box; }
  .inline-group .tabular thead { display: none; }
  .inline-group .tabular tr.form-row { position: relative; padding: 10px 40px 10px 12px; border-bottom: 1px solid var(--hairline-color); }
  .inline-group .tabular tr.empty-form { display: none; }
  .inline-group .tabular td { padding: 4px 0; }
  .inline-group .tabular td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8rem;
    font-weight: 600; color: var(--erp-muted); margin-bottom: 2px; }
  .inline-group .tabular td.original, .inline-group .tabular td.original::before { padding: 0; }
  .inline-group .tabular td.original:empty, .inline-group .tabular td.original p:empty { display: none; }
  .inline-group .tabular td.delete { position: absolute; top: 8px; right: 8px; width: auto !important; padding: 0; }
  .inline-group .tabular td.delete::before { display: none !important; }
  .inline-group .tabular tr.add-row td { padding: 8px 0; }
  .inline-group .tabular tr.add-row td::before { display: none; }
}

/* 明細表每列上方 Django 自動顯示的資料名稱（例如「Comment object (86)」）：不顯示，只保留「修改」連結 */
#content .inline-group .tabular tr.has_original td { padding-top: 6px; }
/* 留言內容欄給寬一點、高度跟其他欄位一致 */
.inline-group .tabular td.field-body textarea { min-height: 42px; height: auto; resize: vertical; }
.inline-group .tabular th.column-body { width: 50%; }

/* 可自由填寫的文字（備註、說明、地址…）：統一寬度（一般欄位的兩倍），從一行開始、打字時自動換行長高 */
#content .aligned textarea, #content .aligned textarea.erp-longtext {
  width: 36rem !important; max-width: 100%; min-height: 42px; height: 42px; resize: vertical; overflow-y: hidden;
  line-height: 1.45; padding: 9px 10px; }
#content .inline-group textarea { min-height: 42px; height: 42px; resize: vertical; overflow-y: hidden; line-height: 1.45; }
.object-tools li + li { margin-left: 8px; }
/* 右上角按鈕跟標題同一列（admin.js 把兩者包進 .erp-titlebar；說明文字在下一列，不會被蓋住） */
.erp-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
                margin-bottom: 12px; }
.erp-titlebar > h1 { margin: 0; }
.erp-titlebar .object-tools { margin: 0; float: none; }
/* 訊息列：圖示放在左邊留白裡，不壓到文字 */
ul.messagelist li, ul.messagelist li.warning, ul.messagelist li.error, ul.messagelist li.info {
  background-position: 16px center !important; background-size: 18px auto !important; }
/* 明細表的「修改」連結：放在第一欄自己的位置，不疊在日期上 */
#content .inline-group .tabular td.original p { position: static; font-size: 0; height: auto; margin: 0; padding: 0; }
#content .inline-group .tabular td a.erp-rowlink { display: inline-block; margin-left: 8px; font-size: 0.85rem; white-space: nowrap;
  padding-left: 16px; background-position: 0 center; }
