/* 考勤中心（我的考勤／考勤管理／薪資編輯）共用的 Apple 風格元件與深色模式（2026-09-07）。
   規則來自 .agent-spec：卡片 18px、輸入與按鈕 10px、1px 半透明邊框、0 8px 24px 陰影、
   側欄與浮層 blur(20px) saturate(180%)、互動目標 ≥ 44px、focus-visible 外框、
   ≥1200 雙欄／800–1199 收窄側欄／<800 單欄、支援深色模式與 prefers-reduced-motion。
   只有連結這支 CSS 的頁面會套用，其他後台頁面不受影響。 */
:root{
  --ap-accent:#0a84ff; --ap-green:#248a3d; --ap-orange:#b25000; --ap-red:#d70015;
  --ap-fg:#1d1d1f; --ap-fg2:#515154;
  --ap-surface:rgba(255,255,255,.86); --ap-glass:rgba(255,255,255,.66);
  --ap-line:rgba(29,29,31,.12); --ap-soft:rgba(118,118,128,.10);
  --ap-shadow:0 8px 24px rgba(0,0,0,.08); --ap-ease:cubic-bezier(.16,1,.3,1);
  --ap-pending-bg:#fdf2da; --ap-pending-fg:#7a4b00;
  --ap-ok-bg:#e6f4ea; --ap-ok-fg:#155d2a;
  --ap-bad-bg:#fbe9e7; --ap-bad-fg:#9b1c12;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#000; --panel:#1c1c1e; --ink:#f5f5f7; --ink-soft:#c7c7cc; --ink-dim:#aeaeb2;
    --line:rgba(255,255,255,.14); --wash:#2c2c2e; --accent:#64d2ff; --accent-bright:#5ac8fa;
    --danger:#ff6961; --good:#4cd964;
    --ap-fg:#f5f5f7; --ap-fg2:#c7c7cc; --ap-green:#4cd964; --ap-orange:#ffb340; --ap-red:#ff6961;
    --ap-surface:rgba(28,28,30,.86); --ap-glass:rgba(28,28,30,.6);
    --ap-line:rgba(255,255,255,.14); --ap-soft:rgba(118,118,128,.22);
    --ap-shadow:0 8px 24px rgba(0,0,0,.4);
    --ap-pending-bg:#4a3300; --ap-pending-fg:#ffd60a;
    --ap-ok-bg:#0f3d20; --ap-ok-fg:#6ee78b;
    --ap-bad-bg:#4d1512; --ap-bad-fg:#ff8a80;
  }
  body{color-scheme:dark;}
  .btn-primary{background:#f5f5f7;color:#000;border-color:#f5f5f7;}
  .btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#000;}
  .tab-btn.active{background:#f5f5f7;color:#000;border-color:#f5f5f7;}
  .admin-side a.active{background:#f5f5f7;color:#000;}
  .msg.err{background:#4d1512;color:#ff8a80;} .msg.ok{background:#0f3d20;color:#6ee78b;}
  .st.pending,.flag.late{background:var(--ap-pending-bg);color:var(--ap-pending-fg);}
  .st.approved{background:var(--ap-ok-bg);color:var(--ap-ok-fg);}
  .st.rejected,.flag.miss{background:var(--ap-bad-bg);color:var(--ap-bad-fg);}
  .flag.leave{background:#0f2a4d;color:#8ec5ff;} .flag.amend{background:#2d1f4d;color:#c9b1ff;}
  .badge.on{background:#0f3d20;color:#6ee78b;} .badge.off{background:#4d1512;color:#ff8a80;}
}
.admin-side{background:var(--ap-glass);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);}
.admin-side a{min-height:44px;display:flex;align-items:center;border-radius:12px;}
.tab-btn{min-height:44px;border-radius:10px;}
.btn{min-height:44px;border-radius:10px;}
.btn-small{min-height:36px;}
.field input,.field select,.field textarea{min-height:44px;border-radius:10px;}
:focus-visible{outline:3px solid color-mix(in srgb,var(--ap-accent) 55%,transparent);outline-offset:3px;border-radius:6px;}

/* ── 元件 ───────────────────────────────────────────────────────────────── */
.ap-card{border:1px solid var(--ap-line);border-radius:18px;background:var(--ap-surface);box-shadow:var(--ap-shadow);
  padding:20px;color:var(--ap-fg);animation:ap-rise 420ms var(--ap-ease) both;
  transition:transform 220ms var(--ap-ease),box-shadow 220ms var(--ap-ease);}
.ap-card:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.10);}
.ap-card h2,.ap-card h3{margin:0 0 6px;font-size:18px;letter-spacing:-.3px;}
.ap-sub{color:var(--ap-fg2);font-size:13px;margin:0 0 16px;}
.ap-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(250px,.7fr);gap:20px;align-items:start;}
.ap-stack{display:grid;gap:14px;}
.ap-summary{position:sticky;top:28px;}
.ap-metric{padding:12px 0;border-bottom:1px solid var(--ap-line);}
.ap-metric:last-child{border-bottom:0;padding-bottom:0;}
.ap-metric .lb{color:var(--ap-fg2);font-size:13px;}
.ap-metric .vl{font-size:24px;line-height:30px;font-weight:650;letter-spacing:-.4px;margin-top:2px;font-variant-numeric:tabular-nums;}
.ap-metric .nt{color:var(--ap-fg2);font-size:12px;}
.ap-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px;flex-wrap:wrap;}
.ap-chips{display:flex;gap:7px;flex-wrap:wrap;}
.ap-chip{min-height:40px;padding:7px 14px;border:1px solid var(--ap-line);border-radius:99px;background:transparent;
  color:var(--ap-fg2);font-size:13px;cursor:pointer;font-family:inherit;transition:all 180ms var(--ap-ease);}
