/* assets/css/sneeze-clip-list.css */

/* テーブルの横スクロール */
#sneeze-clip-table-wrapper {
    overflow-x: auto;
    width: 100%;
}
#sneeze-clip-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    white-space: nowrap;
}
#sneeze-clip-table th, #sneeze-clip-table td {
    border: 1px solid #ddd;
    padding: 2px;
    vertical-align: top;
}
#sneeze-clip-table th {
    background-color: #f2f2f2;
    text-align: left;
}
.action-button {
    padding: 5px 10px;
    margin: 2px;
    border: none;
    background-color: #0073aa;
    color: #fff;
    cursor: pointer;
}
.action-button:hover {
    background-color: #005177;
}
.sort-link {
    color: inherit;
    text-decoration: none;
}
.sort-link:hover {
    text-decoration: underline;
}
/* 備考モーダル/動画モーダル等のスタイルはここに書く */
/* 画面全体を覆うオーバーレイ */
#video-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none; /* JSでflexやblockに切り替え */
align-items: center;
justify-content: center;
z-index: 9999;
}

/* モーダル本体。画面の80% × 80%を占有し、中央寄せ */
#video-modal {
position: relative;
width: 80%;         /* 画面幅の80% */
height: 80%;        /* 画面高さの80% */
max-width: 1200px;  /* 上限を決めたい場合 */
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
display: flex;      /* iframeを中央寄せするためflexコンテナ化 */
align-items: center;
justify-content: center;
}

/* モーダルの閉じるボタン */
.close-video-modal {
position: absolute;
top: 10px;
right: 10px;
background: #a00;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}

/* iframeを中央寄せ・大きく表示 */
#video-modal-content {
width: 100%;
height: 100%;
display: flex;         /* iframeの中央寄せ */
align-items: center;   /* 縦方向中央 */
justify-content: center; /* 横方向中央 */
}

/* iframeそのものがモーダルの大きさに合わせて拡大 */
#video-modal-content iframe {
width: 100%;    /* 親要素いっぱいに拡大 */
height: 100%;   /* 高さも一杯に */
max-width: 100%; /* 横幅が親より大きくなるのを防ぐ */
border: none;
}