:root {
    --bs-primary: #4192e4;
    --bs-primary-rgb: 65, 146, 228;
    --bs-light-gray: #f0f0f0;
    --bs-light-gray-rgb: 240, 240, 240;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html, body {
    height: 100%;
    overflow: hidden; /* bodyスクロール禁止 */
}

body {
    position: relative;
    padding-bottom: 90px; /* フッタ分の余白確保 */
    background-color: #F5F6FA;
}

.content {
    position: absolute;
    top: 80px; /* ヘッダー分下げる */
    left: 0; /* サイドバー幅 */
    right: 0;
    bottom: 0;
    overflow-y: auto;
    box-sizing: border-box;
    transition: all 0.3s ease;
    width: 100%;
}

/* トースト */
.toast-body {
    white-space: pre-line;
}

/* エラーメッセージ */
[data-valmsg-for] {
    white-space: pre-line;
}

/* 入力欄 */
.input-area {
    background-color: white;
}

.input-date {
    width: 9rem;
}

/* ラベル */
.form-search-label {
    margin-right: 1rem;
    width: 8rem;
    text-align: right;
    flex-shrink: 0;
}

.form-editor-label {
    margin-right: 1rem;
    width: 10rem;
    text-align: right;
    min-width: 10rem;
}

.label-max-display-count {
    text-wrap: nowrap;
    margin-right: 0.75rem;
}

/* ボタン */
.btn-primary {
    width: 12rem;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, var(--bs-black));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 85%, var(--bs-black));
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-outline-primary {
    width: 12rem;
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-tertiary {
    width: 12rem;
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-gray-300);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--bs-gray);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-csv {
    height: 32px;
    color: #4192E4 !important;
    background-color: white !important;
    border: 1px solid #E1E0E4 !important;
    white-space: nowrap;
}

    .btn-csv:hover {
        border: 1px solid #4192E4 !important;
    }

    .btn-csv:focus {
        color: #212529;
        background-color: #fff;
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

.table .btn {
    width: 4.5rem;
}

.modal .btn {
    width: 7rem;
}

.btn .bi {
    margin-inline-end: 1rem;
}

.btn-sm .bi {
    margin-inline-end: 0.5rem;
}

.btn-area {
    background-color: var(--bs-light-gray);
}


/* テーブル */
.table {
    border: 1px solid #dee2e6; /* 外枠のみ */
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

table .fixed-badge {
    font-size: 0.75rem;
}

/* テーブルヘッダ */
th {
    text-align: center;
    vertical-align: middle;
    border-bottom: 2px solid #CCCCCC !important;
    background-color: white;
    border-right: 1px solid #F3F3F3;
}

    th:has(> span.sort-label) {
        cursor: pointer;
    }

/* 本文セル */
td {
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #F3F3F3;
    border-bottom: 1px solid #F3F3F3; /* 行の下線 */
}

    td > input,
    td > select {
        display: block;
        margin: 0 auto;
    }

/* 偶数行・奇数行 */
tr:nth-of-type(even) td {
    background-color: white;
}

tr:nth-of-type(odd) td {
    background-color: #FBFBFB;
}

/* 変更セルの枠線色 */
td.cell-modified {
    box-shadow: inset 0 0 0 2px #34c46e;
}

.cell-no-tracking td,
td.cell-no-tracking {
    box-shadow: none;
}

/* エラー行の背景色 */
tr.row-error > td {
    background-color: #FFE6E6;
}

/* エラーセルの枠線色 */
td.cell-error {
    /*border: 2px solid #DC3545;*/
    box-shadow: inset 0 0 0 2px #dc3545;
}

/* マウスオーバー背景色 */
tr:hover > td {
    background-color: #F0F0F0 !important;
}
/* マウスオーバー背景色 */
tr.row-error:hover > td {
    background-color: #FFD2D2 !important;
}

/* 最後の列の右線を消す */
th:last-child,
td:last-child {
    border-right: none;
}

/* 最下行の下線を消して外枠の線だけにする */
tr:last-child td {
    border-bottom: none;
}

/* 読み取り専用フィールド */
input[readonly],
select[readonly] {
    background-color: var(--bs-gray-200);
}

    input[readonly]:focus,
    select[readonly]:focus {
        background-color: var(--bs-gray-200);
    }

/* aタグ ポインター */
a:hover {
    cursor: pointer;
}

/* バッジ */
.fixed-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 22px;
    width: 80px;
    border-radius: 50rem;
}

/* ページ */
.pagination {
    margin: 0;
}

    .pagination .page-link {
        width: 32px;
        height: 32px;
        padding: 0;
        text-align: center;
        line-height: 32px;
    }

    .pagination .page-item.active .page-link {
        background-color: #4192E4;
        color: white;
        border: 1px solid #4192E4 !important;
    }

    .pagination .page-item .page-link:hover {
        border: 1px solid #4192E4 !important;
    }

    .pagination .disabled .page-link {
        cursor: default;
        background-color: #f0f0f0;
    }

/* 一覧ソート */
.sort-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.sort-icon,
.sort-dummy {
    display: inline-block;
    width: 1em; /* 左右の幅を統一 */
    text-align: center;
}



.input-with-icon {
    position: relative;
}

    .input-with-icon input {
        padding-right: 40px; /* ← アイコン分の余白 */
    }

    .input-with-icon .icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 1.2rem;
        opacity: 0.7;
    }

        .input-with-icon .icon:hover {
            opacity: 1;
        }

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* 半透明の白 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* モーダル内容より前に */
    display: none; /* 初期は非表示 */
}



/* ツールチップ */
[tooltip] {
    position: relative; /* opinion 1 */
}
    /* Applies to all tooltips */
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none; /* opinion 2 */
        font-size: .9em; /* opinion 3 */
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }

    [tooltip]::before {
        content: '';
        border: 5px solid transparent; /* opinion 4 */
        z-index: 1001; /* absurdity 1 */
    }

    [tooltip]::after {
        content: attr(tooltip); /* magic! */
        /* most of the rest of this is opinion */
        font-family: Helvetica, sans-serif;
        text-align: center;
        /* 
    Let the content set the size of the tooltips but this will also keep them from being obnoxious
    */
        min-width: 3em;
        max-width: 21em;
        white-space: pre;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: #333;
        color: #fff;
        z-index: 1000; /* absurdity 2 */
    }

    /* Make the tooltips respond to hover */
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #333;
}

[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #333;
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
}

[tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: .9;
        transform: translate(0, -50%);
    }
}

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
}

#toastContainer .toast {
    max-width: 270px;
}

.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
}


.overlay-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    display: none;
}

.cell-editor {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
td.editable {
    padding: 0 8px;
}

    td.editable .cell-display {
        height: 44px;
        line-height: 44px;
    }

    td.editable input {
        height: 32px;
    }