/**
 * SalonEase - 共用樣式（過渡期 - 正在逐步棄用）
 *
 * 注意：此檔案目前仍包含大量 Tailwind @apply 樣式。
 * 我們正在從 Tailwind 遷移到 Bootstrap 5 + bootstrap-custom.css。
 * 新頁面請優先使用 Bootstrap 類別 + bootstrap-custom.css。
 *
 * 此檔案將逐步清理。舊樣式會在遷移完成後移除。
 */

/* 基本元件（已棄用 - 請改用 Bootstrap + bootstrap-custom.css） */

/* 
.salon-card {
    @apply bg-white border border-gray-100 rounded-2xl p-5;
}

.salon-btn {
    @apply inline-flex items-center justify-center px-5 py-2.5 rounded-xl font-medium text-sm transition active:scale-[0.985];
}

.salon-btn-primary {
    @apply bg-[#2C2C2E] text-white hover:bg-black;
}

.salon-btn-secondary {
    @apply border border-gray-200 hover:bg-gray-50;
}

.salon-input {
    @apply w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-[#8FA68F] focus:border-transparent outline-none;
}
*/

/* 表格樣式（已棄用 - 請改用 Bootstrap table + bootstrap-custom.css） */

/*
.salon-table {
    @apply w-full text-sm;
}
.salon-table thead th {
    @apply bg-gray-50 text-[#5A5A5C] font-medium text-xs uppercase tracking-wider py-2.5 px-3 sm:px-4 text-left border-b;
}
.salon-table tbody td {
    @apply py-2.5 px-3 sm:px-4 border-b border-gray-100 text-sm;
}
.salon-table tbody tr:hover {
    @apply bg-[#F8F5F0];
}

.table-responsive {
    @apply overflow-x-auto -mx-1 px-1;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .salon-table .hide-on-mobile {
        display: none;
    }
    
    .salon-table .action-col {
        width: 90px;
    }

    .salon-table .action-btn {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 32px;
    }
}
*/

/* Modal 樣式（已棄用 - 請改用 Bootstrap Modal + bootstrap-custom.css） */

/*
.salon-modal {
    @apply bg-white rounded-2xl shadow-xl overflow-hidden;
}
*/

/* Toast 已由 JS 動態產生 */

/* ===== 手機 / 平板響應式優化（已棄用 - 請改用 Bootstrap 響應式 + bootstrap-custom.css） ===== */

/*
@media (max-width: 768px) {
    .salon-btn {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        font-size: 0.9375rem;
    }

    .salon-modal {
        margin: 0.5rem;
        border-radius: 1rem;
        max-height: calc(100vh - 1rem);
        display: flex;
        flex-direction: column;
    }

    .salon-modal > div {
        overflow-y: auto;
    }

    h1 {
        font-size: 1.35rem !important;
        line-height: 1.3;
    }

    .salon-input {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        font-size: 1rem;
    }

    .salon-modal .grid.grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .salon-modal {
        margin: 0.25rem;
        border-radius: 0.75rem;
    }

    .flex-1.max-w-screen-2xl {
        padding-bottom: 4.5rem !important;
    }

    .salon-modal .salon-btn {
        width: 100%;
        justify-content: center;
    }

    .salon-modal .px-5.py-4.bg-gray-50.flex {
        flex-direction: column-reverse;
    }
    .salon-modal .px-5.py-4.bg-gray-50.flex > button {
        width: 100%;
    }
}
*/

/* 打印時隱藏（保留此區，因為打印需求特殊） */
@media print {
    .no-print,
    nav,
    .fixed-bottom {
        display: none !important;
    }
}

/* 
 * =============================================
 * 以下所有樣式已正式棄用（Tailwind 遷移期）
 * 所有新開發請使用 Bootstrap 5 + bootstrap-custom.css
 * 此檔案將在 Phase 2 後刪除或大幅精簡
 * =============================================
 *
 * 已棄用項目：
 * - .salon-card, .salon-btn, .salon-input
 * - .salon-table 相關
 * - .salon-modal
 * - 所有 @apply 規則
 * - 所有手機響應式 @media 區塊
 *
 * 請勿在此檔案新增新樣式。
 * 
 * 最後更新：2026-05
 */