/* =========================
   ■ jimubase（事務局モード）テーマ CSS
   2026-07-25 改訂：紫アクセントは撤回し、haikuの暖色パレットに統一。
   区別はマスコット(お仕事ライオン)のみで行う方針。
   ========================= */

body {
  background-color: #F2EDE4;
  color: #2a1f1a;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;

  /* 和紙っぽいテクスチャ（haikuと同じ） */
  background-image:
    radial-gradient(rgba(0,0,0,0.015) 1px, transparent 1px),
    repeating-linear-gradient(
      90deg,
      rgba(120,90,60,0.03),
      rgba(120,90,60,0.03) 1px,
      transparent 1px,
      transparent 32px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(120,90,60,0.02),
      rgba(120,90,60,0.02) 1px,
      transparent 1px,
      transparent 60px
    );

  background-size: 5px 5px, auto, auto;
}

.nav-btn {
  cursor: pointer;
  padding: 0 18px;
  color: #7a3520;
  font-weight: bold;
  user-select: none;
}

.current-month {
  font-family: "Kokoro", serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.18em;
  margin: 0 20px;
  color: #7a3520;
}

.year-text {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 20px;
  color: #7a3520;
  font-weight: 400;
  letter-spacing: 0.05em;
}

th {
  border: none;
  background: #D9C9B0;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.14em;
  font-size: 16px;
}

th::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 0;
  width: 1px;
  height: 60%;
  background: #C4B49A;
}

th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #C4B49A;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

td {
  background-color: #FAF6F0;
  border: none;
  position: relative;
  padding: 4px 2px;
  vertical-align: top;
  height: 110px;
  font-size: 14px;
}

td::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 70%;
  background: transparent;
  box-shadow: -1px 0 0 rgba(0,0,0,0.08);
}

td::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #C4B49A;
}

td.sunday  { background: #F5E8E8; color: #8B1A1A; }
td.holiday { background: #F5E8E8; color: #8B1A1A; }
td.saturday { background: #E8EEF5; color: #1A3A6B; }

.day-number {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  margin-top: -4px;
  margin-bottom: 2px;
  cursor: pointer;
  font-size: 24px;
  letter-spacing: 0.05em;
}

td.today {
  background: rgba(255,248,210,0.7) !important;
}

#popup {
  border: 2px solid #8B6A50 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
  background: transparent !important;
}

#popupContent {
  background: rgba(250,246,240,0.95) !important;
  color: #2a1f1a !important;
  font-size: 19px !important;
}

#loginClose, #popupClose {
  background: #FAF6F0;
  border: 1px solid #C4B49A;
  color: #2a1f1a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ============================================================
   事務局マスコット（右下固定）
   2026-07-25：紫背景でライオンの顔色が悪く見えた反省を踏まえ、
   暖色のhaiku背景に戻したことで顔色の問題は解消。
   加えて「事務局にいる感」を主張する唯一の要素になったため、
   思い切ってサイズを大幅アップ（220px→380px）。
   ============================================================ */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  right: 0;
  width: 400px;
  height: 267px; /* 画像の実寸比率(1344:896 = 3:2)にきっちり合わせ、
                    箱の中に余白(レターボックス)ができないようにしている */
  background: url("../../images/jimubase.png") no-repeat center / contain;
  opacity: 0.55;
  z-index: 999;
  pointer-events: none;
}

@media (max-width: 480px) {
  #popup { top: 6% !important; }
  #popupContent { padding: 16px !important; font-size: 20px !important; }

  body::after {
    width: 240px;
    height: 160px;
    bottom: 0;
    right: 0;
  }
}

.world-toggle {
  background: #8B4513;
  box-shadow:
    0 0 10px rgba(180, 100, 30, 0.6),
    0 0 22px rgba(150, 80, 20, 0.4);
}

.world-toggle:hover {
  box-shadow:
    0 0 14px rgba(180, 100, 30, 0.8),
    0 0 28px rgba(150, 80, 20, 0.6);
}

.world-toggle::after {
  background: #FFF8F0;
}

.calendar-title {
  color: #7a3520;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.login-link {
  color: #8B4513;
}

@media (max-width: 600px) {
  td { padding: 0; }
}