.ap-chip:hover{transform:translateY(-1px);color:var(--ap-fg);}
.ap-chip.active{background:var(--ap-fg);color:var(--paper);border-color:transparent;}
.ap-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;}
.ap-person{display:flex;gap:12px;min-width:0;align-items:center;}
.ap-avatar{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;font-weight:600;
  background:color-mix(in srgb,var(--ap-accent) 13%,var(--ap-surface));color:var(--ap-accent);}
.ap-name{font-weight:600;letter-spacing:-.2px;}
.ap-meta{color:var(--ap-fg2);font-size:13px;margin-top:1px;}
.ap-status{align-self:flex-start;white-space:nowrap;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600;
  background:var(--ap-pending-bg);color:var(--ap-pending-fg);}
.ap-status.approved{background:var(--ap-ok-bg);color:var(--ap-ok-fg);}
.ap-status.rejected,.ap-status.canceled{background:var(--ap-bad-bg);color:var(--ap-bad-fg);}
.ap-status.canceled{background:var(--ap-soft);color:var(--ap-fg2);}
.ap-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0;}
.ap-detail{padding:12px;border-radius:13px;background:var(--ap-soft);min-width:0;}
.ap-detail span{display:block;color:var(--ap-fg2);font-size:12px;}
.ap-detail strong{display:block;margin-top:2px;font-size:14px;font-weight:600;overflow-wrap:anywhere;}
.ap-desc{padding-top:14px;border-top:1px solid var(--ap-line);}
.ap-desc span{color:var(--ap-fg2);font-size:12px;}
.ap-desc p{margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;}
.ap-warn{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--ap-orange) 14%,transparent);color:var(--ap-orange);font-size:13px;}
.ap-warn::before{content:"⚠";flex:none;}
.ap-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px;flex-wrap:wrap;}
.ap-btn{min-height:44px;border:1px solid var(--ap-line);border-radius:10px;padding:9px 16px;background:var(--ap-surface);
  color:var(--ap-fg);font-weight:600;font-family:inherit;font-size:14px;cursor:pointer;
  transition:transform 180ms var(--ap-ease),filter 180ms var(--ap-ease);}
