/* -----------------------
   共通
   ----------------------- */
/* デバッグ用（ローカルのみに適用される） */
.debug {
    display: none !important;
}

/* ページ遷移時のローディング用のオーバーレイとスピナー */
.loading-overlay {
    position: fixed; /* 画面全体にかぶせるため固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 一番上に重なるように高い値にする */
}

.loading-spinner {
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    align-items: center;
}
  
.loading-spinner svg {
    width: 80px; /* ローディング画像のサイズ */
    height: 80px;
}

.loading-text {
    margin-top: 12px;
    font-size: 16px;
    color: #fff; /* 黒背景に映えるよう白にする */
}

/* ローディング中はヘッダーとフッターの要素を非表示 */
body.loading nav,
body.loading footer {
    display: none;
}

/* ag gridでバリデーションエラー時にセルに色をつける */
.cell-error {
    background-color: #ffcccc; /* セルの背景色 */
    color: #b30000; /* セルの文字色 */
}

/* ag grid内のバリデーションメッセージ */
.cell-error-message {
    color: #f00;
    white-space: pre-wrap;
    font-size: 0.75em;
    margin-top: 0.5em;
}

/* aggirdのフィルタ矯正表示 */
.ag-header-cell-menu-button, .ag-icon-menu {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
  }
.ag-header-icon {
    position: relative;
}
.ag-header-icon::after {
  content: "フィルター・絞り込み"; /* data属性の値を表示 */
  position: absolute;
  bottom: 85%; /* ボタンの上に表示 */
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  z-index: 1000; /* 他の要素より前面に表示 */
}
/* ホバー時に表示 */
.ag-header-icon:hover::after {
  opacity: 1;
}

/* ul {
    padding-left: 0;
} */

/* li {
   list-style: none;
} */

#root .container-fluid {
    max-width: 1200px;
    margin-bottom: 3em;
}

/* -----------------------
   ヘッダー
   ----------------------- */
.header-back-button {
    margin-top: 1rem;
}

.topbar .dropdown .dropdown-menu {
/* ヘッダーのドロップダウンの重なり順が上になるよう指定 */
    z-index: 2001;
}

.navbar {
    padding: 0;
}
.navbar-brand {
    font-weight: bold;
}
.navbar > .nav-link {
    background: #4e73df;
    height: 100%;
    margin-right: 2em;
    align-content: center;
}
.navbar a.nav-link {
    color: #fff;
}

/* -----------------------
   メニュー
   ----------------------- */
.menu-section i {
    margin-right: .5em;
}


/* ===========================questionnaire-detail.jsx =======================*/
/* Pの設問の背景色 */
.p_qurestion {
    display: table;
    background-color: rgb(255, 151, 151);
}

/* 編集可能なセルの基本スタイル */
.ag-theme-alpine{
    /* 高さをブラウザの高さにあわせて可変に */
    height: calc(100vh - 200px) !important;
}
.ag-theme-alpine .ag-cell {
    line-height: 1.2;
    align-content: center;
}
.ag-theme-alpine .ag-cell.editable-cell,
#page--survey-log  .ag-theme-alpine .ag-cell {
    cursor: pointer;
}

/* 特定のクラスが適用されたAg-Gridのみセル選択時の青枠を無効化 */
.ag-grid-no-cell-selection .ag-cell-focus,
.ag-grid-no-cell-selection .ag-cell-focus:focus,
.ag-grid-no-cell-selection .ag-cell.ag-cell-focus,
.ag-grid-no-cell-selection .ag-cell.ag-cell-focus:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 特定のクラスが適用されたAg-Gridのみセル選択範囲の視覚表示を無効化 */
.ag-grid-no-cell-selection .ag-cell-range-selected,
.ag-grid-no-cell-selection .ag-cell-range-selected-1,
.ag-grid-no-cell-selection .ag-cell-range-selected-2,
.ag-grid-no-cell-selection .ag-cell-range-selected-3,
.ag-grid-no-cell-selection .ag-cell-range-selected-4 {
    background-color: transparent !important;
    border: none !important;
}

/* 特定のクラスが適用されたAg-Gridのみ選択セルのハイライトを無効化 */
.ag-grid-no-cell-selection .ag-cell-highlight {
    background-color: transparent !important;
}

