/* styles/theme.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* 元件樣式 */
@import url('./components/query-filter.css');

/* 全局樣式設定 */

/* 隱藏類別 */
.hidden {
  display: none !important;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
}

/* 全局表格標題樣式 */
th {
  color: rgba(123, 123, 123, 0.8) !important;
  font-weight: normal !important;
}

/* 表格內容文字不要粗體 */
td {
  font-weight: normal !important;
}

/* Material Icons 樣式 */
md-icon {
  font-family: 'Material Symbols Outlined';
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
}

/* 自定義 Material Design 3 列表子標題 */
.list-subheader {
  font-size: 0.75rem;
  line-height: 2rem;
  letter-spacing: 0.025rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  padding-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

/* 選單文字大小 */
md-list-item div[slot="headline"] {
  font-size: 14px;
}

/* 卡片樣式 */
.bg-surface, .bg-surface-container-low {
  background-color: #ffffff !important;
}

/* MD3 卡片圓角規範 - 12dp */
.rounded-xl {
  border-radius: 24px !important;
}

/* 統一 Dialog 背景色為白色 */
md-dialog {
  --md-dialog-container-color: #ffffff;
  /* 確保 Dialog 正確定位在主內容區 */
  position: fixed;
}

/* 次要按鈕文字顏色調整 - 降低視覺重要性 */
md-outlined-button {
  --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-button-icon-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-button-focus-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-button-focus-icon-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-button-hover-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-button-hover-icon-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-button-pressed-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-button-pressed-icon-color: var(--md-sys-color-on-surface-variant);
}

md-text-button {
  --md-text-button-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-text-button-icon-color: var(--md-sys-color-on-surface-variant);
  --md-text-button-focus-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-text-button-focus-icon-color: var(--md-sys-color-on-surface-variant);
  --md-text-button-hover-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-text-button-hover-icon-color: var(--md-sys-color-on-surface-variant);
  --md-text-button-pressed-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-text-button-pressed-icon-color: var(--md-sys-color-on-surface-variant);
}

/* 表格行 hover 效果 */
tbody tr:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-surface-container) 50%, transparent);
}

tbody tr[data-enabled="false"]:hover {
  background-color: transparent;
  cursor: default;
}

/* 頁面頂部 Progress 樣式 */
#page-progress {
  height: 4px;
}

#page-progress md-linear-progress {
  --md-linear-progress-track-height: 4px;
  --md-linear-progress-active-indicator-height: 4px;
  --md-linear-progress-track-color: transparent;
  --md-linear-progress-indicator-color: var(--md-sys-color-primary);
}

/* ========================================
   Z-Index 層級設定
   ======================================== */

/* Sidebar - 中等層級 */
aside {
  z-index: 1000;
}

/* Drawer 和 Dialog 遮罩 - 最高層級，覆蓋所有內容 */
.query-filter-drawer {
  z-index: 1200;
}

.drawer-backdrop {
  z-index: 1100;
  /* 模糊玻璃效果 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dialog 遮罩透過 JavaScript 動態調整為 z-index: 1200 */

/* Dialog 本體 - 中等層級 */
md-dialog {
  z-index: 600;
}

/* Mobile overlay - 移動端選單遮罩 */
#overlay {
  z-index: 800;
}

/* ========================================
   佈局架構設定
   ======================================== */

/* 確保 Main Content 區域正確定位 */
main {
  position: relative;
  overflow-x: hidden;
}

/* ========================================
   設定 Dialog 共用樣式
   ======================================== */

/* 設定 Dialog 尺寸 */
#settings-dialog {
  width: 900px;
  max-width: 95vw;
  height: 700px;
  max-height: 85vh;
  z-index: 600;
}

/* 垂直導航列表容器 */
.vertical-nav-container {
  display: flex;
  gap: 32px;
  min-height: 600px;
  padding: 0;
  margin: 0;
}

/* 左側導航列表 */
.nav-list {
  min-width: 240px;
}

/* 設定導航列表樣式 */
.settings-nav-list {
  --md-list-container-color: transparent;
}

/* 導航項目樣式 */
.nav-item {
  margin-bottom: 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}

.nav-item:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

.nav-item.active {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.nav-item.active md-icon {
  color: var(--md-sys-color-on-secondary-container);
}

/* 修正 md-list-item 內容對齊 */
.nav-item [slot="headline"] {
  text-align: left;
  width: 100%;
}

.nav-item [slot="start"] {
  margin-right: 16px;
}

/* 內容區域 */
.tab-content {
  flex: 1;
}

/* 內容標題區域 */
.content-header {
  margin-bottom: 24px;
}

.content-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin: 0 0 12px 0;
}

.content-divider {
  height: 1px;
  background-color: var(--md-sys-color-outline-variant);
  width: 100%;
  border: none;
  margin: 0;
}

/* 內容主體 */
.content-body {
  /* 預留給內容區域使用 */
}

/* ========================================
   會員搜尋結果下拉選單樣式
   ======================================== */

/* 搜尋結果下拉選單 */
.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 4px;
}

/* 搜尋結果項目 */
.search-result-item {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background-color: var(--md-sys-color-surface-container-low);
}

/* 無結果項目样式 */
.search-result-item.no-result {
  opacity: 0.7;
}

.search-result-item.no-result:hover {
  background-color: transparent;
  cursor: default;
}



/* 搜尋輸入框容器 */
.member-search-container {
  position: relative;
}

.search-input-wrapper {
  position: relative;
}

/* 可點擊卡片樣式 */
.condition-card,
.action-card {
  cursor: pointer;
}