.ap-btn:hover{transform:translateY(-1px);filter:brightness(.97);}
.ap-btn:active{transform:scale(.97);}
.ap-btn.primary{background:var(--ap-accent);border-color:var(--ap-accent);color:#fff;}
.ap-btn.danger{color:var(--ap-red);}
.ap-btn.small{min-height:36px;padding:6px 12px;font-size:13px;}
.ap-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}
.ap-form .field{margin-bottom:14px;}
.ap-form .field label{font-family:inherit;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--ap-fg);}
.ap-form input,.ap-form select,.ap-form textarea{min-height:44px;border:1px solid var(--ap-line);border-radius:10px;
  padding:9px 12px;background:var(--ap-surface);color:var(--ap-fg);font:inherit;width:100%;}
.ap-form textarea{min-height:96px;resize:vertical;}
.ap-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ap-break{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-bottom:8px;}
.ap-preview{margin:6px 0 14px;padding:12px 14px;border-radius:13px;background:var(--ap-soft);font-size:13px;line-height:1.7;}
.ap-preview b{font-variant-numeric:tabular-nums;}
.ap-month{margin:22px 0 8px;font-size:13px;font-weight:600;color:var(--ap-fg2);letter-spacing:.04em;}
.ap-list{display:grid;gap:12px;}
.ap-empty{text-align:center;color:var(--ap-fg2);padding:36px 20px;}
.ap-tiers{width:100%;border-collapse:collapse;font-size:13px;}
.ap-tiers td,.ap-tiers th{padding:6px 6px;border-bottom:1px solid var(--ap-line);text-align:left;}
.ap-tiers input{min-height:40px;}
.ap-kind{border:1px solid var(--ap-line);border-radius:14px;padding:14px;background:var(--ap-soft);}
.ap-kind h4{margin:0 0 8px;font-size:14px;}
.ap-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.ap-note{color:var(--ap-fg2);font-size:12.5px;line-height:1.6;}
.ap-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;}
.ap-toggle input{width:20px;height:20px;}
.ap-dialog{width:min(560px,calc(100vw - 32px));border:1px solid var(--ap-line);border-radius:18px;padding:0;color:var(--ap-fg);
  background:var(--ap-glass);box-shadow:0 24px 80px rgba(0,0,0,.25);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);}
.ap-dialog::backdrop{background:rgba(0,0,0,.28);backdrop-filter:blur(3px);}
.ap-dialog .body{padding:24px;max-height:85vh;overflow:auto;}
.ap-dialog h2{margin:0 0 4px;font-size:20px;}
.ap-tbl-wrap{overflow-x:auto;}
@keyframes ap-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:1199px) and (min-width:800px){
  .admin-side{width:160px;padding:20px 10px;}
  .admin-main{padding:28px 24px;}
}
@media (max-width:799px){
  .admin-shell{flex-direction:column;}
  .admin-side{width:auto;border-right:0;border-bottom:1px solid var(--line);padding:14px 12px;}
  .admin-main{padding:18px 14px 96px;max-width:none;}
  .ap-grid{grid-template-columns:1fr;}
  .ap-summary{position:static;order:-1;}
  .ap-details{grid-template-columns:1fr 1fr;}
  .ap-details .ap-detail:last-child{grid-column:1/-1;}
  .ap-actions{display:grid;grid-template-columns:1fr 1fr;}
  .ap-row{grid-template-columns:1fr;}
  .ap-break{grid-template-columns:1fr 1fr;}
  .ap-kinds{grid-template-columns:1fr;}
  .ap-mobile-tabs{position:fixed;z-index:10;left:0;right:0;bottom:0;display:flex;overflow:auto;gap:4px;
    min-height:64px;padding:7px 8px max(7px,env(safe-area-inset-bottom));border-top:1px solid var(--ap-line);
    background:var(--ap-glass);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);}
  .ap-mobile-tabs .tab-btn{flex:1 0 auto;min-height:50px;border:0;background:transparent;color:var(--ap-fg2);font-size:12px;border-radius:10px;}
  .ap-mobile-tabs .tab-btn.active{color:var(--ap-accent);font-weight:600;background:color-mix(in srgb,var(--ap-accent) 12%,transparent);}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}