/* カテゴリ別カラー（haikuテーマの配色をそのまま流用） */
.event.理事会,      .memoHeader.理事会      { background:#5A86A2; color:#ffffff; }
.event.例会,        .memoHeader.例会        { background:#B06A72; color:#ffffff; }
.event.五役会,      .memoHeader.五役会      { background:#7D9B80; color:#ffffff; }
.event.アクト,      .memoHeader.アクト      { background:#B38A5F; color:#ffffff; }
.event.キャビネット, .memoHeader.キャビネット { background:#8D79AC; color:#ffffff; }
.event[class~="4LC行事"], .memoHeader[class~="4LC行事"] { background:#9491A8; color:#ffffff; }
.event.委員会,      .memoHeader.委員会      { background:#B4A766; color:#ffffff; }
.event.他イベント,  .memoHeader.他イベント  { background:#82A6BF; color:#ffffff; }
.event.その他,      .memoHeader.その他      { background:#B17393; color:#ffffff; }
.event.業務連絡,    .memoHeader.業務連絡    { background:#9F978D; color:#ffffff; }
.event.事務局休み,  .memoHeader.事務局休み  { background:#C29CAC; color:#ffffff; }

/* 共通イベント枠 */
.event {
  border:1px solid rgba(50,35,25,0.10);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.12),
    0 1px 2px rgba(0,0,0,0.04);
}

/* ============================================================
   業務日報入力ポップアップ（2026-07-26 新規）
   #formOverlay/#formBoxと同じ考え方のオーバーレイ+ボックス構造。
   IDが違うためCSSはここで別途定義（base.cssの#formBox系は流用不可）。
   ============================================================ */
#gyomuOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
  display: none;
  z-index: 9998;
  pointer-events: none; /* オーバーレイ自体はクリックを透過させる（下のカレンダーを操作できるように） */
}

#gyomuBox {
  pointer-events: auto; /* 箱の中だけクリック判定を持たせる */
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(250,246,240,0.85);
  padding: 14px;
  width: 94%;
  max-width: 560px; /* ★表形式（カテゴリ/内容/締切/公開の列）が要るため拡張 */
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  border: 2px solid #8B6A50;
  border-radius: 12px;
  font-size: 13px;
  color: #2a1f1a;
}

#gyomuBox h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  padding-right: 30px; /* 閉じるボタンと重ならないように */
}

#gyomuClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FAF6F0;
  border: 1px solid #C4B49A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#gyomuButtons {
  text-align: right;
  margin-top: 10px;
}

#gyomuButtons button {
  padding: 6px 16px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #8B6A50;
  background: #deb58a;
  color: #fff;
  cursor: pointer;
  margin-left: 6px;
}

#gyomuAddRowBtn {
  background: rgba(255,255,255,0.8) !important;
  color: #8B6A50 !important;
}

#gyomuButtons button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ============================================================
   業務日報テーブル（2026-07-26：1件ずつフォーム式から表形式へ変更）
   ・8〜10個の別カテゴリ/イベントが同時進行するため、行ごとにカテゴリを持てる必要がある
   ・既存行(gyomuExistingRows)＝もう保存済みの業務ログ（チェック・削除のみ操作可）
   ・新規行(gyomuNewRows)＝これから保存する空の行（複数、＋行を追加できる）
   ============================================================ */
#gyomuTableWrap {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.5);
}

#gyomuTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

#gyomuTable th {
  position: sticky;
  top: 0;
  background: #deb58a;
  color: #fff;
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 11px;
  padding: 6px 4px;
  text-align: center;
  z-index: 1;
  white-space: nowrap;
}

.gyomu-cat-th {
  white-space: normal;
  line-height: 1.3;
}

/* ★2026-07-27追記：既存行はクリックすると詳細ポップアップが開くため、それと分かるようにポインタに */
#gyomuExistingRows .gyomu-row {
  cursor: pointer;
}

#gyomuExistingRows .gyomu-empty-message td {
  padding: 8px 4px;
  text-align: center;
  color: #8B6A50;
  font-size: 12px;
}

