/*
Theme Name: lightning-child
Template: lightning
Version: 5.5
Description: 空き家管理用カスタム子テーマ
Author: grant-house-yamada
*/

/* --- 巡回報告 全体スタイル --- */
.report-single {
  font-size: 18px;
  /* 本文の基本フォントサイズを大きめにして読みやすく */
  line-height: 1.8;
  /* 行間を広くして読みやすく */
  color: #222222;
  /* 文字色は濃いグレーにして落ち着いた印象に */
  font-weight: 500;
  /* やや太めで可読性アップ */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* モダンなサンセリフ系フォント */
}

.report-single p,
.report-single li {
  margin-bottom: 1em;
  /* 段落とリスト項目の下に余白を確保 */
}

.report-single .group-section {
  font-size: 17px;
  /* グループ内のフォントはやや小さめ */
  line-height: 1.7;
  color: #333333;
}

.report-single strong {
  font-weight: 600;
  /* strongタグをやや強調 */
}

.report-single h1,
.report-single h2,
.report-single h3 {
  color: #111111;
  /* 見出しを黒に近い色でしっかり強調 */
  font-weight: 700;
}

/* --- タブボタン（巡回報告の年別絞り込み用） --- */
.tab-buttons {
  display: flex;
  /* 横並びに配置 */
  border-bottom: 2px solid #ddd;
  /* 下線を入れて区切り感を出す */
  padding-left: 0;
  margin-bottom: 1rem;
  list-style: none;
  gap: 10px;
  /* タブ間のスペースを確保 */
}

