/* ================================
   NVIDIA-ish Solid Square Theme
   Palette: Green / Black / White / Light Gray
   ================================ */
:root {
    /* 基本色 */
    --green: #76B900; /* NVIDIAグリーン */
    --green-weak: #a3db2e; /* 薄めのグリーン（アクセント用） */
    --black: #000000;
    --white: #ffffff;
    --gray-50: #f7f8f9; /* コンテンツ背景ライト */
    --gray-100: #f2f3f5; /* テーブル見出しなど */
    --gray-200: #e5e7eb; /* 枠線・ボーダー */
    --gray-300: #cfd4da;
    /* 角丸は全てゼロ（Bootstrap 変数も含めて） */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-btn-border-radius: 0;
    --bs-btn-border-radius-sm: 0;
    --bs-btn-border-radius-lg: 0;
    --bs-input-border-radius: 0;
    --bs-pagination-border-radius: 0;
    --font-sans: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans", "Yu Gothic Medium","Yu Gothic","Meiryo",system-ui,-apple-system, "Segoe UI","Helvetica Neue",Arial,sans-serif;
    --fs-base: 16px; /* 本文 */
    --fs-sm: 14px; /* 表や注釈 */
    --fs-md: 18px; /* セクション見出し */
    --fs-lg: 22px; /* ページタイトル */
}

/* ================================
   Layout / Navbar
   ================================ */
html {
    font-size: var(--fs-base);
}
body {
    background: var(--gray-50);
    font-family: "Noto Sans JP", /* Googleが配布する日本語用サンセリフ */
    "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    line-height: 1.6;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "palt" 1;
    font-weight: 400;
    color: #222;
}

.navbar {
    /*background: var(--white);*/
    box-shadow: none !important;
    /* border-bottom: 1px solid var(--gray-200);*/
}

.navbar-brand img {
    height: 80px;
}

.navbar .nav-link,
.navbar .navbar-brand,
.navbar .navbar-brand .fw-semibold {
    color: var(--black) !important;
}

/* ================================
   Tables
   ================================ */
.table-nowrap td, .table-nowrap th {
    white-space: nowrap;
}

.table-custom {
    border: 1px solid var(--gray-200);
    border-radius: 0; /* 角丸なし */
    background: var(--white);
    overflow: hidden;
}

    .table-custom thead th {
        background: var(--gray-100) !important; /* 見出し = ライトグレー */
        color: var(--black);
        font-weight: 600;
        font-size: 14px;
        border-bottom: 1px solid var(--gray-200);
        padding: 10px 12px;
    }

    .table-custom tbody td {
        font-size: 14px;
        padding: 10px 12px;
        border-top: 1px solid var(--gray-200);
        vertical-align: middle;
    }

    .table-custom tbody tr:hover {
        background: #fafafa;
    }

/* ================================
   Pagination
   ================================ */
.pagination .page-item .page-link {
    color: #888888;
    border-radius: 0 !important;
    margin: 0 2px;
    border: 1px solid transparent;
    text-decoration: underline;
    text-underline-offset: 2px; /* 少し離すと見やすい(対応ブラウザなら) */
}

.pagination .page-item.active .page-link {
    background: var(--gray-50);
    border: 0px solid var(--black);
    color: var(--black);
    font-weight: 600;
}


/* ================================
   Forms / Inputs
   ================================ */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="password"],
textarea,
.input-group .form-control,
.input-group .btn,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-dropdown,
.select2-search__field,
select {
    /*border-radius: 0 !important;*/ /* 角丸なし */
    border: 1px solid var(--gray-300);
    background: var(--white);
}

/* ツールバー内の入力も同様（個別の角丸指定をゼロに） */
.schedule-toolbar .form-select,
.schedule-toolbar input[type="month"] {
    border-radius: 0 !important;
    border: 1px solid var(--gray-300);
    height: 44px;
    padding: 6px 12px;
    font-size: 16px;
    background: var(--white);
}

/* ================================
   Buttons (3パターンを明確化)
   ================================ */
/* ブラック×白文字 */
.btn-black {
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    /*border-radius: 0 !important;*/
    font-weight: 700;
}
    .btn-black:hover {
        filter: brightness(.95);
    }

/* ライトグレー×黒文字 */
.btn-gray {
    background: var(--gray-100);
    color: var(--black);
    border: 1px solid var(--gray-300);
    /*border-radius: 0 !important;*/
    font-weight: 600;
}
    .btn-gray:hover {
        filter: brightness(.98);
    }