#gyomuTable td {
  height: auto; /* ★カレンダー本体の td{height:110px}が継承されて行が間延びしていたのを解消 */
  padding: 3px 4px; /* ★2026-07-27:カテゴリ列が2段表示になった分、既存の1pxだと詰まりすぎるため微調整 */
  border-bottom: 1px solid rgba(0,0,0,0.06);
  vertical-align: middle;
}

#gyomuExistingRows tr:last-child td,
#gyomuNewRows tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   業務日報テーブル：スマホ対応（2026-09-03追記）
   ・colgroupの固定幅（印/済/カテゴリ/締切/公開/削除）がスマホ幅では
     「内容」列を極端に圧迫し、1文字ずつ縦に折り返される問題への対処。
   ・table-layoutはfixedのまま、テーブル自体に最低幅を持たせて
     ラップ側(#gyomuTableWrap)を横スクロールさせることで、
     内容列に読める程度の幅を確保する。
   ============================================================ */
@media (max-width: 600px) {
  #gyomuTableWrap,
  #gyomuTableWrap2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #gyomuTable,
  #gyomuTable2 {
    width: 480px;
  }
  #gyomuTable colgroup col:nth-child(3),
  #gyomuTable2 colgroup col:nth-child(3) {
    width: 95px !important;
  }
}

/* 既存行と新規行の間の区切り */
#gyomuNewRows tr:first-child td {
  border-top: 2px dashed rgba(139,106,80,0.4);
}

.gyomu-cat-cell {
  overflow: hidden;
  cursor: pointer;
}

/* ★2026-07-27追記：カテゴリ／イベント名が1行に詰め込まれて「理事会/第…」までしか
   見えず分かりづらかったため、2段表示（1段目=カテゴリ、2段目=イベント名）に変更。
   各段は個別に省略(…)し、全文はクリック→詳細ポップアップで確認する運用に統一 */
/* ★2026-07-27修正：カテゴリ(1段目)は小さく添える程度に、イベント名(2段目)を主役として大きく表示するよう変更 */
.gyomu-cat-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
  font-size: 10px;
  color: #8B6A50;
}

.gyomu-cat-line.gyomu-title-line {
  font-size: 13px;
  color: #2a1f1a;
  font-weight: 500;
}

.gyomu-mark-cell {
  text-align: center;
  white-space: nowrap;
  font-size: 11px;
}

.gyomu-cat-cell select,
.gyomu-cat-cell input {
  display: block;
  width: 100%;
  font-size: 11px;
  line-height: 1.1;
  padding: 1px 2px;
  margin: 0 0 1px 0;
  border: 1px solid #C4B49A;
  border-radius: 4px;
  background: rgba(255,255,255,0.9);
  box-sizing: border-box;
  height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#gyomuTable input[type="text"],
#gyomuTable textarea.gyomu-row-content {
  width: 100%;
  font-size: 12px;
  padding: 3px 4px;
  border: 1px solid #C4B49A;
  border-radius: 4px;
  background: rgba(255,255,255,0.9);
  box-sizing: border-box;
  font-family: inherit;
}

#gyomuTable textarea.gyomu-row-content {
  resize: vertical;
  min-height: 26px;
  height: 26px;
  line-height: 1.3;
}

#gyomuTable input[type="date"] {
  width: 100%;
  font-size: 11px;
  padding: 1px 2px;
  border: 1px solid #C4B49A;
  border-radius: 4px;
  background: rgba(255,255,255,0.9);
  box-sizing: border-box;
  height: 22px;
}

.gyomu-deadline-cell,
.gyomu-public-cell {
  white-space: nowrap;
  text-align: center;
}

.gyomu-delete {
  cursor: pointer;
  font-size: 13px;
  opacity: 0.6;
}

.gyomu-delete:hover {
  opacity: 1;
}

/* ============================================================
   業務日報：詳細ポップアップ（2026-07-27新規）
   ・一覧では省略される「カテゴリ／イベント名」「内容」を全文で見るための入口。
     既存行(gyomuExistingRows)をクリックすると開く
   ・gyomuOverlay/gyomuBoxと似た見た目に揃えるが、こちらはドラッグ不可の
     シンプルな読み取り専用ポップアップ
   ============================================================ */
#gyomuDetailOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.25);
  display: none;
  z-index: 10000; /* gyomuOverlay(9998)・gyomuProgressOverlay(9999)より前面 */
}