.tab-btn {
  background-color: #f0f0f0;
  /* 通常時の背景色 */
  border: 1px solid #ccc;
  border-bottom: none;
  /* 下線を削除して一体感を出す */
  padding: 0.5em 1.2em;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  color: #333;
  border-radius: 4px 4px 0 0;
  /* 上辺を丸める */
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.tab-btn:hover {
  background-color: #e0e0e0;
  /* ホバー時に背景色変化 */
}

.tab-btn.active {
  background-color: #d2f5da;
  /* アクティブ状態の背景色（淡緑） */
  border-color: #008b1e;
  /* アクティブ時の枠線色 */
  color: white;
  /* アクティブ時の文字色 */
  font-weight: 800;
  /* より強調 */
}

.tab-section {
  border: 1px solid #ccc;
  padding: 1em;
  background-color: white;
}

/* --- 巡回報告本文のテキスト部分 --- */
.report-basic div {
  font-size: 18px;
  line-height: 1.9;
  color: #222222;
}

/* --- チェック項目や異常判定の色分け --- */
.check-有,
.abnormal-有 {
  color: #d11a1a;
  /* 異常あり → 赤色で警告感 */
  font-weight: bold;
}

.check-無,
.abnormal-無 {
  color: #0054b5;
  /* 異常なし → 青で安心感 */
  font-weight: bold;
}

/* --- 支払い管理 詳細画面用スタイル（共通利用可） --- */
.payment-detail-container {
  max-width: 700px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-family: sans-serif;
}

.payment-title {
  font-size: 24px;
  font-weight: bold;
  border-bottom: 2px solid #bbbbbb;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.payment-block {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #fff;
}

.payment-block-header {
  background-color: #ddd;
  padding: 12px 16px;
  font-weight: bold;
  font-size: 16px;
  border-bottom: 1px solid #bbbbbb;
}

.payment-block-content {
  padding: 16px;
  font-size: 18px;
}

.payment-amount {
  color: #c00;
  font-weight: bold;
  font-size: 20px;
}

.payment-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

.preview-link,
.download-link {
  text-decoration: none;
  font-size: 16px;
}

.preview-link {
  color: #0073aa;
}

.download-link {
  color: #555;
}

.preview-link:hover,
.download-link:hover {
  text-decoration: underline;
}

/* --- 支払い状況を示すバッジ（色分け） --- */
.status-badge {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: 9999px;
  font-weight: bold;
  font-size: 0.9rem;
  color: #fff;
}

.badge-paid {
  background-color: #38a169;
  /* 緑：支払済 */
}

.badge-unpaid {
  background-color: #e53e3e;
  /* 赤：未払い */
}

.badge-unknown {
  background-color: #718096;
  /* 灰色：不明 */
}

/* --- 支払い管理／巡回報告カードスタイル --- */
.payment-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* --- 右上に固定された戻るボタン --- */
.floating-return-buttons {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.floating-button {
  display: flex;
  align-items: center;
  gap: 0.4em;
  background-color: #008b1e;
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.floating-button:hover {
  background-color: #008b1e;
  transform: translateY(-1px);
}

/* --- モーダル画像プレビュー（報告書・支払いなど共通） --- */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

.modal-overlay:hover img {
  transform: scale(1.02);
}

.modal-overlay::after {
  content: "✕";
  /* 閉じるボタン */
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

/* --- PDFなどのプレビュー用モーダル --- */
.modal-content {
  width: 90%;
  max-width: 800px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-height: 90%;
  display: flex;
  flex-direction: column;
}

.modal-content iframe {
  width: 100%;
  height: 80vh;
  border: none;
}

/* --- 支払い管理 一覧ページ（アーカイブ） --- */
.payment-archive-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  font-family: sans-serif;
}

.payment-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.payment-card-link-wrapper {
  display: block;
  text-decoration: none;
  color: inherit;
}

.payment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.payment-card-header {
  font-size: 18px;
  margin-bottom: 10px;
}

.payment-card-body p {
  margin: 0.5em 0;
  font-size: 16px;
}

.payment-card-link {
  display: inline-block;
  margin-top: 10px;
  color: #0073aa;
  text-decoration: none;
  font-weight: bold;
}

.payment-card-link:hover {
  text-decoration: underline;
}

/* --- 年別タブ（支払い管理） --- */
.year-tabs {
  display: flex;
  border-bottom: 2px solid #ddd;
  padding-left: 0;
  margin-bottom: 1.5rem;
  list-style: none;
  gap: 10px;
}

.year-tabs .tab {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-bottom: none;
  padding: 0.5em 1.2em;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  color: #333;
  border-radius: 4px 4px 0 0;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.year-tabs .tab:hover {
  background-color: #e0e0e0;
}

.year-tabs .tab.active {
  background-color: #008b1e;
  border-color: #008b1e;
  color: #fff;
  font-weight: 800;
}

/* --- 契約情報 アーカイブ（カードレイアウト） --- */
.contract-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  margin-top: 2em;
}

.contract-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 1.5em;
  flex: 1 1 100%;
  max-width: 600px;
  margin: auto;
}

.contract-card-title {
  font-size: 1.4em;
  margin-bottom: 0.5em;
  color: #333;
}

.contract-card-desc {
  margin-bottom: 1em;
  color: #666;
}

.contract-card-button {
  display: inline-block;
  background-color: #008b1e;
  color: white;
  padding: 0.6em 1.2em;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.contract-card-button:hover {
  background-color: #a3fdb6;
}

/* --- 巡回報告 一覧画面 --- */
.report-archive-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  font-family: sans-serif;
}

.report-card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.report-card-link-wrapper {
  display: block;
  text-decoration: none;
  color: inherit;
}

.report-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.report-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.report-card-header {
  font-size: 18px;
  margin-bottom: 10px;
}

.report-card-body p {
  margin: 0.5em 0;
  font-size: 16px;
}

.report-card-link {
  display: inline-block;
  margin-top: 10px;
  color: #0073aa;
  text-decoration: none;
  font-weight: bold;
}

.report-card-link:hover {
  text-decoration: underline;
}

/* --- 巡回報告カード全体のスタイル --- */
.report-card {
    position: relative; /* 絶対配置のラベルをカード内に配置するため */
    background: #fff; /* 白背景 */
    border: 1px solid #ddd; /* 薄いグレーの境界線 */
    border-radius: 8px; /* 角丸 */
    padding: 16px; /* 内側の余白 */
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); /* 軽い影 */
    transition: box-shadow 0.3s ease; /* ホバー時の影の変化をスムーズに */
}

/* ホバー時に影を濃くして立体感を出す */
.report-card:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

/* ラベルを包むラッパー：カード右上に絶対配置 */
.report-card-label-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* 新着・既読ラベル共通のスタイル */
.new-label,
.read-label {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 12px; /* 丸みを帯びた角 */
    color: #fff; /* 文字は白 */
}

/* 新着ラベルの赤背景 */
.new-label {
    background-color: #e53935; /* 赤系 */
}

/* 既読ラベルのグレー背景 */
.read-label {
    background-color: #9e9e9e; /* グレー系 */
}

/* --- ショートコード挿入ブロックのボタンラッパー --- */
/* .mypage-badge-text（新着マーク）を重ねるために相対配置に */
.wp-block-shortcode:has(.mypage-badge-text) {
  position: relative;
  display: inline-block;
}

/* マイページの新着マークのスタイル */
/* ボタン右上に赤い丸バッジを絶対配置 */
.mypage-badge-text {
  position: absolute;
  top: -6px;
  right: -12px;
  background-color: #dc2626; /* 濃い赤 */
  color: #fff; /* 文字白 */
  font-weight: bold;
  font-size: 1.2rem;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 10; /* 前面に出す */
  white-space: nowrap; /* 改行しない */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); /* 影で浮かせる */
}
/* --- 巡回報告 年別タブ（アーカイブ上部に表示） --- */
.report-year-tabs {
  display: flex; /* 横並びに配置 */
  border-bottom: 2px solid #ddd; /* 下線でタブエリアを視覚的に区切る */
  padding-left: 0; /* デフォルトのリスト左余白を除去 */
  margin-bottom: 1.5rem; /* タブ下に余白 */
  list-style: none; /* リストの点（●）を消す */
  gap: 10px; /* タブ間にスペース */
  flex-wrap: wrap; /* スマホなどで折り返し可能に */
}

