/* 樣式沿用內網 MIS（process.css / attend.php）的色彩與版型，讓內外看起來一樣、不用重新教育訓練。
   差別：不用外部字型（CSP 只允許自己網站），標題改用系統字型；手機版選單維持在上方，不做抽屜。 */
:root{
  --bg:#f2f4f5;--surface:#ffffff;--surface-2:#f7f8f9;
  --border:#dfe3e6;--border-strong:#c7ccd1;
  --text:#2b2f33;--muted:#70787f;--muted-2:#a7adb2;
  --primary:#155e7a;--primary-dark:#0d3e52;--primary-light:#e7f1f5;
  --tap:#b45309;--tap-dark:#7c3a08;--tap-light:#fdf1e3;
  --misc:#2f7a4d;--misc-dark:#1f5636;--misc-light:#e8f3ec;
  --danger:#c0392b;--danger-light:#fdecea;
  --ok:#1e7a4c;--ok-light:#e8f6ee;
  --r:10px;
  --sans:'Microsoft JhengHei','PingFang TC','Noto Sans TC',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;min-height:100vh;}
a{color:var(--primary);}

/* 上方選單 */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:0;border-bottom:3px solid var(--primary);padding:0 24px;background:var(--surface);flex-wrap:wrap;box-shadow:0 1px 4px rgba(20,40,50,.05);}
.nav a,.nav .navbtn{display:flex;align-items:center;gap:6px;padding:16px 18px;margin-bottom:-3px;font-size:15px;font-weight:700;text-decoration:none;color:var(--muted);border:0;border-bottom:3px solid transparent;background:none;font-family:inherit;cursor:pointer;letter-spacing:.3px;}
.nav a:hover,.nav .navbtn:hover{color:var(--primary);}
.nav a.active{color:var(--primary);border-color:var(--primary);}
.nav .logo{font-size:19px;font-weight:700;color:var(--primary-dark);padding:16px 20px 16px 0;border-right:1px solid var(--border);margin-right:8px;letter-spacing:.4px;}
.nav .who{margin-left:auto;font-size:14px;color:var(--muted);padding-right:4px;}
.nav form.logout{display:flex;align-items:center;margin:0;}
.wrap{max-width:1280px;margin:0 auto;padding:28px 24px 56px;}

h1,h2{font-size:24px;font-weight:700;letter-spacing:.3px;color:var(--primary-dark);margin:0 0 6px;}
h2{margin-top:22px;}
.sub{font-size:14px;color:var(--muted);margin:0 0 20px;}
.hint{font-size:13.5px;color:var(--muted);margin:8px 0;line-height:1.6;}
.empty{padding:18px;text-align:center;color:var(--muted);font-size:15px;}

.banner{border-radius:8px;padding:11px 15px;margin-bottom:18px;font-size:14.5px;border:1px solid;}
.banner.err{background:var(--danger-light);color:#8a2e22;border-color:#f3c6c0;}
.banner.ok{background:var(--ok-light);color:#155c37;border-color:#bfe3cd;}
.banner.warn{background:var(--tap-light);color:var(--tap-dark);border-color:#f0d9b5;}

/* 今日請假人員、顏色說明 */
.banner-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;margin-bottom:18px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;box-shadow:0 1px 3px rgba(20,40,50,.07);}
.banner-row .lbl{font-size:15px;font-weight:700;color:var(--primary);letter-spacing:.4px;white-space:nowrap;}
.banner-row .body{font-size:15px;color:var(--text);line-height:1.9;}
.leave-am{border:1px solid var(--primary);border-radius:5px;padding:1px 6px;background:var(--primary-light);}
.leave-pm{border:1px solid var(--misc-dark);border-radius:5px;padding:1px 6px;background:var(--misc-light);}
.leave-gt4{border:1px solid var(--tap-dark);border-radius:5px;padding:1px 6px;background:var(--tap-light);}
.leave-lt4{border:1px solid var(--danger);border-radius:5px;padding:1px 6px;background:var(--danger-light);}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13.5px;color:var(--muted);margin:-6px 0 18px;padding:8px 14px;background:var(--surface-2);border-radius:var(--r);}
.legend .sw{padding:1px 8px;border-radius:5px;font-size:13px;}

/* 特休數字卡 */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:0 1px 3px rgba(20,40,50,.07);}
.stat-card.highlight-card{border-color:var(--primary);background:var(--primary-light);}
.stat-label{font-size:15px;color:var(--muted);margin-bottom:8px;letter-spacing:.3px;}
.stat-value{font-size:21px;font-weight:700;color:var(--text);}
.stat-value .unit{font-size:14px;font-weight:400;color:var(--muted);margin-left:4px;}
.stat-sub{font-size:13.5px;color:var(--tap-dark);font-weight:400;}

