/* --- 変数・リセット --- */
:root {
  --side-bg: #2c3e50;
  --main-bg: #f4f7f9;
  --accent: #3498db;
  --text: #2d3436;
  --text-muted: #636e72;
  --white: #ffffff;
  --border: #dcdde1;
  --success: #27ae60;
  --danger: darkred;

  /* よく使う薄い色（業者のテーマでも変わらない） */
  --bg-input: #fafafa;       /* 入力欄・入力エリアの背景 */
  --bg-head: #f8f9fa;        /* 表の見出し・計算ボックスの背景 */
  --bg-muted: #f1f2f6;       /* 小さな表の見出し・補助ボタンの hover */
  --bg-gray: #e2e8f0;        /* 戻る・キャンセルのボタン、段階入力の見出し */
  --border-light: #eee;      /* 表の行の区切り線 */
  --border-dashed: #b2bec3;  /* 点線の枠（管理者用の欄・参考の枠） */
  --info: #0984e3;           /* 青（追加・確認の枠） */
  --danger-bg: #fdecea;      /* 赤の背景（エラーの帯・削除の行） */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", sans-serif;
  background-color: var(--main-bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  margin: 0;
}

/* --- 全体レイアウト --- */
.app-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* --- サイドバー (PC) --- */
.sidebar {
  width: 250px;
  background-color: var(--side-bg);
  color: var(--white);
  position: fixed;
  height: 100vh;
  padding: 40px 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.sidebar-logo {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  color: var(--accent);
  letter-spacing: 1px;
}

.sidebar-nav-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.sidebar ul {
  list-style: none;
  flex-grow: 1;
}

.sidebar ul li a {
  display: block;
  padding: 15px 30px;
  color: #bdc3c7;
  text-decoration: none;
  transition: 0.3s;
  border-left: 4px solid transparent;
}

.sidebar-footer {
  margin-top: auto;
  padding: 20px;
  text-align: center;
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-left: 4px solid var(--accent);
}

.logout-btn {
  width: auto;
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  color: #bdc3c7;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.logout-btn:hover {
  background-color: rgba(231, 76, 60, 0.2);
  color: var(--white);
  border-color: rgba(231, 76, 60, 0.4);
}

/* --- メインコンテンツ --- */
.main-content {
  margin-left: 250px;
  flex: 1;
  width: calc(100% - 250px);
  padding: 40px;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border);
}

/* 見出しの色は、業者のテーマでも変えない（--side-bg は業者のテーマで緑になるため、直書きのまま） */
header h1 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #2c3e50;
}

/* --- カードデザイン --- */
.card {
  background: var(--white);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.card h3 {
  margin-bottom: 20px;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--side-bg);
}

.card p {
  color: var(--danger);
  font-weight: bold;
  padding: 10px 0;
  border-bottom: 2px solid var(--border);
  display: inline-block;
  margin-bottom: 10px;
}

/* --- フォーム・ボタン --- */
.form-group {
  margin-bottom: 5px;
}

.form-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 0.9rem;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
}

.btn {
  padding: 10px 20px;
  height: 42px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: 0.2s;
  text-align: center;
}

/* 共通の hover（各 variant の hover より前に置く） */
.btn:hover {
  filter: brightness(95%);
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
}

.btn-primary:hover {
  filter: brightness(90%);
}

.btn-danger {
  background-color: var(--danger);
  color: var(--white);
  border: none;
}

.btn-danger:hover {
  filter: brightness(90%);
}

/* 補助の操作（Button の variant を省略したときの初期値。Button.jsx が btn-${variant} で付ける） */
.btn-secondary {
  background-color: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background-color: var(--bg-muted);
}

/* 戻る・キャンセル */
.btn-cancel {
  background-color: var(--bg-gray);
  color: var(--text);
}

.btn-cancel:hover {
  background-color: #cbd5e1;
}

/* 押せないボタン（variant の hover より後ろに置く） */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}


/* --- テーブル --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background: var(--bg-head);
  padding: 15px;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.data-table td {
  padding: 15px;
  border-bottom: 1px solid var(--border-light);
}

/* 列の揃え（DataTable の columns の align） */
.data-table .align-left {
  text-align: left;
}

.data-table .align-center {
  text-align: center;
}

.data-table .align-right {
  text-align: right;
  font-variant-numeric: tabular-nums; /* 数字の幅をそろえて、桁を見やすくする */
}


.data-table .btn {
  padding: 5px 15px;
  font-size: 0.85rem;
}