.report-year-tabs .tab {
  background-color: #f0f0f0; /* 通常時の背景色は薄グレー */
  border: 1px solid #ccc; /* 薄いグレーの境界線 */
  border-bottom: none; /* 下線をなくしてアクティブ感 */
  padding: 0.5em 1.2em; /* 内側の余白でボタン感 */
  font-weight: 700; /* 太めの文字 */
  font-size: 1rem; /* 適度なサイズ感 */
  cursor: pointer; /* マウスを乗せたらポインター表示 */
  color: #333; /* テキスト色は落ち着いたグレー */
  border-radius: 4px 4px 0 0; /* 上側のみ角丸にしてタブ風に */
  transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* なめらか変化 */
}

.report-year-tabs .tab:hover {
  background-color: #e0e0e0; /* ホバー時はやや濃いグレーに */
}

.report-year-tabs .tab.active {
  background-color: #008b1e; /* アクティブなタブは緑背景 */
  border-color: #008b1e; /* 枠線も緑に */
  color: #fff; /* テキストは白にして見やすく */
  font-weight: 800; /* より太字で強調 */
}


/* --- 契約情報 詳細ページ専用スタイル --- */
.contract-single {
  font-size: 18px;
  /* 全体の文字サイズは読みやすく設定 */
  line-height: 1.8;
  /* 行間も広め */
  color: #222;
  /* テキスト色は濃いグレー */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* サンセリフ体 */
}

.contract-single h1 {
  color: #111;
  /* メイン見出しは黒に近い色 */
  font-weight: 700;
  /* 太字で強調 */
  font-size: 24px;
  /* 少し大きめ */
}

.contract-single p {
  margin-bottom: 1em;
  /* 段落の下に余白を入れて読みやすく */
}

/* タブボタン群の親要素 */
.contract-single .tab-buttons {
  display: flex;
  /* 横並び */
  border-bottom: 2px solid #ddd;
  /* 下線で区切り */
  list-style: none;
  /* リストの点を消す */
  gap: 10px;
  /* ボタン間の間隔 */
  padding-left: 0;
  /* 左の余白リセット */
}

.contract-single .tab-buttons li {
  list-style: none;
  /* liタグの点を消す */
}

.contract-single .tab-btn {
  background-color: #f0f0f0;
  /* 通常時の背景色 */
  border: 1px solid #ccc;
  /* 枠線 */
  border-bottom: none;
  /* 下線なしにしてタブ感 */
  padding: 0.75em 1.5em;
  /* ボタン内余白 */
  font-weight: 700;
  /* 太字 */
  font-size: 1.1rem;
  /* 少し大きめの文字 */
  cursor: pointer;
  /* ポインター表示 */
  color: #333;
  /* 文字色はグレー寄り */
  border-radius: 4px 4px 0 0;
  /* 上側だけ角丸 */
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  /* ホバー時の滑らかな変化 */
}

.contract-single .tab-btn:hover {
  background-color: #e0e0e0;
  /* ホバー時は少し濃いめグレー */
}

.contract-single .tab-btn.active {
  background-color: #008b1e;
  /* アクティブ時は緑色背景 */
  border-color: #008b1e;
  /* 枠線も緑 */
  color: #fff;
  /* 文字は白 */
  font-weight: 800;
  /* 強調のため太字 */
}

