/* ============================================================
   site.css — EIP 全站版面與元件外觀
   依賴 tokens.css（須在本檔之前載入）。在 bootstrap.min.css 之後載入以覆寫。
   ============================================================ */

/* ---------- 基礎 ---------- */
html, body { height: 100%; }
body {
  font-family: var(--eip-font-sans);
  background-color: var(--eip-bg);
  color: var(--eip-text);
  font-size: 15px;
  line-height: 1.6;
}
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- 版面骨架 ---------- */
.eip-layout { display: flex; min-height: 100vh; }
.eip-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

/* 頂列 */
.eip-topbar {
  height: var(--eip-topbar-h);
  background: var(--eip-surface);
  border-bottom: 1px solid var(--eip-border);
  box-shadow: var(--eip-shadow);
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center;
  padding: 0 1rem; gap: .75rem;
}
.eip-topbar .eip-brand {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.1rem; color: var(--eip-primary);
  white-space: nowrap;
}
.eip-topbar .eip-brand i { font-size: 1.35rem; }
.eip-topbar .eip-search { max-width: 320px; flex: 1 1 220px; }
.eip-topbar .eip-search .form-control { background: var(--eip-bg); border-color: var(--eip-border); }

/* 側邊欄 */
.eip-sidebar {
  width: var(--eip-sidebar-w);
  background: var(--eip-surface);
  border-right: 1px solid var(--eip-border);
  flex-shrink: 0;
  display: flex; flex-direction: column;
}
.eip-sidebar .eip-sidebar-head {
  height: var(--eip-topbar-h);
  display: flex; align-items: center; gap: .5rem;
  padding: 0 1.1rem;
  border-bottom: 1px solid var(--eip-border);
  font-weight: 700; color: var(--eip-primary); font-size: 1.1rem;
}
/* overscroll-behavior:contain：選單捲到邊界時不外溢帶動整頁（避免與主內容捲動互相牽動）。 */
.eip-sidebar-nav { padding: .75rem .6rem; overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }

/* 選單項 */
.eip-nav .nav-link {
  color: var(--eip-text);
  border-radius: var(--eip-radius-sm);
  padding: .5rem .75rem;
  display: flex; align-items: center; gap: .6rem;
  font-size: .92rem;
}
.eip-nav .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; color: var(--eip-text-muted); }
.eip-nav .nav-link:hover { background: var(--eip-primary-soft); color: var(--eip-primary); }
.eip-nav .nav-link:hover i { color: var(--eip-primary); }
.eip-nav .nav-link.active { background: var(--eip-primary); color: var(--eip-on-primary); font-weight: 600; }
.eip-nav .nav-link.active i { color: var(--eip-on-primary); }

/* 選單群組（accordion 風格）：分類標題加大字級並上底色，與葉節點連結區隔 */
.eip-nav .eip-group-toggle {
  cursor: pointer; font-weight: 600;
  text-transform: none; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--eip-radius-sm);
}
/* 第一層分類（專案管理、員工專區…）：主色底加強（2026-07-08 使用者需求：比照新增頁①區塊濃度） */
.eip-nav > .eip-group > .eip-group-toggle {
  font-size: .95rem; font-weight: 700; color: #2d4b85;
  background: rgba(78, 121, 199, .22);
  border-left: 4px solid #4e79c7;
  padding: .55rem .75rem;
}
/* 第二層可展開分類（申請表單、工作管理…）：淺色底＋細框 */
.eip-nav .eip-subnav .eip-group-toggle {
  font-size: .9rem; color: var(--eip-text);
  background: var(--eip-surface-alt);
  border: 1px solid var(--eip-border);
  padding: .45rem .65rem;
}
.eip-nav .eip-group { margin-top: .4rem; }
.eip-nav > .eip-group:first-child { margin-top: 0; }
.eip-nav .eip-group-toggle .chev { transition: transform .2s ease; font-size: .8rem; }
.eip-nav .eip-group.collapsed .chev { transform: rotate(-90deg); }
.eip-nav .eip-subnav { margin-left: .25rem; }

/* 主內容 */
.eip-main { flex: 1 1 auto; padding: 1.25rem 1.5rem 2.5rem; }

/* 麵包屑 */
.eip-breadcrumb { font-size: .85rem; margin-bottom: 1rem; }
.eip-breadcrumb .breadcrumb { margin: 0; }
.eip-breadcrumb a { color: var(--eip-text-muted); }
.eip-breadcrumb .active { color: var(--eip-text); }

