/* ============================================================
   AHOKU 薪資系統 — 全域樣式（國際級 B2B 產品視覺）
   設計語言：8pt 間距系統、柔和分層陰影、克制圓角、精修控件
   ============================================================ */

:root{
  --sidebar-w: 244px;

  /* 品牌色 */
  --ahoku-navy: #0B2545;      /* 深海軍藍：側邊選單 */
  --ahoku-navy-2: #13315C;
  --ahoku-blue: #1F5FA8;      /* 主色：企業藍 */
  --ahoku-sky: #2E7DD1;       /* 亮藍：連結 / hover */
  --ahoku-red: #E2231A;

  /* 中性色階（灰） */
  --gray-25:#FCFDFE; --gray-50:#F7F9FC; --gray-100:#EEF2F7; --gray-200:#E3E8EF;
  --gray-300:#CDD5DF; --gray-400:#9AA5B4; --gray-500:#697586; --gray-600:#4B5565;
  --gray-700:#364152; --gray-800:#202939; --gray-900:#121926;

  /* 語意 */
  --primary: var(--ahoku-blue);
  --bg-app: #F4F6FA;
  --surface:#FFFFFF;
  --border: var(--gray-200);
  --text: var(--gray-800);
  --text-muted: var(--gray-500);

  /* 陰影（柔和分層） */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,.07), 0 2px 4px rgba(16,24,40,.04);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.12);

  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;

  --ease: cubic-bezier(.4,0,.2,1);
}

/* Bootstrap primary 對應品牌藍 */
.btn-primary{ --bs-btn-bg:var(--ahoku-blue); --bs-btn-border-color:var(--ahoku-blue);
  --bs-btn-hover-bg:var(--ahoku-navy-2); --bs-btn-hover-border-color:var(--ahoku-navy-2);
  --bs-btn-active-bg:var(--ahoku-navy); }
.btn-outline-primary{ --bs-btn-color:var(--ahoku-blue); --bs-btn-border-color:var(--ahoku-blue);
  --bs-btn-hover-bg:var(--ahoku-blue); --bs-btn-hover-border-color:var(--ahoku-blue); }
.text-primary{ color:var(--ahoku-blue)!important; }
.bg-primary-subtle{ background:#E8F0FA!important; }
a{ color:var(--ahoku-sky); text-decoration:none; transition:color .15s var(--ease); }
a:hover{ color:var(--ahoku-blue); }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Inter','Segoe UI','Microsoft JhengHei','PingFang TC','Noto Sans TC',sans-serif;
  background:var(--bg-app);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:.01em;
}

/* ===== 整體排版 ===== */
.app-wrapper{ display:flex; min-height:100vh; }

/* ===== 左側選單 ===== */
.sidebar{
  width:var(--sidebar-w);
  background:
    radial-gradient(600px 400px at 20% -5%, #1B4C82 0%, transparent 55%),
    linear-gradient(165deg, #0B2545 0%, #123A6B 55%, #1F5FA8 135%);
  color:#C3D0E0;
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:1030;
  transition:transform .25s var(--ease);
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar-brand{
  padding:20px 22px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:8px;
}
.sidebar-brand img{ height:32px; }
.sidebar .nav{ flex:1; padding:14px 12px; overflow-y:auto; gap:2px; display:flex; flex-direction:column; }
.sidebar .nav-link{
  color:#AEBED2;
  padding:10px 14px;
  display:flex; align-items:center; gap:11px;
  border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:500;
  transition:background .15s var(--ease), color .15s var(--ease);
  position:relative;
}
.sidebar .nav-link i{ font-size:1.05rem; width:20px; text-align:center; opacity:.9; }
.sidebar .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar .nav-link.active{
  background:linear-gradient(90deg, rgba(46,125,209,.22), rgba(46,125,209,.08));
  color:#fff;
}
.sidebar .nav-link.active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--ahoku-sky);
}
.sidebar-footer{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.07); }
.user-box{ display:flex; align-items:center; gap:11px; color:#E2E8F0; }
.user-box i{ font-size:1.9rem; color:var(--ahoku-sky); }

/* ===== 主內容 ===== */
.main-content{ flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-width:0; }
.topbar{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.2) blur(8px);
  padding:0 24px; height:58px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:1020;
}
.company-title{ font-weight:600; color:var(--gray-700); letter-spacing:.02em; }
.content-body{ padding:28px 28px 40px; flex:1; max-width:1440px; width:100%; }
.page-title{ font-weight:700; color:var(--gray-900); margin-bottom:4px; letter-spacing:-.01em; font-size:1.5rem; }