/* --- ログイン画面専用 --- */
.login-page {
  background: var(--side-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.login-page .main-content {
  margin-left: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.login-box {
  background: var(--white);
  padding: 40px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* --- バリデーション & アラート --- */
.required {
  color: var(--danger);
  font-size: 0.9em;
  margin-left: 4px;
  vertical-align: top;
}

.error-text {
  color: var(--danger);
  font-size: 0.7rem;
  margin-top: 5px;
  margin-bottom: 10px;
  display: block;
  font-weight: 600;
  line-height: 1.2;
}

input.field-error,
select.field-error,
textarea.field-error {
  border: 2px solid var(--danger);
  background-color: #fff5f5;
}

.text-danger {
  color: var(--danger);
  font-weight: bold;
}

.action-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  font-weight: bold;
  border: 1px solid transparent;
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

/* エラー（今まで定義がなく、各画面で style を使って赤くしていた） */
.alert-danger {
  position: relative;
  background-color: var(--danger-bg);
  color: var(--danger);
  border-color: #f5c6cb;
}

/* × ボタンがある帯（AlertMessage で onClose があるとき）だけ、右に × の場所を空ける */
.alert-danger:has(.alert-close) {
  padding-right: 44px;
}

.alert-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  padding: 4px 8px;
  border: none;
  background: none;
  color: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.alert-close:hover {
  opacity: 0.7;
}

/* 帯の中の文章：カードの中に置いても .card p の下線・余白・色がつかないようにする
   （.card p より後ろに書いているので、こちらが優先される） */
.alert p {
  display: block;
  margin: 0;
  padding: 0;
  border-bottom: none;
  color: inherit;
  font-weight: inherit;
}

/* タブレット・スマホ：帯の文字を小さくし、余白を狭くする（太字はそのまま）
   （文章が長い帯が画面を大きく占めて、読みにくかったため） */
@media screen and (max-width: 1024px) {
  .alert {
    margin-bottom: 15px;
    padding: 10px 12px;
    font-size: 0.8rem;
    line-height: 1.5;
  }

  /* 帯の中のボタン（［すべて現況に合わせる］など）：帯の文字に合わせて小さくし、赤い枠で帯の操作とわかるようにする */
  .alert-action .btn {
    height: auto;
    padding: 6px 14px;
    font-size: 0.8rem;
    color: var(--danger);
    border-color: var(--danger);
  }

  /* 行として置いた赤・オレンジの注意書き（「※未保存の変更があります」「新しい版として保存をおすすめします」など）も
     帯と同じ大きさにする。表の中の「承認なし」などの <span> は変えない */
  div.text-danger,
  p.text-danger,
  div.text-warning {
    font-size: 0.8rem;
  }
}





/* --- 詳細リスト --- */
.detail-list {
  margin: 20px 0;
}

.detail-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}

.detail-item dt {
  width: 150px;
  font-weight: bold;
  color: var(--text-muted);
}

.detail-item dd {
  margin: 0;
  flex: 1;
}

/* --- その他パーツ --- */
.add-quote-area {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
}

.add-quote-area p.no-quote-msg {
  color: var(--text-muted);
  font-weight: bold;
  margin-bottom: 15px;
  padding: 0;
  border-bottom: none;
}

.btn-submit-quote {
  margin-top: 15px;
  display: block;
}

/* --- テーマ：発注業者用 (緑ベース) --- */
.theme-contractee {
  --side-bg: rgb(0, 64, 64);
  --accent: rgb(51, 185, 6);
}

.theme-contractee .btn-primary {
  background-color: #2ecc71;
}

.theme-contractee .btn-primary:hover {
  background-color: rgb(13, 155, 27) !important;
}

.theme-contractee .sidebar ul li a:hover,
.theme-contractee .sidebar ul li a.active {
  border-left: 4px solid var(--accent);
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}

.doc-item {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  background: #f9f9f9;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.doc-item form {
  margin-top: auto;
  padding-top: 15px;
}

.action-buttons-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.preview-box {
  width: 100%;
  height: 200px;
  background: black;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  overflow: hidden;
  position: relative;
}

.preview-box iframe,
.preview-box img {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

details summary {
  list-style: none;
  font-weight: bold;
}

/* 記号は文字コードに左右されないようエスケープで書く（\25BC＝▼、\25B2＝▲） */
details summary::before {
  content: "\25BC  ";
  font-size: 0.7rem;
}

details[open] summary::before {
  content: "\25B2  ";
}

.remarks-container {
  margin: 5px 0;
  text-align: center;
  width: 100%;
}

.remarks-container details {
  width: 100%;
}

.remarks-container details summary {
  cursor: pointer;
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: bold;
  list-style: none;
  padding: 5px;
}

.remarks-container details summary::before {
  content: "\25BC  ";
  font-size: 0.7rem;
}

.remarks-container details[open] summary::before {
  content: "\25B2  ";
}

.remarks-container details p {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 5px 0;
  padding: 8px;
  background: var(--white);
  border-radius: 4px;
  font-size: 0.85rem;
  color: #555;
  border: 1px solid var(--border-light);
}

.kana-filter a::after {
  content: " | ";
  color: #ccc;
}

.kana-filter a:last-child::after {
  content: "";
}

.kana-filter {
  margin: 10px 0;
}

.pagination {
  margin: 10px 0 0;
}

/* --- レスポンシブ (タブレット以下: 1024px) --- */
@media screen and (max-width: 1024px) {
  .main-content {
    padding: 25px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- レスポンシブ (スマホ: 768px以下) --- */
@media screen and (max-width: 768px) {
  .app-container,
  body {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    padding: 15px 0;
  }

  .sidebar-logo {
    margin-bottom: 15px;
  }

  .sidebar-nav-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex-grow: 0;
    padding: 0 10px;
  }

  .sidebar ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 0;
    margin: 0;
  }

  .sidebar ul li a {
    padding: 10px 15px;
    font-size: 0.85rem;
    border-left: none;
    border-bottom: 3px solid transparent;
  }

  .sidebar ul li a.active {
    border-bottom: 3px solid var(--accent);
  }

  .sidebar-footer {
    padding: 0;
    margin-top: 5px;
    text-align: center;
    width: auto;
  }

  .logout-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    width: auto;
    display: inline-block;
  }

  .main-content {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    padding: 20px 15px;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .btn {
    width: 100%;
  }

  /* テーブルのカード化レイアウト */
  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table thead {
    display: none;
  }

  .data-table tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5px;
    border-bottom: 1px dashed var(--border-light);
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: var(--text-muted);
    font-size: 0.8rem;
  }

  .data-table tr td:last-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5px;
  }

    /* 項目名を出さないセル
     ・最後の列のうち、ボタンが入っているセル（操作の列）
     ・「データがありません」の行（colSpan で1つにまとめたセル）
     ※ 判定履歴のように最後の列が「ファイル」の表もあるため、:last-child だけでは消さない */
  .data-table td:last-child:has(.btn)::before,
  .data-table td[colspan]::before {
    display: none;
  }


  /* 詳細リストのスマホ対応 */
  .card .detail-list {
    margin: 0;
  }

  .card .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .card .detail-item dt {
    width: 40%;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0;
  }

  .card .detail-item dd {
    width: 60%;
    text-align: right;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
  }

  .card .action-buttons-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  .card .action-buttons-form .btn {
    width: 100%;
    padding: 5px;
    font-size: 0.9rem;
  }

  .btn-submit-quote {
    width: 100%;
  }
}

/* --- ログイン用 --- */
.login-content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--side-bg);
}