/* 頁首（標題 + 工具列） */
.eip-page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1.1rem;
}
.eip-page-header h1 { font-size: 1.4rem; font-weight: 700; margin: 0; color: var(--eip-text); }
.eip-page-header .eip-page-tools { display: flex; gap: .5rem; flex-wrap: wrap; }

/* footer */
.eip-footer {
  margin-top: auto; padding: .85rem 1.5rem;
  border-top: 1px solid var(--eip-border);
  color: var(--eip-text-light); font-size: .82rem; background: var(--eip-surface);
}

/* ---------- 卡片 ---------- */
.card, .eip-card {
  border: 1px solid var(--eip-border);
  border-radius: var(--eip-radius);
  box-shadow: var(--eip-shadow);
  background: var(--eip-surface);
}
/* 卡片標題列預設帶主色底（2026-07-08 使用者需求：所有表單區塊標題列以底色標示） */
.card .card-header, .eip-card .card-header {
  background: rgba(79, 111, 155, .12);
  border-bottom: 1px solid var(--eip-border);
  font-weight: 600; color: var(--eip-primary);
}

/* 儀表板統計卡 */
.eip-stat { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; }
.eip-stat .eip-stat-icon {
  width: 48px; height: 48px; border-radius: var(--eip-radius);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: var(--eip-primary-soft); color: var(--eip-primary); flex-shrink: 0;
}
.eip-stat .eip-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.eip-stat .eip-stat-label { color: var(--eip-text-muted); font-size: .85rem; }

/* ---------- 按鈕 ---------- */
.btn { border-radius: var(--eip-radius-sm); font-size: .9rem; }
.btn-primary {
  --bs-btn-bg: var(--eip-primary); --bs-btn-border-color: var(--eip-primary);
  --bs-btn-hover-bg: var(--eip-primary-hover); --bs-btn-hover-border-color: var(--eip-primary-hover);
  --bs-btn-active-bg: var(--eip-primary-active); --bs-btn-active-border-color: var(--eip-primary-active);
  --bs-btn-disabled-bg: var(--eip-primary); --bs-btn-disabled-border-color: var(--eip-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--eip-primary); --bs-btn-border-color: var(--eip-primary);
  --bs-btn-hover-bg: var(--eip-primary); --bs-btn-hover-border-color: var(--eip-primary);
  --bs-btn-active-bg: var(--eip-primary-active); --bs-btn-active-border-color: var(--eip-primary-active);
}

/* ---------- 表格 ---------- */
.eip-table { background: var(--eip-surface); width: 100%; }
.eip-table > thead > tr > th {
  background: var(--eip-primary-soft); color: var(--eip-text);
  font-weight: 600; font-size: .85rem; border-bottom: 1px solid var(--eip-border-strong);
  white-space: nowrap; vertical-align: middle;
}
.eip-table > tbody > tr > td { vertical-align: middle; font-size: .9rem; }
.table-hover > tbody > tr:hover > * { background-color: var(--eip-primary-soft); }
.eip-table .eip-row-actions { white-space: nowrap; }
.eip-table .eip-row-actions .btn { padding: .2rem .45rem; }
/* 統計列表：不同年度（或分組）間的淺灰分隔線 */
.eip-year-sep > td { border-top: 1px solid var(--eip-border); }
/* 申請人請假統計元件：表頭與資料間的淺灰分隔線 */
.eip-applicant-stats thead > tr > th { border-bottom: 1px solid var(--eip-border); }
/* 查詢表格工具列：搜尋靠左、每頁筆數靠右（桌機）；行動裝置沿用 DataTables 預設置中。
   dom 順序已於 eip-grid.js 對調（f 左欄、l 右欄），此處僅修正欄內文字對齊。 */
@media (min-width: 768px) {
  div.dataTables_wrapper div.dataTables_filter { text-align: left; }
  div.dataTables_wrapper div.dataTables_length { text-align: right; }
}

/* ---------- 表單 ---------- */
.form-label { font-weight: 600; font-size: .88rem; color: var(--eip-text); margin-bottom: .3rem; }
.form-label .eip-required, .star { color: var(--eip-danger); margin-right: .15rem; }
.form-control, .form-select {
  border-color: var(--eip-border-strong); font-size: .92rem; border-radius: var(--eip-radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--eip-primary);
  box-shadow: 0 0 0 .2rem rgba(79, 111, 155, .18);
}
.eip-form-section-title {
  font-weight: 700; color: var(--eip-primary); font-size: 1rem;
  border-left: 3px solid var(--eip-primary); padding-left: .6rem; margin: 1.25rem 0 .85rem;
}

