/* コンパクトレイアウト - 一覧表示を最優先 */

/* ========================================
   1. ヘッダーのコンパクト化
   ======================================== */
.header {
    padding: 12px 0 !important;
    min-height: auto !important;
}

.header h1 {
    font-size: 18px !important;
    margin: 0 !important;
}

.header-content {
    padding: 0 24px !important;
    gap: 16px !important;
}

.header-actions {
    gap: 8px !important;
}

.header-actions .btn {
    padding: 6px 12px !important;
    font-size: 13px !important;
}

/* 依頼者選択エリア */
.requester-selector {
    font-size: 13px !important;
    margin-top: 4px !important;
}

.requester-selector select {
    padding: 4px 8px !important;
    font-size: 13px !important;
}

.requester-register-link {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* テスター選択エリア */
.tester-selector {
    font-size: 13px !important;
    margin-top: 4px !important;
}

.tester-selector select {
    padding: 4px 8px !important;
    font-size: 13px !important;
}

/* ========================================
   2. ナビゲーションタブのコンパクト化
   ======================================== */
.nav-tabs {
    padding: 0 24px !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.nav-tab {
    padding: 8px 16px !important;
    font-size: 13px !important;
}

/* ========================================
   3. コンテナのコンパクト化
   ======================================== */
.container {
    padding: 0 !important;
    max-width: 100% !important;
}

.tab-content {
    padding: 0 24px 24px 24px !important;
}

/* ========================================
   4. 情報バナー・案内の縮小
   ======================================== */
.info-banner {
    padding: 12px 16px !important;
    margin: 12px 24px !important;
    font-size: 13px !important;
}

.info-banner i {
    font-size: 18px !important;
}

.info-banner strong {
    font-size: 14px !important;
}

.info-banner p {
    font-size: 12px !important;
    margin: 4px 0 0 0 !important;
}

/* ダッシュボードへのリンクバナー（管理者画面） */
div[style*="background: #e0f2fe"] {
    padding: 12px !important;
    margin: 12px 24px !important;
}

/* ========================================
   5. フィルタパネルのコンパクト化
   ======================================== */
.filter-panel {
    margin-bottom: 12px !important;
}

.filter-panel-header {
    padding: 10px 16px !important;
    font-size: 13px !important;
}

.filter-panel-content {
    padding: 12px 16px !important;
}

.filter-section-title {
    font-size: 12px !important;
    margin-bottom: 6px !important;
}

.checkbox-label {
    padding: 4px 0 !important;
    font-size: 13px !important;
}

.filter-section input[type="text"] {
    padding: 8px !important;
    font-size: 13px !important;
}

/* ========================================
   6. テーブルのコンパクト化
   ======================================== */
.table-container {
    margin-top: 0 !important;
}

.data-table {
    font-size: 13px !important;
}

.data-table th {
    padding: 10px 12px !important;
    font-size: 12px !important;
}

.data-table td {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* テーブル行間を詰める */
.data-table tr {
    border-bottom: 1px solid #e2e8f0 !important;
}

/* ========================================
   7. バッジのコンパクト化
   ======================================== */
.badge {
    padding: 3px 8px !important;
    font-size: 11px !important;
}

.progress-badge {
    padding: 3px 8px !important;
    font-size: 11px !important;
}

/* ========================================
   8. ボタンのコンパクト化
   ======================================== */
.btn {
    padding: 6px 12px !important;
    font-size: 13px !important;
}

.btn-sm {
    padding: 4px 8px !important;
    font-size: 11px !important;
}

.btn i {
    font-size: 11px !important;
}

/* ========================================
   9. セクションヘッダーのコンパクト化
   ======================================== */
.section-header {
    padding: 10px 16px !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

.section-header h2 {
    font-size: 15px !important;
    margin: 0 !important;
}

/* ========================================
   10. タスクカード・リストアイテムのコンパクト化
   ======================================== */
.task-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
}

.task-card h3 {
    font-size: 14px !important;
}

.task-card p {
    font-size: 12px !important;
    margin: 6px 0 !important;
}

.task-list-item {
    padding: 12px !important;
    margin-bottom: 6px !important;
}

.task-list-item h3 {
    font-size: 14px !important;
}

.task-list-item p {
    font-size: 12px !important;
    margin: 6px 0 !important;
}

/* ========================================
   11. モーダルのコンパクト化
   ======================================== */
.modal-content {
    padding: 20px !important;
}

.modal-header h2 {
    font-size: 18px !important;
}

.form-group label {
    font-size: 13px !important;
    margin-bottom: 4px !important;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 8px !important;
    font-size: 13px !important;
}

/* ========================================
   12. 空白状態のコンパクト化
   ======================================== */
.empty-state {
    padding: 24px !important;
    font-size: 13px !important;
}

.empty-state i {
    font-size: 32px !important;
    margin-bottom: 8px !important;
}

/* ========================================
   13. レポートサマリーのコンパクト化
   ======================================== */
.report-summary-cards {
    gap: 12px !important;
}

.summary-card {
    padding: 12px !important;
}

.summary-card h3 {
    font-size: 12px !important;
}

.summary-card .value {
    font-size: 20px !important;
}

/* ========================================
   14. テスターカードのコンパクト化
   ======================================== */
.tester-card {
    padding: 12px !important;
    margin-bottom: 12px !important;
}

.tester-card h3 {
    font-size: 14px !important;
}

.tester-card .stat-item {
    font-size: 12px !important;
}

/* ========================================
   15. アラートセクションのコンパクト化
   ======================================== */
.alert-section {
    margin-bottom: 16px !important;
}

.alert-section h3 {
    font-size: 14px !important;
    padding: 8px 12px !important;
}

/* ========================================
   16. 通知・ツールチップのコンパクト化
   ======================================== */
.notification {
    padding: 12px 16px !important;
    font-size: 13px !important;
}

/* ========================================
   17. レスポンシブ対応（小画面でさらにコンパクト）
   ======================================== */
@media (max-width: 768px) {
    .header {
        padding: 8px 0 !important;
    }
    
    .header h1 {
        font-size: 16px !important;
    }
    
    .tab-content {
        padding: 0 12px 12px 12px !important;
    }
    
    .data-table {
        font-size: 12px !important;
    }
    
    .data-table th,
    .data-table td {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
}