.login-error-text {
  text-align: center;
}

.login-form-group-mb {
  text-align: left;
  margin-bottom: 20px;
}

.login-submit-btn {
  width: 100%;
}

.login-label {
  margin-bottom: 0;
  font-weight: bold;
}

.login-image {
  font-size: 2rem;
  font-weight: 900;
  color: var(--side-bg);
  text-align: center;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

/* --- パスワード表示切り替えボタン --- */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-toggle-btn {
  margin-bottom: 20px; /* ★追加 */
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
}

.password-toggle-btn:hover {
  text-decoration: underline;
}

/* --- 事前承認設定画面スタイル --- */
.policy-card-desc {
  color: var(--text);
  font-weight: bold;
  border-bottom: none;
  padding: 0;
}

.policy-card-subtext {
  font-size: 0.85rem;
  display: block;
  margin-bottom: 15px;
  color: var(--text-muted);
}

/* 計算ボックス（基本：スマホ時は中央寄せ） */
.policy-calc-box {
  background-color: var(--bg-head);
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center; /* スマホ時は中央揃え */
  font-size: 0.9rem;
  font-weight: bold;
}

.policy-calc-text {
  line-height: 1.6;
}

.policy-calc-sub {
  color: var(--text);
  font-weight: bold;
}

/* 画像ラッパー（スマホ時は中央） */
.policy-calc-image-wrapper {
  margin-top: 15px;
  display: flex;
  justify-content: center; /* スマホ時は中央寄せ */
}

/* 画像本体：枠線なし・適切な幅設定 */
.policy-calc-image {
  width: 100%;
  max-width: 320px;
  height: auto;
  border: none;
  border-radius: 0;
  display: block;
}

/* ★ PC時（769px以上）のみ左寄せに切り替え */
@media screen and (min-width: 769px) {
  .policy-calc-box {
    text-align: left; /* PC時はテキスト左寄せ */
  }

  .policy-calc-image-wrapper {
    justify-content: flex-start; /* PC時は画像左寄せ */
  }
}

/* フォーム要素・その他パーツ */
.policy-radio-group {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-top: 8px;
}

.policy-radio-label {
  cursor: pointer;
  font-weight: normal;
}

.policy-radio-input {
  margin-right: 6px;
}

.policy-margin-box {
  background: var(--bg-input);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}

.policy-margin-input {
  max-width: 200px;
}

.policy-acknowledge-box {
  background: #fff3cd;
  border: 1px solid #ffeeba;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.policy-acknowledge-label {
  cursor: pointer;
  font-weight: bold;
  color: #856404;
  margin: 0;
}

.policy-acknowledge-checkbox {
  margin-right: 8px;
}

.policy-cancel-btn {
  background: var(--bg-gray);
  color: var(--text);
}

.policy-warning-alert {
  margin-bottom: 20px;
  color: var(--danger);
  font-weight: bold;
}

/* 案件詳細：請求状況（現況確認表｜ベース明細｜毎次明細） */
.billing-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.billing-summary-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.billing-summary-title {
  font-size: 13px;
  color: var(--text-muted);
}

.billing-summary-main {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--side-bg);
}

.billing-summary-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.billing-summary-sub.is-warn {
  color: var(--danger);
  font-weight: bold;
}

