/* ============================================================
   skin.css — 朝礼モードのコンポーネントスタイルのみ
   配色は style.css（元のダークテーマ）のトークンを継承する。
   ※ 2026-07-23: 紙地スキンは臼杵先生の希望で撤回（元の配色に戻した）
============================================================ */

.huddle-tabs { display: flex; gap: 0; margin-bottom: 18px; border-bottom: 1px solid var(--border-hi); }
.huddle-tab {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif; font-size: 13px; letter-spacing: .05em;
  background: none; border: 1px solid var(--border); border-bottom: none;
  color: var(--text-lo); padding: 9px 18px; cursor: pointer; margin-right: -1px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.huddle-tab.active { color: var(--text-hi); background: var(--bg-card); border-color: var(--border-hi); font-weight: 700; }
.huddle-loading { color: var(--text-lo); padding: 30px 6px; font-size: 14px; }

.hd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.hd-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--orange); padding: 16px 18px; border-radius: var(--radius-md);
}
.hd-card.hd-wide { grid-column: 1 / -1; }
.hd-k {
  font-family: 'Montserrat', sans-serif; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-lo); margin-bottom: 6px;
}
.hd-v { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.hd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hd-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); }
.hd-table .num { font-family: 'Montserrat', sans-serif; font-weight: 700; }
.hd-mut  { color: var(--text-lo); font-size: 12px; }
.hd-good { color: var(--green); font-size: 12.5px; }
.hd-bad  { color: var(--red); font-size: 12.5px; font-weight: 700; }
.hd-body-line { font-size: 13.5px; line-height: 1.7; }

.hd-list { list-style: none; padding: 0; margin: 0; }
.hd-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.hd-item.hd-done .hd-name { text-decoration: line-through; color: var(--text-lo); }
.hd-name { font-weight: 600; }
.hd-risk {
  color: var(--red); font-weight: 700; font-size: 12px;
  border: 1px solid var(--red); padding: 1px 7px; border-radius: var(--radius);
  font-family: 'Montserrat', sans-serif;
}
.hd-follow-btn {
  font-size: 11.5px; cursor: pointer;
  background: var(--green-dim); border: 1px solid var(--green); color: var(--green);
  padding: 3px 10px; margin-left: auto; border-radius: var(--radius);
}
.hd-follow-btn:hover { filter: brightness(1.2); }
.hd-follow-btn:disabled { opacity: .4; cursor: default; }
.hd-assign-sel {
  font-size: 12px; padding: 3px 6px;
  background: var(--bg-2); color: var(--text-hi);
  border: 1px solid var(--border-mid); margin-left: auto; border-radius: var(--radius);
}
.hd-done-label { font-size: 12px; color: var(--text-lo); display: flex; align-items: center; gap: 4px; }

@media (max-width: 640px) {
  .hd-grid { grid-template-columns: 1fr; }
  .hd-follow-btn, .hd-assign-sel { margin-left: 0; }
}

/* ============================================================
   ライトモード（html[data-theme="light"]）＝紙地×テラコッタ
   ダーク（既定・元のデザイン）⇔ ライトを extras.js のボタンで切替。
   ライトの見た目は 2026-07-23 の紙地スキン（臼杵先生が採用指定）。
============================================================ */
html[data-theme="light"] {
  --bg:          #fefefe;
  --bg-2:        #f3f2f2;
  --bg-3:        #ececea;
  --bg-card:     #ffffff;
  --border:      rgba(29,29,29,.13);
  --border-mid:  rgba(29,29,29,.22);
  --border-hi:   rgba(29,29,29,.36);
  --text-hi:     #1d1d1d;
  --text-mid:    #3a3a3a;
  --text-lo:     #7a7a7a;
  --red:         #e34948;
  --red-dim:     rgba(227,73,72,.10);
  --orange:      #f07a58;
  --orange-dim:  rgba(240,122,88,.12);
  --green:       #1a7f37;
  --green-dim:   rgba(26,127,55,.10);
  --blue:        #2a78d6;
  --blue-dim:    rgba(42,120,214,.10);
}
html[data-theme="light"] body { background: var(--bg); color: var(--text-hi); }
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-2); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c9c7c3; }