/* ---------- 徽章（狀態） ---------- */
.eip-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
}
.eip-badge--success { background: var(--eip-success-soft); color: var(--eip-success); }
.eip-badge--danger  { background: var(--eip-danger-soft);  color: var(--eip-danger); }
.eip-badge--warning { background: var(--eip-warning-soft); color: var(--eip-warning); }
.eip-badge--info    { background: var(--eip-info-soft);    color: var(--eip-info); }
.eip-badge--muted   { background: #eef1f5; color: var(--eip-text-muted); }

/* ---------- 搜尋列 ---------- */
.eip-searchbar {
  background: var(--eip-surface); border: 1px solid var(--eip-border);
  border-radius: var(--eip-radius); padding: .9rem 1rem; margin-bottom: 1rem;
  box-shadow: var(--eip-shadow);
}
.eip-searchbar .row { align-items: end; }

/* ---------- Select2 / flatpickr 對齊 Bootstrap 高度 ---------- */
.select2-container--bootstrap-5 .select2-selection { border-color: var(--eip-border-strong); }

/* ---------- 登入頁 ---------- */
.eip-login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef2f8 0%, #e7eef0 100%); padding: 1rem;
}
.eip-login-card {
  width: 100%; max-width: 400px; background: var(--eip-surface);
  border-radius: var(--eip-radius-lg); box-shadow: var(--eip-shadow-lg);
  padding: 2.25rem 2rem; border: 1px solid var(--eip-border);
}
.eip-login-card .eip-login-brand { text-align: center; margin-bottom: 1.5rem; }
.eip-login-card .eip-login-brand i { font-size: 2.5rem; color: var(--eip-primary); }
.eip-login-card .eip-login-brand h1 { font-size: 1.35rem; font-weight: 700; margin-top: .5rem; color: var(--eip-text); }
.eip-login-card .eip-login-brand p { color: var(--eip-text-muted); font-size: .85rem; margin: 0; }

/* ---------- 響應式 ---------- */
@media (max-width: 991.98px) {
  .eip-sidebar {
    position: fixed; top: 0; left: 0; height: 100%; z-index: 1045;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: var(--eip-shadow-lg);
  }
  .eip-sidebar.show { transform: translateX(0); }
  .eip-backdrop {
    position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 1044; display: none;
  }
  .eip-backdrop.show { display: block; }
  .eip-main { padding: 1rem; }
}
@media (min-width: 992px) {
  .eip-sidebar-toggle { display: none; }
  /* 桌機：側欄黏性且自身捲動，與主內容獨立——右側長內容捲動或換頁時，
     選單不隨之移動、也不跳回頂端（捲動位置與展開狀態由 site.js 以 sessionStorage 記憶）。
     align-self:flex-start 必要：否則 flex 容器會把側欄 stretch 到內容滿高而使 sticky 失效。
     .eip-sidebar-nav 既有 overflow-y:auto + flex:1 於此固定高度下即自成捲動區。 */
  .eip-sidebar {
    position: sticky; top: 0;
    height: 100vh; align-self: flex-start;
  }
}

/* 側邊欄收合（桌機） */
.eip-layout.eip-sidebar-collapsed .eip-sidebar { width: 0; border-right: 0; overflow: hidden; }

/* 工具 */
.eip-cursor-pointer { cursor: pointer; }
.eip-text-muted { color: var(--eip-text-muted); }

/* ---------- 表單區塊色塊 ----------
   2026-07-08 使用者需求（色塊規則改版）：以「表單類別」決定單一主色，同一表單各區塊統一色：
     維護類與其他維護畫面 → --primary（藍）；專案類申請 → --info（藍綠）；
     其他申請／報支／請假 → --success（綠）；查詢類 → 不套 section，維持預設 .card-header 淡色。
   檢視／審核／email 一律兩色：申請資訊區＝該表單原申請色、審核資訊區＝--warning（土黃）。
   四個 modifier 色值不變，僅改套用規則。 */
.eip-form-section { border-left: 4px solid var(--eip-primary); }
.eip-form-section > .card-header {
  font-weight: 700; background: var(--eip-bg);
  display: flex; align-items: center; gap: .5rem;
}
.eip-form-section--primary { border-left-color: #4e79c7; }
.eip-form-section--primary > .card-header { color: #2d4b85; background: rgba(78, 121, 199, .22); }
.eip-form-section--info { border-left-color: #2aa4bf; }
.eip-form-section--info > .card-header { color: #135f70; background: rgba(42, 164, 191, .22); }
.eip-form-section--success { border-left-color: #4c9e6b; }
.eip-form-section--success > .card-header { color: #2b5e3e; background: rgba(76, 158, 107, .22); }
.eip-form-section--warning { border-left-color: #d9a441; }
.eip-form-section--warning > .card-header { color: #7d5c1e; background: rgba(217, 164, 65, .26); }

/* 計算結果的請假時數統計卡：字體與顏色加強（2026-07-08 使用者需求） */
.eip-calc-total { border-color: #4c9e6b; background: rgba(76, 158, 107, .06); }
.eip-calc-total .eip-balance-card__value { font-size: 1.9rem; font-weight: 800; color: #2b7a4b; }
.eip-calc-total .eip-balance-card__unit { font-size: 1rem; color: #2b7a4b; }
.eip-calc-total .eip-balance-card__sub { font-size: 1rem; font-weight: 700; color: #345c44; }
/* 主值「N 天 M 小時」的小時段：稍小於天數字級（2026-07-11 通用需求） */
.eip-calc-total .eip-calc-hours { font-size: 1.35rem; font-weight: 800; margin-left: 4px; }

/* ---------- 首頁同仁請假行事曆（2026-07-11 通用需求 3.1；同日改版：單週＋上下週切換） ---------- */
.eip-lc { table-layout: fixed; min-width: 500px; font-size: .85rem; }
.eip-lc th { text-align: center; background: var(--eip-primary-soft); font-weight: 600; white-space: nowrap; line-height: 1.3; }
/* 格高隨內容自適應（人少時不留大片空白），僅保留小幅下限 */
.eip-lc td { vertical-align: top; height: 2.2rem; padding: .35rem .45rem; }
.eip-lc .eip-lc-person { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eip-lc .eip-lc-sym { color: var(--eip-primary); margin-right: 2px; }
.eip-lc th.eip-lc-today { background: rgba(78, 121, 199, .3); }
.eip-lc td.eip-lc-today { background: rgba(78, 121, 199, .08); }
.eip-lc th.eip-lc-holiday { background: rgba(192, 107, 107, .16); color: #a05252; }
.eip-lc td.eip-lc-holiday { background: rgba(192, 107, 107, .06); }
.eip-lc details summary { cursor: pointer; color: var(--eip-text-muted); font-size: .8rem; }

/* 統計卡「待我審核」數字連結（>0 時），點選捲動至下方待我審核區（#pendingSection） */
.eip-stat .eip-stat-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.eip-stat .eip-stat-link:hover { color: var(--eip-primary); }
#pendingSection { scroll-margin-top: calc(var(--eip-topbar-h) + 12px); }
html { scroll-behavior: smooth; }

/* ---------- 假期剩餘卡片 ---------- */
.eip-balance-card {
  border: 1px solid var(--eip-border); border-radius: .5rem;
  background: var(--eip-surface); padding: .75rem 1rem;
}
.eip-balance-card__title { font-size: .85rem; color: var(--eip-text-muted, #6c757d); }
.eip-balance-card__value { font-size: 1.6rem; font-weight: 700; line-height: 1.3; }
.eip-balance-card__unit { font-size: .8rem; font-weight: 400; margin-left: 2px; color: var(--eip-text-muted, #6c757d); }
.eip-balance-card__sub { font-size: .78rem; color: var(--eip-text-muted, #6c757d); margin-top: .3rem; }

/* ---------- 選單權限預覽樹（eip-menu-tree.js：Users_Mod / Users_View） ---------- */
.eip-mtree { list-style: none; margin: 0; padding-left: 0; }
.eip-mtree .eip-mtree { padding-left: 1.4rem; }             /* 巢狀縮排 */
.eip-mtree-item { padding: .12rem 0; font-size: .9rem; }
.eip-mtree-item > i { width: 1.2rem; text-align: center; }
.eip-mtree-off, .eip-mtree-off .eip-mtree-name, .eip-mtree-off > i { color: var(--eip-text-light) !important; }
.eip-mtree-denied .eip-mtree-name { text-decoration: line-through; color: var(--eip-danger); }
.eip-mtree-denied > i { color: var(--eip-danger); }
tr.eip-mtree-detail > td.eip-mtree-cell {
  background: var(--eip-surface-alt);
  border-left: 3px solid var(--eip-primary);
  padding: .75rem 1rem;
}