/**
 * 手機版篩選器展開/收合樣式模板
 * 可重用的 CSS 樣式，適用於所有頁面
 * 
 * 使用方式：
 * 1. 在 HTML 中引入此 CSS 文件
 * 2. 確保篩選器區域有對應的 ID 和類別
 * 3. 使用 MobileFilterToggle JavaScript 模組處理邏輯
 * 
 * HTML 結構範例：
 * ```html
 * <button class="filter-toggle-btn" id="filter-toggle-btn" aria-label="切換篩選器">
 *   <i class="fas fa-chevron-down"></i>
 * </button>
 * <fieldset class="filters-section" id="filters-section" role="group">
 *   <!-- 篩選器內容 -->
 * </fieldset>
 * ```
 */

/* ===== 篩選器切換按鈕（桌面版隱藏） ===== */
.filter-toggle-btn {
  display: none;
}

.filter-toggle-btn.icon-only-btn {
  display: none !important;
}

.filter-toggle-btn.icon-only-btn.btn-primary,
.filter-toggle-btn.btn-primary.icon-only-btn {
  flex-shrink: 0 !important;
}

/* ===== 桌面版：隱藏手機版篩選器容器 ===== */
/* 品牌頁面的手機版篩選器容器在桌面版時應該完全隱藏 */
/* 注意：這個規則在手機版媒體查詢外，所以只在桌面版（>768px）生效 */
@media (min-width: 769px) {
  #brand-filters-section {
    display: none !important;
  }
}

/* 操作人員介面的切換按鈕使用 icon-only-btn 樣式（在 operator-specific.css 中定義） */
/* 寫手派發介面的切換按鈕使用以下樣式 */
.filter-toggle-btn:not(.icon-only-btn) {
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.filter-toggle-btn:not(.icon-only-btn):hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
}

.filter-toggle-btn:not(.icon-only-btn) i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.filter-toggle-btn:not(.icon-only-btn).active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
}

.filter-toggle-btn:not(.icon-only-btn).active i {
  transform: rotate(180deg);
}

/* ===== 手機版樣式（768px 以下） ===== */
@media (max-width: 768px) {
  /* 顯示切換按鈕 */
  .filter-toggle-btn {
    display: flex !important;
  }

  .filter-toggle-btn.icon-only-btn.btn-primary,
  .filter-toggle-btn.btn-primary.icon-only-btn {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
  }

  .filter-toggle-btn.icon-only-btn.btn-primary:hover,
  .filter-toggle-btn.btn-primary.icon-only-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: white !important;
  }

  .filter-toggle-btn.icon-only-btn.btn-primary i,
  .filter-toggle-btn.btn-primary.icon-only-btn i {
    font-size: 14px !important;
    transition: transform 0.3s ease;
  }

  .filter-toggle-btn.icon-only-btn.btn-primary.active,
  .filter-toggle-btn.btn-primary.icon-only-btn.active {
    background: rgba(255, 255, 255, 0.2) !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: white !important;
  }

  .filter-toggle-btn.icon-only-btn.btn-primary.active i,
  .filter-toggle-btn.btn-primary.icon-only-btn.active i {
    transform: rotate(180deg);
  }
  
  /* 寫手派發介面和寫手檢視介面的切換按鈕位置調整 */
  .filter-toggle-btn:not(.icon-only-btn) {
    margin-left: auto;
    margin-right: 0;
    flex-shrink: 0;
  }

  /* 頂部工具列改為可換行，讓篩選器可以顯示在下方 */
  .top-bar,
  .writer-assign-top-bar,
  .writer-top-bar,
  .operator-toolbar {
    flex-wrap: wrap;
  }

  /* 篩選器區域：手機版預設隱藏，展開後顯示在色塊下方 */
  /* 支援通用類別 .filters-section 和特定類別（如 .writer-assign-filters、.writer-filters、#brand-filters-section） */
  .filters-section,
  .writer-assign-filters,
  .writer-filters,
  #brand-filters-section {
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 20px 16px;
    width: 100% !important; /* 強制 100% 寬度，確保換行 */
    flex-basis: 100% !important; /* 強制佔滿整行，往下推 */
    background: rgba(30, 40, 50, 0.95) !important;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    order: 999; /* 確保在最後 */
  }

  /* 篩選器展開狀態 */
  .filters-section.expanded,
  .writer-assign-filters.expanded,
  .writer-filters.expanded,
  #brand-filters-section.expanded {
    display: flex !important;
  }

  /* 篩選器群組：垂直排列 */
  .filters-section .filter-group,
  .writer-assign-filters .filter-group,
  .writer-filters .filter-group,
  #brand-filters-section .filter-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  /* 標籤文字在上方 */
  .filters-section .filter-label,
  .writer-assign-filters .filter-label,
  .writer-filters .filter-label,
  #brand-filters-section .filter-label,
  #brand-filters-section .brand-filter-label-white {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
    margin-right: 0;
    width: 100%;
  }

  /* 下拉選單樣式 - 確保品牌頁面手機版三個篩選器寬度完全一致 */
  .filters-section .filter-select,
  .filters-section select,
  .writer-assign-filters .filter-select,
  .writer-assign-filters select,
  .writer-filters .filter-select,
  .writer-filters select,
  #brand-filters-section .filter-select,
  #brand-filters-section .brand-filter-select-white {
    width: 100%;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 38px;
    padding: 8px 12px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    color: #333;
    box-sizing: border-box;
  }
  
  /* 月份篩選按鈕樣式（品牌頁面專用）- 與下拉選單完全一致，確保寬度同步 */
  #brand-filters-section .month-filter-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 38px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    color: #333 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
  }
  
  /* 月份篩選按鈕內部文字對齊 */
  #brand-filters-section .month-filter-btn span {
    flex: 1;
    text-align: left;
  }
  
  /* 月份篩選按鈕圖標樣式 */
  #brand-filters-section .month-filter-btn i {
    font-size: 12px !important;
    color: #666 !important;
    transition: transform 0.2s ease !important;
    margin-left: 8px;
    flex-shrink: 0;
  }
  
  /* 月份篩選按鈕展開時圖標旋轉 */
  #brand-filters-section .month-filter-btn[aria-expanded="true"] i {
    transform: rotate(180deg) !important;
  }
  
  /* 月份篩選按鈕懸停效果 - 與下拉選單一致 */
  #brand-filters-section .month-filter-btn:hover {
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) translateZ(0) !important;
    background: white !important;
  }
  
  /* 月份篩選按鈕聚焦效果 - 與下拉選單一致 */
  #brand-filters-section .month-filter-btn:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
    background: white !important;
  }
}

/* ===== 更小螢幕（480px 以下） ===== */
@media (max-width: 480px) {
  .filter-toggle-btn {
    width: 28px;
    height: 28px;
  }

  .filter-toggle-btn i {
    font-size: 12px;
  }

  .filters-section,
  .writer-assign-filters,
  .writer-filters,
  #brand-filters-section {
    padding: 16px 12px;
    gap: 12px;
  }

  .filters-section .filter-label,
  .writer-assign-filters .filter-label,
  .writer-filters .filter-label,
  #brand-filters-section .filter-label,
  #brand-filters-section .brand-filter-label-white {
    font-size: 12px;
  }

  .filters-section .filter-select,
  .filters-section select,
  .writer-assign-filters .filter-select,
  .writer-assign-filters select,
  .writer-filters .filter-select,
  .writer-filters select,
  #brand-filters-section .filter-select,
  #brand-filters-section .brand-filter-select-white,
  #brand-filters-section .month-filter-btn {
    height: 36px;
    font-size: 13px;
  }
}