/* カスタムボタン共通 */
.btn,
.btn-rental-manage,
.btn-outline-dark-custom,
.btn-dark-custom,
.btn-danger-soft {
    /*border-radius: 0 !important;*/
}

/* 役割が「管理/作成系」なら .btn-rental-manage をグリーンに寄せる */
.btn-rental-manage {
    background: var(--green-weak);
    color: var(--black);
    border: 1px solid var(--green);
    font-weight: 700;
    height: 44px;
    line-height: 1.2;
    box-shadow: none; /* シャドウ撤去でソリッドに */
}

    .btn-rental-manage:hover {
        filter: brightness(.98);
    }

/* 既存の黒ボタンを .btn-black の定義に合わせる */
.btn-dark-custom {
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
}

    .btn-dark-custom:hover {
        filter: brightness(.95);
    }

/* 既存“白地＋黒枠”は .btn-gray 系に寄せる */
.btn-outline-dark-custom {
    background: var(--gray-100);
    color: var(--black);
    border: 1px solid var(--gray-300);
}

    .btn-outline-dark-custom:hover {
        background: #ededf0;
    }

.btn-danger-soft {
    background: var(--white);
    color: #dc3545;
    border: 1px solid #dc3545;
}

/* 戻るリンクはそのまま */
.link-back {
    text-decoration: none;
    color: var(--black);
    font-weight: 600;
}

    .link-back:hover {
        text-decoration: underline;
    }

/* ================================
   Schedule (Header / Grid)
   ================================ */
/* 見出しカード -> 角丸なし＆ライトグレー寄りの枠線 */
.table.schedule-header {
    border: 1px solid var(--gray-200);
    border-radius: 0;
    background: var(--white);
    overflow: hidden;
    margin-bottom: 16px;
}

.schedule-header td {
    padding: 12px 14px;
    font-size: 18px;
}

/* グリッド本体 */
.table.schedule-grid {
    border: 1px solid var(--gray-300);
    border-radius: 0;
    overflow: hidden;
    background: var(--white);
}

.schedule-grid thead th {
    background: var(--gray-100);
    color: var(--black);
    font-weight: 600;
    border-bottom: 1px solid var(--gray-300);
    text-align: center;
    padding: 8px 6px;
    white-space: nowrap;
}

