@import url("./theme.css");

/* テーブル全体のデザイン */
#table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content !important;
    min-width: 100%;
    font-family: "Helvetica", "Times New Roman", sans-serif;
    font-size: 0.8rem; /* 全体の文字サイズを少し小さく */
}

.dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
}

/* ヘッダー部分のスタイル */
table.dataTable thead th   {
    box-sizing: border-box;
    background-color: #003366 ; /* だーくぶるー */
    color: white;
    text-align: center;
    padding: 10px;
    white-space: nowrap;
}

/* 行のスタイル */
table.dataTable tbody td {
    box-sizing: border-box;
    text-align: center;
    padding: 8px;
    border: 1px solid #ddd;
    white-space: nowrap;
}

/* 奇数行と偶数行に異なる背景色をつける */
table.dataTable tbody tr:nth-child(odd) {
    background-color: #e0f7fa; /* 薄水色 */
}

/* カーソルが当たっている行の色 */
#table tbody tr:hover {
    background-color: #fff176;  /* 薄い黄色 */
}

/* ボタンのデザイン */
button {
    background-color: #003366; /* だーくぶるー */
    color: white;
}
button:hover{
    background-color: #120033; /* だーくぶるー */
    color: white;
}

/* DataTableのボタンのカスタマイズ */
.dt-buttons {
    margin: 10px 0;
}

.dt-button {
    background-color: #28a745; /* 緑色 */
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 4px;
}

.dt-button:hover {
    background-color: #218838; /* ダークグリーン */
}

/* ページネーションのスタイル */
.dataTables_paginate {
    margin-top: 20px;
}

.dataTables_paginate a {
    background-color: #007BFF; /* 青色 */
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    margin: 0 2px;
}

.dataTables_paginate a:hover {
    background-color: #0056b3; /* ダークブルー */
}

/* ダークモードの見た目設定 */
body.dark-mode {
    background-color: #333; /* ダークグレー */
    color: #f2f2f2; /* 白色 */
}

body.dark-mode table.dataTable thead th,
body.dark-mode table.dataTable thead td {
    background-color: #000000; /* 黒色 */
    color: white;
    text-align: center;
    padding: 10px;
    border-color: #506878;
}

/* ダークモード時のテーブルの奇数行 */
body.dark-mode table.dataTable tbody tr:nth-child(odd),
body.dark-mode table.dataTable tbody tr.odd {
    background-color: #003366; /* ダークブルー */
}

body.dark-mode table.dataTable tbody tr:nth-child(even),
body.dark-mode table.dataTable tbody tr.even {
    background-color: #102733;
}

body.dark-mode table.dataTable tbody td,
body.dark-mode table.dataTable tbody th {
    background: transparent;
    color: #f2f7fa;
    border-color: #425d6b;
    box-shadow: none !important;
}

/* ダークモード時にカーソルが当たった行の色 */
body.dark-mode table.dataTable tbody tr:hover,
body.dark-mode table.dataTable tbody tr:hover > * {
    background-color: #65a1fc;  /* 淡いブルー */
    color: #071925;
    box-shadow: none;
}

/* ダークモード時のテーブルのボーダー */
body.dark-mode table.dataTable {
    border: 1px solid #666; /* グレーのボーダー */
}

body.dark-mode .dataTables_wrapper,
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: #e7f2f6;
}

body.dark-mode .dataTables_wrapper input,
body.dark-mode .dataTables_wrapper select {
    border-color: #506878;
    background: #102733;
    color: #f2f7fa;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled) {
    border-color: #315a70;
    background: #003366;
    color: #ffffff !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    border-color: #79b7db;
    background: #65a1fc;
    color: #071925 !important;
}