#gyomuDetailBox {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(250,246,240,0.97);
  padding: 16px;
  width: 88%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  border: 2px solid #8B6A50;
  border-radius: 12px;
  font-size: 13px;
  color: #2a1f1a;
}

#gyomuDetailBox h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  padding-right: 30px;
  color: #8B6A50;
}

#gyomuDetailClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FAF6F0;
  border: 1px solid #C4B49A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.gyomu-detail-row {
  margin-bottom: 10px;
}

.gyomu-detail-row:last-child {
  margin-bottom: 0;
}

.gyomu-detail-label {
  font-size: 11px;
  color: #8B6A50;
  font-weight: 600;
  margin-bottom: 2px;
}

.gyomu-detail-value {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* ★2026-07-27追記：詳細ポップアップをその場で編集できるようにしたための入力欄スタイル */
.gyomu-detail-input {
  width: 100%;
  font-size: 13px;
  font-family: inherit;
  padding: 6px 8px;
  margin-top: 2px;
  border: 1px solid #C4B49A;
  border-radius: 6px;
  background: rgba(255,255,255,0.9);
  box-sizing: border-box;
  color: #2a1f1a;
}

#gyomuDetailCategory {
  margin-bottom: 4px;
}

textarea.gyomu-detail-input {
  resize: vertical;
  line-height: 1.5;
}

.gyomu-detail-checks {
  display: flex;
  gap: 18px;
  font-size: 13px;
}

.gyomu-detail-checks label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

#gyomuDetailButtons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

#gyomuDetailSaveMsg {
  font-size: 12px;
  color: #7D9B80;
}

#gyomuDetailSaveBtn {
  padding: 6px 18px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #8B6A50;
  background: #deb58a;
  color: #fff;
  cursor: pointer;
}

#gyomuDetailSaveBtn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ============================================================
   進捗ポップアップ（2026-07-27新規）
   ・白丸ボタン→getEventLogsで取得した「そのイベントに紐づく業務日報」を
     日付をまたいで一覧表示するモーダル
   ・gyomuDetailBoxと似た見た目（読み取り専用ポップアップの共通トーン）
   ・各行をクリックすると、既存のgyomuDetailOverlay（詳細ポップアップ）を
     流用してその日の内容を全文表示する
   ============================================================ */
#gyomuProgressOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.25);
  display: none;
  z-index: 9999;
}

#gyomuProgressBox {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(250,246,240,0.97);
  padding: 16px;
  width: 88%;
  max-width: 380px;
  max-height: 78vh;
  overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  border: 2px solid #8B6A50;
  border-radius: 12px;
  font-size: 13px;
  color: #2a1f1a;
}

#gyomuProgressBox h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  padding-right: 30px;
  color: #8B6A50;
}

#gyomuProgressClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FAF6F0;
  border: 1px solid #C4B49A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#gyomuProgressEmpty {
  text-align: center;
  color: #8B6A50;
  padding: 10px 0;
  font-size: 13px;
}

.gyomu-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
}

.gyomu-progress-row:last-child {
  border-bottom: none;
}

.gyomu-progress-row:hover {
  background: rgba(139,106,80,0.08);
}

.gyomu-progress-check {
  width: 14px;
  text-align: center;
  color: #7D9B80;
  font-weight: bold;
  flex-shrink: 0;
}

.gyomu-progress-date {
  font-size: 11px;
  color: #8B6A50;
  white-space: nowrap;
  flex-shrink: 0;
  width: 34px;
}

.gyomu-progress-content {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gyomu-progress-deadline {
  font-size: 11px;
  color: #B06A72;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ★2026-07-27追記：つまみバー。PCでは非表示、スマホ時だけ「スライドアップ」らしく見せるために表示する */
#gyomuProgressHandle {
  display: none;
}

/* ============================================================
   進捗ポップアップ：スマホ表示（2026-07-27新規）
   ・PCは画面中央のモーダル、スマホは片手操作しやすい下からのスライドアップに変更
   ・HTML/データ/JSは共通のまま、見た目(位置・角丸・つまみバー)だけこの分岐で切り替える
   ============================================================ */
@media (max-width: 600px) {
  #gyomuProgressBox {
    top: auto;
    left: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
    padding-top: 10px;
  }

  #gyomuProgressHandle {
    display: block;
    width: 36px;
    height: 4px;
    background: #C4B49A;
    border-radius: 99px;
    margin: 0 auto 10px;
  }

  #gyomuProgressClose {
    top: 14px;
  }
}

