/**
 * layout-unified.css
 * 整合版面佈局相關的修正樣式
 * 包含: layout-fix.css, sidebar-fix.css, alignment-fix.css
 * 
 * 將分散在多個檔案的樣式集中管理，提高可維護性
 */

/*=======================
  1. 主要內容區域佈局
=======================*/

/* 調整主內容區域，確保與固定頭部有足夠間距 */
main {
  /* 確保內容區域不被頭部遮擋 */
  padding-top: 20px; /* 減少頂部填充，確保與sidebar對齊 */
  position: relative;
}

/* main 左右 padding 微調（比 Tailwind px-4 / md:px-6 各少 5px）*/
.main-pad-tweak {
  padding-left: 6px;  /* 原16px - 10px */
  padding-right: 6px; /* 原16px - 10px */
}

@media (min-width: 768px) {
  .main-pad-tweak {
    padding-left: 9px;  /* 原24px - 15px（PC 再減少 5px） */
    padding-right: 9px; /* 原24px - 15px（PC 再減少 5px） */
  }
}

/* 捲軸頂部空間，確保捲軸箭頭可見 */
main > div:first-child {
  position: relative;
  height: 12px; /* 減少高度 */
  margin-bottom: 0; /* 移除邊距 */
}

/* 內容容器設置 */
#contentContainer {
  /* 基本內容設定 */
  position: relative;
  padding-top: 0; /* 移除頂部內邊距 */
  border-radius: 8px;
  margin-top: 0; /* 調整內容區塊下移量，確保與sidebar對齊 */
  
  /* 捲軸相關設定 */
  overflow-y: auto;
  scrollbar-width: auto; /* Firefox */
}

/* Webkit 瀏覽器的捲軸設定 */
#contentContainer::-webkit-scrollbar {
  width: auto; /* 使用瀏覽器預設寬度 */
}

/* 確保捲軸軌道有足夠的頂部間距 */
#contentContainer::-webkit-scrollbar-track {
  margin-top: 12px;
}

/* 明亮模式下的捲軸顏色設定 */
html:not(.dark) #contentContainer {
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05); /* Firefox */
}

html:not(.dark) #contentContainer::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2); /* Webkit - 滾動條滑塊 */
}

html:not(.dark) #contentContainer::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05); /* Webkit - 滾動條軌道 */
}

/* 暗黑模式下的捲軸顏色設定 */
html.dark #contentContainer {
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05); /* Firefox */
}

html.dark #contentContainer::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2); /* Webkit - 滾動條滑塊 */
}

html.dark #contentContainer::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.05); /* Webkit - 滾動條軌道 */
}

/* 內容對齊類 - 確保與側邊欄頂部對齊 */
.content-alignment #contentContainer {
  margin-top: 5px; /* 調整內容容器頂部間距 */
}

/*=======================
  2. 側邊欄樣式與對齊
=======================*/

/* 使 sidebar 和 contentContainer 在不同螢幕尺寸下保持對齊 */
#sidebar {
  /* 固定位置設定 */
  position: fixed;
  top: 85px !important; /* 與header底部對齊，往下移動5px以對齊內容區塊 */
  height: calc(100vh - 85px); /* 確保高度剛好填充剩餘空間，調整了5px */
  padding-top: 20px; /* 新增頂部內邊距 */
  z-index: 20;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.3s ease;
  
  /* 處理分隔線 */
  border-right: 1px solid rgba(229, 231, 235, 0.3);
}

/* 處理暗黑模式下的分隔線 */
html.dark #sidebar {
  border-right: 1px solid rgba(55, 65, 81, 0.6);
}

/*=======================
  3. 響應式調整
=======================*/

/* 中小螢幕調整 */
@media (max-width: 768px) {
  #sidebar {
    top: 69px !important; /* 手機版header較小，調整對應的頂部間距，同樣往下移動5px */
    height: calc(100vh - 69px);
  }
  
  .content-alignment #contentContainer {
    margin-top: 16px; /* 手機版減少頂部間距 */
  }
}

/* 大螢幕調整 */
@media (min-width: 1280px) {
  #sidebar {
    /* 大螢幕可以增加寬度 */
    width: 280px;
  }
}