.billing-summary-panel .btn {
  margin-top: auto; /* ボタンをパネルの下にそろえる */
  align-self: flex-start;
}

@media screen and (max-width: 768px) {
  .billing-summary {
    grid-template-columns: 1fr;
  }
}

/* 管理者は4枠（タブレットは2列、スマホは1列） */
.billing-summary.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 1024px) {
  .billing-summary.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .billing-summary.cols-4 {
    grid-template-columns: 1fr;
  }
}


/* 確認・入力ダイアログ（DialogHost） */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000; /* サイドバー(1000)・PDF表示(2000)より上 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
}

.dialog {
  width: 100%;
  max-width: 440px;
  padding: 24px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dialog-title {
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--side-bg);
}

.dialog-message {
  white-space: pre-wrap; /* 文言の \n で改行 */
  line-height: 1.6;
}

.dialog-input {
  width: 100%;
  margin-top: 12px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* 小さいボタン（表のセルの中の操作など）
   ※ .data-table .btn より後ろに置く（同じ強さの指定なので、後ろが勝つ） */
.btn.btn-sm {
  height: auto;
  padding: 2px 8px;
  font-size: 12px;
}

/* 小さいボタンを並べる（折り返しあり） */
.btn-row-sm {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

@media screen and (max-width: 768px) {
  .btn.btn-sm {
    width: auto; /* スマホでも全幅にしない */
  }
}

/* ===== 小さな表（スマホでもカード型にしない表） =====
   列の幅は <colgroup> の比率（%）で固定する。
   画面が狭いときは文字を小さくして、比率を保つ（横スクロールしない） */
.compact-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

.compact-table th {
  padding: 4px 3px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
  vertical-align: bottom;
}

.compact-table td {
  padding: 4px 3px;
  border-bottom: 1px solid var(--bg-muted);
  vertical-align: middle;
  overflow-wrap: anywhere; /* 長い文字は列の幅の中で折り返す */
}

.compact-table .num {
  text-align: right;
}

.compact-table .center {
  text-align: center;
}

.compact-table input {
  width: 100%;
  min-width: 0;
  padding: 3px 4px;
  font-size: inherit; /* 表の文字の大きさに合わせる */
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  box-sizing: border-box;
}

/* 狭い入力欄で文字が隠れないよう、数値の▲▼と入力候補の▼を出さない
   （候補は入力を始めると表示される） */
.compact-table input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.compact-table input::-webkit-inner-spin-button,
.compact-table input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.compact-table input::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* 表の中の削除ボタンは列の幅いっぱいにする */
.compact-table .btn.btn-sm {
  width: 100%;
  padding: 2px 0;
}

/* 発注状況（済／未） */
.order-status {
  font-weight: bold;
}

.order-status.is-pending {
  color: var(--danger);
}

/* ===== 現況確認表：操作ボタンと戻るボタン ===== */
.survey-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 15px;
}

.survey-toolbar .btn {
  flex: 1 1 auto; /* 1列に並べて幅を分け合う（スマホの .btn 全幅を打ち消す） */
  width: auto;
}

.survey-unsaved {
  margin-bottom: 4px;
}

.survey-back {
  margin-top: 15px;
}

.survey-back .btn {
  width: auto; /* スマホでも全幅にしない */
}

/* ===== 現況確認表：タブレット・スマホ表示（SurveyCardList） ===== */
.survey-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.survey-building {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
}

.survey-building-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--border);
}

.survey-building-head .btn-row-sm {
  margin-top: 0;
}

.survey-building-name {
  font-size: 1.05rem;
  color: var(--side-bg);
}

.survey-floor {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.survey-floor:last-child {
  border-bottom: none;
}

.survey-floor-side {
  flex: 0 0 64px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.survey-floor-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.survey-floor-actions .btn.btn-sm {
  width: 100%; /* 階のボタンは縦に並べて幅をそろえる */
  padding: 2px 0;
}

.survey-floor-body {
  flex: 1;
  min-width: 0; /* 表を残りの幅に収める */
}

.survey-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
}

/* ===== スマホ（768px以下）：文字を小さくして比率を保つ ===== */
@media screen and (max-width: 768px) {
  .survey-card {
    padding: 16px 12px; /* カードの余白を減らして表を広くする */
  }

  .compact-table {
    font-size: 10px;
  }

  .compact-table th {
    font-size: 9px;
  }

  .compact-table input {
    padding: 2px 3px;
  }

  .survey-building {
    padding: 8px;
  }

  .survey-building-name {
    font-size: 0.95rem;
  }

  .survey-floor {
    gap: 6px;
  }

  .survey-floor-side {
    flex-basis: 52px;
  }

  .survey-floor-actions .btn.btn-sm,
  .compact-table .btn.btn-sm {
    font-size: 10px;
  }
}
/* 合計欄（DetailList variant="totals"）：金額を右寄せにして、カードの右側にまとめる
   ※ スマホ用の .card .detail-list より後ろに置く */
.card .detail-list.is-totals {
  max-width: 360px;
  margin-left: auto;
}

.detail-list.is-totals dd {
  text-align: right;
  font-variant-numeric: tabular-nums; /* 数字の幅をそろえて、桁を見やすくする */
}

/* =====================================================
   共通クラス（H：インラインスタイルの置き換え）
   ※ 既存の指定より後ろに置くため、ファイルの末尾に書く
   ===================================================== */

/* --- 文字の揃え --- */
.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
  font-variant-numeric: tabular-nums; /* 数字の幅をそろえる */
}