.gyomu-carried {
  color: #8B4513;
  margin-right: 2px;
}

.gyomu-deadline-today {
  color: #B22222;
  font-weight: bold;
  margin-right: 2px;
}

/* ============================================================
   閉じるボタンの✕をCSSで直接描画
   ・フォント記号(✖)は内部の余白の取り方に癖があり、
     見た目のセンターにきっちり合わせるのが環境依存でブレやすかったため撤回
   ・2本の棒を交差させる方式なら、太さ・長さ・センター位置を数値で完全に制御できる
   ・高齢者が使う想定のため、太め・大きめにして「押す場所」が一目で分かるようにしている
   ============================================================ */
/* ★ position は base.css の position:absolute をそのまま使う（ここで上書きしない）。
   absolute のままでも ::before/::after の位置決めの基準としては十分機能する。
   以前ここに position:relative を書いてしまい、base.cssのposition:absoluteを
   意図せず上書きして、float:right（従来absoluteの陰で無効化されていた）が
   息を吹き返し、ボタンがレイアウトを崩す原因になっていた。 */
#popupClose {
  width: 28px !important;
  height: 28px !important;
}

#popupClose::before,
#popupClose::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 24px;
  background: #333;
  border-radius: 2px;
}

#popupClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#popupClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ============================================================
   業務日報バッジ（日付の横）
   ・イベントバーの縦積みとは別枠。day-numberと横並びにする
   ・その日に業務日報の入力がある時だけ出る（0件の日は何も出ない）
   ============================================================ */
.day-number-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: -4px;
  margin-bottom: 2px;
}

.day-number-row .day-number {
  margin-top: 0;
  margin-bottom: 0;
}

.gyomu-badge {
  display: inline-block;
  width: auto;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  padding: 1px 14px;
  margin: 0;
  border-radius: 9999px;
  cursor: pointer; /* ★2026-07-27修正：バッジ自体も業務日報ポップアップへの入口としてクリックできるように */
}

@media (max-width: 600px) {
  .gyomu-badge {
    font-size: 11px;
    padding: 1px 12px;
  }
}

/* ============================================================
   業務日報カプセル（事務局baseのみ）
   ・その日に業務日報を入力した日だけ表示（未入力日は出さない）
   ・曜日ヘッダー(th)より少し薄いトーン、他カテゴリより主張しすぎない
   ============================================================ */
.event.業務日報,
.memoHeader.業務日報 {
  background: #deb58a;
  color: #ffffff;
}

/* ============================================================
   ログイン画面まわりの非表示
   ・事務局baseは独自のログイン画面を持たない方針（isLoggedIn()は常にtrue）
   ・HTML/JSの構造自体は残し、CSSで隠すだけに留めている
     （多数のaddEventListenerが要素を参照しているため、要素ごと削除すると
      その時点で例外が発生し、以降の初期化処理が止まるリスクがあるため）
   ============================================================ */
#loginOverlay,
#logoutLink,
#loginLink {
  display: none !important;
}

/* ============================================================
   進捗ポップアップ用・白丸ボタン
   ・✕(popupClose)と対角、同じサイズで常時表示
   ・出たり消えたりさせない（柄に見えるのを防ぐため）
   ============================================================ */
#popupWhiteCircle {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  /* ↓ #popupCloseと完全に同じ大きさに見せるための、box.css側の上乗せ分の再現
     （base.cssの#popupCloseには padding:6px と margin-top:-6px が
      別ルールで追加されており、実際のレンダリング結果は28x28ではなく
      一回り大きい。ここを揃えないと「隣にだけ何かある」ように見えてしまう） */
  padding: 6px;
  margin-top: -6px;
  box-sizing: content-box;
}

