/**
 * 工具類別 Utilities
 * 根據 cssfix1217.md 報告建立的共用樣式類別
 * 
 * 更新日期: 2025-12-25
 * NOTE: 已移除與 Tailwind CSS 重複的基礎類別
 *       如需基礎類別請使用 Tailwind：.hidden, .mt-4, .mb-4, .w-full, .rounded-full 等
 * 
 * 2025-12-25 優化清理：移除未使用的類別
 * - 移除 .force-visible, .force-inline-flex (未使用)
 * - 移除 .anim-delay-* (未使用)
 * - 移除 .alert-success, .alert-danger (未使用)
 * - 移除 .btn-light-blue (未使用)
 * - 移除 .th-width-* (未使用)
 * - 移除 .rounded-5/8/10/15/25 (未使用，可使用 Tailwind 替代)
 */

/* ============================================
   顯示控制 Display Control
   (自訂高優先級覆蓋類別)
   ============================================ */

/* 顯示為 inline-flex - 用於動態切換顯示狀態 (後台使用) */
.show-inline-flex {
    visibility: visible;
    opacity: 1;
    display: inline-flex;
}

/* Alpine.js x-cloak - 隱藏未初始化的元素，防止閃爍 */
[x-cloak] {
    display: none !important;
}

/* 防止 Alpine.js 初始化前 x-show 元素異常隱藏 - 預設可見 */
[x-show]:not([style*="display: none"]) {
    visibility: visible;
}

/* ============================================
   背景動畫 Background Animation
   (後台使用)
   ============================================ */

.bg-animate-gradient {
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

/* ============================================
   固定定位元素 Fixed Positioned Elements
   (後台使用)
   ============================================ */

.dropdown-fixed {
    z-index: 99999;
    position: fixed;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
}

/* ============================================
   提示訊息 Alert Messages
   (Bootstrap 風格的 alert 組件)
   保留 warning 和 info (PerformanceMonitor 使用)
   ============================================ */

.alert-warning {
    background: #fef3c7;
    border: 1px solid var(--warning-500, #f59e0b);
    color: #92400e;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.alert-info {
    background: var(--sky-100, #dbeafe);
    border: 1px solid var(--info-500, #3b82f6);
    color: #1e40af;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

/* ============================================
   螢幕閱讀器專用 Screen Reader Only
   (無障礙支援 - 必須保留)
   ============================================ */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================
   Grid 網格補充
   (Tailwind 精簡版缺少的網格類別)
   ============================================ */

.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

/* ============================================
   響應式佈局 Responsive Layout
   (桌面版預約頁面雙欄佈局)
   ============================================ */

@media (min-width: 1024px) {
    .lg\:grid {
        display: grid !important;
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2 !important;
    }

    .lg\:gap-8 {
        gap: 2rem !important;
    }

    .lg\:block {
        display: block !important;
    }

    .lg\:hidden {
        display: none !important;
    }

    .lg\:sticky {
        position: sticky !important;
    }

    .lg\:top-8 {
        top: 2rem !important;
    }

    .lg\:pb-8 {
        padding-bottom: 2rem !important;
    }
}

/* ============================================
   日曆按鈕樣式 Calendar Button Styles
   (修正按鈕文字顏色無法覆蓋的問題)
   ============================================ */

/* 可選日期 - 深色文字 */
.calendar-date-available {
    background-color: #f9fafb !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
}

.calendar-date-available:hover {
    background-color: #f3e8ff !important;
    color: #7c3aed !important;
}

/* 不可選日期 - 灰色文字 */
.calendar-date-disabled {
    background-color: #f3f4f6 !important;
    color: #6b7280 !important;
}

/* 已選日期 - 紫色背景白色文字 */
.calendar-date-selected {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
}