:root{
    --bg:#f4f2ef;
    --surface:#ffffff;
    --surface-2:#ece7e2;
    --border:#ded7d0;
    --text:#2b2622;
    --text-muted:#786e66;
    --accent:#8b4a5c;
    --accent-contrast:#ffffff;
    --accent-soft:#f3e3e7;
    --success:#3f7d5c;
    --success-soft:#e1efe7;
    --warning:#b87a2e;
    --warning-soft:#f6e9d7;
    --critical:#b4463f;
    --critical-soft:#f5e1df;
    --shadow: 0 1px 2px rgba(43,38,34,.06), 0 6px 20px -8px rgba(43,38,34,.12);
    /* 訂單表單五個區塊各自的底色（區塊內容／標題列） */
    --sec-customer-bg:#f7f9fd; --sec-customer-head:#ebf0f9;
    --sec-schedule-bg:#fdfaf4; --sec-schedule-head:#f8efdc;
    --sec-staff-bg:#f6fbf8;    --sec-staff-head:#e9f4ed;
    --sec-items-bg:#fcf7f8;    --sec-items-head:#f6eaee;
    --sec-stages-bg:#f9f7fd;   --sec-stages-head:#efebf8;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#1e1a18;
      --surface:#282220;
      --surface-2:#332b28;
      --border:#453b36;
      --text:#f1eae5;
      --text-muted:#b3a89f;
      --accent:#dd93a6;
      --accent-contrast:#2a151c;
      --accent-soft:#3d252b;
      --success:#82c1a0;
      --success-soft:#223a2d;
      --warning:#e2ac67;
      --warning-soft:#3c2d19;
      --critical:#e3877e;
      --critical-soft:#3c211e;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px -8px rgba(0,0,0,.5);
      --sec-customer-bg:#1f2630; --sec-customer-head:#28323f;
      --sec-schedule-bg:#2b261d; --sec-schedule-head:#3a3123;
      --sec-staff-bg:#1e2a23;    --sec-staff-head:#27362d;
      --sec-items-bg:#2c2024;    --sec-items-head:#3a2a30;
      --sec-stages-bg:#25222f;   --sec-stages-head:#312c3f;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#1e1a18;
    --surface:#282220;
    --surface-2:#332b28;
    --border:#453b36;
    --text:#f1eae5;
    --text-muted:#b3a89f;
    --accent:#dd93a6;
    --accent-contrast:#2a151c;
    --accent-soft:#3d252b;
    --success:#82c1a0;
    --success-soft:#223a2d;
    --warning:#e2ac67;
    --warning-soft:#3c2d19;
    --critical:#e3877e;
    --critical-soft:#3c211e;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px -8px rgba(0,0,0,.5);
    --sec-customer-bg:#1f2630; --sec-customer-head:#28323f;
    --sec-schedule-bg:#2b261d; --sec-schedule-head:#3a3123;
    --sec-staff-bg:#1e2a23;    --sec-staff-head:#27362d;
    --sec-items-bg:#2c2024;    --sec-items-head:#3a2a30;
    --sec-stages-bg:#25222f;   --sec-stages-head:#312c3f;
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
    font-size:14.5px; line-height:1.6;
  }
  /* Android/mobile Chrome draws its own Material-style bottom border under
     text/date/textarea inputs regardless of our custom border — this strips
     that native chrome so only our own border shows. Selects are excluded
     so they keep their native dropdown arrow. */
  input:not([type="checkbox"]):not([type="radio"]), textarea{ -webkit-appearance:none; appearance:none; }

  /* checkboxes/radios must keep native rendering (appearance:none above
     skips them) so accent-color below actually has something to paint;
     otherwise they'd inherit .field input's text-box styling and balloon
     into giant empty rectangles with no checked state.
     Specificity note: ".field input" (0,1,1) sets width:100%/padding/border
     on every input inside a .field, checkboxes included. A bare
     "input[type=checkbox]" selector is also (0,1,1) — same specificity,
     so source order decides, and ".field input" (defined later in this
     file) would win and blow the checkbox back up to full width. Scoping
     this under ".field"/".role-picker"/".checkbox-row" bumps it to (0,2,1)
     so it reliably wins regardless of where either rule sits in the file. */
  .field input[type="checkbox"], .field input[type="radio"],
  .role-picker input[type="checkbox"], .checkbox-row input[type="checkbox"]{
    width:16px; height:16px; padding:0; margin:0; border-radius:4px;
    border:1px solid var(--border); background:none; accent-color:var(--accent); flex:none;
  }
  .checkbox-row{ display:flex; align-items:center; gap:8px; }

  /* Django's CheckboxSelectMultiple wraps every option (and the whole
     group) in its own unstyled <div> — "display:contents" on all of them
     flattens that nesting away so the <label> pills become the direct
     flex children of .role-picker and actually form a wrapping row. */
  .role-picker{ display:flex; flex-wrap:wrap; gap:7px; }
  .role-picker div{ display:contents; }
  .role-picker label{
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--border); background:var(--surface); color:var(--text);
    padding:6px 13px; border-radius:100px; font-size:13px; cursor:pointer;
  }
  .role-picker label:has(input:checked){
    background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;
  }
  .num{ font-family:"JetBrains Mono","Noto Sans TC",monospace; font-variant-numeric:tabular-nums; }
  h1,h2,h3{ font-family:"Noto Serif TC","Noto Sans TC",serif; font-weight:700; text-wrap:balance; margin:0; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; }

  /* ---------- shell layout ---------- */
  .shell{ display:grid; grid-template-columns:232px 1fr; min-height:100vh; }
  .sidebar{
    background:var(--surface); border-right:1px solid var(--border);
    display:flex; flex-direction:column; padding:20px 14px;
    position:sticky; top:0; height:100vh;
  }
  .brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 20px; }
  .brand-mark{
    width:38px; height:38px; border-radius:9px; background:var(--accent); color:var(--accent-contrast);
    display:flex; align-items:center; justify-content:center; font-family:"Noto Serif TC",serif; font-weight:700; font-size:17px; flex:none;
  }
  .brand-text h1{ font-size:16.5px; letter-spacing:.02em; }
  .brand-text p{ margin:1px 0 0; font-size:11.5px; color:var(--text-muted); }

  .nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
  .nav-label{ font-size:11px; color:var(--text-muted); letter-spacing:.08em; padding:14px 10px 6px; }
  .nav-item{
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
    border:none; background:none; color:var(--text); text-align:left; cursor:pointer; font-size:14px;
    width:100%;
  }
  .nav-item .ic{ width:18px; text-align:center; flex:none; color:var(--text-muted); font-size:15px; }
  .nav-item .lock{ margin-left:auto; font-size:11px; opacity:.55; }
  .nav-item:hover{ background:var(--surface-2); }
  .nav-item.active{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
  .nav-item.active .ic{ color:var(--accent); }

  .side-foot{ border-top:1px solid var(--border); padding-top:12px; margin-top:8px; display:flex; align-items:center; gap:10px; }
  .avatar{ width:32px; height:32px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12.5px; flex:none; }
  .side-foot .who{ font-size:12.5px; line-height:1.35; }
  .side-foot .who b{ display:block; font-size:13.5px; }
  .side-foot .who span{ color:var(--text-muted); }

  .main{ min-width:0; display:flex; flex-direction:column; }
  .topbar{
    display:none; align-items:center; gap:12px; padding:12px 16px; background:var(--surface);
    border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;
  }
  .hamburger{ width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--surface); font-size:16px; cursor:pointer; flex:none; }

  .view{ display:none; padding:24px 28px 60px; max-width:1180px; width:100%; }
  .view.active{ display:block; }
  .view-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
  .view-head h2{ font-size:22px; }
  .view-head p{ margin:4px 0 0; color:var(--text-muted); font-size:13px; }

  .sample-flag{
    display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted);
    background:var(--surface-2); border:1px solid var(--border); padding:3px 9px; border-radius:100px;
  }

  /* ---------- shared bits ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:6px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface); color:var(--text); padding:8px 14px; font-size:13.5px; cursor:pointer; font-weight:500;
  }
  .btn:hover{ background:var(--surface-2); }
  .btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
  .btn.primary:hover{ filter:brightness(1.05); }
  .btn.ghost{ background:none; }
  .btn:focus-visible, .nav-item:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--accent); outline-offset:1px;
  }

  .card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); }

  .pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:100px; font-size:12px; font-weight:600; white-space:nowrap; }
  .pill.s-shoot{ background:var(--warning-soft); color:var(--warning); }
  .pill.s-select{ background:var(--accent-soft); color:var(--accent); }
  .pill.s-pickup{ background:#dfe8f5; color:#3c6aa8; }
  :root[data-theme="dark"] .pill.s-pickup, @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.s-pickup{ background:#22303f; color:#8fb4e0; }}
  .pill.s-done{ background:var(--success-soft); color:var(--success); }

  /* ---------- dashboard ---------- */
  .stat-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
  .stat{ padding:16px 18px; flex:1 1 220px; max-width:260px; }
  .stat .label{ font-size:12px; color:var(--text-muted); }
  .stat .value{ font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; font-size:26px; font-weight:600; margin-top:6px; }
  .stat .sub{ font-size:11.5px; color:var(--text-muted); margin-top:4px; }

  .dash-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start; }
  .panel{ padding:18px 20px; }
  .panel h3{ font-size:15px; margin-bottom:2px; }
  .panel .hint{ font-size:12px; color:var(--text-muted); margin-bottom:14px; }

  .agenda-item{ display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--border); align-items:flex-start; }
  .agenda-item:first-child{ border-top:none; }
  .agenda-time{ font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--text-muted); width:46px; flex:none; padding-top:2px; }
  .agenda-body{ flex:1; min-width:0; }
  .agenda-body b{ font-size:13.5px; }
  .agenda-body .meta{ font-size:12px; color:var(--text-muted); margin-top:1px; }
  .agenda-item .pill{ flex:none; }

  .reminder-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--border); font-size:13px; }
  .reminder-item:first-child{ border-top:none; }
  .reminder-item .dot{ width:7px; height:7px; border-radius:50%; background:var(--warning); flex:none; }
  .reminder-body{ flex:1; min-width:0; }
  .reminder-item .pill{ flex:none; }

  /* ---------- orders table ---------- */
  .toolbar{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
  .toolbar input, .toolbar select{
    border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:8px; padding:8px 11px; font-size:13.5px;
  }
  .toolbar input{ flex:1; min-width:180px; }

  .table-wrap{ overflow-x:auto; }
  table{ width:100%; border-collapse:collapse; }
  .table-wrap table{ min-width:760px; }
  thead th{
    text-align:left; font-size:11.5px; color:var(--text-muted); font-weight:600; letter-spacing:.03em;
    padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap;
  }
  tbody td{ padding:12px 14px; border-bottom:1px solid var(--border); font-size:13.5px; white-space:nowrap; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:var(--surface-2); }
  .cust b{ display:block; }
  .cust span{ color:var(--text-muted); font-size:12px; }

  /* ---------- form ---------- */
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field{ display:flex; flex-direction:column; gap:5px; }
  /* keeps two short fields (姓名+生日, 手機+電話) side by side even when
     .form-grid collapses to one column on mobile, so the page doesn't grow
     too long — only used for fields short enough not to get clipped */
  .field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; grid-column:1 / -1; }
  .field label{ font-size:12.5px; color:var(--text-muted); }
  .field input, .field select, .field textarea{
    border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:8px; padding:9px 11px; font-size:14px; width:100%;
  }
  .field.readonly input{ background:var(--surface-2); color:var(--text-muted); }
  .section-title{ font-size:15px; margin:26px 0 12px; padding-top:18px; border-top:1px solid var(--border); }
  .section-title:first-child{ border-top:none; padding-top:0; margin-top:0; }

  .items-table{ width:100%; border-collapse:collapse; }
  .items-table th{ text-align:left; font-size:11.5px; color:var(--text-muted); padding:0 10px 8px; font-weight:600; }
  .items-table td{ padding:5px 10px 5px 0; }
  .items-table input, .items-table select{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:7px; padding:7px 9px; font-size:13.5px; width:100%; }
  .items-table .amt{ text-align:right; font-family:"JetBrains Mono",monospace; }
  .row-add{ margin-top:10px; }

  .stage-table{ width:100%; border-collapse:collapse; }
  .stage-table th{ text-align:left; font-size:11.5px; color:var(--text-muted); padding:0 10px 8px; font-weight:600; }
  .stage-table td{ padding:5px 10px 5px 0; }
  .stage-table td:first-child{ font-weight:600; font-size:13.5px; padding-top:9px; white-space:nowrap; }
  .stage-table input, .stage-table textarea{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:7px; padding:7px 9px; font-size:13.5px; width:100%; }
  .stage-table textarea{ font-family:inherit; resize:vertical; min-height:38px; }
  /* 訂單表單裡的兩張表是「排版用」不是資料列表：拿掉通用 tbody td 的底線跟 hover 底色，
     不然手機版每個欄位各自一行時，每個輸入框底下都會多一條線 */
  .items-table td, .stage-table td{ border-bottom:none; }
  .items-table tbody tr:hover, .stage-table tbody tr:hover{ background:none; }

  /* stacked-card layout for narrow screens: side-by-side columns get too
     cramped for the 品項/數量/金額 and 階段/金額/日期/備註 rows on a phone.
     Paired fields (品項+數量, 金額+X, 金額+日期) share a grid row instead of
     each taking a full line on its own. */
  @media (max-width: 640px){
    .items-table thead, .stage-table thead{ display:none; }
    .items-table, .stage-table, .items-table tbody, .stage-table tbody{ display:block; margin-top:0; }
    .items-table tbody tr, .stage-table tbody tr{
      padding:0; margin-bottom:22px;
    }
    .items-table tbody td, .stage-table tbody td{ padding:0; }
    .items-table td[data-label]::before, .stage-table td[data-label]::before{
      content: attr(data-label);
      display:block; font-size:11.5px; color:var(--text-muted); margin-bottom:4px;
    }

    .items-table tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:10px; }
    .items-table td[data-label$="品項"], .assign-table td[data-label="員工"]{ grid-column:1; grid-row:1; }
    .items-table td:last-child{ grid-column:2; grid-row:1; display:flex; align-items:flex-end; justify-content:flex-end; }
    /* 方案項目：品項下面多一行規格（跨兩欄），數量/金額往下擠到第 3 行。
       負責人員（.assign-table）沒有規格，男/女人數維持在第 2 行就好，
       用 :not(.assign-table) 把兩邊分開，才不會互相干擾版面。 */
    .items-table:not(.assign-table) td[data-label="規格"]{ grid-column:1 / -1; grid-row:2; }
    .items-table:not(.assign-table) td[data-label="數量"]{ grid-column:1; grid-row:3; }
    .items-table:not(.assign-table) td[data-label$="金額"]{ grid-column:2; grid-row:3; }
    .assign-table td[data-label="男（人）"]{ grid-column:1; grid-row:2; }
    .assign-table td[data-label="女（人）"]{ grid-column:2; grid-row:2; }

    /* the history sub-row is a single full-width cell, not a 2-col field
       pair — override the generic grid/last-child rules above so it isn't
       squeezed into the narrow action column. */
    .items-table tr.item-history-row{ display:block; padding-top:0; border-top:none; }
    .items-table tr.item-history-row td:last-child{ display:block; grid-column:unset; }

    .stage-table tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
    .stage-table td.stage-name{ grid-column:1 / -1; font-size:14.5px; }
    .form-section .section-body{ padding:16px 14px 16px; }
    .form-section .section-head{ padding:11px 14px; }
    .stage-table td[data-label="金額"]{ grid-column:1; }
    .stage-table td[data-label="日期"]{ grid-column:2; }
    .stage-table td[data-label="備註"]{ grid-column:1 / -1; }
  }

  .form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:26px; padding-top:18px; border-top:1px solid var(--border); }

  /* ---------- 訂單表單：每個區塊一張卡片 ----------
     訂單欄位很多，整張白卡只靠分隔線切區塊會糊成一片；改成每區塊各自
     一張卡片，卡片之間露出頁面底色，標題列用淺灰底，一眼找得到區塊。
     刻意不用每區塊不同顏色：顏色已經拿來表示狀態（攝影/啟用/錯誤）。 */
  .order-form{ display:flex; flex-direction:column; gap:14px; }
  .form-section{ overflow:hidden; }
  .form-section .section-head{
    display:flex; align-items:center; gap:10px;
    padding:11px 20px; background:var(--surface-2); border-bottom:1px solid var(--border);
    font-family:"Noto Serif TC","Noto Sans TC",serif; font-weight:700; font-size:15px;
  }
  .form-section .section-body{ padding:18px 20px 20px; }
  .form-section .section-body > .field-hint:first-child{ margin-top:0; }

  /* 負責人員卡片裡攝影師／造型師／美工三個職位小標題，彼此用細線隔開
     （前面固定接在 field-hint 說明文字後面，不會是 section-body 的
     第一個子元素，所以不用另外處理「第一個不要邊線」） */
  .assign-role-title{ font-size:14px; font-weight:600; margin:18px 0 10px; padding-top:16px; border-top:1px solid var(--border); }

  /* 五個主要區塊各自一個淡底色，方便在很長的訂單裡辨認現在在哪一區。
     輸入框維持白底（.field input 本身有 background），只有卡片底色變。 */
  .form-section.sec-customer{ --sec-bg:var(--sec-customer-bg); --sec-head:var(--sec-customer-head); }
  .form-section.sec-schedule{ --sec-bg:var(--sec-schedule-bg); --sec-head:var(--sec-schedule-head); }
  .form-section.sec-staff{    --sec-bg:var(--sec-staff-bg);    --sec-head:var(--sec-staff-head); }
  .form-section.sec-items{    --sec-bg:var(--sec-items-bg);    --sec-head:var(--sec-items-head); }
  .form-section.sec-stages{   --sec-bg:var(--sec-stages-bg);   --sec-head:var(--sec-stages-head); }
  .form-section[class*="sec-"]{ background:var(--sec-bg); }
  .form-section[class*="sec-"] .section-head{ background:var(--sec-head); }

  /* 方案項目、階段金額：每一筆各自一個淺灰底小框，輸入框維持白底 */
  /* 方案項目、階段金額的各列不另外加底色分隔，只靠間距（寬螢幕） */
  @media (min-width: 641px){
    .items-table tbody td, .stage-table tbody td{ padding:6px 10px 6px 0; vertical-align:top; }
    .stage-table tbody td.stage-name{ padding-top:13px; }
    .items-table tbody td:last-child{ vertical-align:middle; }
  }

  /* 儲存列固定在畫面底部，訂單很長時不用捲到最下面才能存 */
  .form-actions.sticky-actions{
    position:sticky; bottom:12px; z-index:15; margin-top:0;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:12px 16px; box-shadow:var(--shadow);
  }

  /* ---------- order stage actions ---------- */
  .stage-actions{ display:flex; gap:6px; flex-wrap:wrap; }
  .btn-xs{ padding:5px 11px; font-size:12px; border-radius:6px; }

  /* ---------- collapsible customer section ---------- */
  .cust-toggle{ cursor:pointer; user-select:none; }
  .cust-toggle .cust-summary{ display:none; font-size:13px; font-weight:500; color:var(--text-muted); font-family:"Noto Sans TC",sans-serif; }
  .cust-toggle.collapsed .cust-summary{ display:inline; }
  .cust-toggle .chev{ margin-left:auto; font-size:11px; color:var(--text-muted); transition:transform .18s ease; }
  .cust-toggle.collapsed .chev{ transform:rotate(-90deg); }
  /* 收合時標題列就是整張卡片，拿掉跟內容之間的分隔線 */
  .form-section .section-head.cust-toggle.collapsed{ border-bottom:none; }
  #custFields.collapsed{ display:none; }

  .field-hint{ font-size:12px; color:var(--text-muted); margin:-4px 0 12px; }
  .req{ color:var(--critical); margin-right:2px; }

  .history-list{ display:flex; flex-direction:column; }
  .history-item{ display:flex; gap:14px; padding:9px 0; border-top:1px solid var(--border); font-size:13px; align-items:baseline; flex-wrap:wrap; }
  .history-item:first-child{ border-top:none; }
  .history-time{ color:var(--text-muted); flex:none; width:44px; }
  .history-who{ font-weight:600; flex:none; min-width:4em; }
  .history-desc{ color:var(--text-muted); }
  .history-day + .history-day{ margin-top:14px; }
  .history-date{ font-size:12.5px; font-weight:700; color:var(--text); padding:4px 0; }
  .history-lines{ list-style:none; margin:0; padding:0; flex:1 1 260px; min-width:0; color:var(--text-muted); }
  .history-lines li + li{ margin-top:3px; }

  .date-prompt{
    border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text);
    padding:20px 22px; max-width:min(420px, calc(100vw - 32px)); box-shadow:var(--shadow);
  }
  .date-prompt::backdrop{ background:rgba(0,0,0,.35); }
  .date-prompt h3{ font-size:16px; margin-bottom:10px; }
  .date-prompt p{ margin:0 0 8px; font-size:13.5px; }
  .date-prompt .form-actions{ margin-top:14px; padding-top:14px; }

  /* items-table: a soft-deleted row (checkbox still checked, fields locked)
     dims out but stays visible so it can be un-checked to restore. Its
     history sub-row sits directly under it, spanning the full row. */
  .items-table tr.is-deleted{ opacity:.5; }
  .items-table tr.item-history-row{ opacity:1; }
  .items-table tr.item-history-row td{ padding:0 0 10px; }
  .items-table tr.item-history-row .history-list{ background:var(--surface-2); border-radius:8px; padding:4px 12px; }
  .items-table tr.item-history-row .history-item{ font-size:12px; padding:6px 0; }
  @media (max-width: 640px){
    .items-table tr.item-history-row td{ padding:0 0 10px; }
  }

  /* ---------- lookup ---------- */
  .lookup-box{ max-width:520px; margin:0 auto 26px; text-align:center; }
  .lookup-row{ display:flex; gap:10px; }
  .lookup-box input{ flex:1; min-width:0; padding:16px 18px; font-size:20px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); text-align:center; font-family:"JetBrains Mono",monospace; }
  .lookup-box .btn{ padding:0 22px; font-size:15px; border-radius:12px; }
  .lookup-box .hint{ font-size:12.5px; color:var(--text-muted); margin-top:8px; }
  .lookup-result{ max-width:640px; margin:0 auto; padding:22px 24px; }
  .lookup-result .who{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
  .lookup-result .who h3{ font-size:18px; }
  .lookup-result .who p{ margin:2px 0 0; color:var(--text-muted); font-size:13px; }
  .timeline{ display:flex; flex-direction:column; gap:0; }
  .tl-row{ display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--border); align-items:center; }
  .tl-row:first-child{ border-top:none; }
  .tl-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
  .tl-dot.done{ background:var(--success); }
  .tl-dot.next{ background:var(--warning); }
  .tl-dot.wait{ background:var(--border); }
  .tl-row .lbl{ width:64px; flex:none; font-weight:600; font-size:13px; }
  .tl-row .date{ color:var(--text-muted); font-size:12.5px; }

  /* ---------- placeholder view ---------- */
  .soon{ padding:60px 20px; text-align:center; color:var(--text-muted); }
  .soon .ic{ font-size:30px; margin-bottom:10px; }

  /* ---------- staff ---------- */
  /* 放在 <td> 裡面的 <div>，不要直接加在 <td> 上：td 變成 flex 就不再是表格儲存格，底線會跟其他欄對不齊 */
  .role-tags{ display:flex; gap:5px; flex-wrap:wrap; }
  .tag{ display:inline-flex; align-items:center; padding:2.5px 9px; border-radius:100px; font-size:11.5px; font-weight:500; background:var(--surface-2); color:var(--text-muted); white-space:nowrap; }
  .pill.s-off{ background:var(--surface-2); color:var(--text-muted); }
  .name-cell b{ display:block; }
  .name-cell span{ color:var(--text-muted); font-size:12px; font-family:"JetBrains Mono",monospace; }
  tbody tr.is-inactive{ opacity:.55; }
  .table-wrap td .btn + .btn{ margin-left:6px; }

  .seg{ display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; align-self:flex-start; }
  .seg button{ border:none; background:var(--surface); padding:7px 16px; font-size:13px; cursor:pointer; color:var(--text-muted); }
  .seg button.active{ background:var(--accent); color:var(--accent-contrast); }

  .role-picker{ display:flex; gap:7px; flex-wrap:wrap; }
  .role-chip{ border:1px solid var(--border); background:var(--surface); color:var(--text); padding:6px 13px; border-radius:100px; font-size:13px; cursor:pointer; }
  .role-chip.selected{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600; }

  .drawer-scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:50; }
  .drawer-scrim.show{ display:block; }
  .drawer{
    position:fixed; top:0; right:0; height:100vh; width:400px; max-width:92vw;
    background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow);
    z-index:60; transform:translateX(100%); transition:transform .22s ease;
    display:flex; flex-direction:column;
  }
  .drawer.open{ transform:translateX(0); }
  .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); }
  .drawer-head h3{ font-size:16.5px; }
  .drawer-close{ width:30px; height:30px; border-radius:7px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:14px; flex:none; }
  .drawer-body{ padding:20px 22px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:18px; }
  .drawer-foot{ padding:16px 22px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:10px; align-items:center; }
  .drawer-note{ font-size:12px; color:var(--text-muted); line-height:1.6; }
  .meta-box{ background:var(--surface-2); border-radius:9px; padding:12px 14px; font-size:12px; color:var(--text-muted); display:flex; flex-direction:column; gap:4px; }

  /* ---------- mobile ---------- */
  .scrim{ display:none; }
  @media (max-width: 880px){
    .shell{ grid-template-columns:1fr; }
    .sidebar{
      position:fixed; inset:0 auto 0 0; width:250px; z-index:40; transform:translateX(-100%);
      transition:transform .22s ease; box-shadow:var(--shadow);
    }
    .sidebar.open{ transform:translateX(0); }
    .topbar{ display:flex; }
    .scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:30; }
    .scrim.show{ display:block; }
    .view{ padding:18px 16px 50px; }
    .stat-row{ grid-template-columns:1fr 1fr; }
    .dash-grid{ grid-template-columns:1fr; }
    .form-grid{ grid-template-columns:1fr; }
    .field-pair{ gap:10px; }
    /* 訂單管理列表左側的階段按鈕：手機上固定兩個一排 */
    .stage-actions{ display:grid; grid-template-columns:repeat(2, auto); justify-content:start; }
  }
  @media (max-width: 520px){
    .brand-text p{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }