/* Public/assets/css/app.css */
/* === 全站主題 & 版型 === */
:root{
  /* 主題色與背景 */
  --wm-primary: #0d6efd;
  --wm-bg: #f6f7fb;

  /* 版型變數 */
  --wm-topbar-height: 56px;   /* Bootstrap 預設 navbar 高度 */
  --wm-sidebar-width: 220px;  /* 側欄寬度（桌機） */

  /* 邊框色 */
  --wm-border: #dee2e6;
}

html, body { height: 100%; }
body { background: var(--wm-bg); }

/* ========== 版面容器 ========== */
.app-layout{
  min-height: 100vh;
  display: block;             /* 手機先單欄 */
}

/* 置頂導覽列（你有 .topbar 元素） */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--wm-topbar-height);
  background: #fff;
  border-bottom: 1px solid var(--wm-border);
  z-index: 1030;              /* 高於內容與表格表頭 */
}

/* 側邊欄（md 以上顯示；你已用 d-none d-md-block 控制可見性） */
.sidebar{
  background: #fff;
  border-right: 1px solid var(--wm-border);
}

/* 主內容：預設（手機）不留左側空間，只留上方 topbar 空間 */
.main{
  padding-top: calc(var(--wm-topbar-height) + 12px);
  min-height: 100vh;
}

/* 桌機以上：固定側欄 + 主內容讓位 */
@media (min-width: 768px){
  .sidebar{
    position: fixed;
    top: var(--wm-topbar-height);
    left: 0;
    bottom: 0;
    width: var(--wm-sidebar-width);
    overflow-y: auto;
  }
  .main{
    margin-left: var(--wm-sidebar-width);
  }
}

/* ========== 元件微調 ========== */

/* 側欄選單啟用樣式（沿用你的色系） */
.sidebar .nav-link.active{
  background: rgba(13,110,253,.1);
  color: var(--wm-primary);
  border-radius: .5rem;
}

/* 表頭排序連結樣式（沿用你原有設定） */
.table thead th a.sort{ text-decoration: none; color: inherit; }
.table thead th a.sort:hover{ text-decoration: underline; }

/* （已移除 sticky 規則：thead 與表格不再分離） */

/* 容器間距：避免兩層 padding 疊太厚 */
.main .container-fluid{
  padding-left: 16px;
  padding-right: 16px;
}

/* 標題＋篩選列對齊（若有 .align-items-center 已可，但這裡強化） */
.page-title-row{ align-items: center; }

/* 篩選列在超寬螢幕避免過度拉伸，可視需要保留 */
@media (min-width: 1200px){
  .filters-wrap{
    max-width: 980px;
    margin-left: auto;
  }
}

/* ========== 小細節 ========== */

/* 讓卡片看起來更乾淨 */
.card{ border-radius: .5rem; }

/* 修正 .table-responsive 的層級（非高度相關） */
.table-responsive{ position: relative; z-index: 1; }

/* 讓頁面頂部不會被 topbar 遮到的情況（萬一有沒有放在 .main 的內容） */
.mt-under-topbar{ margin-top: var(--wm-topbar-height); }

/* 可選：讓滾動條在側欄更不突兀（僅支援新瀏覽器） */
.sidebar{ scrollbar-gutter: stable; }

/* === 表頭高度修正（強制與表身一致）=== */
.table > :not(caption) > * > th {
  padding: 0.75rem 0.5rem !important;
  vertical-align: middle !important;
}