/**
 * レスポンシブデザイン
 * iPad 11inch最適化
 */

/* iPad 11inch (1024x768) メインターゲット */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
    .container {
        max-width: 1200px;
        padding: 24px;
    }
    
    .nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .nav-item {
        padding: 24px;
        font-size: 1.2rem;
        min-height: 100px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    
    .stat-card {
        padding: 28px;
    }
    
    .stat-value {
        font-size: 2.2rem;
    }
    
    .form-control {
        padding: 14px 18px;
        font-size: 1.1rem;
    }
    
    .btn {
        padding: 14px 28px;
        font-size: 1.1rem;
        min-height: 48px;
    }
}

/* iPad Pro (1366x1024) */
@media screen and (min-width: 1367px) {
    .container {
        max-width: 1400px;
        padding: 32px;
    }
    
    .nav-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
}

/* iPad Mini (768x1024) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 20px;
    }
    
    .nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .nav-item {
        padding: 20px;
        font-size: 1rem;
        min-height: 80px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .stat-value {
        font-size: 1.8rem;
    }
}

/* スマートフォン (767px以下) */
@media screen and (max-width: 767px) {
    .container {
        padding: 16px;
    }
    
    .header h1 {
        font-size: 1.5rem;
    }
    
    .nav-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .nav-item {
        padding: 16px;
        font-size: 0.9rem;
        min-height: 60px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .stat-card {
        padding: 20px;
    }
    
    .stat-value {
        font-size: 1.6rem;
    }
    
    .form-control {
        padding: 12px 14px;
        font-size: 0.9rem;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
        min-height: 44px;
    }
    
    .table {
        font-size: 0.9rem;
    }
    
    .table th,
    .table td {
        padding: 8px 12px;
    }
}

/* タッチ操作最適化 */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* 横画面対応 */
@media screen and (orientation: landscape) and (max-height: 768px) {
    .header {
        padding: 16px 0;
        margin-bottom: 20px;
    }
    
    .header h1 {
        font-size: 1.8rem;
    }
    
    .nav-grid {
        gap: 16px;
    }
    
    .nav-item {
        padding: 16px;
        min-height: 70px;
    }
}

/* 高解像度ディスプレイ対応 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .header {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    }
    
    .card {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
    
    .nav-item:hover {
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    }
}

/* 実績一覧表示のレスポンシブ対応 */
@media screen and (max-width: 1024px) {
    .table-container {
        max-height: 70vh;
    }
    
    .results-table th,
    .results-table td {
        padding: 6px 8px;
        font-size: 0.9rem;
    }
    
    .month-column {
        min-width: 100px;
    }
}

@media screen and (max-width: 768px) {
    .table-container {
        max-height: 60vh;
    }
    
    .results-table th,
    .results-table td {
        padding: 4px 6px;
        font-size: 0.8rem;
    }
    
    .month-column {
        min-width: 80px;
    }
    
    .results-table {
        min-width: 1000px;
    }
}

/* 印刷用スタイル */
@media print {
    .header,
    .nav,
    .btn,
    .footer {
        display: none;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #d1d5db;
        margin-bottom: 10px;
    }
    
    .table {
        border: 1px solid #d1d5db;
    }
    
    .table th,
    .table td {
        border: 1px solid #d1d5db;
    }
    
    .table-container {
        overflow: visible;
        max-height: none;
    }
    
    .results-table {
        min-width: auto;
    }
}