:root{
    --ink:#132430;
    --blueprint:#1C4870;
    --blueprint-deep:#0F3454;
    --blueprint-light:#EAF1F7;
    --paper:#FFFFFF;
    --grid-line:#C7D6E3;
    --grid-line-soft:#DCE7EF;
    --accent:#FF6A28;
    --accent-deep:#E2571C;
    --accent-soft:#FFE7D6;
    --success:#2F8F5B;
    --success-soft:#E4F4EC;
    --muted:#5C7284;
    --danger:#D64545;
    --danger-soft:#FBE6E6;
    --radius:6px;
  }
  *{box-sizing:border-box;}
  /* 全站預設字體：微軟正黑體（手機沒有此字型時退回 IBM Plex Sans TC / Noto Sans TC）；
     所有表單控制項一律繼承，不用系統字 */
  html{ font-family:'Microsoft JhengHei', 'IBM Plex Sans TC', 'Noto Sans TC', sans-serif; }
  button, input, select, textarea, option{ font-family:inherit; }
  html,body{margin:0;padding:0;}
  body{
    background:
      linear-gradient(var(--blueprint-light), var(--blueprint-light)) ,
      repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(28,72,112,0.055) 27px, rgba(28,72,112,0.055) 28px),
      repeating-linear-gradient(90deg, transparent, transparent 27px, rgba(28,72,112,0.055) 27px, rgba(28,72,112,0.055) 28px);
    color:var(--ink);
    font-family:'Microsoft JhengHei', 'IBM Plex Sans TC', 'Noto Sans TC', sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:'Microsoft JhengHei', 'IBM Plex Mono', monospace;}
  .display{font-family:'Microsoft JhengHei', 'Oswald', sans-serif; letter-spacing:0.02em; text-transform:uppercase;}

  /* ---------- Header ---------- */
  header.app-header{
    background:linear-gradient(135deg, var(--blueprint-deep), var(--blueprint));
    color:#fff;
    /* 左右內距跟主內容（max-width 1320 置中、內距 24）對齊；視窗窄時退回 28px */
    padding:22px max(28px, calc((100% - 1320px) / 2 + 24px)) 18px;
    position:relative;
    overflow:hidden;
    border-bottom:4px solid var(--accent);
  }
  header.app-header::before{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events:none;
  }
  .header-inner{position:relative; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px;}
  .app-title{
    font-family:'Microsoft JhengHei', 'Oswald', sans-serif;
    font-size:26px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    margin:0;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .app-title .tag{
    font-family:'Microsoft JhengHei', 'IBM Plex Mono', monospace;
    font-size:11px;
    background:var(--accent);
    color:#1a1200;
    padding:3px 8px;
    border-radius:3px;
    letter-spacing:0.02em;
    text-transform:none;
    font-weight:600;
  }
  .app-sub{font-size:12.5px; opacity:0.75; margin:4px 0 0; font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; letter-spacing:0.02em;}
  .refresh-btn{
    background:rgba(255,255,255,0.08) !important; border-color:rgba(255,255,255,0.35) !important;
    color:#fff !important; font-size:12.5px !important; white-space:nowrap;
  }
  .refresh-btn:hover{ background:rgba(255,255,255,0.18) !important; }

  /* Ruler / tick-mark motif */
  .ruler{
    display:flex; align-items:flex-end; height:20px; gap:0; margin-top:14px; opacity:0.85;
  }
  .ruler .tick.major{ height:14px; background:rgba(255,255,255,0.6);}
  .ruler .tick.minor{ height:7px; }
  .ruler .tick{ flex:1; width:1px; background:rgba(255,255,255,0.35); }

  nav.tabs{
    display:flex; flex-wrap:wrap; gap:2px; background:var(--blueprint-deep);
    padding:0 max(24px, calc((100% - 1320px) / 2 + 24px));
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  nav.tabs button{
    font-family:'Microsoft JhengHei', 'IBM Plex Sans TC', sans-serif;
    font-size:14px; font-weight:500;
    background:transparent; border:none; color:rgba(255,255,255,0.6);
    padding:12px 18px; cursor:pointer; position:relative; letter-spacing:0.01em;
    transition:color .15s ease;
  }
  nav.tabs button:hover{ color:#fff; }
  nav.tabs button.active{ color:#fff; }
  nav.tabs button.active::after{
    content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px; background:var(--accent); border-radius:2px 2px 0 0;
  }
  /* Non-admins only ever see the 員工打卡 tab and a small "管理者登入" link —
     the rest of the app is invisible (not just locked) until someone
     authenticates, so the punch page reads as its own standalone page. */
  nav.tabs button.admin-only-tab{ display:none; }
  nav.tabs.admin-unlocked button.admin-only-tab{ display:inline-block; }
  nav.tabs.admin-unlocked button.admin-login-tab{ display:none; }
  nav.tabs button.admin-login-tab{
    margin-left:auto; opacity:0.55; font-size:12px; padding:12px 14px;
  }
  nav.tabs button.admin-login-tab:hover{ opacity:1; }

  main{ max-width:1320px; margin:0 auto; padding:24px 24px 60px; }

  .panel{
    background:var(--paper);
    border:1px solid var(--grid-line);
    border-radius:var(--radius);
    padding:20px 22px;
    margin-bottom:20px;
    box-shadow:0 1px 2px rgba(15,52,84,0.04);
  }
  .panel-title{
    font-family:'Microsoft JhengHei', 'Oswald', sans-serif; text-transform:uppercase; letter-spacing:0.05em;
    font-size:var(--ui-title-px, 14px); color:var(--blueprint-deep); font-weight:600; margin:0 0 14px;
    display:flex; align-items:center; gap:8px;
  }
  .panel-title .dim-line{ flex:1; height:1px; background:repeating-linear-gradient(90deg, var(--grid-line) 0 4px, transparent 4px 8px); }
  .panel-title.clickable{ cursor:pointer; user-select:none; }
  /* 面板拖曳排序：標題列可抓取；拖曳中半透明；放置位置顯示橘色指示線 */
  .panel-title.drag-handle{ cursor:grab; touch-action:pan-y; }
  .panel-title.drag-handle::before{ content:'⠿'; color:var(--grid-line); font-size:13px; margin-right:2px; }
  .panel-title.drag-handle:active{ cursor:grabbing; }
  .panel.dragging{ opacity:0.45; }
  .panel.drop-before{ box-shadow:0 -3px 0 0 var(--accent); }
  .panel.drop-after{ box-shadow:0 3px 0 0 var(--accent); }
  /* 收折中的面板：標題下方不留白、上下內距縮小（數值可在功能設定調） */
  .panel{ margin-bottom:var(--panel-gap, 20px); }
  .panel.collapsed{ padding-top:var(--collapsed-pad, 8px); padding-bottom:var(--collapsed-pad, 8px); }
  .panel.collapsed > .panel-title{ margin-bottom:0; }
  .panel-title.clickable:hover{ color:var(--blueprint); }

  .row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
  .field{ display:flex; flex-direction:column; gap:4px; }
  .field label{ font-size:var(--ui-sub-px, 11.5px); color:var(--muted); font-weight:500; letter-spacing:0.02em; }
  input,select{
    font-family:'Microsoft JhengHei', 'IBM Plex Sans TC', sans-serif;
    font-size:13.5px;
    border:1px solid var(--grid-line);
    border-radius:4px;
    padding:7px 9px;
    background:#fff;
    color:var(--ink);
    outline:none;
  }
  input:focus,select:focus{ border-color:var(--blueprint); box-shadow:0 0 0 3px rgba(28,72,112,0.12); }
  /* 顏色選擇框：跟一般輸入框同高、同底線，不再矮一截 */
  input[type="color"]{ width:52px; height:calc(1.35em + 16px); padding:2px 3px; cursor:pointer; } /* ≈ 文字輸入框高度（字級×行高＋內距＋框線） */
  input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
  input[type="color"]::-webkit-color-swatch{ border:none; border-radius:3px; }
  select{ min-width:110px; }

  button.btn, a.btn{
    font-family:'Microsoft JhengHei', 'IBM Plex Sans TC', sans-serif;
    font-size:13px; font-weight:600; letter-spacing:0.01em;
    border:1px solid var(--blueprint); background:var(--blueprint); color:#fff;
    padding:8px 14px; border-radius:4px; cursor:pointer; transition:background .15s, transform .05s;
  }
  button.btn:hover, a.btn:hover{ background:var(--blueprint-deep); }
  button.btn:active, a.btn:active{ transform:translateY(1px); }
  button.btn.accent, a.btn.accent{ background:var(--accent); border-color:var(--accent-deep); color:#1a1200; }
  button.btn.accent:hover, a.btn.accent:hover{ background:var(--accent-deep); color:#fff; }
  button.btn.ghost, a.btn.ghost{ background:transparent; color:var(--blueprint); border:1px solid var(--grid-line); }
  button.btn.ghost:hover, a.btn.ghost:hover{ background:var(--blueprint-light); }
  button.btn.danger, a.btn.danger{ background:transparent; color:var(--danger); border:1px solid var(--danger-soft); padding:6px 10px; font-size:12px; }
  button.btn.danger:hover, a.btn.danger:hover{ background:var(--danger-soft); }
  button.btn.small, a.btn.small{ padding:5px 10px; font-size:12px; }
  button:focus-visible, select:focus-visible, input:focus-visible{ outline:2px solid var(--blueprint); outline-offset:1px; }

  /* preset buttons */
  .presets{ display:flex; gap:6px; }
  .presets button{
    font-family:'Microsoft JhengHei', 'IBM Plex Mono', monospace; font-size:12px;
    border:1px solid var(--grid-line); background:#fff; color:var(--blueprint-deep);
    padding:6px 10px; border-radius:4px; cursor:pointer;
  }
  .presets button.active{ background:var(--blueprint); color:#fff; border-color:var(--blueprint); }

  .month-nav{ display:flex; align-items:center; gap:6px; }
  /* 薪資週期面板：月份導覽／旬別／自訂期間同一列；窄螢幕自動換行 */
  .v-sep{ display:inline-block; flex:0 0 1px; width:1px; height:28px; background:var(--grid-line); margin:0 2px; }
  .period-range{ display:inline-flex; align-items:center; gap:6px; }
  .period-range input[type="date"]{ font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; font-size:13px; padding:6px 8px; }
  .lock-row{ margin-top:12px; padding-top:10px; }
  @media (max-width:640px){ .v-sep{ display:none; } .period-range{ flex-wrap:wrap; } }
  .month-nav input[type="month"]{
    font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; font-size:13px; padding:6px 8px; min-width:130px;
  }

  .emp-filter-row{ display:flex; flex-wrap:wrap; gap:6px; }
  .emp-filter-row button{
    font-family:'Microsoft JhengHei', 'IBM Plex Sans TC', sans-serif; font-size:12.5px;
    border:1px solid var(--grid-line); background:#fff; color:var(--blueprint-deep);
    padding:6px 12px; border-radius:16px; cursor:pointer; transition:background .12s, color .12s;
  }
  .emp-filter-row button:hover{ background:var(--blueprint-light); }
  .emp-filter-row button.active{ background:var(--accent); border-color:var(--accent-deep); color:#1a1200; font-weight:600; }
  .emp-filter-row button.inactive-site-btn{ opacity:0.55; font-style:italic; }

  .emp-filter-item{ display:inline-flex; align-items:center; gap:2px; }
  .emp-filter-item button.payslip-btn{
    border-radius:50%; width:26px; height:26px; padding:0; font-size:13px; line-height:1;
    border:1px solid var(--grid-line); background:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  }
  .emp-filter-item button.payslip-btn:hover{ background:var(--accent-soft); border-color:var(--accent); }

  /* 工地成本統計表：緊湊排版、狀態一鍵切換 */
  table.sites-table th{ white-space:nowrap; }
  table.sites-table td{ padding-top:6px; padding-bottom:6px; }
  table.sites-table .site-name-edit{ padding:5px 7px; }
  table.sites-table .chk-col{ width:1%; padding-left:8px; padding-right:2px; }
  table.sites-table .idx-col{ width:1%; padding-left:4px; padding-right:6px; }
  table.sites-table .stat-col{ width:1%; text-align:center; white-space:nowrap; padding-left:6px; padding-right:6px; }
  table.sites-table td.name-col{ width:1%; }
  table.sites-table td.name-col input{ width:176px; min-width:0; }
  .site-addr{ display:flex; align-items:center; gap:4px; }
  .site-addr input{ width:170px; }
  .site-addr-tools{ display:inline-flex; gap:2px; }
  .icon-btn{
    border:1px solid var(--grid-line); background:#fff; border-radius:4px; cursor:pointer;
    width:26px; height:26px; padding:0; font-size:12px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  }
  .icon-btn:hover{ background:var(--blueprint-light); }
  .site-status{
    font-family:'Microsoft JhengHei', 'IBM Plex Sans TC', sans-serif; font-size:12px; font-weight:600;
    border-radius:14px; padding:4px 11px; cursor:pointer; border:1px solid; white-space:nowrap; transition:filter .12s;
  }
  .site-status:hover{ filter:brightness(0.95); }
  .site-status-select{ min-width:0; padding:4px 22px 4px 8px; font-size:12px; border-radius:14px; }
  .site-status.on{ background:var(--success-soft); color:#1c5c39; border-color:#9FD5B4; }
  .site-status.off{ background:#EEF1F4; color:var(--muted); border-color:var(--grid-line); }
  tr.inactive-site-row .site-status.off{ font-style:normal; opacity:1; }

  /* 加班／加給／獎金：加班試算群組（時薪 × 時數 → 帶入），框成一組跟金額欄相鄰 */
  .ot-calc{
    display:inline-flex; align-items:flex-end; gap:8px; padding:6px 10px 6px 12px;
    border:1px dashed var(--grid-line); border-radius:6px; background:#FAFCFE;
  }
  .ot-calc-label{ font-size:var(--ui-sub-px, 11.5px); color:var(--muted); align-self:center; white-space:nowrap; }
  .ot-calc-x{ color:var(--muted); font-size:14px; padding-bottom:9px; }
  .ot-calc .btn{ align-self:flex-end; margin-bottom:1px; }

  /* 打卡頁字級控制（A− ／ 100% ／ A+），貼在面板標題右側 */
  .zoom-ctl{ display:inline-flex; border:1px solid var(--grid-line); border-radius:14px; overflow:hidden; text-transform:none; letter-spacing:0; }
  .zoom-ctl button{
    font-family:'Microsoft JhengHei', 'IBM Plex Sans TC', sans-serif; font-size:12px; font-weight:600;
    background:#fff; color:var(--blueprint-deep); border:none; padding:4px 9px; cursor:pointer; line-height:1;
  }
  .zoom-ctl button + button{ border-left:1px solid var(--grid-line-soft); }
  .zoom-ctl button:hover{ background:var(--blueprint-light); }
  .zoom-ctl button:nth-child(2){ min-width:46px; color:var(--muted); font-weight:500; }

  /* 員工證件與圖片 */
  .doc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:10px; }
  .doc-card{ border:1px solid var(--grid-line); border-radius:6px; background:#fff; padding:8px; display:flex; flex-direction:column; gap:6px; }
  .doc-thumb{ height:96px; background:#F4F8FB; border-radius:4px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .doc-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
  .doc-pdf{ font-family:'Microsoft JhengHei', 'Oswald', sans-serif; font-weight:700; color:var(--danger); font-size:18px; letter-spacing:0.05em; }
  .doc-meta{ display:flex; flex-direction:column; gap:2px; font-size:12px; }
  .doc-actions{ display:flex; gap:6px; }

  /* 功能設定 → 頁首外觀：三個區塊並排卡片 */
  .brand-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px; align-items:start; }
  .brand-stack{ display:flex; flex-direction:column; gap:12px; }
  .brand-block{ border:1px solid var(--grid-line-soft); border-radius:6px; padding:12px; background:#FAFCFE; }
  .brand-block-title{ font-weight:600; font-size:13px; color:var(--blueprint-deep); margin-bottom:8px; }
  .brand-logo-preview{ min-width:120px; min-height:56px; display:flex; align-items:center; border:1px dashed var(--grid-line); border-radius:4px; padding:4px 8px; }

  /* 叫料：數量×單價＝金額 群組（同加班試算的虛線框） */
  .mat-calc{
    display:inline-flex; align-items:flex-end; gap:8px; padding:6px 10px;
    border:1px dashed var(--grid-line); border-radius:6px; background:#FAFCFE;
  }

  /* 批次面板的復原提示列：文字＋按鈕同一列、淺橘底框住 */
  .undo-strip{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:4px;
    padding:8px 12px; margin:-4px 0 14px;
  }
  .undo-strip-text{ font-size:12.5px; color:var(--accent-deep); font-weight:600; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .undo-strip-text .badge{ background:#fff; }

  /* 檢視員工：一組相連膠囊（姓名＋🌐＋🖼️），姓名可複選 */
  .emp-chip-row{ gap:8px; }
  .emp-chip{ display:inline-flex; align-items:stretch; border:1px solid var(--grid-line); border-radius:16px; overflow:hidden; background:#fff; }
  .emp-chip.on{ border-color:var(--accent-deep); box-shadow:0 0 0 1px var(--accent-soft); }
  .emp-filter-row .emp-chip button{ border:none; border-radius:0; margin:0; }
  .emp-filter-row .emp-chip button.emp-chip-name{ padding:6px 12px; }
  .emp-filter-row .emp-chip button.emp-chip-ico{
    padding:0 8px; font-size:13px; line-height:1; border-left:1px solid var(--grid-line-soft); background:#FAFCFE;
    display:inline-flex; align-items:center;
  }
  .emp-filter-row .emp-chip button.emp-chip-ico:hover{ background:var(--accent-soft); }
  .emp-filter-row .emp-chip.on button.emp-chip-ico{ border-left-color:var(--accent-deep); }

  tr.inactive-site-row{ opacity:0.55; }
  tr.inactive-site-row td{ font-style:italic; }

  .view-toggle{ display:inline-flex; gap:2px; border:1px solid var(--grid-line); border-radius:4px; overflow:hidden; margin-left:auto; }
  .view-toggle button{
    font-family:'Microsoft JhengHei', 'IBM Plex Mono', monospace; font-size:11.5px; border:none; background:#fff; color:var(--blueprint-deep);
    padding:5px 10px; cursor:pointer;
  }
  .view-toggle button.active{ background:var(--blueprint); color:#fff; }
  .copy-day-btn{ padding:2px 6px !important; font-size:11px !important; margin-right:6px; }

  .cal-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:8px; }
  .cal-cell{
    border:1px solid var(--grid-line); border-radius:4px; padding:8px 9px; cursor:pointer; background:#FAFCFE;
    transition:background .12s;
  }
  .cal-cell:hover{ background:var(--blueprint-light); border-color:var(--blueprint); }
  .cal-date{ font-size:15px; font-weight:600; color:var(--blueprint-deep); display:flex; align-items:baseline; justify-content:space-between; }
  .cal-wd{ font-size:10px; color:var(--muted); font-weight:400; }
  .cal-count{ font-size:11px; margin-top:4px; color:#1c5c39; font-weight:600; }
  .cal-names{ font-size:10.5px; color:var(--muted); margin-top:3px; line-height:1.4; }
  .cal-cell.weekend-date .cal-date{ color:var(--danger); }
  .cal-cell.weekend-date .cal-wd{ color:var(--danger); opacity:0.8; }
  tr[data-date].highlight td{ background:var(--accent-soft) !important; }

  /* ---------- Attendance table ---------- */
  .table-scroll{ overflow-x:auto; border:1px solid var(--grid-line); border-radius:4px; }
  table.att-table{ border-collapse:collapse; width:100%; min-width:640px; }
  table.att-table th, table.att-table td{
    border:1px solid var(--grid-line-soft); padding:0; text-align:center; font-size:12.5px;
  }
  table.att-table thead th{
    background:var(--blueprint-light); color:var(--blueprint-deep); font-weight:600;
    padding:8px 6px; position:sticky; top:0; z-index:2;
  }
  table.att-table thead tr.emp-row th{
    font-family:'Microsoft JhengHei', 'Oswald',sans-serif; letter-spacing:0.03em; text-transform:uppercase; font-size:12px;
    border-bottom:none;
  }
  table.att-table thead tr.session-row th{
    font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); font-weight:500;
    padding:4px 4px; background:#F4F8FB;
  }
  /* 日期欄寬度只吃內容（width:1% + nowrap = 縮到最小），有沒有 ⧉ 複製按鈕、
     幾位員工、手機或桌機都一樣貼齊文字 */
  table.att-table td.date-cell{
    font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; font-size:12px; color:var(--ink); background:#FAFCFE;
    white-space:nowrap; padding:6px 8px; text-align:left; position:sticky; left:0; z-index:1;
    border-right:2px solid var(--grid-line); width:1%; overflow:hidden; text-overflow:ellipsis;
  }
  table.att-table thead th:first-child{ width:1%; white-space:nowrap; padding-left:8px; padding-right:8px; }
  table.att-table td.date-cell .copy-day-btn{ margin-right:4px; padding:2px 5px; }
  table.att-table td.date-cell .wd{ color:var(--muted); font-size:10.5px; margin-left:4px;}
  table.att-table td.date-cell.weekend-date{ color:var(--danger); }
  table.att-table td.date-cell.weekend-date .wd{ color:var(--danger); opacity:0.75; }
  table.att-table tbody tr:hover td.date-cell.weekend-date{ background:var(--danger-soft); }
  table.att-table td.slot-cell select{
    width:100%; min-width:0; max-width:100%; border:none; border-radius:0; font-size:12px; padding:7px 4px; background:transparent;
    text-align:center; text-align-last:center;
  }
  table.att-table td.slot-cell select.worked{ background:var(--success-soft); color:#1c5c39; font-weight:500;}
  table.att-table td.slot-cell select.on-leave{ background:#FFF3CD; color:#8A6D1A; font-weight:500;}
  table.att-table td.slot-cell{ min-width:78px; }
  /* 員工之間分隔線／同一員工上午下午之間的細線：寬度與顏色由後台
     「排班表顏色」設定（CSS 變數掛在 table 上，預設 2px #C7D6E3 / 1px #EEF3F7） */
  table.att-table td.slot-am, table.att-table thead th.slot-am{ border-right:var(--att-sess-w, 1px) var(--att-sess-s, solid) var(--att-sess-c, var(--grid-line-soft)); }
  table.att-table td.slot-pm, table.att-table thead th.slot-pm,
  table.att-table thead tr.emp-row th, table.att-table tfoot td.emp-end{ border-right:var(--att-emp-w, 1px) var(--att-emp-s, solid) var(--att-emp-c, var(--grid-line-soft)); }
  table.att-table thead tr.emp-row th:first-child{ border-right:var(--att-emp-w, 1px) var(--att-emp-s, solid) var(--att-emp-c, var(--grid-line-soft)); }
  /* 單獨檢視員工：只有 3 欄，取消整表最小寬、格子加寬置中，手機不會被截字 */
  table.att-table.single-emp{ min-width:0; }
  table.att-table.single-emp td.slot-cell select{ font-size:13px; padding:9px 4px; }
  .punch-flag-badge{ position:absolute; top:2px; right:2px; font-size:11px; cursor:help; line-height:1; }
  /* 員工自行打卡的時刻：格子右下角小字（滑過看完整提示） */
  .punch-time-badge{ position:absolute; right:3px; bottom:1px; font-size:9px; line-height:1; color:#1c5c39; opacity:0.85; pointer-events:none; font-family:'Microsoft JhengHei', 'IBM Plex Mono', monospace; letter-spacing:-0.02em; }
  table.att-table td.slot-cell select{ padding-bottom:9px; }
  table.att-table tbody tr:hover td{ background:#F6FAFD; }
  table.att-table tbody tr:hover td.date-cell{ background:#F0F6FA; }
  table.att-table tfoot td{
    font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; font-weight:600; font-size:12px;
    background:var(--blueprint-light); padding:7px 6px; border-top:2px solid var(--grid-line);
  }
  table.att-table tfoot td.label-cell{ text-align:left; padding-left:10px; color:var(--blueprint-deep); position:sticky; left:0; background:var(--blueprint-light); white-space:nowrap; }
  .payout{ color:var(--accent-deep); }

  .summary-strip{ display:flex; gap:16px; margin-top:14px; flex-wrap:wrap; }
  .stat{
    background:var(--blueprint-light); border:1px solid var(--grid-line); border-radius:4px;
    padding:10px 16px; min-width:140px;
  }
  .stat .k{ font-size:11px; color:var(--muted); font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; }
  .stat .v{ font-size:20px; font-weight:600; color:var(--blueprint-deep); font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; margin-top:2px; }
  .stat.accent .v{ color:var(--accent-deep); }

  .dash-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
  .dash-card{
    background:var(--paper); border:1px solid var(--grid-line); border-radius:var(--radius);
    padding:14px 16px; box-shadow:0 1px 2px rgba(15,52,84,0.04);
  }
  .dash-card .k{ font-size:11px; color:var(--muted); font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; margin-bottom:6px; }
  .dash-card .v{ font-size:24px; font-weight:600; color:var(--blueprint-deep); font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; }
  .dash-card-date{ font-size:10px; color:var(--muted); font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; margin-top:4px; }
  .dash-card.accent{ border-color:var(--accent); background:var(--accent-soft); }
  .dash-card.accent .v{ color:var(--accent-deep); }

  /* ---------- Settings / lists ---------- */
  .chip-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .chip{
    display:flex; align-items:center; gap:8px;
    border:1px dashed var(--blueprint); background:var(--blueprint-light);
    border-radius:4px; padding:6px 8px 6px 12px; font-size:13px;
  }
  .chip .wage{ font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted); }
  .chip button{ background:none; border:none; color:var(--danger); cursor:pointer; font-size:14px; padding:2px 4px; line-height:1;}

  .emp-card-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
  .emp-card{ border:1px solid var(--grid-line); border-radius:5px; overflow:hidden; }
  .emp-card-head{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
    padding:10px 14px; background:#FAFCFE;
  }
  .emp-card-body{ padding:14px; border-top:1px dashed var(--grid-line); background:#fff; }

  .empno-edit{
    display:inline-flex; align-items:center; gap:5px; background:var(--blueprint-light);
    border:1px solid var(--grid-line); border-radius:10px; padding:2px 4px 2px 10px;
  }
  .empno-edit label{ font-size:10.5px; color:var(--muted); font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; }
  .empno-edit input{
    border:none; background:#fff; font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; font-size:11.5px;
    padding:3px 6px; border-radius:8px; text-align:center;
  }
  .empno-edit input:focus{ box-shadow:0 0 0 2px rgba(28,72,112,0.18); }

  input.site-name-edit{
    border:1px solid transparent; background:transparent; font-size:13px; padding:4px 6px;
    border-radius:4px; width:180px; font-family:'Microsoft JhengHei', 'IBM Plex Sans TC', sans-serif;
  }
  input.site-name-edit:hover{ border-color:var(--grid-line); background:#fff; }
  input.site-name-edit:focus{ border-color:var(--blueprint); background:#fff; box-shadow:0 0 0 2px rgba(28,72,112,0.12); }

  /* ---------- Punch (self clock-in) ---------- */
  .punch-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media (max-width:520px){ .punch-grid{ grid-template-columns:1fr; } }
  .punch-both-row{
    display:flex; gap:8px; align-items:center; margin-bottom:12px; padding:10px;
    background:var(--accent-soft); border:1px dashed var(--accent); border-radius:5px;
  }
  @media (max-width:420px){ .punch-both-row{ flex-direction:column; align-items:stretch; } }
  .punch-block{
    border:1px solid var(--grid-line); border-radius:5px; padding:14px; background:#FAFCFE; text-align:center;
  }
  .punch-block.done{ background:var(--success-soft); border-color:#BFE3CD; }
  .punch-block.done.leave{ background:#FFF3CD; border-color:#F0D68A; }
  .punch-label{ font-family:'Microsoft JhengHei', 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; font-size:13px; color:var(--blueprint-deep); margin-bottom:10px; }
  .punch-status{ font-size:13px; color:#1c5c39; font-weight:600; margin-bottom:10px; }

  /* ---------- Expense table ---------- */
  table.exp-table{ width:100%; border-collapse:collapse; }
  table.exp-table th{
    background:var(--blueprint-light); color:var(--blueprint-deep); font-size:12px; font-weight:600;
    padding:9px 10px; text-align:left; font-family:'Microsoft JhengHei', 'Oswald',sans-serif; letter-spacing:0.03em; text-transform:uppercase;
    border-bottom:2px solid var(--grid-line);
  }
  table.exp-table td{ padding:9px 10px; border-bottom:1px solid var(--grid-line-soft); font-size:13px; }
  table.exp-table td.num{ font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; text-align:right; }
  table.exp-table th.num{ text-align:right; }
  table.exp-table tbody tr:hover{ background:#F6FAFD; }
  table.exp-table tfoot td{ font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; font-weight:700; font-size:14px; padding:12px 10px; border-top:2px solid var(--grid-line); color:var(--accent-deep); }

  /* ---------- Employee profile (基本資料) table ---------- */
  table.profile-table th{
    background:#FAFCFE; color:var(--muted); font-size:12px; font-weight:600; text-align:left;
    padding:8px 10px; width:110px; border-bottom:1px solid var(--grid-line-soft); text-transform:none; letter-spacing:0;
    font-family:'Microsoft JhengHei', sans-serif;
  }
  table.profile-table td{ padding:6px 10px; border-bottom:1px solid var(--grid-line-soft); }
  table.profile-table td input{ width:100%; border:1px solid transparent; background:transparent; padding:5px 6px; border-radius:4px; font-size:13px; }
  table.profile-table td input:hover{ border-color:var(--grid-line); background:#fff; }
  table.profile-table td input:focus{ border-color:var(--blueprint); background:#fff; box-shadow:0 0 0 2px rgba(28,72,112,0.12); }

  .empty-state{ text-align:center; padding:40px 20px; color:var(--muted); font-size:13.5px; }
  .empty-state .icon{ font-size:28px; margin-bottom:8px; }

  .badge{ display:inline-block; font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; font-size:10.5px; padding:2px 7px; border-radius:10px; background:var(--blueprint-light); color:var(--blueprint-deep); border:1px solid var(--grid-line); }

  .loading-screen{ display:flex; align-items:center; justify-content:center; height:70vh; color:var(--muted); font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; font-size:13px; }

  .toast{
    position:fixed; bottom:20px; right:20px; background:var(--blueprint-deep); color:#fff;
    padding:10px 16px; border-radius:5px; font-size:13px; box-shadow:0 4px 14px rgba(15,52,84,0.3);
    opacity:0; transform:translateY(8px); transition:all .25s ease; z-index:50; pointer-events:none;
  }
  .toast.show{ opacity:1; transform:translateY(0); }

  .footnote{ font-size:var(--ui-sub-px, 11.5px); color:var(--muted); margin-top:8px; line-height:1.7; letter-spacing:0.01em; max-width:1180px; text-wrap:pretty; overflow-wrap:anywhere; font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; }
  .row + .footnote{ margin-top:12px; }
  .footnote b, .footnote strong{ color:var(--ink); font-weight:600; }

  /* ---------- Confirm modal (replaces blocked window.confirm) ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(15,52,84,0.45);
    align-items:center; justify-content:center; z-index:100; padding:20px;
  }
  .modal-overlay.show{ display:flex; }
  .modal-box{
    background:#fff; border-radius:8px; padding:22px 24px; max-width:380px; width:100%;
    box-shadow:0 10px 30px rgba(15,52,84,0.3); border-top:4px solid var(--accent);
  }
  .modal-msg{ font-size:14px; color:var(--ink); line-height:1.6; margin:0 0 18px; white-space:pre-line; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:8px; }

  .content-modal-box{
    max-width:640px; width:100%; max-height:85vh; overflow-y:auto; position:relative; padding-top:36px;
  }
  .content-modal-close{
    position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%;
    border:1px solid var(--grid-line); background:#fff; cursor:pointer; font-size:14px; line-height:1;
    display:flex; align-items:center; justify-content:center; color:var(--muted);
  }
  .content-modal-close:hover{ background:var(--blueprint-light); color:var(--blueprint-deep); }
  .payslip-web{ font-family:'Microsoft JhengHei', 'IBM Plex Sans TC', sans-serif; }
  .payslip-web h2{ font-family:'Oswald','Microsoft JhengHei',sans-serif; text-transform:uppercase; letter-spacing:0.04em; color:var(--blueprint-deep); font-size:20px; margin:0 0 4px; }
  .payslip-web .sub{ font-size:12px; color:var(--muted); margin-bottom:16px; }
  .payslip-web .summary-line{ display:flex; justify-content:space-between; padding:6px 0; font-size:14px; border-bottom:1px dashed var(--grid-line); }
  .payslip-web .summary-line.total{ font-weight:700; color:var(--accent-deep); font-size:16px; border-bottom:none; border-top:2px solid var(--grid-line); padding-top:12px; margin-top:6px; }
  .payslip-web section{ margin-top:18px; }
  .payslip-web section h3{ font-size:13px; color:var(--blueprint-deep); margin:0 0 8px; }

  @media (max-width:640px){
    nav.tabs{ padding:0 8px; }
    nav.tabs button{ padding:10px 10px; font-size:13px; }

    header.app-header{ padding:16px 16px 14px; }
    main{ padding:14px 12px 40px; }
    .panel{ padding:14px 14px; }
    .app-title{ font-size:19px; }
  }

/* ---- 結算鎖定／類別選擇／捲動清單／今日明日派工（缺口 1-5） ---- */
.lock-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.lock-chip{ display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:var(--panel-soft, #f6f8fa); font-size:12.5px; }
.lock-chip.locked{ background:#FFF3CD; border-color:#F0D68A; color:#8A6D1A; }
.att-table select.locked, .att-table select:disabled{ opacity:0.7; cursor:not-allowed; }
.cat-pick{ display:inline-flex; gap:6px; align-items:center; }
.cat-pick select{ min-width:110px; }
.scroll-5{ max-height:var(--scroll5-h, 306px); overflow-y:auto; border:1px solid var(--line); border-radius:8px; }
.scroll-5 table{ margin:0; }
.scroll-5 thead th{ position:sticky; top:0; z-index:1; }
.assign-card{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-soft, #f6f8fa); font-size:13.5px; }
.assign-row{ display:grid; grid-template-columns:minmax(120px, 1.2fr) 1fr 1fr; gap:8px; align-items:center; }
.assign-day{ font-weight:600; }
.assign-day .wd{ font-weight:400; margin-left:4px; opacity:0.75; }
.assign-day.red{ color:var(--danger); }
@media (max-width:480px){ .assign-row{ grid-template-columns:1fr; gap:2px; padding-bottom:6px; border-bottom:1px dashed var(--line); } .assign-row:last-child{ border-bottom:0; padding-bottom:0; } }
.cal-week-head{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:6px; font-size:12px; color:var(--muted); text-align:center; }
.cal-week-head .red{ color:var(--danger); }
.cal-grid.month{ grid-template-columns:repeat(7, minmax(0,1fr)); }
.cal-cell.blank{ background:transparent; border-color:transparent; cursor:default; }
.cal-cell.blank:hover{ background:transparent; }
.cal-cell.out-period{ opacity:0.45; }
.cal-cell.locked{ background:#FFFBEA; }
.cal-site{ font-size:11.5px; line-height:1.35; display:flex; align-items:center; gap:4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cal-site .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.cal-site b{ font-weight:600; margin-left:auto; }
@media (max-width:640px){ .cal-grid.month{ gap:4px; } .cal-site{ font-size:10.5px; } .cal-cell{ padding:4px; } }
.report-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); flex-wrap:wrap; }
.report-card:last-child{ border-bottom:0; }
.report-btns{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

/* ---- 排班表 XY 交換版（員工為列、日期為欄） ---- */
table.att-table.att-transposed thead th.date-head{ font-family:'Microsoft JhengHei', 'IBM Plex Mono',monospace; font-size:12px; text-transform:none; letter-spacing:0; padding:6px 4px; line-height:1.3; }
table.att-table.att-transposed thead th.date-head .wd{ color:var(--muted); font-size:10.5px; margin-left:3px; font-weight:400; }
table.att-table.att-transposed thead th.date-head.weekend-date, table.att-table.att-transposed thead th.date-head.weekend-date .wd{ color:var(--danger); }
table.att-table.att-transposed thead th.date-head .copy-day-btn{ margin-right:3px; padding:1px 4px; }
table.att-table.att-transposed td.emp-name-cell{ font-family:'Microsoft JhengHei', sans-serif; font-weight:600; font-size:13px; }
table.att-table.att-transposed td.emp-name-cell .wd{ display:block; font-weight:400; font-size:10.5px; color:var(--muted); margin:0; }
table.att-table.att-transposed thead th.sum-head{ font-size:11.5px; text-transform:none; letter-spacing:0; }
table.att-table.att-transposed td.sum-cell{ font-size:12px; font-weight:600; background:#F4F8FB; padding:6px 4px; }
table.att-table.att-transposed td.sum-cell.payout{ color:var(--accent-deep, #E2571C); }
/* 員工（列）之間的分隔線用「員工分隔線」設定；日期之間（下午格右側）也用員工分隔線 */
table.att-table.att-transposed tbody tr td{ border-bottom:var(--att-emp-w, 1px) var(--att-emp-s, solid) var(--att-emp-c, var(--grid-line-soft)); }
table.att-table.att-transposed thead tr.emp-row th{ border-right:var(--att-emp-w, 1px) var(--att-emp-s, solid) var(--att-emp-c, var(--grid-line-soft)); }

.dupe-group{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:8px; background:#FFFBEA; }
.dupe-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; font-size:13px; }
.dupe-group table{ margin:0; }
.dupe-group.strong{ background:#FFF1F0; border-color:#F5B5B2; }

.dupe-table th{ white-space:nowrap; }
.dupe-table td{ padding:6px 6px; vertical-align:middle; }
.dupe-table .dupe-name{ font-weight:600; white-space:nowrap; }
.dupe-table .dupe-sub{ margin:0; font-size:11px; line-height:1.3; }
.dupe-table .dupe-att{ font-size:12px; line-height:1.35; }
.dupe-table .cat-pick select{ min-width:0; width:100%; }
.dupe-table .cat-pick input{ width:100% !important; }
.dupe-table .badge{ white-space:nowrap; }

  a.btn{ text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.list-pref{ display:inline-flex; align-items:center; gap:6px; }
.list-pref select, select.list-pref{ min-width:0; padding:4px 6px; font-size:12px; }
.table-scroll.scroll-n thead th{ position:sticky; top:0; z-index:1; }
.table-scroll.scroll-n tfoot td{ position:sticky; bottom:0; background:var(--blueprint-light); z-index:1; }

.perm-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:6px 16px; }
.perm-item{ display:flex; align-items:flex-start; gap:8px; font-size:13px; padding:4px 0; cursor:pointer; }
.perm-item input{ margin-top:3px; }

/* 年度報表：固定欄寬、數字欄右對齊、工地名稱可換行、期間不換行 */
.annual-table th, .annual-table td{ padding:8px 6px; }
.annual-table td:nth-child(2){ padding-right:0; }
.annual-table td:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.annual-table td.num, .annual-table th.num{ white-space:nowrap; }

/* 支出明細／叫料明細：固定欄寬、數字欄表頭靠右、長文字省略 */
.list-table th, .list-table td{ padding:8px 8px; }
.list-table td{ overflow:hidden; text-overflow:ellipsis; }
.list-table td select.site-name-edit{ width:100%; max-width:100%; }
.list-table td.num, .list-table th.num{ white-space:nowrap; }
.income-table td:nth-child(4){ white-space:nowrap; }
.exp-list-table td:nth-child(2), .exp-list-table td:nth-child(6){ white-space:nowrap; }
.exp-list-table td.op-cell{ text-align:right; }
.exp-list-table th:last-child{ text-align:right; }

/* 功能設定：多個設定合併成一個面板時的子區塊（標題列不參與拖曳／收合，避免跟 .panel-title 混淆） */
.sub-panel{ margin-top:18px; padding-top:14px; border-top:1px dashed var(--grid-line-soft); }
.sub-panel.first{ margin-top:0; padding-top:0; border-top:none; }
.sub-title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--blueprint-deep); margin:0 0 10px; }
.sub-title .dim-line{ flex:1; height:1px; background:repeating-linear-gradient(90deg, var(--grid-line-soft) 0 4px, transparent 4px 8px); }
.panel.collapsed > .sub-panel{ display:none; }
/* 子區塊內再分組的小標（例如介面文字大小：後台／打卡頁／版面） */
.row-cap{ font-size:var(--ui-sub-px, 11.5px); font-weight:600; color:var(--blueprint-deep); margin:12px 0 4px; letter-spacing:0.02em; }
.sub-title + .row-cap, .footnote + .row-cap{ margin-top:6px; }

/* ---- 手機／觸控版面調整 ---- */
.table-scroll.auto-wrap{ border:none; border-radius:0; }
@media (max-width:640px){
  /* iOS：輸入欄字級 <16px 會在聚焦時自動放大整頁，統一 16px */
  input, select, textarea{ font-size:16px; }
  .row{ gap:8px 10px; }
  /* 後台頁籤：單列橫向捲動（不換行佔高度），隱藏捲軸 */
  nav.tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  nav.tabs::-webkit-scrollbar{ display:none; }
  nav.tabs button{ white-space:nowrap; flex:0 0 auto; }
  .panel-title{ flex-wrap:wrap; }
  .mat-calc, .ot-calc{ flex-wrap:wrap; max-width:100%; }
  .field > input:not([type="checkbox"]):not([type="radio"]), .field > select{ max-width:100%; }
  /* 欄位本身也不能比列寬：選單選項文字很長時（例如「開啟（…）」）會把整頁撐出橫向捲軸 */
  .row > .field{ max-width:100%; min-width:0; }
  .brand-block, .sub-panel{ min-width:0; }
  .dash-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .dash-card .v{ font-size:20px; }
}
@media (pointer:coarse){
  /* 觸控：按鈕與小控制項加大到好按 */
  button.btn.small, a.btn.small{ padding:8px 12px; font-size:13px; }
  .zoom-ctl button{ padding:7px 12px; font-size:13px; }
  .site-status{ padding:6px 12px; }
  .presets button{ padding:8px 12px; }
  .list-pref select, select.list-pref{ padding:6px 8px; }
}
@media (max-width:640px){
  /* 手機：顯示 N 列下拉也用 16px，避免 iOS 聚焦時放大整頁 */
  .list-pref select, select.list-pref{ font-size:16px; }
}