/* ============================================================
   進捗ポップアップ用・白丸ボタンの中の色付きドット（2026-07-27新規）
   ・白丸自体はクリック領域として常に同じ見た目を保ち、
     中の小さいドットだけをイベントのカテゴリカラーで着色する
   ・.eventクラスは余白/文字設定などドット表示に不要なプロパティを持つため、
     流用せず色だけを複製した専用クラスにする（値はhaiku.css/jimubase.css内の
     .event.カテゴリ定義と同じものを維持すること）
   ============================================================ */
#popupWhiteCircleDot {
  width: 24px; /* ★2026-07-27修正：14px→24pxに拡大。✕ボタン(#popupClose)と同じくらいの大きさに */
  height: 24px;
  border-radius: 50%;
  background: transparent; /* カテゴリクラスが付くまでは無色（未分類のイベントもあるため） */
}

/* ★2026-07-27修正：色を入れるのは「業務日報に紐付けられる8カテゴリ」だけに限定。
   五役会・業務連絡・事務局休みはそもそも業務ログの対象外(GYOMU_CATEGORIESに無い)なので、
   色を入れると「当たり判定があるように見えて実は無い」誤解を生むため、あえて無色のままにする */
#popupWhiteCircleDot.理事会       { background:#5A86A2; }
#popupWhiteCircleDot.例会         { background:#B06A72; }
#popupWhiteCircleDot.アクト       { background:#B38A5F; }
#popupWhiteCircleDot.キャビネット { background:#8D79AC; }
#popupWhiteCircleDot[class~="4LC行事"] { background:#9491A8; }
#popupWhiteCircleDot.委員会       { background:#B4A766; }
#popupWhiteCircleDot.他イベント   { background:#82A6BF; }
#popupWhiteCircleDot.その他       { background:#B17393; }

/* ============================================================
   日付セルの当たり判定分割（2026-09-10新規）
   ・.day-number-row(flex)自体の見た目・レイアウトは一切変更しない
   ・position:absoluteの透明な当たり判定divを2枚重ねるだけ
     （絶対配置の要素はflexの外に出るため、日付数字・業務日報バッジの
      並びには一切影響しない）
   ・左20%=日誌（誤クリック防止のため狭め）／右80%=業務日報（日付の数字を含む）
   ============================================================ */
.day-number-row {
  position: relative;
}

.hit-zone-nikki,
.hit-zone-gyomu {
  position: absolute;
  top: 0;
  height: 100%;
  cursor: pointer;
}

.hit-zone-nikki {
  left: 0;
  width: 20%;
}

.hit-zone-gyomu {
  left: 20%;
  width: 80%;
}

/* ============================================================
   日誌ポップアップ（2026-09-10新規）
   ・#gyomuOverlay/#gyomuBoxと同じ構造・考え方。色味だけ紫系に変更
   ・業務日報より薄いトーンにして「今どっちを触っているか」を色で区別できるように
   ============================================================ */
#nikkiOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
  display: none;
  z-index: 9998;
  pointer-events: none; /* オーバーレイ自体はクリックを透過させる（下のカレンダーを操作できるように） */
}

#nikkiBox {
  pointer-events: auto;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(247, 242, 250, 0.9); /* うっすら紫の背景 */
  padding: 14px;
  width: 94%;
  max-width: 420px; /* 業務日報よりカラム数が少ないため幅は控えめ */
  max-height: 94vh; /* ★2026-09-10追記：業務日報の1箱目と同じ上限に統一 */
  overflow: auto; /* ★2026-09-10追記：resize:bothを効かせるため縦横ともautoに変更 */
  resize: both; /* ★2026-09-10追記：業務日報の1箱目と同じく、角をつまんでサイズ変更できるように */
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  border: 2px solid #A98DBF; /* 業務日報の#8B6A50に相当する紫 */
  border-radius: 12px;
  font-size: 13px;
  color: #3A2A47;
}

#nikkiBox h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  padding-right: 30px; /* 閉じるボタンと重ならないように */
  color: #7A5C93; /* 薄めの紫。タイトルは日付のみ表示 */
  user-select: none; /* ★2026-09-10追記：ドラッグ時にタイトル文字が選択されてしまう不具合の対策 */
  -webkit-user-select: none;
}

#nikkiClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FAF6F0;
  border: 1px solid #C9B8D9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#nikkiButtons {
  text-align: right;
  margin-top: 10px;
  user-select: none; /* ★2026-09-10追記：ドラッグハンドルとして使うため、文字選択を防止 */
  -webkit-user-select: none;
}