/* タブの内容部分 */
.contract-single .tab-section {
  display: none;
  /* 非表示にしておく */
  border: 1px solid #ccc;
  /* 薄い枠線 */
  padding: 1.5em;
  /* 内側の余白 */
  background-color: #fff;
  /* 背景白 */
  margin-bottom: 2em;
  /* 下に余白 */
  border-radius: 8px;
  /* 角丸 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  /* 軽い影 */
}

.contract-single .tab-section.active {
  display: block !important;
  /* アクティブタブだけ表示 */
}

/* グループセクション（点検箇所等） */
.contract-single .group-section {
  background: #f9f9f9;
  /* 薄いグレー背景 */
  padding: 1em;
  /* 内側余白 */
  border-radius: 6px;
  /* 角丸 */
  margin-bottom: 1.5em;
  /* 下余白 */
  border-left: 4px solid #008b1e;
  /* 左側に緑のアクセントライン */
}

.contract-single .group-section h3 {
  font-size: 1.2em;
  /* 見出しはやや大きく */
  margin-bottom: 0.5em;
  /* 見出しの下に少し余白 */
}

/* リスト全体のマージン */
.contract-single ul {
  margin-left: 1.5em;
  /* 左に少しスペース */
  margin-bottom: 1em;
  /* 下余白 */
}

/* リスト項目 */
.contract-single li {
  list-style: disc;
  /* 黒丸リスト */
  margin-bottom: 0.3em;
  /* 項目の下に少し隙間 */
}

/* リンク色とホバー効果 */
.contract-single a {
  color: #0073aa;
  /* 青系リンク色 */
  text-decoration: underline;
  /* 下線あり */
}

.contract-single a:hover {
  text-decoration: none;
  /* ホバー時は下線消す */
}

/* 強調テキスト */
.contract-single strong {
  font-weight: bold;
}

/* 契約情報のカード風ボックス */
.contract-single .contract-info-card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1em 1.2em;
  margin-bottom: 1em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.contract-single .contract-info-card strong {
  display: block;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.3em;
  font-size: 1.05em;
}

.contract-single .contract-info-card p {
  margin: 0;
  font-size: 1em;
  color: #222;
}

/* 契約情報カード内テキスト部分の背景色付きバージョン */
.contract-single .contract-info-card p {
  background-color: #f0f9f4;
  /* 薄い緑の背景 */
  padding: 0.5em 0.8em;
  border-radius: 6px;
  border: 1px solid #b7d8b0;
  color: #000000;
  font-weight: 600;
  margin: 0;
  font-size: 1em;
}

/* --- 内部タブ（点検箇所の詳細切替用） --- */
.contract-single .inner-tab-buttons {
  list-style: none;
  padding-left: 0;
  gap: 6px;
  margin-top: 1em;
  margin-bottom: 1em;
  display: flex;
  /* 横並びにするなら追加推奨 */
}

.contract-single .tab-btn.inner {
  background-color: #e9f7ee;
  /* 内部タブの薄い緑背景 */
  border: 1px solid #ccc;
  border-bottom: none;
  padding: 0.4em 1em;
  font-size: 0.95rem;
  cursor: pointer;
  color: #333;
  border-radius: 4px 4px 0 0;
  transition: background-color 0.3s;
}

.contract-single .tab-btn.inner:hover {
  background-color: #d4f0e1;
  /* ホバーで少し濃い緑に */
}

.contract-single .tab-btn.inner.active {
  background-color: #008b1e;
  /* アクティブは濃い緑 */
  color: #fff;
  font-weight: bold;
  border-color: #008b1e;
}

/* 内部タブの内容部分 */
.contract-single .tab-section.inner {
  display: none;
  border: 1px solid #ccc;
  border-radius: 0 0 6px 6px;
  padding: 1em;
  background: #fff;
  margin-bottom: 1.5em;
}

.contract-single .tab-section.inner.active {
  display: block;
}

/* --- コンパクトカード用スタイル --- */
.contract-info-card.compact {
  padding: 0.5em 1em;
  margin-bottom: 1em;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: none;
  font-size: 16px;
}

/* --- タグリスト（契約情報などのラベル） --- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* タグ個別 */
.tag-item {
  background-color: #008b1e;
  /* 緑背景 */
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.9rem;
  white-space: nowrap;
  /* 改行しない */
  user-select: none;
  /* テキスト選択不可 */
}