.ag-theme-alpine .ag-cell.editable-cell {
    border: 1px solid #bbb; /* 薄い灰色の境界線 */
    border-radius: 4px;
    /* cursor: pointer; */
}
/* Ag-Gridでフィルターやセレクトボックスが開く時に真っ白になるのを解消 */
.ag-root-wrapper-body.ag-layout-normal {
    height: auto !important;
    min-height: 100% !important;
}

/* ホバー時のスタイル */
.ag-theme-alpine .ag-cell.editable-cell:hover {
    background-color: #cce5ff;
}

/* フォーカス時のスタイル */
.ag-theme-alpine .ag-cell.editable-cell:focus-within {
    border-color: #99ccff;
    box-shadow: 0 0 5px rgba(153, 204, 255, 0.6); /* 薄い青色の影に変更 */
}

/* 編集モード中のセルのスタイル */
.ag-theme-alpine .ag-cell.editable-cell.ag-cell-editing {
    border: none;
    background-color: transparent;
}

/* 編集中の入力フィールドのスタイル */
.ag-theme-alpine .ag-cell.editable-cell.ag-cell-editing .ag-input-field-input {
    border: 1px solid #99ccff; /* 薄い青色に変更 */
}

/* ===========================SuverDattaLogDetail.jsx =======================*/
/* メタ情報部分 */
.log-meta section {
    margin: 5px 0;
    font-size: .9em;
}
.log-meta section i {
    margin-right: .5em;
}

/* 質問セクション全体 */
.log-detail-container {
    max-height: calc(100vh - 350px); /* スクロール可能な高さを設定 */
    overflow-y: scroll; /* 縦スクロールを有効化 */
    padding: 10px; /* 内容に余白を追加 */
    font-size: .9em;
}
.log-detail-container table th{
    width: 30%;
}
/* スクロールバーを常時表示 */
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.form-pass {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
.form-pass i {
    display: flex;
     align-items: center;
     cursor: pointer;
}

/* =========================== お問い合わせフォーム =======================*/
/* ラベル背景 */
.contact-label {
    margin: 0;
}
.cf_req{
	font-size:.75em;
	padding: 5px;
	background: #f79034;/*オレンジ*/
	color: #fff;
	border-radius: 3px;
	margin-right: 5px;
}

/* =========================== 回答データ一覧 =======================*/
/* 一覧タブ */
.react-tabs__tab-list {
    border-bottom-color: #ccc !important;
    font-size: .9em !important;
}
.react-tabs__tab {
    font-weight: bold;
    background: #eee;
    border-radius: 5px 5px 0 0;
    margin-right: .5em;
    bottom: -1px !important;
    padding: .75em 1em !important;
    min-width: 10em;;
    /* position: unset !important; */
    text-align: center;
    border: none !important;
}
.react-tabs__tab--selected {
    margin-bottom: -1px;
    border: 1px solid #ccc !important;
    border-bottom: 1px solid white !important;
}
/* 一覧タブ、2階層目 */
.react-tabs__tab-panel .react-tabs__tab-list,
.tab-border .react-tabs__tab-list {
    border-bottom: 1px solid #ccc !important;
}
.react-tabs__tab-panel .react-tabs__tab-list .react-tabs__tab,
.tab-border .react-tabs__tab {
    padding: .5em 1em !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    margin-right: 1.5em !important;
    border: none !important;
    background: none !important;
}
.react-tabs__tab-panel .react-tabs__tab-list .react-tabs__tab--selected,
.tab-border .react-tabs__tab--selected {
    border-bottom: 3px solid #000 !important;
    position: initial;
}

/* ドラッグ＆ドロップ可能な領域のスタイル */
.file-drop-area {
    border: 2px dashed #ccc;
    padding: 20px;
    margin-bottom: 10px;
    text-align: center;
    cursor: pointer;
}

/* メッセージ部分のスタイル */
.file-drop-message {
    margin-bottom: 10px; /* メッセージとリストの間隔 */
    text-align: center; /* メッセージ部分は中央揃え */
}

/* 条件リストのスタイル */
.file-conditions {
    text-align: left; /* リスト部分を左揃え */
    margin: 0 auto; /* 中央に揃えるための余白調整 */
    padding-left: 20px; /* インデント */
    display: inline-block; /* リスト全体を中央揃え */
}

/* =========================== エクセルアップロード時のプログレスバー =======================*/
.progress-container {
    position: relative;
    text-align: center;
    width: 100%;
    padding: 20px;
}

.progress-bar-wrapper {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #f3f3f3;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #28a745;
    border-radius: 10px;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 14px;
    color: white;
}

.progress-record {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

/* =========================== データベース閲覧、グラフ集計ページ =======================*/
/* 集計値セルの展開一覧。publictab.jsx の FREQUENCY_ROW_HEIGHT_EXPANDED (200px) から
   セルの余白を引いた値にすること。超えると行が自動で伸びてしまう。 */
.open-totalling-list {
    cursor: pointer;
    white-space: normal;
    display: block;
    max-height: 180px;
    overflow-y: auto;
}

.close-totalling-list {
    cursor: pointer;
    font-weight: bold;
}
/* グラフページのナビのみ色変更 */
#page--graph-view nav.navbar{
    background-color: darkblue !important;
    color: #fff !important;
}
#page--graph-view .navbar > .nav-link {
    background: #fff;
    color: darkblue !important;
}
#page--graph-view .navbar-light .navbar-brand,
#page--graph-view .navbar-light .text-gray-600 {
    color: #fff !important;
}
#page--graph-view .debug {
    background: #000;
}
/* 集計値の表示 */
#page--graph-view .ag-theme-alpine .ag-cell {
    /* カーソルをポインターでなくす */
    cursor: unset;
}
#page--graph-view .ag-theme-alpine .ag-cell[col-id="checkbox"] ,
.ag-checkbox-input-wrapper input, .ag-checkbox-input-wrapper input{
    cursor: pointer;
}
#page--graph-view [row-id="b-1"] .ag-cell {
    align-content: flex-start;
    padding-top: .5em;
}

