/* static/css/style.css */
html {
    overflow-y: scroll; /* ★常に縦スクロールバーの領域を確保してガタつきを防止 */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
    padding: 0;
}

/* --- ログイン画面用 (変更なし) --- */
.login-container { display: flex; justify-content: center; align-items: center; height: 100vh; }
.login-box { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 320px; text-align: center; }
.login-box input { width: 90%; margin-bottom: 15px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.btn { width: 100%; padding: 10px; background-color: #0056b3; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
.btn:hover { background-color: #004494; }

/* --- ダッシュボードのメインコンテナ --- */
.dashboard-container {
    max-width: 1050px;
    margin: 40px auto;
    background: white;
    padding: 40px 50px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* 柔らかくリッチな影 */
}

/* モダンなセレクトボックス */
.modern-select {
    padding: 10px 15px;
    font-size: 15px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    width: 350px;
    background-color: #f8fafc;
    color: #334155;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.modern-select:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* --- 電話番号テーブルのデザイン --- */
.phone-group {
    margin-bottom: 40px;
}
.prefix-header {
    margin-bottom: 15px;
}
.prefix-input {
    width: 200px;
    padding: 6px 12px;
    font-size: 16px;
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #475569;
    font-weight: 600;
}

.phone-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.phone-table th, .phone-table td {
    border: 1px solid #e2e8f0;
    padding: 0; /* ★入力フォームをセル全体に広げるためにパディングを0に */
    text-align: center;
    height: 38px; /* セルの高さを固定 */
    position: relative;
    transition: background-color 0.4s ease; /* ★ホバー時のぼんやり変化 */
}
.phone-table th {
    background-color: #f8fafc;
    color: #64748b;
    font-weight: 600;
    padding: 8px;
}
.num-cell {
    background-color: #f1f5f9;
    color: #64748b;
    font-weight: 600;
    width: 4%;
}

.data-cell {
    width: 16%;
    background-color: #ffffff;
}
/* ★行にホバーした時、データセルだけがぼんやり色づく */
.phone-table tbody tr:hover td.data-cell {
    background-color: #f0fdf4; 
}

/* --- セルと入力フォームの同化 --- */
.phone-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 14px;
    color: #334155;
    text-align: center;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* ★ホバーしたセルだけを色づける（入力中・ロック中は除く） */
.phone-input:hover:not(:focus):not(:disabled) {
    background-color: #f0fdf4; /* 薄い緑 */
}

/* ★セルを選択した時、エクセルのように青い枠が内側に出る */
.phone-input:focus {
    background-color: #ffffff;
    box-shadow: inset 0 0 0 2px #3b82f6; 
    cursor: text;
}

/* 誰かが編集中のスタイル */
.locked-input {
    background-color: #e2e8f0 !important;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: inset 0 0 0 1px #cbd5e1;
}
.lock-badge {
    position: absolute;
    right: 2px;
    top: -8px;
    font-size: 10px;
    background-color: #ef4444;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- ページ数表示 --- */
.page-indicator {
    color: #3b82f6;
    font-weight: 600;
    margin-left: 15px;
    font-size: 15px;
}

/* --- セルの更新アニメーション（ポワンと光る） --- */
/* 自分が更新した時（緑色に光る） */
@keyframes pulse-self {
    0%   { box-shadow: inset 0 0 0 0 rgba(16, 185, 129, 0); background-color: transparent; }
    25%  { box-shadow: inset 0 0 10px 2px rgba(16, 185, 129, 0.6); background-color: #ecfdf5; }
    50%  { box-shadow: inset 0 0 2px 1px rgba(16, 185, 129, 0.4); background-color: #d1fae5; }
    75%  { box-shadow: inset 0 0 10px 2px rgba(16, 185, 129, 0.6); background-color: #ecfdf5; }
    100% { box-shadow: inset 0 0 0 0 rgba(16, 185, 129, 0); background-color: transparent; }
}

/* 他人が更新した時（青色に光る） */
@keyframes pulse-other {
    0%   { box-shadow: inset 0 0 0 0 rgba(59, 130, 246, 0); background-color: transparent; }
    25%  { box-shadow: inset 0 0 10px 2px rgba(59, 130, 246, 0.6); background-color: #eff6ff; }
    50%  { box-shadow: inset 0 0 2px 1px rgba(59, 130, 246, 0.4); background-color: #dbeafe; }
    75%  { box-shadow: inset 0 0 10px 2px rgba(59, 130, 246, 0.6); background-color: #eff6ff; }
    100% { box-shadow: inset 0 0 0 0 rgba(59, 130, 246, 0); background-color: transparent; }
}

.anim-update-self {
    animation: pulse-self 1.2s ease-out forwards;
}
.anim-update-other {
    animation: pulse-other 1.2s ease-out forwards;
}