.schedule-grid tbody td {
    border-top: 1px solid var(--gray-200);
    padding: 6px;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

.schedule-grid .terminal-cell {
    width: 150px;
    max-width: 150px;
    text-align: left;
}

    .schedule-grid .terminal-cell a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* 1日セル（四角コマ） */
.schedule-grid .slot {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid var(--gray-300);
    border-radius: 0 !important; /* 角丸なし */
    line-height: 22px;
    text-indent: -999em;
}

/* 状態色（緑=空き / 黄=仮押さえ / 白=空白） */
.slot--free {
    background: var(--green);
    border-color: #5ea100;
}

.slot--tent {
    background: #f2b701; /* 黄は現状維持（ご要望外カラーなので必要なら灰系に） */
    border-color: #e0a800;
}

.slot--empty {
    background: var(--white);
}

/* 行ホバー */
.borrow-cell:hover {
    background: #eef6ff;
}

    .borrow-cell:hover .slot::after {
        content: "+";
        color: var(--black);
        font-weight: 700;
        position: relative;
        left: -10px;
    }

/* 10⇔11, 20⇔21, 30⇔31 の境界を太線 */
.schedule-grid thead th:nth-child(12),
.schedule-grid thead th:nth-child(22),
.schedule-grid thead th:nth-child(32),
.schedule-grid tbody td:nth-child(12),
.schedule-grid tbody td:nth-child(22),
.schedule-grid tbody td:nth-child(32) {
    border-left: 2px solid var(--gray-300) !important;
}

/* 横スクロール */
.schedule-wrapper {
    overflow-x: auto;
}

/* 桁を揃えたい数値やID（追記・任意） */
.table, .tabular, .terminal-id, .count-link {
    font-variant-numeric: tabular-nums;
}

.text-pre-wrap {
    white-space: pre-wrap;
}
/* \n を改行として表示 */
textarea.form-control-plaintext {
    background: transparent !important;
    border: 0 !important;
    padding-left: 0;
    padding-right: 0;
    resize: none; /* 任意 */
}

.app-sidebar {
    width: 240px;
    min-height: 100vh;
    background: var(--gray-50);
    border-right: 1px solid #e5e7eb;
    padding: 16px 0px;
    position: sticky;
    top: 0; /* 上部固定 */
    margin-block: .25rem; /* 上下のみ */
    margin-inline: 0; /* 左右なし */
}

    .app-sidebar .nav-link {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .6rem .75rem;
        color: #374151;
    }

        .app-sidebar .nav-link:hover {
            background: #f3f4f6;
        }

        .app-sidebar .nav-link.active {
            background: #e6f0ff;
            color: #1d4ed8;
            font-weight: 600;
        }

    .app-sidebar .icon {
        width: 20px;
        height: 20px;
    }

    .app-sidebar .nav-link.indent-1em span::before {
        content: "";
        display: inline-block;
        width: 1em; /* 全角1文字ぶん */
    }

.app-footer {
    background: #0f172a; /* ダークネイビー */
    color: #e5e7eb;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

    .app-footer .footer-left {
        display: flex;
        align-items: center;
        gap: .6rem;
    }

    .app-footer .footer-logo {
        height: 20px;
        width: auto;
        display: block;
    }

    .app-footer .footer-brand {
        font-weight: 600;
        letter-spacing: .2px;
    }

    .app-footer .footer-right {
        margin-left: auto;
    }

    .app-footer a {
        color: #cbd5e1;
        text-decoration: none;
    }

        .app-footer a:hover {
            color: #fff;
            text-decoration: underline;
        }

.btn-basic {
    display: inline-flex; /* ← これで縦横センターが簡単に */
    align-items: center; /* 縦中央 */
    justify-content: center; /* 横中央 */
    padding: 0.45em 1.4em;
    font-size: 1rem;
    font-weight: 600;
    color: var(--green);
    background-color: #f8fff2;
    border: 2px solid var(--green);
    border-radius: 9999px; /* pill形状 */
    text-decoration: none;
    transition: all 0.2s ease;
    width: 200px;
    text-align: center;
}

    .btn-basic:hover {
        background-color: var(--green);
        color: #ffffff;
    }

    .btn-basic:active {
        transform: translateY(1px);
    }

.btn-emphasis {
    display: inline-flex; /* ← これで縦横センターが簡単に */
    align-items: center; /* 縦中央 */
    justify-content: center; /* 横中央 */
    padding: 0.45em 1.4em;
    font-size: 1rem;
    font-weight: 600;
    color: #f8fff2;
    background-color: var(--green);
    border: 2px solid var(--green);
    border-radius: 9999px; /* pill形状 */
    text-decoration: none;
    transition: all 0.2s ease;
    width: 200px;
    text-align: center;
}

    .btn-emphasis:hover {
        background-color: #f8fff2;
        color: var(--green);
    }

    .btn-emphasis:active {
        transform: translateY(1px);
    }

.btn-delete {
    display: inline-flex; /* ← これで縦横センターが簡単に */
    align-items: center; /* 縦中央 */
    justify-content: center; /* 横中央 */
    padding: 0 12px; /* 縦は0にして高さで揃える */
    font-size: 1rem;
    font-weight: 600;
    color: #888888; /* 文字色を灰色に */
    background-color: #ffffff; /* 薄い灰背景 */
    border: 1.5px solid #c9c9c9; /* 灰色の枠線 */
    border-radius: 9999px; /* pill形状 */
    text-decoration: none;
    transition: all 0.2s ease;
    height: 32px;
    width: 100px;
    text-align: center;
}

    .btn-delete:hover {
        background-color: #c9c9c9; /* 背景を灰色に反転 */
        color: #ffffff; /* 文字を白に */
    }

    .btn-delete:active {
        transform: translateY(1px);
    }

/* tbody を白地、罫線は薄いグレーに */
.table.white-body {
    --bs-table-bg: #fff; /* セルの背景色（tbodyにも適用） */
    --bs-border-color: #e5e7eb; /* 罫線色（#e5e7eb ≒ gray-200） */
}

    /* Bootstrap のセル背景が透過になるケースのために保険で上書き */
    .table.white-body > :not(caption) > * > * {
        background-color: var(--bs-table-bg) !important;
    }

/* もし横罫線だけにしたい場合（縦線不要） */
/*.table.white-body.table-bordered tbody td,
    .table.white-body.table-bordered tbody th {
        border-left: 0;
        border-right: 0;
    }*/

/* activeでも色を反転させない */
.app-sidebar .nav-link.active,
.app-sidebar .nav-link:focus {
    background-color: transparent !important;
    color: inherit !important;
}

/* hoverも控えめに（必要なら） */
.app-sidebar .nav-link:hover {
    background-color: transparent; /* または薄いグレー等お好みで */
    text-decoration: none;
}

/* 矢印の回転だけは維持 */
.app-sidebar .caret::before {
    content: "▸";
    display: inline-block;
    font-size: 2.8rem;
    line-height: 1;
    transition: transform .2s ease;
}

.app-sidebar a[aria-expanded="true"] .caret::before {
    transform: rotate(90deg);
}

/* インデント（既にあれば不要） */
.indent-1em {
    padding-left: 1.25rem;
}

h1, h2, h3, h4, h5, h6, th, strong {
    font-weight: 600; /* 少し強めにしてモダンな印象に */
}

.nav-link, .btn, .card-title {
    font-weight: 500;
}

.app-sidebar,
.nav-link,
.card,
.table {
    font-family: inherit; /* サイドバーや表でも同フォントを継承 */
}

/* 子メニューのアイコン左にスペースを追加 */
#userMgmtMenu .nav-link .icon {
    margin-left: 1rem; /* ← 好きな幅に調整 */
}

/* Chrome, Edge, Safari用 */
.scroll-thin::-webkit-scrollbar {
    width: 6px;
}

.scroll-thin::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.scroll-thin::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 3px;
}

    .scroll-thin::-webkit-scrollbar-thumb:hover {
        background: #666;
    }