/* =========================== 新規作成・閲覧・編集(暫定) =======================*/
  /* 単位表示用 */
  .unit-label {
    margin-left: 8px;
    white-space: nowrap;
  }
  
  /* テキストエリア設定 */
  .textarea-resizable {
    resize: vertical;
  }
  
  /* ドロップダウン候補リスト */
  .dropdown-options {
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  }
  
  .dropdown-item-hover:hover {
    background-color: #f8f9fa;
  }
  
  /* セクション区切り線 */
  .section-divider {
    border-top: 1px solid #666;
    margin: 0.5rem 0 1rem 0;
  }
  
  /* 文字が途切れないオプション */
  .option-nowrap {
    white-space: normal;
    word-wrap: break-word;
  }
  
/* モーダル内の解説用HTMLのスタイル */
.questionnaire-explanation-modal-content {
    text-align: left;
    font-size: 0.9rem;
}

.questionnaire-explanation-modal-content p {
    margin-bottom: 0.5rem;
}

.questionnaire-explanation-modal-content .formula {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px dashed #adb5bd;
    background-color: #fff;
    font-family: monospace;
    font-size: 0.9em;
    overflow-x: auto; /* 数式が長い場合に横スクロールを許可 */
}

.questionnaire-explanation-modal-content .formula-note {
    display: block;
    text-align: right;
    font-size: 0.8em;
    color: #6c757d;
    margin-top: 5px;
}

.questionnaire-explanation-modal-content .formula-sub-note {
    display: block;
    font-size: 0.8em;
    color: #6c757d;
    margin-top: 3px;
}

.questionnaire-explanation-modal-content h4,
.questionnaire-explanation-modal-content h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #343a40;
}

.questionnaire-explanation-modal-content img {
    display: block; /* imgをブロック要素にしてmargin autoを有効に */
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* 親要素の幅を超えないようにする */
    height: auto; /* アスペクト比を維持 */
}

/* モーダル内解説画像の個別スタイル */
.questionnaire-explanation-modal-content .modal-explanation-image {
    width: 100%;
    max-width: 800px; /* 最大幅を指定 */
}

.questionnaire-explanation-modal-content .modal-explanation-image:first-of-type {
    margin-bottom: 25px; /* 最初の画像の下にマージンを追加 */
}

.questionnaire-explanation-modal-content .turbine-status-table {
    width: 100%;
    border-collapse: collapse; /* テーブルの罫線を重ねる */
    margin-top: 10px;
    table-layout: fixed;
    border: 1px solid #dee2e6; /* テーブル外枠の罫線を追加 */
}

.questionnaire-explanation-modal-content .turbine-status-table th,
.questionnaire-explanation-modal-content .turbine-status-table td {
    border: 1px solid #dee2e6; /* セルの罫線 */
    padding: 8px;
    text-align: left;
    font-size: 0.85em;
    word-wrap: break-word;
}