.nowrap {
  white-space: nowrap;
}

/* --- 文字の色 --- */
.text-muted {
  color: var(--text-muted);
}

.text-success {
  color: #00b894; /* 追加・増えた金額 */
  font-weight: bold;
}

.text-warning {
  color: #e17055; /* 変更 */
  font-weight: bold;
}

/* 変更前の値（取り消し線） */
.text-old {
  text-decoration: line-through;
  color: #999;
}

/* --- 注意書き（灰色の小さい文字） --- */
.note {
  color: var(--text-muted);
  font-size: 13px;
}

.note-sm {
  font-size: 12px;
}

/* --- 余白 --- */
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.ml-8 { margin-left: 8px; }
.ml-10 { margin-left: 10px; }

/* 行の間隔を広げる（変更内容の一覧など） */
.lines {
  line-height: 1.8;
}

/* --- 表の上の小見出し（その他項目・合計など） --- */
.section-title {
  margin-top: 25px;
  margin-bottom: 10px;
}

/* --- 表の行の色分け --- */
.row-added {
  background-color: #e8f8f5; /* 追加 */
}

.row-changed,.row-adjusted {
  background-color: #fff8e1; /* 変更 */
}

.row-removed,
.row-diff {
  background-color: var(--danger-bg); /* 削除・現況との差 */
}

/* --- 表の中の入力欄の幅 --- */
input.input-full {
  width: 100%;
}

input.input-qty {
  width: 80px;
  text-align: right;
}

input.input-unit {
  width: 60px;
}

input.input-price {
  width: 110px;
  text-align: right;
}

/* --- ボタン --- */
/* 文章のすぐ後ろに置くボタン */
.btn-inline {
  margin-left: 6px;
}

/* --- H-2 で追加 --- */
/* 実費（毎回変動）の行 */
.row-variable {
  background-color: #f1f8ff;
}

/* 追加作業の「追加」など（青の太字） */
.text-info {
  color: var(--info);
  font-weight: bold;
}

/* 表の中の入力欄の幅（日付・短い文字） */
input.input-date {
  width: 140px;
}

input.input-short {
  width: 90px;
}

/* --- H-3 で追加 --- */
.mt-0 {
  margin-top: 0;
}

/* 数値の入力欄は右寄せ（input-full を使う表の数量・対象外数など） */
input.input-full[type="number"] {
  text-align: right;
}

/* 表で棟・階をまとめたセル（上寄せ・折り返さない） */
.group-cell {
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

/* 保存内容の確認の枠（現況確認表） */
.confirm-panel {
  margin-top: 20px;
  padding: 16px;
  border: 2px solid var(--info);
  border-radius: 6px;
}
/* --- H-4 で追加 --- */
/* 横に並べる（折り返しあり・間隔10px） */
.flex-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* 両端に分けて並べる（見出しとボタンなど） */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* 入力欄を横に並べる（税率と見積りなど） */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}

/* 文字と入力欄を横に並べたラベル（発行日など） */
.inline-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mt-5 {
  margin-top: 5px;
}

/* 改行をそのまま表示する（特記事項など） */
.pre-wrap {
  white-space: pre-wrap;
}

/* --- H-5 で追加 --- */
.text-bold {
  font-weight: bold;
}

.mb-25 {
  margin-bottom: 25px;
}

/* 備考など、少し小さい文章の入力欄 */
textarea.textarea-sm {
  height: 80px;
}