/* Firefox用 */
.scroll-thin {
    scrollbar-width: thin;
    scrollbar-color: #F28C38 #ffffff;
}

/* 外枠と角丸を担当するラッパー */
.table-frame {
    border: 1px solid #d6d6d6; /* 外枠 */
    border-radius: 8px; /* 角丸（お好みで） */
    overflow: hidden; /* 角丸に内容をフィット */
}

/* 横線のみのテーブル */
.table-horizontal {
    border: none !important;
    border-collapse: collapse;
    border-spacing: 0;
}

    .table-horizontal th,
    .table-horizontal td {
        border: none !important;
        padding-left: 2ch;
        padding-right: 2ch;
        vertical-align: top;
    }

    /* 見出しは下線なし（すっきり） */
    .table-horizontal thead th {
        border-bottom: none !important;
        padding-top: 2ch;
    }

    /* 行全体に下線を引く（左右に余白あり） */
    .table-horizontal tbody tr.partial-border {
        position: relative;
    }

        /* 最後の行以外にだけ下線を引く */
        .table-horizontal tbody tr.partial-border:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 20px; /* 行の左右余白 */
            right: 10px;
            bottom: 0;
            height: 1px;
            background-color: #d6d6d6;
        }


.two-panels {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.panel {
    flex: 1 1 0;
}

.panel-header {
    padding: 10px 12px;
    font-weight: 600;
}

.panel-sub {
    font-size: .9rem;
    font-weight: 400;
}

.panel-body {
    min-height: 200px;
    max-height: 200px;
    overflow: auto;
}
    /* ← 高さはお好みで */
    /* スクロール内でヘッダを固定 */
    .panel-body table thead th {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
    }
    /* 余白調整（任意） */
    .panel-body .table {
        margin-bottom: 0;
    }

.content-head {
    display: flex;
    align-items: center;
    gap: 12px; /* 余白はお好みで */
}

    .content-head .head-left {
        flex: 1 1 auto; /* 左側を広げて右を押し出す */
        min-width: 0; /* 長い社名でも折り返し制御が効くように */
    }

    .content-head .btn-basic {
        margin-left: auto; /* 念のため右端へ固定 */
    }

/* 1行レイアウト用 */
.fieldset .cols {
    display: flex;
    align-items: center;
    gap: 16px; /* セクション間の間隔 */
    flex-wrap: nowrap; /* 常に1行にする（折返し不要なら） */
}

.fieldset .section {
    display: flex;
    align-items: center;
    gap: 8px; /* ラベルと入力の間隔 */
    margin: 0;
}

    .fieldset .section > div {
        margin: 0; /* 余白を消す */
    }

#lvIsKagawa {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap; /* ラベルを折り返さない */
}

/* 入力幅の最適化（任意） */
.fieldset .section input[type="date"] {
    max-width: 140px; /* 既存styleの置き換え */
}

.table-noborder,
.table-noborder th,
.table-noborder td {
    border: none !important;
}

.layout-fixed .main {
    box-sizing: border-box; /* 念のため明示 */
    min-width: 0; /* 内部の長い要素での“はみ出し”防止 */
    overflow-x: auto; /* 中の表だけ横に長い場合の保険 */
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* 検索ボタン（アイコン専用） */
.btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: filter 0.2s ease;
}

    .btn-search img {
        display: block;
        width: 40px;
        height: 40px;
    }

    .btn-search:hover {
        filter: brightness(0.9);
    }