#nikkiButtons button {
  padding: 6px 16px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #A98DBF;
  background: #C7AFDA; /* 業務日報の#deb58aに相当。少し薄めの紫 */
  color: #fff;
  cursor: pointer;
  margin-left: 6px;
}

#nikkiAddRowBtn {
  background: rgba(255,255,255,0.8) !important;
  color: #7A5C93 !important;
}

#nikkiTableWrap {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.5);
}

#nikkiTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

#nikkiTable th {
  position: sticky;
  top: 0;
  background: #C7AFDA; /* 紫のバー。業務日報の#deb58aに相当 */
  color: #fff;
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 11px;
  padding: 6px 4px;
  text-align: center;
  z-index: 1;
  white-space: nowrap;
}

#nikkiExistingRows .nikki-row {
  cursor: pointer; /* 業務日報と同じく、行クリックで詳細ポップアップが開くことが分かるように */
}

#nikkiExistingRows .nikki-empty-message td {
  padding: 8px 4px;
  text-align: center;
  color: #A98DBF;
  font-size: 12px;
}

#nikkiTable td {
  height: auto;
  padding: 5px 6px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  vertical-align: middle;
}

#nikkiExistingRows tr:last-child td,
#nikkiNewRows tr:last-child td {
  border-bottom: none;
}

/* 既存行と新規行の間の区切り */
#nikkiNewRows tr:first-child td {
  border-top: 2px dashed rgba(169,141,191,0.4);
}

.nikki-cat-cell {
  overflow: hidden;
  font-size: 12px;
  color: #7A5C93;
}

.nikki-cat-cell select {
  display: block;
  width: 100%;
  font-size: 12px;
  padding: 3px 4px;
  border: 1px solid #C9B8D9;
  border-radius: 4px;
  background: rgba(255,255,255,0.9);
  box-sizing: border-box;
}

#nikkiTable input[type="text"] {
  width: 100%;
  font-size: 12px;
  padding: 3px 4px;
  border: 1px solid #C9B8D9;
  border-radius: 4px;
  background: rgba(255,255,255,0.9);
  box-sizing: border-box;
  font-family: inherit;
}

.nikki-delete {
  cursor: pointer;
}

/* ============================================================
   日誌：詳細ポップアップ（2026-09-10新規）
   ・#gyomuDetailOverlay/#gyomuDetailBoxと同じ構造。色味だけ紫系に変更
   ============================================================ */
#nikkiDetailOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.25);
  display: none;
  z-index: 10000; /* nikkiOverlay(9998)より前面 */
}

#nikkiDetailBox {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(247, 242, 250, 0.97);
  padding: 16px;
  width: 88%;
  max-width: 380px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  border: 2px solid #A98DBF;
  border-radius: 12px;
  font-size: 13px;
  color: #3A2A47;
}

#nikkiDetailBox h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  padding-right: 30px;
  color: #7A5C93;
}

#nikkiDetailClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FAF6F0;
  border: 1px solid #C9B8D9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.nikki-detail-row {
  margin-bottom: 10px;
}

.nikki-detail-row:last-child {
  margin-bottom: 0;
}

.nikki-detail-label {
  font-size: 11px;
  color: #7A5C93;
  font-weight: 600;
  margin-bottom: 2px;
}

.nikki-detail-input {
  width: 100%;
  font-size: 13px;
  font-family: inherit;
  padding: 6px 8px;
  margin-top: 2px;
  border: 1px solid #C9B8D9;
  border-radius: 6px;
  background: rgba(255,255,255,0.9);
  box-sizing: border-box;
  color: #3A2A47;
}

textarea.nikki-detail-input {
  resize: vertical;
  line-height: 1.5;
}

#nikkiDetailButtons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

#nikkiDetailSaveMsg {
  font-size: 12px;
  color: #7D9B80;
}

#nikkiDetailSaveBtn {
  padding: 6px 18px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #A98DBF;
  background: #C7AFDA;
  color: #fff;
  cursor: pointer;
}

#nikkiDetailSaveBtn:disabled {
  opacity: 0.5;
  cursor: default;
}