/* 「対象顧客：○○」の表示（顧客資料） */
.page-target-label {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.page-target-link {
  font-weight: bold;
  text-decoration: none;
  color: var(--accent);
  font-size: 1.1rem;
}

/* 資料カードの下に置く操作（削除ボタン） */
.doc-item-actions {
  margin-top: auto;
  padding-top: 15px;
}
/* --- ボタンの並び（新規登録フォームなど）
   action-buttons-form と同じ並べ方にする（定義がなく、ボタンがくっついて高さもずれていた） */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* <button> と <a>（Link）の高さをそろえる */
  gap: 10px;
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  /* スマホでは action-buttons-form と同じく縦に並べる */
  .card .action-buttons {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- H-5b で追加 --- */
/* 改行をそのまま表示する（メッセージの \n） */
.pre-line {
  white-space: pre-line;
}

/* ログイン画面などの下のリンク（中央寄せ） */
.login-link {
  margin-top: 15px;
  text-align: center;
}

/* 「データがありません」の表示（NoDataMessage） */
.no-data {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
}

/* フォームの区切り線 */
.form-divider {
  margin: 20px 0;
}

/* カードの中の小見出し（代表ユーザー登録など）
   ※ .card h3 の下の余白（20px）より優先させるため .card をつける */
.card .form-subtitle {
  margin-bottom: 15px;
}

/* 帯の中の一覧（ホームのアラートなど） */
.alert-list {
  margin: 8px 0 0;
  padding-left: 20px;
}

.alert-list li {
  margin-top: 6px;
}
/* ===== 現況確認表：棟を追加（段階入力。SurveySetupWizard） =====
   1件ごとに「見出し＋入力欄」の小さな表にして、どの画面幅でも横に並べる */
.survey-wizard-lead {
  margin-bottom: 12px;
  color: var(--danger);
  font-weight: bold;
  line-height: 1.6;
}

.survey-wizard-box {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.survey-wizard-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
}

.survey-wizard-table th {
  padding: 5px 4px;
  background: var(--bg-gray);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

.survey-wizard-table td {
  padding: 6px 4px;
  vertical-align: middle;
}

.survey-wizard-table .center {
  text-align: center;
}

.survey-wizard-table input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font-size: inherit;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  box-sizing: border-box;
}

/* 数字は右寄せ */
.survey-wizard-table input[type="number"] {
  text-align: right;
}

.survey-wizard-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* 削除ボタンは列の幅いっぱいにする */
.survey-wizard-table .btn.btn-sm {
  width: 100%;
  padding: 5px 0;
  font-size: 13px;
}

/* 作成される階（表の下に右寄せ） */
.survey-wizard-floors {
  margin-top: 2px;
  padding-right: 4px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

/* ボタン：同じ幅で横に並べる */
.survey-wizard-buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}

.survey-wizard-buttons .btn {
  width: 100%;
  min-width: 0;
  padding: 0 8px;
}

/* スマホ：余白を減らして表を広くし、ボタンは2個ずつ並べる */
@media screen and (max-width: 768px) {
  .survey-wizard {
    padding: 16px 12px;
  }

  .survey-wizard-box {
    gap: 14px;
    padding: 10px 8px;
  }

  .survey-wizard-table {
    font-size: 13px;
  }

  .survey-wizard-table th {
    padding: 4px 2px;
    font-size: 11px;
  }

  .survey-wizard-table td {
    padding: 5px 2px;
  }

  .survey-wizard-table input:not([type="checkbox"]) {
    padding: 5px 4px;
  }

  .survey-wizard-table .btn.btn-sm {
    font-size: 12px;
  }

  .survey-wizard-buttons {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* ボタンの数が奇数のときは、最後の1個を全幅にする */
  .survey-wizard-buttons .btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
/* ===== ベース明細（BillingBase・BaseItemsTable・BaseCardList） ===== */
/* 見出しの下の操作（編集する／棟を追加） */
.base-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

/* 棟をまとめたセルには、差分の行の色を付けない（1行目の色が棟全体に広がるため） */
.data-table td.group-cell {
  background-color: var(--white);
}

/* 小さな表でも align-* を使えるようにする（.compact-table th の左寄せより優先） */
.compact-table .align-right {
  text-align: right;
}

.compact-table .align-center {
  text-align: center;
}

/* 小さな表のチェックボックスは幅いっぱいにしない */
.compact-table input[type="checkbox"] {
  width: auto;
}

/* カード表示：1行を2段（上段＝数量・金額など／下段＝理由・現況との差）にする */
.base-entry tr:not(:last-child) td {
  border-bottom: none;
}

.base-sub-row td {
  padding-top: 0;
}

.base-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.base-sub-reason {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 160px;
  min-width: 0;
}

.base-sub-label {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: bold;
}

/* 下段の［反映］［追加］は文字の幅にする（.compact-table .btn.btn-sm の全幅を打ち消す） */
.base-sub .btn.btn-sm {
  width: auto;
  padding: 2px 8px;
}

@media screen and (max-width: 768px) {
  .base-card {
    padding: 16px 12px; /* カードの余白を減らして表を広くする */
  }
}

/* ベースの切り替え（BaseSwitcher） */
.base-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.base-switcher .btn {
  width: auto; /* スマホでも全幅にしない */
}


/* 帯の中の操作ボタン（文章の下に改行して置く。スマホでも全幅にしない） */
.alert-action {
  margin: 10px 0 8px;
}

.alert-action .btn {
  width: auto;
}

/* 合計欄に入力欄（税率・見積り）を入れたとき、項目名と入力欄の高さをそろえる */
.detail-list.is-totals .detail-item {
  align-items: center;
}
/* 小さな表のプルダウン（緊急・追加作業の区分） */
.compact-table select {
  padding: 2px;
  font-size: inherit;
  border-radius: 4px;
}

/* 2段目の短い項目（理由・実施日・棟・加算など。文字の幅だけ使う） */
.base-sub-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}


/* ===== 緊急・追加作業：顧客向けプレビュー（サイドバーなしの全画面。App の fullScreen） ===== */
.fullscreen-content {
  flex: 1;
  padding: 40px 20px;
  box-sizing: border-box;
}

.preview-page {
  max-width: 800px;
  margin: 0 auto;
}

.preview-paper {
  padding: 40px;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.preview-title {
  margin-bottom: 30px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
}

.preview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--side-bg);
}

.preview-client {
  font-size: 1.2rem;
  font-weight: bold;
}

.preview-date {
  font-size: 13px;
  color: var(--text-muted);
}

.preview-info {
  margin: 0 0 20px;
}

.preview-info > div {
  display: flex;
  gap: 15px;
  margin-bottom: 6px;
}

.preview-info dt {
  flex-shrink: 0;
  width: 80px;
  font-weight: bold;
  color: var(--text-muted);
}

.preview-info dd {
  margin: 0;
}

/* 管理者用の欄（状態と［受注］［保留］など） */
.preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 15px;
  border: 1px dashed var(--border-dashed);
  border-radius: 8px;
}

.preview-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preview-actions .btn {
  width: auto;
}

@media screen and (max-width: 768px) {
  .fullscreen-content {
    padding: 20px 10px;
  }

  .preview-paper {
    padding: 20px 15px;
  }

  .preview-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 印刷：管理者用の欄・メッセージは出さない */
@media print {
  .preview-actions,
  .fullscreen-content .alert {
    display: none !important;
  }

  .fullscreen-content {
    padding: 0;
  }

  .preview-paper {
    border: none;
    padding: 0;
  }
}

/* 毎次明細：合計欄の下の「参考」の枠（業者→顧客の請求額。明細の合計には含まない） */
.reference-panel {
  margin-top: 25px;
  padding: 16px;
  border: 1px dashed var(--border-dashed);
  border-radius: 8px;
}

/* 緊急・追加作業：請求済みのときに入力欄をまとめて止める枠（fieldset disabled）。枠線・余白は付けない */
.form-lock {
  min-width: 0; /* fieldset は既定で中身より狭くならず、表がはみ出すため */
  margin: 0;
  padding: 0;
  border: 0;
}

/* 新規受注：顧客の絞り込みの欄とプルダウンを横に並べる（PC は 1：2、スマホは縦に並べる） */
.picker-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

@media screen and (max-width: 768px) {
  .picker-row {
    grid-template-columns: 1fr;
  }
}


/* 毎次明細：受注済みから取り込むダイアログ（表を出すので幅を広げる） */
.dialog.dialog-wide {
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
}

/* 毎次明細：受注済みの作業から取り込んだ行の印 */
.tag-imported {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: normal;
  border-radius: 10px;
  background-color: #dfe6e9;
  color: var(--text);
  white-space: nowrap;
}

/* 金額の小さな表（プレビュー・業者向けの緊急・追加作業カード）
   列が少ないので、スマホでも data-table のようにカードへ組み替えない */
.amount-table {
  width: 100%;
  border-collapse: collapse;
}

.amount-table th,
.amount-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-light);
}