/* 按鈕 */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.btn-ghost{background:var(--surface);color:var(--primary);border:1px solid var(--primary);border-radius:6px;padding:6px 13px;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .14s;text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.btn-ghost:hover{background:var(--primary);color:#fff;}
.btn-ghost.solid{background:var(--primary);color:#fff;}
.btn-ghost.solid:hover{background:var(--primary-dark);}
.btn{padding:9px 22px;background:var(--primary);color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s;}
.btn:hover{background:var(--primary-dark);}
.btn.secondary{background:var(--surface);color:var(--primary);border:1px solid var(--primary);}
.btn.secondary:hover{background:var(--primary-light);}
.btn.block{display:block;width:100%;}

/* 卡片與表格 */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:20px;overflow:hidden;box-shadow:0 1px 3px rgba(20,40,50,.07);}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border);}
.card-title{font-size:15px;font-weight:700;color:var(--primary-dark);}
.card-body{padding:4px 16px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.dt{width:100%;border-collapse:collapse;font-size:15px;}
table.dt th{text-align:center;color:var(--muted);font-weight:700;font-size:13.5px;padding:9px 8px;border-bottom:2px solid var(--border);white-space:nowrap;background:var(--surface-2);}
table.dt td{text-align:center;padding:8px;border-bottom:1px solid var(--border);white-space:nowrap;}
table.dt tbody tr:hover td{background:var(--surface-2);}
table.dt tr.highlight td{background:var(--tap-light);}
table.dt tr.highlight:hover td{background:#fbe4c4;}
table.dt img{border-radius:4px;vertical-align:middle;width:50px;}
table.dt td.left{text-align:left;}
.card-body table.dt{min-width:640px;}
.num{text-align:right;font-variant-numeric:tabular-nums;}
.low{color:var(--danger);}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;background:var(--surface-2);color:var(--muted);}
.tag.s-submitted{background:var(--tap-light);color:var(--tap-dark);}
.tag.s-sup_ok{background:var(--primary-light);color:var(--primary-dark);}
.tag.s-final_ok{background:var(--ok-light);color:var(--ok);}
.tag.s-rejected{background:var(--danger-light);color:var(--danger);}
form.inline{display:inline;margin-left:8px;}
.link{background:none;border:0;padding:0;font:inherit;color:var(--danger);text-decoration:underline;cursor:pointer;}

/* 表單（登入、改密碼、請假申請共用） */
.form{max-width:440px;padding:20px 22px;}
.form label{display:block;font-size:15px;font-weight:700;color:var(--muted);margin:14px 0 6px;letter-spacing:.3px;}
.form label:first-of-type{margin-top:0;}
.form input[type=text],.form input[type=password],.form input[type=date],.form select{width:100%;padding:9px 12px;border:1px solid var(--border-strong);border-radius:8px;font-size:15px;font-family:inherit;color:var(--text);background:var(--surface);}
.form input[type=file]{width:100%;font-size:14px;font-family:inherit;}
.form input:focus,.form select:focus{outline:none;border-color:var(--primary);}
.form input[readonly]{background:var(--surface-2);color:var(--muted);}
.form label.check{display:flex;align-items:center;gap:10px;font-weight:400;color:var(--text);margin:16px 0 2px;}
.form label.check input{width:20px;height:20px;flex:none;accent-color:var(--primary);}
.form .btn{margin-top:18px;}
.form.wide{max-width:640px;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.half-row{display:flex;gap:10px;margin:12px 0 0;}
.extra-box{background:var(--tap-light);border:1px solid #f0d9b5;border-radius:8px;padding:12px 14px;margin:14px 0 0;}
.extra-box .hint{color:var(--tap-dark);margin:0 0 10px;}
.extra-box label{margin-top:0;}
.weekday-badge{display:inline-block;min-width:42px;text-align:center;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border-strong);font-size:12.5px;font-weight:700;color:var(--primary-dark);margin-left:8px;}
.proof{max-width:240px;max-height:240px;border:1px solid var(--border);border-radius:8px;}
table.plain{border-collapse:collapse;width:100%;font-size:15px;}
table.plain th{text-align:left;color:var(--muted);width:5em;vertical-align:top;padding:8px 8px 8px 0;font-weight:700;}
table.plain td{padding:8px 0;white-space:normal;}
.actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.actions .btn{margin-top:0;}
.hidden{display:none;}

@media (max-width:860px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .nav{padding:0 12px;}
  .nav .logo{width:100%;border-right:0;padding:12px 0 4px;margin:0;font-size:18px;}
  .nav a,.nav .navbtn{padding:10px 12px;font-size:15px;}
  .nav .who{margin-left:0;}
  .nav form.logout{margin-left:auto;}
  .wrap{padding:18px 12px 48px;}
  .two{grid-template-columns:1fr 1fr;}
  table.dt{min-width:0;}
  table.dt th,table.dt td{padding:6px 8px;}
  .card-body table.dt{min-width:560px;}
}
.form input.auto{width:auto;}
.form > .btn{width:100%;}
table.dt tr.special-day td{background:#ff0000;color:#fff;}
table.dt tr.special-day:hover td{background:#e60000;}
table.dt tr.leave-row td{background:var(--primary-light);}
table.dt input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);}
.card-body table.dt.wuxin{min-width:0;}