/* 名簿管理WEBシステム スタイルシート */

/* 検索結果グリッドレイアウト（Tailwindで対応するため、CSSは最小限に） */

/* 検索結果リストの横幅を最大化 */
#search-result-list {
    width: calc(100% + 3rem); /* tab-contentのpadding（p-6 = 1.5rem × 2）を相殺 */
    max-width: calc(100% + 3rem);
    margin-left: -1.5rem; /* 左のpaddingを相殺 */
    margin-right: -1.5rem; /* 右のpaddingを相殺 */
    padding-left: 1.5rem; /* 内部のpaddingを復元 */
    padding-right: 1.5rem; /* 内部のpaddingを復元 */
}

/* 仮想スクロールのviewportの横幅を最大化 */
/* 注意: JavaScriptで直接幅を設定するため、CSSは最小限に */
#search-result-list-viewport {
    box-sizing: border-box !important;
}

/* 連絡先カードスタイル */
.contact-card {
    transition: all 0.2s;
    width: 100%;
}

.contact-card:hover {
    transform: translateY(-2px);
}

/* タブスタイル */
.tab-button {
    transition: all 0.2s;
}

.tab-button.active {
    color: #2563eb;
    background-color: #eff6ff; /* bg-blue-50 */
    border-bottom-color: #2563eb;
}

.tab-button:hover:not(.active) {
    background-color: #f9fafb; /* bg-gray-50 */
}

.tab-content {
    min-height: 400px;
}

/* 選択済みアイテムのハイライト */
.selected-item {
    background-color: #dbeafe;
    border: 2px solid #3b82f6;
}

/* 重複チェックのハイライト */
.duplicate-item {
    background-color: #fef3c7;
    border: 2px solid #f59e0b;
}

/* モーダルスタイル */
#duplicate-edit-modal {
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 既存データと新規データの明確な色分け */
.duplicate-existing {
    background-color: #fee2e2;
    border: 2px solid #dc2626;
}

.duplicate-new {
    background-color: #dbeafe;
    border: 2px solid #2563eb;
}

/* ローディングアニメーション */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #3b82f6;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* エラーメッセージ */
.error-message {
    color: #dc2626;
    background-color: #fee2e2;
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid #dc2626;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 成功メッセージ */
.success-message {
    color: #059669;
    background-color: #d1fae5;
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid #059669;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 情報メッセージ */
.info-message {
    color: #0369a1;
    background-color: #e0f2fe;
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid #0369a1;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* テーブルスタイル */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.data-table th {
    background-color: #f3f4f6;
    font-weight: 600;
}

.data-table tr:hover {
    background-color: #f9fafb;
}

/* チェックボックススタイル */
.checkbox-large {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

/* 編集フィールドの無効化スタイル */
.edit-fields-container.opacity-50 {
    opacity: 0.5;
}

.edit-fields-container.pointer-events-none {
    pointer-events: none;
}

.edit-fields-container input:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
}