.amount-table th {
  font-size: 13px;
  color: var(--text-muted);
  background-color: var(--bg-head);
}

.amount-table .align-left {
  text-align: left;
}

.amount-table .align-right {
  text-align: right;
  white-space: nowrap; /* 金額は折り返さない */
}


/* 一覧の絞り込み（緊急・追加作業）：見出しの下にプルダウン。PC は横に2つ、スマホは縦に並べる */
.filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 15px;
}

@media screen and (max-width: 768px) {
  .filter-grid {
    grid-template-columns: 1fr;
  }
}

/* 明細の表（現況確認表・ベース明細・毎次明細・その他項目・緊急・追加作業。PC の幅だけ）
   右寄せの数字の列が並ぶので、薄い縦の線で列を区切る。
   棟を rowSpan でまとめた表でも線が切れないよう、左ではなく右に線を引き、最後の列だけ消す */
.data-table.detail-grid th,
.data-table.detail-grid td {
  border-right: 1px solid var(--border-light);
}

.data-table.detail-grid th:last-child,
.data-table.detail-grid td:last-child {
  border-right: none;
}

/* マウスを乗せた行を薄く色づける（長い行を横に追うときに、行をまちがえないように）。
   差分・調整・実費の行の色を消さないよう、背景色の上に薄い色を重ねる。
   棟をまとめたセル（group-cell）は、ほかの行にもまたがるので色づけない */
@media (hover: hover) {
  .data-table.detail-grid tbody tr:hover td:not(.group-cell) {
    background-image: linear-gradient(rgba(9, 132, 227, 0.06), rgba(9, 132, 227, 0.06));
  }
}

/* ===== デモ環境の案内（ログイン画面。公開デモのときだけ表示） ===== */
/* 案内の分だけ縦に伸びるように、ログイン画面の高さを「最低 100vh」にする（上の .login-page を上書き） */
.login-page {
  height: auto;
  min-height: 100vh;
  padding: 20px 0;
  box-sizing: border-box;
}