.questionnaire-explanation-modal-content .turbine-status-table th {
    background-color: #e9ecef;
    font-weight: bold;
    border: 1px solid #dee2e6; /* th にも罫線を明示 */
}

/* カテゴリ番号表示用の固定幅コンテナ */
.category-number-container {
    display: inline-block;
    width: 30px;  /* 固定幅 */
    text-align: center;
    margin-right: 1rem;
}

/* 条件付き入力要素の非表示 */
.conditional-hidden {
    display: none !important;
}

/* 条件付き入力要素の不活性化（行は表示したまま無効化） */
.conditional-disabled {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    opacity: 0.6;
}

.conditional-disabled td,
.conditional-disabled th {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
}

.conditional-disabled input,
.conditional-disabled textarea,
.conditional-disabled select,
.conditional-disabled button {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    border-color: #ced4da !important;
    cursor: not-allowed !important;
    opacity: 0.8;
    pointer-events: none;
}

.conditional-disabled .form-control:disabled,
.conditional-disabled .form-control[readonly] {
    background-color: #e9ecef !important;
    opacity: 1;
}

.form-control {
    color: #000;
}
.form-control::placeholder {
    color: #a5a5a5;
    opacity: 1; /* Firefoxでのプレースホルダーの透明度を調整 */
}

/* 下部進捗バー */
.progress-bar-container-bottom {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.progress-bar-background {
    flex: 1;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
    border-radius: 4px;
}

.progress-text {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    min-width: 45px;
    text-align: right;
}




/* =========================== 新規回答 =======================*/

.question-text {
    font-weight: bold;
}

.question-text-prefix {
    font-weight: bold;
}

.questionnaire-registration .form-group {
    margin-bottom: 0;
}
.form-check {
    margin-right: 1.5em;
}
.questionnaire-registration {
    font-size: .9em;
}
.questionnaire-registration th{
    align-content: center;
}
.questionnaire-registration tr.cat-line{
    border-top: 4px double #ddd;
}
.questionnaire-registration tr.cat-line th,
.questionnaire-registration tr.cat-line td {
    border-top: 0;
}
.number-circle {
    background: #4e73df;
    color: #fff !important;
    font-weight: bold;
    width: 2em;
    text-align: center;
    height: 2em;
    display: inline-block;
    border-radius: 7px;
    align-content: center;
}

/* =========================== ユーザ作成 =======================*/
.user-create > div {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: .75em;
    margin: 0;
}
.user-create div label {
    max-width: 10em;
    flex: 0 0 10em;
}
.user-create div span {
    width: 100%;
}
.user-create * {
    margin-bottom: 0;
}
.sub-text {
    display: block;
    font-size: 0.7em;
}
.btn i.fa-fw {
    margin-right: 0.5em;
}

/* =========================== ユーザー管理・一覧 =======================*/
.my-user {
    font-weight: bold;
}
.my-user .ag-cell,
#reporter_name {
    cursor: not-allowed !important;
}
.ag-ltr .my-user .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
.ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within #reporter_name{
    border: none;
}

.invalid-user {
  background-color: #f0f0f0 !important;
  color: #999 !important;
}

.unapproved-user {
  color: red;
  font-weight: bold;
}

.copy-url-button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: #007bff;
    color: #fff;
    cursor: pointer;
}

.swal2-html-container form {
    text-align: left;
    padding-top: 1em;
    padding-left: 2em;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    background-color: #4e73df!important; /* ボタンの背景色を青に */
}

/* 削除など破壊的操作の確認ボタンは危険色（赤）にする。
   上の青ルール(!important)を上書きするため、クラスを足して詳細度を上げている。 */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm.swal2-confirm-danger {
    background-color: #dc3545 !important; /* Bootstrap 5.3 btn-danger と同色 */
}

/* 削除確認モーダルのキャンセル（中止）ボタンは背景色なし（アウトライン表示）にして、
   危険色の実行ボタンと視覚的に区別する。SweetAlert2 既定のグレー背景(#6e7881)を上書きする。 */
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel.swal2-cancel-plain {
    background-color: transparent !important;
    color: #5a5c69 !important; /* テキストは視認可能なダークグレー */
    border: 1px solid #d1d3e2 !important; /* 枠線で押せる範囲を明示 */
}