/* ─ サイドバー: チャコール×テラコッタ（紙地スキンの指定） ─ */
html[data-theme="light"] .sidebar {
  background: #312f33;
  --bg-2: #312f33; --bg-3: #3c3a3f; --bg-card: #38363b;
  --border: rgba(244,241,234,.10); --border-mid: rgba(244,241,234,.16);
  --text-hi: #f4f1ea; --text-mid: #f4f1ea; --text-lo: #9a968e;
  border-right: 1px solid rgba(0,0,0,.25);
}
/* 蛍光イエローのアクセントをテラコッタへ（ライト時のみ） */
html[data-theme="light"] .sidebar .nav-item.active::before { background: #f07a58; }
html[data-theme="light"] .sidebar .nav-item.active { background: rgba(240,122,88,.14); }
html[data-theme="light"] .sidebar .nav-item.active .nav-num,
html[data-theme="light"] .sidebar .nav-item.active .nav-icon { color: #f07a58; }
html[data-theme="light"] .sidebar .nav-item:hover .nav-label { color: #f07a58; }
html[data-theme="light"] .dash-cal-nav:hover,
html[data-theme="light"] .dash-cal-today-btn:hover { border-color: #f07a58; color: #f07a58; }
html[data-theme="light"] .dash-cal-day:hover {
  background: rgba(240,122,88,.10); color: #f07a58; border-color: rgba(240,122,88,.35);
}
html[data-theme="light"] .dash-cal-day.selected {
  background: #f07a58; color: #fff; border-color: #f07a58;
}
html[data-theme="light"] .dash-cal-day.has-data::after { background: #f07a58; }
html[data-theme="light"] .dash-cal-legend-dot.has-data,
html[data-theme="light"] .dash-cal-legend-dot.selected { background: #f07a58; }
html[data-theme="light"] .dash-cal-selected-label { color: #f07a58; }

/* ─ KPIカード: 白紙カード＋左色レール（コーナー装飾は非表示） ─ */
html[data-theme="light"] .kpi-corner { display: none; }
html[data-theme="light"] .kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: none;
}
html[data-theme="light"] .kpi-card[data-accent="red"]    { border-left: 4px solid var(--red); }
html[data-theme="light"] .kpi-card[data-accent="orange"] { border-left: 4px solid var(--orange); }
html[data-theme="light"] .kpi-card[data-accent="green"]  { border-left: 4px solid var(--green); }
html[data-theme="light"] .kpi-card[data-accent="blue"]   { border-left: 4px solid var(--blue); }
html[data-theme="light"] .kpi-card[data-accent="gray"]   { border-left: 4px solid var(--border-hi); }

/* メイン領域で蛍光イエロー文字は濃色に */
html[data-theme="light"] .dh-mini-month-total strong { color: #b8860b; }

/* カード類の影を軽く */
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .input-card,
html[data-theme="light"] .hd-card { box-shadow: none; }

/* JS生成インラインの淡色・ダーク前提色をライトで読める色に矯正 */
html[data-theme="light"] .main-content [style*="color:#f2f2f0"],
html[data-theme="light"] .main-content [style*="color: #f2f2f0"] { color: #1d1d1d !important; }
html[data-theme="light"] .main-content [style*="color:#c0c0bd"],
html[data-theme="light"] .main-content [style*="color: #c0c0bd"] { color: #5f5f5f !important; }
html[data-theme="light"] .main-content [style*="color:#4ecb8d"],
html[data-theme="light"] .main-content [style*="color: #4ecb8d"] { color: #1a7f37 !important; }
html[data-theme="light"] .main-content [style*="color:#e0c089"],
html[data-theme="light"] .main-content [style*="color: #e0c089"] { color: #b8860b !important; }

/* ─ テーマ切替ボタン（サイドバー下部・extras.jsが注入） ─ */
.theme-toggle-btn {
  width: calc(100% - 32px);
  margin: 10px 16px;
  padding: 8px 12px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  background: none;
  color: var(--text-lo);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .2s ease;
}
.theme-toggle-btn:hover { color: #D8FF00; border-color: #D8FF00; }
html[data-theme="light"] .theme-toggle-btn:hover { color: #f07a58; border-color: #f07a58; }

/* ============================================================
   医院ロゴ（2026-07-23 実物のロゴPDFから作成・透過PNG）
   黒字のロゴなので、ダークでは反転して白に、ライトでは黒のまま。
   白い丸バッジは不要（ロゴ自体が円形）なので背景は透明にする。
============================================================ */
.sidebar-logo-wrap, .mobile-logo-wrap { background: transparent !important; padding: 2px; }
.sidebar-logo { filter: invert(1); }                       /* ダーク: 白ロゴ */
.mobile-logo  { background: transparent !important; filter: invert(1); }
html[data-theme="light"] .sidebar-logo { filter: none; }   /* ライト: 黒ロゴ */
html[data-theme="light"] .mobile-logo  { filter: none; }
/* ライトのサイドバーはチャコールなので、そこでは白のまま */
html[data-theme="light"] .sidebar .sidebar-logo { filter: invert(1); }

/* ============================================================
   ダッシュボードKPIの並び（2026-07-24）
   タイルが8→10枚に増え、auto-fill だと 8+2 の歪な2段になっていたため、
   画面幅ごとに列数を固定して均等な段組みにする（10枚 = 5×2 / 4+4+2 …）。
   1枚あたりの幅も広げ、金額の折り返し（保険 281,440 円 ▲ +81,590）を防ぐ。
============================================================ */
.kpi-grid { grid-template-columns: repeat(2, 1fr); }          /* 〜640px */
@media (min-width: 641px)  { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .kpi-grid { grid-template-columns: repeat(5, 1fr); } }
/* mini（DH別など）は従来どおり自動 */
.kpi-grid.mini { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* 数値の折り返し対策 */
.kpi-value { white-space: nowrap; }
.kpi-trend { line-height: 1.55; }
/* 4列時（960〜1399px）は10枚だと最終行に2枚＋空き2マスになるので、
   最後の2枚を2列ぶんに広げて隙間を作らない */
@media (min-width: 960px) and (max-width: 1399px) {
  .kpi-grid:not(.mini) > .kpi-card:nth-last-child(-n+2) { grid-column: span 2; }
}