/* ===== 統計卡片 ===== */
.stat-card{
  background:var(--surface); border-radius:var(--radius); padding:22px 22px;
  border:1px solid var(--border); border-left:4px solid var(--gray-300);
  box-shadow:var(--shadow-sm); height:100%;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.stat-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-icon{ font-size:1.7rem; }
.stat-num{ font-size:2rem; font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--gray-900); }
.stat-label{ color:var(--text-muted); font-size:.85rem; font-weight:500; }

/* ===== 卡片 ===== */
.card{
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); background:var(--surface);
}
.card-body{ padding:22px; }
.card + .card{ margin-top:18px; }

/* ===== 按鈕（精修）===== */
.btn{ border-radius:var(--radius-sm); font-weight:500; letter-spacing:.01em;
  transition:all .15s var(--ease); }
.btn:active{ transform:translateY(1px); }
.btn-sm{ border-radius:7px; }
.btn i{ line-height:1; }

/* ===== 表單控件（精修）===== */
.form-control, .form-select{
  border-radius:var(--radius-sm); border-color:var(--gray-300);
  font-size:.9rem; color:var(--text);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-control:focus, .form-select:focus{
  border-color:var(--ahoku-sky);
  box-shadow:0 0 0 3px rgba(46,125,209,.15);
}
.form-label{ font-weight:500; color:var(--gray-600); font-size:.85rem; margin-bottom:5px; }
.form-check-input:checked{ background-color:var(--ahoku-blue); border-color:var(--ahoku-blue); }
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(46,125,209,.15); border-color:var(--ahoku-sky); }

/* ===== 表格（通用精修）===== */
.table{ --bs-table-color:var(--text); font-size:.9rem; }
.table > thead{ background:var(--gray-50); }
.table > thead th{
  color:var(--gray-600); font-weight:600; font-size:.78rem;
  text-transform:none; letter-spacing:.03em;
  border-bottom:1px solid var(--border); padding:11px 14px;
}
.table > tbody td{ padding:11px 14px; border-color:var(--gray-100); vertical-align:middle; }
.table-hover > tbody > tr:hover > *{ background:var(--gray-50); }
.table-light{ --bs-table-bg:var(--gray-50); }

/* ===== 徽章 ===== */
.badge{ font-weight:600; letter-spacing:.02em; padding:.4em .7em; border-radius:6px; }