.demo-box {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.demo-box-title {
  font-weight: bold;
  color: var(--side-bg);
  margin-bottom: 6px;
}

.demo-box-text,
.demo-box-note,
.demo-role-note {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.demo-role {
  margin-top: 12px;
}

.demo-login-btn {
  width: 100%;
}

.demo-role-note {
  display: block;
  margin-top: 4px;
}

.demo-box-note {
  margin-top: 16px;
  line-height: 1.6;
}


/* =====================================================
   UI調整（太字・文字サイズ・合計欄・日付の入力欄）
   ※ 既存の指定より後ろに置くため、ファイルの末尾に書く
   ===================================================== */

/* --- 太字を戻す ---
   reset.css が strong・b・h4 の太さを消しているため、<strong> が太字になっていなかった */
strong,
b {
  font-weight: bold;
}

h4 {
  font-weight: bold;
}

/* --- 文字サイズ（PC の値。スマホは下の @media で値だけ変える） --- */
:root {
  --fs-page-title: 1.6rem;  /* ページの見出し（h1） */
  --fs-logo: 1.4rem;        /* サイドバーのロゴ */
  --fs-card-title: 1.1rem;  /* カードの見出し（h3） */
  --fs-greeting: 1rem;      /* 「お疲れ様です、○○さん」 */
  --fs-filter: 1rem;        /* あいうえお検索 */
  --fs-total: 1.15rem;      /* 合計欄の合計金額 */
}

header h1 {
  font-size: var(--fs-page-title);
}

.sidebar-logo {
  font-size: var(--fs-logo);
}

.card h3 {
  font-size: var(--fs-card-title);
}

.login-status {
  font-size: var(--fs-greeting);
}

.kana-filter {
  font-size: var(--fs-filter);
}

/* あいうえお検索：選んでいる行を太字にする（active は付いていたが見た目の指定がなかった） */
.kana-filter a.active {
  font-weight: bold;
  color: var(--text);
  text-decoration: none;
}

/* --- 合計欄：合計の行（値を <strong> で囲んだ行）を目立たせる
   ベース明細・毎次明細・緊急・追加作業の合計欄すべてに効く --- */
.detail-list.is-totals .detail-item:has(> dd > strong) {
  border-top: 2px solid var(--text-muted);
}

.detail-list.is-totals .detail-item:has(> dd > strong) dt {
  color: var(--text);
  font-weight: bold;
}

.detail-list.is-totals dd > strong {
  font-size: var(--fs-total);
}

/* --- スマホ（768px以下）：文字を一段小さくする --- */
@media screen and (max-width: 768px) {
  :root {
    --fs-page-title: 1.25rem;
    --fs-logo: 1.1rem;
    --fs-card-title: 1rem;
    --fs-greeting: 0.8rem;
    --fs-filter: 0.85rem;
    --fs-total: 1.05rem;
  }

  /* 「お疲れ様です」は見出しより目立たせない */
  .login-status {
    color: var(--text-muted);
  }

  /* 一覧（カード表示）の値 */
  .data-table td {
    font-size: 0.9rem;
  }

  /* 詳細の値（さくらビルなど）：大きさと太さを控えめにする */
  .card .detail-item dd {
    font-size: 0.9rem;
    font-weight: normal;
  }

  /* あいうえお検索：区切りの「｜」をやめて、間隔をあけて並べる */
  .kana-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
  }

  .kana-filter a::after {
    content: none;
  }
}

/* --- iPhone・iPad：日付の入力欄が枠からはみ出さないようにする
   （Safari の日付欄は独自の最小幅を持つため、width: 100% でもはみ出す）
   ※ -webkit-touch-callout は iPhone・iPad だけが対応しているので、PC には効かない --- */
@supports (-webkit-touch-callout: none) {
  input[type="date"] {
    display: block;
    min-width: 0;
    min-height: calc(1.2em + 26px); /* 空のときに高さがつぶれないよう、ほかの入力欄にそろえる */
    -webkit-appearance: none;
    appearance: none;
  }

  /* 日付を左寄せにする（appearance: none にすると中央寄せになるため） */
  input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }
}

/* =====================================================
   サイドバー：マイページ・ログアウトを下にまとめ、メニューと同じ見た目にする
   ※ 既存の .sidebar-footer・.logout-btn より後ろに置く（.sidebar を付けて優先させる）
   ===================================================== */
.sidebar .sidebar-footer {
  padding: 10px 0 0;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* メニューとの区切り線 */
}

/* ログアウト：メニューのリンク（.sidebar ul li a）と同じ見た目 */
.sidebar .logout-btn {
  display: block;
  width: 100%;
  padding: 15px 30px;
  font: inherit; /* button は文字の設定を親から受け継がないため */
  color: #bdc3c7;
  text-align: left;
  background: none;
  border: none;
  border-left: 4px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: 0.3s;
}

/* hover だけ赤みにして、ほかのメニューと区別する */
.sidebar .logout-btn:hover {
  background-color: rgba(231, 76, 60, 0.15);
  color: var(--white);
  border-left-color: rgba(231, 76, 60, 0.6);
}

/* スマホ（768px以下）：横並びのメニューに合わせる */
@media screen and (max-width: 768px) {
  .sidebar .sidebar-footer {
    margin-top: 0;
    padding: 0 0 0 8px;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.15); /* 縦線で区切り、押し間違いを防ぐ */
  }

  .sidebar .logout-btn {
    width: auto;
    padding: 10px 15px;
    font-size: 0.85rem;
    border-left: none;
    border-bottom: 3px solid transparent;
  }

  .sidebar .logout-btn:hover {
    border-bottom-color: rgba(231, 76, 60, 0.6);
  }
}