/* =========================== グループ管理 =======================*/
.invalid-group {
    background-color: #f0f0f0 !important;
    color: #999 !important;
  }

/* テキストエリア拡大（クリック時） */
textarea.expand-on-focus {
  min-height: 2.5em;
  width: 100%;
  resize: vertical;
}
textarea.expand-on-focus:focus {
  min-height: 8em;
  box-shadow: 0 0 4px #007bff;
  border-color: #007bff;
  outline: none;
}

/* カテゴリ付き設問テーブルの列幅調整 */
.static-category-table {
  table-layout: fixed;
  width: 100%;
  font-size: .9em;
}

/* =========================== Questionnaire Registration テーブルスタイル =======================*/
/* メインテーブルの境界線（Bootstrapのtableクラスより優先度を上げる） */
table.table.table-bordered.questionnaire-registration-table {
  table-layout: fixed;
  width: 100%;
  border: none;
}

table.table.table-bordered.questionnaire-registration-table td,
table.table.table-bordered.questionnaire-registration-table th {
  border-color: #56689f;
}

/* 連番セル */
table.table.table-bordered.questionnaire-registration-table .questionnaire-registration-number-cell {
  width: 60px;
  min-width: 60px;
  border-right: dotted 1px #56689f;
    border-left: solid 1px #56689f;
}
table.table.table-bordered.questionnaire-registration-table .questionnaire-registration-question-cell {
    border-right: none;
}
table.table.table-bordered.questionnaire-registration-table .questionnaire-registration-input-cell,
table.table.table-bordered.questionnaire-registration-table tr th:nth-child(2) {
    border-left: none;
}
table.table.table-bordered.questionnaire-registration-table tr th {
    border-right: dotted 1px #56689f;
    border-left: none;
}

/* カテゴリセル（動的幅） */
table.table.table-bordered.questionnaire-registration-table .questionnaire-registration-category-cell {
  min-width: 100px;
}

/* th要素のデフォルトスタイルをリセット（tdと同じ見た目にする） */
table.table.table-bordered.questionnaire-registration-table th {
  font-weight: normal;
  background-color: #4e73df14;
  color: #56689f;
  font-weight: bold;
}

/* 質問内容セル（固定幅400px） */
table.table.table-bordered.questionnaire-registration-table .questionnaire-registration-question-cell,
table.table.table-bordered.questionnaire-registration-table .questionnaire-registration-question-cell-narrow {
  width: 400px;
  min-width: 400px;
}
/* 入力フィールドセル */
table.table.table-bordered.questionnaire-registration-table .questionnaire-registration-input-cell {
}

/* ドロップダウンオプション項目 */
.dropdown-option-item {
  cursor: pointer;
}

/* ラジオボタンの最小幅 */
.radio-clear-button {
  min-width: 90px;
}

/* =========================== Average Calculation テーブルスタイル =======================*/
/* 平均値計算説明テーブルの境界線（Bootstrapのtableクラスより優先度を上げる） */
table.table.table-bordered.average-calculation-table {
  table-layout: fixed;
  width: 100%;
  border: none;
}

table.table.table-bordered.average-calculation-table td,
table.table.table-bordered.average-calculation-table th {
  border-color: #56689f;
  border-width: 1px;
  border-style: solid;
}

/* ヘッダー行のスタイル */
table.table.table-bordered.average-calculation-table th {
  font-weight: bold;
  text-align: center;
  padding: 12px 8px;
}

/* データ行のスタイル */
table.table.table-bordered.average-calculation-table td {
  padding: 10px 8px;
  vertical-align: top;
}

/* データ形式列（1列目）のスタイル */
table.table.table-bordered.average-calculation-table td:first-child {
  width: 25%;
}

/* 例列（2列目）のスタイル */
table.table.table-bordered.average-calculation-table td:nth-child(2) {
  width: 20%;
  font-family: monospace;
}

/* 処理結果列（3列目）のスタイル */
table.table.table-bordered.average-calculation-table td:nth-child(3) {
  width: 25%;
}

/* 計算への影響列（4列目）のスタイル */
table.table.table-bordered.average-calculation-table td:nth-child(4) {
  width: 30%;
  text-align: center;
}

/* セル内の改行を適切に表示 */
table.table.table-bordered.average-calculation-table td br {
  line-height: 1.2;
}

/* 進捗バーの幅設定 */
.progress-bar-dynamic-width {
  /* 動的に設定されるため、JSで制御 */
}

