/* Filament モバイル対応CSS */

/* モバイルデバイスでのテーブル最適化 */
@media (max-width: 768px) {
    /* Filamentのメインコンテンツエリア */
    .fi-page {
        padding: 0.75rem !important;
    }
    
    /* テーブルのレスポンシブ対応 */
    .fi-ta-table {
        font-size: 0.875rem;
    }
    
    .fi-ta-cell {
        padding: 0.5rem !important;
    }
    
    /* フォームフィールドのレスポンシブ対応 */
    .fi-fo-field-wrp {
        padding: 0.75rem !important;
    }
    
    /* ボタンサイズの調整 */
    .fi-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* モーダルの最適化 */
    .fi-modal-window {
        margin: 1rem !important;
        max-height: calc(100vh - 2rem) !important;
    }
    
    /* サイドバーの最適化 */
    .fi-sidebar {
        width: 100% !important;
    }
    
    /* カードのパディング調整 */
    .fi-section {
        padding: 1rem !important;
    }
    
    /* タイムラインテーブルの最適化 */
    .timeline-table {
        min-width: auto !important;
    }
    
    .timeline-table th,
    .timeline-table td {
        padding: 0.25rem !important;
        font-size: 0.75rem !important;
    }
    
    /* 予約スロットのサイズ調整 */
    .reservation-slot {
        padding: 0.25rem !important;
        font-size: 0.625rem !important;
    }
    
    /* スクロール可能エリアのタッチ対応 */
    .overflow-x-auto,
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* タブレット向けの調整 */
@media (min-width: 769px) and (max-width: 1024px) {
    .fi-page {
        padding: 1rem !important;
    }
    
    .fi-ta-cell {
        padding: 0.75rem !important;
    }
    
    .timeline-table th,
    .timeline-table td {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* タッチデバイス向けのインタラクション改善 */
@media (hover: none) and (pointer: coarse) {
    /* タップターゲットのサイズを大きく */
    button,
    a,
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* ホバー効果を無効化 */
    .hover\:bg-gray-100:hover {
        background-color: transparent;
    }
    
    /* タップ時のハイライトを追加 */
    button:active,
    a:active {
        opacity: 0.8;
    }
}

/* 横向き表示の最適化 */
@media (orientation: landscape) and (max-height: 500px) {
    .fi-modal-window {
        max-height: calc(100vh - 1rem) !important;
        margin: 0.5rem !important;
    }
    
    .fi-page-header {
        padding: 0.5rem 1rem !important;
    }
}

/* モバイル固有のユーティリティクラス */
@media (max-width: 640px) {
    /* テキストサイズ調整 */
    .mobile-text-xs {
        font-size: 0.75rem !important;
    }
    
    .mobile-text-sm {
        font-size: 0.875rem !important;
    }
    
    /* パディング調整 */
    .mobile-p-2 {
        padding: 0.5rem !important;
    }
    
    .mobile-p-3 {
        padding: 0.75rem !important;
    }
    
    /* マージン調整 */
    .mobile-m-2 {
        margin: 0.5rem !important;
    }
    
    /* フレックスボックスの方向変更 */
    .mobile-flex-col {
        flex-direction: column !important;
    }
    
    /* グリッドのカラム数変更 */
    .mobile-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* Filamentテーブルのモバイル最適化 */
@media (max-width: 768px) {
    /* テーブルヘッダーの固定 */
    .fi-ta-table thead {
        position: sticky;
        top: 0;
        z-index: 10;
        background: white;
    }
    
    /* 不要なカラムを非表示 */
    .fi-ta-table .hidden-mobile {
        display: none !important;
    }
    
    /* セル内のテキスト省略 */
    .fi-ta-text {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* アクションボタンのサイズ調整 */
    .fi-ta-actions {
        gap: 0.25rem !important;
    }
    
    .fi-ta-action {
        padding: 0.25rem !important;
    }
}

/* 日次精算ページの最適化 */
@media (max-width: 768px) {
    .daily-closing-table {
        font-size: 0.75rem !important;
    }
    
    .daily-closing-table th,
    .daily-closing-table td {
        padding: 0.375rem !important;
    }
    
    /* 金額表示の最適化 */
    .amount-cell {
        font-weight: bold;
        white-space: nowrap;
    }
}

/* モーダルダイアログの最適化 */
@media (max-width: 640px) {
    .fi-modal {
        padding: 0 !important;
    }
    
    .fi-modal-window {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
    }
    
    .fi-modal-content {
        padding: 1rem !important;
    }
    
    .fi-modal-header {
        padding: 0.75rem 1rem !important;
    }
    
    .fi-modal-footer {
        padding: 0.75rem 1rem !important;
    }
}