/* 
 * 立命館生協教科書予約サイト レスポンシブデザイン拡張CSS
 * 作成日: 2025/04/25
 */

/* 
 * ブレイクポイント定義
 * ------------------
 * モバイル: 320px - 767px
 * タブレット: 768px - 1023px
 * デスクトップ: 1024px以上
 */

/* 共通のタッチ最適化 */
@media (hover: none) and (pointer: coarse) {
    /* タッチデバイス最適化 */
    .btn, 
    .nav-link, 
    .time-slot, 
    input[type="checkbox"],
    input[type="radio"],
    .card-header,
    .list-group-item,
    .dropdown-item {
        /* タッチターゲットの最小サイズを44px×44pxに設定 */
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }
    
    /* フォーム要素の間隔を広げる */
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    /* タップ状態のビジュアルフィードバックを強化 */
    .btn:active,
    .nav-link:active,
    .time-slot:active,
    .card:active,
    .list-group-item:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
}

/* モバイル対応 (320px - 767px) */
@media (max-width: 767.98px) {
    /* コンテナの余白調整 */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* フォントサイズ調整 */
    body {
        font-size: 16px;
    }
    
    h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    h2 {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    /* ボタンサイズ最適化 */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    /* カードの余白縮小 */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    /* テーブル最適化 */
    .table-responsive {
        margin-bottom: 1rem;
        border: 0;
    }
    
    /* モバイル用のテーブル代替表示 */
    .mobile-table-row {
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-table-row .label {
        font-weight: bold;
        margin-bottom: 0.25rem;
        color: var(--text-medium);
    }
    
    /* フォーム最適化 */
    .form-control {
        font-size: 16px; /* iOSでズームインを防止 */
        padding: 0.75rem;
    }
    
    /* 固定フッターナビゲーション */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--secondary-color);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 0.5rem 0;
    }
    
    .mobile-nav-icon {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }
    
    /* メインコンテンツの下部マージン調整（フッターナビでコンテンツが隠れないよう） */
    body.student-user {
        padding-bottom: 60px; /* フッターナビの高さ分を縮小 */
    }
    
    .footer-nav {
        height: 60px; /* フッターナビの高さを縮小 */
    }
    
    /* フッターの上部マージンを調整（固定フッターナビでコンテンツが隠れないよう） */ */
    main {
        padding-bottom: 4.5rem;
    }
    
    /* ヘッダー最適化 */
    .navbar-brand {
        font-size: 1.1rem;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* バーコード表示の最適化 */
    .barcode-container {
        padding: 0.75rem;
        margin: 1rem 0;
    }
    
    .barcode-container svg {
        max-width: 100%;
        height: auto;
    }
    
    /* 来店日時選択の最適化 */
    .calendar-container {
        padding: 0.75rem;
    }
    
    .time-slot {
        padding: 0.75rem 0.5rem;
        margin: 0.25rem 0;
        font-size: 0.9rem;
    }
    
    /* モーダル調整 */
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
}

/* タブレット対応 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    /* ダッシュボード最適化 */
    .dashboard-card {
        margin-bottom: 1.5rem;
    }
    
    /* フォントサイズ微調整 */
    h1 {
        font-size: 1.75rem;
    }
    
    /* テーブル行の高さ調整 */
    .table td, .table th {
        padding: 0.75rem;
    }
    
    /* カード内容物の余白調整 */
    .card-body {
        padding: 1.25rem;
    }
}

/* 高解像度デバイス対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* 高解像度デバイス用の最適化 */
    .img-fluid {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* 印刷用スタイル */
@media print {
    /* 印刷時に不要な要素を非表示 */
    .navbar, 
    .mobile-nav, 
    footer, 
    .no-print {
        display: none !important;
    }
    
    /* 印刷背景色を設定 */
    body {
        background-color: white !important;
        color: black !important;
    }
    
    /* 印刷ページ分割調整 */
    .card, .table, .page-break {
        page-break-inside: avoid;
    }
    
    /* リンク色を調整 */
    a {
        color: black !important;
        text-decoration: none !important;
    }
    
    /* バーコード最適化 */
    .barcode-container {
        margin: 0;
        padding: 0;
        box-shadow: none;
        text-align: center;
    }
    
    .barcode-number {
        color: black !important;
    }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    /* 注意: 標準でダークモードを適用しないが、将来の拡張のための準備 */
    .dark-mode-ready {
        /* ダークモード用設定 */
    }
}

/* アクセシビリティ強化 */
@media (prefers-reduced-motion: reduce) {
    /* アニメーション削減 */
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* 方向対応 (横向きモバイル) */
@media (max-width: 767.98px) and (orientation: landscape) {
    /* 横向きモバイルデバイスの最適化 */
    .mobile-nav {
        padding: 0.25rem 0;
    }
    
    .mobile-nav-icon {
        font-size: 1rem;
        margin-bottom: 0.1rem;
    }
    
    .mobile-nav-text {
        font-size: 0.7rem;
    }
    
    /* 余白調整 */
    main {
        padding-bottom: 3.5rem;
    }
}

/* レスポンシブテーブル拡張 */
.responsive-table {
    width: 100%;
    overflow-x: auto;
}

/* モバイルでのカード形式テーブル */
@media (max-width: 767.98px) {
    .card-table tbody tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border-color);
        margin-bottom: 1rem;
        border-radius: 8px;
        padding: 0.75rem;
    }
    
    .card-table thead {
        display: none;
    }
    
    .card-table tbody td {
        display: flex;
        padding: 0.5rem 0;
        border: none;
    }
    
    .card-table tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        width: 40%;
        margin-right: 5%;
    }
    
    .card-table tbody td span {
        width: 55%;
    }
}

/* スクリーンリーダー対応 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* フォーカス可視性の強化 */
:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}