/* デバッグ用質問テキスト */
.debug-question-text {
  font-size: 10px;
}
.static-category-table th,
.static-category-table td {
  overflow-wrap: break-word;
  word-break: break-all;
}
.static-category-table th:nth-child(1),
.static-category-table td:nth-child(1) { /* id */
  max-width: 1em;
  width: 1em;
  align-content: center;
  text-align-last: center;
  background-color: #fafafa;
}

.static-category-table th:nth-child(2),
.static-category-table td:nth-child(2) { /* 大カテゴリ */
  max-width: 8em;
  width: 8em;
}
.static-category-table th:nth-child(3),
.static-category-table td:nth-child(3) { /* 中カテゴリ */
  max-width: 8em;
  width: 8em;
}
.static-category-table th:nth-child(4),
.static-category-table td:nth-child(4) { /* 設問内容 */
  max-width: 10em;
  width: 10em;
}
.static-category-table td:last-child label{ /* 設問内容 */
    margin-right: 1em;
}
.static-category-table th:nth-child(5),
.static-category-table td:nth-child(5) { /* 解答欄 */
  width: auto;
}

.static-category-table input[type="text"],
.static-category-table textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: #fffef0;
}

/* =========================== 設問編集 =======================*/
/* モーダル全体のコンテナ */
.swal2-popup.question-options-modal {
    width: 800px !important;
}

/* 新規追加エリア */
.question-options-modal .add-option-container {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

/* 選択肢追加を囲む背景*/
.question-options-modal .question-text-display {
    margin-bottom: 10px;
    padding: 1em 10px 0;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.question-options-modal .add-option-container input.label-input,
.question-options-modal .add-option-container input.value-input {
    width: 45%;
}

.question-options-modal .add-option-container button {
    margin: 0;
    min-width: 80px;
}

/* 登録済みリストのテーブル */
.question-options-modal .options-table-container {
    border: 1px solid #ddd;
    border-radius: 5px;
    max-height: 220px;
    overflow-y: auto;
}

.question-options-modal table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 0;
}

.question-options-modal table th,
.question-options-modal table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-size: .8em;
}

.question-options-modal table th {
    background-color: #f8f9fa;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.question-options-modal details {
    margin-top: -38px;
    position: relative;
}

/* =========================== グラフダウンロードログ =======================*/
.center-aligned-header {
    justify-content: center;
}

.unauthenticated-user-cell {
  text-align: center;
}

/* ===== 集計・グラフ コントロールパネル ===== */
.graph-control-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 14px 18px;
}
.graph-control-panel--head {
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}
.graph-control-panel--body {
  border-radius: 0 0 8px 8px;
  margin-bottom: 20px;
}
.graph-control-label {
  font-weight: bold;
  min-width: 9em;
  margin-bottom: 0;
}
/* .custom-select（sb-admin-2/BS4 由来）は width:100%。子孫セレクタで特異度を
   上回らせ、読み込み順に依存せず確実に auto 幅で表示する。 */
.graph-control-panel .custom-select {
  width: auto;
  display: inline-block;
}
.graph-control-submit {
  margin-left: auto;
}

/* --- グラフ切替中のガード ---
   集計種類セレクトの表示は即時に変わるが、グラフ本体（lazy）の差し替えは
   useDeferredValue で遅延するため、チャンクのロードが終わるまで画面には
   「前のグラフ」が残る。その間の操作は前のグラフに効いてしまうので、
   グラフ領域を操作不可にしたうえで切替中であることを示す。 */
.graph-switching {
  position: relative;
}
/* fieldset を素の div と同じ見た目にする。上段の集計種類セレクトと下段の
   年度選択行を1枚のカードに見せる CSS が崩れないよう、既定の
   border/padding/margin/min-width をすべて打ち消す。 */
.graph-switching-area {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
/* 一瞬で終わる切替（ロード済みグラフ同士）でチラつかせないよう、減光と
   オーバーレイの表示だけ animation-delay で遅らせる。操作の遮断は即時。 */
.graph-switching-area:disabled {
  pointer-events: none;
  animation: graph-switching-dim 0.15s ease 0.2s both;
}
@keyframes graph-switching-dim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.45;
  }
}
.graph-switching-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  z-index: 10;
  pointer-events: none;
  animation: graph-switching-fade-in 0.15s ease 0.2s both;
}
@keyframes graph-switching-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.graph-switching-overlay-body {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}