/* ===== Alert ===== */
.alert{ border:1px solid transparent; border-radius:var(--radius); font-size:.9rem; }
.alert-info{ background:#EAF2FB; border-color:#D4E4F7; color:#1B4C82; }
.alert-warning{ background:#FEF7E6; border-color:#FBE7B8; color:#8A5A00; }
.alert-success{ background:#EAF6EE; border-color:#C9E9D4; color:#1B6B3A; }
.alert-danger{ background:#FDECEC; border-color:#F7C9C9; color:#A02020; }

/* ===== 薪資輸入表格 ===== */
.payroll-grid input.cell{
  width:62px; border:1px solid var(--gray-300); border-radius:6px;
  padding:3px 6px; text-align:right; font-size:.8rem;
  transition:border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.payroll-grid input[type=number]{ -moz-appearance:textfield; }
.payroll-grid input[type=number]::-webkit-outer-spin-button,
.payroll-grid input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.payroll-grid td.earn-cell{ padding:3px 4px; vertical-align:top; }
.payroll-grid .inp-pair{ display:flex; gap:3px; justify-content:center; }
.payroll-grid .inp-pair input.cell{ width:48px; }
.payroll-grid .cell-amount{
  text-align:center; font-weight:600; color:var(--ahoku-blue);
  border-top:1px dashed var(--gray-300); margin-top:4px; padding-top:3px; font-size:.85rem;
}
.payroll-grid thead .sub-l, .payroll-grid thead .sub-r{ display:inline-block; width:48px; color:#0B2545; }
.payroll-grid thead .sub-r{ color:#1F5FA8; }
.payroll-grid td.calc{ background:var(--gray-50); font-size:.82rem; }
.payroll-grid tfoot .tot{ background:var(--gray-100); font-weight:600; }
.payroll-grid input.role-edited{ color:#1a7f37; font-weight:600; }
.payroll-grid input.cell:focus{ outline:none; border-color:var(--ahoku-sky);
  box-shadow:0 0 0 3px rgba(46,125,209,.15); }
.payroll-grid th, .payroll-grid td{ vertical-align:middle; white-space:nowrap; }
.payroll-grid .calc{ background:var(--gray-50); }
.sticky-col-seq{ position:sticky; left:0; width:52px; min-width:52px; max-width:52px;
  background:#fff; z-index:2; }
.sticky-col{ position:sticky; left:52px; width:64px; min-width:64px; max-width:64px;
  background:#fff; z-index:2; }
.sticky-col2{ position:sticky; left:116px; width:72px; min-width:72px; max-width:72px;
  background:#fff; z-index:2; box-shadow:2px 0 6px -3px rgba(16,24,40,.2); }
.payroll-grid tr.dragging{ opacity:.4; }
.payroll-grid tr.drag-over td{ border-top:2px solid var(--ahoku-sky); }

/* 薪資表水平捲動：確保超出畫面時可用滑鼠/觸控滑動看到右側欄 */
.card > .table-responsive{
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;   /* iOS 慣性捲動 */
  width:100%;
  border-radius:var(--radius);
}
/* 讓水平捲軸明顯可見、好操作（淡藍色）*/
.card > .table-responsive::-webkit-scrollbar{ height:12px; }
.card > .table-responsive::-webkit-scrollbar-thumb{
  background:#AECBEA; border-radius:8px; border:2px solid transparent; background-clip:content-box;
}
.card > .table-responsive::-webkit-scrollbar-thumb:hover{ background:#5B93CE; background-clip:content-box; }
.card > .table-responsive::-webkit-scrollbar-track{ background:#EAF2FB; border-radius:8px; }
/* Firefox 淡藍捲軸 */
.card > .table-responsive{ scrollbar-color:#AECBEA #EAF2FB; scrollbar-width:thin; }
/* 表格不被壓縮換行，維持自然寬度以觸發捲動 */
#payrollGrid{ width:max-content; min-width:100%; }

/* 薪資表上方自訂捲軸（不受 macOS 隱藏原生捲軸影響，永遠可見，淡藍色）*/
.table-scroll-wrap{ position:relative; }
.top-scroller{
  position:relative; height:14px; margin-bottom:8px;
  background:#EAF2FB; border-radius:8px; cursor:pointer;
  display:none;   /* 由 JS 依是否需捲動決定顯示 */
}
.top-scroller-thumb{
  position:absolute; top:2px; left:0; height:10px; min-width:40px;
  background:#AECBEA; border-radius:6px; cursor:grab;
  transition:background .15s ease;
}
.top-scroller-thumb:hover{ background:#5B93CE; }
.top-scroller-thumb.dragging{ background:#5B93CE; cursor:grabbing; }

/* ===== 登入頁（分割式版面）===== */
.login-split{
  min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--bg-app);
}
/* 左側品牌區 */
.login-brand{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 500px at 15% -10%, #1B4C82 0%, transparent 55%),
    linear-gradient(150deg, #0B2545 0%, #123A6B 55%, #1F5FA8 130%);
  color:#fff; padding:64px 60px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.login-brand-inner{ position:relative; z-index:2; max-width:440px; margin:auto 0; }
.login-brand-logo{ height:40px; margin-bottom:34px; }
.login-brand-title{ font-size:2.4rem; font-weight:700; letter-spacing:-.02em; margin:0 0 6px; line-height:1.15; }
.login-brand-sub{ font-size:.95rem; letter-spacing:.28em; text-transform:uppercase; color:#9FBEE0; margin:0; }
.login-brand-divider{ width:52px; height:3px; border-radius:3px; background:var(--ahoku-sky); margin:28px 0; }
.login-brand-points{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
.login-brand-points li{ display:flex; align-items:center; gap:13px; font-size:1rem; color:#DCE7F4; }
.login-brand-points i{ font-size:1.15rem; color:var(--ahoku-sky);
  background:rgba(46,125,209,.16); width:38px; height:38px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; }
.login-brand-foot{ position:relative; z-index:2; font-size:.85rem; color:#8FA9C8; letter-spacing:.02em; }
/* 裝飾光暈 */
.login-brand .glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:1; }
.login-brand .glow-1{ width:340px; height:340px; background:#2E7DD1; top:-90px; right:-80px; }
.login-brand .glow-2{ width:260px; height:260px; background:#1B4C82; bottom:-70px; left:-60px; opacity:.6; }

/* 右側表單區 */
.login-form-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 24px; position:relative;
}
.login-form-card{ width:100%; max-width:392px; }
.login-form-head{ text-align:center; margin-bottom:30px; }
.login-form-logo{ height:38px; margin-bottom:22px; display:none; }
.login-form-head h2{ font-size:1.6rem; font-weight:700; color:var(--gray-900); margin:0 0 6px; letter-spacing:-.01em; }
.login-form-head p{ color:var(--text-muted); font-size:.92rem; margin:0; }

.login-form .field{ position:relative; margin-bottom:16px; }
.login-form .field-icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--gray-400); font-size:1.05rem; pointer-events:none; z-index:2;
}
.login-form .form-control{
  height:50px; padding-left:42px; padding-right:42px;
  border-radius:12px; border:1.5px solid var(--gray-200); background:var(--gray-50);
  font-size:.95rem; transition:all .18s var(--ease);
}
.login-form .form-control:focus{
  background:#fff; border-color:var(--ahoku-sky);
  box-shadow:0 0 0 4px rgba(46,125,209,.13);
}
.login-form .field-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:var(--gray-400); padding:8px;
  cursor:pointer; z-index:2; line-height:1; border-radius:8px;
}
.login-form .field-toggle:hover{ color:var(--ahoku-blue); }
.login-submit{
  height:50px; border-radius:12px; font-size:1rem; font-weight:600; letter-spacing:.1em;
  margin-top:6px; box-shadow:0 6px 18px rgba(31,95,168,.28);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.login-submit:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(31,95,168,.34); }
.login-form-foot{
  margin-top:22px; text-align:center; font-size:.82rem; color:var(--text-muted);
  background:var(--gray-50); border:1px solid var(--border);
  border-radius:10px; padding:9px 12px;
}
.login-copyright{ margin:26px 0 0; font-size:.78rem; color:var(--gray-400); text-align:center; }

@media (max-width: 900px){
  .login-split{ grid-template-columns:1fr; }
  .login-brand{ display:none; }
  .login-form-logo{ display:inline-block; }
}

/* ===== 響應式 ===== */
@media (max-width: 768px){
  .sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  .sidebar.show{ transform:translateX(0); }
  .main-content{ margin-left:0; }
  .content-body{ padding:18px 16px 32px; }
}

/* ===== 橘色按鈕（AHOKU 橙）===== */
.btn-ahoku-orange{
  --bs-btn-color:#fff; --bs-btn-bg:#E67E00; --bs-btn-border-color:#E67E00;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#CF7000; --bs-btn-hover-border-color:#CF7000;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#CF7000; --bs-btn-active-border-color:#CF7000;
  background-color:#E67E00; border-color:#E67E00; color:#fff;
}
.btn-ahoku-orange:hover, .btn-ahoku-orange:focus{
  background-color:#CF7000; border-color:#CF7000; color:#fff;
}

/* ===== 捲軸美化（webkit）===== */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--gray-300); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--gray-400); background-clip:content-box; }
.sidebar ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); background-clip:content-box; }