@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Montserrat:wght@500;600;700&family=Noto+Sans+JP:wght@300;400;500;700;900&family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap');

/* モバイル下ナビぶんの下端余白（ログイン時のみ @media で上書き） */
:root {
  --app-mobile-nav-gap: 0px;
  /* iPhone notch 等の安全領域（上） */
  --safe-top: env(safe-area-inset-top, 0px);
}

/* ═══════════════════════════════════════════════════
   テーマシステム: :root（フォールバック） / warm / cool / darksoft（夜）
   ═══════════════════════════════════════════════════ */

/*
  ═══════════════════════════════════════════════════
  CSS 設計ルール（2026年5月 改訂）
  ═══════════════════════════════════════════════════

  ブレークポイント（4段階のみ使用）:
    xs: max-width: 480px   — スマートフォン縦
    sm: max-width: 768px   — スマートフォン全般
    md: min-width: 769px and max-width: 1024px — タブレット
    lg: min-width: 1025px  — PC・デスクトップ
  ※ 上記以外の細かいbp（375/390/520等）は原則追加しない。
     必要なら 480px か 768px のブロックに含める。

  !important の使用ルール:
    OK  : テーマ上書き（[data-theme="darksoft"] 等）
    OK  : @media 内で基本値を上書きする場合
    OK  : 末尾パッチで既存ルールを上書きする場合
    NG  : 新規コンポーネントの基本スタイルへの使用
    NG  : インラインスタイルの代替として使う

  テーマ（使用中のみ）:
    studio / warm / cool / darksoft
    ※ apple / watch は削除済み（2026-05）
  ═══════════════════════════════════════════════════
*/

/* ── :root ── テーマ属性なし時のフォールバック（neutral 相当のバランス配色） */
:root {
  --bg: #e9e8e5;
  --surface: rgba(241, 240, 236, 0.96);
  --surface2: #e9e8e5;
  --surface3: #dedcd6;

  --text: #2e3036;
  --text-muted: #565a61;
  --text-faint: #71757c;

  --border: rgba(46, 48, 54, 0.095);
  --border-light: rgba(46, 48, 54, 0.055);

  --btn-bg: #dedcd8;
  --btn-hover: #d3d2cd;
  --btn-active: #c9c8c3;

  --accent: #446b78;
  --accent-light: #507986;
  --accent-subtle: rgba(68, 107, 120, 0.11);
  --accent-glow: rgba(68, 107, 120, 0.14);

  --accent2: #595d64;
  --accent2-light: #666a72;
  --accent2-subtle: rgba(89, 93, 100, 0.08);

  --accent3: #4b5056;
  --accent3-subtle: rgba(75, 80, 86, 0.08);

  --success: #5a695c;
  --warning: #75654d;
  --danger: #9a4745;
  --info: #5a6970;

  --shadow-sm: 0 1px 2px rgba(46,48,54,0.05);
  --shadow-md: 0 2px 5px rgba(46,48,54,0.07);
  --shadow-lg: 0 4px 10px rgba(46,48,54,0.09);
  --shadow-xl: 0 6px 18px rgba(46,48,54,0.11);

  --mono: 'JetBrains Mono', monospace;
  --sans: 'Noto Sans JP', sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* app.js initFontScale が上書き（初回は端末幅で自動） */
  --font-scale: 1;

  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base: 220ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 350ms cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 280ms cubic-bezier(0.34,1.56,0.64,1);

  /* 背景グラデ（テーマごとに上書き） */
  --bg-glow: rgba(255, 252, 245, 0.55);
  --bg-grad-top: color-mix(in srgb, var(--bg) 70%, #ffffff);
  --bg-grad-bot: color-mix(in srgb, var(--bg) 88%, #000000);
}

/* ── warm（やわらかい）── 変数のみ（旧 neutral 向け V0 上書きとは切り離し） */
[data-theme="warm"] {
  --bg: #e8dfd4;
  --bg-glow: rgba(255, 248, 238, 0.58);
  --surface: rgba(248, 242, 232, 0.97);
  --surface2: #ebe2d6;
  --surface3: #dfd4c8;

  --text: #3d342b;
  --text-muted: #6e5f52;
  --text-faint: #887a6e;

  --border: rgba(90, 72, 52, 0.11);
  --border-light: rgba(90, 72, 52, 0.065);

  --btn-bg: #e2d8cb;
  --btn-hover: #d9cec0;
  --btn-active: #cfc4b6;

  --accent: #5c7d6e;
  --accent-light: #6c877e;
  --accent-subtle: rgba(95,122,114,0.11);
  --accent-glow: rgba(95,122,114,0.13);

  --accent2: #6b6560;
  --accent2-light: #76706a;
  --accent2-subtle: rgba(107,101,96,0.09);

  --accent3: #5c5753;
  --accent3-subtle: rgba(92,87,83,0.09);

  --success: #5e6c5e;
  --warning: #77634c;
  --danger: #964845;
  --info: #5d6a63;

  --shadow-sm: 0 1px 2px rgba(58,51,44,0.04);
  --shadow-md: 0 2px 6px rgba(58,51,44,0.06);
  --shadow-lg: 0 4px 12px rgba(58,51,44,0.08);
  --shadow-xl: 0 8px 24px rgba(58,51,44,0.10);
}

/* ── studio（スタジオ）── ニュートラル＋細線装飾・theme-studio-sample 準拠 */
[data-theme="studio"] {
  --bg: #eceae6;
  --bg-glow: rgba(255, 255, 252, 0.52);
  --surface: rgba(255, 255, 255, 0.88);
  --surface2: #e6e4e0;
  --surface3: #dcdbd7;

  --text: #2a2a2e;
  --text-muted: #5c5c64;
  --text-faint: #7a7a82;

  --border: rgba(42, 42, 46, 0.09);
  --border-light: rgba(42, 42, 46, 0.05);

  --btn-bg: #dedcd8;
  --btn-hover: #d4d2ce;
  --btn-active: #cac8c4;

  --accent: #3d4250;
  --accent-light: #525a6a;
  --accent-subtle: rgba(61, 66, 80, 0.10);
  --accent-glow: rgba(61, 66, 80, 0.12);

  --accent2: #5a2830;
  --accent2-light: #6d343d;
  --accent2-subtle: rgba(90, 40, 48, 0.09);

  --accent3: #4a5568;
  --accent3-subtle: rgba(74, 85, 104, 0.09);

  --success: #3d5248;
  --warning: #6a5538;
  --danger: #7a3038;
  --info: #3d4a58;

  --shadow-sm: 0 1px 2px rgba(42, 42, 46, 0.04);
  --shadow-md: 0 2px 8px rgba(42, 42, 46, 0.06);
  --shadow-lg: 0 4px 16px rgba(42, 42, 46, 0.08);
  --shadow-xl: 0 8px 28px rgba(42, 42, 46, 0.10);
}

[data-theme="studio"] .login-deco-svg {
  display: block;
  opacity: 0.97;
  filter: saturate(1.05);
}
[data-theme="studio"] .login-card {
  /* 下の .login-card !important より優先させる（縁グラデ＝二重 background） */
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(
      152deg,
      rgba(148, 172, 198, 0.92) 0%,
      rgba(232, 228, 218, 0.98) 26%,
      rgba(196, 162, 108, 0.88) 48%,
      rgba(168, 188, 208, 0.9) 62%,
      rgba(176, 142, 92, 0.85) 78%,
      rgba(130, 158, 182, 0.88) 100%
    ) border-box !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 28px rgba(42, 42, 46, 0.07) !important;
}
[data-theme="studio"] .login-logo-sub {
  font-family: Montserrat, var(--mono), sans-serif;
  letter-spacing: 0.14em;
  color: var(--accent2);
}

/* ═══════════════════════════════════════════════════
   UI 情報階層（全画面共通）
   1 場所 → 2 数字 → 3 状態 → 4 詳細 → 5 操作
   ═══════════════════════════════════════════════════ */

/* ① 場所：左上・大きめ・省略しない */
.ui-tier-place {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: -0.02em;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* ② 数字：主役 / 単位は従属 */
.ui-num {
  font-family: var(--mono);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

/* 数字の可読性を一段上げる（全体に効かせる） */
.inv-l1-qty,
.inv-l1-chip-qty,
.inv-number,
.move-history-qty,
.global-stat-row .val,
.stat-num,
.ring-stat-value .ui-num,
.ring-pct-hero .ui-num {
  letter-spacing: 0.03em;
}
.inv-l1-qty {
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
.inv-l1-unit{
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  margin-left: 4px;
}
.inv-l1-chip-qty { font-size: 13px; }
.inv-number { font-size: 16px; }
.move-history-qty { font-size: 13px; }
.global-stat-row .val { font-size: 14px; font-weight: 900; }
.ui-unit {
  font-family: var(--sans);
  font-size: 0.55em;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 0.12em;
  vertical-align: 0.08em;
}

/* ③ 状態：短いバッジ・補助色（場所・数字より弱い） */
.ui-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
}
.ui-state-badge.ui-status--pre { border-color: rgba(80,128,200,0.35); background: rgba(80,128,200,0.08); color: #4a6a9a; }
.ui-state-badge.ui-status--work { border-color: rgba(200,140,60,0.4); background: rgba(200,140,60,0.1); color: #8a6020; }
.ui-state-badge.ui-status--done { border-color: rgba(60,120,80,0.35); background: rgba(60,120,80,0.1); color: #3a6a4a; }
.ui-state-badge.ui-status--hold { border-color: rgba(180,80,80,0.35); background: rgba(180,80,80,0.08); color: #8a4040; }
.ui-state-badge.ui-status--mute { opacity: 0.85; }
.ui-state-badge.ui-mat--ok { border-color: rgba(60,120,80,0.3); background: rgba(60,120,80,0.08); color: #3a6a4a; }
.ui-state-badge.ui-mat--warn { border-color: rgba(200,120,40,0.35); background: rgba(200,120,40,0.1); color: #8a5510; }
.ui-state-badge.ui-mat--muted { border-color: var(--border); background: var(--surface3); color: var(--text-muted); }
.ui-state-badge.ui-anomaly-pill {
  font-size: 11px;
  font-weight: 900;
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface2));
  color: color-mix(in srgb, var(--danger) 85%, var(--text));
}

/* ④ 詳細：第二階層 */
.ui-tier-detail,
.ui-tier-detail summary {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}
details.ui-tier-detail {
  margin-top: 6px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: var(--surface2);
}
details.ui-tier-detail > summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
details.ui-tier-detail > summary::-webkit-details-marker { display: none; }

/* ⑤ 操作：最下層・主張弱め */
.ui-tier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
}
.ui-tier-actions .btn,
.ui-tier-actions button {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
  box-shadow: none !important;
}
.ui-tier-actions .btn-primary {
  opacity: 0.95;
}

/* ── cool（集中）── 作業効率重視（青み・コントラスト強め） */
[data-theme="cool"] {
  --bg: #dce5ee;
  --bg-glow: rgba(228, 240, 255, 0.55);
  --surface: rgba(232, 239, 248, 0.97);
  --surface2: #e0e9f4;
  --surface3: #d3dde9;

  --text: #243044;
  --text-muted: #4a5c72;
  --text-faint: #667892;

  --border: rgba(36, 52, 78, 0.11);
  --border-light: rgba(36, 52, 78, 0.065);

  --btn-bg: #d6e0ec;
  --btn-hover: #ccd8e6;
  --btn-active: #c1cfdf;

  --accent: #3d6f91;
  --accent-light: #527892;
  --accent-subtle: rgba(69,108,130,0.11);
  --accent-glow: rgba(69,108,130,0.13);

  --accent2: #596273;
  --accent2-light: #636e80;
  --accent2-subtle: rgba(89,98,115,0.09);

  --accent3: #4e5866;
  --accent3-subtle: rgba(78,88,102,0.09);

  --success: #566b66;
  --warning: #73624c;
  --danger: #964845;
  --info: #566473;

  --shadow-sm: 0 1px 2px rgba(39,49,66,0.04);
  --shadow-md: 0 2px 6px rgba(39,49,66,0.06);
  --shadow-lg: 0 4px 12px rgba(39,49,66,0.08);
  --shadow-xl: 0 8px 24px rgba(39,49,66,0.10);
}

/* ── darksoft（夜）── G-SHOCK 調 LCD（body.theme-casio と併用で全体を電光緑＋樹脂黒に） */
[data-theme="darksoft"] {
  --bg: #071912;
  --bg-glow: rgba(60, 120, 90, 0.18);
  --bg-grad-top: color-mix(in srgb, var(--bg) 78%, #1a3d2e);
  --bg-grad-bot: color-mix(in srgb, var(--bg) 92%, #000000);
  --surface: #12251c;
  --surface2: #182e24;
  --surface3: #1e3a2d;
  --glass: rgba(18, 37, 28, 0.95);

  --text: #e8fdf3;
  --text-muted: #7bc9a0;
  --text-faint: #5caa82;

  --border: #3a7560;
  --border-light: rgba(0, 255, 160, 0.22);

  --btn-bg: #182e24;
  --btn-hover: #1e3a2d;
  --btn-active: #264a3a;

  --accent: #00ff88;
  --accent-light: #33ffaa;
  --accent-subtle: rgba(0, 255, 136, 0.14);
  --accent-glow: rgba(0, 255, 136, 0.22);

  --accent2: #ffcc00;
  --accent2-light: #ffe066;
  --accent2-subtle: rgba(255, 204, 0, 0.12);

  --accent3: #00ccff;
  --accent3-subtle: rgba(0, 204, 255, 0.10);

  --success: #00ff88;
  --warning: #ffcc00;
  --danger: #ff4466;
  --info: #00ccff;

  --mono: 'Share Tech Mono', 'Rajdhani', monospace;

  --shadow-sm: 0 1px 4px rgba(0,255,136,0.06);
  --shadow-md: 0 4px 16px rgba(0,255,136,0.08);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.35);
  --shadow-xl: 0 12px 40px rgba(0,0,0,0.45);
}

/* 夜：数字まわりの白縁取りを弱め、背景とのコントラストで読む */
[data-theme="darksoft"] .ui-num,
[data-theme="darksoft"] .inv-l1-qty {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ── テーマ切り替えUI ── */
.theme-switcher {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  box-shadow: var(--shadow-md);
}
.theme-switcher-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.theme-switcher select {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--text);
  cursor: pointer;
  outline: none;
}
.theme-switcher select:hover {
  background: var(--btn-hover);
}
.theme-switcher select:focus {
  border-color: var(--accent);
}
/* ── Login card entrance animation ── */
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  /* グラデーション禁止：単色背景 */
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  font-size: calc(14px * var(--font-scale, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* 縦スクロール補助 FAB（ログイン後・コンテンツが縦に溢れるときのみ表示） */
body.auth-logged-out .v0x-scroll-tools {
  display: none !important;
}
.v0x-scroll-tools {
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 8035;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.v0x-scroll-tools.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.v0x-scroll-tools .v0x-fab {
  width: 46px;
  height: 46px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, var(--text));
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 26px rgba(56, 48, 42, 0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.v0x-scroll-tools .v0x-fab:disabled {
  cursor: default;
}
@media (min-width: 769px) {
  .v0x-scroll-tools {
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    right: max(18px, env(safe-area-inset-right, 0px));
  }
}

/* 現場掲示板：書き込み FAB（.board-fab）と ↑↓ が右下で重なるため、掲示板表示中はスクロール補助を FAB の上へ */
body:has(#page-board.active) .v0x-scroll-tools {
  bottom: calc(86px + 56px + 12px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 769px) {
  body:has(#page-board.active) .v0x-scroll-tools {
    bottom: calc(32px + 56px + 12px + env(safe-area-inset-bottom, 0px));
  }
}
html[data-theme="neutral"] body:has(#page-board.active) .v0x-scroll-tools {
  bottom: calc(86px + 56px + 12px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 769px) {
  html[data-theme="neutral"] body:has(#page-board.active) .v0x-scroll-tools {
    bottom: calc(32px + 56px + 12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   MOBILE-FIRST ENHANCEMENTS
   ============================================================ */
/* Bottom navigation for mobile */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* ダッシュ／在庫のレイヤー(z-index数十〜数千)より手前に固定し、その他ドロワーより上でタップを受ける */
  z-index: 8020;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px);
  box-shadow: 0 -4px 20px rgba(56,48,42,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mobile-bottom-nav.theme-apple-nav {
  background: rgba(28,28,30,0.92) !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}
.mob-nav-items {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
  gap: 0;
  width: 100%;
}
.mob-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 52px;
  justify-content: center;
}
.mob-nav-item:active { opacity: 0.65; transform: scale(0.93); }
.mob-nav-icon { font-size: 22px; line-height: 1; filter: saturate(1.3); }
.mob-nav-label { font-size: 10px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; text-align: center; line-height: 1.2; }
.mob-nav-item.active .mob-nav-icon { transform: scale(1.1); }
.mob-nav-item.active .mob-nav-label { color: var(--accent); font-weight: 700; }
.mob-nav-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.18s;
}
.mob-nav-item.active .mob-nav-dot { opacity: 1; }

/* More menu drawer（上下2枠それぞれ独立スクロール） */
.mob-more-drawer {
  display: none;
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  left: 8px; right: 8px;
  z-index: 8010;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 -8px 32px rgba(56,48,42,0.16);
  animation: mobDrawerUp 0.22s cubic-bezier(.34,1.56,.64,1);
  flex-direction: column;
  /* max-height のみだと子の flex:1 が「確定した高さ」を持てず、スクロール枠が 0 に潰れる端末がある */
  --mob-drawer-fill-h: min(82vh, calc(100vh - 72px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)));
  max-height: var(--mob-drawer-fill-h);
  overflow: hidden;
}
.mob-more-drawer.open {
  display: flex;
  height: var(--mob-drawer-fill-h);
}
@keyframes mobDrawerUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.mob-more-content#mobMoreGrid {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.mob-more-head {
  flex-shrink: 0;
}
.mob-more-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding-top: 2px;
}
.mob-more-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface2) 88%, var(--surface));
  overflow: hidden;
}
.mob-more-panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 8px 10px;
  touch-action: pan-y;
}
.mob-more-panel-scroll .mob-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mob-more-section-title{
  flex-shrink: 0;
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 900;
  color: var(--text-muted);
  letter-spacing: .08em;
}
@media (max-width: 768px) {
  .mob-account-banner {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    background: color-mix(in srgb, var(--surface2) 92%, var(--surface));
  }
  .mob-account-banner-title {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .mob-account-line {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    word-break: break-all;
  }
  .mob-account-email { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 600; }
  .mob-account-muted { font-size: 10px; font-weight: 600; color: var(--text-muted); }
  .mob-account-plan {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 850;
    color: var(--accent);
  }
}
#mobMoreGrid.editing .mob-more-panel-scroll .mob-more-grid{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#mobMoreGrid.editing .mob-more-panel-scroll .mob-more-item{
  width: 100% !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 10px !important;
}
#mobMoreGrid.editing .mob-more-panel-scroll .mob-more-label{
  font-size: 12px !important;
  text-align: left !important;
  line-height: 1.2 !important;
}
#mobMoreGrid.editing .mob-more-panel-scroll .mob-more-icon{
  font-size: 20px;
}
#mobMoreGrid.editing .mob-more-section-title{
  padding: 10px 10px 6px;
  border-bottom: 1px solid rgba(217,204,182,.45);
}
#mobMoreGrid.editing .mob-more-panel-scroll [data-mob-move]{
  min-width: 40px;
}
.mob-more-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: 12px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: all 0.15s;
}
.mob-more-item:active { opacity: 0.7; transform: scale(0.95); }
.mob-more-icon { font-size: 22px; }
.mob-more-label { font-size: 9px; color: var(--text-muted); font-weight: 600; text-align: center; line-height: 1.3; }
.mob-more-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: auto;
  /* 透明のままだと合成次第で背面が真っ黒に見える端末がある → テーマ色で常に薄い膜を敷く */
  background: transparent;
}
.mob-more-backdrop.open {
  display: block;
  background: color-mix(in srgb, var(--bg) 74%, rgba(42, 42, 46, 0.08)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
[data-theme="darksoft"] .mob-more-backdrop.open {
  background: rgba(10, 12, 16, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ============================================================
   MOBILE MEDIA QUERIES (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Body（--font-scale と連動。固定 px はモバイルで文字サイズUIが効かない原因になる） */
  body { font-size: calc(14px * var(--font-scale, 1)); -webkit-text-size-adjust: 100%; }

  /* 下ナビ表示。サイドバーは display:none で潰さない（後続のオフキャンバス☰ と整合させる） */
  .mobile-bottom-nav { display: block; }

  /* Topbar（☰ は後続 @media と max-width:390px で制御／ここでは非表示にしない） */
  .topbar { padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; min-height: 54px; }
  .topbar-title { font-size: 15px; }
  .date-badge { font-size: 10px; padding: 4px 8px; }
  .newReportBtn, #newReportBtn { padding: 8px 12px; font-size: 11px; }

  /* Pages */
  .page { padding: 14px 12px 8px; }

  /* Cards */
  .card { padding: 14px; border-radius: 14px; margin-bottom: 12px; }
  .card-title { font-size: 10px; margin-bottom: 10px; }

  /* Stats row → 2 columns */
  .stats-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .stat-card { padding: 12px 14px; border-radius: 12px; }
  .stat-num { font-size: 24px; }
  .stat-label { font-size: 10px; }

  /* Global summary */
  .global-summary { padding: 14px; border-radius: 14px; margin-bottom: 12px; }
  .summary-grid { grid-template-columns: 1fr; gap: 10px; }
  .big-progress-num { font-size: 36px; }

  /* Site grid → single column */
  .site-grid { grid-template-columns: 1fr; gap: 10px; }
  .site-card-name { font-size: 13px; }

  /* Ring grid → 2 columns */
  .ring-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ring-svg-wrap { max-width: 115px; }
  .ring-pct { font-size: 20px; }
  .ring-tile-name { font-size: 11px; min-height: 2.4em; }
  .ring-tile { padding: 12px 10px 10px; border-radius: 16px; }

  /* Buttons — bigger tap targets */
  .btn { min-height: 42px; padding: 10px 16px; font-size: 13px; }
  .btn-sm { min-height: 36px; padding: 7px 12px; font-size: 12px; }
  .btn-block { border-radius: 12px; }

  /* Forms */
  input, select, textarea { font-size: 16px !important; /* prevent iOS zoom */ padding: 11px 12px; border-radius: 10px; }
  .grid-2 { grid-template-columns: 1fr; gap: 10px; }
  .grid-3 { grid-template-columns: 1fr; gap: 10px; }
  label.fl { font-size: 11px; }

  /* Modal — full-screen sheet */
  .modal-overlay.open { align-items: flex-end; }
  .modal {
    width: 100vw !important; max-width: 100vw !important;
    height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--border);
    animation: mobileSheetUp 0.28s cubic-bezier(.4,0,.2,1) !important;
    padding: 16px;
    /* 下ナビより上で最下行の保存などが確実に押せるよう余白（モーダルはナビより前面でも親指届きを確保） */
    padding-bottom: calc(16px + min(var(--app-mobile-nav-gap, 0px), 56px));
    box-sizing: border-box !important;
  }
  @keyframes mobileSheetUp { from { transform: translateY(100%); opacity: 0.8; } to { transform: translateY(0); opacity: 1; } }
  .modal-head { position: sticky; top: 0; }

  /* Toast（余白は後続ブロックの --app-mobile-nav-gap と同期） */
  .toast { bottom: calc(var(--app-mobile-nav-gap, 0px) + 12px); font-size: 13px; border-radius: 14px; padding: 12px 18px; }

  /* Table — horizontal scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
  table { min-width: 480px; }

  /* Board */
  .board-layout { grid-template-columns: 1fr; }
  .board-site-list { max-height: 200px; }

  /* Action rows */
  .action-row { gap: 8px; }
  .action-row .btn { flex: 1; justify-content: center; min-height: 44px; }

  /* BD cards */
  .bd-card-row1 { grid-template-columns: 1fr; gap: 8px; }
  .bd-card-row2 { grid-template-columns: 1fr 1fr; gap: 6px; }

  /* RD cards (daily report breakdown) */
  .rd-input-group input { width: 58px; font-size: 15px; padding: 6px 5px; }

  /* Schedule */
  .week-grid { grid-template-columns: 1fr; }
  .cal-cell { min-height: 104px !important; padding: 6px; }
  .cal-pill { font-size: 9px !important; padding: 2px 4px !important; }
  .view-tab { padding: 6px 10px; font-size: 11px; }

  /* Theme switcher repositioned above bottom nav */
  #themeSwitcher { bottom: calc(var(--app-mobile-nav-gap, 0px) + 8px); right: 12px; }

  /* Ring detail modal */
  .ring-detail-overlay { padding: 0; align-items: flex-end; }
  .ring-detail-card {
    border-radius: 24px 24px 0 0 !important;
    max-height: 90vh;
    width: 100%;
    max-width: 100%;
  }
  .ring-big { width: 180px; }

  /* Dash view toggle */
  .dash-view-toggle { gap: 2px; }
  .dash-view-btn { padding: 6px 12px; font-size: 11px; }

  /* Measure page */
  #page-measure .measure-sticky-panel { border-radius: 20px 20px 0 0; }

  /* Remove hover transforms on mobile (no hover events) */
  .site-card:hover { transform: none !important; }
  .stat-card:hover { transform: none !important; }
  .ring-tile:hover { transform: none !important; }

  /* Scroll performance */
  .page { -webkit-overflow-scrolling: touch; }
}

/* モバイル：上部の☰は使わない（タイトルタップでメニューを開く） */
@media (max-width: 768px) {
  .topbar .hamburger { display: none !important; }
  #topbarTitle { cursor: pointer; }
}

/* Dashboard（モバイル）：topbar が2段なので sticky 帯を下げる */
@media (max-width: 768px) {
  #page-dashboard .dash-mode-tabs-row { top: calc(98px + env(safe-area-inset-top, 0px)) !important; }
  #page-dashboard .dash-mode-tabs { top: calc(98px + env(safe-area-inset-top, 0px)) !important; }
  :root { --dash-scroll-top-gap: calc(106px + env(safe-area-inset-top, 0px)); }
}

/* 未ログイン時は下ナビ/ドロワーを出さない */
body.auth-logged-out .mobile-bottom-nav,
body.auth-logged-out .mob-more-drawer,
body.auth-logged-out .mob-more-backdrop{
  display: none !important;
}

/* ネイティブアプリ内（TWA / WebView / Capacitor 等）では Stripe 導線を隠す（Web 版はそのまま） */
.native-app-shell .stripe-checkout-button,
.native-app-shell .plan-upgrade-button,
.native-app-shell .stripe-billing-portal-button,
.native-app-shell [data-action="createCheckoutSession"] {
  display: none !important;
}

.native-billing-note,
.android-billing-note { /* 旧クラス互換 */
  display: none;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.native-app-shell .native-billing-note,
.native-app-shell .android-billing-note { /* 旧クラス互換 */
  display: block;
}

/* ============================================================
   VERY SMALL PHONES (≤390px)
   ============================================================ */
@media (max-width: 390px) {
  .page { padding: 10px 10px 6px; }
  .stats-row { gap: 6px; }
  .stat-num { font-size: 22px; }
  .ring-grid { gap: 8px; }
  .ring-tile { padding: 10px 8px 8px; border-radius: 14px; }
  .ring-pct { font-size: 18px; }
  .ring-tile-name { font-size: 10px; }
  .ring-svg-wrap { max-width: 100px; }
  .mob-more-panel-scroll .mob-more-grid { grid-template-columns: repeat(3, 1fr); }
  .topbar-title { font-size: 14px; }
}

/* ============================================================
   DARKSOFT THEME MOBILE OVERRIDES
   ============================================================ */
[data-theme="darksoft"] .mobile-bottom-nav {
  background: rgba(47,52,60,0.94);
  border-top-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
[data-theme="darksoft"] .mob-nav-label { color: var(--text-muted); }
[data-theme="darksoft"] .mob-nav-item.active .mob-nav-label { color: var(--accent); }
[data-theme="darksoft"] .mob-nav-dot { background: var(--accent); }
[data-theme="darksoft"] .mob-more-drawer {
  background: rgba(58,64,72,0.98);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="darksoft"] .mob-more-item {
  background: rgba(68,74,82,0.85);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="darksoft"] .mob-more-label { color: var(--text-muted); }

/* Selection */
::selection { background: rgba(76,126,255,0.20); color: var(--text); }

/* Focus ring */
:focus-visible { outline: 2px solid rgba(76,126,255,0.40); outline-offset: 2px; border-radius: 4px; }

.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(20px, 5vh, 40px) 20px clamp(32px, 8vh, 72px);
  /* 和紙っぽい：薄いムラ＋繊維感（画像なしで再現） */
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(255,255,255,0.70), rgba(255,255,255,0) 60%),
    radial-gradient(900px 700px at 85% 20%, rgba(205,200,190,0.20), rgba(205,200,190,0) 55%),
    radial-gradient(1100px 900px at 40% 95%, rgba(190,185,175,0.16), rgba(190,185,175,0) 60%),
    repeating-linear-gradient(
      95deg,
      rgba(120,130,150,0.05) 0px,
      rgba(120,130,150,0.05) 1px,
      rgba(255,255,255,0) 3px,
      rgba(255,255,255,0) 9px
    ),
    repeating-linear-gradient(
      5deg,
      rgba(120,130,150,0.03) 0px,
      rgba(120,130,150,0.03) 1px,
      rgba(255,255,255,0) 4px,
      rgba(255,255,255,0) 11px
    ),
    linear-gradient(180deg, rgba(250,248,244,1) 0%, rgba(242,238,232,1) 55%, rgba(236,232,226,1) 100%);
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

@media (prefers-reduced-transparency: reduce) {
  .login-screen {
    background: linear-gradient(180deg, rgba(250,248,244,1) 0%, rgba(236,232,226,1) 100%);
  }
}
.login-screen::before {
  display: none; /* 装飾グリッド削除 */
}
.login-deco-svg {
  display: none;
  position: absolute;
  left: -8%;
  top: -12%;
  width: min(58vw, 520px);
  height: 125%;
  max-height: none;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}
.login-deco-svg path {
  fill: none;
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
}
.login-deco-svg path.faint {
  stroke-width: 0.35;
}
[data-theme="studio"] .login-deco-svg path {
  stroke-width: 0.5;
}
[data-theme="studio"] .login-deco-svg path.faint {
  stroke-width: 0.38;
  opacity: 0.88;
}
.login-card {
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 40px 36px; width: 100%; max-width: 400px;
  animation: loginCardIn 0.5s cubic-bezier(0.34,1.2,0.64,1) both;
  box-shadow: var(--shadow-md);
  position: relative; z-index: 1;
  flex-shrink: 0;
}
.login-logo { text-align: center; margin-bottom: 24px; }
.login-logo-icon {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  min-height: auto;
}
.login-logo-img {
  display: block;
  width: 240px;
  height: auto;
  object-fit: contain;
  margin: 0 auto 16px;
}
/* 猫（Unicode）— ログイン画面のくすんだスチールブルー（スクリーンショット準拠） */
.brand-cat-glyph {
  line-height: 1;
  display: inline-block;
  font-family: ui-sans-serif, system-ui, "Segoe UI Symbol", "Noto Sans Canadian Aboriginal Syllabics", "Noto Sans Symbols 2", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  color: #7294b8 !important;
  opacity: 0.96;
  background: none !important;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
[data-theme="darksoft"] .brand-cat-glyph {
  color: #8eb4d8 !important;
}
.brand-cat-glyph--login {
  font-size: 42px;
}
.brand-cat-glyph--sidebar {
  font-size: 28px;
}
.brand-logo-wrench {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  line-height: 0;
}
.brand-logo-wrench svg {
  display: block;
}
.brand-logo-wrench--login svg {
  width: 24px;
  height: 24px;
}
.brand-logo-wrench--sidebar svg {
  width: 18px;
  height: 18px;
}
.login-logo-title { font-size: 16px; font-weight: 700; color: var(--accent); }
.login-logo-sub { font-size: 11px; color: var(--text-muted); font-family: var(--mono); margin-top: 3px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-msg { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 12px; line-height: 1.5; }
.login-sample-cta { display: block; margin-top: 14px; text-align: center; text-decoration: none; box-sizing: border-box; }
.login-sample-hint { display: block; margin-top: 10px; line-height: 1.5; }
.login-sample-hint a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* 対応OS・動作環境（ログイン／バックアップ等・控えめ） */
.muted-os-hint {
  font-size: 10px;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: center;
  margin: 12px auto 0;
  max-width: 26rem;
  font-weight: 400;
}
.login-os-hint { padding: 0 10px; opacity: 0.92; }
.backup-os-hint { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); max-width: none; }
/* 利用規約本文（スクロールは #termsModal 内で付与） */
.terms-content{
  padding: 16px;
}
.terms-content h3{ margin: 4px 0 10px; }
.terms-content h4{ margin: 14px 0 8px; }
.terms-content p, .terms-content li{ font-size: 13px; line-height: 1.65; }
.terms-content hr{ border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* 利用規約モーダル：画面中央・固定最大高さ・本文のみスクロール（セーフエリア広め） */
#termsModal.modal-overlay.open{
  align-items: center !important;
  justify-content: center !important;
  z-index: 13000 !important;
  box-sizing: border-box !important;
  --terms-safe-top: max(env(safe-area-inset-top, 0px), 47px);
  --terms-safe-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  --terms-safe-left: max(env(safe-area-inset-left, 0px), 16px);
  --terms-safe-right: max(env(safe-area-inset-right, 0px), 16px);
  padding:
    calc(var(--terms-safe-top) + 12px)
    calc(var(--terms-safe-right) + 12px)
    calc(var(--terms-safe-bottom) + 12px)
    calc(var(--terms-safe-left) + 12px) !important;
}
body.ios-app-shell #termsModal.modal-overlay.open{
  --terms-safe-top: max(env(safe-area-inset-top, 0px), 47px);
}
body.ios-app-shell.platform-iphone #termsModal.modal-overlay.open{
  --terms-safe-top: max(env(safe-area-inset-top, 0px), 59px);
}
body.ios-app-shell.platform-ipad #termsModal.modal-overlay.open{
  --terms-safe-top: max(env(safe-area-inset-top, 0px), 72px);
  --terms-safe-left: max(env(safe-area-inset-left, 0px), 16px);
  --terms-safe-right: max(env(safe-area-inset-right, 0px), 16px);
}
#termsModal.modal-overlay{
  z-index: 13000;
}
#termsModal .modal{
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  width: min(820px, 100%) !important;
  max-width: min(820px, 100%) !important;
  height: min(92vh, calc(100dvh - var(--terms-safe-top, 47px) - var(--terms-safe-bottom, 20px) - 48px)) !important;
  max-height: min(92vh, calc(100dvh - var(--terms-safe-top, 47px) - var(--terms-safe-bottom, 20px) - 48px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 64px rgba(56, 48, 42, 0.22) !important;
  animation: fadeIn 0.18s ease !important;
}
#termsModal .modal-head{
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding:
    max(14px, calc(env(safe-area-inset-top, 0px) * 0.25 + 12px))
    max(16px, calc(env(safe-area-inset-right, 0px) + 12px))
    12px
    max(16px, calc(env(safe-area-inset-left, 0px) + 12px)) !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}
#termsModal .terms-content{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding:
    16px
    max(18px, calc(env(safe-area-inset-right, 0px) + 12px))
    max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px))
    max(18px, calc(env(safe-area-inset-left, 0px) + 12px)) !important;
}
@media (max-width: 768px){
  #termsModal .modal{
    width: 100% !important;
    max-width: 100% !important;
    height: min(94vh, calc(100dvh - var(--terms-safe-top, 47px) - var(--terms-safe-bottom, 20px) - 32px)) !important;
    max-height: min(94vh, calc(100dvh - var(--terms-safe-top, 47px) - var(--terms-safe-bottom, 20px) - 32px)) !important;
    border-radius: 14px !important;
  }
}
html[data-theme="neutral"] #termsModal .modal{
  border-radius: 22px !important;
}

/* プライバシーポリシー単体ページ（privacy.html） */
body.privacy-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  --legal-safe-top: max(env(safe-area-inset-top, 0px), 47px);
  --legal-safe-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  --legal-safe-left: max(env(safe-area-inset-left, 0px), 16px);
  --legal-safe-right: max(env(safe-area-inset-right, 0px), 16px);
  padding:
    calc(var(--legal-safe-top) + 16px)
    calc(var(--legal-safe-right) + 12px)
    calc(var(--legal-safe-bottom) + 20px)
    calc(var(--legal-safe-left) + 12px);
}
body.ios-app-shell.privacy-body {
  --legal-safe-top: max(env(safe-area-inset-top, 0px), 47px);
}
body.ios-app-shell.platform-iphone.privacy-body {
  --legal-safe-top: max(env(safe-area-inset-top, 0px), 59px);
}
body.ios-app-shell.platform-ipad.privacy-body {
  --legal-safe-top: max(env(safe-area-inset-top, 0px), 72px);
}
.privacy-shell { max-width: 760px; margin: 0 auto; padding: 0; }
.privacy-shell h1 { font-size: 1.35rem; font-weight: 800; margin-bottom: 8px; }
.privacy-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 22px; line-height: 1.55; }
.privacy-shell h2 { font-size: 1.05rem; font-weight: 800; margin: 22px 0 10px; }
.privacy-shell p, .privacy-shell li { font-size: 13px; line-height: 1.75; color: var(--text); }
.privacy-shell ul { margin: 8px 0 12px 1.15em; }
.privacy-shell .card { padding: 18px 20px; margin-bottom: 16px; }
.privacy-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.privacy-shell a.policy-link { color: var(--accent); font-weight: 700; word-break: break-all; }
.login-error { background: rgba(185,82,63,0.10); border: 1px solid rgba(185,82,63,0.30); color: var(--danger); padding: 8px 12px; border-radius: 6px; font-size: 12px; display: none; }
.login-error.show { display: block; }

.app { display: none; min-height: 100vh; }
.app.show { display: flex; min-height: 100vh; align-items: stretch; }

/* セッション復元・更新直後：Firebase 判定前にログイン画面が一瞬出るのを抑える */
html.auth-restoring #loginScreen { display: none !important; }
html.auth-restoring #app {
  display: flex !important;
  min-height: 100vh;
  align-items: stretch;
}
html.auth-restoring body.auth-logged-out .mobile-bottom-nav,
html.auth-restoring body.auth-logged-out .mob-more-drawer,
html.auth-restoring body.auth-logged-out .mob-more-backdrop {
  display: none !important;
}

.sidebar {
  width: 220px;
  min-width: 220px;
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  box-shadow: none;
}
  .logo { flex-shrink: 0; padding: 18px 16px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; background: var(--surface2); /* グラデーション禁止 */ }
  .logo-icon {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 40px;
    min-height: auto;
  }
  .logo-mark-img {
    display: block;
    width: 40px;
    height: auto;
    object-fit: contain;
  }
  .logo-title { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.25; }
  .logo-sub { font-size: 9px; color: var(--text-muted); font-family: var(--mono); margin-top: 2px; letter-spacing: 0.05em; }
/* flex 内スクロール: min-height:0 が無いと領域が確定せずホイールが効かない／タッチが効きにくい */
.nav {
  flex: 1 1 0%;
  min-height: 0;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.nav::-webkit-scrollbar { width: 4px; }
.nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.nav-section { flex-shrink: 0; font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; padding: 10px 10px 4px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-reorder-hint { font-size: 10px; font-weight: 800; opacity: 0.55; letter-spacing: 0; text-transform: none; }
@media (pointer: coarse) {
  .nav-reorder-hint { display: none; }
}
.sidebar-nav-sortable {
  display: flex;
  flex-direction: column;
  gap: 2px;
  touch-action: pan-y;
}
.nav-item[draggable="true"] { cursor: grab; }
.nav-item[draggable="true"]:active { cursor: grabbing; }
.nav-item.dragging { opacity: 0.55; }

/* ─────────────────────────────────────────
   L4.5: AIコンサル（最小・必要時のみ）
   ───────────────────────────────────────── */
.ai-consult-slot{ display:none; margin:10px 12px 0; }
.ai-consult{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface2) 82%, var(--surface));
}
.ai-consult-badge{
  flex-shrink:0;
  font-size:11px;
  font-weight:950;
  letter-spacing:.04em;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border-light);
  background:var(--surface3);
  color:var(--text-muted);
}
.ai-consult-msg{
  font-size:12px;
  font-weight:850;
  line-height:1.45;
  color:var(--text);
}
.ai-consult-slot.level-info .ai-consult{ border-color: color-mix(in srgb, var(--accent) 18%, var(--border)); }
.ai-consult-slot.level-warning .ai-consult{ border-color: color-mix(in srgb, var(--warning) 26%, var(--border)); }
.ai-consult-slot.level-warning .ai-consult-badge{ background: color-mix(in srgb, var(--warning) 12%, var(--surface3)); color: color-mix(in srgb, var(--warning) 70%, var(--text)); }
.ai-consult-slot.level-danger .ai-consult{ border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }
.ai-consult-slot.level-danger .ai-consult-badge{ background: color-mix(in srgb, var(--danger) 12%, var(--surface3)); color: color-mix(in srgb, var(--danger) 72%, var(--text)); }

/* Schedule worker picker */
.sch-workers-wrap{display:flex; gap:6px; align-items:center}
.sch-pick-btn{flex:0 0 auto; min-height:32px; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:900}
.sch-worker-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}

/* Schedule: keep "作業員を選択" compact under cosmic skin */
#page-schedule .sch-workers-wrap{gap:8px; align-items:center;}
#page-schedule .sch-pick-btn{
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 16px rgba(80,60,50,.08) !important;
}
#page-schedule .sch-workers-wrap .mini{
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--text-muted) !important;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(255,255,255,.35);
  white-space: nowrap;
}

/* Schedule: site select is fixed per-row (visual only) */
#page-schedule .sch-site[disabled]{
  opacity: 1 !important;
  pointer-events: none !important;
  background: rgba(255,255,255,.40) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}

/* Schedule: visualizer-first (collapse list by default) */
#page-schedule #schListPanel{ display:none; }
#page-schedule.sch-list-open #schListPanel{ display:block; }
#page-schedule #schListPanel .table-wrap{ margin-top: 6px; }
#page-schedule #schListPanel .schedule-l3{ margin-top: 10px; }

/* 完了現場折りたたみ（現場マスタ・配置管理で共通） */
.site-done-collapse-head td {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface2) 88%, transparent);
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.site-done-collapse-head:focus-visible td {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -2px;
}
.site-done-collapse-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 850;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}
.site-done-collapse-arrow {
  display: inline-block;
  width: 1em;
  text-align: center;
  font-size: 11px;
  line-height: 1;
}
.site-done-collapse-row--hidden {
  display: none !important;
}

/* 一覧から作業員選択を重ねるとき（クイック編集は一時非表示に切り替え） */
#workerPickModal.modal-overlay.stacked.open {
  z-index: 220;
}
#schQuickEditModal.modal-overlay.worker-pick-open.open {
  z-index: 210;
}

/* 配置クイック編集：人数／作業／状態の3列（.grid-3 の均等3列を上書き） */
#schQuickEditModal .sch-quick-grid{
  display: grid;
  grid-template-columns: 120px 1fr 180px;
  gap: 10px;
  align-items: end;
}
.sch-quick-body{ padding: 16px; }
.sch-quick-footer{
  padding: 14px 16px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}
.sch-workerpick-body{ padding: 16px 16px 0 16px; }
.sch-workerpick-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.sch-workerpick-footer{
  padding: 14px 16px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

/* 作業員マスタ：行末のメニュー（詳細モーダル）— 普段は控えめ */
.worker-detail-menu-btn{
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.5;
  -webkit-tap-highlight-color: transparent;
}
.worker-detail-menu-btn .wd-bar{
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.simple-worker-row:hover .worker-detail-menu-btn,
.worker-detail-menu-btn:hover,
.worker-detail-menu-btn:focus-visible{
  opacity: 1;
  background: var(--surface3);
  border-color: var(--border);
  outline: none;
}
.worker-detail-body{ padding: 16px; }
.worker-detail-subcard{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.worker-detail-subcard-label{
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.worker-detail-footnote{
  font-size: 11px;
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1.55;
}
.worker-detail-footer{
  padding: 12px 16px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
}

/* 配置一覧：現場は見出し＋編集（値は .sch-site--mirror に保持） */
#page-schedule #schListPanel .sch-site-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
#page-schedule #schListPanel .sch-site-title{
  font-weight: 950;
  font-size: 14px;
  line-height: 1.25;
  color: var(--text);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#page-schedule #schListPanel .sch-site-edit-btn{
  flex-shrink: 0;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}
#page-schedule #schListPanel .sch-site--mirror{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
#page-schedule #schListPanel .sch-td--site{
  position: relative;
  vertical-align: middle;
}
#page-schedule #schListPanel .sch-td .sch-count,
#page-schedule #schListPanel .sch-td .sch-task,
#page-schedule #schListPanel .sch-td .sch-note{
  box-sizing: border-box;
}
@media (min-width: 769px) {
  #page-schedule #schListPanel .sch-td .sch-count{
    width: 72px;
    max-width: 100%;
  }
}
#page-schedule #schListPanel .sch-workers-wrap{
  align-items: center;
}
#page-schedule #schListPanel .sch-pick-btn{
  min-height: 34px;
}

/* モバイル：1現場＝コンパクトカード（約3行・横スクロールなし） */
@media (max-width: 768px) {
  #page-schedule #schListPanel .table-wrap{
    overflow-x: hidden;
    max-width: 100%;
  }
  #page-schedule #schListPanel table{
    width: 100%;
    table-layout: auto;
  }
  #page-schedule #schListPanel tbody{
    display: block;
    width: 100%;
  }
  #page-schedule #schListPanel thead{
    display: none !important;
  }
  #page-schedule #schListPanel tbody tr{
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    padding: 10px 12px;
    margin: 0 0 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    max-width: 100%;
    box-sizing: border-box;
  }
  #page-schedule #schListPanel tbody td{
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box;
  }
  #page-schedule #schListPanel .sch-td--site{
    position: relative;
    flex: 0 0 auto;
  }
  /* 詳細入力は DOM に残しつつ非表示（保存・編集モーダル用） */
  #page-schedule #schListPanel .sch-td--count,
  #page-schedule #schListPanel .sch-td--workers,
  #page-schedule #schListPanel .sch-td--task,
  #page-schedule #schListPanel .sch-td--status,
  #page-schedule #schListPanel .sch-td--note,
  #page-schedule #schListPanel .sch-td--actions{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  #page-schedule #schListPanel .sch-td:not(.sch-td--site)::before{
    display: none !important;
    content: none !important;
  }
  #page-schedule #schListPanel .sch-site-head{
    gap: 8px;
    align-items: flex-start;
  }
  #page-schedule #schListPanel .sch-site-title{
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
  }
  #page-schedule #schListPanel .sch-site-edit-btn{
    padding: 5px 10px !important;
    font-size: 10px !important;
    min-height: 28px;
  }
  #page-schedule #schListPanel .sch-mobile-summary{
    margin-top: 2px;
    min-width: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #page-schedule #schListPanel .sch-mobile-summary__meta{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
    min-width: 0;
    margin-bottom: 2px;
  }
  #page-schedule #schListPanel .sch-mobile-summary__count{
    flex-shrink: 0;
    font-weight: 800;
    color: var(--text);
  }
  #page-schedule #schListPanel .sch-mobile-summary__workers{
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #page-schedule #schListPanel .sch-mobile-summary__workers.is-empty{
    font-style: italic;
    opacity: 0.75;
  }
  #page-schedule #schListPanel .sch-mobile-summary__status{
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--text);
  }
  #page-schedule #schListPanel .sch-mobile-summary__sep{
    flex-shrink: 0;
    margin: 0 5px;
    opacity: 0.45;
  }
  #page-schedule #schListPanel .sch-mobile-summary__detail{
    font-size: 12px;
    line-height: 1.35;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  #page-schedule #schListPanel .sch-mobile-summary__detail .is-muted{
    color: var(--text-muted);
    font-size: 11px;
  }
  #page-schedule #schListPanel .sch-mobile-summary__note{
    color: var(--text-muted);
    font-size: 11px;
  }
  #page-schedule #schListPanel tbody tr.site-done-collapse-head {
    display: block !important;
    flex-direction: column;
    padding: 10px 12px;
    margin: 0 0 10px;
    cursor: pointer;
  }
  #page-schedule #schListPanel tbody tr.site-done-collapse-head td {
    display: block;
    padding: 0 !important;
  }
  #page-sites tbody tr.site-done-collapse-head {
    display: block !important;
    width: 100%;
    margin: 0 0 8px;
    border-radius: 12px;
    overflow: hidden;
  }
  #page-sites tbody tr.site-done-collapse-head td {
    display: block;
    width: 100% !important;
  }
}
@media (min-width: 769px) {
  #page-schedule #schListPanel .sch-mobile-summary{
    display: none !important;
  }
}
@media (min-width: 769px) {
  #page-schedule #schListPanel tbody{
    display: table-row-group;
  }
  #page-schedule #schListPanel thead{
    display: table-header-group !important;
  }
  #page-schedule #schListPanel tbody tr{
    display: table-row;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  #page-schedule #schListPanel tbody td{
    display: table-cell;
    padding: 10px 8px !important;
    vertical-align: middle;
  }
}

/* ============================================================
   Dashboard clickability hotfix
   - Some theme layers may accidentally disable pointer events.
   - Force dashboard first-info buttons clickable.
   ============================================================ */
#page-dashboard #dashFirstInfo,
#page-dashboard #dashFirstInfo *,
#page-dashboard #dashSiteReportHistory,
#page-dashboard #dashSiteReportHistory *{
  pointer-events: auto !important;
}
#page-dashboard #dashFirstInfo{ position: relative; z-index: 2; }
#page-dashboard #dashSiteReportHistory{ position: relative; z-index: 2; }

#page-dashboard .dash-mode-tabs-row,
#page-dashboard .dash-mode-tabs-row *,
#page-dashboard .dash-mode-tabs,
#page-dashboard .dash-mode-tabs *{
  pointer-events: auto !important;
}
#page-dashboard #stockFirstInfo,
#page-dashboard #stockFirstInfo *{
  pointer-events: auto !important;
}

/* ============================================================
   Dashboard scroll anchors（進捗／在庫の「戻る位置」と sticky 帯の干渉防止）
   - ドキュメントスクロール時、トップバー＋（desktop のみ）タブ行の下に余白を確保
   - モード切替時は各モード先頭アンカーへ block:start で統一
   ============================================================ */
:root {
  --dash-scroll-top-gap: calc(66px + env(safe-area-inset-top, 0px));
}
@media (min-width: 769px) {
  :root {
    --dash-scroll-top-gap: calc(126px + env(safe-area-inset-top, 0px));
  }
}
html.page-dashboard-active {
  scroll-padding-top: var(--dash-scroll-top-gap);
}

#page-dashboard #dashFirstInfo,
#page-dashboard #stockFirstInfo {
  scroll-margin-top: calc(var(--dash-scroll-top-gap) + 6px);
}

#page-dashboard #stockKpiRow {
  scroll-margin-top: calc(var(--dash-scroll-top-gap) + 4px);
}

#page-dashboard #dashBreakdown.dash-breakdown {
  scroll-margin-top: calc(var(--dash-scroll-top-gap) + 10px);
}

#page-dashboard .dash-mode-content {
  position: relative;
  z-index: 0;
}

#page-dashboard #stockFirstInfo {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Site master minimal alignment (現場マスタ：整列は必要最低限)
   - 余計な装飾/並べ替えは増やさない
   - 列の揃い、数字の可読性、操作列の収まりだけを保証
   ============================================================ */
#page-sites .card{
  /* Excel寄せ：現場マスタだけ“板”を弱める */
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
#page-sites .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
#page-sites .table-wrap{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(80,60,50,.08);
}
#page-sites table{
  width:100%;
  table-layout:fixed;
  border-collapse: collapse;
}
#page-sites th,#page-sites td{
  padding:8px 10px !important;
  vertical-align:middle;
  line-height:1.35;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
#page-sites th{
  white-space:nowrap;
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(0,0,0,.10);
  color: rgba(42,40,37,.72);
  font-weight: 900;
}
#page-sites tr:last-child td{ border-bottom: none; }

/* 現場名セルの中だけ、少し呼吸させる */
#page-sites .site-name{ display:block; }
#page-sites .site-addr{
  margin-top: 3px !important;
  font-size: 10px !important;
  color: rgba(42,40,37,.55) !important;
}

/* Excel寄せ：デスクトップは住所を1行に抑えて羅列感を優先 */
@media (min-width: 769px){
  #page-sites .site-addr{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
  }
}

/* 住所列は現場名に統合（既存方針を維持） */
#page-sites th:nth-child(2), #page-sites td:nth-child(2){ display:none !important; }

/* 数字系は右寄せで揃える */
#page-sites td:nth-child(4),
#page-sites td:nth-child(5),
#page-sites td:nth-child(7){
  text-align:right;
  font-variant-numeric: tabular-nums;
}
#page-sites td:nth-child(6){ text-align:left; } /* 進捗はバー優先 */

/* 進捗セル内の揃え（バーと%が崩れない） */
#page-sites .site-progress{ display:flex; align-items:center; gap:8px; }
#page-sites .site-progress-pct{ min-width:36px; text-align:right; font-variant-numeric: tabular-nums; }
/* Excel寄せ：バーは情報量が多いので隠して%だけにする */
#page-sites .site-progress-bar{ display:none !important; }
#page-sites .site-progress{ justify-content:flex-end; }

/* 操作列：詰めて2列グリッド（横に伸びすぎない） */
#page-sites td:last-child{ white-space:normal; }
#page-sites .site-actions{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:6px;
  align-items:center;
}
#page-sites .site-actions .btn{
  width:100%;
  justify-content:center;
  padding:5px 6px;
  font-size:10.5px;
  border-radius: 10px !important;
}

/* モバイルはカード化（既存）を尊重しつつ、ラベル幅だけ最小保証 */
@media (max-width:768px){
  #page-sites td::before{ min-width:64px !important; }
}

/* ============================================================
   Inventory visibility hotfix (在庫が消える対策)
   - JSでinvTableを表示しても、過去CSSの display:none!important が勝つため
   - 旧invTableを確実に表示（機能/ロジックは触らない）
   ============================================================ */
#page-inventory #invTable{
  display: table !important;
  width: 100% !important;
}
#page-inventory #invTable thead{ display: table-header-group !important; }
#page-inventory #invTable tbody{ display: table-row-group !important; }
#page-inventory #invTable tr{ display: table-row !important; }
#page-inventory #invTable th,
#page-inventory #invTable td{ display: table-cell !important; }

/* 在庫ページ：スクロール中だけ淡く ↑↓（モバイルはボトムナビより手前） */
#page-inventory .inv-scroll-nudge {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  /* デスクトップ: .modal-overlay (200) より下。モバイルは下で上書き */
  z-index: 190;
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
#page-inventory .inv-scroll-nudge.inv-scroll-nudge--on {
  opacity: 0.5;
  visibility: visible;
  pointer-events: auto;
}
#page-inventory .inv-scroll-nudge-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  color: var(--text-muted);
  box-shadow: 0 4px 14px rgba(56, 48, 42, 0.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#page-inventory .inv-scroll-nudge-btn:active {
  opacity: 0.85;
  transform: scale(0.94);
}
@media (max-width: 768px) {
  #page-inventory .inv-scroll-nudge {
    /* ボトムナビ(8020)より手前・開いたモーダルシート(8040)より背面 */
    z-index: 8035;
  }
}
@media (min-width: 769px) {
  #page-inventory .inv-scroll-nudge {
    bottom: 28px;
    right: max(18px, env(safe-area-inset-right));
  }
}

/* 在庫・バックアップ共通：文字サイズ 6 段（選択が分かる） */
.font-scale-readout {
  line-height: 1.45;
}
.font-scale-steps {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.font-scale-step.font-scale-step--active,
.inv-font-scale-step.font-scale-step--active {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface2));
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--text);
  font-weight: 850;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}
#page-inventory .inv-font-scale-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin-top: 12px;
  padding: 7px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface2) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#page-inventory .inv-font-scale-rail__lab {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
#page-inventory .inv-font-scale-rail__pct {
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  min-width: 3.4em;
}
#page-inventory .inv-font-scale-rail__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
#page-inventory .inv-font-scale-step {
  min-width: 34px;
  height: 30px;
  padding: 0 6px;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (max-width: 768px) {
  #page-inventory .inv-font-scale-rail {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    z-index: 8010;
    box-shadow: 0 -2px 14px rgba(56, 48, 42, 0.1);
  }
}
@media (min-width: 769px) {
  #page-inventory .inv-font-scale-rail {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

.sch-worker-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface3); font-size:11px; font-weight:850; color:var(--text)}
.sch-worker-chip .mini{font-size:10px; color:var(--text-muted); font-weight:800}
.worker-pick-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:var(--surface2)}
.worker-pick-item .name{font-weight:950}
.worker-pick-item .role{font-size:11px; color:var(--text-muted); font-weight:700}
.nav-item.nav-dragging { opacity: 0.72; }
.nav-item.nav-drag-over { outline: 1px dashed var(--accent); outline-offset: 2px; border-radius: 7px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text); transition: all 0.18s; position: relative; }
.nav-item:hover { background: var(--btn-hover); color: var(--text); }
.nav-item.active { background: var(--btn-active); color: var(--text); font-weight: 600; }
.nav-item.active::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; background: var(--accent); border-radius: 0 2px 2px 0; }
.nav-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; filter: saturate(1.2); }
.nav-sep { height: 1px; background: var(--border); margin: 8px 6px; }
.user-info { flex-shrink: 0; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface2); }
.user-plan-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; margin: 2px 0 8px; padding: 5px 9px; border-radius: 7px; display: block; width: fit-content; max-width: 100%; line-height: 1.3; word-break: break-word; box-sizing: border-box; }
.user-plan-badge.user-plan-badge--pro { background: rgba(52, 199, 89, 0.16); color: var(--success); border: 1px solid rgba(52, 199, 89, 0.35); }
.user-plan-badge.user-plan-badge--free { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.user-plan-badge.user-plan-badge--preview { background: rgba(88, 86, 214, 0.14); color: #5856d6; border: 1px solid rgba(88, 86, 214, 0.28); }
.sample-demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #355d72 0%, #2d4f62 100%);
  color: #f2f8fb;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 14px rgba(36, 54, 66, 0.18);
}
.sample-demo-banner-msg { line-height: 1.35; text-align: center; max-width: min(520px, 100%); }
.sample-demo-banner .btn { flex-shrink: 0; border-color: rgba(255, 255, 255, 0.35); color: #f2f8fb; background: rgba(255, 255, 255, 0.12); }
.sample-demo-banner .btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); }
body.sample-demo-active #app.show { padding-top: calc(44px + env(safe-area-inset-top, 0px)); box-sizing: border-box; }
@media (max-width: 520px) {
  body.sample-demo-active #app.show { padding-top: calc(52px + env(safe-area-inset-top, 0px)); }
}
.user-plan-badge.user-plan-badge--muted { opacity: 0.75; border-style: dashed; }
.user-email { font-size: 11px; color: var(--text); word-break: break-all; margin-bottom: 6px; }
.sync-status { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--success); }
.sync-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse 2s ease-in-out infinite; }

/* サイドバー：アカウント情報は折りたたみで邪魔にならないように */
.sidebar-account{ margin-top: 8px; }
.sidebar-account-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 92%, transparent);
  font-size: 12px;
  font-weight: 850;
  color: var(--text);
}
.sidebar-account-summary::-webkit-details-marker{ display:none; }
.sidebar-account-summary .s{ font-size: 10px; font-weight: 800; color: var(--text-muted); }
.sidebar-account[open] .sidebar-account-summary{ background: color-mix(in srgb, var(--surface3) 92%, transparent); }
/* ログアウトはプライバシーポリシー直下に固定（視覚的に区切る） */
.sidebar-account .sidebar-account-logout{
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.user-info.user-info--fold{
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } }
.sidebar-footer { flex-shrink: 0; padding: 10px 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; background: var(--surface2); }
.login-app-ver,
.sidebar-app-ver {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.25;
  min-height: 1.25em;
}
.login-app-ver { margin-top: 4px; opacity: 0.92; }
.sidebar-app-ver { padding: 4px 2px 0; margin-top: 2px; opacity: 0.88; }

/* 猫モード入口：サイドバー最下部（バージョンの下）・控えめ */
.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
#dashCatV2Trigger.sidebar-cat-v2-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin: 2px 0 0;
  padding: 3px 4px 1px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.22;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease, color 0.2s ease;
}
#dashCatV2Trigger.sidebar-cat-v2-entry:hover { opacity: 0.5; }
#dashCatV2Trigger.sidebar-cat-v2-entry:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}
#dashCatV2Trigger.sidebar-cat-v2-entry.dash-cat-v2-trigger--on {
  opacity: 0.62;
  color: var(--accent);
}
.sidebar-cat-v2-entry-icon {
  flex-shrink: 0;
  display: block;
  opacity: 0.9;
}
.sidebar-cat-v2-entry-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
}
.sidebar-footer #dashCatV2Trigger.sidebar-cat-v2-entry {
  color: var(--text-muted) !important;
}
.sidebar-footer #dashCatV2Trigger.sidebar-cat-v2-entry.dash-cat-v2-trigger--on {
  color: var(--accent) !important;
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; align-self: stretch; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: calc(12px + max(env(safe-area-inset-top, 0px), 10px)) 24px 12px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 5; gap: 8px; box-shadow: none; /* 影削除 */ }
.topbar-back{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  margin:0;
  padding:0 10px 0 2px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  font-size:22px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  position: relative;
  z-index: 2;
  touch-action: manipulation;
}
/* display:inline-flex が [hidden] の display:none より後勝ちすると、非表示でも見えてタップ不能になる */
.topbar-back[hidden]{
  display: none !important;
}
.topbar-back:hover{background:color-mix(in srgb,var(--surface2) 88%,transparent)}
.topbar-back:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
  outline-offset:2px;
}
.topbar-title { font-size: 16px; font-weight: 700; color: var(--text); min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right { display: flex; gap: 8px; align-items: center; min-width: 0; flex: 0 1 auto; flex-shrink: 1; justify-content: flex-end; }
.topbar-right > .btn { flex-shrink: 0; }
.topbar-right .topbar-actions > .btn { flex-shrink: 0; }
.topbar-right .date-badge { flex-shrink: 0; }
/* 日報ボタン：狭い幅では短いラベルのみ（HTML に両方あるためデフォルトで長文のみ表示） */
.topbar-report-short { display: none; }
.topbar-report-long { display: inline; }
.app-update-short { display: none; }
.app-update-long { display: inline; }
@media (max-width: 768px) {
  .topbar-report-long { display: none; }
  .topbar-report-short { display: inline; }
  .app-update-long { display: none; }
  .app-update-short { display: inline; }
}
#appUpdateBtn,
.topbar-update-btn {
  flex-shrink: 0;
  min-width: 0;
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* 旧版 app.js が body 直下に置いた浮動ボタンを無効化 */
body > #appUpdateBtn {
  display: none !important;
}
.topbar-actions #appUpdateBtn {
  display: inline-flex !important;
  align-items: center;
}
.date-badge {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: var(--btn-bg);
  border: 1px solid var(--border);
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.page { display: none; padding: 24px; }
.page.active { display: block; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; transition: border-color 0.2s; box-shadow: none; /* 影削除 */ }
.card:hover { box-shadow: var(--shadow-sm); }
.card-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.card-title span { color: var(--text); /* アクセント色を抑制 */ }

/* 施工実績 */
.perf-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
/* サイドバーに無い一覧（例：内訳箇所一覧）：長いときも戻るが迷子にならないよう固定 */
#page-breakdownlist .perf-tools{
  position:sticky;
  top:0;
  z-index:4;
  padding-top:10px;
  padding-bottom:8px;
  margin-top:-6px;
  margin-bottom:10px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:12px;
}
#page-breakdownlist .perf-tools .btn{margin:0}
.perf-search{
  flex: 1;
  min-width: 220px;
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.perf-empty{color:var(--text-muted);text-align:center;padding:28px 12px;font-size:13px}
.perf-card{border:1px solid var(--border);border-radius:16px;background:var(--surface2);padding:14px 14px 12px;margin:0 0 12px;box-shadow:var(--shadow-sm)}
.perf-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.perf-title{font-size:16px;font-weight:900;color:var(--text);line-height:1.2}
.perf-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.perf-badge{padding:4px 10px;border-radius:999px;background:color-mix(in srgb, var(--success) 16%, var(--surface));border:1px solid color-mix(in srgb, var(--success) 28%, var(--border));color:var(--success);font-size:11px;font-weight:900}
.perf-date{font-family:var(--mono);font-weight:800;font-size:12px;color:var(--text-muted)}
/* 完了現場：日付は1段に収まるサイズ（狭い画面は省略） */
#page-performance .perf-meta{
  align-items:center;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:8px;
  max-width:min(520px,100%);
  min-width:0;
}
#page-performance .perf-meta .perf-date{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--mono);
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.25;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.perf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.perf-meter{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:10px 12px}
.perf-meter-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:8px}
.perf-meter-label{font-size:12px;font-weight:900;color:var(--text)}
.perf-meter-pct{font-family:var(--mono);font-weight:950;font-size:18px;color:var(--text);letter-spacing:.02em}
.perf-meter-pct.ok{color:var(--success)}
.perf-meter-pct.warn{color:var(--warning)}
.perf-gauge{height:10px;border-radius:999px;background:var(--btn-bg);border:1px solid var(--border);overflow:hidden}
.perf-gauge-fill{display:block;height:100%;background:var(--accent);border-radius:999px}
.perf-gauge-fill.ok{background:var(--success)}
.perf-gauge-fill.warn{background:var(--warning)}
.perf-meter-sub{margin-top:8px;font-family:var(--mono);font-size:12px;font-weight:900;color:var(--text)}
.perf-mats{margin-top:12px}
.perf-mats-title{font-size:12px;font-weight:900;color:var(--text);margin-bottom:8px}
.perf-mats-chips{display:flex;flex-wrap:wrap;gap:8px}
.perf-chip{display:inline-flex;gap:8px;align-items:baseline;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);font-size:12px;font-weight:800;color:var(--text)}
.perf-chip--muted{font-size:11px;font-weight:700;color:var(--text-muted);border-style:dashed}
.perf-chip-num{font-family:var(--mono);font-weight:950;color:var(--accent)}
.perf-muted{color:var(--text-muted);font-size:12px;font-weight:700}
.perf-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.perf-tabs{margin:8px 2px 8px}
.perf-agg-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.perf-select{
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.perf-agg-hint{font-size:11px;font-weight:800;color:var(--text-muted)}
.perf-agg-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 14px}
.perf-agg-row{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:12px 12px;box-shadow:var(--shadow-sm)}
.perf-agg-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.perf-agg-k{font-family:var(--mono);font-size:13px;font-weight:950;color:var(--text)}
.perf-agg-sites{font-size:11px;font-weight:800;color:var(--text-muted)}
.perf-agg-metrics{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.perf-agg-metric{flex:1;min-width:180px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);padding:10px}
.perf-agg-l{font-size:11px;font-weight:900;color:var(--text-muted);margin-bottom:6px}
.perf-agg-v{font-family:var(--mono);font-size:22px;font-weight:950;color:var(--text);letter-spacing:.02em}
.perf-agg-v .u{font-size:12px;font-weight:900;color:var(--text-muted);margin-left:4px}
.perf-agg-v.fill{color:var(--accent)}
.perf-agg-v.rem{color:var(--accent3)}
.perf-agg-sub{margin-top:10px;font-size:11px;font-weight:800;color:var(--text-muted);line-height:1.5}
@media (max-width:768px){.perf-grid{grid-template-columns:1fr}.perf-title{font-size:15px}}

/* GLOBAL SUMMARY */
.global-summary { background: var(--surface); /* グラデーション禁止 */ border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.global-summary-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.global-summary-title { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.summary-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }

/* Bulletin board */
.board-layout { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
.board-side { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.board-site-list { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow: auto; }
.board-site-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); color: var(--text-muted); cursor: pointer; font-size: 12px; }
.board-site-item:hover { border-color: var(--accent); color: var(--text); }
.board-site-item.active { border-color: var(--accent); color: var(--accent); background: rgba(90,138,50,0.10); }
.board-main { min-width: 0; }
.board-post-form { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.board-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.board-preview img { width: 86px; height: 86px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.board-post { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.board-post-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.board-post-title { font-size: 12px; font-weight: 700; color: var(--accent); }
.board-post-meta { font-size: 10px; color: var(--text-muted); font-family: var(--mono); white-space: nowrap; }
.board-post-text { font-size: 13px; line-height: 1.7; white-space: pre-wrap; margin-bottom: 10px; }
.board-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.board-images img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; }
.board-empty { color: var(--text-muted); text-align: center; padding: 38px 12px; font-size: 13px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface); }
@media (max-width: 768px) { .board-layout { grid-template-columns: 1fr; } .board-site-list { max-height: 220px; } }

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

.big-progress { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.big-progress-num { font-family: var(--mono); font-weight: 900; font-size: 42px; color: var(--text); line-height: 1; }
.big-progress-pct { font-size: 16px; color: var(--text-muted); }
.big-progress-meta { font-size: 12px; color: var(--text); margin-bottom: 8px; font-weight: 600; }

.big-bar { height: 16px; background: var(--surface3); border-radius: 8px; overflow: hidden; position: relative; }
.big-bar-fill { height: 100%; background: var(--accent); /* グラデーション禁止 */ border-radius: 8px; transition: width 0.6s ease; position: relative; }
.big-bar-fill::after { display: none; /* 発光アニメーション禁止 */ }

.global-stats-list { display: flex; flex-direction: column; gap: 8px; }
.global-stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 6px 10px; background: var(--btn-bg); border: 1px solid var(--border); border-radius: 6px; }
.global-stat-row .label { color: var(--text-muted); }
.global-stat-row .val { font-family: var(--mono); font-weight: 600; color: var(--text); }
.global-stat-row .val.warn { color: var(--warning); }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; position: relative; overflow: hidden; transition: all 0.2s; box-shadow: none; }
.stat-card:hover { border-color: var(--text-muted); box-shadow: var(--shadow-sm); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.stat-card.warn::before { background: var(--warning); }
.stat-card.info::before { background: var(--accent3); }
.stat-num { font-size: 26px; font-weight: 900; font-family: var(--mono); color: var(--accent); line-height: 1; }
.stat-card.warn .stat-num { color: var(--warning); }
.stat-card.info .stat-num { color: var(--accent3); }
.stat-label { font-size: 12px; color: var(--text); margin-top: 5px; font-weight: 600; }

/* SITE CARD */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.site-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: all 0.2s cubic-bezier(.4,0,.2,1); cursor: pointer; box-shadow: var(--shadow-sm); }
.site-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(56,48,42,0.12), 0 2px 8px rgba(56,48,42,0.06), 0 0 0 1px rgba(90,138,50,0.15); }
.site-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.site-card-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.site-card-name { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.site-card-addr { font-size: 11px; color: var(--text-muted); }
.site-card-body { padding: 14px 16px; }

.card-progress-num { font-family: var(--mono); font-weight: 900; color: var(--accent); font-size: 28px; line-height: 1; }
.card-progress-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }

.qty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.qty-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.qty-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.qty-val { font-family: var(--mono); font-size: 13px; }
.qty-val strong { color: var(--accent); font-weight: 700; }
.qty-val .warn-color { color: var(--warning); font-weight: 700; }

/* Material breakdown */
.material-section { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.material-toggle { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 6px 0; user-select: none; }
.material-toggle-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.material-toggle-arrow { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
.material-toggle.open .material-toggle-arrow { transform: rotate(90deg); }
.material-list { display: none; flex-direction: column; gap: 6px; margin-top: 8px; }
.material-list.open { display: flex; }
.material-item { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.material-item-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin-bottom: 4px; }
.material-name { font-weight: 600; color: var(--text); }
.material-val { font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 600; }
.material-bar { height: 5px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
.material-bar-fill { height: 100%; background: var(--accent); transition: width 0.5s; }

/* Site card location bars */
.locations-section { margin-top: 10px; }
.locations-label { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.location-bars { display: flex; gap: 2px; height: 14px; border-radius: 3px; overflow: hidden; background: var(--surface3); }
.location-bar { flex: 1; min-width: 0; transition: opacity 0.15s; }
.location-bar:hover { opacity: 0.7; }

.progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); transition: width 0.5s; }
.progress-fill.warn { background: linear-gradient(90deg, var(--warning), #e5a47a); }

.badge { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.badge-green { background: rgba(90,138,50,0.15); color: var(--success); border: 1px solid rgba(90,138,50,0.30); }
.badge-orange { background: rgba(201,109,44,0.15); color: var(--warning); border: 1px solid rgba(201,109,44,0.30); }
.badge-red { background: rgba(185,82,63,0.12); color: var(--danger); border: 1px solid rgba(185,82,63,0.30); }
.badge-blue { background: rgba(61,127,160,0.15); color: var(--accent3); border: 1px solid rgba(61,127,160,0.30); }
.badge-gray { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }

.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 4px; }
label.fl { font-size: 11px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.07em; }
/* .fl の uppercase で単位の m / mm / L / % が M / MM になるのを防ぐ */
label.fl .fl-unit-si {
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 800;
}
input, select, textarea { background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; padding: 9px 12px; outline: none; transition: all 0.2s; width: 100%; }
  input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(76,126,255,0.10); }
textarea { resize: vertical; min-height: 72px; }
select option { background: var(--surface2); }

.radio-group { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
  .radio-btn { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; background: var(--btn-bg); border: 1px solid var(--border); border-radius: 5px; padding: 6px 11px; transition: all 0.15s; user-select: none; color: var(--text); }
  .radio-btn:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); color: var(--text); }
  .radio-btn input { display: none; }
  
  .check-group { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
  .check-btn { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; background: var(--btn-bg); border: 1px solid var(--border); border-radius: 5px; padding: 6px 11px; transition: all 0.15s; user-select: none; color: var(--text); }
  .check-btn:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); color: var(--text); }
  .check-btn input { display: none; }

/* ── ボタン：同一トーン統一、明度差で表現 ── */
  .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); transition: all 0.18s cubic-bezier(.4,0,.2,1); white-space: nowrap; position: relative; background: var(--btn-bg); color: var(--text); }
  .btn:hover { background: var(--btn-hover); }
  .btn:active { transform: scale(0.97); background: var(--btn-active); }
  .btn-primary { background: var(--btn-bg); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
  .btn-primary:hover { background: var(--btn-hover); box-shadow: var(--shadow-md); }
  .btn-secondary { background: var(--btn-bg); color: var(--text); border: 1px solid var(--border); }
  .btn-secondary:hover { background: var(--btn-hover); }
  .btn-soft-red { background: var(--btn-bg); color: var(--text-muted); border: 1px solid var(--border); }
  .btn-soft-red:hover { background: var(--btn-hover); color: var(--danger); }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-block { width: 100%; justify-content: center; }
.action-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

.table-wrap { overflow-x: auto; }
/* === 現場マスタ テーブル改善（間延び修正） === */
#page-sites .card { padding: 12px 14px; }
#page-sites .card-title { margin-bottom: 10px; }
#page-sites .card-title::after{ display:none !important; } /* 見出し直下がテーブルのため、テープ下線が重なるのを防ぐ */
#page-sites .table-wrap{ margin-top: 6px; }
#page-sites table { border-collapse: separate; border-spacing: 0; width: 100%; }
#page-sites th { font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; background: var(--surface2); border-bottom: 2px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 2; }
#page-sites td { padding: 8px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
#page-sites tr:last-child td { border-bottom: none; }
#page-sites tr:hover td { background: rgba(107,142,61,.04); }
/* 住所列を非表示（現場名に統合） */
#page-sites th:nth-child(2), #page-sites td:nth-child(2) { display: none; }
/* 現場名・住所（場所は省略しない／詳細は下段） */
#page-sites .site-name.ui-tier-place { max-width: none; white-space: normal; overflow: visible; word-break: break-word; }
#page-sites .site-addr { font-size: 10px; color: var(--text-muted); margin-top: 4px; white-space: normal; word-break: break-word; line-height: 1.35; }
#page-sites .site-client { font-size: 11px; color: var(--text); }
#page-sites .site-num { font-family: var(--mono); font-size: 12px; font-weight: 600; }

/* 現場名が長いと「A現場だけ幅/高さを取る」ので、デスクトップは軽くクランプして密度維持 */
@media (min-width: 769px){
  #page-sites .site-name.ui-tier-place{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #page-sites .site-addr{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* 進捗バー */
#page-sites .site-progress { display: flex; align-items: center; gap: 8px; min-width: 100px; }
#page-sites .site-progress-bar { flex: 1; background: var(--surface2); border-radius: 99px; height: 8px; overflow: hidden; border: 1px solid var(--border); }
#page-sites .site-progress-fill { height: 100%; border-radius: 99px; transition: width .6s ease; }
#page-sites .site-progress-pct { font-family: var(--mono); font-size: 12px; font-weight: 700; min-width: 32px; text-align: right; }
/* 操作ボタン */
#page-sites .site-actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
#page-sites .site-actions .btn { padding: 5px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
#page-sites .action-row { margin-top: 10px; gap: 6px; }
#page-sites .action-row .btn { padding: 8px 12px; font-size: 12px; }

/* === 現場マスタ スマホ カード型表示 === */
@media (max-width: 768px) {
  #page-sites .card { padding: 10px 10px; }
  #page-sites .table-wrap { overflow-x: visible; }
  #page-sites table { display: block; }
  #page-sites thead { display: none; }
  #page-sites tbody { display: flex; flex-direction: column; gap: 8px; }
  #page-sites tr { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
  #page-sites tr:hover td { background: transparent; }
  #page-sites td { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border: none; font-size: 12px; gap: 8px; }
  #page-sites td::before { content: attr(data-label); font-size: 10px; color: var(--text-muted); font-weight: 600; flex-shrink: 0; min-width: 55px; }
  /* 現場名セル */
  #page-sites td:first-child { display: block; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
  #page-sites td:first-child::before { display: none; }
  #page-sites .site-name { font-size: 14px; max-width: 100%; }
  #page-sites .site-addr { max-width: 100%; }
  /* 住所列（非表示のまま） */
  #page-sites td:nth-child(2) { display: none; }
  /* 数量 */
  #page-sites .site-num { font-size: 13px; }
  /* 進捗 */
  #page-sites .site-progress { min-width: 0; flex: 1; max-width: 140px; }
  /* 操作ボタン列 */
  #page-sites td:last-child { display: block; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--border); }
  #page-sites td:last-child::before { display: none; }
  #page-sites .site-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  #page-sites .site-actions .btn { padding: 8px 6px; font-size: 11px; justify-content: center; }
  /* アクション行 */
  #page-sites .action-row { flex-direction: column; }
  #page-sites .action-row .btn { width: 100%; justify-content: center; }
}
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { background: var(--surface2); color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 13px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; line-height: 1.45; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.015); }
td input, td select { padding: 5px 7px; font-size: 12px; }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(56,48,42,0.35); z-index: 200; backdrop-filter: blur(4px); animation: fadeIn 0.18s ease; }
.modal-overlay.open { display: flex; align-items: flex-start; justify-content: flex-end; }
.modal { background: var(--surface); border-left: 1px solid var(--border); width: 820px; max-width: 96vw; height: 100vh; overflow-y: auto; padding: 24px; animation: slideIn 0.22s cubic-bezier(.4,0,.2,1); box-shadow: -10px 0 40px rgba(56,48,42,0.18); }

/* Report viewer: center modal and prevent scroll chaining to the background (desktop trackpads). */
#reportModal.modal-overlay.open{
  align-items: center;
  justify-content: center;
  padding: 18px;
}
#reportModal .modal{
  border-left: 1px solid var(--border);
  border-radius: 18px;
  height: auto;
  max-height: min(92vh, 980px);
  width: 860px;
  max-width: min(96vw, 980px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 18px 70px rgba(0,0,0,0.28);
  animation: none;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; position: sticky; top: 0; background: var(--surface); padding: 4px 0 12px; border-bottom: 1px solid var(--border); z-index: 1; }
.modal-title { font-size: 16px; font-weight: 700; }

/* 現場編集・内訳「在庫から」ピッカー（スタイル未設定だとモーダル背面に隠れてタップ不能になる） */
.bd-inv-picker-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  /* 汎用モーダル(open時モバイル8040)より必ず手前に（同値だと現場編集モーダル側がタップを奪う端末がある） */
  z-index: 8060;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  pointer-events: auto;
}
.bd-inv-picker-overlay[hidden] {
  display: none !important;
}
.bd-inv-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(56, 48, 42, 0.42);
  backdrop-filter: blur(4px);
}
.bd-inv-picker-dialog {
  position: relative;
  width: min(540px, 100%);
  max-height: min(78vh, 680px);
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 -8px 40px rgba(56, 48, 42, 0.22);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  pointer-events: auto;
}
.bd-inv-picker-controls {
  flex-shrink: 0;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-light);
}
.bd-inv-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.bd-inv-picker-title {
  font-weight: 800;
  font-size: 15px;
}
.bd-inv-picker-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 16px;
  margin-bottom: 8px;
}
.bd-inv-picker-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bd-inv-picker-tab {
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font: inherit;
}
.bd-inv-picker-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.bd-inv-picker-list {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px 14px;
}
.bd-inv-picker-item {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--surface2);
  cursor: pointer;
  font: inherit;
}
.bd-inv-picker-item-cat {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.bd-inv-picker-item-title {
  font-size: 13px;
  font-weight: 750;
}
.bd-inv-picker-item-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.bd-inv-picker-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
@media (min-width: 720px) {
  .bd-inv-picker-overlay:not([hidden]) {
    align-items: center;
  }
  .bd-inv-picker-dialog {
    border-radius: 18px;
    max-height: min(82vh, 720px);
    box-shadow: 0 16px 48px rgba(56, 48, 42, 0.18);
  }
}

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--surface2); border: 1px solid var(--accent); color: var(--text); padding: 12px 22px; border-radius: 10px; font-size: 12px; z-index: 9999; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; white-space: nowrap; max-width: 90vw; box-shadow: 0 12px 32px rgba(56,48,42,0.18), 0 0 0 1px rgba(90,138,50,0.20); font-weight: 500; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-2px); }

.removal-yes { color: var(--warning); font-weight: 600; }
.removal-no { color: var(--text-muted); }

.config-warning { background: rgba(201,109,44,0.12); border: 1px solid var(--warning); color: var(--warning); padding: 14px 20px; margin: 20px; border-radius: 10px; font-size: 13px; line-height: 1.6; }

/* Hamburger（デスクトップでも表示し、サイドバー折りたたみ用。狭い画面は後続 MQ で上書き） */
.hamburger { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; border-radius: 6px; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; flex-shrink: 0; margin-right: 6px; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(56,48,42,0.30); z-index: 99; }
.sidebar-backdrop.show { display: block; }

/* ワイド画面: ☰ で左サイドバーを畳んでメインを広げる（幅 0・アクセシビリティは app.js でトグル） */
@media (min-width: 769px) {
  body.nav-sidebar-collapsed .app .sidebar {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    border-right-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Report viewer styles */
.viewer-section { margin-bottom: 20px; }
.viewer-section h3 { font-size: 13px; color: var(--accent); font-weight: 700; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
.viewer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.viewer-row { font-size: 12px; padding: 6px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; }
.viewer-row .label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.viewer-row .val { font-size: 13px; margin-top: 2px; }


/* Bulletin board */
.board-layout { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
.board-side { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.board-site-list { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow: auto; }
.board-site-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); color: var(--text-muted); cursor: pointer; font-size: 12px; }
.board-site-item:hover { border-color: var(--accent); color: var(--text); }
.board-site-item.active { border-color: var(--accent); color: var(--accent); background: rgba(90,138,50,0.10); }
.board-main { min-width: 0; }
.board-post-form { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.board-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.board-preview img { width: 86px; height: 86px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.board-post { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.board-post-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.board-post-title { font-size: 12px; font-weight: 700; color: var(--accent); }
.board-post-meta { font-size: 10px; color: var(--text-muted); font-family: var(--mono); white-space: nowrap; }
.board-post-text { font-size: 13px; line-height: 1.7; white-space: pre-wrap; margin-bottom: 10px; }
.board-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.board-images img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; }
.board-empty { color: var(--text-muted); text-align: center; padding: 38px 12px; font-size: 13px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface); }
@media (max-width: 768px) { .board-layout { grid-template-columns: 1fr; } .board-site-list { max-height: 220px; } }

@media (max-width: 768px) {
  /* 下ナビ(.mobile-bottom-nav z-index:8020)より手前にドロワーを出す（アカウント領域が隠れないように） */
  .sidebar-backdrop.show {
    z-index: 8025;
  }
  .sidebar {
    display: flex !important;
    position: fixed;
    left: -240px;
    top: 0;
    height: 100vh;
    transition: left 0.25s ease;
    z-index: 8030;
    box-shadow: 2px 0 24px rgba(56,48,42, 0.15);
  }
  .sidebar.open { left: 0; }
  /* アカウント折りたたみは「その他」メニューへ集約（ハンバーガーメニューは現場在庫・バージョンのみ） */
  #sidebarAccountDetails {
    display: none !important;
  }
  .hamburger { display: inline-flex !important; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .topbar { padding: calc(12px + var(--safe-top)) 14px 12px; }
  .topbar-title { font-size: 14px; }
  /* #headerDate 以外の .date-badge のみモバイルで隠す */
  .date-badge:not(#headerDate) { display: none; }
  .page { padding: 14px; }
  .viewer-grid { grid-template-columns: 1fr; }
}

/* iOS は URLバー/ステータスバーの表示状態で safe-area が 0 になることがあるため、
   iOS のときだけ「上に1段ぶんの余白」を設計として追加する（他端末では余らせない） */
@media (max-width: 768px) {
  /* iOSブラウザはURLバー等で余白があるため、追加1段は「アプリ内（WKWebView/PWA）」に限定 */
body.ios-app-shell .topbar { padding-top: calc(12px + var(--safe-top) + 10px) !important; }
}

@media print {
  body { background: white; color: black; }
  .sidebar, .topbar, .action-row, .modal-overlay, .hamburger, .nav, #toast { display: none !important; }
  .page { display: block !important; padding: 0; }
  .app { display: block; }
  .card { border: 1px solid #ccc; box-shadow: none; background: white; color: black; page-break-inside: avoid; }
  .card-title { color: #333; }
  input, select, textarea { background: white; color: black; border: 1px solid #999; }
  .badge { border: 1px solid #999; color: #333; background: white !important; }
}

/* ═══════════════════════════════════════════════════════════
   配置管理（MacBook Pro 等の大画面）余白圧縮パッチ
   - schedule は「一覧テーブル」が主役なので横幅を広く使う
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
  html.page-schedule-active .page {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html.page-schedule-active #page-schedule {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  html.page-schedule-active #page-schedule .card {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Print mode for single report */
.print-only { display: none; }
@media print {
  .print-only { display: block; padding: 30px; background: white; color: black; }
  .print-only h1 { font-size: 20px; margin-bottom: 16px; border-bottom: 2px solid #333; padding-bottom: 8px; }
  .print-only h2 { font-size: 14px; margin: 16px 0 8px; color: #333; }
  .print-only table { border: 1px solid #999; }
  .print-only th, .print-only td { border: 1px solid #999; padding: 6px 10px; color: black; }
  .print-only .info-row { display: flex; gap: 20px; margin-bottom: 4px; font-size: 12px; }
  .print-only .info-row strong { display: inline-block; min-width: 100px; }
  .no-print { display: none !important; }
}


/* Photo ledger */
.photo-filter-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.photo-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.photo-card img { width: 100%; height: 160px; object-fit: cover; display:block; cursor: zoom-in; border-bottom: 1px solid var(--border); }
.photo-card-body { padding: 9px 10px; }
.photo-card-title { font-size: 11px; color: var(--accent); font-weight: 700; margin-bottom: 3px; }
.photo-card-meta { font-size: 10px; color: var(--text-muted); font-family: var(--mono); margin-bottom: 6px; }
.photo-card-text { font-size: 11px; color: var(--text); line-height: 1.5; max-height: 48px; overflow: hidden; }
@media (max-width: 768px) { .photo-filter-row { grid-template-columns: 1fr; } .photo-card img { height: 140px; } }
/* PDF attachments */
.board-files { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.file-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface2); color:var(--text); font-size:12px; text-decoration:none; cursor:pointer; }
.file-chip:hover { border-color:var(--accent); color:var(--accent); }
.file-chip .file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.file-chip .file-size { color:var(--text-muted); font-family:var(--mono); font-size:10px; }
.photo-card.pdf-card { padding:12px; min-height:160px; display:flex; flex-direction:column; justify-content:space-between; }
.pdf-icon-card { height:86px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--border); border-radius:10px; background:var(--surface3); font-size:34px; margin-bottom:10px; cursor:pointer; text-decoration:none; }


/* Image viewer */
.image-viewer-overlay { display:none; position:fixed; inset:0; background:rgba(56,48,42,0.85); z-index:120000; align-items:center; justify-content:center; padding:18px; }
.image-viewer-overlay.open { display:flex; }
.image-viewer-box { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.image-viewer-box img {
  /* 小さいサムネでも画面いっぱいに拡大して見せる */
  width: min(96vw, 1200px);
  height: min(88vh, 900px);
  max-width: 96vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #000;
}
.image-viewer-close { position:fixed; top:14px; right:14px; z-index:120001; }
.image-viewer-caption { position:fixed; left:16px; bottom:14px; right:16px; text-align:center; color:var(--text-muted); font-size:12px; }

/* === Schedule Visualizer === */
.view-tabs { display:flex; gap:4px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:3px; }
.view-tab { padding:6px 12px; border:none; background:transparent; color:var(--text-muted); font-size:12px; font-weight:500; cursor:pointer; border-radius:7px; transition:all 0.18s; font-family:'Noto Sans JP', sans-serif; }
.view-tab:hover { color:var(--text); }
.view-tab.active { background:var(--surface); color:var(--accent); font-weight:700; box-shadow:0 1px 3px rgba(56,48,42,0.08); }

/* Calendar (month) */
.cal-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; align-items:stretch; }
.cal-head { font-size:11px; font-weight:700; color:var(--text-muted); text-align:center; padding:6px 0; }
.cal-head.sun { color:var(--danger); }
.cal-head.sat { color:var(--accent3); }
.cal-cell { background:var(--surface); border:1px solid var(--border); border-radius:8px; min-height:132px; padding:8px; cursor:pointer; transition:all 0.18s; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; }
.cal-cell:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.cal-cell.other-month { opacity:0.35; background:var(--surface2); }
.cal-cell.today { border-color:var(--accent); border-width:2px; background:linear-gradient(135deg, rgba(90,138,50,0.06), transparent); }
.cal-cell.today .cal-date { color:var(--accent); font-weight:900; }
.cal-cell.selected { box-shadow:0 0 0 2px var(--accent); }
.cal-date { font-size:12px; font-weight:800; color:var(--text); margin:0 0 7px 0; font-family:var(--mono); line-height:1; align-self:flex-start; }
.cal-date.sun { color:var(--danger); }
.cal-date.sat { color:var(--accent3); }
.cal-pills { display:flex; flex-direction:column; gap:2px; align-items:stretch; justify-content:flex-start; }
.cal-pill { font-size:10px; padding:2px 5px; border-radius:4px; line-height:1.3; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; box-shadow:0 1px 2px rgba(56,48,42,0.10); }
.cal-pill-more { font-size:9px; color:var(--text-muted); padding:1px 4px; }

/* Week */
.week-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; }
/* 配置ビジュアライザ：単日表示（1列で週セルと同系統の見た目） */
.day-single-wrap{ max-width: 520px; margin: 0 auto; width: 100%; }
.day-single-wrap .week-cell{ min-height: 220px; cursor: pointer; }
.day-single-wrap .week-cell-head .day-num { font-size: 18px; }

/* Instagram 等の in-app browser で右側が切れる対策（配置一覧/編集） */
#page-schedule {
  max-width: 100%;
  overflow-x: hidden;
}
#page-schedule .card,
#page-schedule .table-wrap,
#page-schedule table {
  max-width: 100%;
}
#page-schedule .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  #page-schedule #schListPanel .table-wrap {
    overflow-x: hidden;
  }
}
#page-schedule #schListPanel table {
  width: 100%;
  table-layout: fixed;
}
#page-schedule #schListPanel td,
#page-schedule #schListPanel th {
  min-width: 0;
}
@supports (padding: max(0px)) {
  #page-schedule {
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
  }
}
.week-cell { background:var(--surface); border:1px solid var(--border); border-radius:10px; min-height:240px; padding:10px; cursor:pointer; transition:all 0.18s; }
.week-cell:hover { border-color:var(--accent); }
.week-cell.today { border-color:var(--accent); border-width:2px; background:linear-gradient(180deg, rgba(90,138,50,0.05), transparent); }
.week-cell.selected { box-shadow:0 0 0 2px var(--accent); }
.week-cell-head { font-size:11px; font-weight:700; color:var(--text-muted); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; }
.week-cell-head .day-num { font-family:var(--mono); color:var(--text); font-size:14px; font-weight:900; }
.week-cell.today .week-cell-head .day-num { color:var(--accent); }
.week-cell-head.sun .day-num { color:var(--danger); }
.week-cell-head.sat .day-num { color:var(--accent3); }
.week-pills { display:flex; flex-direction:column; gap:6px; }
.week-pill { padding:6px 8px; border-radius:6px; color:#fff; font-size:11px; font-weight:600; box-shadow:0 1px 2px rgba(56,48,42,0.10); }
.week-pill .team-name { font-size:10px; opacity:0.85; }

/* Darksoft: 配置ビジュアライザの白さを抑える（目が痛い対策） */
html[data-theme="darksoft"] #page-schedule .week-cell,
html[data-theme="darksoft"] #page-schedule .cal-cell {
  background: rgba(8, 20, 14, 0.55) !important;
  border-color: rgba(0, 255, 136, 0.18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset !important;
}
html[data-theme="darksoft"] #page-schedule .week-cell-head {
  border-bottom-color: rgba(0, 255, 136, 0.16) !important;
}
html[data-theme="darksoft"] #page-schedule .week-cell-head,
html[data-theme="darksoft"] #page-schedule .cal-date,
html[data-theme="darksoft"] #page-schedule .week-cell-head .day-num {
  color: rgba(232, 255, 244, 0.92) !important;
}
html[data-theme="darksoft"] #page-schedule .week-cell.other-month,
html[data-theme="darksoft"] #page-schedule .cal-cell.other-month {
  opacity: 0.55 !important;
  background: rgba(8, 20, 14, 0.35) !important;
}
@media (hover: hover) {
  html[data-theme="darksoft"] #page-schedule .week-cell:hover,
  html[data-theme="darksoft"] #page-schedule .cal-cell:hover {
    border-color: rgba(0, 255, 136, 0.32) !important;
    background: rgba(8, 20, 14, 0.62) !important;
  }
}

/* Gantt */
.gantt-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.gantt { min-width:760px; }
.gantt-header { display:grid; grid-template-columns:160px 1fr; border-bottom:2px solid var(--border); background:var(--surface2); position:sticky; top:0; z-index:1; }
.gantt-header-left { padding:10px 12px; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; border-right:1px solid var(--border); }
.gantt-header-right { display:grid; }
.gantt-day-head { padding:8px 4px; font-size:10px; font-weight:600; color:var(--text-muted); text-align:center; border-right:1px solid var(--border); font-family:var(--mono); }
.gantt-day-head.sun { color:var(--danger); }
.gantt-day-head.sat { color:var(--accent3); }
.gantt-day-head.today { background:rgba(90,138,50,0.10); color:var(--accent); font-weight:700; }
.gantt-row { display:grid; grid-template-columns:160px 1fr; border-bottom:1px solid var(--border); min-height:42px; }
.gantt-row:last-child { border-bottom:none; }
.gantt-row:hover { background:var(--surface2); }
.gantt-row-label { padding:10px 12px; font-size:13px; font-weight:600; color:var(--text); border-right:1px solid var(--border); display:flex; align-items:center; gap:6px; }
.gantt-row-label .site-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.gantt-row-label .site-meta { font-size:10px; color:var(--text-muted); font-weight:400; }
.gantt-row-track { display:grid; position:relative; }
.gantt-cell { border-right:1px solid var(--border); position:relative; }
.gantt-cell.today { background:rgba(90,138,50,0.04); }
.gantt-bar { position:absolute; top:6px; bottom:6px; left:1px; right:1px; border-radius:4px; padding:3px 6px; font-size:10px; color:#fff; font-weight:600; cursor:pointer; transition:all 0.15s; box-shadow:0 1px 2px rgba(56,48,42,0.10); display:flex; align-items:center; gap:4px; overflow:hidden; }
.gantt-bar:hover { transform:scale(1.04); z-index:2; box-shadow:var(--shadow-md); }
.gantt-bar .gantt-bar-text { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Legend */
.legend-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:var(--surface); border:1px solid var(--border); border-radius:99px; font-size:11px; }
.legend-chip .legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* === Site master breakdown cards === */
.bd-grid { display: grid; gap: 10px; }
.bd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; transition: all 0.18s; position: relative; }
.bd-card:hover { border-color: var(--text-muted); }
.bd-card-row0 { margin-bottom: 8px; }
.bd-card-row1 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: end; }
.bd-card-row2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.bd-card-row3 { display: grid; grid-template-columns: 1fr; gap: 6px; }
.bd-card .field { margin: 0; }
.bd-card .fl { font-size: 9px; color: var(--text-muted); margin-bottom: 2px; font-weight: 600; letter-spacing: 0.05em; display: block; text-transform: uppercase; }
.bd-card input, .bd-card select { padding: 6px 8px; font-size: 12px; }
.bd-card .bd-seal-field-site select.bd-seal,
.bd-card select.bd-stock-link-mode { width: 100%; min-width: 0; box-sizing: border-box; }
.bd-card .bd-loc { font-weight: 600; }
.bd-card .bd-num { font-family: var(--mono); text-align: right; }
.bd-card .bd-delete { position: absolute; top: 8px; right: 8px; padding: 3px 7px; font-size: 11px; }
.bd-card .removal-toggles { display: flex; gap: 4px; align-items: center; }
.bd-card .removal-toggles label { padding: 4px 8px; font-size: 11px; cursor: pointer; border-radius: 5px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; transition: all 0.15s; }
.bd-card .removal-toggles label.checked { background: var(--surface); border-color: var(--accent); color: var(--text); font-weight: 600; }
.bd-card .removal-toggles label.on.checked { border-color: var(--warning); color: var(--warning); }
/* display:none だと環境によってラジオ＋ラベルのクリックが不安定になるため visually-hidden */
.bd-card .removal-toggles input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .bd-card-row1 { grid-template-columns: 1fr; }
  .bd-card-row2 { grid-template-columns: 1fr 1fr; }
}

/* === Daily report breakdown cards (compact) === */
.rd-grid { display: grid; gap: 6px; }
.rd-card { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto auto; gap: 4px 8px; align-items: start; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; transition: all 0.18s; }
.rd-card.done { opacity: 0.42; background: var(--surface2); }
.rd-card:hover { border-color: var(--text-muted); }
.rd-card-info { min-width: 0; grid-column: 1 / 2; grid-row: 1; align-self: center; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.rd-input-group.remove { grid-column: 2; grid-row: 1; align-self: center; }
.rd-input-group.fill { grid-column: 3; grid-row: 1; align-self: center; }
.rd-quick-actions { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0; padding: 0; }
.rd-quick-actions .rd-quick { font-size: 10px; padding: 3px 7px; line-height: 1.2; }
.rd-loc { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.25; word-break: break-word; }
.rd-meta { font-size: 10px; color: var(--text-muted); display: flex; gap: 5px; flex-wrap: wrap; align-items: center; line-height: 1.4; }
.rd-chip { display: inline-flex; align-items: center; padding: 0 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 99px; font-size: 9px; font-family: var(--mono); white-space: nowrap; height: 16px; }
.rd-chip.plan { color: var(--text-muted); }
.rd-chip.acc { color: var(--accent); border-color: rgba(90,138,50,0.30); }
.rd-pct-inline { font-family: var(--mono); font-size: 10px; padding: 0 5px; height: 16px; line-height: 16px; border-radius: 99px; }
.rd-input-group { display: flex; flex-direction: column; gap: 1px; align-items: stretch; }
.rd-input-group label { font-size: 8px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.04em; text-align: center; }
.rd-input-group input { width: 60px; padding: 4px 6px; font-size: 13px; text-align: right; font-family: var(--mono); }
.rd-input-group.remove input { border-color: rgba(201,109,44,0.45); }
.rd-input-group.remove label { color: var(--warning); }
.rd-input-group.fill input { border-color: rgba(90,138,50,0.45); }
.rd-input-group.fill label { color: var(--accent); }
.rd-input-group.disabled { opacity: 0.35; }
.rd-progress-row { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: 8px; padding-top: 4px; margin-top: 2px; border-top: 1px dashed var(--border); }
.rd-progress-row .progress-bar { flex: 1; height: 4px; }
.rd-done-btn { font-size: 10px; padding: 3px 8px; cursor: pointer; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; transition: all 0.15s; }
.rd-done-btn input { display: none; }
.rd-done-btn.checked { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.report-labor-out {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
  padding: 6px 0 2px;
}

@media (max-width: 480px) {
  .rd-card { padding: 7px 9px; gap: 3px 6px; }
  .rd-loc { font-size: 12px; }
  .rd-input-group input { width: 54px; padding: 4px 5px; font-size: 12px; }
}

/* Worker / Team management */
.worker-chip { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; font-size:13px; transition:all 0.15s; }
.worker-chip:hover { border-color:var(--accent); background:var(--surface); }
.worker-chip .worker-name { font-weight:600; color:var(--text); }
.worker-chip .worker-role { font-size:10px; color:var(--text-muted); margin-left:6px; }
.worker-chip .chip-actions { display:flex; gap:4px; }
.team-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:12px; transition:all 0.15s; }
.team-card:hover { border-color:var(--accent); }
.team-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.team-card-name { font-weight:700; font-size:14px; color:var(--accent); display:flex; align-items:center; gap:8px; }
.team-card-name .team-color-dot { width:14px; height:14px; border-radius:50%; }
.team-card-count { font-family:var(--mono); font-size:11px; color:var(--text-muted); }
.team-members { display:flex; flex-wrap:wrap; gap:5px; }
.team-member-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; background:var(--surface); border:1px solid var(--border); border-radius:99px; font-size:11px; }
.team-member-chip .remove-x { cursor:pointer; color:var(--text-muted); margin-left:2px; font-weight:700; }
.team-member-chip .remove-x:hover { color:var(--danger); }
.team-add-member-row { display:flex; gap:6px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); }
.member-empty { font-size:11px; color:var(--text-muted); padding:8px 0; text-align:center; font-style:italic; }

/* Compact schedule card - site name + count only */
.cal-cell { min-height:100px !important; }
.cal-pill { 
  font-size:10px !important; 
  padding:3px 6px !important; 
  line-height:1.2 !important; 
  white-space:nowrap !important;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:4px;
  overflow:hidden;
}
.cal-pill .cal-pill-site { 
  font-weight:600; 
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
}
.cal-pill .cal-pill-info { 
  display:flex; 
  align-items:center; 
  gap:2px;
  font-size:10px;
  white-space:nowrap;
  flex-shrink:0;
}
.cal-pill .cal-pill-icon { 
  font-size:14px; 
  line-height:1;
  flex-shrink:0;
}
.cal-pill .cal-pill-count { 
  font-weight:600;
  font-size:10px;
  white-space:nowrap;
}

.gantt-row { min-height:56px !important; }
.gantt-bar { padding:4px 8px !important; }
.gantt-bar .gantt-bar-text { white-space:normal !important; line-height:1.3; font-size:10px; }
.gantt-bar .gantt-bar-team { font-weight:700; font-size:11px; }
.gantt-bar .gantt-bar-members { font-size:9px; opacity:0.9; line-height:1.3; margin-top:1px; }

@media (max-width: 768px) {
  .cal-cell { min-height:80px !important; padding:4px; }
  .cal-pill { font-size:9px !important; padding:2px 4px !important; gap:3px; }
  .cal-pill .cal-pill-site { font-size:9px; }
  .cal-pill .cal-pill-icon { font-size:12px; }
  .cal-pill .cal-pill-count { font-size:9px; }
  .week-grid { grid-template-columns:1fr; }
  .week-cell { min-height:auto; }
  .view-tab { padding:5px 8px; font-size:11px; }
  .grid[style*="1fr 1.2fr"] { grid-template-columns: 1fr !important; }
}


/* ════════════════════════════════════════════════════════════
   統合デザイン強化 — Warm Craft × Refined Mint System
   ════════════════════════════════════════════════════════════ */

/* ── Sidebar: 脳科学的に疲れにくい配色 ── */
.sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none !important;
  }
  .logo-wrap {
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border) !important;
}
.logo-title { color: var(--accent) !important; font-weight: 800 !important; }
.logo-sub { color: var(--text-muted) !important; }
.nav-item {
  border-radius: var(--radius-md) !important;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast) !important;
}
.nav-item:hover {
  background: var(--accent-subtle) !important;
  color: var(--accent) !important;
  transform: translateX(2px) !important;
}
.nav-item.active {
  background: rgba(90,138,50,0.12) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(90,138,50,0.18) !important;
}
.nav-item.active::before {
  background: var(--accent) !important;
  border-radius: 0 3px 3px 0 !important;
}
.user-email { color: var(--text) !important; }
.sync-status { color: var(--accent) !important; }

/* ── Topbar: glassmorphism (ZIP感) ── */
.topbar {
  background: rgba(250,247,242,0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 0 rgba(56,48,42,0.04) !important;
}
.topbar-title { color: var(--text) !important; font-weight: 700 !important; }
.date-badge {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--mono) !important;
}

/* ── Cards: ZIP の洗練さ ＋ HTML の質感 ── */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
}
.card:hover {
  box-shadow: var(--shadow-md) !important;
}
.card-title {
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
}

/* ── Stat cards: ZIP のアクセント感 ── */
.stat-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
  overflow: hidden;
  position: relative;
}
.stat-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}
.stat-num {
  font-family: var(--mono) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}
.stat-label {
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ── Buttons: ZIP のトランジション ＋ HTML の色 ── */
.btn {
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 1px 3px var(--accent-glow) !important;
}
.btn-primary:hover {
  background: var(--accent-light) !important;
  box-shadow: 0 3px 10px var(--accent-glow) !important;
  transform: translateY(-1px) !important;
}
.btn-primary:active { transform: translateY(0) scale(0.98) !important; }
.btn-secondary {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.btn-secondary:hover {
  background: var(--surface3) !important;
  border-color: var(--text-muted) !important;
}
.btn-danger {
  background: var(--danger) !important;
  color: #fff !important;
  border: none !important;
}
.btn-sm { border-radius: var(--radius-sm) !important; }

/* ── Forms: ZIP の精度 ── */
input, select, textarea {
  border-radius: var(--radius-md) !important;
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  outline: none !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
}

/* ── Badges: ZIP のシステム ── */
.badge {
  border-radius: var(--radius-full) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.02em !important;
}
.badge-success { background: var(--accent-subtle) !important; color: var(--accent) !important; border: 1px solid rgba(90,138,50,0.2) !important; }
.badge-warning { background: rgba(192,112,32,0.10) !important; color: var(--warning) !important; border: 1px solid rgba(192,112,32,0.2) !important; }
.badge-danger  { background: rgba(176,64,48,0.10) !important; color: var(--danger) !important; border: 1px solid rgba(176,64,48,0.2) !important; }
.badge-info    { background: var(--accent3-subtle) !important; color: var(--accent3) !important; border: 1px solid rgba(61,127,160,0.2) !important; }

/* ── Login Screen: テーマ変数ベース（固定色は theme-bootstrap 末尾ブロックへ） ── */
html:not([data-theme="studio"]) .login-card {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(221,212,190,0.7) !important;
  box-shadow: var(--shadow-xl) !important;
  border-radius: var(--radius-xl) !important;
}
.login-title { color: var(--accent) !important; font-weight: 900 !important; }

/* ── Modal/Drawer: ZIP のスムーズさ ── */
.modal {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  box-shadow: 0 -8px 40px rgba(56,48,42,0.16) !important;
  border-top: 1px solid var(--border-light) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border-light) !important;
}
.modal-title { font-weight: 800 !important; color: var(--text) !important; }

/* ── Progress bars: track / fill はバー側で調整 ── */
.progress-bar {
  border-radius: var(--radius-full) !important;
  background: var(--surface3) !important;
  overflow: hidden !important;
  transition: none !important;
}
.progress-track {
  border-radius: var(--radius-full) !important;
  background: var(--surface3) !important;
  overflow: hidden !important;
}

/* ── Mobile bottom nav: HTML のシステム強化 ── */
.mobile-bottom-nav {
  background: rgba(250,247,242,0.94) !important;
  border-top: 1px solid var(--border-light) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.mob-nav-item.active .mob-nav-label { color: var(--accent) !important; }
.mob-nav-item.active .mob-nav-dot { background: var(--accent) !important; }
.mob-nav-item:hover { background: var(--accent-subtle) !important; }

/* ── Page header ── */
.page-header { border-bottom: 1px solid var(--border-light) !important; }
.global-summary-title {
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
}

/* ── Site cards / ring chart ── */
.site-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-light) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
}
.site-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* ── Toast ── */
.toast {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  font-weight: 600 !important;
  backdrop-filter: blur(12px) !important;
}

/* ── Selection color ── */
::selection {
  background: rgba(90,138,50,0.22);
  color: var(--text);
}

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ── Worker page upgrade (from worker-page-upgrade-css) ── */
.sidebar { background: rgba(250,247,242,0.98) !important; border-right: 1px solid var(--border) !important; }
.worker-upgrade-stat { border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-md) !important; }
.worker-upgrade-stat .num { color: var(--accent3) !important; }
.worker-card { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; }
.worker-card:hover { box-shadow: var(--shadow-md) !important; }
.worker-status-pill { border-radius: var(--radius-full) !important; }
.worker-status-pill.off { border-color: rgba(176,64,48,0.28) !important; background: rgba(176,64,48,0.09) !important; color: var(--danger) !important; }
.team-upgrade-card { border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-md) !important; }

/* ── Measure page ── */
.measure-big-btn {
  border-radius: var(--radius-xl) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.measure-big-btn.minus { background: var(--accent2) !important; }
.measure-big-btn.plus  { background: var(--accent) !important; }
.measure-big-btn:active { transform: scale(0.96) !important; }
.measure-number { border-radius: var(--radius-lg) !important; }
.measure-row {
  border-radius: var(--radius-md) !important;
  transition: background var(--transition-fast), border-color var(--transition-fast) !important;
}
.measure-row.active { border-color: var(--accent) !important; background: var(--accent-subtle) !important; }

/* ─── Smooth page transitions ─── */
.page { transition: opacity var(--transition-base); }
.page:not(.active) { pointer-events: none; }


/* ===== split from app.html ===== */


.measure-ledger-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.measure-ledger-list{display:flex;flex-direction:column;gap:8px}
.measure-ledger-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.measure-ledger-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.35}
.measure-ledger-meta{font-size:10px;color:var(--text-muted);font-family:var(--mono);margin-top:3px}
.measure-ledger-total{font-family:var(--mono);font-size:18px;font-weight:900;color:var(--accent);text-align:right;white-space:nowrap}
.measure-ledger-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:6px}
.measure-ledger-empty{font-size:12px;color:var(--text-muted);padding:14px;border:1px dashed var(--border);border-radius:10px;background:var(--surface)}
@media(max-width:480px){.measure-ledger-item{grid-template-columns:1fr}.measure-ledger-total{text-align:left}.measure-ledger-actions{justify-content:flex-start}.measure-ledger-head{align-items:stretch}.measure-ledger-head .btn{width:100%;justify-content:center}}


/* ===== split from app.html ===== */


@media (max-width: 768px){
  #page-materialcalc .grid,
  #page-materialcalc .grid-3{
    grid-template-columns:1fr !important;
  }
  #mc_result{
    font-size:14px !important;
  }
}


/* ===== split from app.html ===== */


.dash-view-toggle { display:inline-flex; gap:4px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:3px; margin-bottom:14px; }
.dash-view-btn { padding:6px 14px; border:none; background:transparent; color:var(--text-muted); font-size:12px; font-weight:500; cursor:pointer; border-radius:7px; transition:all 0.18s; font-family:'Noto Sans JP', sans-serif; }
.dash-view-btn:hover { color:var(--text); }
.dash-view-btn.active { background:var(--surface); color:var(--accent); font-weight:700; box-shadow:0 1px 3px rgba(56,48,42,0.08); }

.ring-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
.ring-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 12px 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.ring-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(56,48,42,0.10);
  border-color: var(--accent);
}
.ring-tile.completed { background: var(--surface); /* グラデーション禁止 */ }
.ring-tile.paused { opacity: 0.6; }
.ring-svg-wrap { width: 100%; aspect-ratio: 1; max-width: 130px; margin: 0 auto 8px; position: relative; }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; opacity: 0.12; }
.ring-fg {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s cubic-bezier(.4,0,.2,1);
}
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ring-pct { font-size: 22px; font-weight: 800; color: var(--text); font-family: var(--mono); line-height: 1; }
.ring-pct-label { font-size: 9px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.05em; }
.ring-tile-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; justify-content: center; padding: 0 2px; }
.ring-tile-status { display: inline-block; font-size: 9px; padding: 2px 8px; border-radius: 99px; font-weight: 600; letter-spacing: 0.02em; }
.ring-legend {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.ring-legend-dot {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--text-muted);
}
.ring-legend-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}

/* Detail modal */
.ring-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(56,48,42,0.45);
  backdrop-filter: blur(6px);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.18s ease;
}
.ring-detail-overlay.open { display: flex; }
.ring-detail-card {
  background: var(--surface);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(56,48,42,0.25);
  animation: ringPop 0.25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ringPop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ring-detail-header { padding: 22px 22px 12px; border-bottom: 1px solid var(--border); }
.ring-detail-title { margin-bottom: 6px; }
.ring-detail-status { margin-bottom: 8px; }
.ring-detail-expand { margin-top: 4px; }
.ring-meta-line { font-size: 11px; color: var(--text-muted); line-height: 1.45; }
.ring-detail-sub { font-size: 11px; color: var(--text-muted); }
.ring-detail-body { padding: 18px 22px 22px; }
.ring-detail-materials { font-size: 12px; }
.ring-mat-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}
.ring-mat-box-title { font-size: 10px; font-weight: 800; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.04em; }
.ring-mat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 12px; border-bottom: 1px solid var(--border-light); }
.ring-mat-row:last-child { border-bottom: none; }
.ring-mat-name { color: var(--text); font-weight: 600; }
.ring-mat-qty { flex-shrink: 0; }
.ring-pct-hero .ui-num { font-size: 42px; }
.ring-pct-hero .ui-unit { font-size: 22px; }
.ring-detail-close-wrap { margin-top: 10px; }
.ring-big {
  width: 220px;
  max-width: 60vw;
  margin: 0 auto 16px;
  position: relative;
  aspect-ratio: 1;
}
.ring-detail-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.ring-stat {
  text-align: center;
  padding: 10px 8px;
  background: var(--surface2);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.ring-stat-label { font-size: 10px; font-weight: 800; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.ring-stat-value { margin-bottom: 2px; }
.ring-stat-value .ui-num { font-size: 18px; }
.ring-stat-detail { font-size: 9px; color: var(--text-muted); line-height: 1.35; opacity: 0.9; }
.ring-stat-unit { font-size: 9px; color: var(--text-muted); margin-left: 2px; }
.ring-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.ring-detail-actions.ui-tier-actions {
  justify-content: flex-start;
}

@media (max-width: 600px) {
  .ring-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .ring-svg-wrap { max-width: 110px; }
  .ring-pct { font-size: 19px; }
  .ring-tile-name { font-size: 11px; min-height: 2.4em; }
}


/* ===== split from app.html ===== */
/* Rajdhani / Share Tech Mono：CSS 仕様上 @import はファイル先頭のみ有効のため、先頭の Google Fonts URL に統合済み */

/* ── THEME TOGGLE WIDGET ──────────────────────────────────── */
#themeSwitcher {
  position: fixed;
  bottom: 20px;
  right: 16px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
#themeToggleBtn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform 0.2s, box-shadow 0.2s;
  background: var(--accent);
  color: #fff;
}
#themeToggleBtn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.30); }

#themePicker {
  display: none;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  animation: slideUp 0.18s ease;
}
#themePicker.open { display: flex; }
@keyframes slideUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.theme-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.theme-opt:hover { transform: scale(1.03); }
.theme-opt.active { outline: 2px solid #fff; outline-offset: 1px; }

.theme-opt[data-theme="default"]  { background: var(--accent); color: #fff; }
.theme-opt[data-theme="casio"]    { background: #0d1a1d; color: #00ff88; border: 1px solid #00ff88; }

/* ── SMARTWATCH VIEWPORT (≤390px) ─────────────────────────── */
@media (max-width: 390px) {
  body { font-size: calc(11px * var(--font-scale, 1)) !important; }
  .sidebar { display: none !important; }
  .hamburger { display: flex !important; }
  .page { padding: 10px 8px !important; }
  .topbar { padding: calc(8px + var(--safe-top)) 10px 8px !important; }
  .topbar-title { font-size: 12px !important; }
  .stats-row { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .ring-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .ring-svg-wrap { max-width: 90px !important; }
  .ring-pct { font-size: 15px !important; }
  .ring-tile-name { font-size: 10px !important; min-height: 2em !important; }
  .ring-tile { padding: 8px 6px 7px !important; border-radius: 14px !important; }
  .global-summary { padding: 12px !important; }
  .btn { padding: 6px 10px !important; font-size: 11px !important; }
  .card { padding: 10px 12px !important; }
  #themeSwitcher { bottom: 10px; right: 8px; }
  #themeToggleBtn { width: 38px; height: 38px; font-size: 17px; }
  .date-badge:not(#headerDate) { display: none; }
}

/* (disabled) unused theme: apple
/* ═══════��══════════════════════════════════════════════════════
   APPLE WATCH THEME
   Dark OLED, concentric ring glow, SF-style typography
   ══════════════════════════════════════════════════════════════ */
body.theme-apple {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface2: #2c2c2e;
  --surface3: #3a3a3c;
  --border: #38383a;
  --accent: #30d158;        /* Apple green */
  --accent-light: #4de37a;
  --accent2: #ff9f0a;       /* Apple orange */
  --accent3: #0a84ff;       /* Apple blue */
  --text: #ffffff;
  --text-muted: #8e8e93;
  --success: #30d158;
  --warning: #ff9f0a;
  --danger: #ff453a;
  --mono: -apple-system-mono, 'SF Mono', 'Courier New', monospace;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.7);

  background: #000 !important;
  background-image: none !important;
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif !important;
  color: #fff !important;
}

body.theme-apple .login-screen,
body.theme-apple .login-screen::before { background: #000 !important; }
body.theme-apple .login-card {
  background: linear-gradient(180deg, #1c1c1e, #0f0f11) !important;
  border: 1px solid #38383a !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(48,209,88,0.15) !important;
}
body.theme-apple .login-logo-title { color: var(--accent) !important; }

body.theme-apple .sidebar {
  background: #1c1c1e !important;
  border-right: 1px solid #38383a !important;
}
body.theme-apple .logo {
  background: linear-gradient(135deg, rgba(48,209,88,0.08), rgba(10,132,255,0.05)) !important;
}
body.theme-apple .nav-item.active {
  background: rgba(48,209,88,0.12) !important;
  color: #30d158 !important;
}
body.theme-apple .nav-item.active::before { background: #30d158 !important; }
body.theme-apple .nav-item:hover { background: #2c2c2e !important; color: #fff !important; }
body.theme-apple .user-info,
body.theme-apple .sidebar-footer { background: #111 !important; }

body.theme-apple .topbar {
  background: rgba(28,28,30,0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
body.theme-apple .card {
  background: #1c1c1e !important;
  border: 1px solid #38383a !important;
  border-radius: 16px !important;
}
body.theme-apple .global-summary {
  background: linear-gradient(135deg, #1c1c1e, #111) !important;
  border-color: #38383a !important;
}
body.theme-apple .stat-card { background: #1c1c1e !important; border-color: #38383a !important; }
body.theme-apple .stat-card::before { background: #30d158 !important; }
body.theme-apple .stat-card.warn::before { background: #ff9f0a !important; }
body.theme-apple .stat-card.info::before { background: #0a84ff !important; }

/* Apple Watch ring glow */
body.theme-apple .ring-tile {
  background: #1c1c1e !important;
  border-color: #38383a !important;
  border-radius: 22px !important;
}
body.theme-apple .ring-tile:hover {
  border-color: #30d158 !important;
  box-shadow: 0 0 20px rgba(48,209,88,0.15), 0 8px 24px rgba(0,0,0,0.5) !important;
}
body.theme-apple .ring-tile.completed {
  background: linear-gradient(135deg, #1c1c1e, rgba(48,209,88,0.06)) !important;
}
body.theme-apple .ring-pct { color: #fff !important; }
body.theme-apple .ring-detail-card {
  background: #1c1c1e !important;
  border: 1px solid #38383a !important;
}
body.theme-apple .ring-detail-overlay { background: rgba(0,0,0,0.65) !important; }

body.theme-apple .big-bar-fill {
  background: linear-gradient(90deg, #30d158, #4de37a) !important;
  box-shadow: 0 0 8px rgba(48,209,88,0.4) !important;
}
body.theme-apple .big-bar { background: #2c2c2e !important; }

body.theme-apple input,
body.theme-apple select,
body.theme-apple textarea {
  background: #2c2c2e !important;
  border-color: #48484a !important;
  color: #fff !important;
}
body.theme-apple input:focus,
body.theme-apple select:focus,
body.theme-apple textarea:focus {
  border-color: #30d158 !important;
  box-shadow: 0 0 0 3px rgba(48,209,88,0.18) !important;
}

body.theme-apple .btn-primary { background: #30d158 !important; color: #000 !important; font-weight: 700 !important; }
body.theme-apple .btn-primary:hover { background: #3ee06d !important; }
body.theme-apple .btn-secondary {
  background: #2c2c2e !important;
  color: #fff !important;
  border-color: #48484a !important;
}
body.theme-apple .date-badge {
  background: #2c2c2e !important;
  border-color: #48484a !important;
  color: #30d158 !important;
}
body.theme-apple .dash-view-btn.active { color: #30d158 !important; }
body.theme-apple .dash-view-toggle { background: #2c2c2e !important; border-color: #48484a !important; }
body.theme-apple th { background: #2c2c2e !important; }
body.theme-apple td { border-color: #38383a !important; }
body.theme-apple .modal { background: #1c1c1e !important; border-left-color: #38383a !important; }
body.theme-apple .modal-overlay { background: rgba(0,0,0,0.70) !important; }
body.theme-apple .toast { background: #1c1c1e !important; border-color: #30d158 !important; color: #fff !important; }
body.theme-apple .board-site-item { background: #2c2c2e !important; border-color: #48484a !important; }
body.theme-apple .board-post { background: #1c1c1e !important; border-color: #38383a !important; }
body.theme-apple .qty-box,
body.theme-apple .global-stat-row { background: #2c2c2e !important; border-color: #38383a !important; }
body.theme-apple ::-webkit-scrollbar-track { background: #000 !important; }
body.theme-apple ::-webkit-scrollbar-thumb { background: #48484a !important; }

/* Apple topbar glow band */
body.theme-apple .topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(48,209,88,0.3), transparent);
}
*/

/* ══════════════════════════════════════════════════════════════
   CASIO G-SHOCK THEME
   Pitch-black + electric green phosphor, blocky mono font,
   segmented display aesthetic
   ══════════════════════════════════════════════════════════════ */
body.theme-casio {
  --bg: #071912;
  --surface: #12251c;
  --surface2: #182e24;
  --surface3: #1e3a2d;
  --border: #3a7560;
  --accent: #00ff88;
  --accent-light: #33ffaa;
  --accent2: #ffcc00;
  --accent3: #00ccff;
  --text: #e8fdf3;
  --text-muted: #7bc9a0;
  --success: #00ff88;
  --warning: #ffcc00;
  --danger: #ff3355;
  --mono: 'Share Tech Mono', 'Rajdhani', monospace;
  --shadow-sm: 0 1px 4px rgba(0,255,136,0.05);
  --shadow-md: 0 4px 16px rgba(0,255,136,0.08);
  --shadow-lg: 0 8px 32px rgba(0,255,136,0.12);

  background: #071912 !important;
  background-image: none !important;
  font-family: 'Rajdhani', 'Share Tech Mono', sans-serif !important;
  color: #e8fdf3 !important;
  letter-spacing: 0.02em;
}

/* Scanline overlay（薄くして本文の視認性を優先） */
body.theme-casio::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,255,136,0.006) 0px,
    rgba(0,255,136,0.006) 1px,
    transparent 1px,
    transparent 3px
  );
}

body.theme-casio .login-screen {
  background: #071912 !important;
  background-image: radial-gradient(ellipse at center, rgba(0,255,136,0.06), transparent 60%) !important;
}
body.theme-casio .login-screen::before { background-image: none !important; }
body.theme-casio .login-card {
  background: #12251c !important;
  border: 1px solid #00ff88 !important;
  box-shadow: 0 0 30px rgba(0,255,136,0.12), inset 0 0 20px rgba(0,255,136,0.03) !important;
  border-radius: 4px !important;
}
body.theme-casio .login-logo-title {
  color: #00ff88 !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
body.theme-casio .login-logo-sub { color: #7bc9a0 !important; }

body.theme-casio .sidebar {
  background: #071912 !important;
  border-right: 1px solid #00ff88 !important;
  box-shadow: 2px 0 12px rgba(0,255,136,0.06) !important;
}
body.theme-casio .logo {
  background: transparent !important;
  border-bottom: 1px solid #00ff88 !important;
}
body.theme-casio .logo-title {
  color: #00ff88 !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
}
body.theme-casio .nav-section {
  color: #00ff88 !important;
  letter-spacing: 0.15em !important;
  font-family: 'Share Tech Mono', monospace !important;
}
body.theme-casio .nav-item { color: #7bc9a0 !important; border-radius: 2px !important; }
body.theme-casio .nav-item:hover { background: rgba(0,255,136,0.06) !important; color: #e8fdf3 !important; transform: none !important; }
body.theme-casio .nav-item.active {
  background: rgba(0,255,136,0.10) !important;
  color: #00ff88 !important;
  border-left: 3px solid #00ff88;
  border-radius: 0 2px 2px 0 !important;
}
body.theme-casio .nav-item.active::before { display: none !important; }
body.theme-casio .user-info,
body.theme-casio .sidebar-footer {
  background: #071912 !important;
  border-top-color: #3a7560 !important;
}

body.theme-casio .topbar {
  background: #071912 !important;
  border-bottom: 1px solid #00ff88 !important;
  box-shadow: 0 2px 16px rgba(0,255,136,0.10) !important;
}
body.theme-casio .topbar-title {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #00ff88 !important;
}
body.theme-casio .date-badge {
  background: #12251c !important;
  border: 1px solid #00ff88 !important;
  color: #00ff88 !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 0.08em !important;
  border-radius: 2px !important;
}
body.theme-casio .hamburger {
  background: #12251c !important;
  border-color: #00ff88 !important;
  color: #00ff88 !important;
}

body.theme-casio .card {
  background: #12251c !important;
  border: 1px solid #3a7560 !important;
  border-radius: 4px !important;
}
body.theme-casio .card:hover { border-color: #00ff88 !important; box-shadow: 0 0 12px rgba(0,255,136,0.10) !important; }
body.theme-casio .card-title { color: #00ff88 !important; font-family: 'Share Tech Mono', monospace !important; letter-spacing: 0.10em !important; }
body.theme-casio .global-summary { background: #12251c !important; border-color: #3a7560 !important; border-radius: 4px !important; }

body.theme-casio .stat-card {
  background: #12251c !important;
  border: 1px solid #3a7560 !important;
  border-radius: 4px !important;
}
body.theme-casio .stat-card::before { background: #00ff88 !important; }
body.theme-casio .stat-card.warn::before { background: #ffcc00 !important; }
body.theme-casio .stat-card.info::before { background: #00ccff !important; }
body.theme-casio .stat-num {
  color: #00ff88 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 30px !important;
  text-shadow: 0 0 8px rgba(0,255,136,0.5) !important;
}
body.theme-casio .stat-card.warn .stat-num { color: #ffcc00 !important; text-shadow: 0 0 8px rgba(255,204,0,0.5) !important; }
body.theme-casio .stat-card.info .stat-num { color: #00ccff !important; text-shadow: 0 0 8px rgba(0,204,255,0.5) !important; }
body.theme-casio .stat-label { color: #7bc9a0 !important; font-family: 'Share Tech Mono', monospace !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; font-size: 10px !important; }

/* G-SHOCK ring tiles */
body.theme-casio .ring-tile {
  background: #12251c !important;
  border: 1px solid #3a7560 !important;
  border-radius: 6px !important;
  transition: all 0.15s !important;
}
body.theme-casio .ring-tile:hover {
  border-color: #00ff88 !important;
  box-shadow: 0 0 16px rgba(0,255,136,0.15), 0 0 4px rgba(0,255,136,0.25) !important;
  transform: none !important;
}
body.theme-casio .ring-tile-name {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  color: #7bc9a0 !important;
}
body.theme-casio .ring-pct {
  color: #00ff88 !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-shadow: 0 0 10px rgba(0,255,136,0.6) !important;
}
body.theme-casio .ring-pct-label { color: #7bc9a0 !important; font-family: 'Share Tech Mono', monospace !important; }
body.theme-casio .ring-legend-dot { color: #7bc9a0 !important; }
body.theme-casio .ring-detail-card {
  background: #12251c !important;
  border: 1px solid #00ff88 !important;
  box-shadow: 0 0 40px rgba(0,255,136,0.15) !important;
  border-radius: 6px !important;
}
body.theme-casio .ring-detail-overlay { background: rgba(0,0,0,0.80) !important; }
body.theme-casio .ring-detail-title { color: #00ff88 !important; font-family: 'Share Tech Mono', monospace !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; }
body.theme-casio .ring-stat { background: #182e24 !important; border-color: #3a7560 !important; border-radius: 3px !important; }
body.theme-casio .ring-stat-value {
  font-family: 'Share Tech Mono', monospace !important;
  color: #00ff88 !important;
  text-shadow: 0 0 6px rgba(0,255,136,0.4) !important;
}

body.theme-casio .big-progress-num {
  color: #00ff88 !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-shadow: 0 0 12px rgba(0,255,136,0.5) !important;
}
body.theme-casio .big-bar { background: #1e3a2d !important; border-radius: 2px !important; }
body.theme-casio .big-bar-fill {
  background: linear-gradient(90deg, #00ff88, #00cc66) !important;
  box-shadow: 0 0 10px rgba(0,255,136,0.4) !important;
  border-radius: 2px !important;
}
body.theme-casio .big-bar-fill::after { display: none !important; }
body.theme-casio .progress-fill {
  background: linear-gradient(90deg, #00ff88, #00cc66) !important;
  border-radius: 2px !important;
}

body.theme-casio input,
body.theme-casio select,
body.theme-casio textarea {
  background: #182e24 !important;
  border: 1px solid #3a7560 !important;
  color: #e8fdf3 !important;
  font-family: 'Share Tech Mono', monospace !important;
  border-radius: 2px !important;
}
body.theme-casio input:focus,
body.theme-casio select:focus,
body.theme-casio textarea:focus {
  border-color: #00ff88 !important;
  box-shadow: 0 0 0 2px rgba(0,255,136,0.15) !important;
}

body.theme-casio .btn {
  border-radius: 2px !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
body.theme-casio .btn-primary {
  background: transparent !important;
  color: #00ff88 !important;
  border: 1px solid #00ff88 !important;
  box-shadow: 0 0 8px rgba(0,255,136,0.20) !important;
}
body.theme-casio .btn-primary:hover {
  background: rgba(0,255,136,0.10) !important;
  box-shadow: 0 0 16px rgba(0,255,136,0.30) !important;
}
body.theme-casio .btn-secondary {
  background: transparent !important;
  color: #7bc9a0 !important;
  border: 1px solid #3a7560 !important;
}
body.theme-casio .btn-secondary:hover { border-color: #00ff88 !important; color: #00ff88 !important; }

body.theme-casio .dash-view-toggle {
  background: #12251c !important;
  border: 1px solid #3a7560 !important;
  border-radius: 2px !important;
}
body.theme-casio .dash-view-btn.active {
  background: rgba(0,255,136,0.10) !important;
  color: #00ff88 !important;
  border-radius: 2px !important;
  box-shadow: 0 0 8px rgba(0,255,136,0.15) !important;
}
body.theme-casio .dash-view-btn { color: #7bc9a0 !important; font-family: 'Share Tech Mono', monospace !important; }

body.theme-casio th {
  background: #182e24 !important;
  color: #7bc9a0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 0.08em !important;
  border-bottom-color: #00ff88 !important;
}
body.theme-casio td { border-color: #3a7560 !important; color: #e8fdf3 !important; }
body.theme-casio tr:hover td { background: rgba(0,255,136,0.03) !important; }

body.theme-casio .modal {
  background: #12251c !important;
  border-left: 1px solid #00ff88 !important;
}
body.theme-casio .modal-overlay { background: rgba(0,0,0,0.80) !important; }
body.theme-casio .modal-head {
  background: #12251c !important;
  border-bottom-color: #3a7560 !important;
}
body.theme-casio .modal-title { color: #00ff88 !important; font-family: 'Share Tech Mono', monospace !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }

body.theme-casio .toast {
  background: #12251c !important;
  border: 1px solid #00ff88 !important;
  color: #00ff88 !important;
  font-family: 'Share Tech Mono', monospace !important;
  border-radius: 2px !important;
  box-shadow: 0 0 20px rgba(0,255,136,0.20) !important;
}
body.theme-casio .qty-box,
body.theme-casio .global-stat-row { background: #182e24 !important; border-color: #3a7560 !important; border-radius: 2px !important; }
body.theme-casio .global-stat-row .val { color: #00ff88 !important; text-shadow: 0 0 6px rgba(0,255,136,0.4) !important; }
body.theme-casio .badge-green { background: rgba(0,255,136,0.10) !important; color: #00ff88 !important; border-color: rgba(0,255,136,0.30) !important; }
body.theme-casio .site-card { background: #12251c !important; border-color: #3a7560 !important; border-radius: 4px !important; }
body.theme-casio .site-card:hover { border-color: #00ff88 !important; box-shadow: 0 0 12px rgba(0,255,136,0.10) !important; transform: none !important; }
body.theme-casio .card-progress-num { color: #00ff88 !important; text-shadow: 0 0 8px rgba(0,255,136,0.4) !important; }
body.theme-casio .board-site-item { background: #182e24 !important; border-color: #3a7560 !important; color: #7bc9a0 !important; }
body.theme-casio .board-site-item:hover { border-color: #00ff88 !important; color: #e8fdf3 !important; }
body.theme-casio .board-post { background: #12251c !important; border-color: #3a7560 !important; }
body.theme-casio ::-webkit-scrollbar-track { background: #071912 !important; }
body.theme-casio ::-webkit-scrollbar-thumb { background: #3a7560 !important; }
body.theme-casio ::-webkit-scrollbar-thumb:hover { background: #00ff88 !important; }

/* CASIO: segment-display effect on big numbers */
body.theme-casio .big-progress-num,
body.theme-casio .stat-num,
body.theme-casio .ring-pct,
body.theme-casio .card-progress-num {
  font-family: 'Share Tech Mono', monospace !important;
}

/* CASIO corner brackets decoration on cards */
body.theme-casio .card::before,
body.theme-casio .stat-card::before {
  display: none !important;
}
body.theme-casio .card {
  box-shadow: none !important;
  position: relative;
}

/* Sync status */
body.theme-casio .sync-status { color: #00ff88 !important; }
body.theme-casio .sync-status::before { background: #00ff88 !important; box-shadow: 0 0 6px rgba(0,255,136,0.6); }
body.theme-apple .sync-status { color: #30d158 !important; }
body.theme-apple .sync-status::before { background: #30d158 !important; }

/* Nav separator lines */
body.theme-casio .nav-sep { background: #3a7560 !important; }
body.theme-casio .nav-section { font-family: 'Share Tech Mono', monospace !important; color: #00ff88 !important; opacity: 0.6; }
body.theme-casio .logo-sub { color: #7bc9a0 !important; font-family: 'Share Tech Mono', monospace !important; }
body.theme-casio .user-email { color: #e8fdf3 !important; font-family: 'Share Tech Mono', monospace !important; font-size: 10px !important; }
body.theme-casio #userCompany { color: #00ff88 !important; text-shadow: 0 0 6px rgba(0,255,136,0.4); }

/* Pulsing sidebar border for CASIO */
body.theme-casio .sidebar {
  box-shadow: 2px 0 0 rgba(0,255,136,0.15) !important;
}

/* CASIO topbar accent line */
body.theme-casio .topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(0,255,136,0.4);
  box-shadow: 0 0 8px rgba(0,255,136,0.3);
}
body.theme-casio .topbar { position: relative; }

/* (disabled) unused theme: watch
/* ══════════════════════════════════════════════════════════════
   WATCH UI THEME — さっきのデモ画面そのままのUI
   OLED黒 × 丸角カード × グロー × フロストガラス
   ══════════════════════════════════════════════════════════════ */
body.theme-watch {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface2: #2c2c2e;
  --surface3: #3a3a3c;
  --border: rgba(255,255,255,0.10);
  --accent: #30d158;
  --accent-light: #4de37a;
  --accent2: #ff9f0a;
  --accent3: #0a84ff;
  --text: #ffffff;
  --text-muted: #8e8e93;
  --success: #30d158;
  --warning: #ff9f0a;
  --danger: #ff453a;
  --mono: 'SF Mono', ui-monospace, monospace;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.6);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.7);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.8);
  background: #000 !important;
  background-image: none !important;
  font-family: -apple-system, 'Helvetica Neue', sans-serif !important;
  color: #fff !important;
}
body.theme-watch .login-screen {
  background: radial-gradient(ellipse at 30% 20%, rgba(48,209,88,0.08), transparent 55%),
              radial-gradient(ellipse at 75% 80%, rgba(10,132,255,0.06), transparent 55%), #000 !important;
}
body.theme-watch .login-screen::before { display: none; }
body.theme-watch .login-card {
  background: rgba(28,28,30,0.96) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 28px !important;
  box-shadow: 0 0 0 1px rgba(48,209,88,0.12), 0 32px 80px rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(24px) !important;
}
body.theme-watch .login-logo-title { color: #30d158 !important; font-weight: 700 !important; }
body.theme-watch .login-logo-sub { color: #8e8e93 !important; }
body.theme-watch .login-error { background: rgba(255,69,58,0.10) !important; border-color: rgba(255,69,58,0.30) !important; color: #ff453a !important; }
body.theme-watch .login-msg { color: #8e8e93 !important; }
body.theme-watch .sidebar {
  background: rgba(14,14,16,0.97) !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(32px) !important;
}
body.theme-watch .logo { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
body.theme-watch .logo-title { color: #fff !important; font-weight: 700 !important; }
body.theme-watch .logo-sub { color: #8e8e93 !important; }
body.theme-watch .nav-section { color: rgba(255,255,255,0.28) !important; font-size: 9px !important; }
body.theme-watch .nav-item { color: #8e8e93 !important; border-radius: 12px !important; margin: 0 2px !important; }
body.theme-watch .nav-item:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; transform: none !important; }
body.theme-watch .nav-item.active { background: rgba(48,209,88,0.14) !important; color: #30d158 !important; font-weight: 600 !important; }
body.theme-watch .nav-item.active::before { background: #30d158 !important; }
body.theme-watch .nav-sep { background: rgba(255,255,255,0.06) !important; }
body.theme-watch .user-info { background: transparent !important; border-top: 1px solid rgba(255,255,255,0.06) !important; }
body.theme-watch .sidebar-footer { background: transparent !important; border-top: 1px solid rgba(255,255,255,0.06) !important; }
body.theme-watch .sync-status { color: #30d158 !important; }
body.theme-watch .sync-status::before { background: #30d158 !important; box-shadow: 0 0 6px #30d158; }
body.theme-watch .user-email { color: rgba(255,255,255,0.65) !important; }
body.theme-watch #userCompany { color: #30d158 !important; }
body.theme-watch .topbar {
  background: rgba(0,0,0,0.78) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-bottom: none !important;
  box-shadow: 0 0.5px 0 rgba(255,255,255,0.08) !important;
}
body.theme-watch .topbar-title { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #fff !important; }
body.theme-watch .date-badge { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.10) !important; color: #30d158 !important; border-radius: 20px !important; }
body.theme-watch .hamburger { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.10) !important; color: #fff !important; border-radius: 12px !important; }
body.theme-watch .card {
  background: rgba(28,28,30,0.90) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
body.theme-watch .card:hover { border-color: rgba(48,209,88,0.22) !important; box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(48,209,88,0.12) !important; }
body.theme-watch .card-title { color: rgba(255,255,255,0.38) !important; font-size: 10px !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; }
body.theme-watch .card-title span { color: #30d158 !important; }
body.theme-watch .global-summary { background: rgba(28,28,30,0.90) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 22px !important; backdrop-filter: blur(16px) !important; }
body.theme-watch .global-summary-title { color: #30d158 !important; }
body.theme-watch .stat-card { background: rgba(28,28,30,0.88) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 18px !important; }
body.theme-watch .stat-card::before { background: #30d158 !important; height: 2px !important; }
body.theme-watch .stat-card.warn::before { background: #ff9f0a !important; }
body.theme-watch .stat-card.info::before { background: #0a84ff !important; }
body.theme-watch .stat-num { color: #fff !important; font-weight: 700 !important; letter-spacing: -1px !important; }
body.theme-watch .stat-card.warn .stat-num { color: #ff9f0a !important; }
body.theme-watch .stat-card.info .stat-num { color: #0a84ff !important; }
body.theme-watch .stat-label { color: #8e8e93 !important; }
body.theme-watch .ring-tile { background: rgba(28,28,30,0.88) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 22px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; }
body.theme-watch .ring-tile:hover { transform: scale(1.04) !important; border-color: rgba(48,209,88,0.30) !important; box-shadow: 0 0 0 1px rgba(48,209,88,0.15), 0 12px 32px rgba(0,0,0,0.65), 0 0 20px rgba(48,209,88,0.10) !important; }
body.theme-watch .ring-tile.completed { background: linear-gradient(135deg, rgba(28,28,30,0.9), rgba(48,209,88,0.06)) !important; }
body.theme-watch .ring-tile-name { color: rgba(255,255,255,0.85) !important; font-weight: 600 !important; }
body.theme-watch .ring-pct { color: #fff !important; font-weight: 700 !important; letter-spacing: -1px !important; }
body.theme-watch .ring-pct-label { color: #8e8e93 !important; font-size: 8px !important; }
body.theme-watch .ring-legend-dot { color: #8e8e93 !important; }
body.theme-watch .ring-fg { filter: drop-shadow(0 0 3px currentColor); }
body.theme-watch .ring-detail-overlay { background: rgba(0,0,0,0.72) !important; backdrop-filter: blur(16px) !important; }
body.theme-watch .ring-detail-card { background: rgba(28,28,30,0.97) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 28px !important; box-shadow: 0 32px 80px rgba(0,0,0,0.85) !important; }
body.theme-watch .ring-detail-header { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
body.theme-watch .ring-detail-title { color: #fff !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
body.theme-watch .ring-detail-sub { color: #8e8e93 !important; }
body.theme-watch .ring-stat { background: rgba(44,44,46,0.85) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 14px !important; }
body.theme-watch .ring-stat-label { color: #8e8e93 !important; font-size: 9px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }
body.theme-watch .ring-stat-value { color: #fff !important; font-size: 18px !important; font-weight: 700 !important; }
body.theme-watch .big-bar { background: rgba(255,255,255,0.08) !important; border-radius: 99px !important; height: 10px !important; }
body.theme-watch .big-bar-fill { background: #30d158 !important; border-radius: 99px !important; box-shadow: 0 0 10px rgba(48,209,88,0.45) !important; }
body.theme-watch .big-bar-fill::after { display: none !important; }
body.theme-watch .big-progress-num { color: #fff !important; font-size: 48px !important; font-weight: 300 !important; letter-spacing: -2px !important; }
body.theme-watch .big-progress-pct { color: #8e8e93 !important; }
body.theme-watch .progress-bar { background: rgba(255,255,255,0.08) !important; border-radius: 99px !important; }
body.theme-watch .progress-fill { background: #30d158 !important; box-shadow: 0 0 6px rgba(48,209,88,0.4) !important; border-radius: 99px !important; }
body.theme-watch .btn { border-radius: 14px !important; font-weight: 600 !important; }
body.theme-watch .btn-primary { background: #30d158 !important; color: #000 !important; }
body.theme-watch .btn-primary:hover { background: #3ee06d !important; box-shadow: 0 4px 16px rgba(48,209,88,0.35) !important; }
body.theme-watch .btn-secondary { background: rgba(255,255,255,0.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.10) !important; }
body.theme-watch .btn-secondary:hover { background: rgba(255,255,255,0.14) !important; color: #fff !important; border-color: rgba(255,255,255,0.18) !important; }
body.theme-watch input, body.theme-watch select, body.theme-watch textarea { background: rgba(44,44,46,0.85) !important; border: 1px solid rgba(255,255,255,0.10) !important; color: #fff !important; border-radius: 12px !important; }
body.theme-watch input:focus, body.theme-watch select:focus, body.theme-watch textarea:focus { border-color: #30d158 !important; box-shadow: 0 0 0 3px rgba(48,209,88,0.15) !important; }
body.theme-watch label.fl { color: #8e8e93 !important; }
body.theme-watch select option { background: #1c1c1e !important; }
body.theme-watch th { background: rgba(44,44,46,0.70) !important; color: #8e8e93 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
body.theme-watch td { border-bottom: 1px solid rgba(255,255,255,0.05) !important; color: #fff !important; }
body.theme-watch tr:hover td { background: rgba(255,255,255,0.03) !important; }
body.theme-watch .modal-overlay { background: rgba(0,0,0,0.75) !important; backdrop-filter: blur(12px) !important; }
body.theme-watch .modal { background: rgba(14,14,16,0.97) !important; border-left: 1px solid rgba(255,255,255,0.07) !important; box-shadow: -20px 0 60px rgba(0,0,0,0.85) !important; }
body.theme-watch .modal-head { background: rgba(14,14,16,0.97) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
body.theme-watch .modal-title { color: #fff !important; font-weight: 700 !important; font-size: 18px !important; letter-spacing: -0.02em !important; }
body.theme-watch .toast { background: rgba(44,44,46,0.95) !important; border: 1px solid rgba(48,209,88,0.30) !important; color: #fff !important; border-radius: 20px !important; backdrop-filter: blur(20px) !important; }
body.theme-watch .site-card { background: rgba(28,28,30,0.88) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 18px !important; }
body.theme-watch .site-card:hover { border-color: rgba(48,209,88,0.25) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 0 1px rgba(48,209,88,0.12) !important; }
body.theme-watch .qty-box { background: rgba(44,44,46,0.75) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 10px !important; }
body.theme-watch .global-stat-row { background: rgba(44,44,46,0.70) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 10px !important; }
body.theme-watch .global-stat-row .val { color: #30d158 !important; }
body.theme-watch .badge-green { background: rgba(48,209,88,0.14) !important; color: #30d158 !important; border-color: rgba(48,209,88,0.25) !important; }
body.theme-watch .badge-orange { color: #ff9f0a !important; background: rgba(255,159,10,0.12) !important; border-color: rgba(255,159,10,0.25) !important; }
body.theme-watch .badge-red { color: #ff453a !important; background: rgba(255,69,58,0.12) !important; border-color: rgba(255,69,58,0.25) !important; }
body.theme-watch .badge-blue { color: #0a84ff !important; background: rgba(10,132,255,0.12) !important; border-color: rgba(10,132,255,0.25) !important; }
body.theme-watch .dash-view-toggle { background: rgba(44,44,46,0.8) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 14px !important; }
body.theme-watch .dash-view-btn { color: #8e8e93 !important; border-radius: 11px !important; }
body.theme-watch .dash-view-btn.active { background: rgba(255,255,255,0.10) !important; color: #30d158 !important; box-shadow: none !important; }
body.theme-watch .board-side { background: rgba(28,28,30,0.88) !important; border-color: rgba(255,255,255,0.08) !important; }
body.theme-watch .board-site-item { background: rgba(44,44,46,0.70) !important; border-color: rgba(255,255,255,0.07) !important; }
body.theme-watch .board-site-item.active { border-color: rgba(48,209,88,0.35) !important; background: rgba(48,209,88,0.10) !important; }
body.theme-watch .board-post { background: rgba(28,28,30,0.88) !important; border-color: rgba(255,255,255,0.07) !important; }
body.theme-watch .board-post-form { background: rgba(28,28,30,0.88) !important; border-color: rgba(255,255,255,0.07) !important; }
body.theme-watch ::-webkit-scrollbar-track { background: #000 !important; }
body.theme-watch ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; }
body.theme-watch ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22) !important; }
body.theme-watch .radio-btn, body.theme-watch .check-btn { background: rgba(44,44,46,0.8) !important; border-color: rgba(255,255,255,0.10) !important; color: #8e8e93 !important; border-radius: 10px !important; }
body.theme-watch .radio-btn:has(input:checked), body.theme-watch .check-btn:has(input:checked) { border-color: rgba(48,209,88,0.40) !important; background: rgba(48,209,88,0.12) !important; color: #30d158 !important; }
body.theme-watch .sidebar-backdrop { background: rgba(0,0,0,0.65) !important; backdrop-filter: blur(4px) !important; }
body.theme-watch .view-tabs { background: rgba(44,44,46,0.8) !important; border-color: rgba(255,255,255,0.08) !important; border-radius: 14px !important; }
body.theme-watch .view-tab { color: #8e8e93 !important; border-radius: 11px !important; }
body.theme-watch .view-tab.active { background: rgba(255,255,255,0.10) !important; color: #30d158 !important; box-shadow: none !important; }
body.theme-watch .cal-cell { background: rgba(28,28,30,0.85) !important; border-color: rgba(255,255,255,0.06) !important; border-radius: 14px !important; }
body.theme-watch .cal-cell.today { border-color: rgba(48,209,88,0.40) !important; }
body.theme-watch .cal-head { color: #8e8e93 !important; }
body.theme-watch .cal-date { color: rgba(255,255,255,0.8) !important; }
body.theme-watch .worker-chip { background: rgba(44,44,46,0.8) !important; border-color: rgba(255,255,255,0.08) !important; }
body.theme-watch .team-card { background: rgba(44,44,46,0.8) !important; border-color: rgba(255,255,255,0.08) !important; }
body.theme-watch .team-member-chip { background: rgba(28,28,30,0.9) !important; border-color: rgba(255,255,255,0.08) !important; }
*/


/* ===== split from app.html ===== */


/* テーマ切替は現場用では邪魔なので完全非表示 */
#themeSwitcher, #themePicker, #themeToggleBtn { display: none !important; }


/* ===== split from app.html ===== */


.measure-hero{display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:end}.measure-total{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center}.measure-total-label{font-size:10px;color:var(--text-muted);font-weight:700;letter-spacing:.1em}.measure-total span{font-family:var(--mono);font-weight:900;font-size:34px;color:var(--accent);line-height:1}.measure-total small{font-size:13px;color:var(--text-muted);margin-left:3px}.measure-status{font-size:12px;color:var(--text-muted);margin-top:10px;min-height:20px}.measure-qr{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);gap:12px;align-items:center;flex-wrap:wrap}.measure-qr img{width:132px;height:132px;border-radius:8px;background:#fff;padding:6px}.measure-current{background:linear-gradient(135deg,var(--surface),var(--surface2));border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow-md);touch-action:pan-y}.measure-current-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.measure-step{font-family:var(--mono);font-size:11px;color:var(--text-muted);margin-bottom:6px}.measure-loc-input{font-size:18px;font-weight:800;border:none;background:transparent;padding:4px 0;box-shadow:none}.measure-loc-input:focus{box-shadow:none}.measure-value{display:grid;grid-template-columns:92px 1fr 92px;gap:10px;align-items:center;margin-top:14px;user-select:none}.measure-big-btn{height:108px;border-radius:22px;border:1px solid var(--border);font-size:48px;font-weight:900;cursor:pointer;box-shadow:var(--shadow-sm);color:#fff}.measure-big-btn.minus{background:var(--warning)}.measure-big-btn.plus{background:var(--accent)}.measure-big-btn:active{transform:scale(.97)}.measure-number-wrap{text-align:center}.measure-number{font-family:var(--mono);font-size:52px;font-weight:900;text-align:center;padding:8px;border-radius:18px}.measure-unit{font-size:13px;color:var(--text-muted);font-weight:700;margin-top:4px}.measure-small-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.measure-small-row .btn{justify-content:center;padding:16px 8px;font-family:var(--mono);font-weight:900;font-size:15px;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.measure-big-btn{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.measure-list{display:flex;flex-direction:column;gap:8px}.measure-row{display:grid;grid-template-columns:36px 1fr auto auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);cursor:pointer}.measure-row.active{border-color:var(--accent);background:rgba(90,138,50,.10)}.measure-row-no{font-family:var(--mono);font-weight:800;color:var(--text-muted)}.measure-row-name{font-size:13px;font-weight:700}.measure-row-meta{font-size:10px;color:var(--text-muted);margin-top:2px}.measure-row-val{font-family:var(--mono);font-size:18px;font-weight:900;color:var(--accent)}.measure-row-del{border:none;background:transparent;color:var(--danger);font-size:18px;cursor:pointer;padding:6px}
.measure-noren-toggle{width:100%;justify-content:center;margin-top:10px;padding:10px 12px;border-radius:12px;font-weight:800;}
.measure-noren{margin-top:10px;border:1px solid var(--border);border-radius:0 0 18px 18px;background:linear-gradient(180deg,rgba(247,243,236,.78),var(--surface));box-shadow:inset 0 8px 12px rgba(56,48,42,.04);overflow:hidden;max-height:0;opacity:0;transform:translateY(-6px);transition:max-height .22s ease,opacity .18s ease,transform .18s ease,padding .18s ease;padding:0 12px;}
.measure-noren.open{max-height:260px;opacity:1;transform:translateY(0);padding:14px 12px 12px;}
.measure-noren .grid{margin-top:0!important;}
.measure-noren-label{font-size:11px;color:var(--text-muted);font-weight:700;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.measure-separate-note{margin-top:10px;padding:10px 12px;border:1px dashed var(--border);border-radius:10px;background:rgba(61,127,160,.07);color:var(--text-muted);font-size:12px;line-height:1.55;}
.measure-print-only{display:none;}

.measure-jump-row{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px;margin-top:12px;align-items:center}
.measure-jump-row .btn{justify-content:center;font-weight:800;padding:10px 8px}
.measure-index-select{height:42px;font-size:13px;font-weight:700;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text)}
.measure-op-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.measure-op-row .btn{justify-content:center;padding:12px 8px;font-family:var(--mono);font-weight:900;font-size:14px;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.measure-page-bottom-space{height:120px}
@media(max-width:768px){#page-measure{padding-bottom:150px}.measure-current{margin-bottom:28px}.measure-noren.open{max-height:360px}.measure-page-bottom-space{height:170px}.measure-jump-row{grid-template-columns:1fr 1fr 1fr}.measure-index-select{height:46px}.measure-op-row{grid-template-columns:repeat(2,1fr)}}

/* === Sticky measure panel (v13) === */
.measure-bottom-spacer { height: 60vh; max-height: 560px; min-height: 380px; }
.measure-sticky-panel {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 50;
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  border-top: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px rgba(56,48,42,0.12);
  padding: 0 14px calc(env(safe-area-inset-bottom, 0px) + 12px);
  max-height: calc(70vh - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: transform 0.25s ease;
  touch-action: pan-y;
}
.measure-sticky-panel.collapsed {
  transform: translateY(calc(100% - 56px - env(safe-area-inset-bottom, 0px)));
}
.ms-sticky-handle {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 8px;
  background: linear-gradient(180deg, var(--surface) 70%, transparent);
  cursor: pointer;
}
.ms-sticky-handle-bar {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin-bottom: 4px;
}
.ms-sticky-toggle {
  position: absolute;
  right: 12px;
  top: 4px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.measure-sticky-panel.collapsed .ms-sticky-toggle { transform: rotate(180deg); }
.ms-sticky-body { padding: 0 4px 8px; }

/* MainAppでも下にスペース確保 */
.app.measure-active { padding-bottom: 0; }

/* スマホでパネル広めに */
@media (max-width: 768px) {
  .measure-sticky-panel { max-height: calc(78vh - env(safe-area-inset-bottom, 0px)); padding: 0 10px calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .measure-bottom-spacer { height: 70vh; }
}

@media(max-width:768px){.measure-current{padding-bottom:20px;margin-bottom:22px}.measure-noren.open{max-height:280px;padding:14px 10px 12px}.measure-noren .grid-2{grid-template-columns:1fr!important;gap:10px}.measure-noren input{height:48px;font-size:16px}.measure-list{padding-bottom:90px}}


/* === Draggable hinge bottom sheet patch === */
.measure-sticky-panel{
  transform: translateY(var(--ms-panel-y, 0px));
  will-change: transform;
}
.measure-sticky-panel.collapsed{
  transform: translateY(var(--ms-panel-y, 0px));
}
.measure-sticky-panel.dragging{
  transition: none !important;
  user-select: none;
  -webkit-user-select: none;
}
.ms-sticky-handle{
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ms-sticky-handle::after{
  content:'上下にドラッグ';
  font-size:10px;
  color:var(--text-muted);
  line-height:1;
}

/* iPhone / PWA: ポップアップ代替の印刷プレビュー */
.app-pdf-print-overlay{
  position:fixed;inset:0;z-index:20050;display:none;flex-direction:column;
  background:#f3f0e8;color:#222;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  height:100%;height:100dvh;max-height:100dvh;
  overflow:hidden;isolation:isolate;
  -webkit-overflow-scrolling:touch;
}
.app-pdf-print-overlay.is-open{display:flex;}
body.app-pdf-print-active{overflow:hidden;}
.app-pdf-print-toolbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  flex-wrap:wrap;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  border-bottom:1px solid var(--border,#d9cfb8);
  background:rgba(255,255,255,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:relative;z-index:2;
}
.app-pdf-print-title{font-size:14px;font-weight:800;min-width:0;flex:1 1 120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app-pdf-print-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.app-pdf-print-actions .btn{
  min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  pointer-events:auto;position:relative;z-index:3;
}
.app-pdf-print-scroll{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px;min-height:0;}
.app-pdf-print-paper{
  max-width:100%;margin:0 auto;background:#fff;color:#111;
  padding:0;border-radius:12px;box-shadow:0 8px 28px rgba(56,48,42,.12);
  overflow-x:auto;
}
.app-pdf-print-paper table{width:100%;border-collapse:collapse;}
.app-pdf-print-paper th,.app-pdf-print-paper td{border:1px solid #999;padding:6px 8px;vertical-align:top;}
.app-pdf-print-paper th{background:#eee;font-weight:700;}
@media print{
  body.app-pdf-print-active{background:#fff!important;}
  body.app-pdf-print-active>:not(#appPdfPrintOverlay){display:none!important;}
  body.app-pdf-print-active #appPdfPrintOverlay{
    display:block!important;position:static;inset:auto;background:#fff;padding:0;
  }
  body.app-pdf-print-active .app-pdf-print-toolbar{display:none!important;}
  body.app-pdf-print-active .app-pdf-print-scroll{overflow:visible;padding:0;}
  body.app-pdf-print-active .app-pdf-print-paper{max-width:none;margin:0;padding:12px;box-shadow:none;border-radius:0;}
}

@media print{
  body.measure-print-mode{background:#fff!important;color:#111!important;}
  body.measure-print-mode .login-screen,body.measure-print-mode .app,body.measure-print-mode .sidebar,body.measure-print-mode .topbar,body.measure-print-mode #toast,body.measure-print-mode .image-viewer-overlay,body.measure-print-mode #themeSwitcher{display:none!important;}
  body.measure-print-mode .measure-print-only{display:block!important;padding:24px;background:#fff;color:#111;font-family:'Noto Sans JP',sans-serif;}
  .measure-print-only h1{font-size:20px;margin:0 0 14px;border-bottom:2px solid #111;padding-bottom:8px;}
  .measure-print-meta{font-size:12px;line-height:1.7;margin-bottom:12px;}
  .measure-print-total{font-size:18px;font-weight:900;margin:10px 0 16px;}
  .measure-print-only table{width:100%;border-collapse:collapse;font-size:11px;}
  .measure-print-only th,.measure-print-only td{border:1px solid #999;padding:6px 8px;text-align:left;color:#111;}
  .measure-print-only th{background:#eee;font-weight:700;}
  .measure-print-note{margin-top:12px;font-size:10px;color:#555;}
}

.measure-auto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.measure-auto-box{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}.measure-auto-label{font-size:10px;color:var(--text-muted);font-weight:700;letter-spacing:.08em;margin-bottom:4px}.measure-auto-val{font-family:var(--mono);font-size:22px;font-weight:900;color:var(--accent)}.measure-auto-val.warn{color:var(--warning)}.measure-confirm-btn{font-size:14px;font-weight:800;padding:13px 16px}.measure-prev{font-size:11px;color:var(--text-muted);margin-top:6px}.measure-prev strong{font-family:var(--mono);color:var(--accent)}
@media(max-width:768px){.measure-auto-grid{grid-template-columns:1fr 1fr}.measure-auto-box:last-child{grid-column:1/-1}.measure-confirm-btn{width:100%;justify-content:center}}
@media(max-width:768px){.measure-hero{grid-template-columns:1fr}.measure-value{grid-template-columns:76px 1fr 76px}.measure-big-btn{height:96px;font-size:42px}.measure-number{font-size:42px}.measure-small-row{grid-template-columns:repeat(2,1fr)}.measure-row{grid-template-columns:28px 1fr auto auto}.measure-current{position:sticky;top:62px;z-index:4}}


/* ===== split from app.html ===== */


:root[data-theme="neutral"],:root:not([data-theme]){--v0-radius:16px;--v0-blur:blur(18px);--v0-card-shadow:0 10px 32px rgba(56,48,42,.08),0 2px 8px rgba(56,48,42,.05);--v0-soft-shadow:0 6px 20px rgba(56,48,42,.07)}html[data-theme="neutral"] .topbar{background:rgba(255,255,255,.88);backdrop-filter:var(--v0-blur);-webkit-backdrop-filter:var(--v0-blur);min-height:62px;padding:12px 18px}html[data-theme="neutral"] .topbar-title{font-size:15px;letter-spacing:.01em}html[data-theme="neutral"] .date-badge{border-radius:999px;background:rgba(90,138,50,.12);border-color:transparent;padding:6px 12px;font-weight:700;color:var(--accent)}html[data-theme="neutral"] .card,html[data-theme="neutral"] .site-card,html[data-theme="neutral"] .stat-card,html[data-theme="neutral"] .global-summary,html[data-theme="neutral"] .board-side,html[data-theme="neutral"] .board-post-form,html[data-theme="neutral"] .board-post,html[data-theme="neutral"] .bd-card,html[data-theme="neutral"] .photo-card,html[data-theme="neutral"] .week-cell,html[data-theme="neutral"] .cal-cell{border-radius:var(--v0-radius);box-shadow:var(--v0-soft-shadow);border-color:rgba(217,207,184,.75)}html[data-theme="neutral"] .card:hover,html[data-theme="neutral"] .site-card:hover,html[data-theme="neutral"] .stat-card:hover{box-shadow:var(--v0-card-shadow)}html[data-theme="neutral"] .site-card{overflow:hidden}html[data-theme="neutral"] .site-card-head{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(241,236,225,.45))}html[data-theme="neutral"] .btn{border-radius:12px;font-weight:700}html[data-theme="neutral"] .btn-primary{box-shadow:0 8px 18px rgba(90,138,50,.18)}html[data-theme="neutral"] input,html[data-theme="neutral"] select,html[data-theme="neutral"] textarea{border-radius:12px;background:rgba(255,255,255,.82)}html[data-theme="neutral"] input:focus,html[data-theme="neutral"] select:focus,html[data-theme="neutral"] textarea:focus{box-shadow:0 0 0 4px rgba(90,138,50,.12)}html[data-theme="neutral"] .mobile-bottom-nav{background:rgba(255,255,255,.92);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-top-color:rgba(217,207,184,.7);box-shadow:0 -10px 30px rgba(56,48,42,.10)}html[data-theme="neutral"] .mob-nav-item{min-height:58px;border-radius:14px;position:relative}html[data-theme="neutral"] .mob-nav-icon{font-size:21px}html[data-theme="neutral"] .mob-nav-label{font-size:10px}html[data-theme="neutral"] .mob-nav-item.active{color:var(--accent)}html[data-theme="neutral"] .mob-nav-item.active .mob-nav-icon{transform:scale(1.13)}html[data-theme="neutral"] .mob-more-drawer{border-radius:24px;background:rgba(255,255,255,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 -16px 40px rgba(56,48,42,.16)}html[data-theme="neutral"] .mob-more-item{border-radius:16px;min-height:72px;background:rgba(247,243,236,.95)}html[data-theme="neutral"] .v0x-scroll-tools{position:fixed;right:14px;bottom:calc(82px + env(safe-area-inset-bottom,0px));z-index:170;display:flex;flex-direction:column;gap:8px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s ease}html[data-theme="neutral"] .v0x-scroll-tools.show{opacity:1;pointer-events:auto;transform:translateY(0)}html[data-theme="neutral"] .v0x-fab{width:44px;height:44px;border-radius:999px;border:1px solid rgba(217,207,184,.85);background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(56,48,42,.16);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;color:var(--text);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}html[data-theme="neutral"] .v0x-fab:active{transform:scale(.94)}html[data-theme="neutral"] .v0x-section-jump{position:sticky;top:62px;z-index:4;margin:-8px 0 12px;padding:8px 2px;display:none;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,var(--bg),rgba(247,243,236,.72));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}html[data-theme="neutral"] .v0x-section-jump.show{display:flex}html[data-theme="neutral"] .v0x-chip{border:1px solid var(--border);background:rgba(255,255,255,.88);color:var(--text-muted);border-radius:999px;padding:7px 12px;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer;box-shadow:0 2px 8px rgba(56,48,42,.05)}html[data-theme="neutral"] .v0x-chip:active{transform:scale(.97)}html[data-theme="neutral"] .v0x-refresh-indicator{position:fixed;top:8px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:9999;background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-size:12px;color:var(--accent);box-shadow:0 8px 24px rgba(56,48,42,.12);opacity:0;transition:.2s ease}html[data-theme="neutral"] .v0x-refresh-indicator.show{opacity:1;transform:translateX(-50%) translateY(0)}@media(max-width:768px){html[data-theme="neutral"] .page{padding:14px 12px 10px}html[data-theme="neutral"] .global-summary{border-radius:22px}html[data-theme="neutral"] .stat-card{border-radius:16px}html[data-theme="neutral"] .site-grid{gap:12px}html[data-theme="neutral"] .action-row .btn{border-radius:14px}html[data-theme="neutral"] .modal{border-radius:24px 24px 0 0!important}html[data-theme="neutral"] .v0x-section-jump{display:flex}html[data-theme="neutral"] .topbar{min-height:58px}html[data-theme="neutral"] .date-badge{display:inline-flex}html[data-theme="neutral"] .newReportBtn,html[data-theme="neutral"] #newReportBtn{border-radius:999px}}@media(min-width:769px){html[data-theme="neutral"] .v0x-scroll-tools{bottom:22px}html[data-theme="neutral"] .v0x-section-jump{top:61px}}


/* ===== split from app.html ===== */


:root[data-theme="neutral"],
:root:not([data-theme]) {
  --v0-bg:#f8f6ef;
  --v0-panel:#fffdf8;
  --v0-ink:#312b23;
  --v0-muted:#8c8374;
  --v0-green:#4f8f46;
  --v0-green-2:#6ca35e;
  --v0-blue:#15819a;
  --v0-line:rgba(70,60,45,.13);
  --v0-shadow:0 18px 48px rgba(50,42,30,.13),0 3px 12px rgba(50,42,30,.07);
  --v0-soft:0 8px 24px rgba(50,42,30,.08);
}
/* neutral / warm ともグローバル body グラデ（--bg-glow 等）に任せる。v0-ink で text を上書きしない */
html[data-theme="neutral"] body,
html[data-theme="warm"] body,
:root[data-theme="neutral"] body,
:root[data-theme="warm"] body {
  color: var(--text) !important;
}
html[data-theme="neutral"] .app.show,
:root[data-theme="neutral"] .app.show,
:root:not([data-theme]) .app.show{background:transparent!important;}
html[data-theme="neutral"] .sidebar,
:root[data-theme="neutral"] .sidebar,
:root:not([data-theme]) .sidebar{
  background:rgba(31,29,25,.96)!important;
  border-right:none!important;
  box-shadow:10px 0 30px rgba(49,43,35,.18)!important;
}
html[data-theme="neutral"] .sidebar .logo,
html[data-theme="neutral"] .sidebar-footer,
html[data-theme="neutral"] .user-info{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.08)!important;}
html[data-theme="neutral"] .sidebar .logo-title,
html[data-theme="neutral"] .sidebar .nav-item.active,
html[data-theme="neutral"] .sidebar .sync-status{color:#9bd17d!important;}
html[data-theme="neutral"] .sidebar .logo-sub,
html[data-theme="neutral"] .sidebar .nav-section,
html[data-theme="neutral"] .sidebar .nav-item,
html[data-theme="neutral"] .sidebar .user-email{color:rgba(255,255,255,.62)!important;}
html[data-theme="neutral"] .sidebar .nav-item{border-radius:14px!important;margin:2px 4px!important;padding:11px 12px!important;}
html[data-theme="neutral"] .sidebar .nav-item.active{background:rgba(155,209,125,.14)!important;box-shadow:inset 0 0 0 1px rgba(155,209,125,.18)!important;}
html[data-theme="neutral"] .sidebar .nav-item:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;}
html[data-theme="neutral"] .topbar{
  margin:14px 18px 0!important;
  border:1px solid var(--v0-line)!important;
  border-radius:24px!important;
  background:rgba(255,253,248,.82)!important;
  backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;
  box-shadow:var(--v0-soft)!important;
  min-height:68px!important;
  /* iOS notch 対策：テーマ側で safe-area padding を潰さない */
  padding:calc(14px + env(safe-area-inset-top, 0px)) 18px 14px!important;
}
html[data-theme="neutral"] .topbar-title{font-size:18px!important;font-weight:900!important;letter-spacing:.01em!important;}
html[data-theme="neutral"] .date-badge{border-radius:999px!important;background:rgba(79,143,70,.12)!important;color:var(--v0-green)!important;border:0!important;padding:8px 14px!important;font-weight:900!important;}
html[data-theme="neutral"] .page{padding:22px 22px 96px!important;}
html[data-theme="neutral"] .card,
html[data-theme="neutral"] .global-summary,
html[data-theme="neutral"] .site-card,
html[data-theme="neutral"] .stat-card,
html[data-theme="neutral"] .board-side,
html[data-theme="neutral"] .board-post-form,
html[data-theme="neutral"] .board-post,
html[data-theme="neutral"] .bd-card,
html[data-theme="neutral"] .photo-card,
html[data-theme="neutral"] .week-cell,
html[data-theme="neutral"] .cal-cell,
html[data-theme="neutral"] .modal{
  background:rgba(255,253,248,.92)!important;
  border:1px solid var(--v0-line)!important;
  border-radius:24px!important;
  box-shadow:var(--v0-soft)!important;
}
html[data-theme="neutral"] .global-summary{padding:24px!important;box-shadow:var(--v0-shadow)!important;border-radius:28px!important;background:linear-gradient(135deg,rgba(255,253,248,.96),rgba(247,243,236,.86))!important;}
html[data-theme="neutral"] .global-summary-title,
html[data-theme="neutral"] .card-title{font-size:12px!important;font-weight:900!important;letter-spacing:.08em!important;color:var(--v0-muted)!important;}
html[data-theme="neutral"] .big-progress-num,
html[data-theme="neutral"] .stat-num,
html[data-theme="neutral"] .card-progress-num{color:var(--v0-green)!important;text-shadow:0 1px 0 rgba(255,255,255,.7)!important;}
html[data-theme="neutral"] .big-bar,
html[data-theme="neutral"] .progress-bar,
html[data-theme="neutral"] .material-bar{background:rgba(70,60,45,.10)!important;border-radius:999px!important;}
html[data-theme="neutral"] .big-bar{height:20px!important;}
html[data-theme="neutral"] .big-bar-fill,
html[data-theme="neutral"] .progress-fill,
html[data-theme="neutral"] .material-bar-fill{background:linear-gradient(90deg,var(--v0-green),var(--v0-green-2))!important;border-radius:999px!important;}
html[data-theme="neutral"] .stats-row{gap:16px!important;}
html[data-theme="neutral"] .stat-card{padding:20px!important;border-radius:22px!important;min-height:104px!important;}
html[data-theme="neutral"] .stat-card::before{height:5px!important;background:linear-gradient(90deg,var(--v0-green),var(--v0-blue))!important;}
html[data-theme="neutral"] .stat-label{font-weight:800!important;letter-spacing:.04em!important;}
html[data-theme="neutral"] .site-grid{gap:18px!important;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))!important;}
html[data-theme="neutral"] .site-card{border-radius:26px!important;overflow:hidden!important;}
html[data-theme="neutral"] .site-card:hover,
html[data-theme="neutral"] .card:hover,
html[data-theme="neutral"] .stat-card:hover{transform:translateY(-3px)!important;box-shadow:var(--v0-shadow)!important;border-color:rgba(79,143,70,.32)!important;}
html[data-theme="neutral"] .site-card-head{background:linear-gradient(135deg,rgba(79,143,70,.13),rgba(255,255,255,.2))!important;padding:18px!important;}
html[data-theme="neutral"] .site-card-name{font-size:16px!important;font-weight:900!important;}
html[data-theme="neutral"] .qty-box,
html[data-theme="neutral"] .global-stat-row,
html[data-theme="neutral"] .viewer-row,
html[data-theme="neutral"] .board-site-item,
html[data-theme="neutral"] .material-item,
html[data-theme="neutral"] .rd-card{
  background:rgba(247,243,236,.72)!important;border:1px solid var(--v0-line)!important;border-radius:16px!important;
}
html[data-theme="neutral"] .btn{border-radius:16px!important;font-weight:900!important;min-height:42px!important;box-shadow:none!important;}
html[data-theme="neutral"] .btn-primary{background:linear-gradient(135deg,var(--v0-green),var(--v0-green-2))!important;color:white!important;box-shadow:0 12px 26px rgba(79,143,70,.23)!important;}
html[data-theme="neutral"] .btn-secondary{background:rgba(255,253,248,.88)!important;border:1px solid var(--v0-line)!important;}
html[data-theme="neutral"] input,
html[data-theme="neutral"] select,
html[data-theme="neutral"] textarea{
  border-radius:16px!important;background:rgba(255,253,248,.92)!important;border:1px solid var(--v0-line)!important;padding:12px 14px!important;
}
html[data-theme="neutral"] input:focus,
html[data-theme="neutral"] select:focus,
html[data-theme="neutral"] textarea:focus{border-color:rgba(79,143,70,.65)!important;box-shadow:0 0 0 5px rgba(79,143,70,.13)!important;}
html[data-theme="neutral"] .mobile-bottom-nav{
  left:10px!important;right:10px!important;bottom:10px!important;border-radius:26px!important;
  background:rgba(255,253,248,.96)!important;border:1px solid rgba(217,204,182,.9)!important;
  box-shadow:0 -10px 30px rgba(56,48,42,.12)!important;backdrop-filter:blur(26px)!important;-webkit-backdrop-filter:blur(26px)!important;
  padding:8px 8px calc(env(safe-area-inset-bottom,0px) + 8px)!important;
  z-index:8020!important;
}
html[data-theme="neutral"] .mob-nav-item{border-radius:20px!important;min-height:58px!important;color:var(--text)!important;}
html[data-theme="neutral"] .mob-nav-label{color:var(--text)!important;font-size:11px!important;font-weight:800!important;}
html[data-theme="neutral"] .mob-nav-item.active{background:rgba(155,209,125,.16)!important;}
html[data-theme="neutral"] .mob-nav-item.active .mob-nav-label{color:#9bd17d!important;}
html[data-theme="neutral"] .mob-nav-dot{background:#9bd17d!important;}
html[data-theme="neutral"] .mob-more-drawer{left:10px!important;right:10px!important;border-radius:28px!important;background:rgba(255,253,248,.98)!important;border:1px solid rgba(217,204,182,.9)!important;box-shadow:0 -18px 48px rgba(56,48,42,.18)!important;z-index:8010!important;}
html[data-theme="neutral"] .mob-more-drawer.open{
  bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;
  --mob-drawer-fill-h:min(82vh,calc(100vh - 108px - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px)))!important;
  height:var(--mob-drawer-fill-h)!important;
  max-height:var(--mob-drawer-fill-h)!important;
}
html[data-theme="neutral"] .mob-more-backdrop.open{z-index:8000!important;}
html[data-theme="neutral"] .mob-more-item{border-radius:20px!important;background:var(--surface2)!important;border-color:var(--border)!important;color:var(--text)!important;}
html[data-theme="neutral"] .mob-more-label{color:var(--text)!important;font-weight:700!important;}
html[data-theme="neutral"] .v0x-scroll-tools{right:18px!important;bottom:106px!important;}
html[data-theme="neutral"] .v0x-fab{width:52px!important;height:52px!important;background:rgba(31,29,25,.88)!important;color:#fff!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 14px 34px rgba(0,0,0,.24)!important;}
html[data-theme="neutral"] .v0x-section-jump{top:88px!important;margin:2px 0 14px!important;padding:8px 2px!important;background:transparent!important;}
html[data-theme="neutral"] .v0x-chip{background:rgba(31,29,25,.86)!important;color:rgba(255,255,255,.76)!important;border-color:rgba(255,255,255,.10)!important;border-radius:999px!important;padding:9px 14px!important;box-shadow:0 8px 22px rgba(0,0,0,.15)!important;}
@media(max-width:768px){
  html[data-theme="neutral"] .topbar{margin:10px 10px 0!important;border-radius:22px!important;min-height:62px!important;}
  html[data-theme="neutral"] .page{padding:14px 10px 108px!important;}
  html[data-theme="neutral"] .stats-row{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  html[data-theme="neutral"] .stat-card{padding:16px!important;min-height:92px!important;}
  html[data-theme="neutral"] .site-grid{grid-template-columns:1fr!important;gap:12px!important;}
  html[data-theme="neutral"] .global-summary{border-radius:26px!important;padding:18px!important;}
  html[data-theme="neutral"] .big-progress-num{font-size:42px!important;}
  html[data-theme="neutral"] .card{border-radius:22px!important;padding:16px!important;}
  html[data-theme="neutral"] .modal{border-radius:28px 28px 0 0!important;}
}


/* ===== split from app.html ===== */



/* ============================================================
   V0 VISUAL RESTORE — data-theme="neutral" のみ（やわらかい warm には当てない）
   warm / cool / 夜 は data-theme ブロック＋末尾の打ち消しに従う
   ============================================================ */
:root[data-theme="neutral"],
:root:not([data-theme]) {
  --bg:#f6f1e8 !important;
  --surface:#fffdf8 !important;
  --surface2:#f1eadc !important;
  --surface3:#e7ddca !important;
  --border:#d9ccb6 !important;
  --accent:#466f9f !important;
  --accent-light:#6e93bd !important;
  --accent2:#9a7860 !important;
  --accent3:#718f63 !important;
  --text:#352f28 !important;
  --text-muted:#82776a !important;
  --success:#718f63 !important;
  --warning:#c1843f !important;
  --danger:var(--danger) !important;
  --shadow-sm:0 4px 16px rgba(53,47,40,.07) !important;
  --shadow-md:0 10px 30px rgba(53,47,40,.11) !important;
  --shadow-lg:0 22px 60px rgba(53,47,40,.16) !important;
}

/* ===== split from app.html ===== */


#page-measure .measure-small-row,#page-measure .measure-op-row{display:none!important;}
#page-measure .measure-value{grid-template-columns:78px 1fr 78px!important;gap:12px!important;margin-top:16px!important;}
#page-measure .measure-big-btn{height:94px!important;border-radius:24px!important;font-size:54px!important;}
#page-measure .measure-number{font-size:42px!important;min-height:78px!important;background:#fff!important;border:1px solid var(--border)!important;box-shadow:inset 0 1px 2px rgba(56,48,42,.04)!important;}
#page-measure .measure-unit{font-size:14px!important;margin-top:6px!important;}
#page-measure .measure-confirm-btn{min-height:54px!important;font-size:16px!important;border-radius:16px!important;width:100%!important;justify-content:center!important;}
#page-measure .measure-status{font-size:12px!important;line-height:1.6!important;background:rgba(61,127,160,.08)!important;border:1px dashed rgba(61,127,160,.25)!important;border-radius:12px!important;padding:10px 12px!important;}
#page-measure .action-row{gap:8px!important;overflow-x:auto!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch!important;padding-bottom:4px!important;}
#page-measure .action-row .btn{flex:0 0 auto!important;}
#page-measure .measure-sticky-panel{max-height:64vh!important;}
@media(max-width:768px){#page-measure .measure-current-head{display:none!important;}#page-measure .measure-jump-row{grid-template-columns:1fr 1fr 1fr!important;margin-top:6px!important;}#page-measure .measure-index-select{height:44px!important;}#page-measure .measure-value{grid-template-columns:72px 1fr 72px!important;}#page-measure .measure-big-btn{height:86px!important;font-size:50px!important;}#page-measure .measure-number{font-size:36px!important;min-height:72px!important;}#page-measure .measure-noren-toggle{display:none!important;}#page-measure .measure-noren{display:none!important;}#page-measure .measure-prev{display:none!important;}#page-measure .measure-bottom-spacer{height:42vh!important;min-height:300px!important;}}


/* ===== split from app.html ===== */


/* 全体視認性ブースト */
:root { --text-muted: #4a4238; }
.nav-section { color: #7a6d62 !important; }
.big-progress-pct { color: var(--text) !important; font-weight: 700 !important; }
.global-stat-row .label { color: var(--text) !important; font-weight: 600 !important; }
.site-card-addr { color: var(--text) !important; }
.qty-label { color: var(--text) !important; font-weight: 700 !important; font-size: 10px !important; }
.board-post-meta { color: var(--text) !important; font-weight: 600 !important; }
.viewer-row .label { color: var(--text) !important; font-weight: 700 !important; }
.measure-auto-label { color: var(--text) !important; }
.rd-meta { color: var(--text) !important; }
.team-card-count { color: var(--text) !important; font-weight: 700 !important; }
/* ダッシュボードの補助テキスト */
[style*="font-size:11px"][style*="color:var(--text-muted)"],
[style*="font-size: 11px"][style*="color: var(--text-muted)"] {
  color: var(--text) !important;
}
/* ボタンテキストが消えないように */
.btn-soft-red { color: var(--danger) !important; font-weight: 700 !important; }
/* 掲示板の現場一覧 */
.board-site-item { color: var(--text) !important; font-weight: 600 !important; }
/* 工程・配置カードの文字 */
.worker-meta { color: var(--text) !important; font-size: 12px !important; }
.worker-role-pill { background: rgba(107,142,61,.15) !important; color: var(--accent) !important; font-weight: 700 !important; border-radius: 99px; padding: 1px 8px; font-size: 11px; }
.worker-status-pill { border-radius: 99px; padding: 1px 8px; font-size: 11px; font-weight: 700; background: rgba(47,125,32,.15); color: var(--success); }
.worker-status-pill.off { background: rgba(61,53,42,.10); color: var(--text-muted); }


/* ===== split from app.html ===== */


/* ── サイドバー文字が常に見える保証 ── */
.sidebar { width: 220px !important; min-width: 220px !important; }
.nav-item { color: var(--text) !important; opacity: 1 !important; }
.nav-item:not(.active) { color: var(--text) !important; }
/* テーマ別に薄くなる問題を修正 */
.sidebar .nav-item { color: rgba(255,255,255,.92) !important; }
/* アクティブ行は背景が accent 系のため、文字・アイコンは常に明るい色 */
.sidebar .nav-item.active { color: #ffffff !important; }
.sidebar .nav-item.active .icon { color: rgba(255,255,255,0.92) !important; }
/* デフォルトテーマ（明るい）では文字を濃く */
body:not(.theme-apple):not(.theme-casio):not(.theme-watch):not([class*="theme-dark"]) .sidebar .nav-item {
  color: #2a2420 !important;
}
body:not(.theme-apple):not(.theme-casio):not(.theme-watch):not([class*="theme-dark"]) .sidebar .nav-item.active {
  color: #ffffff !important;
}
body:not(.theme-apple):not(.theme-casio):not(.theme-watch):not([class*="theme-dark"]) .sidebar .nav-item.active .icon {
  color: rgba(255,255,255,0.92) !important;
}
body:not(.theme-apple):not(.theme-casio):not(.theme-watch):not([class*="theme-dark"]) .sidebar .nav-section {
  color: #5a5048 !important;
}
/* nav-item のラベルテキストを確実に表示 */
.nav-item span:not(.nav-icon) { display: inline !important; opacity: 1 !important; visibility: visible !important; }
/* アイコンと文字の間隔 */
.nav-item { gap: 10px !important; font-size: 13px !important; font-weight: 600 !important; }


/* ===== split from app.html ===== */


  .measure-pdf-capture-live {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 794px !important;
    min-height: 1123px !important;
    padding: 28px !important;
    background: #ffffff !important;
    color: #111111 !important;
    z-index: 2147483647 !important;
    box-shadow: none !important;
    overflow: visible !important;
    font-family: 'Noto Sans JP', Arial, sans-serif !important;
  }
  .measure-pdf-capture-live * { color: #111111 !important; box-shadow: none !important; }
  .measure-pdf-generating-mask {
    position: fixed; inset: 0; z-index: 2147483646;
    background: rgba(247,243,236,.92);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: var(--text);
  }


/* ===== split from app.html ===== */


/* ===== split from app.html ===== */

/* 夜モード：現場計測（グレー／暗緑パネル＋補助文字のコントラストを優先） */
[data-theme="darksoft"] #page-measure .measure-row,
[data-theme="darksoft"] #page-measure .measure-total,
[data-theme="darksoft"] #page-measure .measure-qr,
[data-theme="darksoft"] #page-measure .measure-auto-box,
[data-theme="darksoft"] #page-measure .measure-ledger-item,
[data-theme="darksoft"] #page-measure .measure-ledger-empty,
[data-theme="darksoft"] #page-measure .measure-material-summary,
[data-theme="darksoft"] #page-measure .measure-stock-compare {
  background: #1e3d30 !important;
  border-color: rgba(0, 255, 160, 0.34) !important;
}
[data-theme="darksoft"] #page-measure .card {
  background: #183228 !important;
  border-color: rgba(0, 255, 160, 0.28) !important;
}
[data-theme="darksoft"] #page-measure .measure-current {
  background: linear-gradient(145deg, #1a352b, #142a22) !important;
  border-color: rgba(0, 255, 160, 0.3) !important;
}
[data-theme="darksoft"] #page-measure .measure-row-name,
[data-theme="darksoft"] #page-measure .measure-ledger-title {
  color: #f2fff8 !important;
}
[data-theme="darksoft"] #page-measure .measure-row-meta,
[data-theme="darksoft"] #page-measure .measure-ledger-meta,
[data-theme="darksoft"] #page-measure .measure-total-label,
[data-theme="darksoft"] #page-measure .measure-auto-label,
[data-theme="darksoft"] #page-measure .measure-ledger-empty,
[data-theme="darksoft"] #page-measure .measure-step,
[data-theme="darksoft"] #page-measure .measure-unit,
[data-theme="darksoft"] #page-measure .measure-prev {
  color: #b6ebd0 !important;
}
[data-theme="darksoft"] #page-measure .measure-row-no {
  color: #9dd9be !important;
}
[data-theme="darksoft"] #page-measure .measure-loc-input {
  color: #f6fffb !important;
}
[data-theme="darksoft"] #page-measure .measure-index-select {
  background: #1e3d30 !important;
  color: #f2fff8 !important;
  border-color: rgba(0, 255, 160, 0.34) !important;
}
[data-theme="darksoft"] #page-measure .action-row .btn-secondary {
  background: #1a3228 !important;
  color: #dff9ea !important;
  border-color: rgba(0, 255, 160, 0.32) !important;
}
[data-theme="darksoft"] #page-measure .ms-sticky-handle-bar {
  background: rgba(0, 255, 160, 0.5) !important;
}
[data-theme="darksoft"] #page-measure .ms-sticky-toggle {
  border-color: rgba(0, 255, 160, 0.35) !important;
  background: #1e3d30 !important;
  color: #dff9ea !important;
}
[data-theme="darksoft"] #page-measure .ms-sticky-handle {
  background: linear-gradient(180deg, #1a3228 55%, transparent) !important;
}
[data-theme="darksoft"] #page-measure .measure-number {
  background: #2a4d3e !important;
  color: #f8fffc !important;
  border: 1px solid rgba(0, 255, 160, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 10px rgba(0, 0, 0, 0.22) !important;
}
[data-theme="darksoft"] #page-measure .measure-status {
  background: rgba(0, 255, 160, 0.1) !important;
  border: 1px dashed rgba(0, 255, 160, 0.45) !important;
  color: #c8f5dc !important;
}
[data-theme="darksoft"] #page-measure .measure-separate-note {
  background: rgba(0, 255, 160, 0.08) !important;
  border-color: rgba(0, 255, 160, 0.4) !important;
  color: #c8f5dc !important;
}
[data-theme="darksoft"] #page-measure .measure-qr img {
  background: #1e3d30 !important;
}
[data-theme="darksoft"] #page-measure .measure-row.active {
  background: rgba(0, 255, 160, 0.16) !important;
  border-color: #00ff88 !important;
}
[data-theme="darksoft"] #page-measure .measure-sticky-panel {
  background: linear-gradient(180deg, #1a3228, #14261f) !important;
  border-top-color: rgba(0, 255, 160, 0.38) !important;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.52) !important;
}
[data-theme="darksoft"] #page-measure .measure-noren {
  background: linear-gradient(180deg, #224536, #162820) !important;
  box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.25) !important;
}
[data-theme="darksoft"] #page-measure .measure-big-btn {
  color: #041208 !important;
  text-shadow: none !important;
}
[data-theme="darksoft"] #page-measure .measure-material-summary-title,
[data-theme="darksoft"] #page-measure .measure-stock-title {
  color: #f4fffa !important;
}
[data-theme="darksoft"] #page-measure .measure-material-summary-row,
[data-theme="darksoft"] #page-measure .measure-stock-row {
  border-left-color: rgba(0, 255, 160, 0.48) !important;
}
[data-theme="darksoft"] #page-measure .measure-material-summary-row small,
[data-theme="darksoft"] #page-measure .measure-stock-row small {
  color: #b4ebd0 !important;
}
[data-theme="darksoft"] .measure-pdf-generating-mask {
  background: rgba(7, 25, 18, 0.92) !important;
  color: var(--text) !important;
}

/* 左メニュー可読性修正 */
.sidebar{background:rgba(250,247,242,.98)!important;border-right:1px solid var(--border)!important;}
.logo-title,.logo-sub,.user-email,.sync-status{color:var(--accent)!important;opacity:1!important;}
.nav-section{color:var(--text-muted)!important;opacity:1!important;}
.nav-item{color:var(--text)!important;opacity:1!important;font-weight:600!important;}
.nav-item .nav-icon{opacity:1!important;filter:none!important;}
.nav-item:hover{background:var(--accent-subtle)!important;color:var(--accent)!important;}
.nav-item.active{background:rgba(90,138,50,.14)!important;color:var(--accent)!important;border:1px solid rgba(90,138,50,.22)!important;}
.sidebar-footer .btn,.sidebar-footer button{color:var(--text)!important;}

/* 作業員管理アップグレード */
.worker-upgrade-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.worker-upgrade-stat{background:linear-gradient(180deg,rgba(255,253,248,.98),rgba(247,241,230,.96));border:1px solid rgba(217,204,182,.92);border-radius:20px;padding:14px 16px;box-shadow:0 8px 22px rgba(56,48,42,.07);}
.worker-upgrade-stat .num{font-family:var(--mono);font-size:25px;font-weight:900;color:var(--accent3);line-height:1;}
.worker-upgrade-stat .label{font-size:11px;color:var(--text-muted);font-weight:750;margin-top:5px;}
.worker-toolbar{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:8px;margin-bottom:12px;}
.worker-form-advanced{display:grid;grid-template-columns:1fr 120px 110px;gap:8px;margin-top:8px;}
.worker-card-list{display:grid;gap:10px;}
.worker-card{background:rgba(255,253,248,.97);border:1px solid rgba(217,204,182,.9);border-radius:18px;padding:12px;box-shadow:0 6px 18px rgba(56,48,42,.06);}
.worker-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.worker-main{min-width:0;}
.worker-name-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:900;color:var(--text);font-size:15px;}
.worker-role-pill{font-size:10px;color:#4f78a8;background:rgba(61,127,160,.12);border:1px solid rgba(61,127,160,.22);border-radius:999px;padding:3px 8px;font-weight:800;}
.worker-status-pill{font-size:10px;border-radius:999px;padding:3px 8px;font-weight:800;border:1px solid rgba(90,138,50,.28);background:rgba(90,138,50,.12);color:var(--accent);}
.worker-status-pill.off{border-color:rgba(185,82,63,.28);background:rgba(185,82,63,.09);color:var(--danger);}
.worker-meta{font-size:11px;color:var(--text-muted);line-height:1.6;margin-top:5px;}
.worker-card-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.worker-edit-panel{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);}
.worker-card.editing .worker-edit-panel{display:grid;}
.team-upgrade-list{display:grid;gap:12px;}
.team-upgrade-card{background:rgba(255,253,248,.97);border:1px solid rgba(217,204,182,.9);border-radius:20px;padding:14px;box-shadow:0 8px 22px rgba(56,48,42,.07);}
.team-upgrade-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.team-title{font-size:15px;font-weight:900;color:#466f9f;display:flex;align-items:center;gap:8px;}
.team-count-badge{font-family:var(--mono);font-size:11px;color:var(--text-muted);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:3px 8px;}
.team-member-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:34px;margin:8px 0 10px;}
.team-member-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;background:rgba(111,141,84,.12);border:1px solid rgba(111,141,84,.22);border-radius:999px;font-size:12px;font-weight:750;color:var(--text);}
.team-member-chip button{min-height:22px!important;padding:0 6px!important;border-radius:999px!important;font-size:11px!important;background:var(--danger)!important;color:#fff!important;}
.team-add-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px;}
.worker-empty{border:1px dashed var(--border);background:rgba(247,243,236,.7);border-radius:16px;padding:18px;text-align:center;color:var(--text-muted);font-size:13px;}
@media(max-width:768px){.worker-upgrade-summary{grid-template-columns:1fr 1fr}.worker-toolbar{grid-template-columns:1fr}.worker-form-advanced{grid-template-columns:1fr}.worker-edit-panel{grid-template-columns:1fr}.team-add-row{grid-template-columns:1fr}.page#page-workers .grid-2{grid-template-columns:1fr!important}}


/* ============================================================
   ChatGPT final mobile fix: logout + dashboard tidy
   ============================================================ */
#mobileLogoutQuickBtn { display: none; }

@media (max-width: 768px) {
  #mobileLogoutQuickBtn {
    display: inline-flex !important;
    position: fixed !important;
    right: 12px !important;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10050 !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(176,64,48,.25) !important;
    background: rgba(255,253,248,.96) !important;
    color: #9f392c !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 24px rgba(56,48,42,.16) !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }
  #mobileLogoutQuickBtn:active { transform: scale(.96) !important; opacity: .76 !important; }

  html, body { max-width: 100vw !important; overflow-x: hidden !important; }
  .app, .main, .page, #page-dashboard {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  #page-dashboard {
    padding: 12px 10px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  @media (orientation: landscape) {
    #page-dashboard {
      padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .mob-nav,
    .mob-bottom-nav {
      padding-top: 4px !important;
      padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .mob-nav-item {
      min-height: 44px !important;
      padding: 4px 6px !important;
    }
    .mob-nav-icon { font-size: 18px !important; }
    .mob-nav-label { font-size: 9px !important; }
  }

  #globalSummary,
  #page-dashboard .global-summary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    border-radius: 20px !important;
    margin: 0 0 12px 0 !important;
    overflow: hidden !important;
  }
  #globalSummary *,
  #page-dashboard .global-summary * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #globalSummary > div[style*="display:grid"],
  #globalSummary div[style*="display:grid"],
  #page-dashboard .global-summary > div[style*="display:grid"],
  #page-dashboard .global-summary div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #globalSummary .global-summary-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    align-items: start !important;
  }
  #globalSummary .global-summary-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  #globalSummary div[style*="font-size:30px"] { font-size: 24px !important; }
  #globalSummary div[style*="font-size:22px"],
  #globalSummary div[style*="font-size:20px"] { font-size: 18px !important; }
  #globalSummary div[style*="padding:14px 16px"],
  #globalSummary div[style*="padding: 14px 16px"] {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  #page-dashboard .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #page-dashboard .stat-card {
    padding: 12px 10px !important;
    border-radius: 16px !important;
    text-align: center !important;
  }
  #page-dashboard .stat-num { font-size: 24px !important; }
  #page-dashboard .stat-label { font-size: 10px !important; white-space: nowrap !important; }
}

@media (max-width: 430px) {
  #globalSummary div[style*="display:flex; justify-content:space-between"],
  #globalSummary div[style*="display: flex; justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #globalSummary .badge {
    font-size: 10px !important;
    padding: 3px 7px !important;
  }
}

/* ============================================================
   ChatGPT inventory final polish: compact table + large numbers
   ============================================================ */
/* 邪魔だった固定ログアウトは廃止。ログアウトは「その他」メニュー内のみ */
#mobileLogoutQuickBtn { display: none !important; }

/* アプリ全体：数字を少し大きく・読みやすく */
.stat-num,
.big-progress-num,
.card-progress-num,
.ring-pct,
.qty-val,
.inv-number,
.move-history-qty,
#globalSummary [style*="font-family:var(--mono)"],
#page-dashboard [style*="font-family:var(--mono)"] {
  font-size: 1.12em;
  font-weight: 850;
  letter-spacing: .01em;
}

/* 在庫表：余白を詰める */
#page-inventory .card { padding: 14px 14px; }
#page-inventory .table-wrap { border-radius: 12px; }
#invTable { border-collapse: separate; border-spacing: 0; font-size: 12px; }
#invTable th,
#invTable td { padding: 7px 8px; vertical-align: middle; }
#invTable th { white-space: nowrap; }
.inv-item-head,
.inv-item-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  min-width: 132px;
  max-width: 180px;
}
.inv-item-head { background: var(--surface2); }
.inv-order-head,
.inv-order-cell { width: 74px; text-align: center; white-space: nowrap; }
.inv-unit-head,
.inv-unit-cell { width: 46px; text-align: center; color: var(--text-muted); font-size: 11px; }
.inv-loc-head { text-align: center; min-width: 64px; }
.inv-total-head,
.inv-total-cell { text-align: center; background: var(--surface2); color: var(--accent); }
.inv-category-row td {
  background: var(--surface3) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  padding: 6px 9px !important;
}
.inv-item-cell { cursor: pointer; font-weight: 700; }
.inv-item-name { font-size: 14px; font-weight: 800; line-height: 1.35; white-space: normal; word-break: break-word; }
.inv-item-name.ui-tier-place { font-size: 15px; }
.inv-item-spec-wrap { margin-top: 4px; }
.inv-item-spec { font-size: 10px; color: var(--text-muted); font-weight: 400; white-space: normal; word-break: break-word; line-height: 1.4; }
.inv-stock-cell { text-align: center; cursor: pointer; }
.inv-stock-cell.low { background: rgba(217,123,58,.10); }
.inv-number { font-family: var(--mono); color: var(--text); font-size: 14px; }
.inv-number.zero { color: var(--text-faint); font-weight: 650; }
.inv-number.warn { color: var(--warning); font-weight: 900; }
.inv-number.total { color: var(--accent); font-size: 15px; }
.inv-total-cell.low .inv-number { color: var(--danger); }
.inv-min-stock { font-size: 9px; color: var(--text-muted); font-weight: 500; }
.inv-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: grab;
  margin-right: 2px;
}
.inv-order-btn { padding: 2px 5px !important; min-height: 24px !important; font-size: 10px !important; }
.inv-row { transition: background .14s, transform .14s, opacity .14s; }
.inv-row.dragging { opacity: .45; }
.inv-row.drag-over { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(90,138,50,.08); }
/* 2液・シール材は少し大きく見せる */
.inv-row-two-part .inv-item-name { font-size: 14px; font-weight: 950; color: var(--text); }
.inv-row-two-part .inv-number { font-size: 16px; font-weight: 950; }
.inv-row-two-part td { padding-top: 9px !important; padding-bottom: 9px !important; }

/* 在庫調整：入力なしでも済むクイックボタン */
.adjust-quick-panel {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 6px;
  margin: 8px 0 12px;
}
.adjust-chip {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.adjust-chip.plus { color: var(--accent); background: rgba(90,138,50,.09); }
.adjust-chip.minus { color: var(--warning); background: rgba(201,109,44,.09); }
.adjust-chip.reset { color: var(--text-muted); }
.adjust-chip:active { transform: scale(.96); opacity: .72; }
#ad_qty { font-family: var(--mono); font-size: 24px !important; font-weight: 900; text-align: center; }

/* 調整履歴 */
.move-history-card {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border:1px solid var(--border); border-radius:9px;
  margin-bottom:6px; background:var(--surface2);
}
.move-history-card.adjust { background: rgba(90,138,50,.08); border-color: rgba(90,138,50,.18); }
.move-history-main { flex:1; min-width:0; }
.move-history-title { font-size:13px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.move-history-qty { color:var(--accent); font-family:var(--mono); margin-left:8px; }
.move-history-sub { font-size:11px; color:var(--text-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.move-history-date {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  font-family: var(--mono);
  text-align: right;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.move-history-date span {
  display: inline-block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

@media (max-width:768px){
  /* ボトムナビ + 文字サイズレール分の余白 */
  #page-inventory { padding-bottom: calc(152px + env(safe-area-inset-bottom,0px)) !important; }
  #page-inventory .card { padding: 12px 10px !important; }
  #invTable th,
  #invTable td { padding: 6px 7px !important; }
  .inv-item-head,
  /* モバイルで品目列が狭すぎると品名が詰まるため、少し広めにする */
  .inv-item-cell { min-width: 138px; max-width: 190px; }
  .inv-loc-head { min-width: 58px; }
  .inv-order-btn { display: none !important; }
  .inv-drag-handle { width: 28px; height: 28px; margin: 0; }
  .inv-number { font-size: 15px; }
  .inv-row-two-part .inv-number { font-size: 17px; }
  .adjust-quick-panel { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .adjust-chip { min-height: 46px; font-size: 16px; }
}

/* ════════════════════════════════════════
   DASHBOARD REDESIGN — 経営画面スタイル
   ════��═══════════════════════════════════ */

/* ── Header ── */
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.dash-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}
.dash-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  font-family: var(--mono);
}
.dash-header-right {
  flex-shrink: 0;
}

/* ── KPI Card Grid ── */
.kpi-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

/* ── KPI Card ── */
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 18px 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.22s ease;
  box-shadow: var(--shadow-sm);
  cursor: default;
  user-select: none;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent);
  border-radius: 16px 16px 0 0;
}
.kpi-card.kpi-warn::before { background: var(--warning); }
.kpi-card.kpi-info::before { background: var(--accent3, #0a84ff); }
.kpi-card.kpi-success::before { background: var(--success); }
.kpi-card.kpi-danger::before { background: var(--danger); }
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.kpi-card.kpi-warn:hover { border-color: var(--warning); }
.kpi-card.kpi-info:hover { border-color: var(--accent3, #0a84ff); }
.kpi-card.kpi-success:hover { border-color: var(--success); }

/* dragging state */
.kpi-card.dragging {
  opacity: 0.5;
  transform: scale(0.97);
  border-style: dashed;
}
.kpi-card.drag-over {
  border-color: var(--accent);
  background: var(--surface2);
}

/* KPI: 場所（指標名）→ 数字 → 説明 */
.kpi-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.kpi-icon {
  font-size: 18px;
  margin-bottom: 0;
  display: block;
  flex-shrink: 0;
  line-height: 1;
}
.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
}
.kpi-num {
  font-family: var(--mono);
  font-weight: 900;
  font-size: 54px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
.kpi-card.kpi-warn .kpi-num  { color: var(--warning); }
.kpi-card.kpi-info .kpi-num  { color: var(--accent3, #0a84ff); }
.kpi-card.kpi-success .kpi-num { color: var(--success); }
.kpi-card.kpi-danger .kpi-num  { color: var(--danger); }

.kpi-unit {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-muted);
  margin-left: 4px;
}
.kpi-card .kpi-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-top: 0;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.kpi-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
  font-family: var(--mono);
  line-height: 1.35;
  opacity: 0.9;
}
/* L2: KPIの補助数値は控えめ（主数字＝各カード1つに集中） */
#page-dashboard #dashModeProgress .kpi-sub {
  font-size: 9px;
  opacity: 0.62;
  margin-top: 6px;
}
#page-dashboard #dashModeProgress .kpi-icon {
  opacity: 0.88;
}
.kpi-progress {
  margin-top: 8px;
  height: 6px;
  background: var(--surface3);
  border-radius: 99px;
  overflow: hidden;
}
.kpi-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.6s ease;
}
.kpi-card.kpi-warn .kpi-progress-fill { background: var(--warning); }
.kpi-card.kpi-success .kpi-progress-fill { background: var(--success); }

/* Mobile up/down move buttons */
.kpi-move-btns {
  display: none;
  position: absolute;
  top: 8px;
  right: 10px;
  gap: 2px;
}
.kpi-move-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
}
.kpi-move-btn:active { background: var(--surface3); }

/* Settings list item */
.dash-settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dash-settings-item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.dash-settings-item-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}
.dash-settings-item-desc {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
}
.dash-settings-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.dash-settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.dash-settings-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--surface3);
  border-radius: 99px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: 0.2s;
}
.dash-settings-toggle input:checked + .dash-settings-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.dash-settings-toggle-track::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.dash-settings-toggle input:checked + .dash-settings-toggle-track::after {
  transform: translateX(18px);
}

/* Dash settings modal: allow scrolling to bottom on small screens */
.dash-settings-modal{
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.dash-settings-body{
  padding: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}
.dash-settings-footer{
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  padding: 12px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--surface) 38%);
}

.dash-settings-global { font-size: 13px; }
.dash-settings-global-inner {
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dash-settings-global-inner.muted { opacity: 0.92; }
.dash-settings-global-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.dash-settings-global-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 10px;
}
.dash-settings-global-pct {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}
/* ダッシュガジェット: 場所 → 数値 → ゲージ → 内訳数字 → 説明 */
.dash-gadget-tiered .dash-settings-global-title {
  margin-bottom: 6px;
}
.dash-gadget-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 2px 0 8px;
}
.dash-gadget-tiered .dash-settings-global-pct {
  font-size: 36px;
  line-height: 1;
}
.dash-gadget-unit {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-muted);
}
.dash-gadget-value-muted {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-muted);
  font-family: var(--mono);
  margin: 4px 0 8px;
}
.dash-gadget-tiered .dash-settings-global-gauge {
  margin-bottom: 8px;
}
.dash-settings-global-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.dash-gadget-tiered .dash-settings-global-meta {
  margin-top: 0;
}
.dash-settings-global-gauge {
  height: 8px;
  border-radius: 99px;
  margin-bottom: 10px;
}
.dash-settings-global-note {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
  opacity: 0.88;
}
.dash-gadget-tiered .dash-settings-global-note {
  margin-top: 8px;
}
.dash-settings-global-note + .dash-settings-global-note {
  margin-top: 6px;
}

.dash-gadget-strip {
  margin-bottom: 14px;
}
.dash-gadget-card .dash-settings-global-inner {
  max-width: 100%;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .kpi-card-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .kpi-num {
    font-size: 48px;
  }
  .kpi-card {
    padding: 18px 16px;
    border-radius: 14px;
  }
  .kpi-move-btns {
    display: flex;
  }
  .dash-title {
    font-size: 16px;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .kpi-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-num {
    font-size: 38px;
  }
}
@media (min-width: 1101px) {
  .kpi-num {
    font-size: 44px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST LAYOUT OPTIMIZATION (375px基準)
   横スワイプを最小化し、片手操作しやすいUI
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. グローバル余白の最適化 ── */
@media (max-width: 768px) {
  /* ページ全体の余白を詰める */
  .page {
    padding: 12px 10px 8px !important;
  }
  
  /* カードの余白を最適化（押しやすさは維持） */
  .card {
    padding: 12px 12px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
  }
  
  /* セクション間のマージンを詰める */
  .card-title {
    margin-bottom: 10px !important;
    font-size: 10px !important;
  }
  
  /* グローバルサマリーの余白 */
  .global-summary {
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }
  
  /* アクション行の余白統一 */
  .action-row {
    gap: 6px !important;
    margin-top: 10px !important;
  }
}

/* ── 2. 横切れ防止：ボタン・操作要素 ── */
@media (max-width: 768px) {
  /* ボタンは折り返し可能に */
  .action-row {
    flex-wrap: wrap !important;
  }
  
  .action-row .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* 重要ボタンは幅100%で目立たせる */
  .action-row .btn-primary {
    flex: 1 1 100% !important;
    order: -1 !important;
  }
  
  /* 補助ボタンは2列並び */
  .action-row .btn-secondary,
  .action-row .btn-soft-red {
    flex: 1 1 calc(50% - 4px) !important;
  }
  
  /* 3つ以上のボタンがある場合は縦並び */
  .action-row:has(.btn:nth-child(4)) .btn {
    flex: 1 1 100% !important;
  }
}

/* ── 3. テーブル → カード型表示（在庫表等、現場マスタは個別定義済み） ── */

/* ── 4. 作業員管理：カード型レスポンシブ ── */
@media (max-width: 768px) {
  #page-workers .grid[style*="1fr 1.2fr"],
  #page-workers .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .worker-chip {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  
  .team-card {
    padding: 12px !important;
  }
  
  .team-add-member-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .team-add-member-row select,
  .team-add-member-row .btn {
    width: 100% !important;
  }
}

/* ── 5. 配置ビジュアライザー：カレンダー最適化 ── */
@media (max-width: 768px) {
  /* 月カレンダーのセルを小さく */
  .cal-cell {
    min-height: 72px !important;
    padding: 4px !important;
  }
  
  .cal-date {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  
  /* カレンダー内のpillは現場名＋人数のみ */
  .cal-pill {
    font-size: 9px !important;
    padding: 2px 4px !important;
    line-height: 1.2 !important;
  }
  
  .cal-pill .cal-pill-site {
    font-size: 9px !important;
    max-width: 50px !important;
  }
  
  .cal-pill .cal-pill-icon {
    font-size: 10px !important;
  }
  
  .cal-pill .cal-pill-count {
    font-size: 9px !important;
  }
  
  /* 詳細は日付クリック後のパネルへ */
  .cal-pills {
    gap: 1px !important;
  }
  
  .cal-pill-more {
    font-size: 8px !important;
  }
  
  /* ビュー切り替えタブ */
  .view-tabs {
    flex-wrap: wrap !important;
    gap: 2px !important;
  }
  
  .view-tab {
    padding: 6px 8px !important;
    font-size: 10px !important;
    flex: 1 1 auto !important;
    text-align: center !important;
  }
  
  /* ガントチャートは横スクロール許可（最終手段） */
  .gantt-wrap {
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* 週カレンダーは1列に */
  .week-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .week-cell {
    min-height: auto !important;
    padding: 10px !important;
  }
}

/* ── 6. ダッシュボード最適化 ── */
@media (max-width: 768px) {
  /* ダッシュボードヘッダー */
  .dash-header {
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  
  .dash-title {
    font-size: 15px !important;
  }
  
  .dash-header-right {
    width: 100% !important;
  }
  
  .dash-header-right .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* KPIカードは縦1列で数字を大きく */
  .kpi-card-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .kpi-card {
    padding: 14px 14px !important;
    border-radius: 12px !important;
  }
  
  .kpi-num {
    font-size: 40px !important;
  }
  
  .kpi-label {
    font-size: 11px !important;
  }
  
  /* リングビュー切り替え */
  .dash-view-toggle {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  
  .dash-view-btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  
  /* リンググリッドは2列 */
  .ring-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .ring-tile {
    padding: 10px 8px 8px !important;
    border-radius: 14px !important;
  }
  
  .ring-svg-wrap {
    max-width: 100px !important;
  }
  
  .ring-pct {
    font-size: 18px !important;
  }
  
  .ring-tile-name {
    font-size: 10px !important;
    min-height: 2.2em !important;
    line-height: 1.2 !important;
  }
  
  /* stat-rowは2列 */
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  
  .stat-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }
  
  .stat-num {
    font-size: 22px !important;
  }
  
  .stat-label {
    font-size: 10px !important;
  }
}

/* ── 7. 在庫管理カード型表示 ── */
@media (max-width: 768px) {
  /* テーブルは横スクロール可能だが最小限に */
  #page-inventory .table-wrap {
    border-radius: 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  #invTable {
    font-size: 11px !important;
  }
  
  #invTable th,
  #invTable td {
    padding: 6px 6px !important;
  }
  
  .inv-item-head,
  .inv-item-cell {
    min-width: 100px !important;
    max-width: 120px !important;
  }
  
  .inv-item-name {
    font-size: 11px !important;
  }
  
  .inv-number {
    font-size: 14px !important;
  }
}

/* ── 8. フォーム最適化 ── */
@media (max-width: 768px) {
  /* グリッドは1列に */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  /* 入力フィールド */
  input, select, textarea {
    font-size: 16px !important; /* iOS zoomを防止 */
    padding: 12px 12px !important;
    border-radius: 10px !important;
  }
  
  label.fl {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }
  
  .field {
    gap: 3px !important;
  }
  
  /* ラジオ・チェックグループ */
  .radio-group,
  .check-group {
    gap: 4px !important;
  }
  
  .radio-btn,
  .check-btn {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* ── 9. モーダル最適化 ── */
@media (max-width: 768px) {
  /* 下ナビ z-index:8020 より手前に（シート下端・保存ボタンがナビの下に潜んでスクロール不能になるのを防ぐ） */
  .modal-overlay.open {
    align-items: flex-end !important;
    padding: 0 !important;
    z-index: 8040 !important;
  }
  /* 2枚重ね時は DOM 順より手前を明示（クイック編集は JS で一旦閉じるが保険） */
  #workerPickModal.modal-overlay.open {
    z-index: 9050 !important;
  }
  #schQuickEditModal.modal-overlay.open {
    z-index: 9040 !important;
  }
  
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92vh, 100dvh) !important;
    border-radius: 20px 20px 0 0 !important;
    /* padding 略記で下だけ潰さない（ホームインジケータ＋親指届き） */
    padding: 16px 14px calc(28px + env(safe-area-inset-bottom, 0px)) 14px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    scroll-padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  .modal-head {
    padding: 4px 0 12px !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--surface) !important;
    z-index: 10 !important;
  }
  
  .modal-title {
    font-size: 15px !important;
  }

  /* 配置クイック編集・作業員選択・作業員詳細：本文だけスクロール、操作ボタンは常に足元（縦スクロール削減） */
  #schQuickEditModal.modal-overlay.open .modal.sch-quick-sheet,
  #workerPickModal.modal-overlay.open .modal.sch-workerpick-sheet,
  #workerDetailModal.modal-overlay.open .modal.worker-detail-modal {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: min(88dvh, 92vh) !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  #schQuickEditModal.modal-overlay.open .modal.sch-quick-sheet .modal-head,
  #workerPickModal.modal-overlay.open .modal.sch-workerpick-sheet .modal-head,
  #workerDetailModal.modal-overlay.open .modal.worker-detail-modal .modal-head {
    position: relative !important;
    flex-shrink: 0;
    margin-bottom: 0 !important;
    padding: 4px 14px 10px !important;
  }
  #schQuickEditModal .sch-quick-grid {
    grid-template-columns: 1fr !important;
  }
  #schQuickEditModal .sch-quick-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 8px !important;
    overscroll-behavior: contain;
  }
  #schQuickEditModal .sch-quick-footer {
    flex-shrink: 0;
    padding: 10px 14px calc(22px + env(safe-area-inset-bottom, 0px)) 14px !important;
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 -4px 14px rgba(56, 48, 42, 0.08);
  }
  #workerPickModal .sch-workerpick-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 14px 0 !important;
  }
  #workerPickModal .sch-workerpick-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    margin-top: 8px;
    overscroll-behavior: contain;
  }
  #workerPickModal .sch-workerpick-footer {
    flex-shrink: 0;
    padding: 10px 14px calc(22px + env(safe-area-inset-bottom, 0px)) 14px !important;
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 -4px 14px rgba(56, 48, 42, 0.08);
  }

  #workerDetailModal .worker-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 8px !important;
    overscroll-behavior: contain;
  }
  #workerDetailModal .worker-detail-footer {
    flex-shrink: 0;
    padding: 10px 14px calc(22px + env(safe-area-inset-bottom, 0px)) 14px !important;
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 -4px 14px rgba(56, 48, 42, 0.08);
  }
  .worker-detail-menu-btn{ opacity: 0.72; }

  /* 環状詳細：下ナビより前面。在庫ピッカーはベース8060のまま（モーダル8040より上げないとタップが奪われる） */
  .ring-detail-overlay.open {
    z-index: 8040 !important;
  }
}

/* ── 10. 日報入力画面最適化 ── */
@media (max-width: 768px) {
  /* 日報カード */
  .rd-card {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  
  .rd-card-info {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  
  .rd-loc {
    font-size: 13px !important;
  }
  
  .rd-input-group {
    flex-direction: row !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
  
  .rd-input-group input {
    width: 70px !important;
    padding: 8px 8px !important;
    font-size: 16px !important;
  }
  
  /* 品質チェックは2列 */
  #page-report .grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* 共通「table { min-width: 480px }」はチェック表では横スクロール・欠けに見えるため除外（詳細は Mobile stability FINAL も参照） */
  #reportCheckCard table {
    min-width: 0 !important;
    max-width: 100%;
  }
}

/* 日報：品質・安全チェック（施工前・施工後とも OK+NG。2列グリッドで列を揃える） */
#reportCheckCard table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
#reportCheckCard td.report-check-label {
  font-size: 12px;
  padding: 7px 10px 7px 0;
  vertical-align: middle;
  word-break: break-word;
  line-height: 1.45;
}
#reportCheckCard td.report-check-actions {
  padding: 7px 0 7px 6px;
  vertical-align: middle;
  width: 46%;
  max-width: 200px;
  min-width: 132px;
  box-sizing: border-box;
}
/* OK / NG を同幅2列（施工前・施工後で列位置を揃える。min-width:0 は列潰れで NG が消えるため使わない） */
#reportCheckCard .report-check-actions-inner {
  display: grid;
  grid-template-columns: minmax(52px, 1fr) minmax(52px, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 168px;
  margin-left: auto;
  align-items: stretch;
  justify-items: stretch;
}
#reportCheckCard .report-check-ok-cell,
#reportCheckCard .report-check-ng-cell {
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#reportCheckCard .report-check-ok,
#reportCheckCard .report-check-ng {
  width: 100%;
  min-width: 52px;
  justify-content: center;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  #reportCheckCard td.report-check-actions {
    width: 46%;
    max-width: 200px;
    min-width: 136px;
  }
  #reportCheckCard .report-check-actions-inner {
    max-width: 172px;
    gap: 6px;
    grid-template-columns: minmax(56px, 1fr) minmax(56px, 1fr);
  }
}

/* ── 11. 掲示板・写真台帳 ── */
@media (max-width: 768px) {
  .board-layout {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .board-site-list {
    max-height: 180px !important;
  }
  
  .board-post {
    padding: 12px !important;
  }
  
  .board-images {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  
  /* 写真台帳 */
  .photo-filter-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .photo-card img {
    height: 120px !important;
  }
}

/* ── 12. 測定ページ最適化 ── */
@media (max-width: 768px) {
  .measure-sticky-panel {
    border-radius: 16px 16px 0 0 !important;
    padding: 12px 12px !important;
  }
  
  .measure-value {
    gap: 8px !important;
  }
  
  .measure-big-btn {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }
  
  .measure-number {
    font-size: 36px !important;
    padding: 8px 12px !important;
  }
  
  .measure-small-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  
  .measure-small-row .btn {
    flex: 1 1 calc(25% - 4px) !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
    min-width: 0 !important;
  }
  
  .measure-op-row {
    gap: 4px !important;
  }
  
  .measure-op-row .btn {
    flex: 1 !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
}

/* ── 13. 長いテキストの省略表示 ── */
@media (max-width: 768px) {
  .site-card-name,
  .board-post-title,
  .inv-item-name,
  .worker-chip .worker-name,
  .team-card-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
}

/* ── 14. 375px以下（小型スマホ）の追加調整 ── */
@media (max-width: 375px) {
  .page {
    padding: 8px 8px 6px !important;
  }
  
  .card {
    padding: 10px 10px !important;
  }
  
  .kpi-num {
    font-size: 36px !important;
  }
  
  .ring-grid {
    gap: 6px !important;
  }
  
  .ring-tile {
    padding: 8px 6px 6px !important;
  }
  
  .ring-svg-wrap {
    max-width: 85px !important;
  }
  
  .ring-pct {
    font-size: 16px !important;
  }
  
  .ring-tile-name {
    font-size: 9px !important;
  }
  
  .stats-row {
    gap: 4px !important;
  }
  
  .stat-card {
    padding: 8px 10px !important;
  }
  
  .stat-num {
    font-size: 20px !important;
  }
  
  .btn {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  
  .action-row .btn-secondary,
  .action-row .btn-soft-red {
    flex: 1 1 100% !important;
  }
  
  .mob-more-panel-scroll .mob-more-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── 15. タッチ操作の最適化 ── */
@media (max-width: 768px) {
  /* タップターゲットを確保 */
  .btn,
  .nav-item,
  .mob-nav-item,
  .radio-btn,
  .check-btn,
  .board-site-item,
  .worker-chip,
  .ring-tile,
  .cal-cell {
    min-height: 44px !important;
  }
  
  /* ホバー効果を無効化（モバイルでは不要） */
  .site-card:hover,
  .stat-card:hover,
  .ring-tile:hover,
  .kpi-card:hover {
    transform: none !important;
  }
  
  /* アクティブ状態のフィードバック */
  .btn:active,
  .ring-tile:active,
  .site-card:active {
    opacity: 0.7 !important;
    transform: scale(0.98) !important;
  }
}

/* ── 16. ボトムナビ上の余白確保（タップ領域・フロートデザインぶんを含む） ── */
@media (max-width: 768px) {
  :root {
    --app-mobile-nav-gap: calc(104px + env(safe-area-inset-bottom, 0px));
  }
  body.auth-logged-out {
    --app-mobile-nav-gap: 0px;
  }
  html {
    scroll-padding-bottom: var(--app-mobile-nav-gap);
  }
  .main {
    padding-bottom: var(--app-mobile-nav-gap) !important;
  }
  .mob-more-drawer {
    bottom: var(--app-mobile-nav-gap);
  }
  .mob-more-drawer.open {
    bottom: calc(var(--app-mobile-nav-gap) + 12px) !important;
  }
  .toast {
    bottom: calc(var(--app-mobile-nav-gap) + 12px) !important;
  }
}

/* === Site master: anti-cut / compact layout patch 2026-04-29 === */
#page-sites { overflow-x: hidden; }
#page-sites .card { max-width: 100%; overflow: hidden; }
#page-sites .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 62vh;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
#page-sites table {
  width: 100%;
  table-layout: fixed;
}
#page-sites th, #page-sites td {
  min-width: 0 !important;
}
#page-sites th:nth-child(1), #page-sites td:nth-child(1) { width: 22%; }
#page-sites th:nth-child(3), #page-sites td:nth-child(3) { width: 12%; }
#page-sites th:nth-child(4), #page-sites td:nth-child(4),
#page-sites th:nth-child(5), #page-sites td:nth-child(5) { width: 11%; }
#page-sites th:nth-child(6), #page-sites td:nth-child(6) { width: 17%; }
#page-sites th:nth-child(7), #page-sites td:nth-child(7) { width: 10%; }
#page-sites th:nth-child(8), #page-sites td:nth-child(8) { width: 17%; }
#page-sites .site-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
}
#page-sites .site-actions .btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding: 6px 6px;
  line-height: 1.15;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#page-sites .site-progress { min-width: 0; width: 100%; }
#page-sites .site-progress-bar { min-width: 34px; }
#page-sites .site-client {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#page-sites .site-name.ui-tier-place,
#page-sites .site-addr.ui-tier-detail {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
#page-sites .action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#page-sites .action-row .btn { flex: 1 1 190px; justify-content: center; }

/* Narrow desktop / tablet: switch site master from table to compact cards before it cuts off
   NOTE: モバイル(@max-width:768)のカード化と競合して重なりやすいので、769px以上に限定 */
@media (min-width: 769px) and (max-width: 1200px) {
  #page-sites .table-wrap {
    overflow-x: hidden;
    max-height: calc(100vh - 285px);
    padding-right: 2px;
  }
  #page-sites th { position: static; top: auto; z-index: auto; }
  #page-sites table,
  #page-sites tbody,
  #page-sites tr,
  #page-sites td { display: block; width: 100% !important; }
  #page-sites thead { display: none; }
  #page-sites tbody { display: flex; flex-direction: column; gap: 8px; }
  #page-sites tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
  }
  #page-sites tr:hover td { background: transparent; }
  #page-sites td {
    border: 0;
    padding: 3px 0;
  }
  #page-sites td[data-label] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }
  #page-sites td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  #page-sites td:first-child {
    display: block;
    padding: 0 0 7px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
  }
  #page-sites td:first-child::before { display: none; }
  #page-sites td:nth-child(2) { display: none !important; }
  #page-sites td:last-child {
    display: block;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid var(--border-light);
  }
  #page-sites td:last-child::before { display: none; }
  #page-sites .site-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #page-sites .site-actions .btn { min-height: 34px; font-size: 11px; }
  #page-sites .site-name { font-size: 14px; max-width: 100%; }
  #page-sites .site-addr { max-width: 100%; }
  #page-sites .site-progress { max-width: none; }
}

@media (max-width: 520px) {
  #page-sites .card { padding: 10px; }
  #page-sites .table-wrap { max-height: calc(100vh - 260px); }
  #page-sites tr { padding: 10px; border-radius: 11px; }
  #page-sites td[data-label] { grid-template-columns: 62px minmax(0, 1fr); }
  #page-sites .site-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-sites .site-actions .btn { min-height: 38px; padding: 8px 6px; }
  #page-sites .action-row { gap: 6px; }
  #page-sites .action-row .btn { flex: 1 1 100%; min-height: 40px; }
}

/* ============================================================
   PRODUCT POLISH UPDATE 2026-04-29
   目的: v0の大改造ではなく、既存ロジックを触らず細部のUIだけ整える
   ============================================================ */
:root{
  --ui-gap-xs:4px;
  --ui-gap-sm:8px;
  --ui-gap-md:12px;
  --ui-gap-lg:16px;
  --ui-row-pc:50px;
  --ui-row-sp:58px;
}

/* 全体: 無駄な縦余白を少し抑える */
.page{padding:18px 20px;}
.card{padding:14px 16px;margin-bottom:12px;}
.card-title{margin-bottom:10px;}
.action-row{gap:6px;margin-top:10px;}
.btn{min-height:32px;padding:7px 12px;border-radius:8px;}
.btn-sm{min-height:28px;padding:5px 8px;}

/* 横切れ防止の共通保険 */
.card,.site-card,.global-summary,.modal,.table-wrap{max-width:100%;min-width:0;}
*{min-width:0;}
.ellipsis,.site-card-name,.site-card-addr,.material-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ダッシュボード: カードを増やさず、必要・不足・在庫・全体メーター・進捗・現場数に集約 */
#globalSummary.global-summary{padding:14px 16px;margin-bottom:12px;}
.dash-core-panel{display:flex;flex-direction:column;gap:10px;}
.dash-core-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.dash-core-metric{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:10px 11px;}
.dash-core-label{font-size:11px;color:var(--text-muted);font-weight:800;letter-spacing:.06em;margin-bottom:4px;}
.dash-core-value{font-family:var(--mono);font-size:28px;line-height:1;font-weight:950;color:var(--text);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.dash-core-value.need{color:var(--warning);}
.dash-core-value.stock{color:var(--accent);}
.dash-core-value.lack{color:var(--danger);}
.dash-core-unit{font-size:13px;color:var(--text-muted);margin-left:3px;font-weight:700;}
.dash-core-meter{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;}
.dash-core-meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;}
.dash-core-percent{font-family:var(--mono);font-size:26px;font-weight:950;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;}
.dash-core-bar{height:11px;background:var(--surface3);border-radius:999px;overflow:hidden;}
.dash-core-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-light));border-radius:999px;transition:width .35s ease;}
.dash-core-foot{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--text-muted);}
/* KPIカードは「表示設定」でON/OFFできるようにする（デフォルトで隠さない） */
/* ※以前の強制非表示が残ると「全体進捗が出ない」等の誤解になるため削除 */

/* 現場マスタ: 横に広げず、密度を上げる */
#page-sites .card{padding:12px 14px;}
#page-sites table{table-layout:fixed;}
#page-sites th,#page-sites td{padding:8px 8px;line-height:1.35;}
#page-sites tr{height:auto !important; min-height: var(--ui-row-pc);}
#page-sites .site-name.ui-tier-place{display:block;}
#page-sites .site-addr{display:block;}
#page-sites th:last-child,#page-sites td:last-child{width:190px;min-width:190px;}
#page-sites td:last-child .action-row,#page-sites td:last-child{white-space:normal;}
#page-sites td:last-child .btn{font-size:11px;padding:4px 7px;min-height:28px;}
#page-sites .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* 現場計測: 真ん中寄せの計器UI。ロジックは触らない */
#page-measure .card:first-child{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;}
#page-measure .measure-hero{display:grid;grid-template-columns:1fr;gap:10px;align-items:center;justify-items:center;}
#page-measure .measure-hero .field{width:min(100%,420px);text-align:left;}
#page-measure .measure-total{width:min(100%,420px);padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,var(--surface2),#fff);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
#page-measure .measure-total-label{font-size:11px!important;color:var(--text-muted)!important;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
#page-measure #ms_total{font-family:var(--mono);font-size:44px!important;font-weight:950!important;line-height:1;color:var(--accent);letter-spacing:-.05em;}
#page-measure .measure-auto-grid{max-width:760px;margin:0 auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
#page-measure .measure-auto-box{padding:12px;border-radius:14px;}
#page-measure .measure-auto-val{font-size:28px;line-height:1.15;}
#page-measure .measure-sticky-panel{left:50%!important;transform:translateX(-50%)!important;right:auto!important;width:min(760px,calc(100vw - 28px))!important;border-radius:22px 22px 0 0!important;}
#page-measure .measure-current-head{gap:8px;}
#page-measure .measure-value{grid-template-columns:74px minmax(0,1fr) 74px!important;gap:10px!important;}
#page-measure .measure-big-btn{height:82px!important;border-radius:22px!important;font-size:48px!important;}
#page-measure .measure-number{font-size:40px!important;text-align:center!important;}
#page-measure .measure-unit{text-align:center;}

/* 日報履歴: 日付を大きく（約3倍）／その他メタは控えめ */
#page-history #historyList .hist-report-meta{display:flex;flex-direction:column;gap:8px;margin-top:6px;min-width:0}
#page-history #historyList .hist-report-date{
  display:block;
  font-family:var(--mono);
  font-size:clamp(26px,6.8vw,33px)!important;
  font-weight:900!important;
  line-height:1.12!important;
  letter-spacing:.03em!important;
  color:var(--text)!important;
}
#page-history #historyList .hist-report-sub{font-size:12px;line-height:1.45;color:var(--text-muted);font-weight:650}
#page-history .hist-tools{align-items:flex-end}
#page-history .hist-period-input{min-height:38px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;font-family:var(--mono,monospace)}
#page-history #histMonthInput[hidden],
#page-history #histWeekInput[hidden]{display:none!important}
/* 旧サムネリスト等 */
#reportsList .report-date,.report-date{font-size:14px!important;font-weight:850!important;color:var(--text)!important;}
#reportsList .report-user,.report-user,.report-author{font-size:12px!important;color:var(--text-muted)!important;font-weight:700!important;}

/* 掲示板: 一覧密度を上げる */
.board-post{padding:10px 12px;margin-bottom:8px;border-radius:10px;}
.board-post-head{margin-bottom:5px;}
.board-post-text{font-size:12px;line-height:1.55;margin-bottom:6px;}
.board-images{gap:6px;}
.board-images img{max-height:160px;}

/* 作業員・配置: 班分けを前面に出さず、余白だけ残さない */
.ultra-team-members-area{min-height:42px;padding:6px;margin-bottom:6px;}
.ultra-team-actions{gap:4px;}
.worker-card,.ultra-worker-card{margin-bottom:6px;}

@media (max-width:768px){
  .page{padding:10px 10px calc(76px + env(safe-area-inset-bottom,0px));}
  .card{padding:11px 12px;margin-bottom:10px;border-radius:13px;}
  .card-title{font-size:11px;margin-bottom:8px;}
  .btn{min-height:36px;padding:7px 10px;}

  .dash-core-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
  .dash-core-metric{padding:10px 8px;border-radius:12px;}
  .dash-core-value{font-size:26px;}
  .dash-core-percent{font-size:24px;}
  .dash-core-foot{font-size:11px;}

  #page-sites table,#page-sites tbody,#page-sites tr,#page-sites td{display:block;width:100%!important;min-width:0!important;}
  #page-sites thead{display:none;}
  #page-sites tr{height:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:9px 10px;margin-bottom:8px;box-shadow:var(--shadow-sm);}
  #page-sites td{border-bottom:0!important;padding:3px 0!important;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;}
  #page-sites td::before{content:attr(data-label);font-size:10px;color:var(--text-muted);font-weight:800;letter-spacing:.04em;flex:0 0 64px;}
  #page-sites td:last-child{display:block!important;padding-top:7px!important;}
  #page-sites td:last-child::before{display:none;}
  #page-sites td:last-child .action-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:3px;}
  #page-sites td:last-child .btn{width:100%;justify-content:center;min-height:34px;}

  #page-measure .measure-auto-grid{grid-template-columns:1fr;gap:8px;}
  #page-measure .measure-total{padding:12px 14px;}
  #page-measure #ms_total{font-size:40px!important;}
  #page-measure .measure-sticky-panel{width:100vw!important;left:0!important;right:0!important;transform:none!important;border-radius:20px 20px 0 0!important;}
  #page-measure .measure-value{grid-template-columns:64px minmax(0,1fr) 64px!important;gap:8px!important;}
  #page-measure .measure-big-btn{height:76px!important;font-size:44px!important;}
  #page-measure .measure-number{font-size:34px!important;}
  #page-measure .action-row{overflow-x:visible!important;flex-wrap:wrap!important;}
  #page-measure .action-row .btn{flex:1 1 calc(50% - 6px)!important;justify-content:center;}

  .board-layout{gap:8px;}
  .board-post{padding:9px 10px;}
  .board-images img{max-height:130px;}
}

/* === Measure panel tap-safety patch ===
   計器パネルのドラッグ用当たり判定が上下ボタンを吸わないようにする。
   ドラッグ案内は非表示、操作ボタンを最優先にする。 */
.ms-sticky-handle{
  touch-action: auto !important;
  cursor: default !important;
}
.ms-sticky-handle::after{
  content: none !important;
  display: none !important;
}
.measure-sticky-panel button,
.measure-sticky-panel input,
.measure-sticky-panel select,
.measure-sticky-panel textarea,
.measure-current button,
.measure-current input,
.measure-current select,
.measure-current textarea{
  position: relative;
  z-index: 20;
  pointer-events: auto;
}
.measure-sticky-panel{
  touch-action: pan-y !important;
}

/* === Meter UI translucent fixed panel patch ===
   対象: 現場計測の計器UIだけ。計算・保存・Firebase系は触らない。 */
#page-measure .measure-sticky-panel,
#page-measure .measure-sticky-panel.collapsed,
#page-measure .measure-sticky-panel.dragging {
  position: fixed !important;
  inset: auto 16px calc(80px + env(safe-area-inset-bottom, 0px)) 16px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: 420px !important;
  max-height: min(62vh, 620px) !important;
  margin: 0 auto !important;
  transform: none !important;
  background: rgba(255,255,255,0.72) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  z-index: 2000 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 14px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  touch-action: pan-y !important;
  will-change: auto !important;
}

#page-measure .measure-sticky-panel.meter-panel-closed {
  display: none !important;
}

#page-measure .ms-sticky-handle,
#page-measure .ms-sticky-handle-bar,
#page-measure .ms-sticky-toggle,
#page-measure .ms-sticky-handle::after {
  display: none !important;
  pointer-events: none !important;
  touch-action: auto !important;
}

#page-measure .meter-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  background: rgba(255,255,255,0.82) !important;
  color: #222 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  z-index: 3000 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* 計器パネル内だけ前面化。ページ全体のボタンに z-index を付けるとリストが計器の上に被る */
#page-measure .measure-sticky-panel button,
#page-measure .measure-sticky-panel input,
#page-measure .measure-sticky-panel select,
#page-measure .measure-sticky-panel textarea {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

#page-measure .ms-sticky-body {
  position: relative !important;
  z-index: 2100 !important;
  padding: 32px 2px 6px !important;
}

#page-measure .measure-current-head {
  display: flex !important;
}

@media (max-width: 768px) {
  #page-measure .measure-sticky-panel,
  #page-measure .measure-sticky-panel.collapsed,
  #page-measure .measure-sticky-panel.dragging {
    inset: auto 12px calc(76px + env(safe-area-inset-bottom, 0px)) 12px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-width: 420px !important;
    max-height: 58vh !important;
    border-radius: 18px !important;
  }
}

/* === Measure screen visual polish patch v20260429 ===
   対象: 現場計測画面の見た目と計器UIのみ。計算・保存・Firebase・ログイン系は触らない。 */
#page-measure {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.92), rgba(246,248,250,0.84) 34%, rgba(242,244,247,0.72) 100%);
}

#page-measure > .card {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(0,0,0,0.06) !important;
  background: rgba(255,255,255,0.78) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(15,23,42,0.06) !important;
}

#page-measure .card-title {
  font-size: 12px !important;
  letter-spacing: .04em;
  color: rgba(15,23,42,.78) !important;
}

#page-measure .measure-hero {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 170px !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  text-align: left !important;
}

#page-measure .measure-hero .field,
#page-measure .measure-total {
  width: 100% !important;
}

#page-measure .measure-total {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 74px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(248,250,252,0.86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

#page-measure #ms_total {
  font-size: 38px !important;
  letter-spacing: -.055em !important;
}

#page-measure .action-row {
  gap: 7px !important;
  justify-content: center !important;
}

#page-measure .action-row .btn {
  border-radius: 999px !important;
  min-height: 36px !important;
  padding: 7px 12px !important;
  box-shadow: none !important;
}

#page-measure .measure-status,
#page-measure .measure-separate-note {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  line-height: 1.55;
}

#page-measure .measure-auto-grid {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}

#page-measure .measure-auto-box {
  background: rgba(248,250,252,0.88) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: none !important;
}

#page-measure .measure-list {
  gap: 6px !important;
}

#page-measure .measure-row,
#page-measure [data-ms-index] {
  border-radius: 12px !important;
}

#page-measure .measure-sticky-panel,
#page-measure .measure-sticky-panel.collapsed,
#page-measure .measure-sticky-panel.dragging {
  width: min(430px, calc(100vw - 32px)) !important;
  max-width: 430px !important;
  max-height: min(64vh, 600px) !important;
  padding: 12px 12px 14px !important;
  background: rgba(255,255,255,0.74) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 28px rgba(15,23,42,0.14) !important;
}

#page-measure .ms-sticky-body {
  padding: 34px 0 4px !important;
}

#page-measure .measure-current-head {
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

#page-measure .meter-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 3000 !important;
}

#page-measure .meter-voice-btn {
  white-space: nowrap !important;
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

#page-measure .measure-step {
  font-size: 11px !important;
  font-weight: 850 !important;
  color: rgba(15,23,42,.55) !important;
  margin-bottom: 4px !important;
}

#page-measure .measure-loc-input {
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

#page-measure .measure-jump-row {
  display: grid !important;
  grid-template-columns: 74px minmax(0,1fr) 74px !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

#page-measure .measure-jump-row .btn,
#page-measure .measure-index-select {
  min-height: 34px !important;
  border-radius: 999px !important;
}

#page-measure .measure-value {
  grid-template-columns: 58px minmax(0,1fr) 58px !important;
  gap: 8px !important;
  align-items: stretch !important;
  margin: 8px 0 !important;
}

#page-measure .measure-big-btn {
  height: 68px !important;
  border-radius: 18px !important;
  font-size: 38px !important;
  box-shadow: none !important;
}

#page-measure .measure-number-wrap {
  border-radius: 18px !important;
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

#page-measure .measure-number {
  font-size: 36px !important;
  line-height: 1 !important;
}

#page-measure .measure-small-row,
#page-measure .measure-op-row {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 6px !important;
  margin-top: 7px !important;
}

#page-measure .measure-small-row .btn,
#page-measure .measure-op-row .btn {
  min-height: 32px !important;
  padding: 5px 4px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

#page-measure .measure-confirm-btn {
  width: 100% !important;
  min-height: 40px !important;
  border-radius: 14px !important;
}

#page-measure .measure-prev {
  font-size: 11px !important;
  color: rgba(15,23,42,.56) !important;
  align-self: center !important;
}

#page-measure .measure-noren-toggle {
  width: 100% !important;
  margin-top: 6px !important;
  border-radius: 12px !important;
}

#page-measure .meter-close {
  background: rgba(255,255,255,0.94) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

@media (max-width: 768px) {
  #page-measure {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #page-measure > .card {
    border-radius: 14px !important;
    margin-bottom: 9px !important;
    padding: 10px !important;
  }
  #page-measure .measure-hero {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #page-measure .measure-total {
    min-height: 62px !important;
  }
  #page-measure #ms_total {
    font-size: 34px !important;
  }
  #page-measure .action-row .btn {
    flex: 1 1 calc(50% - 6px) !important;
    font-size: 12px !important;
  }
  #page-measure .measure-auto-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
  }
  #page-measure .measure-auto-box {
    padding: 8px 6px !important;
    border-radius: 12px !important;
  }
  #page-measure .measure-auto-val {
    font-size: 20px !important;
  }
  #page-measure .measure-sticky-panel,
  #page-measure .measure-sticky-panel.collapsed,
  #page-measure .measure-sticky-panel.dragging {
    width: min(430px, calc(100vw - 18px)) !important;
    max-height: 61vh !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px !important;
  }
  #page-measure .measure-current-head {
    align-items: flex-start !important;
  }
  #page-measure .meter-head-actions {
    flex-direction: column !important;
    gap: 5px !important;
  }
  #page-measure .meter-head-actions .btn {
    min-width: 72px !important;
    min-height: 32px !important;
    padding: 5px 8px !important;
  }
  #page-measure .measure-value {
    grid-template-columns: 54px minmax(0,1fr) 54px !important;
  }
  #page-measure .measure-big-btn {
    height: 62px !important;
    font-size: 34px !important;
  }
  #page-measure .measure-number {
    font-size: 32px !important;
  }
  #page-measure .measure-small-row,
  #page-measure .measure-op-row {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 5px !important;
  }
}

/* === Measure meter left-hinge open/close patch v20260429 ===
   対象: 現場計測の計器UIだけ。計算・保存・Firebase・Google連携・ログイン処理は触らない。 */
#page-measure .meter-hinge-panel,
#page-measure .measure-sticky-panel.meter-hinge-panel,
#page-measure .measure-sticky-panel.meter-hinge-panel.collapsed,
#page-measure .measure-sticky-panel.meter-hinge-panel.dragging {
  transform-origin: left center !important;
  transition: transform .28s ease, opacity .22s ease, box-shadow .22s ease !important;
  will-change: transform !important;
  perspective: 900px !important;
  backface-visibility: hidden !important;
}

#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-open {
  display: block !important;
  transform: perspective(900px) rotateY(0deg) translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-closed {
  display: block !important;
  transform: perspective(900px) rotateY(-86deg) translateX(-8px) !important;
  opacity: .18 !important;
  pointer-events: none !important;
  box-shadow: 0 4px 14px rgba(15,23,42,0.08) !important;
}

#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-closed .ms-sticky-body,
#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-closed .meter-close {
  pointer-events: none !important;
}

#page-measure .meter-hinge-tab {
  position: fixed !important;
  left: 10px !important;
  bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 96px !important;
  padding: 8px 4px !important;
  border-radius: 0 16px 16px 0 !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  border-left: 0 !important;
  background: rgba(255,255,255,0.86) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,0.14) !important;
  color: rgba(15,23,42,.82) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  z-index: 3200 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  opacity: 0 !important;
  transform: translateX(-56px) !important;
  transition: transform .22s ease, opacity .22s ease !important;
}

#page-measure .meter-hinge-tab.show {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

#page-measure .meter-hinge-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: rgba(15,23,42,0.18);
}

@media (max-width: 768px) {
  #page-measure .meter-hinge-tab {
    left: 0 !important;
    bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
    height: 88px !important;
    width: 40px !important;
  }

  #page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-closed {
    transform: perspective(780px) rotateY(-87deg) translateX(-6px) !important;
    opacity: .14 !important;
  }
}

/* measure material auto calc + stock compare patch */
.measure-material-fields{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr .8fr .7fr;
  gap:8px;
  margin-bottom:10px;
  padding:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:rgba(255,255,255,.54);
}
.measure-material-fields .field{margin:0!important;min-width:0;}
.measure-material-fields input,.measure-material-fields select{min-height:38px!important;}
.measure-material-summary{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:rgba(255,255,255,.58);
}
.measure-material-summary-title,.measure-stock-title{
  font-size:11px;
  font-weight:900;
  color:var(--text-muted);
  margin-bottom:6px;
}
.measure-material-summary-row,.measure-stock-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:8px;
  align-items:center;
  padding:5px 0;
  border-top:1px solid rgba(0,0,0,.06);
  font-size:12px;
}
.measure-material-summary-row:first-of-type,.measure-stock-row:first-of-type{border-top:0;}
.measure-material-summary-row span,.measure-stock-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;}
.measure-material-summary-row small{font-size:10px;color:var(--text-muted);font-weight:600;margin-left:4px;}
.measure-material-summary-row strong,.measure-stock-row strong{font-family:var(--mono);font-size:12px;}
.measure-material-summary-row em,.measure-stock-row em{font-style:normal;font-size:11px;font-weight:900;border-radius:999px;padding:3px 7px;white-space:nowrap;}
.measure-material-summary-row em.ok,.measure-stock-row em.ok{color:var(--success);background:rgba(66,125,106,.10);}
.measure-material-summary-row em.lack,.measure-stock-row em.lack{color:var(--danger);background:rgba(176,64,48,.10);}
.measure-stock-compare{
  margin-top:10px;
  padding:9px 10px;
  border:1px solid rgba(107,142,61,.18);
  border-radius:12px;
  background:rgba(107,142,61,.055);
}
@media(max-width:720px){
  .measure-material-fields{grid-template-columns:1fr 1fr;}
  .measure-material-fields .field:first-child{grid-column:1/-1;}
  .measure-material-summary-row,.measure-stock-row{grid-template-columns:1fr auto;}
  .measure-material-summary-row em,.measure-stock-row em{grid-column:1/-1;justify-self:start;}
}

/* === Measure screen polish: bigger schedule + fully inert closed meter v20260429b === */
#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: perspective(780px) rotateY(-92deg) translateX(-96%) !important;
}

#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-closed,
#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-closed * {
  pointer-events: none !important;
}

#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-closed button,
#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-closed input,
#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-closed select,
#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-closed textarea {
  pointer-events: none !important;
}

.site-card .site-schedule-panel {
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin: 14px 0 12px !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
}

.site-card .site-schedule-title {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  letter-spacing: .02em !important;
}

.site-card .site-schedule-head .badge {
  font-size: 12px !important;
  padding: 5px 9px !important;
}

.site-card .site-schedule-metrics {
  font-size: 13px !important;
  gap: 10px !important;
  margin: 8px 0 !important;
}

.site-card .site-schedule-metrics span {
  font-size: 18px !important;
  font-weight: 900 !important;
}

.site-card .site-schedule-panel .progress-bar {
  height: 10px !important;
  border-radius: 999px !important;
}

.site-card .site-schedule-diff {
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-top: 8px !important;
  color: var(--text) !important;
}

.site-card .site-date-range {
  font-size: 14px !important;
  font-weight: 850 !important;
  color: var(--text) !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 9px 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

@media (max-width: 768px) {
  .site-card .site-schedule-title { font-size: 14px !important; }
  .site-card .site-schedule-metrics { font-size: 14px !important; }
  .site-card .site-schedule-metrics span { font-size: 20px !important; }
  .site-card .site-date-range { font-size: 15px !important; width: 100% !important; justify-content: center !important; }
}

html,
body,
.app,
#app,
.main,
.main-content,
.page {
  background: var(--bg) !important;
  color: var(--text) !important;
}

body.theme-apple,
body.theme-casio,
body.theme-watch,
body[class*="theme-dark"] {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* 昼テーマのみ全文色を寄せる（夜は補助色の階層を残す） */
html:not([data-theme="darksoft"]) body :not(svg):not(path):not(.btn-primary):not(.badge-green):not(.badge-red):not(.badge-orange):not(.brand-cat-glyph):not(.brand-logo-wrench),
html:not([data-theme="darksoft"]) body.theme-apple :not(svg):not(path):not(.btn-primary):not(.badge-green):not(.badge-red):not(.badge-orange):not(.brand-cat-glyph):not(.brand-logo-wrench),
html:not([data-theme="darksoft"]) body.theme-casio :not(svg):not(path):not(.btn-primary):not(.badge-green):not(.badge-red):not(.badge-orange):not(.brand-cat-glyph):not(.brand-logo-wrench) {
  color: var(--text) !important;
}

.muted,
.sub,
.hint,
.small,
.card-sub,
.card-meta,
.stat-label,
.logo-sub,
.user-email,
.nav-section,
.mob-nav-label,
.measure-material-summary-title,
.measure-stock-title {
  color: var(--text-muted) !important;
}

.sidebar,
.topbar,
.mobile-bottom-nav,
.mob-more-drawer,
.card,
.panel,
.modal,
html:not([data-theme="studio"]) .login-card,
.user-info,
.sidebar-footer,
.stat-card,
.site-card,
.ring-tile,
.board-post,
.board-site-item,
.qty-box,
.global-summary,
.global-stat-row,
.date-badge,
.dash-view-toggle,
.table-wrap,
.table-card,
.meter-panel,
.measure-sticky-panel,
.measure-stock-compare,
.measure-material-summary {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

html:not([data-theme="darksoft"]) .modal-overlay,
html:not([data-theme="darksoft"]) .ring-detail-overlay,
html:not([data-theme="darksoft"]) .image-viewer-backdrop,
html:not([data-theme="darksoft"]) .overlay,
html:not([data-theme="darksoft"]) .drawer-backdrop {
  background: rgba(246,247,249,0.70) !important;
  backdrop-filter: blur(10px) !important;
}

input,
select,
textarea,
button,
.btn,
.mob-more-item,
.nav-item,
.dash-view-btn {
  background: var(--btn-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.btn-primary,
button.primary,
.nav-item.active,
.dash-view-btn.active {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* 夜（darksoft）：上記「白パネル固定」ブロックを打ち消し、変数ベースの暗色 UI に戻す */
[data-theme="darksoft"] .sidebar,
[data-theme="darksoft"] .topbar,
[data-theme="darksoft"] .mobile-bottom-nav,
[data-theme="darksoft"] .mob-more-drawer,
[data-theme="darksoft"] .card,
[data-theme="darksoft"] .panel,
[data-theme="darksoft"] .modal,
[data-theme="darksoft"] .login-card,
[data-theme="darksoft"] .user-info,
[data-theme="darksoft"] .sidebar-footer,
[data-theme="darksoft"] .stat-card,
[data-theme="darksoft"] .site-card,
[data-theme="darksoft"] .ring-tile,
[data-theme="darksoft"] .board-post,
[data-theme="darksoft"] .board-site-item,
[data-theme="darksoft"] .qty-box,
[data-theme="darksoft"] .global-summary,
[data-theme="darksoft"] .global-stat-row,
[data-theme="darksoft"] .date-badge,
[data-theme="darksoft"] .dash-view-toggle,
[data-theme="darksoft"] .table-wrap,
[data-theme="darksoft"] .table-card,
[data-theme="darksoft"] .meter-panel,
[data-theme="darksoft"] .measure-sticky-panel,
[data-theme="darksoft"] .measure-stock-compare,
[data-theme="darksoft"] .measure-material-summary {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="darksoft"] .modal-overlay,
[data-theme="darksoft"] .ring-detail-overlay,
[data-theme="darksoft"] .image-viewer-backdrop,
[data-theme="darksoft"] .overlay,
[data-theme="darksoft"] .drawer-backdrop {
  background: rgba(10, 12, 16, 0.78) !important;
  backdrop-filter: blur(10px) !important;
}

[data-theme="darksoft"] input,
[data-theme="darksoft"] select,
[data-theme="darksoft"] textarea,
[data-theme="darksoft"] button,
[data-theme="darksoft"] .btn,
[data-theme="darksoft"] .mob-more-item,
[data-theme="darksoft"] .nav-item,
[data-theme="darksoft"] .dash-view-btn {
  background: var(--btn-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* body.theme-casio は下で LCD 風に再適用（このブロックより詳細度が高い） */
[data-theme="darksoft"] .btn-primary,
[data-theme="darksoft"] button.primary,
[data-theme="darksoft"] .nav-item.active,
[data-theme="darksoft"] .dash-view-btn.active {
  background: var(--accent) !important;
  color: #041208 !important;
  border-color: transparent !important;
}

html[data-theme="darksoft"] body.theme-casio .btn-primary,
html[data-theme="darksoft"] body.theme-casio button.primary {
  background: transparent !important;
  color: #00ff88 !important;
  border: 1px solid #00ff88 !important;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.2) !important;
}
html[data-theme="darksoft"] body.theme-casio .btn-primary:hover {
  background: rgba(0, 255, 136, 0.1) !important;
}
html[data-theme="darksoft"] body.theme-casio .nav-item.active {
  background: rgba(0, 255, 136, 0.1) !important;
  color: #00ff88 !important;
  border-color: transparent !important;
}
html[data-theme="darksoft"] body.theme-casio .dash-view-btn.active {
  background: rgba(0, 255, 136, 0.1) !important;
  color: #00ff88 !important;
  border-color: transparent !important;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.15) !important;
}

[data-theme="darksoft"] .site-card .site-date-range {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-theme="darksoft"] #page-inventory .inventory-scroll-wrap,
[data-theme="darksoft"] #page-inventory .table-wrap:has(#invTable) {
  background: var(--surface2) !important;
}
[data-theme="darksoft"] #page-inventory .inventory-scroll-wrap::after,
[data-theme="darksoft"] #page-inventory .table-wrap:has(#invTable)::after {
  background: var(--surface3) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
[data-theme="darksoft"] #page-inventory #invTable .inv-item-head,
[data-theme="darksoft"] #page-inventory #invTable .inv-item-cell {
  background: var(--surface) !important;
}
[data-theme="darksoft"] #page-inventory #invTable .inv-item-head {
  background: var(--surface2) !important;
}
[data-theme="darksoft"] #page-inventory .inv-l1-card {
  background: var(--glass) !important;
  border-color: var(--border) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38) !important;
}
[data-theme="darksoft"] #page-inventory .inv-l1-pager {
  background: color-mix(in srgb, var(--surface2) 88%, transparent) !important;
  border-color: var(--border) !important;
}

/* Replace dark media surfaces with light surfaces. */
.image-viewer-box img,
.photo-preview,
.photo-thumb,
.photo-card img {
  background: #f1f3f5 !important;
}
[data-theme="darksoft"] .image-viewer-box img,
[data-theme="darksoft"] .photo-preview,
[data-theme="darksoft"] .photo-thumb,
[data-theme="darksoft"] .photo-card img {
  background: var(--surface3) !important;
}

/* Remove black-heavy shadows/glow remnants. */
* {
  text-shadow: none !important;
}
.card,
.panel,
.modal,
.sidebar,
.topbar,
.mobile-bottom-nav,
.btn,
button,
input,
select,
textarea {
  box-shadow: var(--shadow-sm) !important;
}

/* theme-apple のみ白パネル化（theme-casio は夜=darksoft 専用のためここに含めない） */
body.theme-apple .login-screen,
body.theme-apple .login-screen::before,
body.theme-apple .sidebar,
body.theme-apple .topbar,
body.theme-apple .mobile-bottom-nav,
body.theme-apple .modal,
body.theme-apple .card,
body.theme-apple .stat-card,
body.theme-apple input,
body.theme-apple select,
body.theme-apple textarea {
  background: rgba(255,255,255,0.82) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Preserve print contrast only when printing; screen UI remains non-black. */
@media screen {
  .print-only,
  .print-only * {
    color: var(--text) !important;
    background: #ffffff !important;
    border-color: var(--border) !important;
  }
}

/* ============================================================
   ChatGPT patch: inventory table horizontal slide for many sites
   Scope: inventory screen only. No calculation / Firebase changes.
   ============================================================ */
#page-inventory .inventory-scroll-wrap,
#page-inventory .table-wrap:has(#invTable) {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x pan-y !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.70) !important;
  position: relative !important;
}

#page-inventory .inventory-scroll-wrap::after,
#page-inventory .table-wrap:has(#invTable)::after {
  content: "横にスライド";
  position: sticky;
  right: 10px;
  bottom: 6px;
  float: right;
  margin: 6px 8px 8px 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  pointer-events: none;
  z-index: 12;
}

#page-inventory #invTable {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#page-inventory #invTable th,
#page-inventory #invTable td {
  white-space: nowrap !important;
}

#page-inventory #invTable .inv-item-head,
#page-inventory #invTable .inv-item-cell {
  position: sticky !important;
  left: 0 !important;
  z-index: 20 !important;
  min-width: 132px !important;
  max-width: 168px !important;
  background: rgba(255,255,255,0.94) !important;
  box-shadow: 8px 0 12px rgba(60,64,67,0.06) !important;
}

#page-inventory #invTable .inv-item-head {
  z-index: 30 !important;
  background: rgba(246,247,249,0.96) !important;
}

#page-inventory #invTable .inv-loc-head,
#page-inventory #invTable .inv-stock-cell {
  min-width: 76px !important;
  text-align: center !important;
}

#page-inventory #invTable .inv-total-head,
#page-inventory #invTable .inv-total-cell {
  min-width: 78px !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  #page-inventory .inventory-scroll-wrap,
  #page-inventory .table-wrap:has(#invTable) {
    margin-left: -4px !important;
    margin-right: -4px !important;
    padding-bottom: 2px !important;
  }
  #page-inventory #invTable .inv-item-head,
  #page-inventory #invTable .inv-item-cell {
    min-width: 112px !important;
    max-width: 132px !important;
  }
  #page-inventory #invTable .inv-loc-head,
  #page-inventory #invTable .inv-stock-cell {
    min-width: 70px !important;
  }
}

/* MATERIAL ID PATCH UI */
.material-id-help{font-size:10px;color:var(--text-muted);margin-top:4px;line-height:1.4}
.inv-material-id-badge{display:inline-flex;margin-top:4px;padding:2px 7px;border-radius:999px;background:rgba(79,140,255,.10);border:1px solid rgba(79,140,255,.16);color:var(--text-sub);font-size:10px;font-weight:700}
.measure-material-summary-row small,.measure-stock-row small{display:block;color:var(--text-muted);font-size:9px;font-weight:600;margin-top:2px}
.measure-material-summary-row,.measure-stock-row{border-left:3px solid rgba(79,140,255,.35);padding-left:8px}

/* 材料詳細UI */
.material-detail-fields {
  grid-column: 1 / -1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(235,232,223,0.62);
}
.material-detail-help {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 4px;
}
.material-detail-help.wide {
  grid-column: 1 / -1;
}
.measure-detail-material-field {
  grid-column: 1 / -1;
}
.inv-material-detail-badge {
  display: inline-flex;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(90,138,50,0.10);
  border: 1px solid rgba(90,138,50,0.16);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}
.detail-key-row {
  border-left: 3px solid rgba(76,126,255,0.25) !important;
}

/* === テーマ変数を使用したグローバルオーバーライド ===
   新しい data-theme 属性で切り替え可能 */
html{background:var(--bg)!important;}
html[data-theme="studio"] body,
html[data-theme="warm"] body,
html[data-theme="cool"] body,
html[data-theme="darksoft"] body,
body{
  background:
    radial-gradient(100% 60% at 80% 0%, var(--bg-glow) 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-grad-top) 0%, var(--bg) 45%, var(--bg-grad-bot) 100%) !important;
  background-attachment: fixed !important;
  color:var(--text)!important;
}
@media (max-width: 768px), (hover: none) {
  html[data-theme="studio"] body,
  html[data-theme="warm"] body,
  html[data-theme="cool"] body,
  html[data-theme="darksoft"] body {
    background-attachment: scroll !important;
  }
}

/* 全ボタンを同一トーンに統一（明度差で表現） */
button,.btn,.chip,.tag,.pill,.tab-btn,.menu-item,.status-chip,.round-button,
.v0x-fab,.worker-tab,.filter-chip,.dash-chip,.dashboard-chip,.v9-sch-team,.v9-count,.week-pill,.cal-pill{
  background:var(--btn-bg)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
button:hover,.btn:hover,.chip:hover,.tag:hover,.pill:hover,.tab-btn:hover,.menu-item:hover,
.status-chip:hover,.round-button:hover,.worker-tab:hover,.filter-chip:hover{
  background:var(--btn-hover)!important;
  color:var(--text)!important;
}
.btn-primary,.primary,button.primary,.tab-btn.active,.menu-item.active,.filter-chip.active{
  background:var(--accent)!important;
  color:#fff!important;
  border-color:transparent!important;
}
html[data-theme="neutral"] .btn-primary,
html[data-theme="neutral"] .topbar-actions #newReportBtn.btn-primary{
  background:linear-gradient(135deg,var(--v0-green),var(--v0-green-2))!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(79,143,70,.18)!important;
}
/* nav-itemはテーマ切り替えセレクトに適用しない */
.nav-item{
  background:transparent!important;
}
.nav-item:hover{
  background:var(--btn-hover)!important;
}
.nav-item.active{
  background:var(--btn-active)!important;
}

/* カード・モーダル */
.card,.panel,.modal,.meter-panel,.site-card,.global-summary,.dashboard-card,.dash-section,.v9-panel,.v9-team,
.worker-upgrade-stat,.ring-tile,.measure-total{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
  box-shadow:none!important;
}
input,select,textarea{
  background:var(--surface2)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}

.modal-overlay,.ring-detail-overlay{
  background:rgba(0,0,0,0.3)!important;
  backdrop-filter:blur(8px)!important;
}
[data-theme="darksoft"] .modal-overlay,
[data-theme="darksoft"] .ring-detail-overlay{
  background:rgba(0,0,0,0.5)!important;
}

/* 画像ビューア */
.image-viewer-box img{background:var(--surface2)!important;}

/* テキストシ�������ドウ禁止 */
[class*="tab"], [class*="chip"], [class*="pill"], [class*="btn"], [class*="filter"]{
  text-shadow:none!important;
}

/* ── テーマ選択ボタン（バックアップ画面内） ── */
.theme-select-btn {
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}
.theme-select-btn.active {
  background: var(--btn-active) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-subtle) !important;
}
.theme-select-btn:hover:not(.active) {
  background: var(--btn-hover) !important;
}

/* 2026-04-29: remove sticky section navigation chips shown under each page header */
.v0x-section-jump,.v0x-section-jump.show{display:none!important;visibility:hidden!important;pointer-events:none!important;}

/* 2026-04-29: 在庫表は見やすさ維持＋並び替えだけ復活 */
#page-inventory #invTable .inv-order-head,
#page-inventory #invTable .inv-order-cell{
  display: table-cell !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center !important;
  white-space: nowrap !important;
}
#page-inventory #invTable .inv-order-head{
  font-size: 0 !important;
}
#page-inventory #invTable .inv-order-head::after{
  content: '並';
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
}
#page-inventory #invTable .inv-unit-head,
#page-inventory #invTable .inv-unit-cell{
  display: none !important;
}
#page-inventory #invTable .inv-drag-handle{
  display: none !important;
}
#page-inventory #invTable .inv-order-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 23px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  margin: 0 1px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  touch-action: manipulation !important;
}
@media (max-width: 768px){
  #page-inventory #invTable .inv-order-head,
  #page-inventory #invTable .inv-order-cell{
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }
  #page-inventory #invTable .inv-order-btn{
    width: 22px !important;
    height: 28px !important;
    min-height: 28px !important;
    font-size: 13px !important;
  }
}

/* 2026-04-29 ChatGPT patch: DQ-style inventory drilldown */
#invTable { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; table-layout: auto !important; }
#invTable thead { display: none !important; }
#invTable, #invTable tbody, #invTable tr, #invTable td.inv-dq-shell { display: block !important; }
#invTable td.inv-dq-shell { padding: 0 !important; border: 0 !important; background: transparent !important; }
.inv-dq-panel { padding: 10px; }
.inv-dq-title { font-weight: 900; font-size: 15px; margin: 0 0 10px; color: var(--text-main); }
.inv-dq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.inv-dq-card { min-height: 86px; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--card-bg) 88%, var(--bg-main)); box-shadow: var(--shadow-sm); padding: 9px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-main); }
.inv-dq-card.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 70%, var(--card-bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.inv-dq-icon { font-size: 24px; line-height: 1; }
.inv-dq-label { font-weight: 900; font-size: 12px; line-height: 1.2; text-align: center; }
.inv-dq-count { font-size: 10px; color: var(--text-muted); font-weight: 800; }
.inv-dq-selected { display: flex; align-items: baseline; gap: 8px; padding: 12px 4px 10px; border-top: 1px dashed var(--border); }
.inv-dq-selected span { font-size: 20px; }
.inv-dq-selected b { font-size: 20px; font-weight: 900; }
.inv-dq-selected em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-muted); }
.inv-dq-list { display: flex; flex-direction: column; gap: 8px; }
.inv-dq-row { border: 1px solid var(--border); border-radius: 18px; background: var(--card-bg); overflow: hidden; box-shadow: var(--shadow-sm); }
.inv-dq-row.low { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.inv-dq-main { width: 100%; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(86px, .8fr) minmax(70px, .55fr); align-items: center; gap: 8px; padding: 12px 14px; background: transparent; border: 0; color: var(--text-main); text-align: left; }
.inv-dq-name { font-size: 17px; font-weight: 950; white-space: normal; overflow: visible; text-overflow: unset; word-break: break-word; line-height: 1.28; }
.inv-dq-mat { justify-self: start; border-radius: 999px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--card-bg)); border: 1px solid var(--border); padding: 5px 9px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.inv-dq-total { justify-self: end; font-size: 24px; font-weight: 950; font-family: var(--mono); white-space: nowrap; }
.inv-dq-total small { font-size: 12px; margin-left: 2px; font-family: var(--font-main); color: var(--text-muted); }
.inv-dq-detail { display: none; border-top: 1px solid var(--border); padding: 10px 12px 12px; background: color-mix(in srgb, var(--bg-main) 45%, transparent); }
.inv-dq-row.open .inv-dq-detail { display: block; }
.inv-dq-spec { font-size: 12px; color: var(--text-muted); font-weight: 800; margin-bottom: 8px; }
.inv-dq-locs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.inv-dq-loc { flex: 0 0 auto; min-width: 104px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); padding: 8px 10px; display: flex; justify-content: space-between; gap: 12px; color: var(--text-main); }
.inv-dq-loc.zero { opacity: .48; }
.inv-dq-loc span { font-size: 11px; font-weight: 800; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-dq-loc b { font-family: var(--mono); font-size: 14px; }
.inv-dq-actions { display: flex; gap: 8px; margin-top: 10px; }
.inv-dq-empty { padding: 18px; color: var(--text-muted); font-size: 13px; text-align: center; }
@media (max-width: 520px) {
  .inv-dq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .inv-dq-card { min-height: 78px; border-radius: 16px; }
  .inv-dq-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name total' 'mat total'; min-height: 70px; padding: 12px; }
  .inv-dq-name { grid-area: name; font-size: 16px; }
  .inv-dq-mat { grid-area: mat; font-size: 11px; }
  .inv-dq-total { grid-area: total; font-size: 23px; }
  .inv-dq-selected { align-items: center; }
  .inv-dq-selected em { display: none; }
}

/* ============================================================
   2026-04-29 新しい在庫管理UI
   業務用アプリとして品のあるデザイン
   - 分類 → 品目 → 詳細 の段階的表示
   - 落ち着いた色（ベージュ、グレー系）
   - 余白をしっかり取る
   - 影や装飾は最小限
   - 絵文字禁止、シンプルな線アイコン
   ============================================================ */

#page-inventory {
  padding: 16px 14px 32px;
  background: var(--bg);
}

/* コンテナ */
.inv-container {
  max-width: 560px;
  margin: 0 auto;
}

/* PC最適化：モバイル設計は維持しつつ、横幅と密度だけ上げる */
@media (min-width: 900px){
  #page-inventory{ padding: 14px 18px 38px; }
  #page-inventory .inv-container{ max-width: 1100px; }
  #page-inventory .inv-category-bar{ padding-bottom: 6px; }
  #page-inventory .inv-maker-filter{ padding-bottom: 6px; }

  #page-inventory .inv-l1-card{ height: 100%; }
  #page-inventory .inv-l1-row3,
  #page-inventory .inv-l1-row4{ min-height: 50px; }
}

@media (min-width: 1200px){
  #page-inventory .inv-container{ max-width: 1240px; }
}

/* 分類タブバー（横スクロール） */
.inv-category-bar {
  display: flex;
  gap: 2px;
  padding: 0 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.inv-category-bar::-webkit-scrollbar {
  display: none;
}

/* メーカーフィルター（横スクロール） */
.inv-maker-filter {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0 0 4px;
  border-bottom: none;
  scrollbar-width: thin;
}

/* 在庫L0をコンパクトに（ごちゃつき抑制） */
#page-inventory #invContainer > .ui-layer--l0{
  margin-bottom: 4px;
  padding-bottom: 4px;
}
#page-inventory .inv-container{ padding-top: 2px; }
#page-inventory .inv-category-bar{ padding-bottom: 4px; }
#page-inventory .inv-maker-filter{ padding-bottom: 4px; }
#page-inventory #invFilterBar.mini-filter{
  padding: 4px 0 0;
}
#page-inventory #invFilterBar.inv-filterbar--hidden{
  display:block !important; /* keep edit button reachable */
}
#page-inventory #invFilterBar.inv-filterbar--hidden #invSearchClearBtn,
#page-inventory #invFilterBar.inv-filterbar--hidden #invFilterResetBtn{
  display:none !important;
}
#page-inventory #invFilterBar .inv-search{
  gap: 8px;
}
#page-inventory #invFilterBar .inv-search input{
  flex: 1 1 220px;
}

/* billing buttons moved to backup page */

/* カテゴリ編集ボタンを少し控えめに */
.inv-cat-tab--cfg{
  opacity: .9;
}
.inv-cat-tab--cfg .inv-cat-icon{ font-size: 18px; }
.inv-maker-filter::-webkit-scrollbar {
  height: 2px;
}
.inv-maker-filter .filter-btn {
  flex: 0 0 auto;
}
.inv-filter-count {
  font-size: 10px;
  font-weight: 800;
  opacity: 0.78;
  font-family: var(--mono);
}

/* 分類タブ — ソフトミニマル：角・淡い面・アクセントは控えめに */
.inv-cat-tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 70px;
  padding: 8px 10px 7px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  overflow: visible;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.inv-cat-tab:hover {
  background: var(--btn-hover);
  color: var(--text);
}
.inv-cat-tab.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.inv-cat-tab.empty {
  opacity: 0.5;
}
.inv-cat-tab.empty .inv-cat-count {
  color: var(--text-faint);
}

/* タブアイコン（SVG／カスタム絵文字と共存） — タブ枠はそのまま、3D SVG のみ拡大 */
.inv-cat-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px; /* カスタム絵文字用 */
  line-height: 1;
  overflow: visible;
}
.inv-cat-tab.active .inv-cat-icon {
  color: var(--accent, #1a56db);
}
.inv-cat-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.inv-cat-icon svg.inv-cat-svg3d {
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  filter: drop-shadow(0 0.5px 1.5px rgba(0, 0, 0, 0.17));
}
.inv-cat-tab.active .inv-cat-icon svg {
  color: var(--accent, #1a56db);
  stroke: var(--accent, #1a56db);
}
/* 在庫カテゴリ：フルカラー3D SVG（子要素の stroke は属性で指定） */
.inv-cat-tab.active .inv-cat-icon svg.inv-cat-svg3d {
  color: unset !important;
  stroke: none !important;
  filter: drop-shadow(0 1px 2.5px rgba(0, 0, 0, 0.22));
}

/* タブラベル */
.inv-cat-label {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

/* タブカウント */
.inv-cat-count {
  font-size: 10px;
  font-weight: 850;
  color: var(--text-muted);
  font-family: var(--mono);
}

/* Inventory drilldown modal (item → place) */
#invDrillModal .card{ padding: 14px 14px; }
.inv-drill-meta{
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 12px;
}
.inv-drill-meta .name{
  font-size: 16px;
  font-weight: 950;
  color: var(--text);
  margin-bottom: 4px;
}
.inv-drill-meta .inv-drill-name-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-drill-meta .inv-cat-icon--drill{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.inv-drill-meta .inv-cat-icon--drill svg{
  width: 20px;
  height: 20px;
  display: block;
}
.inv-drill-meta .inv-cat-icon--drill svg.inv-cat-svg3d{
  width: 27px;
  height: 27px;
}
.inv-drill-meta .inv-drill-name-text{
  min-width: 0;
}
.inv-drill-meta .inv-drill-spec{
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin: -2px 0 8px;
}
.inv-drill-meta .inv-drill-sub{
  font-size: 12px;
  font-weight: 800;
}
.inv-drill-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.inv-drill-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
}
.inv-drill-row:hover{ background: var(--btn-hover); }
.inv-drill-row .l{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.inv-drill-row .loc{ font-size: 12px; font-weight: 900; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 260px; }
.inv-drill-row .hint{ font-size: 10px; font-weight: 800; color: var(--text-muted); }
.inv-drill-row .q{ font-family: var(--mono); font-size: 16px; font-weight: 950; color: var(--text); white-space:nowrap; }
.inv-drill-row.zero{ opacity: .55; }

/* 品目リスト */
.inv-item-list {
  display: flex;
  flex-direction: column;
}

/* ── #invFilterBar：ソフトミニマル（ピル） ── */
#page-inventory #invFilterBar.mini-filter {
  margin: 8px -4px 4px;
  padding: 0 0 8px;
  gap: 6px;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-light);
}
#page-inventory #invFilterBar .filter-btn {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 7px 12px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
#page-inventory #invFilterBar .filter-btn.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
#page-inventory #invFilterBar .filter-btn:not(.active):hover {
  background: var(--btn-hover);
  color: var(--text);
}

/* 在庫検索バー */
#page-inventory #invFilterBar .inv-search{
  display:flex;
  gap:8px;
  align-items:center;
  width:100%;
  flex-wrap:wrap;
}
#page-inventory #invFilterBar .inv-search input{
  flex: 1 1 220px;
  min-width: 180px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
  outline: none;
  box-shadow: var(--shadow-sm);
}
#page-inventory #invFilterBar .inv-search input:focus{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-sm);
}

/* 自前フィルター（入力→チップ→❌） */
#page-inventory #invFilterBar .inv-qf{
  width:100%;
  margin-top: 5px;
}
#page-inventory #invFilterBar .inv-qf-row{
  display:flex;
  gap:10px;
  align-items:center;
  width:100%;
}
#page-inventory #invFilterBar .inv-qf-input{
  flex: 1 1 220px;
  min-width: 180px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  color: var(--text);
  outline: none;
  box-shadow: var(--shadow-sm);
}
#page-inventory #invFilterBar .inv-qf-input:focus{
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), var(--shadow-sm);
}
#page-inventory #invFilterBar .inv-qf-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
#page-inventory #invFilterBar .inv-qf-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
#page-inventory #invFilterBar .inv-qf-chip .x{
  opacity: .7;
  font-weight: 900;
}
#page-inventory #invFilterBar .inv-qf-chip:hover{
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

/* デフォルト絞り込み：現在値チップ（×で解除） */
#page-inventory #invFilterBar .inv-active-filters{
  width: 100%;
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
#page-inventory #invFilterBar .inv-af-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
#page-inventory #invFilterBar .inv-af-chip .x{
  opacity: .65;
  font-weight: 950;
}
#page-inventory #invFilterBar .inv-af-chip:hover{
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

/* メーカーライン：同系のピル */
#page-inventory .inv-maker-filter .filter-btn {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 14px;
  margin: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
#page-inventory .inv-maker-filter .filter-btn.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
#page-inventory .inv-maker-filter .filter-btn:not(.active):hover {
  background: var(--btn-hover);
  color: var(--text);
}

/* 品目カード */
.inv-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}
.inv-card.open {
  box-shadow: var(--shadow-sm);
}
.inv-card.low {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}
.inv-card.low .inv-card-qty {
  color: var(--danger);
}

/* カードメイン部分（タップ領域） */
.inv-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: background var(--transition-fast);
}
.inv-card-main:hover {
  background: var(--btn-hover);
}
.inv-card-main:active {
  background: var(--btn-active);
}

/* カード情報部分 */
.inv-card-info {
  flex: 1;
  min-width: 0;
}
.inv-card-primary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.inv-card-maker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-card-maker-missing {
  font-weight: 700;
  opacity: 0.82;
}
.inv-card-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-card-mat {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 3px 8px;
  background: var(--surface2);
  border-radius: 6px;
  margin-top: 6px;
}

/* 数量表示 */
.inv-card-qty {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.inv-card-num {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1;
}
.inv-card-unit {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* 開閉矢印 */
.inv-card-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}
.inv-card-arrow svg {
  width: 100%;
  height: 100%;
}

/* 詳細展開部分 */
.inv-card-detail {
  padding: 0 16px 16px;
  background: var(--surface2);
  border-top: 1px solid var(--border-light);
}

.inv-detail-section {
  padding-top: 12px;
}
.inv-detail-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

/* 場所別在庫リスト */
.inv-loc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inv-loc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 10px;
}
.inv-loc-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-loc-qty {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--mono);
  min-width: 48px;
  text-align: right;
}
.inv-loc-qty.zero {
  color: var(--text-faint);
}
.inv-loc-adj {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.inv-loc-adj:hover {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}

/* 詳細アクション */
.inv-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-light);
}
.inv-detail-actions .btn {
  flex: 1;
  justify-content: center;
}

/* 空状態 */
.inv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.inv-empty-icon {
  color: var(--text-faint);
  margin-bottom: 16px;
}
.inv-empty-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.inv-empty-hint {
  font-size: 13px;
  color: var(--text-muted);
}
.inv-empty-cat {
  padding: 40px 20px;
  text-align: center;
}
.inv-empty-cat .inv-empty-text {
  color: var(--text-muted);
}

/* 操作ボタン */
.inv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.inv-actions .btn {
  flex: 1 1 auto;
  min-width: 120px;
  justify-content: center;
}

/* 移動履歴セクション */
.inv-history-section {
  max-width: 640px;
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.inv-history-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.inv-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.inv-history-head .inv-history-title {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.inv-history-hamburger {
  flex-shrink: 0;
  width: 40px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.inv-hamburger-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
}
.inv-hamburger-bars span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.inv-history-section.inv-history-has-many.inv-history-collapsed .inv-history-list {
  display: none;
}
.inv-history-section.inv-history-has-many.inv-history-expanded .inv-history-hamburger,
.inv-history-section.inv-history-has-many:not(.inv-history-collapsed) .inv-history-hamburger {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
}

/* モバイル調整 */
@media (max-width: 768px) {
  #page-inventory {
    padding: 12px 10px calc(72px + env(safe-area-inset-bottom, 0px));
  }
  
  .inv-cat-tab {
    min-width: 68px;
    padding: 10px 10px 8px;
  }
  .inv-cat-icon {
    width: 22px;
    height: 22px;
    line-height: 1;
    padding-top: 0;
  }
  .inv-cat-icon svg {
    width: 20px;
    height: 20px;
  }
  .inv-cat-icon svg.inv-cat-svg3d {
    width: 27px;
    height: 27px;
  }
  .inv-cat-label {
    font-size: 10px;
  }
  
  .inv-card-main {
    padding: 14px 12px;
  }
  .inv-card-maker {
    font-size: 10px;
  }
  .inv-card-name {
    font-size: 14px;
  }
  .inv-card-num {
    font-size: 24px;
  }
  
  .inv-card-detail {
    padding: 0 12px 12px;
  }
  
  .inv-actions {
    gap: 6px;
  }
  .inv-actions .btn {
    min-width: 100px;
    padding: 10px 12px;
    font-size: 12px;
  }
}

/* 基本情報グリッド */
.inv-info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}
.inv-info-label {
  flex-shrink: 0;
  width: 64px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.inv-info-value {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}

/* メモ表示 */
.inv-note-text {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}

/* ── 在庫 L1 + L4：ソフトミニマル（カード行・わずかな意味色） ── */
.inv-l1-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inv-l1-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-left: 6px solid color-mix(in srgb, var(--m-accent, var(--accent2)) 75%, var(--border));
  background: color-mix(in srgb, var(--m-accent, var(--accent2)) 4%, var(--surface));
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.inv-l1-row:last-child {
  margin-bottom: 0;
}
.inv-l1-row:hover {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  box-shadow: var(--shadow-md);
}
.inv-l1-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}
.inv-l1-row--low {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}
.inv-l1-row--warn {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}
.inv-l1-row--low .inv-l1-place {
  color: color-mix(in srgb, var(--danger) 72%, var(--text));
}
.inv-l1-row--warn .inv-l1-place {
  color: color-mix(in srgb, var(--warning) 70%, var(--text));
}
.inv-l1-body {
  flex: 1;
  min-width: 0;
}
.inv-l1-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.42;
  color: var(--text);
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}
.inv-l1-spacer{
  flex: 1;
  min-width: 8px;
}
.inv-l1-place {
  font-weight: 600;
}
.inv-l1-sep {
  margin: 0 0.35em;
  color: var(--text-muted);
  font-weight: 500;
  opacity: 0.92;
}
.inv-l1-product {
  font-weight: 800;
  color: var(--text);
}
.inv-l1-maker{
  font-weight: 600;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inv-l1-maker-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--m-accent, var(--accent2)) 85%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-accent, var(--accent2)) 55%, var(--border));
  flex: 0 0 auto;
}
.inv-l1-line {
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--text-muted);
}
.inv-l1-qty {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.inv-l1-unit {
  font-weight: 500;
}
.inv-l1-chg {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.inv-l1-chg-na {
  opacity: 0.72;
}
.inv-l1-chg--flat .inv-l1-diff {
  color: var(--text-muted);
}
.inv-l1-chg--up .inv-l1-diff,
.inv-l1-chg--up .inv-l1-dir {
  color: color-mix(in srgb, var(--success) 88%, var(--text));
}
.inv-l1-chg--down .inv-l1-diff,
.inv-l1-chg--down .inv-l1-dir {
  color: color-mix(in srgb, var(--danger) 88%, var(--text));
}
.inv-l1-dir {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.92;
}
.inv-l1-status {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.inv-l1-status--low {
  color: var(--danger);
}
.inv-l1-status--warn {
  color: var(--warning);
}
.inv-l1-status--ok {
  color: var(--text-muted);
}

/* 場所内訳（チップ） */
.inv-l1-locs{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.inv-l1-chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  max-width: 100%;
}
.inv-l1-chip:hover{
  background: color-mix(in srgb, var(--accent) 9%, var(--btn-hover));
}
.inv-l1-chip.is-zero{
  opacity: 0.55;
  background: var(--surface2);
}
.inv-l1-chip-name{
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  max-width: 18em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-l1-chip-qty{
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}
.inv-l1-chip-delta{
  opacity: 0.92;
}
.inv-l1-chip[data-loc-type="site"]{
  background: color-mix(in srgb, var(--info) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--info) 20%, var(--border));
}
.inv-l1-chip[data-loc-type="custom"]{
  background: color-mix(in srgb, var(--accent2) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent2) 18%, var(--border));
}
.inv-l1-more{
  border: 1px dashed color-mix(in srgb, var(--text-muted) 35%, var(--border));
  background: transparent;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.inv-l1-more:hover{
  background: var(--btn-hover);
  color: var(--text);
}

/* 旧テーブル非表示（互換用に残す） */
#page-inventory #invTable {
  display: none !important;
}

/* ============================================================
   在庫ダッシュボード（スマホ向け状態把握UI）
   パワプロ風ゲージ + 業務用落ち着きデザイン
   ============================================================ */

/* ダッシュボードモード切替タブ */
.dash-mode-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  background: var(--surface2);
  border-radius: 12px;
  padding: 4px;
  position: sticky;
  top: 64px; /* under topbar */
  z-index: 8;
}
.dash-mode-tab {
  flex: 1;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.dash-mode-tab:hover {
  color: var(--text);
}
.dash-mode-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Dashboard: L0 combined block（現場選択：縦を詰める） */
#page-dashboard .dash-layer--l0{
  margin-top: 2px;
  margin-bottom: 6px;
  position: static; /* don't mask contents while scrolling */
  top: auto;
  z-index: auto;
  padding: 0 0 4px;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 在庫タブは全体在庫・一覧が主で、進捗用の現場チップ列は冗長のため非表示 */
#page-dashboard.dash-stock-mode .dash-layer--l0{
  display: none !important;
}

#page-dashboard #dashSiteBarSection[hidden]{
  display: none !important;
}

/* 現場5〜10件想定：モードタブ + 設定を1行に（sticky は行単位） */
#page-dashboard .dash-mode-tabs-row{
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 6px;
  position: sticky;
  top: 62px; /* under typical desktop topbar */
  z-index: 8;
  background: color-mix(in srgb, var(--bg) 93%, var(--surface));
  padding-top: 4px;
  padding-bottom: 6px;
  margin-top: -2px;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 6px 16px rgba(56, 48, 42, .07);
}
#page-dashboard .dash-mode-tabs{
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  padding: 3px;
  position: relative;
  top: auto;
  border-radius: 10px;
}
#page-dashboard .dash-settings-compact{
  flex-shrink: 0;
  align-self: stretch;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: none;
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
#page-dashboard .dash-settings-compact:hover{
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 55%, var(--surface2));
}
#page-dashboard .dash-settings-compact:active{
  transform: scale(0.97);
}
@media (max-width: 768px){
  /*
   * 進捗/在庫タブ：sticky + top の組み合わせは WebView によっては無効化され、
   * top が relative 相当のズレになりチップと重なることがあるためモバイルは通常フローに固定する。
   */
  #page-dashboard .dash-mode-tabs-row{
    position: relative !important;
    top: auto !important;
    margin-bottom: 10px;
    margin-top: 0 !important;
    gap: 8px;
    padding-top: 2px !important;
    padding-bottom: 4px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(56, 48, 42, .06) !important;
    background: color-mix(in srgb, var(--bg) 93%, var(--surface)) !important;
  }
  #page-dashboard .dash-layer--l0{
    margin-top: 4px;
  }
}
#page-dashboard .dash-mode-tab{
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 8px;
}

#page-dashboard .dash-site-select-hint{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap:2px 8px;
  line-height: 1.15;
  padding: 4px 8px 3px;
  margin: 0 0 3px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: var(--shadow-sm);
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
#page-dashboard .dash-site-select-hint:active{
  transform: scale(0.99);
}
#page-dashboard .dash-site-select-hint .t{
  font-size: 12px;
  font-weight: 950;
  color: var(--text);
  letter-spacing: .02em;
}
#page-dashboard .dash-site-select-hint .s{
  font-size: 9px;
  font-weight: 850;
  color: var(--text-muted);
}

#page-dashboard #dashSiteBars{
  padding: 3px 5px 4px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
}

/* チップは折り返し（横スクロールより縦を節約） */
#page-dashboard .dash-sitebars{ margin-top: 4px; }
#page-dashboard .dash-sitebar{
  flex-wrap: wrap;
  overflow-x: visible;
  gap: 5px 7px;
  padding: 1px 0 2px;
  margin-top: 4px;
  scroll-snap-type: none;
}
#page-dashboard .dash-sitebar:first-of-type{ margin-top: 2px; }
#page-dashboard .dash-site-chip{
  padding: 4px 9px;
  max-width: min(200px, 44vw);
  gap: 5px;
}
#page-dashboard .dash-site-chip-name{
  font-size: 12px;
  font-weight: 900;
  max-width: min(168px, 38vw);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: unset;
}
#page-dashboard .dash-site-chip-meta{ font-size: 11px; }
#page-dashboard .dash-done-toggle{ margin: 2px 2px 0; }
#page-dashboard .dash-done-toggle .btn{
  padding: 4px 10px;
  font-size: 11px;
  min-height: 34px;
}
#page-dashboard .dash-prio-layout{
  margin-top: 8px;
  gap: 10px;
}
@media (min-width: 720px){
  #page-dashboard .dash-prio-layout{ gap: 12px; }
}

#page-dashboard .dash-header{
  margin-bottom: 10px;
  gap: 10px;
  align-items: flex-start;
}
/* 進捗状況と同段：日付・集計は小さく右寄せ */
#page-dashboard .dash-header-title-row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  width: 100%;
}
#page-dashboard .dash-header-title-row .dash-title{
  font-size: 16px;
  margin-bottom: 0;
  line-height: 1.2;
  flex: 0 0 auto;
}
#page-dashboard #dashSubtitle.dash-subtitle{
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(100%, 70%);
  margin: 0 0 0 auto;
  text-align: right;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 700;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text-muted) 90%, var(--text));
}
#page-dashboard #dashSubtitle.dash-subtitle .dash-sub-stats{
  font-size: 9px;
  font-weight: 650;
}

/* モバイル：1行目＝メニュー・戻る・タイトル・＋日報／2行目＝日付（topbar-right を display:contents でフラット化） */
@media (max-width: 768px) {
  .topbar {
    display: grid !important;
    min-height: unset !important;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 5px;
    justify-content: stretch;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .topbar:has(#topbarBackBtn:not([hidden])) {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }
  .topbar:not(:has(#topbarBackBtn:not([hidden]))) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .topbar .topbar-right {
    display: contents;
  }
  .topbar .hamburger {
    grid-column: 1;
    grid-row: 1;
  }
  .topbar .topbar-back:not([hidden]) {
    grid-column: 2;
    grid-row: 1;
    z-index: 4;
  }
  .topbar .topbar-back[hidden] {
    display: none !important;
    grid-column: auto;
  }
  .topbar:has(#topbarBackBtn:not([hidden])) .topbar-title {
    grid-column: 3;
    grid-row: 1;
  }
  .topbar:not(:has(#topbarBackBtn:not([hidden]))) .topbar-title {
    grid-column: 2;
    grid-row: 1;
  }
  .topbar .topbar-title {
    position: relative;
    z-index: 1;
    min-width: 0;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    max-height: 2.6em;
    align-self: center;
  }
  .topbar:has(#topbarBackBtn:not([hidden])) .topbar-actions {
    grid-column: 4;
    grid-row: 1;
  }
  .topbar:not(:has(#topbarBackBtn:not([hidden]))) .topbar-actions {
    grid-column: 3;
    grid-row: 1;
  }
  .topbar .topbar-actions {
    align-self: center;
    justify-self: end;
    flex-shrink: 0;
    gap: 5px;
  }
  .topbar .topbar-actions #newReportBtn {
    padding-left: 10px;
    padding-right: 10px;
  }
  .topbar #headerDate.date-badge {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
}

/* 進捗モード：セクション見出しの階層（モバイル） */
@media (max-width: 768px) {
  #page-dashboard .dash-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 88%, var(--surface2));
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 40%, transparent);
  }
  #page-dashboard .dash-header-title-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
  }
  #page-dashboard .dash-header-title-row .dash-title {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.2;
  }
  #page-dashboard #dashSubtitle.dash-subtitle {
    flex: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: left;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    color: var(--text-muted);
  }
}

/* トップバー「日報作成」左の日付（#headerDate）— デスクトップは強調／モバイルは2行目全幅で読みやすいサイズ */
.topbar #headerDate.date-badge{
  font-size: clamp(26px, 4.4vw, 56px) !important;
  padding: 10px 20px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.02em !important;
  flex: 0 1 auto;
  min-width: 0;
}
@media (max-width: 768px){
  .topbar #headerDate.date-badge{
    font-size: clamp(20px, 6.5vw, 28px) !important;
    padding: 8px 14px !important;
    letter-spacing: 0.02em !important;
    font-weight: 920 !important;
    line-height: 1.12 !important;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
}
@media (max-width: 380px){
  .topbar #headerDate.date-badge{
    font-size: clamp(18px, 6vw, 24px) !important;
    padding: 7px 12px !important;
  }
}

#page-dashboard #dashFirstInfo{
  margin-top: 10px;
}
@media (max-width: 768px) {
  #page-dashboard .dash-prio-layout {
    margin-top: 6px;
  }
  #page-dashboard #dashFirstInfo {
    margin-top: 6px;
  }
}

/* 在庫ダッシュボードコンテナ */
.stock-dash {
  padding: 0;
}

/* 在庫モード：第一情報 */
.stock-firstinfo{margin:10px 0 12px;border-radius:16px;padding:14px 16px}
.stock-fi-head{margin-bottom:10px}
.stock-fi-title{font-size:17px;font-weight:900;color:var(--text);line-height:1.2}
.stock-fi-sub{font-size:11px;color:var(--text-muted);font-weight:700;margin-top:4px;line-height:1.35}
.stock-fi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stock-fi-grid--stack{margin-top:10px}
.stock-fi-box{border:1px solid var(--border);border-radius:14px;background:var(--surface2);padding:12px}
.stock-fi-k{font-size:11px;font-weight:900;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.stock-fi-v{font-family:var(--mono);font-weight:950;font-size:22px;color:var(--text);letter-spacing:.02em;line-height:1}
.stock-fi-note{font-size:11px;font-weight:800;color:var(--text-muted);margin-top:6px;line-height:1.35}
.stock-fi-chips{display:flex;flex-wrap:wrap;gap:8px}
.stock-fi-chip{display:inline-flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);min-width:140px}
.stock-fi-chip .n{font-size:11px;font-weight:900;color:var(--text)}
.stock-fi-chip .q{font-family:var(--mono);font-weight:950;font-size:13px;color:var(--accent)}
.stock-fi-chip .s{font-size:10px;font-weight:800;color:var(--text-muted)}
.stock-fi-chip.ok{border-color:color-mix(in srgb,var(--success) 28%, var(--border))}
.stock-fi-chip.warn{border-color:color-mix(in srgb,var(--warning) 35%, var(--border))}
.stock-fi-chip.low{border-color:color-mix(in srgb,var(--danger) 35%, var(--border))}
.stock-fi-chip.used{background:color-mix(in srgb, var(--accent) 6%, var(--surface));border-color:color-mix(in srgb, var(--accent) 24%, var(--border))}
.stock-fi-muted{font-size:11px;font-weight:800;color:var(--text-muted)}
.stock-fi-range{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 10px}
.stock-fi-range-btn{border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900;cursor:pointer}
.stock-fi-range-btn.active{background:var(--surface);color:var(--text);border-color:color-mix(in srgb, var(--accent) 28%, var(--border));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent)}
.stock-fi-range-meta{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--text-muted)}
.stock-site-row{width:100%;text-align:left;border:none;background:transparent;padding:0;cursor:pointer}
.stock-site-row.active{outline:2px solid color-mix(in srgb,var(--accent) 28%, transparent);outline-offset:3px;border-radius:12px}
@media (max-width:768px){.stock-fi-grid{grid-template-columns:1fr}}

/* KPIサマリー行 */
.stock-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.stock-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
}
.stock-kpi.alert .stock-kpi-value {
  color: #a65d57; /* くすみレッド */
}
.stock-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
  order: 0;
}
.stock-kpi-value {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1;
  color: var(--text);
  margin-bottom: 0;
  order: 1;
}

/* セクション */
.stock-section {
  margin-bottom: 20px;
}
.stock-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  padding-left: 2px;
}

/* 材料別リスト */
.stock-material-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ダッシュ「在庫」タブ：カテゴリー別の全品目一覧 */
.stock-dash-empty {
  padding: 14px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface2) 65%, transparent);
}
.stock-dash-cat {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface2));
  overflow: hidden;
}
.stock-dash-cat > summary.stock-dash-cat-head {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--surface2) 55%, transparent);
  user-select: none;
}
.stock-dash-cat > summary.stock-dash-cat-head::-webkit-details-marker {
  display: none;
}
.stock-dash-cat[open] > summary.stock-dash-cat-head {
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
}
/* ハンバーガー → 開閉で × */
.stock-dash-cat-burger {
  flex-shrink: 0;
  width: 20px;
  height: 14px;
  position: relative;
  align-self: center;
}
.stock-dash-cat-burger i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--text) 88%, transparent);
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.stock-dash-cat-burger i:nth-child(1) {
  top: 0;
}
.stock-dash-cat-burger i:nth-child(2) {
  top: 6px;
}
.stock-dash-cat-burger i:nth-child(3) {
  top: 12px;
}
.stock-dash-cat[open] .stock-dash-cat-burger i:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.stock-dash-cat[open] .stock-dash-cat-burger i:nth-child(2) {
  opacity: 0;
}
.stock-dash-cat[open] .stock-dash-cat-burger i:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}
.stock-dash-cat-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.stock-dash-cat-label {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--text);
}
.stock-dash-cat-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.stock-dash-cat-count {
  font-size: 11px;
  font-weight: 750;
  color: var(--text-muted);
  white-space: nowrap;
}
.stock-dash-cat-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.stock-dash-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.stock-dash-item:last-child {
  border-bottom: none;
}
.stock-dash-item--low {
  background: color-mix(in srgb, var(--danger) 6%, transparent);
}
.stock-dash-item-main {
  flex: 1;
  min-width: 0;
}
.stock-dash-item-name {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
  word-break: break-word;
}
.stock-dash-item-meta {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 650;
  color: var(--text-muted);
  line-height: 1.35;
}
.stock-dash-item-qty {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.stock-dash-item-qty .ui-num {
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.stock-dash-item-qty small {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
.stock-dash-low-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 850;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}
.stock-dash-site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 8px;
}
.stock-dash-site-row:last-child {
  margin-bottom: 0;
}
.stock-dash-site-name {
  font-size: 13px;
  font-weight: 750;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stock-dash-site-qty {
  flex-shrink: 0;
  text-align: right;
}
.stock-dash-site-qty .ui-num {
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.stock-dash-site-qty small {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 650;
}

/* 材料カード：場所 → 数字 → ゲージ → 状態 → 詳細 */
.stock-mat-card {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.stock-mat-place {
  margin-bottom: 8px;
  font-size: 17px !important;
}
.stock-mat-numrow {
  margin-bottom: 10px;
}
.stock-mat-numrow .ui-num {
  font-size: 26px;
}
.stock-mat-foot {
  margin-top: 8px;
}
.stock-mat-more {
  margin-top: 8px;
  font-size: 10px;
}
.stock-pace-note {
  display: block;
  padding-top: 6px;
  color: var(--text-muted);
}
.stock-mat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.stock-mat-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.stock-mat-qty {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--text);
}
.stock-mat-qty small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}

/* ゲージ（パワプロ風横バー） */
.stock-gauge {
  height: 10px;
  background: var(--surface2);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}
.stock-gauge-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}
/* 状態別の色（くすみトーン） */
.stock-gauge-fill.ok {
  background: #7a9a7a; /* グレー寄りグリーン */
}
.stock-gauge-fill.warn {
  background: #c4a95a; /* くすみイエロー */
}
.stock-gauge-fill.low {
  background: #a65d57; /* くすみレッド */
}

/* ステータスバッジ */
.stock-mat-status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}
.stock-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
}
.stock-status-badge.ok {
  background: #e8f0e8;
  color: #5a7a5a;
}
.stock-status-badge.warn {
  background: #f5f0dc;
  color: #8a7a3a;
}
.stock-status-badge.low {
  background: #f5e5e3;
  color: #8a4a47;
}
.stock-pace {
  color: var(--text-muted);
  font-weight: 500;
}

/* 現場別リスト */
.stock-site-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stock-site-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.stock-site-main {
  flex: 1;
  min-width: 0;
}
.stock-site-place {
  margin-bottom: 6px;
  font-size: 16px !important;
}
.stock-site-numrow .ui-num {
  font-size: 22px;
}
.stock-site-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: normal;
  word-break: break-word;
}
.stock-site-status {
  flex-shrink: 0;
  padding-top: 2px;
}

/* 空状態 */
.stock-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* モバイル調整 */
@media (max-width: 480px) {
  .stock-kpi-row {
    gap: 8px;
  }
  .stock-kpi {
    padding: 14px 8px;
  }
  .stock-kpi-value {
    font-size: 24px;
  }
  .stock-mat-card {
    padding: 12px 14px;
  }
  .stock-mat-qty {
    font-size: 20px;
  }
}

/* ============================================================
   2026-04-29 v0 Hierarchy Skeleton UI 統合リファクタ
   - 絵文字禁止 → SVGアイコン
   - 段階表示: 入口 → 第一情報 → 第二情報 → 第三情報
   - ベージュ/グレー/くすみ色中心
   - 編集ボタンは最下層に
   ============================================================ */

/* --- 共通アイコンシステム --- */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.icon.lg { width: 28px; height: 28px; }
.icon.xl { width: 36px; height: 36px; }
.icon.sm { width: 16px; height: 16px; }
.icon.xs { width: 12px; height: 12px; }

/* アイコンカラーステート */
.icon.primary { color: var(--accent); }
.icon.success { color: var(--success); }
.icon.warning { color: var(--warning); }
.icon.danger { color: var(--danger); }
.icon.muted { color: var(--text-faint); }

/* --- アイコン入口グリッド --- */
.entry-icons {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.entry-icons::-webkit-scrollbar { display: none; }

.entry-icon {
  flex: 0 0 auto;
  min-width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
  scroll-snap-align: start;
  text-align: center;
}
.entry-icon:hover {
  background: var(--btn-hover);
  border-color: var(--text-muted);
}
.entry-icon.active {
  background: var(--accent-subtle);
  border-color: var(--accent);
}
.entry-icon .icon {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
}
.entry-icon.active .icon {
  color: var(--accent);
}
.entry-icon-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.entry-icon-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--mono);
}

/* --- 第一情報パネル（リアルタイム判断用） --- */
.info-primary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}
.info-primary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.info-primary-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.info-primary-title .icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.info-primary-title h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.info-primary-title small {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* --- ステータスバッジ（絵文字なし版） --- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.status-pill .icon {
  width: 14px;
  height: 14px;
}
.status-pill.ok {
  background: rgba(122,154,122,0.12);
  border-color: rgba(122,154,122,0.25);
  color: var(--success);
}
.status-pill.warn {
  background: rgba(196,169,90,0.12);
  border-color: rgba(196,169,90,0.25);
  color: var(--warning);
}
.status-pill.error {
  background: rgba(166,93,87,0.12);
  border-color: rgba(166,93,87,0.25);
  color: var(--danger);
}
.status-pill.info {
  background: rgba(80,128,160,0.12);
  border-color: rgba(80,128,160,0.25);
  color: var(--info);
}

/* --- KPIサマリーグリッド --- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}
@media (max-width: 480px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.kpi-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.kpi-value {
  font-size: 26px;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.kpi-value.success { color: var(--success); }
.kpi-value.warning { color: var(--warning); }
.kpi-value.danger { color: var(--danger); }
.kpi-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- 第二情報（詳細タップ後） --- */
.info-secondary {
  display: none;
  background: var(--surface2);
  border-radius: 12px;
  padding: 14px;
  margin-top: 10px;
}
.info-secondary.open { display: block; }
.info-secondary-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- 第三情報（編集・入力） --- */
.info-tertiary {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.info-tertiary.open { display: block; }
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.action-buttons .btn {
  flex: 1;
  min-width: 100px;
  justify-content: center;
}

/* --- カード型データ表示 --- */
.data-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
.data-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.data-card-header:hover {
  background: var(--btn-hover);
}
.data-card-info {
  flex: 1;
  min-width: 0;
}
.data-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.data-card-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.data-card-value {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--text);
}
.data-card-value small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.data-card-body {
  display: none;
  padding: 0 16px 16px;
  background: var(--surface2);
  border-top: 1px solid var(--border-light);
}
.data-card.open .data-card-body {
  display: block;
}

/* --- ミニバー（進捗表示） --- */
.mini-bar {
  height: 6px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
}
.mini-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
  background: var(--accent);
}
.mini-bar-fill.ok { background: var(--success); }
.mini-bar-fill.warn { background: var(--warning); }
.mini-bar-fill.danger { background: var(--danger); }

/* --- サイドバーナビアイコン化 --- */
.nav-item .icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}
.nav-item.active .icon {
  color: currentColor;
}

/* --- ダッシュボードヘッダー（絵文字なし） --- */
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.dash-header-left { flex: 1; min-width: 0; }
.dash-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.dash-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

/* --- テーブル禁止 → リスト化用 --- */
.list-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all var(--transition-fast);
}
.list-item:hover {
  background: var(--btn-hover);
}
.list-item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  border-radius: 10px;
  flex-shrink: 0;
}
.list-item-icon .icon {
  width: 22px;
  height: 22px;
}
.list-item-content {
  flex: 1;
  min-width: 0;
}
.list-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.list-item-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.list-item-value {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text);
  flex-shrink: 0;
}

/* --- アラートバナー --- */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 12px;
}
.alert-banner.warn {
  background: rgba(196,169,90,0.12);
  border: 1px solid rgba(196,169,90,0.25);
  color: #8a7a3a;
}
.alert-banner.error {
  background: rgba(166,93,87,0.12);
  border: 1px solid rgba(166,93,87,0.25);
  color: #8a4a47;
}
.alert-banner .icon {
  color: currentColor;
}
.alert-banner-text {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

/* 2026-04-29 ChatGPT patch: hierarchy skeleton UI */
.hier-panel,.hier-site-detail{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:0 6px 18px rgba(20,24,30,.04)}
.hier-panel-head,.hier-selected-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.hier-selected-head{justify-content:flex-start}.hier-selected-head .hier-status-pill{margin-left:auto}
.hier-eyebrow{font-size:10px;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase}.hier-title{font-size:16px;font-weight:800;color:var(--text);line-height:1.35}.hier-muted{font-size:11px;color:var(--text-muted);margin-top:2px}
.hier-status-pill{display:inline-flex;align-items:center;justify-content:center;min-height:26px;border:1px solid var(--border);border-radius:999px;padding:0 10px;font-size:11px;font-weight:800;color:var(--text-muted);background:var(--surface2)}.hier-status-pill.ok,.hier-icon-meta.ok{color:var(--success)}.hier-status-pill.mid,.hier-icon-meta.mid{color:var(--accent)}.hier-status-pill.warn,.hier-icon-meta.warn{color:var(--danger)}.hier-status-pill.muted,.hier-icon-meta.muted{color:var(--text-muted)}
.hier-top-icons{display:flex;gap:10px;overflow-x:auto;padding:2px 0 8px;scroll-snap-type:x proximity}.hier-site-icon{flex:0 0 118px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:5px;border:1px solid var(--border);border-radius:16px;background:var(--surface2);padding:12px;color:var(--text);text-align:left}.hier-site-icon.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);background:var(--surface)}
.hier-svg{width:24px;height:24px;display:inline-flex;color:var(--text-muted)}.hier-svg svg{width:100%;height:100%}.hier-svg.large{width:36px;height:36px;color:var(--accent);border:1px solid var(--border);border-radius:12px;padding:7px;background:var(--surface2);box-sizing:border-box}.hier-icon-label{font-size:12px;font-weight:800;line-height:1.25;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hier-icon-meta{font-size:10px;font-weight:800;color:var(--text-muted)}
.hier-summary-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.hier-summary-row>div{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:10px}.hier-summary-row b{display:block;font-size:22px;font-family:var(--mono);line-height:1}.hier-summary-row span{font-size:10px;color:var(--text-muted)}
.hier-level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.hier-level-card{min-height:104px;border:1px solid var(--border);border-radius:16px;background:var(--surface2);padding:12px;text-align:left;color:var(--text);display:flex;flex-direction:column;gap:6px}.hier-level-card.active,.hier-level-card:focus{border-color:var(--accent);background:var(--surface)}.hier-level-card span:not(.hier-svg){font-size:11px;color:var(--text-muted);font-weight:700}.hier-level-card b{font-size:20px;line-height:1.1}.hier-level-card small{font-size:10px;color:var(--text-muted)}
.hier-mini-bar{height:7px;border-radius:999px;background:var(--surface3);overflow:hidden}.hier-mini-bar i{display:block;height:100%;border-radius:999px;background:var(--accent)}.hier-mini-bar.ok i{background:var(--success)}.hier-mini-bar.warn i{background:var(--danger)}.hier-mini-bar.mid i{background:var(--accent)}
.hier-accordion{border-top:1px solid var(--border);padding-top:12px}.hier-acc-panel{display:none}.hier-acc-panel.active{display:block}.hier-section-title{font-size:11px;font-weight:900;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}.hier-breakdown-list{display:flex;flex-direction:column;gap:6px}.hier-row{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);padding:10px 12px;font-size:12px}.hier-row span{color:var(--text-muted)}.hier-row b{font-family:var(--mono);color:var(--text)}.hier-action-row{display:flex;gap:8px;flex-wrap:wrap}.hier-empty{padding:24px;color:var(--text-muted);text-align:center}
@media(max-width:700px){.hier-level-grid{grid-template-columns:1fr}.hier-panel,.hier-site-detail{border-radius:16px;padding:14px}.hier-site-icon{flex-basis:108px}.hier-summary-row{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   Dashboard hierarchy (L0→L1→L2→L3) — 2026-04-29
   ============================================================ */
.dash-muted{font-size:12px;color:var(--text-muted)}

/* L0〜L3 セクション区切り（index.html の .dash-layer--l*） */
.dash-layer--l0 {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}
.dash-layer--l1 {
  margin-bottom: 10px;
}
.dash-breakdown.dash-layer--l2 {
  margin-top: 12px;
}
.dash-breakdown-l3 {
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.dash-breakdown .dash-breakdown-actions.dash-layer--l3 {
  padding-top: 4px;
  margin-top: 4px;
}

/* 配置・在庫: .ui-layer--l*（.dash-layer--l* と余白・罫線を整合） */
.ui-layer {
  display: block;
}
.ui-layer--l0 {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}
.ui-layer--l2 + footer.ui-layer--l3,
.card .ui-layer--l2 + footer.ui-layer--l3 {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
footer.ui-layer--l3 {
  margin-block-start: 0;
  margin-block-end: 0;
}
#page-inventory footer.ui-layer--l3.inv-actions {
  position: sticky;
  top: 64px; /* under topbar */
  z-index: 6;
  margin-top: 4px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 26px rgba(56,48,42,.06);
  /* 親 .inv-container の幅に追随（560px で固定しない＝PCで途切れない） */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  overflow-x: visible;
  row-gap: 8px;
  justify-content: flex-start;
}
#page-inventory footer.inv-actions .btn {
  border-radius: 11px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 8px 12px;
  min-height: 40px;
  justify-content: center;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: min(120px, 100%);
}

@media (max-width: 768px) {
  #page-inventory footer.ui-layer--l3.inv-actions{
    top: 58px; /* mobile topbar */
    padding: 6px 8px;
    border-radius: 14px;
    gap: 6px 8px;
  }
  #page-inventory footer.inv-actions .btn{
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    font-size: 11px;
    padding: 8px 8px;
  }
}

@media (min-width: 980px) {
  #page-inventory footer.inv-actions .btn{
    font-size: 12px;
    flex: 0 1 auto;
    min-width: auto;
    padding-inline: 14px;
  }
}

#page-inventory .inv-history-section {
  max-width: 560px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}
#page-inventory .inv-history-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--text-muted) 94%, transparent);
}

/* UI layer L0 に余白だけ（線はヘアライン） */
#page-inventory #invContainer > .ui-layer--l0 {
  border-bottom: none;
}
#page-inventory section.ui-layer--l2 {
  margin-top: 2px;
}

/* L0 */
.dash-sitebar{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:4px 2px 10px;
  margin-top:10px;
  scroll-snap-type:x proximity;
}
.dash-sitebar::-webkit-scrollbar{height:4px}
.dash-sitebar::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--text-muted) 20%, transparent);border-radius:999px}
.dash-sitebar::-webkit-scrollbar-track{background:transparent}

/* 小さい現場チップ（オフライン軽量描画） */
.dash-site-chip{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  max-width: 260px;
}
.dash-site-chip:hover{background:var(--btn-hover)}
.dash-site-chip.active{
  background:var(--surface);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), var(--shadow-sm);
}
/* ダッシュボード：「すべての現場を見る」チップ */
.dash-site-chip--all {
  opacity: 0.65;
  border-style: dashed;
  font-size: 12px;
}
.dash-site-chip--all:hover,
.dash-site-chip--all:focus {
  opacity: 1;
}
.dash-site-chip-name{
  font-size:14px;
  font-weight:950;
  line-height:1.15;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-width: 240px;
}

/* Dashboard first info: サイト名は目立たせつつ密度と可読性を両立 */
#page-dashboard .dash-fi-place-place{
  font-size: clamp(16px, 4.2vw, 18px);
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: transparent;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 85%, #ffffff 15%),
    #7b5cff,
    #ff4fa8,
    #ffb000
  );
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 1px 0 rgba(255,255,255,.5),
    0 10px 22px rgba(56,48,42,.08);
}
#page-dashboard .dash-fi-place-addr{
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-muted);
}

/* 材料行：必要・不足・在庫（クオーツ調タイル） */
.dash-quartz-kpi-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  min-width:0;
  justify-content:flex-start;
}
.dash-quartz-kpi-group--inline-mat{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:7px;
  width:min(100%, 234px);
  align-items:stretch;
  justify-items:stretch;
}
.dash-quartz-tile{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:6px 10px 7px;
  min-width:58px;
  border-radius:12px;
  background:linear-gradient(145deg,
    color-mix(in srgb, var(--surface) 55%, rgba(255,255,255,.12)) 0%,
    color-mix(in srgb, var(--surface2) 70%, rgba(180,200,255,.06)) 100%);
  border:1px solid color-mix(in srgb, var(--border) 55%, rgba(255,255,255,.22));
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 8px 20px rgba(20,24,40,.07);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.dash-quartz-k{
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--text-muted) 22%,var(--text));
  opacity:.88;
}
.dash-quartz-num{
  display:inline-flex;
  align-items:baseline;
  gap:1px;
  line-height:1.1;
}
.dash-quartz-v{
  font-family:var(--mono);
  font-size:14px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.dash-quartz-u{
  font-size:9px;
  font-weight:750;
  color:var(--text-muted);
  margin-left:1px;
}
.dash-quartz-tile--lack .dash-quartz-v{color:var(--danger)}
.dash-quartz-kpi-group--inline-mat .dash-quartz-tile{
  padding:5px 4px 6px;
  min-width:0;
  width:100%;
  box-sizing:border-box;
  border-radius:10px;
}
.dash-quartz-kpi-group--inline-mat .dash-quartz-k,
.dash-quartz-kpi-group--inline-mat .dash-quartz-num{
  text-align:center;
  justify-content:center;
  width:100%;
}
.dash-quartz-kpi-group--inline-mat .dash-quartz-num{
  justify-content:center;
}
.dash-quartz-kpi-group--inline-mat .dash-quartz-v{font-size:13px;font-weight:920}
.dash-site-chip-meta{
  font-family:var(--mono);
  font-size:12px;
  font-weight:950;
  color:var(--text-muted);
  letter-spacing:.02em;
  white-space:nowrap;
}
.dash-site-chip.active .dash-site-chip-meta{color:var(--accent)}
.dash-sitebars{margin-top:10px}
.dash-sitebars .dash-sitebar{margin-top:0}
.dash-done-toggle{display:flex;justify-content:flex-end;margin:6px 2px 2px}
.dash-siteicon{
  flex:0 0 140px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  text-align:left;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background:var(--surface2);
  color:var(--text);
  opacity:.55;
  transition:opacity var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.dash-siteicon:hover{opacity:.78}
.dash-siteicon.active{
  opacity:1;
  background:var(--surface);
  border-color:var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.dash-siteicon-svg{width:26px;height:26px;display:inline-flex;color:var(--text-muted)}
.dash-siteicon-svg svg{width:100%;height:100%}
.dash-siteicon-name{
  font-size:13px;
  font-weight:800;
  max-width:100%;
  line-height:1.25;
  white-space:normal;
  word-break:break-word;
  overflow:visible;
}

/* L1：第一情報＋日報（横並び／狭い画面は縦） */
.dash-prio-layout{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}
@media (min-width: 720px){
  .dash-prio-layout{
    flex-direction:row;
    align-items:flex-start;
    gap:14px;
  }
  .dash-prio-layout .dash-prio-main{
    flex:1;
    min-width:0;
  }
  .dash-prio-layout .dash-firstinfo{
    flex:1;
    min-width:0;
    margin-top:0;
  }
  .dash-site-history{
    flex:0 0 min(34vw, 300px);
    max-width:320px;
    align-self:stretch;
  }
}
#page-dashboard .dash-prio-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#page-dashboard .dash-prio-main .dash-breakdown.dash-layer--l2{
  margin-top:0;
}
.dash-fi-detail-bar{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border-light);
}
.dash-detail-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  justify-content:flex-start;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  background:var(--surface2);
  font:inherit;
  font-size:13px;
  font-weight:800;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  transition:background .15s,border-color .15s,box-shadow .15s;
  box-sizing:border-box;
}
.dash-detail-toggle:hover{
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  background:var(--surface);
}
.dash-firstinfo--detail-open .dash-detail-toggle{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--border));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent);
}
.dash-hamburger-icon{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:3.5px;
  width:16px;
  flex-shrink:0;
}
.dash-hamburger-icon span{
  display:block;
  height:2px;
  border-radius:2px;
  background:currentColor;
  opacity:.9;
  transition:transform .2s ease,opacity .15s ease;
}
.dash-firstinfo--detail-open .dash-hamburger-icon span:nth-child(1){
  transform:translateY(5.5px) rotate(45deg);
}
.dash-firstinfo--detail-open .dash-hamburger-icon span:nth-child(2){
  opacity:0;
}
.dash-firstinfo--detail-open .dash-hamburger-icon span:nth-child(3){
  transform:translateY(-5.5px) rotate(-45deg);
}
.dash-detail-toggle-label{
  font-weight:800;
}
.dash-firstinfo{margin-top:0}
#page-dashboard #dashFirstInfo.card{padding:11px 12px 10px;border-radius:14px}
#page-dashboard #dashSiteReportHistory.card{
  padding:10px 11px 9px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:104px;
}
.dash-site-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.dash-site-history-title{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.dash-site-history-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:min(52vh, 420px);
  overflow-y: scroll;
  -webkit-overflow-scrolling:touch;
  padding-right:2px;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.dash-site-history-item{
  width:100%;
  text-align:left;
  border:1px solid var(--border-light);
  background:var(--surface2);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font:inherit;
  color:var(--text);
  transition:border-color .15s, background .15s;
}
.dash-site-history-item:hover{
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  background:var(--surface);
}
.dash-site-history-date{
  display:block;
  font-family:var(--mono);
  font-size:calc(12px * 2.5);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--accent);
}
@media (max-width:420px){
  .dash-site-history-date{
    font-size:calc(11px * 2.5);
  }
}
.dash-site-history-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:2px;
  font-size:11px;
  color:var(--text-muted);
}
.dash-site-history-meta .badge{font-size:9px;padding:2px 6px}
.dash-site-history-m{
  display:block;
  margin-top:4px;
  font-size:10px;
  font-weight:750;
  font-family:var(--mono);
  color:var(--text-muted);
}
.dash-site-history-empty{
  font-size:12px;
  color:var(--text-muted);
  font-weight:650;
  padding:10px 4px;
  line-height:1.45;
}

/* ダッシュ第一情報：優先順スタック（現場→内訳数量→必要材料→現在状況） */
.dash-prio-stack{display:flex;flex-direction:column;gap:0}
.dash-prio{padding:14px 2px 16px;border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent)}
.dash-prio:first-child{border-top:0;padding-top:6px}
.dash-prio-h{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0 0 8px}
.dash-prio-koki{margin-top:10px;font-size:12px;line-height:1.5}
.dash-prio-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.dash-prio--ai .ai-consult{margin-top:6px}

/* ひと目カード（優先情報を1ブロックに） */
.dash-glance{display:flex;flex-direction:column;gap:8px}
.dash-glance-head{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:10px}
.dash-glance-main{min-width:0;flex:1}
.dash-glance-badges{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center;margin-top:6px}
.dash-glance-plan{font-size:11px;font-weight:650;line-height:1.35}
.dash-glance-koki{margin-top:6px;font-size:11.5px;line-height:1.45;color:color-mix(in srgb,var(--text-muted) 15%,var(--text))}
/* 予定・実績％と工期を同一行に（狭い幅では折り返し） */
.dash-glance-sched-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 14px;margin-top:6px}
.dash-glance-sched-row .dash-glance-koki{margin-top:0}

/* 第一情報：現場ごとの進捗（内訳スライド準拠・淡色・針ニュートラル／説明文は押さえる） */
.dash-glance-m-lines{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.dash-glance-slide-row{display:flex;flex-direction:column;gap:5px}
.dash-glance-slide-row--overall{gap:8px}
.dash-glance-slide-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0}
.dash-glance-slide-meta-l{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;min-width:0}
.dash-glance-slide-lab{font-size:10.5px;font-weight:700;color:var(--text-muted);letter-spacing:.03em}
.dash-glance-slide-val{font-family:var(--mono);font-size:11px;font-weight:800;color:color-mix(in srgb,var(--text-muted) 38%,var(--text));font-variant-numeric:tabular-nums}
/* 達成率：進捗ブロックで最も目立たせる（計画m対実績の割合） */
.dash-glance-ov-hero{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 14px;width:100%;
  padding:2px 0 6px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent);
}
.dash-glance-ov-hero-k{
  font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--text-muted);white-space:nowrap;
}
.dash-glance-ov-hero-v{
  margin-left:auto;
  font-family:var(--mono);font-size:clamp(40px,13vw,62px);font-weight:950;line-height:1;
  letter-spacing:-0.045em;color:var(--text);font-variant-numeric:tabular-nums;
}
.dash-glance-ov-hero-sym{
  font-size:clamp(17px,4.5vw,26px);font-weight:800;color:var(--text-muted);opacity:.78;margin-left:2px;
}
#page-dashboard #dashFirstInfo .dash-glance-ov-hero-v{
  font-size:clamp(44px,14vw,68px);
  letter-spacing:-0.05em;
}
#page-dashboard #dashFirstInfo .dash-glance-ov-hero-sym{
  font-size:clamp(18px,5vw,28px);
}
#page-dashboard #dashFirstInfo .dash-glance-slide-row .dash-bd-slide{margin-top:0}
#page-dashboard #dashFirstInfo .dash-bd-slide--glance .dash-bd-slide-track-wrap{height:11px}
#page-dashboard #dashFirstInfo .dash-bd-slide--glance .dash-bd-slide-grad--teal{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 24%,var(--surface3)) 0%,
    color-mix(in srgb,#5eead4 20%,var(--surface3)) 100%);
}
#page-dashboard #dashFirstInfo .dash-bd-slide--glance .dash-bd-slide-grad--amber{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--warning) 22%,var(--surface3)) 0%,
    color-mix(in srgb,#fcd34d 18%,var(--surface3)) 100%);
}
#page-dashboard #dashFirstInfo .dash-bd-slide--glance .dash-bd-slide-grad--purple{
  background:linear-gradient(90deg,
    color-mix(in srgb,#8b5cf6 20%,var(--surface3)) 0%,
    color-mix(in srgb,var(--accent) 18%,var(--surface3)) 100%);
}
#page-dashboard #dashFirstInfo .dash-bd-slide--glance .dash-bd-slide-dim{
  background:color-mix(in srgb,var(--surface) 86%,transparent);
}
#page-dashboard #dashFirstInfo .dash-bd-slide--glance .dash-bd-slide-dot{
  width:7px;height:7px;margin-top:-3px;margin-left:-3px;
  border-width:1px;
  border-color:color-mix(in srgb,var(--border) 62%,var(--text-muted));
  opacity:.88;
}
#page-dashboard #dashFirstInfo .dash-bd-slide--glance .dash-bd-slide-axis{
  height:12px;margin-top:1px;font-size:8px;font-weight:650;opacity:.78;
}
.dash-bd-slide-needle--neutral{
  border-width:2px!important;
  border-color:color-mix(in srgb,var(--text-muted) 32%,var(--surface3))!important;
  box-shadow:0 1px 3px rgba(56,48,42,.06);
}
.dash-bd-slide--empty{
  padding:2px 0 4px;
  align-items:flex-start;
}
.dash-glance-m-lines .dash-m-locs{
  font-size:10px;font-weight:650;color:var(--text-muted);margin-top:2px;line-height:1.4;
}

/* 必要材料：種類ごとに細いスライダー（目盛・％、グラデは控えめ） */
.dash-mat-slide-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:7px 9px;
}
.dash-mat-slide{
  flex:0 0 auto;
  width:clamp(108px, 30vw, 140px);
  max-width:100%;
  box-sizing:border-box;
  padding:6px 8px 8px;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
  background:color-mix(in srgb,var(--surface2) 82%,transparent);
  box-shadow:0 4px 12px rgba(56,48,42,.035);
}
.dash-mat-slide--ok{border-color:color-mix(in srgb,var(--success) 22%,var(--border))}
.dash-mat-slide--warn{border-color:color-mix(in srgb,var(--warning) 26%,var(--border))}
.dash-mat-slide--low{border-color:color-mix(in srgb,var(--danger) 24%,var(--border))}
.dash-mat-slide-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
  min-width:0;
}
.dash-mat-slide-name{
  font-size:9px;
  font-weight:850;
  color:var(--text);
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.dash-mat-slide-pct{
  flex-shrink:0;
  font-family:var(--mono);
  font-size:10px;
  font-weight:900;
  color:var(--text);
  letter-spacing:-0.02em;
}
.dash-mat-slide-pct-sym{font-size:8px;font-weight:800;color:var(--text-muted);opacity:.75;margin-left:1px}
.dash-mat-slide--ok .dash-mat-slide-pct{color:color-mix(in srgb,var(--success) 42%,var(--text))}
.dash-mat-slide--warn .dash-mat-slide-pct{color:color-mix(in srgb,var(--warning) 46%,var(--text))}
.dash-mat-slide--low .dash-mat-slide-pct{color:color-mix(in srgb,var(--danger) 46%,var(--text))}
.dash-mat-slide-meta{
  margin-top:3px;
  font-size:8px;
  font-weight:700;
  line-height:1.3;
  color:var(--text-muted);
}
.dash-mat-slide-meta strong{font-family:var(--mono);font-weight:850;color:var(--text);font-size:8px}
.dash-mat-slide-scale{
  display:flex;
  justify-content:space-between;
  margin-top:4px;
  padding:0 1px;
  font-size:7px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--text-muted);
}
.dash-mat-slide-track{
  margin-top:2px;
  height:5px;
  border-radius:999px;
  background:color-mix(in srgb,var(--surface3) 90%,var(--border));
  border:1px solid color-mix(in srgb,var(--border) 75%,transparent);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(40,32,28,.06);
}
.dash-mat-slide-fill{
  height:100%;
  min-width:0;
  border-radius:999px;
  transition:width .35s cubic-bezier(.2,.85,.2,1);
  background:linear-gradient(90deg,
    color-mix(in srgb,#93c5fd 26%,var(--surface3)) 0%,
    color-mix(in srgb,#86efac 24%,var(--surface3)) 34%,
    color-mix(in srgb,#fcd34d 22%,var(--surface3)) 66%,
    color-mix(in srgb,#fbcfe8 26%,var(--surface3)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

.dash-glance-date{font-family:var(--mono);font-weight:800}
.dash-glance-nums{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 4px;margin-top:10px;font-size:12px;color:var(--text-muted);font-weight:650}
.dash-glance-nums strong{font-family:var(--mono);font-weight:900;color:var(--text)}
.dash-glance-dot{opacity:.35;padding:0 2px;user-select:none}

/* 打設・撤去 m：グラデーションライン（ダッシュ第一情報） */
.dash-m-lines{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.dash-m-line-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dash-m-line-meter{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:7px;
  width:100%;
  min-width:0;
}
.dash-m-line-meter .dash-m-track{
  flex:1;
  margin-top:0;
  min-width:0;
}
.dash-m-line-lab{font-size:11px;font-weight:900;letter-spacing:.04em;color:var(--text-muted)}
.dash-m-line--fill .dash-m-line-lab{color:color-mix(in srgb,var(--accent) 55%,var(--text-muted))}
.dash-m-line--remove .dash-m-line-lab{color:color-mix(in srgb,var(--warning) 65%,var(--text-muted))}
.dash-m-line-val{font-size:12px;font-weight:750;color:var(--text-muted)}
.dash-m-line-val strong{font-family:var(--mono);font-weight:950;color:var(--text)}
.dash-m-line-pct{
  flex-shrink:0;
  font-family:var(--mono);
  font-size:11px;
  font-weight:880;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--text-muted) 25%,var(--text));
  min-width:2.6em;
  text-align:right;
}
.dash-m-line--fill .dash-m-line-pct{color:color-mix(in srgb,var(--accent) 40%,var(--text-muted))}
.dash-m-line--remove .dash-m-line-pct{color:color-mix(in srgb,var(--warning) 48%,var(--text-muted))}
.dash-m-track{
  height:9px;
  border-radius:999px;
  margin-top:7px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface3) 88%,var(--border)) 0%,color-mix(in srgb,var(--border) 65%,transparent) 100%);
  border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(40,32,28,.07);
}
.dash-m-fill{
  display:block;
  height:100%;
  border-radius:999px;
  min-width:0;
  transition:width .38s cubic-bezier(.2,.85,.2,1);
}
.dash-m-fill--fill{
  background:linear-gradient(90deg,
    color-mix(in srgb,color-mix(in srgb,var(--accent) 62%,#153818) 62%,var(--surface3)) 0%,
    color-mix(in srgb,color-mix(in srgb,var(--accent) 85%,#7cb342) 62%,var(--surface3)) 48%,
    color-mix(in srgb,color-mix(in srgb,var(--success) 72%,var(--accent)) 62%,var(--surface3)) 100%);
  box-shadow:0 0 8px color-mix(in srgb,var(--accent) 20%,transparent), inset 0 1px 0 rgba(255,255,255,.14);
}
.dash-m-fill--remove{
  background:linear-gradient(90deg,
    color-mix(in srgb,color-mix(in srgb,var(--warning) 58%,#6b2f0a) 60%,var(--surface3)) 0%,
    color-mix(in srgb,color-mix(in srgb,var(--warning) 88%,#fcd34d) 60%,var(--surface3)) 52%,
    color-mix(in srgb,color-mix(in srgb,#fb923c 75%,var(--warning)) 60%,var(--surface3)) 100%);
  box-shadow:0 0 8px color-mix(in srgb,var(--warning) 17%,transparent), inset 0 1px 0 rgba(255,255,255,.14);
}
.dash-m-locs{font-size:11px;color:var(--text-muted);font-weight:650;margin-top:2px}
.dash-m-locs strong{font-family:var(--mono);font-weight:900;color:var(--text)}

/* 人工（実績のみ表示・必要目安との比較は色＋ツールチップ） */
.dash-labor-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 10px;
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--border) 75%,transparent);
  background:color-mix(in srgb,var(--surface2) 88%,transparent);
}
.dash-labor-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.dash-labor-num{
  font-family:var(--mono);
  font-size:clamp(18px,4.2vw,24px);
  font-weight:900;
  line-height:1;
  letter-spacing:-0.03em;
}
.dash-labor-unit{
  font-size:13px;
  font-weight:850;
  color:var(--text-muted);
}
.dash-labor-num--ok{color:color-mix(in srgb,var(--success) 88%,var(--text));}
.dash-labor-num--warn{color:color-mix(in srgb,var(--warning) 92%,var(--text));}
.dash-labor-num--over{color:color-mix(in srgb,var(--danger) 90%,var(--text));}
.dash-labor-num--empty{color:color-mix(in srgb,var(--warning) 55%,var(--text-muted));}
.dash-labor-num--neutral{color:color-mix(in srgb,var(--accent) 75%,var(--text));}
.dash-labor-num--muted{color:var(--text-muted);}
.dash-glance-mat-label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-top:12px}
.dash-glance .dash-fi-mat-mini{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
.dash-glance .dash-fi-mat-mini--fish{
  gap:10px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.dash-glance .dash-fi-mat-mini--fish .dash-fi-mat-fish-card{
  margin:0;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.dash-glance .dash-fi-mat-mini--fish .dash-bd-slide--fish-meter{
  margin-top:6px;
}
.dash-glance-pct{flex-shrink:0;text-align:right;font-family:var(--mono);font-size:clamp(32px,8vw,48px);font-weight:900;line-height:1;letter-spacing:-0.03em;color:var(--text);font-variant-numeric:tabular-nums}
.dash-glance-pct-sym{font-size:clamp(14px,3.2vw,20px);font-weight:800;color:var(--text-muted);opacity:.72;margin-left:1px}
#page-dashboard #dashFirstInfo .dash-glance-pct{
  font-size:clamp(36px,9.5vw,56px);
  font-weight:900;
  letter-spacing:-0.04em;
}
#page-dashboard #dashFirstInfo .dash-glance-pct-sym{
  font-size:clamp(15px,3.8vw,24px);
  font-weight:800;
}
#page-dashboard #dashFirstInfo .dash-glance-head{align-items:flex-start}
/* 達成率：工期の直下・全幅（計画m合計に対する実績）。打設・撤去％は m 行 */
#page-dashboard #dashFirstInfo .dash-glance-pct-stack{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  padding:10px 12px;
  border-radius:12px;
  background:color-mix(in srgb,var(--surface2) 94%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 62%,transparent);
}
#page-dashboard #dashFirstInfo .dash-glance-ov-head{
  width:auto;
  flex-shrink:0;
  display:flex;
  justify-content:flex-start;
}
.dash-glance-ov-label{
  font-size:10px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--text-muted) 92%,var(--text));
}
#page-dashboard #dashFirstInfo .dash-glance-pct.dash-glance-pct--overall{
  margin-top:0;
  flex-shrink:0;
  text-align:right;
}
.dash-glance-pct-empty{
  font-family:var(--mono);
  font-size:clamp(22px,6vw,34px);
  font-weight:850;
  color:var(--text-muted);
  letter-spacing:-0.02em;
}
#page-dashboard #dashFirstInfo .dash-glance-pct-empty{
  font-size:clamp(26px,7vw,40px);
}
.dash-glance-actions{display:flex;flex-wrap:wrap;gap:6px}
.dash-glance-matref{font-size:11px;margin-top:8px;font-weight:650;line-height:1.35}
.dash-glance-ai{border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent);padding-top:12px;margin-top:2px}
.dash-glance-ai-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;color:var(--text-muted);margin-bottom:6px}

/* 詳細ペイン：数量／材料 */
.dash-bd-tabs{display:flex;gap:6px;margin:0 0 12px;padding:4px;border-radius:12px;background:var(--surface2);border:1px solid var(--border-light)}
.dash-bd-tab{flex:1;border:none;background:transparent;color:var(--text-muted);font-size:12px;font-weight:850;padding:8px 10px;border-radius:9px;cursor:pointer;font:inherit}
.dash-bd-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.dash-bd-tab:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}

/* ── 2026-04-30 第一情報：現在／変化を主／材料・異常は補助（長期運用） ── */
.dash-firstinfo-dash203{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(52px,auto) minmax(56px,auto);
  grid-template-rows:auto auto;
  gap:10px 12px;
  align-items:end;
}
.dash-fi-place{grid-column:1;grid-row:1;min-width:0;align-self:start;padding-top:2px}
.dash-fi-place-place{font-size:17px;font-weight:900;color:var(--text);line-height:1.2;letter-spacing:-0.02em}
.dash-fi-place-addr{font-size:11px;color:var(--text-muted);font-weight:600;margin-top:4px;line-height:1.35;max-height:2.7em;overflow:hidden}
.dash-fi-place-st{margin-top:8px}
.dash-fi-pct-hit{
  grid-column:2;grid-row:1;margin:0;border:none;background:transparent;padding:0 4px;
  cursor:pointer;text-align:right;font:inherit;line-height:1;
}
.dash-fi-pct-hit .dash-fi-pct-sym{font-size:clamp(18px,4.2vw,24px);font-weight:850;color:var(--text-muted);margin-left:2px;opacity:.7}
.dash-fi-pct-hit{font-size:clamp(40px,10vw,56px);font-weight:920;letter-spacing:-0.045em;color:var(--text);font-family:var(--mono);}
.dash-fi-del-hit{
  grid-column:3;grid-row:1;margin:0;padding:0 0 6px;border:none;background:transparent;cursor:pointer;
  font:inherit;text-align:right;align-self:end;
}
.dash-fi-del-hit:focus-visible{border-radius:8px}
.dash-fi-delta{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:baseline;gap:5px;line-height:1.25;justify-content:flex-end}
.dash-fi-delta-arr{font-size:15px;font-weight:820;line-height:1}
.dash-fi-delta-txt{font-size:clamp(13px,2.9vw,15px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.dash-fi-delta--muted{color:var(--text-muted)}
.dash-fi-delta--up{color:color-mix(in srgb,var(--accent) 88%,var(--text-muted));}
.dash-fi-delta--down{color:color-mix(in srgb,var(--danger) 75%,var(--text-muted));}
.dash-fi-arr-flat{font-size:13px;color:var(--text-muted)}
.dash-fi-foot{
  grid-column:1/-1;grid-row:2;
  display:flex;flex-wrap:wrap;gap:10px 14px;padding-top:10px;margin-top:2px;border-top:1px solid var(--border-light);
  justify-content:flex-start;align-items:center;
}
.dash-fi-mat{
  display:inline-flex;align-items:baseline;gap:8px;border:none;background:none;cursor:pointer;padding:4px 0;margin:0;
  font:inherit;font-size:12px;font-weight:600;color:var(--text-muted);text-align:left;
}
.dash-fi-mat-word{font-weight:750;font-size:13px}
.dash-fi-mat-label{opacity:.78;font-variant:uppercase;text-transform:none;letter-spacing:0}
.dash-fi-mat--muted .dash-fi-mat-word{color:var(--text-muted);}
.dash-fi-mat--calm .dash-fi-mat-word{color:color-mix(in srgb,var(--success) 45%,var(--text-muted));font-weight:700}
.dash-fi-mat--warn .dash-fi-mat-word{color:color-mix(in srgb,var(--warning) 70%,var(--text));font-weight:800}
.dash-fi-mat--short .dash-fi-mat-word{color:color-mix(in srgb,var(--danger) 70%,var(--text));font-weight:850}
.dash-fi-mat-mini{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dash-fi-mat-mini--fish .dash-fi-mat-fish-card{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.dash-fi-mat-mini.dash-mat-slide-grid{display:flex}
.dash-fi-mat-mini--empty{
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 750;
}
/* ダッシュ・詳細「材料」：トナーは色名＋現場在庫のみ（必要・不足は出さない） */
.dash-fi-mat-toner{
  margin-top:10px;width:100%;flex-basis:100%;
  padding:10px 12px;border-radius:12px;
  background:var(--surface2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 58%,transparent);
}
.dash-fi-mat-toner-head{
  font-size:10px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;
  margin-bottom:8px;color:var(--text-muted);
}
.dash-toner-line{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13px;font-weight:750;padding:6px 0;
}
.dash-toner-line + .dash-toner-line{
  border-top:1px solid color-mix(in srgb,var(--border) 45%,transparent);
  padding-top:8px;margin-top:2px;
}
.dash-toner-color{min-width:0;word-break:break-word;color:var(--text)}
.dash-toner-qty{display:inline-flex;align-items:baseline;gap:4px;flex-shrink:0;font-variant-numeric:tabular-nums}
.dash-toner-num{font-family:var(--mono);font-weight:880}
.dash-toner-unit{font-size:11px;font-weight:700;color:var(--text-muted)}
/* 現場マスタ紐づけの副資材・周辺（種類別カードと重複しない品目のみ） */
.dash-site-extra-line{
  align-items:flex-start;
  flex-wrap:wrap;
  gap:8px 10px;
}
.dash-site-extra-label{flex:1 1 160px;min-width:0}
.dash-site-extra-meta{
  margin-top:3px;font-size:10px;line-height:1.35;color:var(--text-muted);font-weight:650;
}
.dash-site-extra-badge{
  display:inline-block;margin-left:6px;font-size:9px;font-weight:850;letter-spacing:.04em;
  color:var(--text-muted);vertical-align:baseline;
}
.dash-site-extra-actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 10px;
  flex-shrink:0;margin-left:auto;
}
.dash-fi-mat-siteextras .dash-bdmat-stock-actions{margin:0}
/* ダッシュ必要材料：カード行（ピルではなくカードに統一） */
.dash-mat-chip{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px 12px;
  width:100%;
  max-width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:none;
  background:var(--surface2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 58%,transparent);
}
.dash-mat-chip-body{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dash-mat-chip-name{
  font-size:13px;
  font-weight:850;
  color:var(--text);
  line-height:1.25;
  word-break:break-word;
}
.dash-mat-chip-stats{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 6px;
  font-size:11px;
  font-weight:700;
  color:color-mix(in srgb,var(--text-muted) 22%,var(--text));
}
.dash-mat-chip-k{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.04em;
  color:var(--text-muted);
  text-transform:uppercase;
}
.dash-mat-chip-num{
  font-family:var(--mono);
  font-weight:880;
  font-size:12px;
  color:color-mix(in srgb,var(--text) 88%,var(--text-muted));
  font-variant-numeric:tabular-nums;
}
.dash-mat-chip-unit{
  font-size:10px;
  font-weight:800;
  color:var(--text-muted);
  margin-right:2px;
}
.dash-mat-chip-dot{
  opacity:0.45;
  font-weight:700;
  user-select:none;
}
.dash-mat-chip-badge{
  flex-shrink:0;
  align-self:center;
  padding:6px 10px;
  border-radius:9px;
  font-size:11px;
  font-weight:880;
  font-family:var(--mono);
  line-height:1.2;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dash-mat-chip-badge--lack{
  background:color-mix(in srgb,var(--danger) 12%,var(--surface));
  color:color-mix(in srgb,var(--danger) 82%,var(--text));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 26%,transparent);
}
.dash-mat-chip.ok{
  background:color-mix(in srgb,var(--success) 7%,var(--surface2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--success) 22%,var(--border));
}
.dash-mat-chip.warn{
  background:color-mix(in srgb,var(--warning) 9%,var(--surface2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warning) 26%,var(--border));
}
.dash-mat-chip.low{
  background:color-mix(in srgb,var(--danger) 9%,var(--surface2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 24%,var(--border));
}
.dash-fi-anom{
  display:inline-flex;align-items:baseline;gap:4px;border:none;background:none;cursor:pointer;padding:4px 0;margin:0;
  margin-left:auto;font:inherit;font-variant-numeric:tabular-nums;
}
.dash-fi-anom-pre{font-size:11px;color:var(--text-muted);font-weight:650}
.dash-fi-anom-num{font-size:13px;font-weight:800}
.dash-fi-anom-suf{font-size:11px;color:var(--text-muted);font-weight:650}
.dash-fi-anom--quiet .dash-fi-anom-pre,.dash-fi-anom--quiet .dash-fi-anom-suf{color:var(--text-muted);}
.dash-fi-anom--quiet .dash-fi-anom-num{color:color-mix(in srgb,var(--text-muted) 92%,var(--text));font-weight:700}
.dash-fi-anom--stress .dash-fi-anom-pre{color:color-mix(in srgb,var(--danger) 35%,var(--text-muted));font-weight:750}
.dash-fi-anom--stress .dash-fi-anom-num{color:color-mix(in srgb,var(--danger) 92%,var(--text));font-weight:900}

/* 第一情報：ショートカット（内訳/数量） */
.dash-fi-jumps{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.dash-fi-jump{
  border:1px solid var(--border-light);
  background:transparent;
  color:var(--text-muted);
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:none;
}
.dash-fi-jump:hover{background:var(--btn-hover);color:var(--text)}
.dash-fi-jump:active{transform:scale(.98);opacity:.86}

/* 下段の並びを安定させる（左:ショートカット→材料 / 右:状況） */
.dash-fi-jumps{order:0}
.dash-fi-mat{order:1}
.dash-fi-anom{order:2}

/* 俯瞰ステッパー（gadget）：第一情報より弱く、複数桁横並びにしない一行 */
.dash-gizmo-strip{
  margin-top:4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;
  padding:10px 12px;border:1px solid var(--border-light);border-radius:12px;background:var(--surface2);font-size:12px;line-height:1.4;color:var(--text-muted)
}
.dash-gizmo-prefix{font-weight:650;letter-spacing:0}
.dash-gizmo-num{font-family:var(--mono);font-size:22px;font-weight:920;color:var(--text);}
.dash-gizmo-sym{font-size:12px;font-weight:780;margin-left:1px;color:var(--text-muted);opacity:.8}
.dash-gizmo-delta{font-weight:780;font-variant-numeric:tabular-nums;min-width:5ch;text-align:right}
.dash-gizmo-delta .dash-gizmo-arr{margin-right:2px;font-size:.95em;font-weight:900}
.dash-gizmo-delta--muted{color:color-mix(in srgb,var(--text-muted) 96%,var(--text));font-weight:700}
.dash-gizmo-delta--up{color:color-mix(in srgb,var(--accent) 80%,var(--text-muted));font-weight:850}
.dash-gizmo-delta--down{color:color-mix(in srgb,var(--danger) 70%,var(--text-muted));font-weight:850}
.dash-gizmo-tail{font-size:10px;line-height:1.45;opacity:.9;flex:1 1 14em;min-width:12em}
@media (max-width:520px){
  .dash-firstinfo-dash203{grid-template-columns:minmax(0,1fr) auto auto;}
  .dash-fi-foot{padding-top:12px;margin-top:4px;}
}
.dash-firstinfo-tiered{padding-top:2px}
.dash-firstinfo-place-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.dash-firstinfo-place-row .dash-firstinfo-title{flex:1;min-width:0}
.dash-firstinfo-status{flex-shrink:0;padding-top:2px}
.dash-firstinfo-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:12px}
.dash-firstinfo-title{font-size:17px;font-weight:900;color:var(--text);line-height:1.2;letter-spacing:-0.02em}
.dash-firstinfo-sub{font-size:11px;color:var(--text-muted);font-weight:600}
/* L2 第一情報：主数字は進捗のみ／材料はメモ行／異常は有る時だけ */
.dash-firstinfo-l2-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  user-select:none;
}
.dash-firstinfo-l2 .l2-place{
  font-size:19px;
  font-weight:950;
  letter-spacing:-0.03em;
}
.dash-firstinfo-l2 .dash-firstinfo-status .ui-state-badge{
  opacity:0.92;
  font-weight:800;
}
.dash-firstinfo-hero{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  padding:16px 16px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:none;
}
.dash-firstinfo-hero-lab{
  font-size:10px;
  font-weight:800;
  color:var(--text-muted);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:6px;
  opacity:0.75;
}
.dash-firstinfo-hero-num{
  display:flex;
  align-items:baseline;
  gap:4px;
  line-height:1;
}
.l2-hero-num{
  font-size:clamp(44px,11vw,58px);
  font-weight:900;
  letter-spacing:-0.04em;
  color:var(--text);
}
.l2-hero-unit{
  font-size:clamp(18px,4.5vw,22px);
  font-weight:800;
  color:var(--text-muted);
  opacity:0.65;
}
.dash-firstinfo-memo{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border-light);
  background:var(--surface2);
}
.dash-memo--calm{
  border-color:var(--border-light);
  background:var(--surface2);
}
.dash-memo--calm .dash-firstinfo-memo-v{
  color:var(--text-muted);
  font-weight:650;
}
.dash-memo--warn{
  border-color:color-mix(in srgb, var(--warning) 42%, var(--border));
  background:color-mix(in srgb, var(--warning) 7%, var(--surface2));
}
.dash-memo--warn .dash-firstinfo-memo-v{
  color:color-mix(in srgb, var(--warning) 70%, var(--text));
  font-weight:900;
}
.dash-firstinfo-memo-k{
  flex-shrink:0;
  font-size:10px;
  font-weight:800;
  color:var(--text-muted);
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0.7;
}
.dash-firstinfo-memo-v{
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.dash-firstinfo-anomaly{
  padding:0;
  margin:0;
  width:100%;
  border:none;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.dash-firstinfo-anomaly:hover .ui-anomaly-pill{
  filter:brightness(0.98);
}
.dash-firstinfo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  user-select:none;
}
.dash-firstinfo-item{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 12px 10px;
  min-height:88px;
}
.dash-panel-btn{
  width:100%;
  text-align:left;
  cursor:pointer;
  outline:none;
  box-shadow:none;
  appearance:none;
}
.dash-panel-btn:hover{background:var(--surface)}
.dash-panel-btn:focus-visible{
  border-color:var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}
.dash-firstinfo-label{font-size:10px;color:var(--text-muted);font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;opacity:0.85}
.dash-firstinfo-value{font-family:var(--mono);font-size:28px;font-weight:900;line-height:1;color:var(--text)}
.dash-firstinfo-value.ok{color:var(--success)}
.dash-firstinfo-value.warn{color:var(--danger)}
.dash-firstinfo-value.muted{color:var(--text-muted);font-family:var(--mono)}
.dash-firstinfo-unit{font-size:12px;color:var(--text-muted);font-weight:800;margin-left:4px;font-family:var(--sans)}
.dash-firstinfo-cta{margin-top:10px;display:none}

.dash-firstinfo-gauge{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.dash-gauge{
  height:10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface3);
  overflow:hidden;
}
.dash-gauge-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 52%,var(--text-muted)) 0%,
    color-mix(in srgb,var(--accent) 78%,#c5e1a5) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.dash-gauge-fill--fill{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 58%,#153818) 0%,
    color-mix(in srgb,var(--accent) 88%,#9ccc65) 50%,
    color-mix(in srgb,var(--success) 70%,var(--accent)) 100%);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 26%,transparent), inset 0 1px 0 rgba(255,255,255,.2);
}
.dash-gauge-fill--fill.ok{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--success) 48%,#14532d) 0%,
    color-mix(in srgb,var(--success) 88%,#bbf7d0) 100%);
  box-shadow:0 0 14px color-mix(in srgb,var(--success) 30%,transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.dash-gauge-fill--remove{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--warning) 55%,#7c2d12) 0%,
    color-mix(in srgb,var(--warning) 88%,#fde68a) 55%,
    color-mix(in srgb,#fb923c 70%,var(--warning)) 100%);
  box-shadow:0 0 12px color-mix(in srgb,var(--warning) 24%,transparent), inset 0 1px 0 rgba(255,255,255,.2);
}
.dash-gauge-fill--remove.ok{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--success) 38%,var(--warning)) 0%,
    color-mix(in srgb,var(--success) 78%,#fef08a) 100%);
  box-shadow:0 0 14px color-mix(in srgb,var(--success) 22%,transparent), inset 0 1px 0 rgba(255,255,255,.22);
}
.dash-gauge-fill.ok:not(.dash-gauge-fill--fill):not(.dash-gauge-fill--remove){
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--success) 52%,#166534) 0%,
    color-mix(in srgb,var(--success) 82%,#86efac) 100%);
}
.dash-gauge-fill.warn{background:linear-gradient(90deg,color-mix(in srgb,var(--danger) 60%,#450a0a),color-mix(in srgb,var(--danger) 75%,#fca5a5))}
.dash-gauge-fill.muted{background:color-mix(in srgb, var(--text-muted) 45%, transparent)}
.dash-firstinfo-gauge-meta{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dash-firstinfo-gauge-label{font-size:12px;font-weight:900;color:var(--text)}
.dash-firstinfo-gauge-label.ok{color:var(--success)}
.dash-firstinfo-gauge-label.warn{color:var(--danger)}
.dash-firstinfo-gauge-label.muted{color:var(--text-muted)}

/* L2/L3 */
.dash-breakdown{margin-top:12px}
#page-dashboard #dashBreakdown.card{
  border-radius:14px;
  padding:12px 13px 14px;
}
.dash-breakdown .card-title{
  margin-bottom:10px;
}
.dash-breakdown .dash-bd-pane{
  background:transparent;
}
.dash-breakdown .dash-row-item{
  border:1px solid var(--border-light);
  border-radius:14px;
  background:var(--surface);
  padding:10px 12px;
  margin-bottom:8px;
  min-width:0;
  box-sizing:border-box;
}

/* ── 内訳パネル：参照スライド（紫〜シアン系グラデ・目盛ドット・針／控えめカラー） ── */
.dash-bd-slide{
  margin-top:10px;
  padding-top:2px;
}
.dash-bd-slide--compact{
  margin-top:6px;
}
.dash-bd-slide--compact .dash-bd-slide-track-wrap{height:10px;margin-top:2px}
.dash-bd-slide--compact .dash-bd-slide-dot{width:7px;height:7px;margin-top:-3px;margin-left:-3px}
.dash-bd-slide--compact .dash-bd-slide-needle{width:13px;height:13px;margin-top:-6px;margin-left:-6px;border-width:2px}
.dash-bd-slide-badge-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.dash-bd-slide-kpi{
  font-family:var(--mono);
  font-size:20px;
  font-weight:920;
  letter-spacing:-0.03em;
  color:var(--text);
  line-height:1;
}
.dash-bd-slide-kpi-sym{
  font-size:12px;
  font-weight:800;
  color:var(--text-muted);
  opacity:.75;
  margin-left:1px;
}
.dash-bd-slide-pill{
  flex-shrink:0;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
  background:color-mix(in srgb,#fef9c3 42%,var(--surface2));
  color:color-mix(in srgb,var(--text) 88%,#713f12);
}
.dash-bd-slide-pill--ok{
  border-color:color-mix(in srgb,var(--success) 35%,var(--border));
  background:color-mix(in srgb,var(--success) 12%,var(--surface2));
  color:color-mix(in srgb,var(--success) 88%,var(--text));
}
.dash-bd-slide-pill--warn{
  border-color:color-mix(in srgb,var(--warning) 42%,var(--border));
  background:color-mix(in srgb,var(--warning) 14%,var(--surface2));
  color:color-mix(in srgb,var(--warning) 90%,var(--text));
}
.dash-bd-slide-pill--low{
  border-color:color-mix(in srgb,var(--danger) 40%,var(--border));
  background:color-mix(in srgb,var(--danger) 10%,var(--surface2));
  color:color-mix(in srgb,var(--danger) 88%,var(--text));
}
.dash-bd-slide-track-wrap{
  position:relative;
  height:12px;
  margin-top:4px;
  border-radius:999px;
  overflow:visible;
}
.dash-bd-slide-grad{
  position:absolute;
  inset:0;
  border-radius:999px;
  box-shadow:inset 0 1px 2px rgba(40,32,28,.06);
}
/* グラデ強さ ~従来比6割（無彩色寄りミックス） */
.dash-bd-slide-grad--purple{
  background:linear-gradient(90deg,
    color-mix(in srgb,#8b5cf6 36%,var(--surface3)) 0%,
    color-mix(in srgb,#22d3ee 34%,var(--surface3)) 100%);
}
.dash-bd-slide-grad--teal{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 34%,var(--surface3)) 0%,
    color-mix(in srgb,#5eead4 32%,var(--surface3)) 100%);
}
.dash-bd-slide-grad--amber{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--warning) 34%,var(--surface3)) 0%,
    color-mix(in srgb,#fcd34d 30%,var(--surface3)) 100%);
}
.dash-bd-slide-dim{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  border-radius:0 999px 999px 0;
  background:color-mix(in srgb,var(--surface) 82%,rgba(255,250,245,.94));
  pointer-events:none;
  transition:width .36s cubic-bezier(.2,.85,.2,1);
}
.dash-bd-slide-dot{
  position:absolute;
  top:50%;
  left:0;
  width:8px;
  height:8px;
  margin-top:-4px;
  margin-left:-4px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid color-mix(in srgb,var(--accent) 38%,#64748b);
  z-index:1;
  transform:translateX(-50%);
}
.dash-bd-slide-dot--ghost{
  opacity:.42;
  border-style:dashed;
}
.dash-bd-slide-needle{
  position:absolute;
  top:50%;
  left:0;
  width:15px;
  height:15px;
  margin-top:-7px;
  margin-left:-7px;
  border-radius:50%;
  background:var(--surface);
  border:3px solid color-mix(in srgb,#6366f1 55%,var(--surface3));
  box-shadow:0 1px 6px rgba(56,48,42,.12);
  z-index:2;
  transform:translateX(-50%);
  transition:left .36s cubic-bezier(.2,.85,.2,1);
}
.dash-bd-slide-needle--ok{border-color:color-mix(in srgb,var(--success) 72%,var(--surface3))}
.dash-bd-slide-needle--warn{border-color:color-mix(in srgb,var(--warning) 72%,var(--surface3))}
.dash-bd-slide-needle--low{border-color:color-mix(in srgb,var(--danger) 68%,var(--surface3))}
.dash-bd-slide--glance.dash-bd-slide--empty{background:transparent;box-shadow:none}
.dash-bd-slide-axis,
.dash-bd-slide-axis-sub{
  position:relative;
  height:14px;
  margin-top:2px;
  font-size:9px;
  font-weight:800;
  color:var(--text-muted);
}
.dash-bd-slide-axis span,
.dash-bd-slide-axis-sub span{
  position:absolute;
  transform:translateX(-50%);
  white-space:nowrap;
}
.dash-bd-slide-axis-sub{
  height:12px;
  margin-top:0;
  font-size:8px;
  font-weight:700;
  opacity:.88;
}
.dash-breakdown .dash-row-item--bdmat .dash-bd-slide{margin-top:8px}
.dash-breakdown .dash-row-metrics .dash-bd-slide{margin-top:6px;min-width:0;width:100%}
.dash-breakdown .dash-row-head{display:flex;gap:10px;align-items:flex-start}
.dash-breakdown .dash-row-idx{
  font-family:var(--mono);
  font-weight:950;
  font-size:12px;
  color:var(--text-muted);
  flex:0 0 auto;
}
.dash-breakdown .dash-row-name{font-size:13px;font-weight:900;color:var(--text);line-height:1.2}
.dash-breakdown .dash-row-seal{font-size:11px;font-weight:800;color:var(--text-muted);margin-top:2px}
.dash-breakdown .dash-row-seal.dash-row-seal--with-stock-badge{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dash-breakdown .dash-bd-stock-exclude-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  color:color-mix(in srgb,var(--text-muted) 88%,var(--text));
  background:color-mix(in srgb,var(--surface3) 40%,var(--surface2));
  border:1px dashed color-mix(in srgb,var(--border) 80%,transparent);
  line-height:1.25;
  flex:0 0 auto;
}
#page-breakdownlist .perf-chip-stock-excluded{flex-shrink:0}
.dash-breakdown .dash-row-metrics{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.dash-breakdown .dash-row-metric{
  flex:1;
  min-width: 180px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface2);
  padding:10px;
}
.dash-breakdown .dash-row-metric-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px}
.dash-breakdown .dash-row-lab{font-size:11px;font-weight:900;color:var(--text-muted)}
.dash-breakdown .dash-row-pct{font-family:var(--mono);font-weight:950;color:var(--text)}
.dash-breakdown .dash-row-qty{font-family:var(--mono);font-weight:950;font-size:13px;color:var(--text)}
.dash-breakdown .dash-row-m-line{
  height:5px;
  border-radius:999px;
  margin-top:8px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface3) 90%,var(--border)),color-mix(in srgb,var(--border) 55%,transparent));
  border:1px solid color-mix(in srgb,var(--border) 75%,transparent);
  overflow:hidden;
}
.dash-breakdown .dash-row-m-line span{
  display:block;
  height:100%;
  border-radius:999px;
  min-width:0;
  transition:width .32s ease-out;
}
.dash-breakdown .dash-row-m-line--fill span{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 58%,#153818) 0%,
    color-mix(in srgb,var(--accent) 88%,#9ccc65) 50%,
    color-mix(in srgb,var(--success) 68%,var(--accent)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.dash-breakdown .dash-row-m-line--remove span{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--warning) 55%,#6b2f0a) 0%,
    color-mix(in srgb,var(--warning) 88%,#fcd34d) 55%,
    color-mix(in srgb,#fb923c 72%,var(--warning)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.dash-breakdown-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:12px}
.dash-breakdown-head .card-title{flex:1;min-width:0;margin-bottom:0!important}
.dash-bd-hub{margin-bottom:4px}
.dash-hub-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.dash-hub-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:12px 12px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface2);
  cursor:pointer;
  text-align:left;
  color:var(--text);
  transition:background var(--transition-fast),border-color var(--transition-fast);
}
.dash-hub-card:hover{background:var(--btn-hover)}
.dash-hub-card:active{opacity:.92}
.dash-hub-place{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}
.dash-hub-k{font-size:10px;font-weight:900;color:var(--accent);letter-spacing:.1em}
.dash-hub-t{font-size:14px;font-weight:800;line-height:1.2}
/* 数字優先の中段 */
.dash-hub-stat{
  font-size:13px;
  font-weight:900;
  font-family:var(--mono);
  color:var(--text);
  line-height:1.35;
  width:100%;
}
/* 補足（最下段） */
.dash-hub-hint{
  font-size:9px;
  font-weight:600;
  color:var(--text-muted);
  line-height:1.35;
  opacity:0.88;
  width:100%;
}
.dash-hub-p{font-size:11px;color:var(--text-muted);font-weight:600;line-height:1.45}
.dash-bd-stack .dash-sec-nav{margin-top:0;margin-bottom:10px}
.dash-labor-kv-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}
.dash-labor-kv{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);
}
.dash-labor-kv.accent{
  border-color:color-mix(in srgb,var(--accent) 32%,var(--border));
  background:color-mix(in srgb,var(--accent) 6%,var(--surface2));
}
.dash-labor-kv-l{font-size:11px;color:var(--text-muted);font-weight:700;line-height:1.35;max-width:58%}
.dash-labor-kv-v{font-size:20px;font-weight:900;font-family:var(--mono);color:var(--text)}
.dash-labor-kv-u{font-size:11px;font-weight:800;margin-left:3px;opacity:.82}
.dash-labor-kv-note{font-size:10px;line-height:1.5;margin:0 0 12px}
@media(max-width:520px){
  .dash-hub-grid{grid-template-columns:1fr}
}
.dash-row-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.dash-row-item{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:var(--surface2);
}
.dash-row-item--bdmat{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.dash-row-head{display:flex;align-items:flex-start;gap:8px}
.dash-row-idx{font-size:10px;font-weight:900;color:var(--text-muted);font-family:var(--mono);flex-shrink:0;padding-top:2px}
.dash-row-title-block{min-width:0;flex:1}
.dash-row-name{font-size:14px;font-weight:800;line-height:1.3;word-break:break-word;color:var(--text)}
.dash-row-seal{font-size:10px;color:var(--text-muted);margin-top:3px;font-weight:600;opacity:0.88}
.dash-row-seal-mono{font-family:var(--mono);font-weight:850;color:color-mix(in srgb,var(--text) 82%,var(--text-muted))}
.dash-row-seal .dash-row-lack{color:var(--danger);font-weight:900}
/* 材料タブ：必要・不足・在庫（不足は常に判読できるよう強調） */
.dash-row-stats-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:8px 12px;
  margin-top:6px;
}
.dash-row-stats{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  align-items:flex-end;
}
.dash-row-stat{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:3rem;
}
.dash-row-stat-k{
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--text-muted) 92%,var(--text));
}
.dash-row-stat-v{
  font-family:var(--mono);
  font-size:15px;
  font-weight:900;
  line-height:1.15;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.dash-row-stat-v.dash-row-lack{
  color:var(--danger);
  font-weight:950;
}
.dash-row-meters-pill{
  flex-shrink:0;
  font-family:var(--mono);
  font-size:11px;
  font-weight:850;
  padding:5px 9px;
  border-radius:999px;
  background:color-mix(in srgb,var(--surface3) 88%,transparent);
  border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
  color:color-mix(in srgb,var(--text) 90%,var(--text-muted));
}

/* 詳細・材料タブ：必要 / 不足 / 在庫（fish 風グラデレール＋下段ラベル・数字やや大きめ） */
.dash-bdmat-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
/* 材料名＋必要/不足/在庫トリオ（左）｜現場在庫を変更＋mピル（右へ寄せる） */
.dash-bdmat-title-row.dash-bdmat-title-row--quartz{
  align-items:flex-start;
  flex-wrap:wrap;
}
.dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
  align-content:start;
  column-gap:clamp(14px, 3vw, 28px);
  row-gap:10px;
  min-width:0;
  flex:1 1 200px;
}
.dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-row-name{
  grid-column:1;
  min-width:0;
  max-width:none;
  font-weight:880;
}
.dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-row,
.dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-group--inline-mat{
  grid-column:1;
  align-self:start;
  min-width:0;
}
.dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  justify-self:stretch;
}
.dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-group--inline-mat{
  justify-self:start;
  width:min(100%, 234px);
  max-width:234px;
}
@media (max-width:480px){
  .dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band{
    grid-template-columns:1fr;
  }
  .dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-row-name{
    max-width:100%;
  }
  .dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-row{
    grid-column:1;
    justify-self:stretch;
    width:100%;
  }
  .dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-group--inline-mat{
    grid-column:1;
    justify-self:start;
    width:min(100%, 234px);
    max-width:234px;
  }

  /* KPI バッジ：3つを均等に、中央揃えで潰れ回避 */
  .dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-row > .dash-quartz-kpi-group--inline-mat{
    display:flex;
    gap:8px !important;
  }
  .dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-row > .dash-quartz-kpi-group--inline-mat .dash-quartz-tile{
    flex:1 1 0;
    min-width:0;
    text-align:center;
  }
  .dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-row > .dash-quartz-kpi-group--inline-mat .dash-quartz-k,
  .dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-row > .dash-quartz-kpi-group--inline-mat .dash-quartz-v,
  .dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-row > .dash-quartz-kpi-group--inline-mat .dash-quartz-u{
    text-align:center;
  }
  .dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-row > .dash-quartz-kpi-group--inline-mat .dash-quartz-v{
    font-size:18px !important;
  }
}
.dash-bdmat-title-row-trail{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  flex-shrink:0;
  margin-left:auto;
}
.dash-bdmat-title-row-trail .dash-bdmat-stock-actions{margin-top:0}
/* 材料名／mピル と 必要・不足・在庫 を同一バンドに */
.dash-bdmat-title-row--inline-kpi{
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
}
.dash-bdmat-title-leading{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  min-width:0;
  flex:1 1 200px;
}
.dash-bdmat-title-row--inline-kpi > .dash-bdmat-fish-kpis--inline{
  flex:0 1 auto;
  min-width:min(100%,260px);
  justify-content:flex-end;
}
.dash-bdmat-fish-kpis--inline{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px 14px;
  width:auto;
  max-width:100%;
}
.dash-bdmat-fish-kpis--inline .dash-bdmat-fish-kpi{
  flex-direction:row;
  align-items:baseline;
  gap:5px;
  flex:0 0 auto;
}
.dash-bdmat-fish-kpis--inline .dash-bdmat-fish-k{
  font-size:9px;
  letter-spacing:.06em;
  white-space:nowrap;
}
.dash-bdmat-fish-kpis--inline .dash-bdmat-fish-num{
  flex-wrap:nowrap;
  gap:1px 3px;
}
.dash-bdmat-fish-kpis--inline .dash-bdmat-fish-v{
  font-size:clamp(14px,3.7vw,18px);
  font-weight:900;
}
.dash-bdmat-fish-kpis--inline .dash-bdmat-fish-u{
  font-size:10px;
}
.dash-bdmat-title-main{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
}
.dash-bdmat-title-main .dash-row-name{
  flex:1;
  min-width:0;
}
.dash-bdmat-title-main .dash-bdmat-stock-actions{
  margin-top:0;
  flex-shrink:0;
}
.dash-bdmat-stock-link{
  font-size:11px;
  line-height:1.45;
  margin-top:4px;
  color:var(--text-muted);
  font-weight:650;
}
.dash-bdmat-stock-link strong{
  color:var(--text);
  font-weight:880;
}
.dash-bdmat-stock-link-more{
  font-size:10px;
  font-weight:800;
  color:var(--accent);
}
.dash-bdmat-stock-link--missing{
  color:color-mix(in srgb,var(--danger) 62%,var(--text-muted));
  font-weight:780;
}
.dash-fi-mat-fish-card--lack{
  box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 42%,transparent);
  border-radius:14px;
  padding:2px;
  margin:-2px;
}
.dash-row-item--bdmat-lack{
  box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 38%,transparent);
  border-radius:14px;
  padding:2px;
  margin-bottom:10px;
}
.stock-dash-sample-hint{
  font-size:12px;
  line-height:1.5;
  padding:10px 12px;
  margin-bottom:12px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
  background:color-mix(in srgb,var(--accent) 7%,var(--surface2));
  color:var(--text);
}
/* fish.audio 風：上段 KPI（必要・不足・在庫）＋中段グラデレール */
.dash-bdmat-fish-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px 12px;
  width:100%;
  flex:1;
  min-width:0;
}
.dash-bdmat-fish-kpi{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
}
.dash-bdmat-fish-kpi--lack .dash-bdmat-fish-v{color:var(--danger);font-weight:950}
.dash-bdmat-fish-k{
  font-size:9.5px;
  font-weight:850;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.dash-bdmat-fish-num{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:2px 5px;
}
.dash-bdmat-fish-v{
  font-family:var(--mono);
  font-size:clamp(18px,4.8vw,24px);
  font-weight:920;
  line-height:1.05;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}
.dash-bdmat-fish-u{
  font-size:10.5px;
  font-weight:800;
  color:var(--text-muted);
}
.dash-bd-slide--fish-meter{
  margin-top:8px;
  padding:10px 10px 8px;
  border-radius:14px;
  background:color-mix(in srgb,var(--surface3) 55%,var(--surface2));
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 22px rgba(40,32,28,.06);
  border:1px solid color-mix(in srgb,var(--border) 72%,transparent);
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
/* ピル無し時も上段が全幅・中央でまとまるように（space-between だと片寄って見える） */
.dash-bd-slide--fish-meter .dash-bd-slide-badge-row{
  display:block;
  width:100%;
  margin-bottom:8px;
}
.dash-bd-slide--fish-meter .dash-bdmat-fish-kpis{
  width:100%;
  max-width:100%;
  justify-items:center;
}
.dash-bd-slide--fish-meter .dash-bdmat-fish-kpi{
  align-items:center;
  text-align:center;
}
.dash-bd-slide--fish-meter .dash-bdmat-fish-num{
  justify-content:center;
}
.dash-bd-slide--fish-meter .dash-bd-slide-track-wrap{
  height:18px;
  margin-top:6px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--border) 45%,transparent);
  border-radius:999px;
}
/* KPI をタイトル行へ出したとき：上余白のみ詰める（:has 非対応向けに solo クラスでも指定） */
.dash-bd-slide--fish-meter:not(:has(.dash-bd-slide-badge-row)),
.dash-bd-slide--fish-meter.dash-bd-slide--fish-meter-solo{
  padding-top:6px;
  padding-bottom:10px;
}
.dash-bd-slide--fish-meter:not(:has(.dash-bd-slide-badge-row)) .dash-bd-slide-track-wrap,
.dash-bd-slide--fish-meter.dash-bd-slide--fish-meter-solo .dash-bd-slide-track-wrap{
  margin-top:0;
}
.dash-bd-slide--fish-meter .dash-bd-slide-dot{
  width:11px;
  height:11px;
  margin-top:-5px;
  margin-left:-5px;
  border-width:2px;
}
.dash-bd-slide--fish-meter .dash-bd-slide-needle{
  width:20px;
  height:20px;
  margin-top:-10px;
  margin-left:-10px;
  border-width:3px;
  box-shadow:0 2px 8px rgba(56,48,42,.14);
}
.dash-bd-slide-axis-sub--fish{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  column-gap:6px;
  align-items:center;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  position:relative;
  height:auto;
  min-height:15px;
  margin-top:6px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:-0.01em;
  opacity:.92;
}
/* absolute + translateX(-50%) は端ラベルがカード外にはみ出すため、fish はグリッドで収める */
.dash-bd-slide-axis-sub--fish span{
  position:static;
  left:auto !important;
  transform:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dash-bd-slide-axis-sub--fish span:nth-child(1){
  justify-self:start;
  text-align:left;
}
.dash-bd-slide-axis-sub--fish span:nth-child(2){
  justify-self:center;
  text-align:center;
}
.dash-bd-slide-axis-sub--fish span:nth-child(3){
  justify-self:end;
  text-align:right;
}
@media (max-width:380px){
  .dash-bdmat-fish-kpis{gap:8px 8px}
}

.dash-mat-lack{font-family:var(--mono);font-weight:850;color:color-mix(in srgb,var(--text) 70%,var(--text-muted))}
.dash-mat-lack--on{color:color-mix(in srgb,var(--danger) 55%,var(--text));font-weight:900}
.stock-fi-chip .lack{font-family:var(--mono);font-size:11px;font-weight:850;color:var(--text-muted)}
.stock-fi-chip .lack--on{color:var(--danger);font-weight:950}
.dash-row-metrics{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.dash-row-metric{flex:1 1 140px;min-width:min(100%,140px)}
.dash-row-metric-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.dash-row-lab{font-size:10px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;opacity:0.85}
.dash-row-pct{font-size:14px;font-weight:900;font-family:var(--mono)}
.dash-row-pct.ok{color:var(--success)}
.dash-row-pct.warn{color:var(--danger)}
.dash-row-pct.muted{color:var(--text-muted)}
.dash-gauge-row{height:8px;margin-top:0}
.dash-row-qty{font-size:12px;font-weight:800;font-family:var(--mono);margin-top:4px;color:var(--text)}
.dash-row-metric-muted .dash-row-qty{font-weight:700;color:var(--text-muted)}
.dash-breakdown-section{margin-bottom:14px}
.dash-breakdown-title{font-size:11px;font-weight:900;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.dash-breakdown-subtitle{font-size:11px;font-weight:800;color:var(--text);margin:0 0 6px;letter-spacing:.02em}
.dash-breakdown-nested-block{margin-top:0;margin-bottom:0}
.dash-bd-meter-stack{display:flex;flex-direction:column;gap:2px}
.dash-bd-meter{margin-bottom:12px}
.dash-bd-meter:last-child{margin-bottom:0}
.dash-bd-meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.dash-bd-meter-label{font-size:13px;font-weight:800;color:var(--text);max-width:56%}
.dash-bd-meter-meta{font-size:15px;font-weight:900;font-family:var(--mono);color:var(--text);flex-shrink:0}
.dash-bd-meter-sub{font-size:9px;color:var(--text-muted);margin-top:5px;line-height:1.4;opacity:0.9}
.dash-bd-meter-note{font-size:10px;color:var(--text-muted);margin-top:10px;line-height:1.5}
.dash-breakdown .dash-gauge-fill{transition:width .32s ease-out}
.dash-gauge-tight{height:6px;margin:-2px 0 6px;border-radius:999px}
.dash-breakdown-list{display:flex;flex-wrap:wrap;gap:8px}
.dash-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface2);
  font-size:12px;
  font-weight:800;
  color:var(--text);
}
.dash-breakdown-actions{
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-top:12px;
}
.dash-breakdown-actions-title{font-size:11px;font-weight:900;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.dash-breakdown-actions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:720px){
  .dash-siteicon{flex-basis:126px}
  .dash-firstinfo-grid{grid-template-columns:1fr;gap:10px}
  .dash-firstinfo-item{min-height:76px}
  .dash-breakdown-actions-grid{grid-template-columns:1fr;gap:8px}
}

/* ============================================================
   Mini filter (button toggle) — 2026-04-29
   ============================================================ */
.mini-filter{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:8px 2px 2px;
}
.mini-filter .filter-btn{
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text-muted);
  border-radius:999px;
  padding:8px 10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:none;
}
.mini-filter .filter-btn.active{
  color:var(--text);
  background:var(--surface);
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.mini-filter .filter-btn:not(.active):hover{background:var(--surface)}

/* Schedule visualizer -> edit focus */
.schedule-edit-focus{
  outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 4px;
  border-radius: 12px;
  transition: outline-color var(--transition-fast);
}

/* Dash breakdown category nav */
.dash-sec-nav{margin:8px 2px 10px}

/* ============================================================
   Workers hierarchy (L0→L1→L2→L3) — 2026-04-29
   ============================================================ */
.worker-hier{display:flex;flex-direction:column;gap:12px}
.worker-iconbar{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:4px 2px 8px;
  scroll-snap-type:x proximity;
}
.worker-icon{
  flex:0 0 110px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  text-align:left;
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  background:var(--surface2);
  color:var(--text);
  opacity:.58;
  box-shadow:none;
  transition:opacity var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.worker-icon.active{opacity:1;background:var(--surface);border-color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent)}
.worker-avatar{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  background:var(--surface3);
  font-family:var(--mono);
  font-weight:900;
  letter-spacing:.02em;
  color:var(--text);
}
.worker-avatar.ok{color:var(--success)}
.worker-avatar.muted{color:var(--text-muted)}
.worker-icon-name{font-size:12px;font-weight:800;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.worker-first{padding:16px}
.worker-first-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.worker-first-title{font-size:16px;font-weight:900;color:var(--text);line-height:1.2}
.worker-first-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
.worker-status-pill{display:inline-flex;align-items:center;justify-content:center;min-height:26px;border:1px solid var(--border);border-radius:999px;padding:0 10px;font-size:11px;font-weight:900;background:var(--surface2);color:var(--text-muted)}
.worker-status-pill.ok{color:var(--success)}
.worker-status-pill.muted{color:var(--text-muted)}
.worker-first-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.worker-first-panel{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background:var(--surface2);
  text-align:left;
  box-shadow:none;
}
.worker-first-panel:hover{background:var(--surface)}
.worker-first-panel .lab{font-size:11px;font-weight:900;color:var(--text-muted);margin-bottom:8px}
.worker-first-panel .val{font-size:14px;font-weight:900;color:var(--text)}
.worker-first-cta{margin-top:10px;display:flex;justify-content:flex-end}

.worker-detail{padding:16px}
.worker-detail-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.worker-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.worker-kv{border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--surface2)}
.worker-kv .k{font-size:11px;font-weight:900;color:var(--text-muted);margin-bottom:8px}
.worker-kv .v{font-size:13px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.worker-actions{border-top:1px solid var(--border);padding-top:12px;margin-top:12px}
.worker-actions-title{font-size:11px;font-weight:900;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.worker-actions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:720px){
  .worker-first-grid,.worker-detail-grid{grid-template-columns:1fr}
  .worker-icon{flex-basis:104px}
  .worker-actions-grid{grid-template-columns:1fr}
}

/* Worker section nav uses mini-filter style; keep subtle */
.worker-sec-nav{margin:6px 0 10px}
.worker-sec-nav .filter-btn{padding:7px 10px}

/* Worker attendance visualizer */
.worker-att{margin-top:12px}
.worker-att-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.worker-att-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.worker-att-title{font-family:var(--mono);font-weight:900;color:var(--text-muted)}
.worker-att-grid{display:grid;grid-template-columns:repeat(7, minmax(0,1fr));gap:6px;margin-top:10px}
.worker-att-head{font-size:10px;font-weight:900;color:var(--text-muted);text-align:center;padding:6px 0}
.worker-att-head.sun{color:var(--danger)}
.worker-att-head.sat{color:var(--accent3)}
.worker-att-cell{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface2);
  padding:8px;
  min-height:62px;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
  box-shadow:none;
}
.worker-att-cell.other{opacity:.35}
.worker-att-cell.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent)}
.worker-att-cell.has{background:var(--surface);border-color:color-mix(in srgb, var(--accent) 25%, var(--border))}
.worker-att-cell .d{font-family:var(--mono);font-weight:900;color:var(--text)}
.worker-att-cell .s{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.worker-att-day{margin-top:10px}
.worker-att-day-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
@media(max-width:720px){
  .worker-att-kpi{grid-template-columns:1fr;gap:8px}
  .worker-att-cell{min-height:54px}
}

/* ── Soft minimal（ジル調は撤回）：見出し直下の俯瞰バーを紙みたいな面で包む ── */
#page-dashboard #dashGadgetStrip .dash-gizmo-strip {
  background: color-mix(in srgb, var(--surface2) 92%, transparent);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

/* ── Voice assist（補助入力：マイク→プレビュー→手動確定） ── */
.voice-assist-banner {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--surface2) 88%, transparent);
}
.voice-assist-mini {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}
.voice-assist-adjust-teaser {
  margin: 10px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
}
.voice-assist-modal .voice-assist-intro {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.voice-assist-capture {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.voice-assist-status {
  margin-top: 10px;
  font-size: 12px;
  min-height: 1.2em;
}
.voice-assist-mic.btn {
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 800;
  background: linear-gradient(
    142deg,
    color-mix(in srgb, var(--accent) 22%, var(--surface2)),
    color-mix(in srgb, var(--accent3) 12%, var(--surface2))
  );
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
}
.voice-assist-mic.btn.is-recording {
  animation: voiceMicPulse 1.1s ease-in-out infinite;
  border-color: var(--accent);
}
.voice-assist-mic.btn.voice-assist-mic--unsupported {
  opacity: 0.55;
  cursor: help;
}
@keyframes voiceMicPulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
}
.voice-assist-review {
  padding-top: 6px;
}
.voice-assist-review .voice-raw-edit {
  width: 100%;
}
.voice-type-ta {
  width: 100%;
  min-height: 72px;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  font-family: inherit;
}
.voice-prev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .voice-prev-grid {
    grid-template-columns: 1fr;
  }
}
.voice-assist-preview .voice-prev-unit-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.voice-assist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.voice-assist-footnote {
  font-size: 10px;
  margin: 14px 0 0;
  line-height: 1.5;
}
.voice-assist-warnings .voice-warn-msg {
  font-size: 12px;
  color: color-mix(in srgb, var(--danger, #c0392b) 85%, var(--text));
  background: color-mix(in srgb, var(--danger, #e74c3c) 8%, transparent);
  padding: 8px 12px;
  border-radius: 10px;
  margin-top: 8px;
}

/* AIモーダルは汎用 overlay(z200)より手前に */
#aiSupportModal.modal-overlay.open {
  z-index: 12100;
}

/* AI サポート（β）— 右上・低 z-index で奥に。下ナビ・本文と干渉しにくい */
.ai-support-fab {
  position: fixed;
  top: calc(62px + env(safe-area-inset-top, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: auto;
  z-index: 6;
  min-width: 44px;
  height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--accent) 72%, #fff) 0%,
    color-mix(in srgb, var(--accent) 48%, #1a1c20) 100%
  );
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: 0.72;
  transition: opacity 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ai-support-fab:hover,
.ai-support-fab:focus-visible {
  opacity: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.ai-support-fab.is-visible {
  display: inline-flex;
}
.ai-support-fab.is-locked {
  opacity: 0.52;
  filter: grayscale(0.35);
}
.ai-support-fab.is-locked:hover,
.ai-support-fab.is-locked:focus-visible {
  opacity: 0.78;
}
@media (max-width: 768px) {
  .ai-support-fab {
    top: calc(60px + env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
  }
}

/*
 * ダッシュボード：進捗／在庫タブ行と同じ縦位置に AIβ（fixed）があり、タップや視線が競合する。
 * html.page-dashboard-active は showPage で付与。
 */
html.page-dashboard-active .ai-support-fab {
  top: calc(118px + env(safe-area-inset-top, 0px));
}
@media (max-width: 768px) {
  html.page-dashboard-active .ai-support-fab {
    top: calc(110px + env(safe-area-inset-top, 0px));
  }
}

.ai-support-modal {
  width: min(520px, 96vw);
  max-height: min(86vh, 640px);
  display: flex;
  flex-direction: column;
}
.ai-support-modal .modal-head {
  flex-shrink: 0;
}
.ai-support-body {
  padding: 10px 14px 14px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-support-log {
  flex: 1;
  min-height: 72px;
  max-height: min(280px, 42vh);
  overflow: auto;
  font-size: 13px;
  line-height: 1.55;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: var(--surface, #fff);
}
.ai-support-log .ai-msg {
  margin: 0 0 12px;
  word-break: break-word;
}
.ai-support-log .ai-message {
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-support-log .ai-msg--user {
  color: color-mix(in srgb, var(--text) 88%, var(--accent));
}
.ai-support-log .ai-msg--assistant {
  color: var(--text);
}
.ai-support-log .ai-msg-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ai-support-input-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-support-input-row textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-family: inherit;
}
.ai-support-input-meta {
  font-size: 11px;
  text-align: right;
  margin: -4px 0 0;
}
.ai-support-input-meta.ai-support-input-meta--warn {
  color: color-mix(in srgb, var(--danger, #c0392b) 80%, var(--text-muted));
  font-weight: 600;
}
.ai-support-legal-details {
  font-size: 11px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 10px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--surface-2, #f4f2ee) 88%, transparent);
  flex-shrink: 0;
}
.ai-support-legal-summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  font-size: 11px;
}
.ai-support-legal-scroll {
  margin-top: 8px;
  max-height: min(160px, 28vh);
  overflow: auto;
  padding-right: 4px;
}
.ai-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}
.ai-support-status {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: auto;
}
.ai-support-lang{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
}
.ai-support-langpair{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.ai-support-lang--secondary{
  opacity: 0.92;
}
.ai-support-lock {
  text-align: center;
  padding: 18px 8px 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════
   DESIGN PASS 2026-04-30 — 見た目のみ（レイアウト・DOMは不変更）
   コントラスト／タイポ階層／単色アクセント／テープ質感の進捗／最小影
   ════════════════════════════════════════════════════════════ */

:root {
  --ui-tape-stripes: repeating-linear-gradient(
    -108deg,
    transparent 0 6px,
    rgba(255,255,255,.065) 6px 7px,
    transparent 7px 14px,
    rgba(0,0,0,.028) 14px 15px,
    transparent 15px 22px
  );
  --ui-tape-fill-standard: var(--ui-tape-stripes),
    linear-gradient(
      178deg,
      color-mix(in srgb, var(--accent) 74%, #ffffff) 0%,
      color-mix(in srgb, var(--accent) 62%, #2a2c30) 100%
    );
  --ui-tape-fill-warn: var(--ui-tape-stripes),
    linear-gradient(
      178deg,
      color-mix(in srgb, var(--warning) 55%, var(--surface)) 0%,
      color-mix(in srgb, var(--warning) 42%, #353330) 100%
    );
}

body {
  letter-spacing: 0.01em;
}

/* ── 建物＝区画だけ（薄い輪郭・主張弱） ── */
.sidebar,
.card,
.site-card,
.kpi-card {
  box-shadow: var(--shadow-sm);
}
.sidebar {
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
}
.main {
  background: transparent;
}
.card,
.site-card,
.stat-card,
.global-summary {
  border-color: var(--border-light);
}

/* 装飾アイコン（◌）を抑止 */
.card-title::before {
  content: none !important;
  display: none !important;
}

/* ── タイポ階層：ラベル小・本文中・数字大 ── */
label.fl {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  color: var(--text-muted) !important;
}

.kpi-card .kpi-num {
  font-size: clamp(42px, 9vw, 58px);
  font-weight: 950;
}
.big-progress-num,
.card-progress-num,
.ring-pct-hero .ui-num,
.stock-kpi-value,
.perf-meter-pct {
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 950;
  letter-spacing: 0.04em !important;
  text-shadow: none !important;
  color: var(--text);
}
.kpi-card:not(.kpi-danger):not(.kpi-warn) .kpi-num {
  color: var(--accent);
}
.kpi-card.kpi-danger .kpi-num {
  color: var(--danger) !important;
}
.kpi-card.kpi-warn .kpi-num {
  color: color-mix(in srgb, var(--warning) 88%, var(--text)) !important;
}
.kpi-head .kpi-icon {
  font-size: 16px !important;
  opacity: 0.75;
}

.ui-num,
.inv-l1-qty,
.inv-number,
.move-history-qty,
.worker-first-panel .val,
.worker-att-cell .d {
  text-shadow: none !important;
}

/* KPI ヘッダ帯はアクセント1色ベース／赤は danger のみ */
.kpi-card:not(.kpi-danger):not(.kpi-warn)::before {
  background: var(--accent) !important;
}
.kpi-card.kpi-danger::before {
  background: var(--danger) !important;
}
.kpi-card.kpi-warn::before {
  background: color-mix(in srgb, var(--warning) 75%, var(--surface3)) !important;
}

/* ── テープ風：進捗バー類（グラデ細＋細ストライプ） ── */
.progress-fill,
.big-bar-fill,
.material-bar-fill,
#page-sites .site-progress-fill,
.kpi-progress-fill,
.perf-gauge-fill:not(.warn):not(.ok),
.rd-progress-row .progress-fill {
  border-radius: 999px !important;
  box-shadow: none !important;
  background: var(--ui-tape-fill-standard) !important;
  border: none !important;
}
.progress-fill.warn,
.perf-gauge-fill.warn {
  background: var(--ui-tape-fill-warn) !important;
}
.perf-gauge-fill.ok,
.big-bar-fill.ok {
  background: var(--ui-tape-fill-standard) !important;
  filter: saturate(0.92);
}

#page-sites .site-progress-fill {
  min-height: 100%;
}

/* 旧ZIP互換ブロックが残す単色ベース bar を再上書き */
.progress-bar,
.big-bar,
.material-bar {
  background: color-mix(in srgb, var(--surface3) 88%, var(--border)) !important;
  border: 1px solid var(--border-light) !important;
}

/* ── メイン操作：視認のみ一段（アイコン寸法を揃える） ── */
.btn-primary {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
.btn-primary:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}
.btn-primary .icon svg,
.btn-primary svg {
  width: 17px !important;
  height: 17px !important;
}

.nav-item .icon,
.sidebar .icon {
  width: 22px !important;
  height: 22px !important;
}
.nav-item .icon svg,
.sidebar .icon svg {
  width: 18px !important;
  height: 18px !important;
  opacity: 0.92;
}

/* サイトカード：浮き過ぎ排除 */
.site-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* ── 土日ヘッダは「状態」ではないので danger 色をやめる ── */
.worker-att-head.sun,
.worker-att-head.sat {
  color: color-mix(in srgb, var(--text-muted) 78%, var(--accent)) !important;
}

/* ── 作業員プール：班ドラッグ用。見た目だけ優先度を下げ（DOM はそのまま） ── */
.v9-panel-title {
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
}
.v9-hint {
  opacity: 0.88 !important;
  line-height: 1.42 !important;
}
.v9-worker-card {
  box-shadow: none !important;
  background: var(--surface2) !important;
  border-radius: var(--radius-md) !important;
}

/* ── 出面（作業員別）：インラインstyleを見た目だけ整える ── */
#workerAttendanceList{
  --att-pad: 10px;
}

/* 上部集計行（「集計人数」「期間合計」） */
#workerAttendanceList > div:first-child{
  padding: 8px 10px !important;
  margin: 0 0 10px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--surface2) 88%, var(--surface)) !important;
}
#workerAttendanceList > div:first-child > div{
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}
#workerAttendanceList > div:first-child .ui-num{
  font-size: 18px !important;
  font-weight: 950 !important;
  color: var(--accent) !important;
  letter-spacing: 0.04em !important;
}

/* 各作業員カード */
#workerAttendanceList [data-att-worker]{
  padding: 12px 12px !important;
  border-radius: 16px !important;
}
#workerAttendanceList [data-att-worker] > div:first-child > div:first-child{
  font-size: 14px !important;
  font-weight: 950 !important;
  color: var(--text) !important;
}
#workerAttendanceList [data-att-worker] > div:first-child > div:nth-child(2){
  font-size: 11px !important;
  color: var(--text-muted) !important;
  font-weight: 650 !important;
}
#workerAttendanceList [data-att-worker] .ui-num{
  font-size: 28px !important;
  font-weight: 950 !important;
  color: var(--accent) !important;
  letter-spacing: 0.04em !important;
}
#workerAttendanceList [data-att-worker] .ui-unit{
  font-size: 12px !important;
  color: var(--text-muted) !important;
  font-weight: 750 !important;
}

/* 詳細（展開部） */
#workerAttendanceList [data-att-detail]{
  padding: 0 12px 12px !important;
}
#workerAttendanceList [data-att-detail] *{
  -webkit-tap-highlight-color: transparent;
}

/* スマホ：余白過多を抑えて視線を流す */
@media (max-width: 480px){
  #workerAttendanceList > div:first-child{ padding: 8px 10px !important; }
  #workerAttendanceList [data-att-worker]{ padding: 11px 12px !important; }
  #workerAttendanceList [data-att-worker] .ui-num{ font-size: 30px !important; }
}

/* ============================================================
   Soft glass UI (reference-like) + masking-tape bands
   - Layout/structure unchanged (CSS only)
   - Subtle, calm: background blobs are very low opacity
   ============================================================ */
:root{
  /* calm palette (no pure white/black) */
  /* more "reference-like": brighter glass + clearer layers */
  --glass-bg: rgba(255,255,255,.52);
  --glass-bg-strong: rgba(255,255,255,.60);
  --glass-border: rgba(255,255,255,.34);
  --glass-shadow: 0 18px 46px rgba(0,0,0,.10), 0 6px 20px rgba(0,0,0,.06);
  --glass-blur: blur(18px);
  --tape-paper: rgba(245,241,232,.92);
  --tape-ink: color-mix(in srgb, var(--accent) 70%, #9fb7aa);
  --tape-edge: rgba(0,0,0,.14);
}

/* Background: very soft blurred blobs */
body{
  background:
    /* colorful soft blobs (visible) */
    radial-gradient(220px 220px at 18% 22%, rgba(126,176,222,.18), transparent 62%),
    radial-gradient(260px 260px at 70% 26%, rgba(255,177,132,.14), transparent 64%),
    radial-gradient(320px 320px at 52% 78%, rgba(90,138,50,.14), transparent 66%),
    radial-gradient(260px 260px at 36% 54%, rgba(209,148,196,.12), transparent 66%),
    linear-gradient(180deg, #fbf8f0 0%, var(--bg) 52%, #f4efe5 100%) !important;
}
body::before{
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  background:
    radial-gradient(320px 320px at 22% 30%, rgba(126,176,222,.14), transparent 68%),
    radial-gradient(420px 420px at 74% 20%, rgba(201,214,184,.12), transparent 70%),
    radial-gradient(420px 420px at 50% 82%, rgba(216,200,154,.10), transparent 72%),
    radial-gradient(340px 340px at 62% 56%, rgba(209,148,196,.10), transparent 72%);
  filter: blur(26px);
  opacity:.92;
  z-index:-1;
  animation: airDrift 14s ease-in-out infinite;
}

/* very soft particles (visible but not noisy) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.26) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 62%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 24%, rgba(255,255,255,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 74%, rgba(0,0,0,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 40%, rgba(255,255,255,.20) 0 1px, transparent 2px);
  background-size: 380px 380px;
  mix-blend-mode: soft-light;
  opacity:.55;
  filter: blur(.2px);
  animation: particleDrift 22s linear infinite;
  z-index:-1;
}

@keyframes airDrift{
  0%,100%{ transform: translate3d(0,0,0) scale(1.00); }
  50%{ transform: translate3d(-10px, 8px, 0) scale(1.03); }
}
@keyframes particleDrift{
  from{ background-position: 0 0; }
  to{ background-position: 380px 0; }
}

/* Glass surfaces */
.topbar,
.card,
.stat-card,
.global-summary,
.modal,
.board-side,
.board-post-form,
.board-post,
.bd-card,
.photo-card,
.week-cell,
.cal-cell{
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.card:hover,
.stat-card:hover,
.site-card:hover{
  box-shadow: 0 14px 34px rgba(53,47,40,.07), 0 2px 10px rgba(53,47,40,.05) !important;
}

/* Masking tape band: under topbar + gentle wobble */
.topbar{ position: sticky; }
.topbar::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:-8px;
  height:14px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(245,238,223,.88)),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.06) 0 10px,
      rgba(255,255,255,.00) 10px 18px);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  opacity:.76;
  transform-origin: 50% 50%;
  animation: tapeWobble 6.2s ease-in-out infinite;
  background-size: auto, 220px 100%;
  background-position: 0 0, 0 0;
  pointer-events:none;
}
@keyframes tapeWobble{
  0%,100%{ transform: translateY(0) rotate(-.18deg); filter: saturate(1.02); }
  50%{ transform: translateY(1px) rotate(.22deg); filter: saturate(1.06); }
}

/* Progress bars: tape texture + slow drift */
.big-bar,
.progress-bar,
#page-sites .site-progress-bar,
.kpi-progress-bar,
.perf-gauge{
  background: color-mix(in srgb, var(--tape-paper) 68%, var(--surface3)) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(56,48,42,.12) !important;
  overflow: hidden;
}
.big-bar-fill,
.progress-fill,
#page-sites .site-progress-fill,
.kpi-progress-fill,
.perf-gauge-fill{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tape-ink) 78%, #ffffff) 0%, var(--tape-ink) 100%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.16) 0 9px,
      rgba(0,0,0,.05) 9px 18px);
  background-size: auto, 180px 100%;
  background-position: 0 0, 0 0;
  border-radius: 999px !important;
  animation: tapeDrift 7.8s linear infinite;
  position: relative;
}
.big-bar-fill::before,
.progress-fill::before,
#page-sites .site-progress-fill::before,
.kpi-progress-fill::before,
.perf-gauge-fill::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.00), rgba(0,0,0,.06), rgba(0,0,0,.00));
  opacity:.35;
  mix-blend-mode: multiply;
}
@keyframes tapeDrift{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 0 0, 180px 0; }
}

@media (prefers-reduced-motion: reduce){
  .topbar::after,
  .big-bar-fill,
  .progress-fill,
  #page-sites .site-progress-fill,
  .kpi-progress-fill,
  .perf-gauge-fill{ animation: none !important; }
  body::before,
  body::after{ animation: none !important; }
}

/* ─────────────────────────────────────────
   Tape LINE (thin) + particles flow
   「ラインになってる所」を粒子+流れに寄せる（DOM変更なし）
   対象: 区切り線/下線/セパレータ類（topbar下/カード見出し/セクション区切りなど）
   ───────────────────────────────────────── */
:root{
  --tape-line-h: 10px;
  --tape-line-soft: rgba(245,238,223,.92);
  --tape-line-dust: rgba(255,255,255,.55);
  --tape-line-dust2: rgba(0,0,0,.09);
}

/* 代表的な「線」要素をまとめてテープ化（境界線を透明にして、疑似要素で置き換え） */
.topbar,
.page-header,
.ring-detail-header,
.gantt-header,
.material-section,
.rd-progress-row,
.team-add-member-row,
.nav-sep,
.card-title{
  position: relative;
}

/* 既存の border-bottom 系は残しつつ薄く（重なっても違和感が出にくい） */
.topbar,
.page-header,
.ring-detail-header,
.gantt-header{
  border-bottom-color: color-mix(in srgb, var(--glass-border) 55%, transparent) !important;
}

/* テープライン本体（粒子+流れ） */
.topbar::before,
.page-header::after,
.ring-detail-header::after,
.gantt-header::after,
.material-section::after,
.rd-progress-row::after,
.team-add-member-row::after,
.nav-sep::after,
.card-title::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: -7px;
  height: var(--tape-line-h);
  border-radius: 999px;
  pointer-events:none;
  opacity: .85;
  background:
    /* paper base */
    linear-gradient(180deg, rgba(255,255,255,.60), var(--tape-line-soft)),
    /* subtle fiber */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.05) 0 9px,
      rgba(255,255,255,0) 9px 17px),
    /* dust particles (layer 1) */
    radial-gradient(circle at 12px 60%, var(--tape-line-dust) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 44px 35%, var(--tape-line-dust) 0 1.3px, transparent 2.0px),
    radial-gradient(circle at 78px 55%, rgba(255,255,255,.45) 0 1.0px, transparent 1.8px),
    /* dust particles (layer 2, darker) */
    radial-gradient(circle at 22px 40%, var(--tape-line-dust2) 0 .9px, transparent 1.6px),
    radial-gradient(circle at 66px 70%, rgba(0,0,0,.07) 0 .8px, transparent 1.5px);
  background-size:
    auto,
    220px 100%,
    140px 100%,
    180px 100%,
    210px 100%,
    160px 100%,
    240px 100%;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
  filter: saturate(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  animation: tapeLineFlow 5.8s linear infinite;
}

/* nav separator は元々height:1pxなので、疑似要素が見えるように高さ確保 */
.nav-sep{
  height: 14px !important;
  background: transparent !important;
  margin: 10px 6px !important;
}
.nav-sep::after{
  bottom: 2px;
  left: 6px;
  right: 6px;
  height: 10px;
  opacity: .65;
}

/* card title は見出し直下に “テープ下線” */
.card-title::after{
  bottom: -10px;
  left: 0;
  right: 0;
  height: 10px;
  opacity: .55;
}

@keyframes tapeLineFlow{
  from{
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  to{
    background-position:
      0 0,
      220px 0,
      140px 0,
      180px 0,
      210px 0,
      160px 0,
      240px 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .topbar::before,
  .page-header::after,
  .ring-detail-header::after,
  .gantt-header::after,
  .material-section::after,
  .rd-progress-row::after,
  .team-add-member-row::after,
  .nav-sep::after,
  .card-title::after{ animation: none !important; }
}

/* ============================================================
   COSMIC PARTICLE SKIN - 宇宙と粒子のカラフルな流れ
   - 大きなボケ玉が重なり合って浮遊
   - カラフルな粒子クラスター
   - ゆっくり流れるアニメーション
   - theme-* は壊さない（default theme のみ適用）
   ============================================================ */

/* --- Palette --- */
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch){
  --bg: #f5f3f0;
  --text: #2a2825;
  --text-muted: #6a6560;
  --border: rgba(255,255,255,.5);
  --border-light: rgba(255,255,255,.3);

  /* Cosmic colors - 参考画像の色調 */
  --cosmic-pink: rgba(245,180,190,.7);
  --cosmic-rose: rgba(220,140,160,.65);
  --cosmic-blue: rgba(140,200,230,.7);
  --cosmic-teal: rgba(120,190,185,.65);
  --cosmic-green: rgba(150,200,160,.6);
  --cosmic-mint: rgba(180,220,200,.55);
  --cosmic-orange: rgba(240,190,140,.6);
  --cosmic-peach: rgba(250,210,180,.55);
  --cosmic-lavender: rgba(190,170,210,.5);

  --glass: rgba(255,255,255,.55);
  --glass-strong: rgba(255,255,255,.75);
  --shadow: 0 12px 40px rgba(80,60,50,.10), 0 4px 12px rgba(80,60,50,.06);
  --shadow-hover: 0 16px 50px rgba(80,60,50,.14), 0 6px 16px rgba(80,60,50,.08);

  color: var(--text);
  background: #f0ece6 !important;
}

/* --- Cosmic Bokeh Layer 1: Large floating orbs --- */
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch)::before{
  content: "";
  position: fixed;
  inset: -50px;
  pointer-events: none;
  z-index: -2;
  background:
    /* ピンク系ボケ玉 */
    radial-gradient(circle 180px at 15% 25%, var(--cosmic-pink), transparent 70%),
    radial-gradient(circle 140px at 25% 35%, var(--cosmic-rose), transparent 65%),
    /* ブルー系ボケ玉 */
    radial-gradient(circle 200px at 75% 20%, var(--cosmic-blue), transparent 70%),
    radial-gradient(circle 150px at 65% 30%, var(--cosmic-teal), transparent 65%),
    /* グリーン系ボケ玉 */
    radial-gradient(circle 170px at 50% 65%, var(--cosmic-green), transparent 70%),
    radial-gradient(circle 130px at 40% 55%, var(--cosmic-mint), transparent 65%),
    /* オレンジ系ボケ玉 */
    radial-gradient(circle 190px at 30% 80%, var(--cosmic-orange), transparent 70%),
    radial-gradient(circle 160px at 45% 75%, var(--cosmic-peach), transparent 65%),
    /* 追加のボケ玉 */
    radial-gradient(circle 120px at 80% 70%, var(--cosmic-lavender), transparent 60%),
    radial-gradient(circle 140px at 85% 45%, var(--cosmic-mint), transparent 65%),
    radial-gradient(circle 110px at 10% 60%, var(--cosmic-blue), transparent 60%);
  filter: blur(35px);
  opacity: .85;
  animation: cosmicDrift1 25s ease-in-out infinite;
}

/* --- Cosmic Bokeh Layer 2: Overlapping smaller orbs --- */
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch)::after{
  content: "";
  position: fixed;
  inset: -30px;
  pointer-events: none;
  z-index: -1;
  background:
    /* 重なり合う小さめのボケ玉 */
    radial-gradient(circle 100px at 20% 40%, var(--cosmic-teal), transparent 60%),
    radial-gradient(circle 90px at 30% 30%, var(--cosmic-blue), transparent 55%),
    radial-gradient(circle 110px at 70% 35%, var(--cosmic-pink), transparent 60%),
    radial-gradient(circle 85px at 60% 25%, var(--cosmic-rose), transparent 55%),
    radial-gradient(circle 95px at 55% 70%, var(--cosmic-orange), transparent 58%),
    radial-gradient(circle 80px at 45% 60%, var(--cosmic-peach), transparent 55%),
    radial-gradient(circle 105px at 25% 75%, var(--cosmic-green), transparent 60%),
    radial-gradient(circle 75px at 75% 65%, var(--cosmic-mint), transparent 55%),
    radial-gradient(circle 90px at 85% 55%, var(--cosmic-lavender), transparent 58%);
  filter: blur(25px);
  opacity: .65;
  animation: cosmicDrift2 30s ease-in-out infinite reverse;
}

/* --- Drifting animations --- */
@keyframes cosmicDrift1{
  0%, 100%{
    transform: translate(0, 0) scale(1);
  }
  25%{
    transform: translate(20px, -15px) scale(1.02);
  }
  50%{
    transform: translate(-10px, 20px) scale(0.98);
  }
  75%{
    transform: translate(-25px, -10px) scale(1.01);
  }
}

@keyframes cosmicDrift2{
  0%, 100%{
    transform: translate(0, 0) scale(1);
  }
  33%{
    transform: translate(-15px, 25px) scale(1.03);
  }
  66%{
    transform: translate(25px, -20px) scale(0.97);
  }
}

/* --- Glass surfaces --- */
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .topbar,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .card,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .stat-card,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .global-summary,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .modal,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .board-side,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .board-post-form,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .board-post,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .bd-card,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .photo-card,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .week-cell,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .cal-cell{
  position: relative;
  background: var(--glass) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-radius: 22px !important;
  overflow: hidden;
}

/* Hover effect */
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .card:hover,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .stat-card:hover,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .site-card:hover{
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px);
}

/* --- Topbar --- */
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .topbar{
  background: var(--glass-strong) !important;
}

/* --- Buttons --- */
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .btn{
  background: var(--glass) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(80,60,50,.08) !important;
  font-weight: 600 !important;
  transition: all .2s ease;
}
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .btn:hover{
  background: var(--glass-strong) !important;
  transform: translateY(-1px);
}
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .btn:active{
  transform: translateY(0);
}

/* Primary button - cosmic gradient */
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .btn-primary{
  background: linear-gradient(135deg,
    rgba(140,200,230,.5) 0%,
    rgba(150,200,160,.45) 50%,
    rgba(240,190,140,.4) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 24px rgba(140,200,230,.2) !important;
}

/* --- Progress bars --- */
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .big-bar,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .progress-bar,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .kpi-progress-bar,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .perf-gauge,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) #page-sites .site-progress-bar{
  border-radius: 12px !important;
  background: rgba(255,255,255,.45) !important;
  border: 1px solid var(--border-light) !important;
  overflow: hidden;
}
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .big-bar-fill,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .progress-fill,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .kpi-progress-fill,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .perf-gauge-fill,
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) #page-sites .site-progress-fill{
  border-radius: 12px !important;
  background: linear-gradient(90deg,
    rgba(140,200,230,.7) 0%,
    rgba(120,190,185,.65) 25%,
    rgba(150,200,160,.6) 50%,
    rgba(240,190,140,.55) 75%,
    rgba(245,180,190,.5) 100%
  ) !important;
  box-shadow: inset 0 1px 3px rgba(255,255,255,.6);
}

/* --- Card titles --- */
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .card-title{
  color: var(--text) !important;
  font-weight: 700;
}
html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .card-title::after{
  display: none !important;
}

/* --- Reduce motion --- */
@media (prefers-reduced-motion: reduce){
  html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch)::before,
  html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch)::after{
    animation: none !important;
  }
}

/* ============================================================
   Measure meter (計器) visual cleanup 2026-04-30
   - 見た目のみ（DOM/JS/ロジック変更なし）
   - 階層: 箇所→数値→確定
   ============================================================ */
#page-measure .meter-hinge-tab{
  background: var(--glass-strong, rgba(255,255,255,.75)) !important;
  border: 1px solid var(--border, rgba(255,255,255,.5)) !important;
  box-shadow: var(--shadow, 0 12px 40px rgba(80,60,50,.10)) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}

#page-measure .measure-sticky-panel,
#page-measure .measure-sticky-panel.collapsed,
#page-measure .measure-sticky-panel.dragging{
  background: var(--glass, rgba(255,255,255,.55)) !important;
  border-top: 1px solid var(--border, rgba(255,255,255,.5)) !important;
  box-shadow: 0 -18px 60px rgba(80,60,50,.12), 0 -6px 20px rgba(80,60,50,.08) !important;
  backdrop-filter: blur(18px) saturate(1.10);
  -webkit-backdrop-filter: blur(18px) saturate(1.10);
}

#page-measure .meter-close{
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: var(--glass-strong, rgba(255,255,255,.75)) !important;
  border: 1px solid var(--border, rgba(255,255,255,.5)) !important;
  box-shadow: 0 10px 24px rgba(80,60,50,.10) !important;
}

/* Header: step + location + actions */
#page-measure .measure-current-head{
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}
#page-measure .measure-step{
  font-family: var(--mono);
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--text-muted);
}
#page-measure .measure-loc-input{
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
#page-measure .meter-head-actions .btn{
  border-radius: 999px !important;
  min-height: 36px !important;
  padding: 6px 12px !important;
  font-weight: 700 !important;
}

/* Center meter: +/- and value */
#page-measure .measure-value{
  grid-template-columns: 78px minmax(0,1fr) 78px !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-top: 12px !important;
}
#page-measure .measure-big-btn{
  height: 88px !important;
  border-radius: 22px !important;
  font-size: 48px !important;
  box-shadow: 0 12px 34px rgba(80,60,50,.12) !important;
}
#page-measure .measure-big-btn.minus{ background: color-mix(in srgb, var(--cosmic-blue, #8cc8e6) 55%, white) !important; }
#page-measure .measure-big-btn.plus { background: color-mix(in srgb, var(--cosmic-green, #96c8a0) 55%, white) !important; }

#page-measure .measure-number-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
#page-measure .measure-number{
  width: 100% !important;
  min-height: 78px !important;
  text-align: center !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
  font-size: 40px !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em;
  border-radius: 20px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.06) !important;
}
#page-measure .measure-unit{
  font-family: var(--mono);
  font-weight: 900;
  color: var(--text-muted);
  margin-top: 0 !important;
}

/* Confirm row */
#page-measure .measure-confirm-btn{
  min-height: 56px !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  width: 100% !important;
  justify-content: center !important;
}
#page-measure .measure-prev{
  font-size: 11px !important;
  color: var(--text-muted) !important;
  font-weight: 800 !important;
}

/* Mobile: keep it compact, avoid hiding essential header */
@media (max-width: 768px){
  #page-measure .measure-current-head{ display:flex !important; }
  #page-measure .measure-value{ grid-template-columns: 68px minmax(0,1fr) 68px !important; gap: 10px !important; }
  #page-measure .measure-big-btn{ height: 78px !important; font-size: 44px !important; border-radius: 20px !important; }
  #page-measure .measure-number{ min-height: 72px !important; font-size: 36px !important; border-radius: 18px !important; }
  #page-measure .meter-head-actions{ gap: 6px !important; }
}

/* 計器：スケルトン感を抑える（半透明ガラスをやめ、面・枠・影で存在感を出す） */
#page-measure .measure-sticky-panel,
#page-measure .measure-sticky-panel.collapsed,
#page-measure .measure-sticky-panel.dragging {
  background: color-mix(in srgb, var(--surface) 94%, var(--surface2) 6%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 2px solid color-mix(in srgb, var(--border) 85%, rgba(0, 0, 0, 0.12) 15%) !important;
  box-shadow:
    0 -3px 0 color-mix(in srgb, var(--surface2) 90%, transparent),
    0 20px 48px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  padding: 16px 14px 18px !important;
}
#page-measure .meter-hinge-tab {
  width: 48px !important;
  min-width: 48px !important;
  padding: 10px 6px !important;
  background: var(--surface2) !important;
  border: 2px solid var(--border) !important;
  border-left: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 4px 12px 28px rgba(15, 23, 42, 0.14) !important;
  color: var(--text) !important;
}
#page-measure .meter-hinge-tab::before {
  width: 4px !important;
  background: var(--accent) !important;
  opacity: 0.9 !important;
}
#page-measure .meter-close {
  background: var(--surface2) !important;
  border: 2px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12) !important;
}
#page-measure .measure-loc-input {
  background: var(--surface2) !important;
  border: 2px solid var(--border) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  color: var(--text) !important;
}
#page-measure .meter-voice-btn {
  background: var(--surface2) !important;
  border: 2px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}
#page-measure .measure-big-btn {
  border: 2px solid color-mix(in srgb, var(--border) 75%, rgba(0, 0, 0, 0.08) 25%) !important;
  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
#page-measure .measure-number {
  background: var(--surface) !important;
  border: 2px solid var(--border) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.07),
    0 6px 16px rgba(15, 23, 42, 0.08) !important;
  color: var(--text) !important;
}
#page-measure .measure-confirm-btn {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14) !important;
}

/* 夜：上の「実体パネル」より後ろで計器だけ再調整（コントラスト維持） */
[data-theme="darksoft"] #page-measure .measure-sticky-panel,
[data-theme="darksoft"] #page-measure .measure-sticky-panel.collapsed,
[data-theme="darksoft"] #page-measure .measure-sticky-panel.dragging {
  background: linear-gradient(180deg, #1f3d32, #152a22) !important;
  border: 2px solid rgba(0, 255, 160, 0.42) !important;
  box-shadow:
    0 -4px 0 rgba(0, 255, 160, 0.1),
    0 22px 52px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
[data-theme="darksoft"] #page-measure .measure-number {
  background: #2a4d3e !important;
  border: 2px solid rgba(0, 255, 160, 0.48) !important;
  color: #f8fffc !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28), 0 8px 20px rgba(0, 0, 0, 0.38) !important;
}
[data-theme="darksoft"] #page-measure .meter-hinge-tab {
  background: #1e3d30 !important;
  border: 2px solid rgba(0, 255, 160, 0.4) !important;
  border-left: 0 !important;
  color: #e8fdf3 !important;
  box-shadow: 4px 14px 32px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="darksoft"] #page-measure .meter-close,
[data-theme="darksoft"] #page-measure .measure-loc-input,
[data-theme="darksoft"] #page-measure .meter-voice-btn {
  background: #1e3d30 !important;
  border: 2px solid rgba(0, 255, 160, 0.38) !important;
  color: #f2fff8 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28) !important;
}
[data-theme="darksoft"] #page-measure .measure-big-btn {
  border: 2px solid rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* 計器オープン時：不透明＋背面タップ遮断（スクリムは下ナビより下でナビは触れる） */
#page-measure .measure-sticky-panel.meter-hinge-panel.meter-panel-open {
  background: var(--surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate !important;
  z-index: 2400 !important;
  border: 2px solid var(--border) !important;
  box-shadow:
    0 12px 40px rgba(15, 23, 42, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
/* 計測ページがアクティブなときだけスクリムを出す（他画面へ遷移しても fixed が残らないように） */
#page-measure.page.active.measure-meter-scrim-active::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  z-index: 7900;
  pointer-events: auto;
  background: rgba(15, 23, 42, 0.32);
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 769px) {
  #page-measure.page.active.measure-meter-scrim-active::after {
    bottom: 0;
  }
}
#page-measure.page.active.measure-meter-scrim-active .measure-sticky-panel.meter-hinge-panel.meter-panel-open {
  z-index: 7985 !important;
}
#page-measure.page.active.measure-meter-scrim-active .meter-hinge-tab.show {
  z-index: 7995 !important;
}
[data-theme="darksoft"] #page-measure.page.active.measure-meter-scrim-active::after {
  background: rgba(0, 12, 8, 0.55);
}

/* ============================================================
   Inventory final visibility override (在庫が消える最終対策)
   - 途中に残っている「DQ-style inventory」や「旧テーブル非表示」が !important で勝ってしまうため、
     ファイル末尾で table 表示に強制復元する
   ============================================================ */
#page-inventory #invTable{
  display: table !important;
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
#page-inventory #invTable thead{ display: table-header-group !important; }
#page-inventory #invTable tbody{ display: table-row-group !important; }
#page-inventory #invTable tr{ display: table-row !important; }
#page-inventory #invTable th,
#page-inventory #invTable td{
  display: table-cell !important;
}

/* ============================================================
   Inventory L1 list (invItemList) minimal styles
   - 旧invTable依存を外し、在庫が「消える」を防ぐ
   - 見た目のみ（操作は既存モーダルへ）
   ============================================================ */
#page-inventory .inv-l1-group{ margin: 10px 0 12px; }
#page-inventory .inv-block-hint{
  width:100%;
  font-size:10px;
  font-weight:800;
  color: var(--text-muted);
  opacity:.88;
  line-height:1.45;
  margin: -2px 0 4px;
  padding: 0 2px;
}
#page-inventory .inv-l1-cat-collapse-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  min-width:0;
  flex: 0 1 auto;
  max-width: calc(100% - 120px);
  margin: 0;
  padding: 6px 10px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface2) 75%, transparent);
  color: var(--text);
  font-size:12px;
  font-weight: 950;
  letter-spacing:.04em;
  cursor:pointer;
  text-align:left;
  touch-action: manipulation;
}
#page-inventory .inv-l1-cat-collapse-btn:hover{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
#page-inventory .inv-collapse-chevron{
  flex-shrink: 0;
  width: 1em;
  font-family: var(--mono);
  font-weight: 900;
  opacity: .75;
}
#page-inventory .inv-l1-group-heading{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-inventory .inv-l1-group-count{
  flex-shrink:0;
  margin-left:auto;
  padding-left: 6px;
  font-size:11px;
  font-weight: 900;
  font-family: var(--mono);
  color: var(--text-muted);
}
#page-inventory .inv-l1-group-heading-plain{
  font-size: 13px;
  font-weight: 950;
  color: var(--text-muted);
  letter-spacing:.04em;
}
#page-inventory .inv-l1-group-heading-plain .inv-l1-group-count--inline{
  display:inline;
  margin-left:8px;
}
#page-inventory .inv-maker-block{
  margin: 4px 0 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface2) 55%, transparent);
  overflow:hidden;
}
#page-inventory .inv-maker-block-head{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin:0;
  padding: 8px 11px;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  background: color-mix(in srgb, var(--surface2) 90%, transparent);
  color: var(--text);
  font-size:12px;
  font-weight: 950;
  cursor:pointer;
  text-align:left;
  touch-action: manipulation;
}
#page-inventory .inv-maker-block-head:hover{
  background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
}
#page-inventory .inv-maker-block-head .chev-m{
  flex-shrink:0;
  width: 1em;
  font-family: var(--mono);
  font-weight: 900;
  opacity: .72;
}
#page-inventory .inv-maker-block-head .lbl-m{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
}
#page-inventory .inv-maker-block-head .cnt-m{
  flex-shrink:0;
  font-size:11px;
  font-weight: 900;
  font-family: var(--mono);
  color: var(--text-muted);
}
#page-inventory .inv-maker-block-body{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  padding: 8px;
  align-content: start;
}
#page-inventory .inv-maker-block--collapsed .inv-maker-block-body{
  display:none!important;
}
#page-inventory .inv-l1-group-title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  color: var(--text-muted);
  margin: 0 0 6px;
  letter-spacing: .06em;
}
#page-inventory .inv-l1-group-title .t{
  flex: 0 0 auto;
}
#page-inventory .inv-onekind{
  flex: 1 1 auto;
  display:flex;
  justify-content:flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
#page-inventory .inv-onekind::-webkit-scrollbar{ height: 4px; }
#page-inventory .inv-onekind::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  border-radius: 999px;
}
#page-inventory .inv-onekind::-webkit-scrollbar-track{ background: transparent; }
#page-inventory .inv-onekind-btn{
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  color: color-mix(in srgb, var(--text-muted) 92%, transparent);
  box-shadow: 0 8px 18px rgba(56,48,42,.05);
  white-space: nowrap;
}
#page-inventory .inv-onekind-btn.active{
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important;
  box-shadow: 0 10px 22px rgba(56,48,42,.08), 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}
#page-inventory .inv-onekind-btn:not(.active):hover{
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important;
  color: var(--text) !important;
}
#page-inventory .inv-l1-group-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  align-content: start;
}

#page-inventory .inv-l1-pager{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 2px 0 10px;
  padding: 7px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface2) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
#page-inventory .inv-l1-pager--bottom{
  margin-top: 12px;
  margin-bottom: 8px;
}
#page-inventory .inv-item-list{
  padding-bottom: 8px;
}
#page-inventory .inv-l1-pager-meta{
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  min-width: 0;
  text-align: center;
}
#page-inventory .inv-l1-pager .btn{
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}
#page-inventory .inv-l1-pager .btn:disabled{
  opacity: 0.42;
  pointer-events: none;
}

#page-inventory .inv-l1-card{
  background: var(--glass, rgba(255,255,255,.55));
  border: 1px solid var(--border, rgba(255,255,255,.5));
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(80,60,50,.08);
  padding: 11px 12px;
  cursor: pointer;
}
#page-inventory .inv-l1-card.low{ border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
#page-inventory .inv-l1-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
}
#page-inventory .inv-l1-name{ font-size: 19px; font-weight: 950; color: var(--text); min-width:0; display:flex; align-items:center; gap:10px; line-height:1.2; flex-wrap:wrap; }
#page-inventory .inv-l1-icon{
  width: 26px;
  height: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface2) 55%, rgba(255,255,255,.38));
  border: 1px solid color-mix(in srgb, var(--border) 65%, rgba(255,255,255,.35));
  box-shadow: 0 8px 18px rgba(80,60,50,.08);
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}
#page-inventory .inv-l1-name-text{ min-width:0; overflow:visible; text-overflow:clip; white-space:normal; line-height:1.3; word-break:break-word; }
#page-inventory .inv-l1-oneline{
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  display:block;
  line-height:1.35;
  word-break:break-word;
}
#page-inventory .inv-l1-spec-badge{
  flex: 0 0 auto;
  max-width: 40vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: color-mix(in srgb, var(--text) 88%, var(--accent));
}

#page-inventory .inv-l1-total{ white-space:nowrap; }
#page-inventory .inv-l1-total-num{ font-size: 28px; }

/* Inventory primary row: メーカー / 名前 / 材質 / 数（数が主役）— 品名は折り返しで省略しない */
#page-inventory .inv-l1-row3,
#page-inventory .inv-l1-row4{
  display:grid;
  align-items:center;
  gap:6px;
  padding: 2px 0;
}
#page-inventory .inv-l1-row3{
  /* メーカー列を少し詰めて品名の可視領域を広げる */
  /* チェック列と数量列を詰めて、品名の横幅を最大化 */
  grid-template-columns: 28px minmax(0, 56px) minmax(0, 1fr) 78px;
}
#page-inventory .inv-l1-sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#page-inventory .inv-l1-cell-sel{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
  overflow: visible;
  min-width: 28px;
  width: 28px;
  flex-shrink: 0;
  box-sizing: border-box;
}
#page-inventory .inv-l1-cell-sel input.inv-l1-sel{
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--accent, #5a8a32);
  flex-shrink: 0;
}
#page-inventory .inv-l1-cell-sel.inv-l1-cell-sel--readonly{
  visibility: visible;
  width: 12px;
  min-width: 12px;
  flex-shrink: 0;
  padding: 0;
  cursor: default;
  pointer-events: none;
}
#page-inventory .inv-l1-row4{
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr) minmax(0, 128px) 96px;
}
#page-inventory .inv-l1-row4 .m{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--text-muted) 92%, transparent);
}
#page-inventory .inv-l1-row4 .m.empty{
  opacity:0;
}
#page-inventory .inv-l1-row4 .n1{
  min-width:0;
  overflow:visible;
  text-overflow:unset;
  white-space:normal;
  word-break:break-word;
  line-height:1.28;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .01em;
  color: var(--text);
}
#page-inventory .inv-l1-row4 .mat{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--text) 72%, var(--text-muted));
}
#page-inventory .inv-l1-row3 .m,
#page-inventory .inv-l1-row3 .n1,
#page-inventory .inv-l1-row3 .qty{
  min-width:0;
}
#page-inventory .inv-l1-row3 .qty{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  align-self:center;
}
#page-inventory .inv-l1-row3 .m,
#page-inventory .inv-l1-row3 .n1{
  justify-self:start;
  text-align:left;
}
#page-inventory .inv-l1-row3 .m{
  /* メーカーは左寄せ（省略も自然に） */
  justify-self:start;
  text-align:left;
}
#page-inventory .inv-l1-row3 .n1{
  /* 品名は中央寄せで揃える（メーカーは左寄せのまま） */
  justify-self:stretch;
  text-align:center;
}
#page-inventory .inv-l1-row3 .qty{
  justify-self:end;
  text-align:right;
}
#page-inventory .inv-l1-row3 .m{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--text-muted) 92%, transparent);
  white-space:normal;
  word-break:break-word;
  line-height:1.25;
  overflow:visible;
  text-overflow:unset;
  align-self:center;
}
#page-inventory .inv-l1-row3 .m.empty{ opacity:0; }
#page-inventory .inv-l1-row3 .n1{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .01em;
  color: var(--text);
  white-space:normal;
  word-break:break-word;
  line-height:1.28;
  overflow:visible;
  text-overflow:unset;
}
#page-inventory .inv-l1-row3 .qty{
  text-align:right;
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
#page-inventory .inv-l1-row3 .qty.zero{
  color: color-mix(in srgb, var(--text-muted) 80%, var(--text));
}

/* 在庫一覧は福行（詳細バッジ）を出さない */
#page-inventory .inv-material-detail-badge{
  display:none !important;
}
#page-inventory .inv-l1-row4 .qty{
  text-align:right;
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
#page-inventory .inv-l1-row4 .qty.zero{
  color: color-mix(in srgb, var(--text-muted) 80%, var(--text));
}

/* subtle category tint (very light, not flashy) */
#page-inventory .inv-l1-card{
  --inv-tint: transparent;
  position: relative;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--inv-tint) 16%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 92%, transparent) !important;
}
#page-inventory .inv-l1-card[data-inv-cat="1液材"]{ --inv-tint: hsl(200 80% 62% / .45); }
#page-inventory .inv-l1-card[data-inv-cat="2液材"]{ --inv-tint: hsl(260 78% 66% / .45); }
#page-inventory .inv-l1-card[data-inv-cat="トナー"]{ --inv-tint: hsl(18 90% 62% / .42); }
#page-inventory .inv-l1-card[data-inv-cat="カートリッジ"]{ --inv-tint: hsl(140 70% 52% / .40); }
#page-inventory .inv-l1-card[data-inv-cat="副資材"]{ --inv-tint: hsl(45 90% 58% / .36); }

/* ============================================================
   Sites master FINAL: site name single line
   ============================================================ */
#page-sites .site-name,
#page-sites .site-name.ui-tier-place{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  max-width: 100% !important;
}
#page-sites .site-addr{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  max-width: 100% !important;
}

/* ============================================================
   Sites master FINAL: always 1 site = 1 table row (disable card mode)
   ============================================================ */
@media (max-width: 768px){
  #page-sites table{ display: table !important; width:100% !important; }
  #page-sites thead{ display: table-header-group !important; }
  #page-sites tbody{ display: table-row-group !important; }
  #page-sites tr{ display: table-row !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; }
  #page-sites td, #page-sites th{ display: table-cell !important; }
  #page-sites td::before{ display:none !important; content:none !important; }
  #page-sites td:last-child{ padding-top: 8px !important; margin-top: 0 !important; border-top: none !important; }
  #page-sites .site-actions{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; }
  #page-sites .action-row{ flex-direction: row !important; }
  #page-sites .action-row .btn{ width:auto !important; }
}

/* SUPER FINAL: kill tablet/desktop card-mode too (always 1 row per site) */
#page-sites .table-wrap table{ display: table !important; width:100% !important; }
#page-sites .table-wrap thead{ display: table-header-group !important; }
#page-sites .table-wrap tbody{ display: table-row-group !important; }
#page-sites .table-wrap tr{ display: table-row !important; }
#page-sites .table-wrap th,
#page-sites .table-wrap td{ display: table-cell !important; width:auto !important; }
#page-sites .table-wrap td[data-label]{ display: table-cell !important; }
#page-sites .table-wrap td[data-label]::before,
#page-sites .table-wrap td::before{ display:none !important; content:none !important; }
#page-sites .table-wrap tbody{ flex-direction: initial !important; gap: 0 !important; }
#page-sites .table-wrap tr{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Sites master FINAL: actions column must not collapse */
#page-sites .table-wrap th:last-child,
#page-sites .table-wrap td:last-child{
  min-width: 220px !important;
  width: 220px !important;
  white-space: nowrap !important; /* keep single-row height */
}
#page-sites .table-wrap td:last-child .site-actions{
  display: flex !important;
  flex-wrap: nowrap !important; /* do not wrap vertically */
  gap: 4px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  overflow-x: auto !important; /* if too narrow, scroll horizontally */
  -webkit-overflow-scrolling: touch !important;
}
#page-sites .table-wrap td:last-child .site-actions .btn{
  padding: 5px 7px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

/* ============================================================
   Site edit modal (現場編集): ensure scroll always works
   ============================================================ */
#siteModal.open .modal,
#siteModal .modal{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: 92vh !important;
}
#siteModal .modal-head{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

/* Item modal (品目追加/編集): ensure scroll on mobile too */
#itemModal.open .modal,
#itemModal .modal{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: 92vh !important;
}

/* ============================================================
   Mobile stability FINAL (layout only; keep functionality)
   ============================================================ */
@media (max-width: 768px){
  html, body{ overflow-x: hidden !important; }
  .main{ overflow-x:hidden !important; }
  .page{ width: 100% !important; max-width: 100% !important; }
  .card,.table-wrap,.modal{ max-width: 100% !important; }

  /* ダッシュ上部：タブ行は通常フローバー（重なり時は z-index でチップを潰さない） */
  #page-dashboard .dash-mode-tabs-row{
    position: relative !important;
    top: auto !important;
    margin-bottom: 14px !important;
    margin-top: 0 !important;
    gap: 8px !important;
    z-index: auto !important;
    flex-shrink: 0;
    padding-top: 2px !important;
    padding-bottom: 5px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(56, 48, 42, .06) !important;
    background: color-mix(in srgb, var(--bg) 93%, var(--surface)) !important;
  }
  #page-dashboard .dash-mode-tabs{
    position: relative !important;
    top: auto !important;
    margin-bottom: 0 !important;
    padding: 4px !important;
    z-index: auto !important;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    box-shadow: 0 6px 18px rgba(56, 48, 42, .08);
  }
  #page-dashboard .dash-settings-compact{
    min-width: 44px;
    font-size: 18px;
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    box-shadow: 0 6px 18px rgba(56, 48, 42, .08);
  }
  #page-dashboard .dash-layer--l0{
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  #page-dashboard #dashSiteBars,
  #page-dashboard .dash-sitebars{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 0 !important;
    padding: 8px 8px 10px !important;
  }
  #page-dashboard .dash-sitebar{
    margin-top: 0 !important;
    padding: 4px 2px 6px !important;
    gap: 8px !important;
  }
  #page-dashboard .dash-done-toggle{
    margin: 0 !important;
    display: flex !important;
    justify-content: stretch !important;
    width: 100% !important;
  }
  #page-dashboard .dash-done-toggle .btn{
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
  }
  #page-dashboard .dash-prio-layout{ margin-top: 10px !important; gap: 12px !important; }

  /* Inventory: prevent chip rows from forcing horizontal scroll */
  #page-inventory .inv-l1-head{ align-items: flex-start !important; }
  #page-inventory .inv-l1-total-num{ font-size: 20px !important; }

  /* Inventory drill modal header buttons: don't overflow */
  #invDrillModal .modal-head{ flex-wrap: wrap !important; }
  #invDrillModal .modal-head > div{ flex-wrap: wrap !important; }

  /* Sites master: keep action buttons single-row without breaking layout */
  #page-sites .table-wrap{ overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  #page-sites table{ min-width: 860px !important; }

  /* 日報・品質チェック（モバイル最終上書き：480px 表ルールより後で確実に効かせる） */
  #page-report {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  #reportActions {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 4px !important;
    padding-bottom: 8px !important;
  }
  #reportCheckCard table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  #reportCheckCard .report-check-actions-inner {
    display: grid !important;
    grid-template-columns: minmax(56px, 1fr) minmax(56px, 1fr) !important;
    max-width: 176px !important;
    width: 100% !important;
    margin-left: auto !important;
  }
  #reportCheckCard .report-check-ok-cell,
  #reportCheckCard .report-check-ng-cell {
    min-width: 56px !important;
  }
}
#page-inventory .inv-l1-total{ display:flex; align-items:baseline; gap:6px; flex-shrink:0; }
#page-inventory .inv-l1-total-num{ font-family: var(--mono); font-size: 26px; font-weight: 950; letter-spacing: -.02em; }
#page-inventory .inv-l1-total-unit{ font-size: 12px; font-weight: 900; color: var(--text-muted); }
#page-inventory .inv-l1-chips{ margin-top: 10px; display:flex; flex-wrap:wrap; gap:8px; }
#page-inventory .inv-l1-muted{ font-size: 11px; font-weight: 800; color: var(--text-muted); opacity: .85; }

/* 在庫ツールバー：モバイルでタップが下に抜けにくくするのみ（一覧グリッドは変更しない） */
@media (max-width: 768px){
  #page-inventory footer.ui-layer--l3.inv-actions{
    z-index: 50 !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
  }
  #page-inventory footer.inv-actions .btn{
    position: relative;
    z-index: 1;
    pointer-events: auto;
  }
}

/* 在庫：フィルタ／カテゴリアイコン編集モーダル（モバイルでタップ・入力が届かない対策） */
#invFilterConfigModal.modal-overlay.open,
#invCatIconModal.modal-overlay.open {
  z-index: 350;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* シート内は縦スクロールのみ許可（manipulation は長いリストでスクロールが固まる端末がある） */
#invFilterConfigModal.modal-overlay.open .modal,
#invCatIconModal.modal-overlay.open .modal {
  pointer-events: auto;
  touch-action: pan-y;
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  #invFilterConfigModal.modal-overlay.open,
  #invCatIconModal.modal-overlay.open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(56, 48, 42, 0.42) !important;
  }
  #invCatIconModal .inv-cat-icon-field,
  #invCatIconModal #invCatNewIcon {
    font-size: 16px !important;
    min-height: 44px;
  }
  #invCatIconModal .inv-cat-icon-clear-btn {
    min-height: 44px;
  }
}
/* 親 .modal が pan-y でも「消す」にタップが届きやすくする */
#invCatIconModal .inv-cat-icon-clear-btn {
  touch-action: manipulation;
}

/* Tap affordance removed (keep cards clean) */


/* ============================================================
   Inventory CSS: restored from 2026-05-01 zip
   ============================================================ */

/* ============================================================
   Inventory PC tidy-up (在庫だけ：PC時もっとスッキリ)
   - ボタン/チップの縦圧を減らす
   - 操作ボタンを1行に寄せる
   ============================================================ */
@media (min-width: 900px){
  /* ページ全体の余白を少し詰める */
  #page-inventory{
    padding-top: 12px !important;
    padding-bottom: 28px !important;
  }

  /* トップバー「在庫管理」が日付に比べて小さく見えないよう */
  .main:has(#page-inventory.active) .topbar-title{
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
  }

  /* カテゴリタブ：高さと横幅を抑える */
  #page-inventory .inv-category-bar{
    padding-bottom: 4px !important;
  }
  #page-inventory .inv-cat-tab{
    min-width: 64px;
    padding: 7px 9px 6px;
    gap: 3px;
    border-radius: 12px;
  }
  #page-inventory .inv-cat-icon{
    width: 22px;
    height: 22px;
    line-height: 1;
    font-size: 16px;
    overflow: visible;
  }
  #page-inventory .inv-cat-icon svg{
    width: 20px;
    height: 20px;
  }
  #page-inventory .inv-cat-icon svg.inv-cat-svg3d{
    width: 27px;
    height: 27px;
  }
  /* 一覧まわりは可読性優先 */
  #page-inventory .inv-cat-label{ font-size: 12px; }
  #page-inventory .inv-cat-count{ font-size: 11px; }

  /* メーカー/規格チップ：密度UP */
  #page-inventory .inv-maker-filter{
    padding-bottom: 4px !important;
    gap: 6px;
  }
  #page-inventory .inv-maker-filter .filter-btn{
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 999px;
  }

  /* メーカーブロック見出し・仕様チップ（表以外の一覧） */
  #page-inventory .inv-maker-block-head{
    font-size: 14px !important;
    padding: 9px 12px !important;
  }
  #page-inventory .inv-maker-block-head .cnt-m{
    font-size: 12px !important;
  }
  #page-inventory .inv-l1-group-title{
    font-size: 13px !important;
  }
  #page-inventory .inv-onekind-btn{
    font-size: 13px !important;
    padding: 6px 11px !important;
  }
  /* 品目行：メーカー列が細く見えやすいので一段上げ */
  #page-inventory .inv-l1-row3 .m,
  #page-inventory .inv-l1-row4 .m{
    font-size: 14px !important;
  }
  #page-inventory .inv-l1-row4 .mat{
    font-size: 13px !important;
  }
  #page-inventory .inv-l1-row3 .n1,
  #page-inventory .inv-l1-row4 .n1{
    font-size: 22px !important;
  }
  #page-inventory .inv-l1-row3 .qty{
    font-size: 36px !important;
  }
  #page-inventory .inv-l1-row4 .qty{
    font-size: 26px !important;
  }

  /* 検索行：縦余白を減らす */
  #page-inventory #invFilterBar.mini-filter{
    padding-top: 2px !important;
  }
  #page-inventory #invFilterBar .inv-search{
    gap: 8px;
    align-items: center;
  }

  /* 操作ボタン：PCは1行寄せ */
  #page-inventory footer.ui-layer--l3.inv-actions{
    margin-top: 10px !important;
    padding-top: 10px !important;
    max-width: none !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  #page-inventory footer.ui-layer--l3.inv-actions .btn{
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    white-space: nowrap;
  }
  /* “品目を追加”だけ少し目立たせつつ幅は増やさない */
  #page-inventory footer.ui-layer--l3.inv-actions #addItemBtn{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 在庫テーブル（#invTable）：PCは可読性優先で一段大きく */
  #page-inventory #invTable{
    font-size: 15px !important;
  }
  #page-inventory #invTable th,
  #page-inventory #invTable td{
    padding: 9px 10px !important;
  }
  #page-inventory #invTable .inv-item-name{
    font-size: 17px !important;
    font-weight: 900 !important;
  }
  #page-inventory #invTable .inv-item-spec{
    font-size: 12px !important;
  }
  #page-inventory #invTable .inv-number{
    font-size: 17px !important;
    font-weight: 900 !important;
  }
  #page-inventory #invTable .inv-number.total{
    font-size: 19px !important;
  }
  #page-inventory #invTable .inv-row-two-part .inv-number{
    font-size: 21px !important;
  }
  #page-inventory #invTable .inv-category-row td{
    font-size: 13px !important;
  }
  #page-inventory #invTable .inv-loc-head,
  #page-inventory #invTable .inv-stock-cell,
  #page-inventory #invTable .inv-total-head,
  #page-inventory #invTable .inv-total-cell{
    font-size: 14px !important;
  }
  #page-inventory #invTable .inv-order-head::after{
    font-size: 13px !important;
  }
  #page-inventory #invTable .inv-order-btn{
    width: 26px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 14px !important;
  }
}


/* 数字の可読性を一段上げる（全体に効かせる） */
.inv-l1-qty,
.inv-l1-chip-qty,
.inv-number,
.move-history-qty,
.global-stat-row .val,
.stat-num,
.ring-stat-value .ui-num,
.ring-pct-hero .ui-num {
  letter-spacing: 0.03em;
}

.inv-l1-qty {
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}

.inv-l1-unit{
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  margin-left: 4px;
}

.inv-l1-chip-qty { font-size: 13px; }

.inv-number { font-size: 16px; }


/* ============================================================
   Inventory visibility hotfix (在庫が消える対策)
   - JSでinvTableを表示しても、過去CSSの display:none!important が勝つため
   - 旧invTableを確実に表示（機能/ロジックは触らない）
   ============================================================ */
#page-inventory #invTable{
  display: table !important;
  width: 100% !important;
}

#page-inventory #invTable thead{ display: table-header-group !important; }

#page-inventory #invTable tbody{ display: table-row-group !important; }

#page-inventory #invTable tr{ display: table-row !important; }

#page-inventory #invTable th,
#page-inventory #invTable td{ display: table-cell !important; }


/* アプリ全体：数字を少し大きく・読みやすく */
.stat-num,
.big-progress-num,
.card-progress-num,
.ring-pct,
.qty-val,
.inv-number,
.move-history-qty,
#globalSummary [style*="font-family:var(--mono)"],
#page-dashboard [style*="font-family:var(--mono)"] {
  font-size: 1.12em;
  font-weight: 850;
  letter-spacing: .01em;
}


/* 在庫表：余白を詰める */
#page-inventory .card { padding: 14px 14px; }

#page-inventory .table-wrap { border-radius: 12px; }

#invTable { border-collapse: separate; border-spacing: 0; font-size: 12px; }

#invTable th,
#invTable td { padding: 7px 8px; vertical-align: middle; }

#invTable th { white-space: nowrap; }

.inv-item-head,
.inv-item-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  min-width: 132px;
  max-width: 180px;
}

.inv-item-head { background: var(--surface2); }

.inv-order-head,
.inv-order-cell { width: 74px; text-align: center; white-space: nowrap; }

.inv-unit-head,
.inv-unit-cell { width: 46px; text-align: center; color: var(--text-muted); font-size: 11px; }

.inv-loc-head { text-align: center; min-width: 64px; }

.inv-total-head,
.inv-total-cell { text-align: center; background: var(--surface2); color: var(--accent); }

.inv-category-row td {
  background: var(--surface3) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  padding: 6px 9px !important;
}

.inv-item-cell { cursor: pointer; font-weight: 700; }

.inv-item-name { font-size: 14px; font-weight: 800; line-height: 1.35; white-space: normal; word-break: break-word; }

.inv-item-name.ui-tier-place { font-size: 15px; }

.inv-item-spec-wrap { margin-top: 4px; }

.inv-item-spec { font-size: 10px; color: var(--text-muted); font-weight: 400; white-space: normal; word-break: break-word; line-height: 1.4; }

.inv-stock-cell { text-align: center; cursor: pointer; }

.inv-stock-cell.low { background: rgba(217,123,58,.10); }

.inv-number { font-family: var(--mono); color: var(--text); font-size: 14px; }

.inv-number.zero { color: var(--text-faint); font-weight: 650; }

.inv-number.warn { color: var(--warning); font-weight: 900; }

.inv-number.total { color: var(--accent); font-size: 15px; }

.inv-total-cell.low .inv-number { color: var(--danger); }

.inv-min-stock { font-size: 9px; color: var(--text-muted); font-weight: 500; }

.inv-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: grab;
  margin-right: 2px;
}

.inv-order-btn { padding: 2px 5px !important; min-height: 24px !important; font-size: 10px !important; }

.inv-row { transition: background .14s, transform .14s, opacity .14s; }

.inv-row.dragging { opacity: .45; }

.inv-row.drag-over { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(90,138,50,.08); }

/* 2液・シール材は少し大きく見せる */
.inv-row-two-part .inv-item-name { font-size: 14px; font-weight: 950; color: var(--text); }

.inv-row-two-part .inv-number { font-size: 16px; font-weight: 950; }

.inv-row-two-part td { padding-top: 9px !important; padding-bottom: 9px !important; }

  #page-inventory .card { padding: 12px 10px !important; }

  #invTable th,
  #invTable td { padding: 6px 7px !important; }

  .inv-item-head,
  .inv-item-cell { min-width: 118px; max-width: 140px; }

  .inv-loc-head { min-width: 58px; }

  .inv-order-btn { display: none !important; }

  .inv-drag-handle { width: 28px; height: 28px; margin: 0; }

  .inv-number { font-size: 15px; }

  .inv-row-two-part .inv-number { font-size: 17px; }

  
  #invTable {
    font-size: 11px !important;
  }

  
  #invTable th,
  #invTable td {
    padding: 6px 6px !important;
  }

  
  .inv-item-head,
  .inv-item-cell {
    min-width: 100px !important;
    max-width: 120px !important;
  }

  
  .inv-item-name {
    font-size: 11px !important;
  }

  
  .inv-number {
    font-size: 14px !important;
  }


/* ============================================================
   ChatGPT patch: inventory table horizontal slide for many sites
   Scope: inventory screen only. No calculation / Firebase changes.
   ============================================================ */
#page-inventory .inventory-scroll-wrap,
#page-inventory .table-wrap:has(#invTable) {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x pan-y !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.70) !important;
  position: relative !important;
}


#page-inventory .inventory-scroll-wrap::after,
#page-inventory .table-wrap:has(#invTable)::after {
  content: "横にスライド";
  position: sticky;
  right: 10px;
  bottom: 6px;
  float: right;
  margin: 6px 8px 8px 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  pointer-events: none;
  z-index: 12;
}


#page-inventory #invTable {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}


#page-inventory #invTable th,
#page-inventory #invTable td {
  white-space: nowrap !important;
}


#page-inventory #invTable .inv-item-head,
#page-inventory #invTable .inv-item-cell {
  position: sticky !important;
  left: 0 !important;
  z-index: 20 !important;
  min-width: 132px !important;
  max-width: 168px !important;
  background: rgba(255,255,255,0.94) !important;
  box-shadow: 8px 0 12px rgba(60,64,67,0.06) !important;
}


#page-inventory #invTable .inv-item-head {
  z-index: 30 !important;
  background: rgba(246,247,249,0.96) !important;
}


#page-inventory #invTable .inv-loc-head,
#page-inventory #invTable .inv-stock-cell {
  min-width: 76px !important;
  text-align: center !important;
}


#page-inventory #invTable .inv-total-head,
#page-inventory #invTable .inv-total-cell {
  min-width: 78px !important;
  text-align: center !important;
}

  #page-inventory #invTable .inv-item-head,
  #page-inventory #invTable .inv-item-cell {
    min-width: 112px !important;
    max-width: 132px !important;
  }

  #page-inventory #invTable .inv-loc-head,
  #page-inventory #invTable .inv-stock-cell {
    min-width: 70px !important;
  }

.inv-material-id-badge{display:inline-flex;margin-top:4px;padding:2px 7px;border-radius:999px;background:rgba(79,140,255,.10);border:1px solid rgba(79,140,255,.16);color:var(--text-sub);font-size:10px;font-weight:700}

#page-inventory .table-wrap:has(#invTable),
#page-inventory .inventory-scroll-wrap {
  background: rgba(242,239,231,0.72) !important;
}

#page-inventory #invTable .inv-item-head,
#page-inventory #invTable .inv-item-cell {
  background: rgba(247,245,239,0.96) !important;
}

#page-inventory #invTable .inv-item-head {
  background: rgba(235,232,223,0.98) !important;
}

.inv-material-detail-badge {
  display: inline-flex;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(90,138,50,0.10);
  border: 1px solid rgba(90,138,50,0.16);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}


/* 2026-04-29: 在庫表は見やすさ維持＋並び替えだけ復活 */
#page-inventory #invTable .inv-order-head,
#page-inventory #invTable .inv-order-cell{
  display: table-cell !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#page-inventory #invTable .inv-order-head{
  font-size: 0 !important;
}

#page-inventory #invTable .inv-order-head::after{
  content: '並';
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
}

#page-inventory #invTable .inv-unit-head,
#page-inventory #invTable .inv-unit-cell{
  display: none !important;
}

#page-inventory #invTable .inv-drag-handle{
  display: none !important;
}

#page-inventory #invTable .inv-order-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 23px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  margin: 0 1px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  touch-action: manipulation !important;
}

  #page-inventory #invTable .inv-order-btn{
    width: 22px !important;
    height: 28px !important;
    min-height: 28px !important;
    font-size: 13px !important;
  }


/* 2026-04-29 ChatGPT patch: DQ-style inventory drilldown */
#invTable { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; table-layout: auto !important; }

#invTable thead { display: none !important; }

#invTable, #invTable tbody, #invTable tr, #invTable td.inv-dq-shell { display: block !important; }

#invTable td.inv-dq-shell { padding: 0 !important; border: 0 !important; background: transparent !important; }

.inv-dq-panel { padding: 10px; }

.inv-dq-title { font-weight: 900; font-size: 15px; margin: 0 0 10px; color: var(--text-main); }

.inv-dq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }

.inv-dq-card { min-height: 86px; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--card-bg) 88%, var(--bg-main)); box-shadow: var(--shadow-sm); padding: 9px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-main); }

.inv-dq-card.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 70%, var(--card-bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }

.inv-dq-icon { font-size: 24px; line-height: 1; }

.inv-dq-label { font-weight: 900; font-size: 12px; line-height: 1.2; text-align: center; }

.inv-dq-count { font-size: 10px; color: var(--text-muted); font-weight: 800; }

.inv-dq-selected { display: flex; align-items: baseline; gap: 8px; padding: 12px 4px 10px; border-top: 1px dashed var(--border); }

.inv-dq-selected span { font-size: 20px; }

.inv-dq-selected b { font-size: 20px; font-weight: 900; }

.inv-dq-selected em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-muted); }

.inv-dq-list { display: flex; flex-direction: column; gap: 8px; }

.inv-dq-row { border: 1px solid var(--border); border-radius: 18px; background: var(--card-bg); overflow: hidden; box-shadow: var(--shadow-sm); }

.inv-dq-row.low { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }

.inv-dq-main { width: 100%; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(86px, .8fr) minmax(70px, .55fr); align-items: center; gap: 8px; padding: 12px 14px; background: transparent; border: 0; color: var(--text-main); text-align: left; }

.inv-dq-name { font-size: 17px; font-weight: 950; white-space: normal; overflow: visible; text-overflow: unset; word-break: break-word; line-height: 1.28; }

.inv-dq-mat { justify-self: start; border-radius: 999px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--card-bg)); border: 1px solid var(--border); padding: 5px 9px; font-size: 12px; font-weight: 900; white-space: nowrap; }

.inv-dq-total { justify-self: end; font-size: 24px; font-weight: 950; font-family: var(--mono); white-space: nowrap; }

.inv-dq-total small { font-size: 12px; margin-left: 2px; font-family: var(--font-main); color: var(--text-muted); }

.inv-dq-detail { display: none; border-top: 1px solid var(--border); padding: 10px 12px 12px; background: color-mix(in srgb, var(--bg-main) 45%, transparent); }

.inv-dq-row.open .inv-dq-detail { display: block; }

.inv-dq-spec { font-size: 12px; color: var(--text-muted); font-weight: 800; margin-bottom: 8px; }

.inv-dq-locs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }

.inv-dq-loc { flex: 0 0 auto; min-width: 104px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); padding: 8px 10px; display: flex; justify-content: space-between; gap: 12px; color: var(--text-main); }

.inv-dq-loc.zero { opacity: .48; }

.inv-dq-loc span { font-size: 11px; font-weight: 800; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inv-dq-loc b { font-family: var(--mono); font-size: 14px; }

.inv-dq-actions { display: flex; gap: 8px; margin-top: 10px; }

.inv-dq-empty { padding: 18px; color: var(--text-muted); font-size: 13px; text-align: center; }

  .inv-dq-card { min-height: 78px; border-radius: 16px; }

  .inv-dq-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name total' 'mat total'; min-height: 70px; padding: 12px; }

  .inv-dq-name { grid-area: name; font-size: 16px; }

  .inv-dq-mat { grid-area: mat; font-size: 11px; }

  .inv-dq-total { grid-area: total; font-size: 23px; }

  .inv-dq-selected { align-items: center; }

  .inv-dq-selected em { display: none; }


/* ============================================================
   2026-04-29 新しい在庫管理UI
   業務用アプリとして品のあるデザイン
   - 分類 → 品目 → 詳細 の段階的表示
   - 落ち着いた色（ベージュ、グレー系）
   - 余白をしっかり取る
   - 影や装飾は最小限
   - 絵文字禁止、シンプルな線アイコン
   ============================================================ */

#page-inventory {
  padding: 16px 14px 32px;
  background: var(--bg);
}


/* コンテナ */
.inv-container {
  max-width: 560px;
  margin: 0 auto;
}

  #page-inventory .inv-container{ max-width: 1100px; }

  #page-inventory .inv-category-bar{ padding-bottom: 6px; }

  #page-inventory .inv-maker-filter{ padding-bottom: 6px; }


  /* 品目カードは2列で見やすく（カード内1行ルールは維持） */
  #page-inventory .inv-l1-group-cards{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #page-inventory .inv-l1-card{ height: 100%; }

  #page-inventory .inv-l1-row3,
  #page-inventory .inv-l1-row4{ min-height: 50px; }

  #page-inventory .inv-l1-group-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }


/* 分類タブバー（横スクロール） */
.inv-category-bar {
  display: flex;
  gap: 2px;
  padding: 0 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.inv-category-bar::-webkit-scrollbar {
  display: none;
}


/* メーカーフィルター（横スクロール） */
.inv-maker-filter {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0 0 4px;
  border-bottom: none;
  scrollbar-width: thin;
}


/* 在庫L0をコンパクトに（ごちゃつき抑制） */
#page-inventory #invContainer > .ui-layer--l0{
  margin-bottom: 4px;
  padding-bottom: 4px;
}

#page-inventory .inv-container{ padding-top: 2px; }

#page-inventory .inv-category-bar{ padding-bottom: 4px; }

#page-inventory .inv-maker-filter{ padding-bottom: 4px; }

#page-inventory #invFilterBar.mini-filter{
  padding: 4px 0 0;
}

#page-inventory #invFilterBar.inv-filterbar--hidden{
  display:block !important; /* keep edit button reachable */
}

#page-inventory #invFilterBar.inv-filterbar--hidden #invSearchClearBtn,
#page-inventory #invFilterBar.inv-filterbar--hidden #invFilterResetBtn{
  display:none !important;
}

#page-inventory #invFilterBar .inv-search{
  gap: 8px;
}

#page-inventory #invFilterBar .inv-search input{
  flex: 1 1 220px;
}


/* billing buttons moved to backup page */

/* カテゴリ編集ボタンを少し控えめに */
.inv-cat-tab--cfg{
  opacity: .9;
}

.inv-cat-tab--cfg .inv-cat-icon{ font-size: 18px; }

.inv-maker-filter::-webkit-scrollbar {
  height: 2px;
}

.inv-maker-filter .filter-btn {
  flex: 0 0 auto;
}

.inv-filter-count {
  font-size: 10px;
  font-weight: 800;
  opacity: 0.78;
  font-family: var(--mono);
}


/* 分類タブ — ソフトミニマル：角・淡い面・アクセントは控えめに */
.inv-cat-tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 70px;
  padding: 8px 10px 7px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  overflow: visible;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.inv-cat-tab:hover {
  background: var(--btn-hover);
  color: var(--text);
}

.inv-cat-tab.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.inv-cat-tab.empty {
  opacity: 0.5;
}

.inv-cat-tab.empty .inv-cat-count {
  color: var(--text-faint);
}


/* タブアイコン（SVG／カスタム絵文字と共存） — タブ枠はそのまま、3D SVG のみ拡大 */
.inv-cat-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px; /* カスタム絵文字用 */
  line-height: 1;
  overflow: visible;
}

.inv-cat-tab.active .inv-cat-icon {
  color: var(--accent, #1a56db);
}

.inv-cat-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.inv-cat-icon svg.inv-cat-svg3d {
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  filter: drop-shadow(0 0.5px 1.5px rgba(0, 0, 0, 0.17));
}

.inv-cat-tab.active .inv-cat-icon svg {
  color: var(--accent, #1a56db);
  stroke: var(--accent, #1a56db);
}
.inv-cat-tab.active .inv-cat-icon svg.inv-cat-svg3d {
  color: unset !important;
  stroke: none !important;
  filter: drop-shadow(0 1px 2.5px rgba(0, 0, 0, 0.22));
}


/* タブラベル */
.inv-cat-label {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}


/* タブカウント */
.inv-cat-count {
  font-size: 10px;
  font-weight: 850;
  color: var(--text-muted);
  font-family: var(--mono);
}


/* Inventory drilldown modal (item → place) */
#invDrillModal .card{ padding: 14px 14px; }

.inv-drill-meta{
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 12px;
}

.inv-drill-meta .name{
  font-size: 16px;
  font-weight: 950;
  color: var(--text);
  margin-bottom: 4px;
}
.inv-drill-meta .inv-drill-name-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-drill-meta .inv-cat-icon--drill{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.inv-drill-meta .inv-cat-icon--drill svg{
  width: 20px;
  height: 20px;
  display: block;
}
.inv-drill-meta .inv-cat-icon--drill svg.inv-cat-svg3d{
  width: 27px;
  height: 27px;
}
.inv-drill-meta .inv-drill-name-text{
  min-width: 0;
}
.inv-drill-meta .inv-drill-spec{
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin: -2px 0 8px;
}
.inv-drill-meta .inv-drill-sub{
  font-size: 12px;
  font-weight: 800;
}

.inv-drill-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.inv-drill-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
}

.inv-drill-row:hover{ background: var(--btn-hover); }

.inv-drill-row .l{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 2px;
}

.inv-drill-row .loc{ font-size: 12px; font-weight: 900; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 260px; }

.inv-drill-row .hint{ font-size: 10px; font-weight: 800; color: var(--text-muted); }

.inv-drill-row .q{ font-family: var(--mono); font-size: 16px; font-weight: 950; color: var(--text); white-space:nowrap; }

.inv-drill-row.zero{ opacity: .55; }


/* 品目リスト */
.inv-item-list {
  display: flex;
  flex-direction: column;
}


/* ── #invFilterBar：ソフトミニマル（ピル） ── */
#page-inventory #invFilterBar.mini-filter {
  margin: 8px -4px 4px;
  padding: 0 0 8px;
  gap: 6px;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-light);
}

#page-inventory #invFilterBar .filter-btn {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 7px 12px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

#page-inventory #invFilterBar .filter-btn.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

#page-inventory #invFilterBar .filter-btn:not(.active):hover {
  background: var(--btn-hover);
  color: var(--text);
}


/* 在庫検索バー */
#page-inventory #invFilterBar .inv-search{
  display:flex;
  gap:8px;
  align-items:center;
  width:100%;
  flex-wrap:wrap;
}

#page-inventory #invFilterBar .inv-search input{
  flex: 1 1 220px;
  min-width: 180px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
  outline: none;
  box-shadow: var(--shadow-sm);
}

#page-inventory #invFilterBar .inv-search input:focus{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-sm);
}


/* 自前フィルター（入力→チップ→❌） */
#page-inventory #invFilterBar .inv-qf{
  width:100%;
  margin-top: 5px;
}

#page-inventory #invFilterBar .inv-qf-row{
  display:flex;
  gap:10px;
  align-items:center;
  width:100%;
}

#page-inventory #invFilterBar .inv-qf-input{
  flex: 1 1 220px;
  min-width: 180px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  color: var(--text);
  outline: none;
  box-shadow: var(--shadow-sm);
}

#page-inventory #invFilterBar .inv-qf-input:focus{
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), var(--shadow-sm);
}

#page-inventory #invFilterBar .inv-qf-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

#page-inventory #invFilterBar .inv-qf-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

#page-inventory #invFilterBar .inv-qf-chip .x{
  opacity: .7;
  font-weight: 900;
}

#page-inventory #invFilterBar .inv-qf-chip:hover{
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}


/* デフォルト絞り込み：現在値チップ（×で解除） */
#page-inventory #invFilterBar .inv-active-filters{
  width: 100%;
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

#page-inventory #invFilterBar .inv-af-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

#page-inventory #invFilterBar .inv-af-chip .x{
  opacity: .65;
  font-weight: 950;
}

#page-inventory #invFilterBar .inv-af-chip:hover{
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}


/* メーカーライン：同系のピル */
#page-inventory .inv-maker-filter .filter-btn {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 14px;
  margin: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

#page-inventory .inv-maker-filter .filter-btn.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

#page-inventory .inv-maker-filter .filter-btn:not(.active):hover {
  background: var(--btn-hover);
  color: var(--text);
}


/* 品目カード */
.inv-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.inv-card.open {
  box-shadow: var(--shadow-sm);
}

.inv-card.low {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}

.inv-card.low .inv-card-qty {
  color: var(--danger);
}


/* カードメイン部分（タップ領域） */
.inv-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: background var(--transition-fast);
}

.inv-card-main:hover {
  background: var(--btn-hover);
}

.inv-card-main:active {
  background: var(--btn-active);
}


/* カード情報部分 */
.inv-card-info {
  flex: 1;
  min-width: 0;
}

.inv-card-primary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.inv-card-maker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-card-maker-missing {
  font-weight: 700;
  opacity: 0.82;
}

.inv-card-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-card-mat {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 3px 8px;
  background: var(--surface2);
  border-radius: 6px;
  margin-top: 6px;
}


/* 数量表示 */
.inv-card-qty {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}

.inv-card-num {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1;
}

.inv-card-unit {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}


/* 開閉矢印 */
.inv-card-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.inv-card-arrow svg {
  width: 100%;
  height: 100%;
}


/* 詳細展開部分 */
.inv-card-detail {
  padding: 0 16px 16px;
  background: var(--surface2);
  border-top: 1px solid var(--border-light);
}


.inv-detail-section {
  padding-top: 12px;
}

.inv-detail-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}


/* 場所別在庫リスト */
.inv-loc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inv-loc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 10px;
}

.inv-loc-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-loc-qty {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--mono);
  min-width: 48px;
  text-align: right;
}

.inv-loc-qty.zero {
  color: var(--text-faint);
}

.inv-loc-adj {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.inv-loc-adj:hover {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}


/* 詳細アクション */
.inv-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-light);
}

.inv-detail-actions .btn {
  flex: 1;
  justify-content: center;
}


/* 空状態 */
.inv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.inv-empty-icon {
  color: var(--text-faint);
  margin-bottom: 16px;
}

.inv-empty-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.inv-empty-hint {
  font-size: 13px;
  color: var(--text-muted);
}

.inv-empty-cat {
  padding: 40px 20px;
  text-align: center;
}

.inv-empty-cat .inv-empty-text {
  color: var(--text-muted);
}


/* 操作ボタン */
.inv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.inv-actions .btn {
  flex: 1 1 auto;
  min-width: 120px;
  justify-content: center;
}


/* 移動履歴セクション */
.inv-history-section {
  max-width: 640px;
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.inv-history-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}


/* 基本情報グリッド */
.inv-info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inv-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.inv-info-label {
  flex-shrink: 0;
  width: 64px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.inv-info-value {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}


/* メモ表示 */
.inv-note-text {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}


/* ── 在庫 L1 + L4：ソフトミニマル（カード行・わずかな意味色） ── */
.inv-l1-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inv-l1-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-left: 6px solid color-mix(in srgb, var(--m-accent, var(--accent2)) 75%, var(--border));
  background: color-mix(in srgb, var(--m-accent, var(--accent2)) 4%, var(--surface));
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.inv-l1-row:last-child {
  margin-bottom: 0;
}

.inv-l1-row:hover {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  box-shadow: var(--shadow-md);
}

.inv-l1-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

.inv-l1-row--low {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

.inv-l1-row--warn {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

.inv-l1-row--low .inv-l1-place {
  color: color-mix(in srgb, var(--danger) 72%, var(--text));
}

.inv-l1-row--warn .inv-l1-place {
  color: color-mix(in srgb, var(--warning) 70%, var(--text));
}

.inv-l1-body {
  flex: 1;
  min-width: 0;
}

.inv-l1-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.42;
  color: var(--text);
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.inv-l1-spacer{
  flex: 1;
  min-width: 8px;
}

.inv-l1-place {
  font-weight: 600;
}

.inv-l1-sep {
  margin: 0 0.35em;
  color: var(--text-muted);
  font-weight: 500;
  opacity: 0.92;
}

.inv-l1-product {
  font-weight: 800;
  color: var(--text);
}

.inv-l1-maker{
  font-weight: 600;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inv-l1-maker-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--m-accent, var(--accent2)) 85%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-accent, var(--accent2)) 55%, var(--border));
  flex: 0 0 auto;
}

.inv-l1-line {
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--text-muted);
}

.inv-l1-qty {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.inv-l1-unit {
  font-weight: 500;
}

.inv-l1-chg {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.inv-l1-chg-na {
  opacity: 0.72;
}

.inv-l1-chg--flat .inv-l1-diff {
  color: var(--text-muted);
}

.inv-l1-chg--up .inv-l1-diff,
.inv-l1-chg--up .inv-l1-dir {
  color: color-mix(in srgb, var(--success) 88%, var(--text));
}

.inv-l1-chg--down .inv-l1-diff,
.inv-l1-chg--down .inv-l1-dir {
  color: color-mix(in srgb, var(--danger) 88%, var(--text));
}

.inv-l1-dir {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.92;
}

.inv-l1-status {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.inv-l1-status--low {
  color: var(--danger);
}

.inv-l1-status--warn {
  color: var(--warning);
}

.inv-l1-status--ok {
  color: var(--text-muted);
}


/* 場所内訳（チップ） */
.inv-l1-locs{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inv-l1-chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  max-width: 100%;
}

.inv-l1-chip:hover{
  background: color-mix(in srgb, var(--accent) 9%, var(--btn-hover));
}

.inv-l1-chip.is-zero{
  opacity: 0.55;
  background: var(--surface2);
}

.inv-l1-chip-name{
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  max-width: 18em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-l1-chip-qty{
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

.inv-l1-chip-delta{
  opacity: 0.92;
}

.inv-l1-chip[data-loc-type="site"]{
  background: color-mix(in srgb, var(--info) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--info) 20%, var(--border));
}

.inv-l1-chip[data-loc-type="custom"]{
  background: color-mix(in srgb, var(--accent2) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent2) 18%, var(--border));
}

.inv-l1-more{
  border: 1px dashed color-mix(in srgb, var(--text-muted) 35%, var(--border));
  background: transparent;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.inv-l1-more:hover{
  background: var(--btn-hover);
  color: var(--text);
}


/* 旧テーブル非表示（互換用に残す） */
#page-inventory #invTable {
  display: none !important;
}

#page-inventory footer.ui-layer--l3.inv-actions {
  position: sticky;
  top: 64px; /* under topbar */
  z-index: 6;
  margin-top: 4px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 26px rgba(56,48,42,.06);
  /* 親 .inv-container の幅に追随（560px で固定しない＝PCで途切れない） */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  overflow-x: visible;
  row-gap: 8px;
  justify-content: flex-start;
}

#page-inventory footer.inv-actions .btn {
  border-radius: 11px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 8px 12px;
  min-height: 40px;
  justify-content: center;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: min(120px, 100%);
}

  #page-inventory footer.inv-actions .btn{
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    font-size: 11px;
    padding: 8px 8px;
  }


#page-inventory .inv-history-section {
  max-width: 560px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}

#page-inventory .inv-history-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--text-muted) 94%, transparent);
}


/* UI layer L0 に余白だけ（線はヘアライン） */
#page-inventory #invContainer > .ui-layer--l0 {
  border-bottom: none;
}

#page-inventory section.ui-layer--l2 {
  margin-top: 2px;
}


.ui-num,
.inv-l1-qty,
.inv-number,
.move-history-qty,
.worker-first-panel .val,
.worker-att-cell .d {
  text-shadow: none !important;
}


/* ============================================================
   Inventory final visibility override (在庫が消える最終対策)
   - 途中に残っている「DQ-style inventory」や「旧テーブル非表示」が !important で勝ってしまうため、
     ファイル末尾で table 表示に強制復元する
   ============================================================ */
#page-inventory #invTable{
  display: table !important;
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#page-inventory #invTable thead{ display: table-header-group !important; }

#page-inventory #invTable tbody{ display: table-row-group !important; }

#page-inventory #invTable tr{ display: table-row !important; }

#page-inventory #invTable th,
#page-inventory #invTable td{
  display: table-cell !important;
}


/* ============================================================
   Inventory L1 list (invItemList) minimal styles
   - 旧invTable依存を外し、在庫が「消える」を防ぐ
   - 見た目のみ（操作は既存モーダルへ）
   ============================================================ */
#page-inventory .inv-l1-group{ margin: 10px 0 12px; }

#page-inventory .inv-l1-group-title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  color: var(--text-muted);
  margin: 0 0 6px;
  letter-spacing: .06em;
}

#page-inventory .inv-l1-group-title .t{
  flex: 0 0 auto;
}

#page-inventory .inv-onekind{
  flex: 1 1 auto;
  display:flex;
  justify-content:flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

#page-inventory .inv-onekind::-webkit-scrollbar{ height: 4px; }

#page-inventory .inv-onekind::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  border-radius: 999px;
}

#page-inventory .inv-onekind::-webkit-scrollbar-track{ background: transparent; }

#page-inventory .inv-onekind-btn{
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  color: color-mix(in srgb, var(--text-muted) 92%, transparent);
  box-shadow: 0 8px 18px rgba(56,48,42,.05);
  white-space: nowrap;
}

#page-inventory .inv-onekind-btn.active{
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important;
  box-shadow: 0 10px 22px rgba(56,48,42,.08), 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

#page-inventory .inv-onekind-btn:not(.active):hover{
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important;
  color: var(--text) !important;
}

#page-inventory .inv-l1-group-cards{ display:flex; flex-direction:column; gap:8px; }

#page-inventory .inv-l1-card{
  background: var(--glass, rgba(255,255,255,.55));
  border: 1px solid var(--border, rgba(255,255,255,.5));
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(80,60,50,.08);
  padding: 11px 12px;
  cursor: pointer;
}

#page-inventory .inv-l1-card.low{ border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }

#page-inventory .inv-l1-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
}

#page-inventory .inv-l1-name{ font-size: 19px; font-weight: 950; color: var(--text); min-width:0; display:flex; align-items:center; gap:10px; line-height:1.12; white-space:nowrap; }

#page-inventory .inv-l1-icon{
  width: 26px;
  height: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface2) 55%, rgba(255,255,255,.38));
  border: 1px solid color-mix(in srgb, var(--border) 65%, rgba(255,255,255,.35));
  box-shadow: 0 8px 18px rgba(80,60,50,.08);
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}

#page-inventory .inv-l1-name-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#page-inventory .inv-l1-oneline{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}

#page-inventory .inv-l1-spec-badge{
  flex: 0 0 auto;
  max-width: 40vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: color-mix(in srgb, var(--text) 88%, var(--accent));
}


#page-inventory .inv-l1-total{ white-space:nowrap; }

#page-inventory .inv-l1-total-num{ font-size: 28px; }


/* Inventory primary row（品名折り返し・下の重複定義と同一） */
#page-inventory .inv-l1-row3,
#page-inventory .inv-l1-row4{
  display:grid;
  align-items:center;
  gap:8px;
  padding: 2px 0;
}

#page-inventory .inv-l1-row3{
  /* メーカー列を少し詰めて品名の可視領域を広げる */
  /* チェック列と数量列を詰めて、品名の横幅を最大化 */
  grid-template-columns: 34px minmax(0, 72px) minmax(0, 1fr) 88px;
}
#page-inventory .inv-l1-cell-sel{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
  overflow: visible;
  min-width: 28px;
  width: 28px;
  flex-shrink: 0;
  box-sizing: border-box;
}
#page-inventory .inv-l1-cell-sel input.inv-l1-sel{
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--accent, #5a8a32);
  flex-shrink: 0;
}
#page-inventory .inv-l1-cell-sel.inv-l1-cell-sel--readonly{
  visibility: visible;
  width: 12px;
  min-width: 12px;
  flex-shrink: 0;
  padding: 0;
  cursor: default;
  pointer-events: none;
}

#page-inventory .inv-l1-row4{
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr) minmax(0, 128px) 96px;
}

#page-inventory .inv-l1-row4 .m{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--text-muted) 92%, transparent);
}

#page-inventory .inv-l1-row4 .m.empty{
  opacity:0;
}

#page-inventory .inv-l1-row4 .n1{
  min-width:0;
  overflow:visible;
  text-overflow:unset;
  white-space:normal;
  word-break:break-word;
  line-height:1.28;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .01em;
  color: var(--text);
}

#page-inventory .inv-l1-row4 .mat{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--text) 72%, var(--text-muted));
}

#page-inventory .inv-l1-row3 .m,
#page-inventory .inv-l1-row3 .n1,
#page-inventory .inv-l1-row3 .qty{
  min-width:0;
}
#page-inventory .inv-l1-row3 .qty{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  align-self:center;
}

#page-inventory .inv-l1-row3 .m,
#page-inventory .inv-l1-row3 .n1{
  justify-self:start;
  text-align:left;
}

#page-inventory .inv-l1-row3 .m{
  /* メーカーは左寄せ（省略も自然に） */
  justify-self:start;
  text-align:left;
}

#page-inventory .inv-l1-row3 .n1{
  /* 品名は中央寄せで揃える（メーカーは左寄せのまま） */
  justify-self:stretch;
  text-align:center;
}

#page-inventory .inv-l1-row3 .qty{
  justify-self:end;
  text-align:right;
}

#page-inventory .inv-l1-row3 .m{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--text-muted) 92%, transparent);
  white-space:normal;
  word-break:break-word;
  line-height:1.25;
  overflow:visible;
  text-overflow:unset;
  align-self:center;
}

#page-inventory .inv-l1-row3 .m.empty{ opacity:0; }

#page-inventory .inv-l1-row3 .n1{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .01em;
  color: var(--text);
  white-space:normal;
  word-break:break-word;
  line-height:1.28;
  overflow:visible;
  text-overflow:unset;
}

#page-inventory .inv-l1-row3 .qty{
  text-align:right;
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

#page-inventory .inv-l1-row3 .qty.zero{
  color: color-mix(in srgb, var(--text-muted) 80%, var(--text));
}


/* 在庫一覧は福行（詳細バッジ）を出さない */
#page-inventory .inv-material-detail-badge{
  display:none !important;
}

#page-inventory .inv-l1-row4 .qty{
  text-align:right;
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

#page-inventory .inv-l1-row4 .qty.zero{
  color: color-mix(in srgb, var(--text-muted) 80%, var(--text));
}


/* slightly tighter card height */
#page-inventory .inv-l1-card{
  padding: 12px 14px !important;
}


/* subtle category tint (very light, not flashy) */
#page-inventory .inv-l1-card{
  --inv-tint: transparent;
  position: relative;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--inv-tint) 16%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 92%, transparent) !important;
}

#page-inventory .inv-l1-card[data-inv-cat="1液材"]{ --inv-tint: hsl(200 80% 62% / .45); }

#page-inventory .inv-l1-card[data-inv-cat="2液材"]{ --inv-tint: hsl(260 78% 66% / .45); }

#page-inventory .inv-l1-card[data-inv-cat="トナー"]{ --inv-tint: hsl(18 90% 62% / .42); }

#page-inventory .inv-l1-card[data-inv-cat="カートリッジ"]{ --inv-tint: hsl(140 70% 52% / .40); }

#page-inventory .inv-l1-card[data-inv-cat="副資材"]{ --inv-tint: hsl(45 90% 58% / .36); }

  #page-inventory .inv-l1-row3 .m{ font-size: 11px; }

  #page-inventory .inv-l1-row3 .n1{ font-size: 19px; }

  #page-inventory .inv-l1-row3 .qty{ font-size: 32px; }


  #page-inventory .inv-l1-row4{
    grid-template-columns: minmax(0, 82px) minmax(0,1fr) minmax(0, 110px) 84px;
    gap:8px;
  }

  #page-inventory .inv-l1-row4 .m{ font-size: 11px; }

  #page-inventory .inv-l1-row4 .n1{ font-size: 19px; }

  #page-inventory .inv-l1-row4 .mat{ font-size: 11px; }

  #page-inventory .inv-l1-row4 .qty{ font-size: 23px; }


  /* Inventory: prevent chip rows from forcing horizontal scroll */
  #page-inventory .inv-l1-head{ align-items: flex-start !important; }

  #page-inventory .inv-l1-total-num{ font-size: 20px !important; }


  /* Inventory drill modal header buttons: don't overflow */
  #invDrillModal .modal-head{ flex-wrap: wrap !important; }

  #invDrillModal .modal-head > div{ flex-wrap: wrap !important; }

#page-inventory .inv-l1-total{ display:flex; align-items:baseline; gap:6px; flex-shrink:0; }

#page-inventory .inv-l1-total-num{ font-family: var(--mono); font-size: 26px; font-weight: 950; letter-spacing: -.02em; }

#page-inventory .inv-l1-total-unit{ font-size: 12px; font-weight: 900; color: var(--text-muted); }

#page-inventory .inv-l1-chips{ margin-top: 10px; display:flex; flex-wrap:wrap; gap:8px; }

#page-inventory .inv-l1-muted{ font-size: 11px; font-weight: 800; color: var(--text-muted); opacity: .85; }

/* 在庫ツールバー：モバイルでタップが下に抜けにくくするのみ（一覧グリッドは変更しない） */
@media (max-width: 768px){
  #page-inventory footer.ui-layer--l3.inv-actions{
    z-index: 50 !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
  }
  #page-inventory footer.inv-actions .btn{
    position: relative;
    z-index: 1;
    pointer-events: auto;
  }
}

/* ═══════ ダッシュボード：コンパクト & 数字の読みやすさ（全体） ═══════ */
#page-dashboard .dash-layer--l0{
  margin-bottom: 8px;
  padding-bottom: 8px;
}
#page-dashboard .dash-layer--l1{
  margin-bottom: 8px;
}
#page-dashboard .dash-gadget-strip{
  margin-bottom: 10px;
}
#page-dashboard .dash-prio-layout{
  margin-top: 6px;
}
@media (min-width: 720px){
  #page-dashboard .dash-prio-layout{
    gap: 11px;
  }
}
#page-dashboard #dashModeProgress #kpiCardGrid.kpi-card-grid{
  gap: 10px;
  margin-bottom: 12px;
}
#page-dashboard #dashModeProgress #kpiCardGrid .kpi-card{
  padding: 12px 12px 10px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(56,48,42,.06);
}
#page-dashboard #dashModeProgress #kpiCardGrid .kpi-card::before{
  height: 3px;
  border-radius: 14px 14px 0 0;
}
#page-dashboard #dashModeProgress #kpiCardGrid .kpi-num{
  font-size: clamp(26px, 6.5vw, 34px);
  font-weight: 920;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
  letter-spacing: -0.02em;
}
#page-dashboard #dashModeProgress #kpiCardGrid .kpi-unit{
  font-size: 13px;
  font-weight: 800;
}
#page-dashboard #dashModeProgress #kpiCardGrid .kpi-label{
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.22;
}
#page-dashboard #dashModeProgress #kpiCardGrid .kpi-icon{
  font-size: 15px;
}
#page-dashboard #dashModeProgress #kpiCardGrid .kpi-sub{
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.32;
}
#page-dashboard #dashModeProgress #kpiCardGrid .kpi-progress{
  margin-top: 5px;
  height: 5px;
}
#page-dashboard #dashModeProgress #kpiCardGrid .kpi-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(56,48,42,.09);
}
@media (max-width: 768px){
  #page-dashboard #dashModeProgress #kpiCardGrid .kpi-num{
    font-size: clamp(24px, 8vw, 30px);
  }
  #page-dashboard #dashModeProgress #kpiCardGrid .kpi-card{
    padding: 11px 11px 9px;
  }
}
@media (min-width: 769px) and (max-width: 1100px){
  #page-dashboard #dashModeProgress #kpiCardGrid.kpi-card-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#page-dashboard #dashSiteReportHistory .dash-site-history-date{
  font-size: calc(11px * 2.1);
}
#page-dashboard #dashSiteReportHistory .dash-site-history-item{
  padding: 7px 9px;
  border-radius: 10px;
}

#page-dashboard .dash-labor-row{
  margin-top: 8px;
  padding: 8px 10px;
  gap: 5px 8px;
}
#page-dashboard .dash-labor-num{
  font-variant-numeric: tabular-nums;
  font-size: clamp(17px, 4vw, 22px);
}
#page-dashboard .dash-labor-unit{
  font-size: 12px;
}

#page-dashboard #dashModeStock .stock-kpi-row{
  gap: 8px;
  margin-bottom: 12px;
}
#page-dashboard #dashModeStock .stock-kpi{
  padding: 11px 9px;
  border-radius: 12px;
}
#page-dashboard #dashModeStock .stock-kpi-label{
  font-size: 10px;
  margin-bottom: 5px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
#page-dashboard #dashModeStock .stock-kpi-value{
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

#page-dashboard #stockFirstInfo.stock-firstinfo.card,
#page-dashboard .stock-firstinfo.card{
  padding: 11px 12px;
  border-radius: 14px;
}

#page-dashboard .dash-mat-slide{
  padding: 5px 7px 7px;
  border-radius: 9px;
  width: clamp(102px, 28vw, 132px);
}
#page-dashboard .dash-mat-slide-grid{
  gap: 6px 8px;
}
#page-dashboard .dash-mat-slide-meta strong{
  font-variant-numeric: tabular-nums;
}

#page-dashboard .dash-glance-mat-label{
  margin-top: 8px;
  font-size: 9.5px;
  letter-spacing: 0.09em;
}
#page-dashboard .dash-glance-ai{
  padding-top: 10px;
  margin-top: 4px;
}

/* ダッシュ：レイアウトは維持しつつ本文・数字のコントラストと判読性 */
#page-dashboard #dashFirstInfo .dash-glance-main{
  font-size: 12px;
  line-height: 1.42;
}
#page-dashboard #dashFirstInfo .dash-fi-place-addr{
  font-size: 12px;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 32%, var(--text-muted));
}
#page-dashboard #dashFirstInfo .dash-glance-sched-row{
  margin-top: 9px;
  gap: 10px 16px;
}
#page-dashboard #dashFirstInfo .dash-glance-sched-row .dash-glance-plan{
  font-size: 13px;
  font-weight: 720;
  line-height: 1.35;
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--text) 44%, var(--text-muted));
}
#page-dashboard #dashFirstInfo .dash-glance-sched-row .dash-glance-koki{
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  text-align: left;
  word-break: break-word;
  color: color-mix(in srgb, var(--text) 46%, var(--text-muted));
}
#page-dashboard #dashFirstInfo .dash-glance-sched-row .dash-glance-date{
  font-size: 1.07em;
}
#page-dashboard #dashFirstInfo .dash-m-line-val{
  font-size: 13px;
}
#page-dashboard #dashFirstInfo .dash-m-line-val strong{
  font-size: 14px;
  font-weight: 950;
}
#page-dashboard #dashFirstInfo .dash-m-line-lab{
  font-size: 11.5px;
}
#page-dashboard #dashFirstInfo .dash-m-line-pct{
  font-size: 12px;
  font-weight: 900;
}
#page-dashboard #dashFirstInfo .dash-m-locs{
  font-size: 12px;
}
#page-dashboard #dashFirstInfo .dash-glance-matref{
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 42%, var(--text-muted));
}
#page-dashboard #dashBreakdown .dash-row-name{
  font-size: 15px;
  line-height: 1.28;
}
#page-dashboard #dashBreakdown .dash-breakdown-title{
  font-size: 11.5px;
  letter-spacing: 0.07em;
}
#page-dashboard #dashBreakdown .dash-row-qty{
  font-size: 13px;
}
#page-dashboard #dashBreakdown .dash-row-pct{
  font-size: 15px;
}

/* モバイル：第一情報カードの余白 */
@media (max-width: 560px) {
  #page-dashboard #dashFirstInfo.card {
    padding: 12px 11px 11px;
  }
}

/* 極狭幅：材料行で不足バッジを下段に（中央寄せ） */
@media (max-width: 400px) {
  .dash-mat-chip {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .dash-mat-chip-badge {
    align-self: stretch;
    text-align: center;
  }
}

/* ============================================================
   Mobile performance (≤768px): 軽量化
   - backdrop-filter はモバイルで合成コストが高い → 無効化し見た目は不透過背景で維持
   - body 擬似要素の常時アニメ・テープ演出を止めてCPU/GPUを節約
   - 末尾配置で既存の !important ルールより優先
   ============================================================ */
@media (max-width: 768px) {
  html body .modal-overlay,
  html body .ring-detail-overlay,
  html body .bd-inv-picker-backdrop,
  html body .image-viewer-overlay,
  html body .image-viewer-backdrop,
  html body .overlay,
  html body .drawer-backdrop,
  html body .sidebar-backdrop,
  html body .sidebar,
  html body .mobile-bottom-nav,
  html body .topbar,
  html body .login-card,
  html body .toast,
  html body #page-breakdownlist .perf-tools,
  html body #page-inventory footer.ui-layer--l3.inv-actions,
  html body #page-measure > .card,
  html body #page-measure .measure-sticky-panel,
  html body #page-measure .measure-sticky-panel.collapsed,
  html body #page-measure .measure-sticky-panel.dragging,
  html body #page-measure .meter-hinge-tab,
  html body.theme-apple .topbar,
  html body.theme-watch .topbar,
  html body.theme-watch .card,
  html body.theme-watch .global-summary,
  html body.theme-watch .modal-overlay,
  html body.theme-watch .ring-detail-overlay,
  html body.theme-watch .toast,
  html body.theme-watch .sidebar-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* デフォルト／cosmic glass（高specificityで無効化） */
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .topbar,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .card,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .stat-card,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .global-summary,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .modal,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .board-side,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .board-post-form,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .board-post,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .bd-card,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .photo-card,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .week-cell,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .cal-cell,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .site-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-theme="darksoft"] .modal-overlay,
  html[data-theme="darksoft"] .ring-detail-overlay {
    background: rgba(0, 0, 0, 0.58) !important;
  }

  body::before,
  body::after {
    animation: none !important;
  }
  body::before {
    opacity: 0.3 !important;
  }
  body::after {
    opacity: 0 !important;
  }

  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .topbar::after {
    animation: none !important;
  }

  html body .mob-nav-icon {
    filter: none !important;
  }

  .big-bar-fill,
  .progress-fill,
  #page-sites .site-progress-fill,
  .kpi-progress-fill,
  .perf-gauge-fill {
    animation: none !important;
  }

  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .card:hover,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .stat-card:hover,
  html html:not([data-theme="studio"]):not([data-theme="warm"]):not([data-theme="cool"]):not([data-theme="darksoft"]) body:not(.theme-apple):not(.theme-casio):not(.theme-watch) .site-card:hover {
    transform: none !important;
  }
}

/* ダッシュ：現場在庫へジャンプする調整ボタン */
.dash-bdmat-stock-actions {
  margin-top: 6px;
}

/* 在庫ページ：サイドバー「現場の在庫」クイックモーダル */
.inv-site-stock-quick-modal.modal {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.inv-quick-stock-body {
  max-height: min(52vh, 440px);
  overflow: auto;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.inv-quick-stock-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding: 0 4px;
}
.inv-quick-stock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.inv-quick-stock-row:last-child {
  border-bottom: none;
}
.inv-quick-stock-row-main {
  flex: 1;
  min-width: 0;
}
.inv-quick-stock-name {
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}
.inv-quick-stock-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-word;
}
.inv-quick-stock-qty {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  min-width: 52px;
}
.inv-quick-stock-num {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
}
.inv-quick-stock-unit {
  font-size: 10px;
  color: var(--text-muted);
}
.sidebar-inv-site-stock {
  margin-bottom: 6px;
}

/* ══ font-scale 連動（ファイル末尾・--font-scale は app.js が html に設定）══
   モバイル body の calc 化だけでは、在庫の多数の固定 px が縮まないため一覧を乗算する */
#page-inventory .inv-l1-name {
  font-size: calc(19px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-icon {
  font-size: calc(14px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-spec-badge {
  font-size: calc(11px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-total-unit {
  font-size: calc(12px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-muted {
  font-size: calc(11px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-total-num {
  font-family: var(--mono) !important;
  font-size: calc(26px * var(--font-scale, 1)) !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}
#page-inventory .inv-l1-row3 .m {
  /* メーカーは控えめ（品名・数量を主役に） */
  font-size: calc(10px * var(--font-scale, 1)) !important;
  font-weight: 800 !important;
  opacity: 0.85 !important;
}
#page-inventory .inv-l1-row3 .n1 {
  /* 品名は一段大きく */
  font-size: calc(21px * var(--font-scale, 1)) !important;
  /* 長い品名（例: 下塗りプライマー等）も“きっちり収まる”ように */
  padding: 0 4px !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere !important;
}
#page-inventory .inv-l1-row3 .qty {
  /* 数量は最優先で大きく */
  font-size: calc(36px * var(--font-scale, 1)) !important;
  font-weight: 950 !important;
}
#page-inventory .inv-l1-row4 .m {
  font-size: calc(12px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-row4 .n1 {
  font-size: calc(20px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-row4 .mat {
  font-size: calc(12px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-row4 .qty {
  font-size: calc(24px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-quick-stock-row {
  font-size: calc(13px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-quick-stock-meta {
  font-size: calc(11px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-quick-stock-unit {
  font-size: calc(10px * var(--font-scale, 1)) !important;
}
#invDrillModal .inv-dq-name {
  font-size: calc(17px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-number {
  font-size: calc(14px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-number.total {
  font-size: calc(15px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-row-two-part .inv-number {
  font-size: calc(16px * var(--font-scale, 1)) !important;
}

@media (max-width: 768px) {
  #page-inventory .inv-l1-total-num {
    font-size: calc(20px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-cat-label {
    font-size: calc(12px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-cat-count {
    font-size: calc(11px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-maker-filter .filter-btn {
    font-size: calc(13px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-maker-block-head {
    font-size: calc(14px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-cat-icon {
    font-size: calc(16px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .m {
    font-size: calc(9px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .n1 {
    /* スマホは「中央で揃えつつ、できるだけ全文を見せる」 */
    font-size: calc(18px * var(--font-scale, 1)) !important;
    letter-spacing: -0.02em !important;
    padding: 0 2px !important;
    line-height: 1.16 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    /* 2行までは表示（それでも長い場合のみ末尾…） */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: calc(34px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row4 .m {
    font-size: calc(11px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row4 .n1 {
    font-size: calc(19px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row4 .mat {
    font-size: calc(11px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row4 .qty {
    font-size: calc(23px * var(--font-scale, 1)) !important;
  }
  #invDrillModal .inv-dq-name {
    font-size: calc(16px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-number {
    font-size: calc(15px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-row-two-part .inv-number {
    font-size: calc(17px * var(--font-scale, 1)) !important;
  }
}

/* =========================
   Backup page layout tuning
   ========================= */
#page-backup .backup-main-card {
  padding: 16px 14px !important;
}
#page-backup .backup-main-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
  color: var(--accent) !important;
}
#page-backup .backup-main-icon svg {
  width: 40px !important;
  height: 40px !important;
}
#page-backup .backup-subtle {
  font-size: 11px !important;
  line-height: 1.55 !important;
  margin-bottom: 12px !important;
}
#page-backup .backup-mini-card {
  margin-top: 10px !important;
}
#page-backup .backup-more {
  margin-top: 12px !important;
  padding: 12px 12px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
#page-backup .backup-more > summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--text);
  list-style: none;
}
#page-backup .backup-more > summary::-webkit-details-marker { display: none; }
#page-backup .backup-more-body { margin-top: 10px; }
#page-backup .backup-grid-actions {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}
#page-backup .backup-col-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  align-self: stretch;
}
@media (max-width: 768px) {
  #page-backup > .grid.grid-2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #page-backup .backup-col-right {
    order: -1;
  }
}
#page-backup .backup-lang-card,
#page-backup .backup-lang-inline {
  text-align: left;
  margin-top: 14px;
  padding: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
#page-backup .backup-lang-inline .backup-lang-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#page-backup .backup-lang-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 400px) {
  #page-backup .backup-lang-seg {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
#page-backup .backup-lang-btn {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 10px 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
#page-backup .backup-lang-btn:hover {
  border-color: var(--accent);
}
#page-backup .backup-lang-btn.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* 旧・左下の言語浮動ボタン（誤タップ防止のため常に非表示） */
#langToggleBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════════
   ベース レスポンシブ設計パッチ
   方針: spacing / typography / safe-area を変数化し全画面に適用
   ブレークポイント: xs(~480) sm(~768) md(~1024) lg(1025+)
   xs : ~480px   → スマートフォン縦（小型 iPhone SE / Android コンパクト）
   sm : ~768px   → スマートフォン横 / 大型スマートフォン縦
   md : ~1024px  → iPad / タブレット
   lg :  1025px~ → PC / デスクトップ
   ════════════════════════════════════════════════════════════════ */

/* ── スペーシングスケール（8px基準グリッド） ─────────────────── */
:root {
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  /* ページ余白: デスクトップ基準 */
  --page-px: 24px;
  --page-py: 20px;

  /* カード内余白 */
  --card-px: 18px;
  --card-py: 16px;

  /* セクション間のマージン */
  --section-gap: 20px;
}

/* ── タイポグラフィスケール（流動サイズ） ────────────────────── */
:root {
  /* clamp(最小, 推奨, 最大) — 端末幅に応じて自動スケール */
  --text-xs:   clamp(9px,  2.2vw, 10px);
  --text-sm:   clamp(11px, 2.6vw, 12px);
  --text-base: clamp(12px, 3.0vw, 14px);
  --text-md:   clamp(13px, 3.4vw, 15px);
  --text-lg:   clamp(15px, 4.0vw, 18px);
  --text-xl:   clamp(20px, 5.5vw, 26px);
  --text-2xl:  clamp(28px, 7.5vw, 42px);
  /* 数字専用（モノスペース系） */
  --text-num-sm:  clamp(13px, 3.2vw, 15px);
  --text-num-md:  clamp(20px, 5.0vw, 26px);
  --text-num-lg:  clamp(28px, 7.5vw, 42px);
}

/* ── Safe Area 対応変数 ──────────────────────────────────────── */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);

  /* topbar 実効高さ（safe-area 込み） */
  --topbar-h: calc(54px + var(--safe-top));
}

/* ── ページ余白を変数ベースに統一 ────────────────────────────── */
.page {
  padding: var(--page-py) var(--page-px) calc(var(--page-py) + var(--sp-4));
  padding-left:  max(var(--page-px), var(--safe-left));
  padding-right: max(var(--page-px), var(--safe-right));
}

/* ── タブレット（md: 769px〜1024px） ─────────────────────────── */
/*
  iPad は 768px 超なので既存の max-width:768px には引っかからない。
  ここで明示的に対応する（間延び対策）。
*/
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --page-px: 20px;
    --page-py: 16px;
    --card-px: 16px;
    --card-py: 14px;
    --section-gap: 16px;
  }

  /* コンテンツ幅を抑えて間延び防止 */
  .page {
    max-width: 900px;
  }

  /* stat-card は3列に（4列だと広すぎ、2列だと狭い） */
  .stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* site-grid のカード幅を少し広めに */
  .site-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }
}

/* ── モバイル（sm: ~768px） ──────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --page-px: 14px;
    --page-py: 14px;
    --card-px: 14px;
    --card-py: 12px;
    --section-gap: 14px;
    --topbar-h: calc(50px + var(--safe-top));
  }

  .page {
    padding-bottom: calc(72px + var(--safe-bottom) + var(--sp-3));
  }
}

/* ── 小型スマートフォン（xs: ~480px） ────────────────────────── */
@media (max-width: 480px) {
  :root {
    --page-px: 12px;
    --page-py: 12px;
    --card-px: 12px;
    --card-py: 10px;
    --section-gap: 12px;
  }

  /* テキストを少しだけ締める */
  :root {
    --text-base: clamp(11px, 3.2vw, 13px);
    --text-md:   clamp(12px, 3.6vw, 14px);
  }
}

/* ── PC 大画面（lg: 1025px+） ────────────────────────────────── */
@media (min-width: 1025px) {
  :root {
    --page-px: 28px;
    --page-py: 24px;
    --card-px: 20px;
    --card-py: 18px;
    --section-gap: 24px;
  }
}

/* ── カード共通の padding を変数に紐付け ─────────────────────── */
.card,
.stat-card,
.global-summary,
.site-card .site-card-body,
.bd-card,
.board-post,
.board-post-form,
.board-side {
  padding: var(--card-py) var(--card-px);
}

/* ── セクション間マージンを変数に紐付け ─────────────────────── */
.stats-row,
.global-summary,
.site-grid,
.kpi-card-grid {
  margin-bottom: var(--section-gap);
}

/* ── Topbar: safe-area + 高さを変数で管理 ────────────────────── */
.topbar {
  padding-top:    max(12px, calc(var(--safe-top) + 8px));
  padding-left:   max(24px, calc(var(--safe-left) + 16px));
  padding-right:  max(24px, calc(var(--safe-right) + 16px));
  min-height: var(--topbar-h);
}

/* ── 下ナビ: safe-area 対応を変数ベースに ────────────────────── */
.mobile-bottom-nav {
  padding-bottom: max(6px, calc(var(--safe-bottom) + 4px));
  padding-left:   max(4px, var(--safe-left));
  padding-right:  max(4px, var(--safe-right));
}

/* ── サイドバー: sticky top を topbar 高さと連動 ─────────────── */
@media (min-width: 769px) {
  .sidebar {
    top: 0;
    height: 100vh;
  }

  /* コンテンツエリアが topbar 分だけ下にずれるので sticky の基点を合わせる */
  #page-dashboard .dash-mode-tabs-row {
    top: var(--topbar-h) !important;
  }
}

/* ── モーダル: 画面下から出るシートスタイル（モバイルのみ） ──── */
@media (max-width: 768px) {
  .modal {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto;
    padding-bottom: max(20px, calc(var(--safe-bottom) + 12px)) !important;
  }
}

/* ── テーブルラッパー: 横スクロール時の safe-area 対応 ───────── */
.table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-left:  0;
  padding-right: 0;
}

/* ── フォーム要素: タップ精度を確保 ─────────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important; /* iOS のズーム防止 */
    min-height: 44px;           /* Appleの推奨タップ最小サイズ */
  }

  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* 小さいボタン（btn-sm）は除外 */
  .btn.btn-sm {
    min-height: 36px;
    min-width: 36px;
  }
}

/* ── hover 演出はポインターデバイスのみ ─────────────────────── */
@media (hover: none) {
  .card:hover,
  .stat-card:hover,
  .site-card:hover,
  .nav-item:hover,
  .btn:hover {
    transform: none !important;
    box-shadow: inherit !important;
    border-color: inherit !important;
  }
}

/* ── 横向き（landscape）スマートフォン対応 ───────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  :root {
    --page-py: 8px;
    --topbar-h: calc(44px + var(--safe-top));
  }

  .mobile-bottom-nav {
    /* 横向きでは下ナビを薄くする */
    opacity: 0.92;
  }
}

/* ── 印刷 ─────────────────────────────────────────────────────── */
@media print {
  .sidebar,
  .topbar,
  .mobile-bottom-nav,
  .dash-mode-tabs-row,
  .btn {
    display: none !important;
  }

  .page {
    padding: 0 !important;
    display: block !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   ダッシュボード デザイン整備パッチ（cursor_dashboard_redesign.md）
   ════════════════════════════════════════════════════════════════ */

/* --- 1. ページ全体の余白 --- */
#page-dashboard.page {
  padding: 20px 24px 32px;
}
@media (max-width: 768px) {
  #page-dashboard.page {
    padding: 14px 14px 24px;
  }
}

/* --- 2. モードタブ行（進捗 / 在庫） --- */
#page-dashboard .dash-mode-tabs-row {
  background: color-mix(in srgb, var(--bg) 96%, var(--surface)) !important;
  box-shadow: 0 2px 8px rgba(56, 48, 42, .05) !important;
  padding-top: 6px !important;
  padding-bottom: 8px !important;
  gap: 8px !important;
}

#page-dashboard .dash-mode-tab {
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  letter-spacing: .02em;
}

/* --- 3. 現場チップ列（sitebar） --- */
#page-dashboard #dashSiteBars {
  padding: 6px 8px !important;
  border-radius: 10px !important;
}

#page-dashboard .dash-sitebar {
  gap: 6px 8px !important;
  margin-top: 6px !important;
}

#page-dashboard .dash-site-chip {
  padding: 5px 10px !important;
  border-radius: 8px !important;
}

#page-dashboard .dash-site-chip-name {
  font-size: 12px !important;
  font-weight: 800 !important;
}

#page-dashboard .dash-site-chip-meta {
  font-size: 10.5px !important;
}

/* --- 4. KPI サマリーカード --- */
.global-summary {
  padding: 20px 22px !important;
  border-radius: 14px !important;
  margin-bottom: 18px !important;
}

.global-summary-head {
  margin-bottom: 16px !important;
}

.global-summary-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}

.big-progress-num {
  font-size: 40px !important;
  letter-spacing: -0.03em;
}

.big-bar {
  height: 10px !important;
  border-radius: 5px !important;
}

.big-bar-fill {
  border-radius: 5px !important;
}

/* --- 5. 統計行（stat-card） --- */
.stats-row {
  gap: 10px !important;
  margin-bottom: 18px !important;
}

.stat-card {
  padding: 14px 16px 16px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s !important;
}

.stat-card:hover {
  box-shadow: var(--shadow-sm) !important;
}

.stat-card::before {
  height: 2px !important;
}

.stat-num {
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  color: var(--text-muted) !important;
  letter-spacing: .02em;
}

@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .stat-num {
    font-size: 22px !important;
  }
}

/* --- 6. グローバル統計リスト --- */
.global-stats-list {
  gap: 6px !important;
}

.global-stat-row {
  padding: 7px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

.global-stat-row .label {
  font-weight: 500 !important;
}

.global-stat-row .val {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* --- 7. 現場詳細カード（dash-glance） --- */
.dash-glance {
  gap: 10px !important;
}

.dash-glance-head {
  gap: 12px !important;
}

.dash-glance-pct {
  font-size: clamp(30px, 7.5vw, 46px) !important;
  letter-spacing: -0.04em !important;
}

.dash-glance-pct-sym {
  opacity: .60 !important;
}

.dash-glance-slide-lab {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}

.dash-glance-slide-val {
  font-size: 11px !important;
  font-weight: 700 !important;
}

.dash-glance-m-lines {
  gap: 12px !important;
  margin-top: 10px !important;
}

.dash-glance-slide-row {
  gap: 6px !important;
}

.dash-glance-mat-label {
  font-size: 9.5px !important;
  letter-spacing: .10em !important;
  margin-top: 14px !important;
}

/* --- 8. スライダー共通 --- */
.dash-bd-slide-track-wrap {
  height: 8px !important;
  margin-top: 6px !important;
}

.dash-bd-slide-needle {
  width: 12px !important;
  height: 12px !important;
  margin-top: -6px !important;
  margin-left: -6px !important;
  border-width: 2px !important;
  box-shadow: 0 1px 4px rgba(56, 48, 42, .14) !important;
}

.dash-bd-slide-dot {
  width: 6px !important;
  height: 6px !important;
  margin-top: -3px !important;
  margin-left: -3px !important;
  border-width: 1.5px !important;
}

.dash-bd-slide-axis {
  height: 16px !important;
  margin-top: 3px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

.dash-bd-slide--compact .dash-bd-slide-track-wrap {
  height: 7px !important;
}
.dash-bd-slide--compact .dash-bd-slide-needle {
  width: 10px !important;
  height: 10px !important;
  margin-top: -5px !important;
  margin-left: -5px !important;
}
.dash-bd-slide--compact .dash-bd-slide-dot {
  width: 5px !important;
  height: 5px !important;
}

/* --- 9. 必要材料バッジ（クオーツタイル） --- */
.dash-quartz-kpi-group--inline-mat {
  gap: 5px !important;
  width: min(100%, 234px) !important;
}

.dash-quartz-kpi-group--inline-mat .dash-quartz-tile {
  padding: 5px 6px 6px !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dash-quartz-kpi-group--inline-mat .dash-quartz-tile--lack {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--danger) 22%, var(--border)) !important;
}

.dash-quartz-kpi-group--inline-mat .dash-quartz-k {
  font-size: 8.5px !important;
  letter-spacing: .07em !important;
  opacity: .72 !important;
}

.dash-quartz-kpi-group--inline-mat .dash-quartz-v {
  font-size: 15px !important;
  font-weight: 800 !important;
}

.dash-quartz-kpi-group--inline-mat .dash-quartz-u {
  font-size: 9px !important;
  opacity: .75 !important;
}

/* --- 10. 材料カード（fish-card） --- */
.dash-fi-mat-mini--fish {
  gap: 10px !important;
  margin-top: 12px !important;
}

.dash-fi-mat-fish-card {
  padding: 14px 16px 12px !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.dash-fi-mat-fish-card .dash-row-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

.dash-fi-mat-fish-card--lack {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--danger) 38%, transparent) !important;
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border)) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dash-bdmat-stock-actions .btn {
  font-size: 11px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  opacity: .88;
  min-width: auto !important;
  width: auto !important;
}

.dash-row-meters-pill {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

.dash-bdmat-title-row-trail {
  gap: 6px !important;
  align-items: center !important;
}

/* --- 11. 内訳セクション（dash-breakdown） --- */
.dash-breakdown {
  margin-top: 16px !important;
}

.dash-breakdown .dash-row-name {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.dash-breakdown .dash-row-seal {
  font-size: 11px !important;
  margin-top: 3px !important;
}

.dash-breakdown .dash-row-metrics {
  gap: 8px !important;
  margin-top: 10px !important;
}

/* ═══════════════════════════════════════════════════════════
   現場マスタ（#page-sites）デザイン整備パッチ
   余白・タイポグラフィ・バッジ・ボタンの視認性を整える
   ═══════════════════════════════════════════════════════════ */

/* ── カードタイトル ── */
#page-sites .card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 12px !important;
}

/* ── テーブルヘッダー ── */
#page-sites th {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  opacity: 0.72;
  padding: 9px 12px !important;
}

/* ── テーブルセル ── */
#page-sites td {
  padding: 10px 12px !important;
  font-size: 12px;
}

/* ── 行 hover（ポインターデバイスのみ） ── */
@media (hover: hover) {
  #page-sites .site-row:hover td {
    background-color: var(--accent-subtle) !important;
  }
}

/* ── 現場名（主要情報）── */
#page-sites .site-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.3;
}

/* ── 住所（副情報）── */
#page-sites .site-addr {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  margin-top: 3px !important;
  line-height: 1.4;
}

/* ── 発注者 ── */
#page-sites .site-client {
  font-size: 11px !important;
  color: var(--text) !important;
}

/* ── 数値（撤去・充填 m）── */
#page-sites .site-num {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* ── 進捗 % ── */
#page-sites .site-progress-pct {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  min-width: 36px;
}

/* ── 状態バッジ（現場マスタ内では少し引き締める）── */
#page-sites .badge {
  padding: 3px 8px !important;
  font-size: 11px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* ── 操作ボタン（btn-sm 共通）── */
#page-sites .site-actions .btn {
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  line-height: 1.3;
  padding: 5px 7px !important;
}

/* 削除ボタン：ホバーで赤みを出す */
#page-sites .site-actions .btn-soft-red {
  color: var(--text-faint) !important;
  opacity: 0.85;
}
@media (hover: hover) {
  #page-sites .site-actions .btn-soft-red:hover {
    color: var(--danger) !important;
    opacity: 1;
  }
}

/* ── ページ下部ボタン行 ── */
#page-sites .action-row {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border);
  gap: 8px !important;
}

#page-sites .action-row .btn {
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
}


/* ── タブレットカードモード（769–1200px）補正 ── */
@media (min-width: 769px) and (max-width: 1200px) {
  /* カードになった tr の余白を広げる */
  #page-sites tr {
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }

  /* データ行の縦間隔 */
  #page-sites td {
    padding: 4px 0 !important;
  }

  /* ラベル（data-label の ::before）*/
  #page-sites td[data-label]::before {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    opacity: 0.65;
    min-width: 66px !important;
  }

  /* 現場名行（1列目）の下線に余白 */
  #page-sites td:first-child {
    padding-bottom: 9px !important;
    margin-bottom: 7px !important;
  }

  /* 操作行（最終列）の上線に余白 */
  #page-sites td:last-child {
    padding-top: 9px !important;
    margin-top: 7px !important;
  }

  /* ボタンの高さを確保（タッチ操作） */
  #page-sites .site-actions .btn {
    min-height: 36px !important;
    font-size: 11px !important;
  }
}


/* ── モバイル（〜768px）補正 ── */
@media (max-width: 768px) {
  /* データ行の縦間隔 */
  #page-sites td {
    padding: 5px 0 !important;
    font-size: 12px;
  }

  /* ラベル */
  #page-sites td::before {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    opacity: 0.65;
  }

  /* 現場名行の下余白 */
  #page-sites td:first-child {
    padding-bottom: 10px !important;
    margin-bottom: 7px !important;
  }

  /* 操作ボタンをタップしやすく */
  #page-sites .site-actions .btn {
    min-height: 40px !important;
    font-size: 12px !important;
    padding: 7px 6px !important;
    border-radius: 8px !important;
  }

  /* ページ下部ボタンを横に広げる */
  #page-sites .action-row .btn {
    flex: 1 1 150px;
    min-height: 44px;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   内訳読み込み（#page-pdfimport）デザイン整備パッチ
   余白・タイポグラフィ・フォーム・テーブルの視認性を整える
   ═══════════════════════════════════════════════════════════ */

/* ── カード全体 ── */
#page-pdfimport .card {
  margin-bottom: 14px !important;
}

/* ── カードタイトル ── */
#page-pdfimport .card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 14px !important;
}

/* ── 説明テキスト（ul/li）──
   .card-title の直後の div を狙う。インラインスタイルで font-size:12px が
   付いているため属性セレクタで特定する。                                  */
#page-pdfimport .card > div[style*="font-size:12px"],
#page-pdfimport .card > div[style*="font-size: 12px"] {
  padding: 10px 14px !important;
  margin-bottom: 14px !important;
  background: color-mix(in srgb, var(--accent-subtle) 35%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent-subtle) 70%, transparent) !important;
  border-radius: var(--radius-sm) !important;
  line-height: 1.7 !important;
}

#page-pdfimport .card > div[style*="font-size:12px"] ul,
#page-pdfimport .card > div[style*="font-size: 12px"] ul {
  margin: 0 0 0 1.3em !important;
  padding: 0 !important;
}

#page-pdfimport .card > div[style*="font-size:12px"] li,
#page-pdfimport .card > div[style*="font-size: 12px"] li {
  margin-bottom: 5px;
}

#page-pdfimport .card > div[style*="font-size:12px"] strong,
#page-pdfimport .card > div[style*="font-size: 12px"] strong {
  font-weight: 700;
  color: var(--text);
}

#page-pdfimport .card > div[style*="font-size:12px"] a,
#page-pdfimport .card > div[style*="font-size: 12px"] a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── フォームグリッド ── */
#page-pdfimport .grid.grid-3 {
  gap: 12px !important;
  margin-bottom: 12px !important;
}

/* ── フィールド（label + 入力）── */
#page-pdfimport .field {
  gap: 5px !important;
}

#page-pdfimport label.fl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  color: var(--text-muted) !important;
  opacity: 0.8;
}

/* ── 入力欄・セレクト ──
   共通 input は padding:9px 12px / font-size:13px。
   このページでは少し締める。                          */
#page-pdfimport .field input,
#page-pdfimport .field select {
  font-size: 12px !important;
  padding: 8px 10px !important;
}

#page-pdfimport .field input:focus,
#page-pdfimport .field select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
}

/* ── 情報ボックス（「内訳ソース」の説明欄） ──
   インラインスタイルで border-radius:12px が付いている要素を上書き。 */
#page-pdfimport .field > div {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
  padding: 8px 10px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}

/* ── アクションボタン行 ── */
#page-pdfimport > .card > .action-row {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border);
  gap: 6px !important;
}

/* 主要アクション「読み取る」は常に目立たせる */
#page-pdfimport #readPdfBtn {
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  flex-shrink: 0;
}

/* サブアクションは控えめ */
#page-pdfimport > .card > .action-row .btn-secondary {
  font-size: 11px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  color: var(--text-muted) !important;
  opacity: 0.82;
}

#page-pdfimport > .card > .action-row .btn-secondary:hover {
  opacity: 1;
  color: var(--text) !important;
}

/* 「クリア」は最も控えめ */
#page-pdfimport #clearPdfImportBtn {
  color: var(--text-faint) !important;
  opacity: 0.6;
}

/* ── ステータスメッセージ ── */
#page-pdfimport #pdfImportStatus {
  display: block;
  font-size: 11px !important;
  color: var(--text-muted);
  margin-top: 10px !important;
  padding: 7px 10px;
  border-left: 2px solid var(--border);
  border-radius: 3px;
  line-height: 1.5;
  min-height: 0;
  transition: border-color 0.2s;
}

/* ── プレビューカード（読み取り後） ── */
#pdfPreviewCard {
  margin-top: 4px !important;
}

#pdfPreviewCard .card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 12px !important;
}

/* ── プレビューテーブル ── */
#pdfPreviewCard .table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

#pdfPreviewCard table {
  border-collapse: collapse;
  width: 100%;
}

#pdfPreviewCard th {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  opacity: 0.65;
  background: var(--surface2) !important;
  border-bottom: 2px solid var(--border) !important;
  padding: 8px 8px !important;
  white-space: nowrap;
  text-align: left;
}

#pdfPreviewCard td {
  padding: 6px 6px !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle;
}

#pdfPreviewCard tbody tr:last-child td {
  border-bottom: none !important;
}

/* ── テーブル内 input / select ──
   インラインの width:80px / width:64px はそのまま活かす。
   padding と font-size だけ統一する。                    */
#pdfPreviewCard td input,
#pdfPreviewCard td select {
  padding: 5px 6px !important;
  font-size: 11px !important;
  border-radius: 5px !important;
  background: var(--surface) !important;
  min-width: 0;
}

#pdfPreviewCard td input:focus,
#pdfPreviewCard td select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-subtle) !important;
  outline: none !important;
}

/* 箇所名・備考（テキスト系）は幅いっぱいに */
#pdfPreviewCard td input.pdf-loc,
#pdfPreviewCard td input.pdf-note {
  width: 100% !important;
  min-width: 80px;
}

/* ── 削除ボタン（✕）── */
#pdfPreviewCard .btn-soft-red.btn-sm {
  padding: 4px 8px !important;
  font-size: 11px !important;
  border-radius: 5px !important;
  color: var(--text-faint) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

@media (hover: hover) {
  #pdfPreviewCard .btn-soft-red.btn-sm:hover {
    color: var(--danger) !important;
    border-color: color-mix(in srgb, var(--danger) 35%, transparent) !important;
    background: color-mix(in srgb, var(--danger) 6%, var(--surface)) !important;
  }
}

/* ── プレビューテーブル下部ボタン ── */
#pdfPreviewCard .action-row {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border);
  gap: 8px !important;
}

#pdfPreviewCard #registerPdfSiteBtn {
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

#pdfPreviewCard #addPdfBreakdownRowBtn {
  font-size: 11px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  color: var(--text-muted) !important;
}


/* ── モバイル（〜768px）── */
@media (max-width: 768px) {
  #page-pdfimport .grid.grid-3 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* iOS ズーム防止（共通ルールが既にあるが念のため） */
  #page-pdfimport .field input,
  #page-pdfimport .field select {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  /* 「読み取る」ボタンを全幅に */
  #page-pdfimport #readPdfBtn {
    width: 100%;
  }

  #page-pdfimport > .card > .action-row {
    gap: 8px !important;
  }

  /* テーブルプレビューは横スクロール */
  #pdfPreviewCard .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #pdfPreviewCard th,
  #pdfPreviewCard td {
    padding: 5px 5px !important;
    font-size: 10px !important;
  }

  #pdfPreviewCard td input,
  #pdfPreviewCard td select {
    font-size: 12px !important; /* テーブル内入力は16pxにしない（横幅が詰まるため） */
    padding: 4px 5px !important;
  }

  /* 「現場登録」ボタンは全幅 */
  #pdfPreviewCard #registerPdfSiteBtn {
    width: 100%;
  }
}


/* ── タブレット（769px〜1024px）── */
@media (min-width: 769px) and (max-width: 1024px) {
  #page-pdfimport .grid.grid-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  #pdfPreviewCard th,
  #pdfPreviewCard td {
    padding: 6px 7px !important;
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   日報入力（#page-report）デザイン整備パッチ
   余白・タイポグラフィ・rd-card・チェック欄の視認性を整える
   ═══════════════════════════════════════════════════════════ */

/* ── カードタイトル共通 ── */
#page-report .card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 14px !important;
}

/* ── 基本情報：フォームグリッド行間 ── */
#page-report > .card > .grid.grid-3 {
  gap: 12px !important;
  margin-bottom: 0 !important;
}

#page-report > .card > .grid.grid-3 + .grid.grid-3 {
  margin-top: 12px !important;
}

/* ── フィールドラベル ── */
#page-report .field > label.fl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  color: var(--text-muted) !important;
  opacity: 0.8;
}

/* ── 天気ラジオグループ ── */
#page-report .radio-group {
  gap: 6px !important;
}

#page-report .radio-btn {
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
}

/* ── 気温・湿度（数値入力）── */
#page-report #r_temp,
#page-report #r_hum {
  font-family: var(--mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: right;
  padding-right: 10px !important;
}

/* ── 時刻（開始・終了）── */
#page-report #r_start,
#page-report #r_end {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center;
}

/* ── 作業日・時刻：iOS で右にはみ出すのを防ぐ（WebKit の date/time 固有幅対策）── */
#page-report > .card > .grid.grid-3 {
  min-width: 0;
  max-width: 100%;
}
#page-report > .card > .grid.grid-3 > .field {
  min-width: 0;
  max-width: 100%;
}
#page-report #r_date,
#page-report #r_start,
#page-report #r_end,
#page-report input[type="date"],
#page-report input[type="time"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  -webkit-min-logical-width: 0;
  box-sizing: border-box;
  border-radius: var(--radius-md, 10px) !important;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
}
@media (max-width: 768px) {
  #page-report #r_date,
  #page-report #r_start,
  #page-report #r_end,
  #page-report input[type="date"],
  #page-report input[type="time"] {
    border-radius: 10px !important;
  }
  #page-report input[type="date"]::-webkit-datetime-edit,
  #page-report input[type="time"]::-webkit-datetime-edit {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: transparent;
  }
  #page-report input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  #page-report input[type="time"]::-webkit-datetime-edit-fields-wrapper {
    width: 100%;
    padding: 0;
    background: transparent;
  }
  #page-report input[type="date"]::-webkit-date-and-time-value,
  #page-report input[type="time"]::-webkit-date-and-time-value {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    margin: 0;
    padding: 0;
    background: transparent;
  }
  #page-report input[type="date"]::-webkit-calendar-picker-indicator,
  #page-report input[type="time"]::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
    opacity: 0.55;
    flex-shrink: 0;
  }
}

/* ── voice-assist バナー ── */
#page-report .voice-assist-banner {
  margin-top: 14px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  gap: 10px !important;
}

#page-report .voice-assist-mini {
  font-size: 10.5px !important;
  line-height: 1.5 !important;
}

/* ── 施工記録カード ── */
#reportBreakdownCard {
  margin-top: 4px !important;
}

/* ── rd-grid：カード間の間隔 ── */
.rd-grid {
  gap: 8px !important;
}

/* ── rd-card：全体余白 ── */
.rd-card {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  gap: 6px 10px !important;
}

/* ── 箇所名 ── */
.rd-loc {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* ── メタ情報行（シール材・計画m・累計m・%）── */
.rd-meta {
  gap: 5px 6px !important;
  margin-top: 2px;
}

/* ── rd-chip（計画・累計バッジ）── */
.rd-chip {
  font-size: 9.5px !important;
  height: 17px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;  /* 99px より四角め、情報感を出す */
}

/* ── 進捗% バッジ ── */
.rd-pct-inline {
  font-size: 10px !important;
  height: 17px !important;
  line-height: 17px !important;
  padding: 0 6px !important;
}

/* ── 入力グループ（撤去m / 充填m）── */
.rd-input-group label {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

.rd-input-group input {
  width: 64px !important;
  padding: 5px 6px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
}

/* ── クイックアクションボタン（充填+5・撤去・残りなど）── */
.rd-quick-actions {
  gap: 5px !important;
  padding-top: 2px;
}

.rd-quick-actions .rd-quick {
  font-size: 10.5px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

/* ── プログレス行（バー + 完了ボタン）── */
.rd-progress-row {
  padding-top: 6px !important;
  margin-top: 4px !important;
  gap: 10px !important;
}

.rd-progress-row .progress-bar {
  height: 5px !important;
}

/* ── 完了ボタン ── */
.rd-done-btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  gap: 4px !important;
  font-weight: 600 !important;
}

/* ── 人工計算エリア ── */
.report-labor-calc {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
}

/* ── 作業内容テキストエリア ── */
#page-report #r_content {
  min-height: 80px;
  line-height: 1.6 !important;
  font-size: 13px !important;
}

/* ── 品質・安全チェックカード ── */
#reportCheckCard {
  margin-top: 4px !important;
}

/* 施工前・施工後の見出し */
#page-report .grid.grid-2 > div > div[style*="font-size:11px"],
#page-report .grid.grid-2 > div > div[style*="font-size: 11px"] {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 10px !important;
}

/* 安全チェック項目ラベル */
#reportCheckCard td.report-check-label {
  font-size: 12px !important;
  line-height: 1.5 !important;
  padding: 8px 10px 8px 0 !important;
}

/* 安全対策チェックボックス群 */
#page-report .check-group {
  gap: 6px !important;
  margin-top: 8px !important;
}

#page-report .check-btn {
  font-size: 12px !important;
  padding: 7px 11px !important;
  border-radius: 7px !important;
  font-weight: 500 !important;
}

/* 特記事項テキストエリア */
#page-report #r_notes {
  min-height: 72px;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* ── 保存・クリアボタン ── */
#reportActions.action-row {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border);
  gap: 10px !important;
}

#reportActions #saveReportBtn {
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  flex: 1 0 120px;
}

#reportActions #clearReportBtn {
  padding: 9px 16px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  color: var(--text-faint) !important;
  opacity: 0.7;
}

.report-offline-hint {
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface2));
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border));
  border-radius: 10px;
}

#saveReportBtn.is-offline-blocked,
#saveReportBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 旧ビルドのトップバー猫ボタン（あれば非表示） */
.topbar-cat-v2-entry,
.topbar .topbar-actions #dashCatV2Trigger.topbar-cat-v2-entry {
  display: none !important;
}

@media (hover: hover) {
  #reportActions #clearReportBtn:hover {
    color: var(--danger) !important;
    opacity: 1;
  }
}


/* ── モバイル（〜768px）── */
@media (max-width: 768px) {
  /* 基本情報グリッドは既に1列になっている（共通ルール）*/

  /* rd-card はモバイルで縦積み（既存ルールに加えて余白補正）*/
  .rd-card {
    padding: 12px 12px !important;
    gap: 8px !important;
  }

  /* 入力欄はタップしやすく */
  .rd-input-group input {
    width: 72px !important;
    font-size: 16px !important; /* iOS ズーム防止 */
    padding: 7px 8px !important;
    min-height: 40px;
  }

  /* クイックボタンも少し大きく */
  .rd-quick-actions .rd-quick {
    font-size: 11px !important;
    padding: 6px 10px !important;
    min-height: 36px;
  }

  .rd-done-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
    min-height: 36px;
  }

  /* 保存ボタンは全幅 */
  #reportActions #saveReportBtn {
    width: 100%;
    min-height: 48px;
  }

  /* 気温・湿度はテンキー優先 */
  #page-report #r_temp,
  #page-report #r_hum {
    font-size: 16px !important; /* iOS ズーム防止 */
  }
}


/* ── タブレット（769px〜1024px）── */
@media (min-width: 769px) and (max-width: 1024px) {
  .rd-card {
    padding: 10px 12px !important;
  }

  .rd-input-group input {
    width: 66px !important;
    font-size: 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   在庫管理（#page-inventory）デザイン整備パッチ
   既存設計を尊重し、余白・コントラスト・視認性を微調整
   ═══════════════════════════════════════════════════════════ */

/* ── カテゴリタブ：active 状態を少し強調 ── */
#page-inventory .inv-cat-tab {
  border-radius: 12px !important;
  padding: 8px 10px 7px !important;
  transition: border-color 0.15s, background 0.15s, color 0.15s !important;
}

#page-inventory .inv-cat-tab.active {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface)) !important;
  box-shadow: var(--shadow-sm) !important;
}

#page-inventory .inv-cat-tab.active .inv-cat-label {
  color: var(--text) !important;
  font-weight: 900 !important;
}

#page-inventory .inv-cat-tab.active .inv-cat-icon {
  color: var(--accent) !important;
}

#page-inventory .inv-cat-tab.active .inv-cat-icon svg {
  color: var(--accent) !important;
  stroke: var(--accent) !important;
}

#page-inventory .inv-cat-tab.active .inv-cat-icon svg.inv-cat-svg3d {
  color: unset !important;
  stroke: none !important;
  filter: drop-shadow(0 1px 2.5px rgba(0, 0, 0, 0.22));
}

/* タブラベル */
#page-inventory .inv-cat-label {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

/* タブカウント */
#page-inventory .inv-cat-count {
  font-size: 9.5px !important;
  font-family: var(--mono) !important;
  font-weight: 800 !important;
}

/* ── メーカー・材質フィルターボタン ── */
#page-inventory .inv-maker-filter .filter-btn {
  font-size: 11px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

#page-inventory .inv-maker-filter .filter-btn.active {
  font-weight: 700 !important;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface)) !important;
  color: var(--text) !important;
}

/* ── 検索欄 ── */
#page-inventory #invSearchInput {
  font-size: 12px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
}

#page-inventory #invSearchInput:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
}

/* 検索欄右のボタン群 */
#page-inventory .inv-search .btn-sm {
  font-size: 11px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
}

/* ── フッターアクション ── */

/* 削除ボタン：disabled 時は最大限控えめに */
#page-inventory #invBulkDeleteBtn:disabled {
  opacity: 0.3 !important;
  pointer-events: none;
}

/* 在庫リセット：危険度が高いため控えめ */
#page-inventory #resetInventoryBtn {
  color: var(--text-faint) !important;
  opacity: 0.55;
  flex: 0 1 auto !important;
  min-width: auto !important;
}

@media (hover: hover) {
  #page-inventory #resetInventoryBtn:hover {
    color: var(--danger) !important;
    opacity: 1;
  }
}

/* ── 品目行（inv-l1-row）── */
#page-inventory .inv-l1-row {
  padding: 14px 16px !important;
  gap: 14px !important;
  border-radius: 12px !important;
}

/* 品名 */
#page-inventory .inv-l1-product {
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* 場所名 */
#page-inventory .inv-l1-place {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}

/* メーカー行 */
#page-inventory .inv-l1-maker {
  font-size: 11px !important;
  margin-top: 3px;
}

/* 在庫数 */
#page-inventory .inv-l1-qty {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* 単位 */
#page-inventory .inv-l1-unit {
  font-size: 11px !important;
  opacity: 0.72;
}

/* 前回比（増減）*/
#page-inventory .inv-l1-chg {
  font-size: 11px !important;
}

/* 状態ラベル（LOW / WARN）*/
#page-inventory .inv-l1-status {
  font-size: 9.5px !important;
  letter-spacing: 0.10em !important;
}

/* ── 場所別チップ（inv-l1-chip）── */
#page-inventory .inv-l1-chip {
  padding: 6px 10px !important;
  border-radius: 8px !important;   /* 999px → 角丸に。情報チップらしく */
  gap: 8px !important;
  box-shadow: none !important;
}

#page-inventory .inv-l1-chip-name {
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

#page-inventory .inv-l1-chip-qty {
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* 場所タイプ別（site / custom）は既存色を継承 */

/* ── 移動履歴 ── */
#page-inventory .inv-history-title {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  opacity: 0.60;
  margin-bottom: 14px !important;
}


/* ── モバイル（〜768px）補正 ── */
@media (max-width: 768px) {
  /* 品目行の余白 */
  #page-inventory .inv-l1-row {
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 11px !important;
  }

  /* 在庫数はモバイルでも見やすく */
  #page-inventory .inv-l1-qty {
    font-size: 17px !important;
  }

  /* チップはモバイルでも角丸を維持 */
  #page-inventory .inv-l1-chip {
    padding: 5px 8px !important;
    border-radius: 7px !important;
  }

  /* カテゴリタブ */
  #page-inventory .inv-cat-tab {
    min-width: 62px !important;
    padding: 7px 8px 6px !important;
    border-radius: 10px !important;
  }
}


/* ── タブレット（769px〜1024px）── */
@media (min-width: 769px) and (max-width: 1024px) {
  #page-inventory .inv-l1-row {
    padding: 13px 16px !important;
  }

  #page-inventory .inv-l1-qty {
    font-size: 17px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   配置管理（#page-schedule）デザイン整備パッチ
   余白・タイポグラフィ・カード・カレンダーの視認性を整える
   ═══════════════════════════════════════════════════════════ */

/* ── カードタイトル ── */
#page-schedule .card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 12px !important;
}

/* ── ヘルプ折りたたみ ── */
#page-schedule details.ui-page-help {
  margin-bottom: 14px !important;
}

#page-schedule details.ui-page-help summary {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  opacity: 0.82;
}

#page-schedule details.ui-page-help > div {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-top: 8px !important;
  line-height: 1.65 !important;
  padding: 8px 12px !important;
  background: color-mix(in srgb, var(--surface2) 60%, transparent) !important;
  border-radius: 8px !important;
  border-left: 2px solid var(--border) !important;
}

/* ── 日付・フィルター行 ── */
#page-schedule .ui-layer--l0 .grid.grid-2 {
  gap: 12px !important;
  min-width: 0;
  max-width: 100%;
}
#page-schedule .ui-layer--l0 .grid.grid-2 > .field {
  min-width: 0;
  max-width: 100%;
}
/* 配置日：iOS で右にはみ出すのを防ぐ（WebKit の date 固有幅対策） */
#page-schedule #sch_date,
#page-schedule .ui-layer--l0 input[type="date"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  -webkit-min-logical-width: 0;
  box-sizing: border-box;
  border-radius: var(--radius-md, 10px) !important;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
}
@media (max-width: 768px) {
  #page-schedule #sch_date,
  #page-schedule .ui-layer--l0 input[type="date"] {
    border-radius: 10px !important;
  }
  #page-schedule #sch_date::-webkit-datetime-edit,
  #page-schedule .ui-layer--l0 input[type="date"]::-webkit-datetime-edit {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: transparent;
  }
  #page-schedule #sch_date::-webkit-datetime-edit-fields-wrapper,
  #page-schedule .ui-layer--l0 input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    width: 100%;
    padding: 0;
    background: transparent;
  }
  #page-schedule #sch_date::-webkit-date-and-time-value,
  #page-schedule .ui-layer--l0 input[type="date"]::-webkit-date-and-time-value {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    margin: 0;
    padding: 0;
    background: transparent;
  }
  #page-schedule #sch_date::-webkit-calendar-picker-indicator,
  #page-schedule .ui-layer--l0 input[type="date"]::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
    opacity: 0.55;
    flex-shrink: 0;
  }
}

/* ── テーブルヘッダー（PC）── */
#page-schedule #schListPanel th {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  opacity: 0.65;
  background: var(--surface2) !important;
  border-bottom: 2px solid var(--border) !important;
  padding: 8px 10px !important;
  white-space: nowrap;
}

/* ── 現場名（PC）── */
#page-schedule #schListPanel .sch-site-title {
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}

/* ── テーブルセル（PC）── */
@media (min-width: 769px) {
  #page-schedule #schListPanel tbody td {
    padding: 10px 10px !important;
    vertical-align: middle;
  }

  /* 行 hover */
  #page-schedule #schListPanel tbody tr:hover td {
    background-color: var(--accent-subtle) !important;
  }
}

/* ── 入力欄（共通）── */
#page-schedule #schListPanel .sch-count,
#page-schedule #schListPanel .sch-task,
#page-schedule #schListPanel .sch-note {
  font-size: 12px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
}

#page-schedule #schListPanel .sch-status {
  font-size: 12px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
}

#page-schedule #schListPanel .sch-count,
#page-schedule #schListPanel .sch-task,
#page-schedule #schListPanel .sch-note,
#page-schedule #schListPanel .sch-status {
  border-color: var(--border) !important;
}

#page-schedule #schListPanel .sch-count:focus,
#page-schedule #schListPanel .sch-task:focus,
#page-schedule #schListPanel .sch-note:focus,
#page-schedule #schListPanel .sch-status:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-subtle) !important;
  outline: none !important;
}

/* ── 作業員チップ ── */
.sch-worker-chip {
  border-radius: 6px !important;   /* 999px → 角丸バッジに */
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  gap: 4px !important;
}

/* ── アクションボタン行 ── */
#page-schedule .schedule-l3 .action-row {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border);
  gap: 8px !important;
}

#page-schedule #saveScheduleBtn {
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

#page-schedule #copyYesterdayScheduleBtn,
#page-schedule #todayScheduleBtn {
  font-size: 11px !important;
  padding: 7px 12px !important;
  border-radius: 7px !important;
  color: var(--text-muted) !important;
}

/* ── ビジュアライザ：ナビ行 ── */
#page-schedule #schPrevBtn,
#page-schedule #schNextBtn,
#page-schedule #schTodayBtn {
  font-size: 11px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
}

#page-schedule #schViewTitle {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* ── 月表示：カレンダーセル ── */
.cal-cell {
  border-radius: 8px !important;
  padding: 7px !important;
}

.cal-cell.today {
  border-width: 2px !important;
}

.cal-date {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cal-cell.today .cal-date {
  color: var(--accent) !important;
  font-weight: 900 !important;
}

/* hover は pointer デバイスのみ */
@media (hover: hover) {
  .cal-cell:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-sm) !important;
  }
}

@media (hover: none) {
  .cal-cell:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* カレンダーのイベントピル */
.cal-pill {
  font-size: 10px !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* ── 週表示：週セル ── */
.week-cell {
  border-radius: 10px !important;
  padding: 10px !important;
}

.week-cell-head {
  font-size: 10px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
}

.week-cell-head .day-num {
  font-size: 14px !important;
  font-weight: 900 !important;
}

@media (hover: hover) {
  .week-cell:hover {
    border-color: var(--accent) !important;
  }
}

/* 週ピル */
.week-pill {
  font-size: 11px !important;
  padding: 5px 7px !important;
  border-radius: 6px !important;
}

/* ── モバイル補正（〜768px）── */
@media (max-width: 768px) {
  /* カードモードの現場行 */
  #page-schedule #schListPanel tbody tr {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    gap: 10px 12px !important;
  }

  /* モバイル入力欄 */
  #page-schedule #schListPanel .sch-td .sch-count,
  #page-schedule #schListPanel .sch-td .sch-task,
  #page-schedule #schListPanel .sch-td .sch-note,
  #page-schedule #schListPanel .sch-td .sch-status {
    font-size: 14px !important;  /* iOS ズーム防止 */
    min-height: 40px !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
  }

  /* ラベル（::before）*/
  #page-schedule #schListPanel .sch-td:not(.sch-td--site)::before {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    opacity: 0.6;
    margin-bottom: 5px !important;
  }

  /* 保存ボタンは全幅 */
  #page-schedule #saveScheduleBtn {
    width: 100%;
    min-height: 46px;
  }

  /* カレンダー */
  .cal-cell {
    min-height: 80px !important;
    padding: 5px !important;
  }

  .cal-date {
    font-size: 10px !important;
  }
}


/* ── タブレット（769px〜1024px）── */
@media (min-width: 769px) and (max-width: 1024px) {
  #page-schedule #schListPanel th {
    font-size: 9.5px !important;
    padding: 7px 8px !important;
  }

  #page-schedule #schListPanel tbody td {
    padding: 9px 8px !important;
  }

  .cal-cell {
    min-height: 110px !important;
  }
}

/* 在庫：品目写真 — ドリルモーダル「外」／PCは左の余白・モバイルは下 */
#invDrillModal.inv-drill-overlay.open {
  justify-content: flex-end;
  align-items: stretch;
  gap: clamp(14px, 2.2vw, 28px);
  padding: clamp(12px, 2.4vw, 22px);
  padding-left: max(clamp(12px, 2vw, 22px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(12px, 2vw, 22px), env(safe-area-inset-right, 0px));
  padding-bottom: max(clamp(12px, 2vw, 22px), env(safe-area-inset-bottom, 0px));
}

#invDrillModal.inv-drill-overlay .inv-drill-modal {
  flex-shrink: 0;
}

#invDrillModal .inv-drill-photo-dock {
  box-sizing: border-box;
}

#invDrillModal .inv-drill-photo-dock[hidden] {
  display: none !important;
}

#invDrillModal .inv-drill-photo-dock:not([hidden]) {
  flex: 1 1 0;
  min-width: 0;
  max-width: min(580px, calc(100vw - 480px - 48px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
}

#invDrillModal .inv-drill-photo-dock-inner {
  width: 100%;
  max-height: min(72vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#invDrillModal .inv-drill-photo-img {
  max-width: 100%;
  max-height: min(72vh, 560px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

/* モバイル：写真を画面下側（カラム逆順でモーダル上・写真下） */
@media (max-width: 768px) {
  #invDrillModal.inv-drill-overlay.open {
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: stretch;
    gap: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #invDrillModal .inv-drill-modal {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 1 auto;
  }

  #invDrillModal .inv-drill-photo-dock:not([hidden]) {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    padding: 10px 12px 14px;
    justify-content: center;
  }

  #invDrillModal .inv-drill-photo-dock-inner {
    max-height: min(27vh, 166px);
  }

  #invDrillModal .inv-drill-photo-img {
    max-height: min(27vh, 166px);
  }
}
.im-photo-preview-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  background: var(--surface2);
}
.im-photo-preview-img {
  display: block;
  max-width: 160px;
  max-height: 120px;
  object-fit: contain;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   現場計測（#page-measure）デザイン整備パッチ
   カードまわり・リスト・台帳・自動計算の余白・視認性を整える
   スティッキーパネル内部は変更しない
   ═══════════════════════════════════════════════════════════ */

/* ── カードタイトル ── */
#page-measure .card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 14px !important;
}

/* ── measure-hero：現場選択 + 合計 ── */
#page-measure .measure-hero {
  gap: 14px !important;
  align-items: end;
  margin-bottom: 14px !important;
}

#page-measure .measure-hero .field > label.fl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  opacity: 0.75;
}

#page-measure .measure-hero .field > select {
  font-size: 13px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
}

/* 合計ボックス */
#page-measure .measure-total {
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

#page-measure .measure-total-label {
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
  margin-bottom: 4px;
}

/* ── アクションボタン行 ──
   既存で flex-wrap:nowrap / overflow-x:auto に設定済み。
   主要2ボタン（箇所追加・保存）を目立たせる。            */
#page-measure #ms_addRowBtn,
#page-measure #ms_saveBtn {
  flex-shrink: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: 7px !important;
}

#page-measure .action-row .btn-secondary {
  font-size: 11px !important;
  padding: 7px 11px !important;
  border-radius: 7px !important;
  color: var(--text-muted) !important;
  opacity: 0.80;
}

/* ── 音声ヒント（measure-status）──
   既存で背景・ボーダー・padding が !important で設定済み。
   上書きせず、テキストだけ整える。                        */
#page-measure .measure-status {
  font-size: 11px !important;
  line-height: 1.6 !important;
  margin-top: 12px !important;
}

/* ── 注意書き（measure-separate-note）── */
#page-measure .measure-separate-note {
  font-size: 11px !important;
  line-height: 1.6 !important;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  opacity: 0.85;
}

/* ── 箇所リスト（measure-row）── */
#page-measure .measure-list {
  gap: 7px !important;
}

#page-measure .measure-row {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  gap: 10px !important;
  transition: background 0.15s, border-color 0.15s !important;
}

#page-measure .measure-row-no {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--text-faint) !important;
  min-width: 28px;
}

#page-measure .measure-row-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

#page-measure .measure-row-meta {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  margin-top: 2px !important;
}

#page-measure .measure-row-val {
  font-family: var(--mono) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  min-width: 56px;
  text-align: right;
}

/* アクティブ行を明確に */
#page-measure .measure-row.active {
  border-color: var(--accent) !important;
  background: var(--accent-subtle) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}

/* 削除ボタン */
#page-measure .measure-row-del {
  font-size: 16px !important;
  padding: 6px 8px !important;
  opacity: 0.45;
  transition: opacity 0.15s !important;
}

@media (hover: hover) {
  #page-measure .measure-row-del:hover {
    opacity: 1;
    color: var(--danger) !important;
  }
}

/* ── 台帳カード ── */
#ms_ledgerCard {
  margin-top: 4px !important;
}

#page-measure .measure-ledger-head {
  margin-bottom: 12px !important;
  gap: 8px !important;
}

#page-measure .measure-ledger-head .btn-sm {
  font-size: 11px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
}

#page-measure .measure-ledger-list {
  gap: 7px !important;
}

#page-measure .measure-ledger-item {
  padding: 12px 14px !important;
  border-radius: 10px !important;
  gap: 10px !important;
}

#page-measure .measure-ledger-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

#page-measure .measure-ledger-meta {
  font-size: 10px !important;
  margin-top: 3px !important;
  opacity: 0.75;
}

#page-measure .measure-ledger-total {
  font-size: 17px !important;
  font-weight: 900 !important;
}

#page-measure .measure-ledger-actions {
  gap: 6px !important;
  margin-top: 8px !important;
}

#page-measure .measure-ledger-actions .btn {
  font-size: 11px !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
}

#page-measure .measure-ledger-empty {
  font-size: 12px !important;
  padding: 16px !important;
  border-radius: 10px !important;
  text-align: center;
}

/* ── 自動計算ボックス ── */
#page-measure .measure-auto-grid {
  gap: 10px !important;
}

#page-measure .measure-auto-box {
  padding: 12px !important;
  border-radius: 10px !important;
}

#page-measure .measure-auto-label {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  margin-bottom: 6px !important;
}

#page-measure .measure-auto-val {
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.1;
}

/* 条件ボックス内の入力 */
#page-measure .measure-auto-box input[type="number"] {
  font-size: 13px !important;
  padding: 4px 6px !important;
  border-radius: 5px !important;
  text-align: right;
  font-family: var(--mono) !important;
  font-weight: 700 !important;
}

#page-measure .measure-auto-box input[type="number"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-subtle) !important;
  outline: none !important;
}


/* ── モバイル補正（〜768px）── */
@media (max-width: 768px) {
  /* measure-hero を縦積みに（既存は2列固定） */
  #page-measure .measure-hero {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 合計ボックス */
  #page-measure .measure-total {
    text-align: left !important;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px !important;
  }

  #page-measure .measure-total-label {
    margin-bottom: 0 !important;
  }

  /* 箇所リスト：実測値を大きめに */
  #page-measure .measure-row-val {
    font-size: 16px !important;
  }

  /* 自動計算：1列に */
  #page-measure .measure-auto-grid {
    grid-template-columns: 1fr !important;
  }

  /* 台帳 */
  #page-measure .measure-ledger-item {
    padding: 10px 12px !important;
  }
}


/* ── タブレット（769px〜1024px）── */
@media (min-width: 769px) and (max-width: 1024px) {
  #page-measure .measure-row-val {
    font-size: 16px !important;
  }

  #page-measure .measure-auto-val {
    font-size: 18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   発注モーダル（#orderModal）デザイン
   ═══════════════════════════════════════════════════════════ */

.ord-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.65;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent-subtle) 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-subtle) 60%, transparent);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.ord-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ord-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.15s;
}

.ord-row:has(.ord-qty:focus) {
  border-color: var(--accent);
}

.ord-row-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.ord-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--text-muted);
}

.ord-row-supplier {
  color: var(--accent);
  font-weight: 600;
}

.ord-row-stock {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.ord-row-shortage {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}

.ord-row-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  min-width: 120px;
}

.ord-qty-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.75;
}

.ord-qty-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ord-qty {
  width: 72px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 800;
  text-align: right;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.ord-qty:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.ord-qty-unit {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 20px;
}

.ord-item-note {
  width: 100%;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
}

.ord-item-note:focus {
  border-color: var(--accent);
  outline: none;
}

.ord-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 20px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface2);
}

@media (max-width: 768px) {
  .ord-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ord-row-input {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    min-width: auto;
    width: 100%;
  }

  .ord-qty-label {
    width: 100%;
  }

  .ord-item-note {
    flex: 1;
    min-width: 0;
  }

  .ord-qty {
    font-size: 18px; /* iOS ズーム防止 */
  }
}

/* ═══════════════════════════════════════════════════════════
   日報履歴・施工実績 デザイン整備パッチ
   ═══════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   A. 日報履歴（#page-history）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── カードタイトル ── */
#page-history .card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 14px !important;
}

/* ── フィルターバー ── */
#page-history .hist-tools {
  margin-bottom: 14px !important;
  gap: 10px !important;
}

#page-history .hist-period-input {
  font-size: 13px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
}

#page-history .hist-period-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
  outline: none !important;
}

/* ── 履歴行（data-report-id で特定） ── */
#historyList [data-report-id] {
  /* インラインスタイルの border-radius:8px / padding を上書き */
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  gap: 12px !important;
  /* transition はインラインで設定済みなのでそのまま */
}

/* 報告書番号 */
#historyList [data-report-id] > div:first-child > div:first-child {
  gap: 6px !important;
  align-items: center;
  margin-bottom: 3px;
}

/* 現場名（インラインスタイルの 14px/600 を強化） */
#historyList [data-report-id] > div:first-child > div:nth-child(2) {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-top: 3px !important;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* メタ情報エリア */
#page-history #historyList .hist-report-meta {
  gap: 4px !important;
  margin-top: 8px !important;
}

/* 日付（既存の大きいサイズは維持・行間だけ調整）*/
#page-history #historyList .hist-report-date {
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

/* 責任者・施工量 */
#page-history #historyList .hist-report-sub {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  line-height: 1.55 !important;
}

/* ── 操作ボタン群 ── */
#historyList [data-report-id] > div:last-child {
  gap: 6px !important;
  flex-shrink: 0;
}

#historyList [data-report-id] .btn-sm {
  font-size: 11px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap;
}

/* 削除は控えめ */
#historyList [data-report-id] .btn-soft-red {
  color: var(--text-faint) !important;
  opacity: 0.65;
}

@media (hover: hover) {
  #historyList [data-report-id] .btn-soft-red:hover {
    color: var(--danger) !important;
    opacity: 1;
  }
}

/* ── モバイル（〜768px）── */
@media (max-width: 768px) {
  #historyList [data-report-id] {
    padding: 12px 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* ボタン群を横並びフルに */
  #historyList [data-report-id] > div:last-child {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--border);
  }

  #historyList [data-report-id] .btn-sm {
    flex: 1 1 80px;
    justify-content: center !important;
    min-height: 36px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   B. 施工実績（#page-performance）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── カードタイトル ── */
#page-performance .card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 14px !important;
}

/* ── 検索欄 ── */
#page-performance .perf-search {
  font-size: 12px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
}

#page-performance .perf-search:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
  outline: none !important;
}

/* ── 集計粒度タブ ── */
#page-performance .perf-tabs {
  margin: 0 0 12px !important;
}

/* ── 年度セレクト ── */
#page-performance .perf-select {
  font-size: 12px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
}

/* ── 集計サマリー行（perf-agg-row）── */
#page-performance .perf-agg-row {
  padding: 12px 14px !important;
  border-radius: 12px !important;
  margin-bottom: 0 !important;
}

#page-performance .perf-agg-k {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}

#page-performance .perf-agg-sites {
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

#page-performance .perf-agg-metric {
  padding: 10px 12px !important;
  border-radius: 10px !important;
}

#page-performance .perf-agg-l {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  margin-bottom: 5px !important;
}

#page-performance .perf-agg-v {
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

#page-performance .perf-agg-sub {
  font-size: 10.5px !important;
  margin-top: 8px !important;
}

/* ── 実績カード（perf-card）── */
#page-performance .perf-card {
  padding: 14px 16px 12px !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
}

/* 現場名 */
#page-performance .perf-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

/* 完了バッジ */
#page-performance .perf-badge {
  font-size: 10px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;  /* pill → badge */
  font-weight: 800 !important;
}

/* 期間日付 */
#page-performance .perf-date {
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ── 進捗メーターグリッド ── */
#page-performance .perf-grid {
  gap: 8px !important;
  margin-top: 12px !important;
}

#page-performance .perf-meter {
  padding: 10px 12px !important;
  border-radius: 10px !important;
}

#page-performance .perf-meter-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
}

/* perf-meter-pct の大きいサイズは既存パッチ済み・維持 */

#page-performance .perf-meter-sub {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
  color: var(--text-muted) !important;
}

/* ゲージレール：少し細く */
#page-performance .perf-gauge {
  height: 7px !important;
  border-radius: 4px !important;
}

/* ── 使用材料 ── */
#page-performance .perf-mats {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border);
}

#page-performance .perf-mats-title {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  opacity: 0.70;
  margin-bottom: 8px !important;
}

#page-performance .perf-mats-chips {
  gap: 6px !important;
}

/* チップ：pill → 角丸バッジ */
#page-performance .perf-chip {
  border-radius: 6px !important;
  padding: 5px 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  gap: 6px !important;
  box-shadow: none !important;
}

#page-performance .perf-chip-num {
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* 対象外チップ（破線） */
#page-performance .perf-chip--muted {
  font-size: 10.5px !important;
  padding: 4px 8px !important;
}

/* ── アクションボタン ── */
#page-performance .perf-actions {
  margin-top: 12px !important;
  gap: 6px !important;
}

#page-performance .perf-actions .btn-sm {
  font-size: 11px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
}

/* ── モバイル補正（〜768px）── */
@media (max-width: 768px) {
  #page-performance .perf-card {
    padding: 12px 14px 10px !important;
    border-radius: 11px !important;
  }

  #page-performance .perf-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  #page-performance .perf-meter {
    padding: 8px 10px !important;
  }

  #page-performance .perf-agg-metrics {
    gap: 8px !important;
  }

  #page-performance .perf-agg-metric {
    min-width: 0 !important;
  }

  #page-performance .perf-actions {
    justify-content: flex-start !important;
  }
}

/* ── タブレット（769px〜1024px）── */
@media (min-width: 769px) and (max-width: 1024px) {
  #page-performance .perf-card {
    padding: 13px 15px 11px !important;
  }

  #page-performance .perf-grid {
    gap: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   材料計算・現場掲示板・写真台帳 デザイン整備パッチ
   ═══════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   A. 材料計算（#page-materialcalc）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#page-materialcalc .card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 12px !important;
}

/* 説明文（インラインで font-size:12px が付いている div）*/
#page-materialcalc .card > div[style*="font-size:12px"],
#page-materialcalc .card > div[style*="font-size: 12px"] {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  line-height: 1.7 !important;
  padding: 10px 12px !important;
  margin-bottom: 14px !important;
  background: color-mix(in srgb, var(--surface2) 60%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}

/* グリッド間隔 */
#page-materialcalc .grid.grid-3 {
  gap: 12px !important;
}

#page-materialcalc .grid.grid-3 + .grid.grid-3 {
  margin-top: 12px !important;
}

/* フィールドラベル */
#page-materialcalc .field > label.fl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  opacity: 0.75;
}

/* 単位（m / mm / L / %）*/
#page-materialcalc .fl-unit-si {
  font-family: var(--mono) !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  color: var(--accent) !important;
  opacity: 0.80;
}

/* 数値入力：モノスペースで右揃え */
#page-materialcalc input[type="number"] {
  font-family: var(--mono) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: right !important;
  padding-right: 10px !important;
}

#page-materialcalc input[type="number"]:focus,
#page-materialcalc select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
  outline: none !important;
}

/* アクションボタン */
#page-materialcalc .action-row {
  margin-top: 14px !important;
  gap: 8px !important;
}

#page-materialcalc #mc_calcBtn {
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

#page-materialcalc #mc_clearBtn {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  border-radius: 7px !important;
}

/* 結果表示エリア */
#mc_result {
  font-size: 13px !important;
  line-height: 1.9 !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  margin-top: 14px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
}
#mc_result .mc-result-block + .mc-result-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 88%, transparent);
}
#mc_result .mc-result-block-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
#mc_result .mc-result-cans {
  font-size: 24px;
  color: var(--accent);
  font-weight: 900;
}
#mc_result .mc-result-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.55;
}

/* モバイル */
@media (max-width: 768px) {
  #page-materialcalc input[type="number"] {
    font-size: 16px !important; /* iOS ズーム防止 */
    min-height: 42px;
  }

  #page-materialcalc #mc_calcBtn {
    width: 100%;
    min-height: 46px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   B. 現場掲示板（#page-board）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#page-board .card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 12px !important;
}

/* サイドバー */
#page-board .board-side {
  border-radius: 12px !important;
  padding: 14px !important;
}

/* 現場選択ラベル */
#page-board .board-side .field > label.fl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  opacity: 0.72;
}

/* 現場リストアイテム */
#page-board .board-site-item {
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: border-color 0.15s, color 0.15s !important;
}

#page-board .board-site-item.active {
  font-weight: 700 !important;
  background: var(--accent-subtle) !important;
}

/* 投稿フォーム */
#page-board .board-post-form {
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
  scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px));
}

/* 現場名タイトル */
#page-board #boardCurrentSiteTitle {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* テキストエリア */
#page-board #boardText {
  font-size: 13px !important;
  line-height: 1.65 !important;
  min-height: 80px;
}

/* 投稿フォーム内グリッド */
#page-board .board-post-form .grid.grid-3 {
  gap: 10px !important;
  margin-top: 12px !important;
}

#page-board .board-post-form .field > label.fl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  opacity: 0.72;
}

/* 写真プレビュー */
#page-board .board-preview {
  gap: 6px !important;
  margin-top: 10px !important;
}

#page-board .board-preview img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 7px !important;
}

/* アクション */
#page-board .board-post-form .action-row {
  margin-top: 12px !important;
  gap: 8px !important;
}

#page-board #saveBoardPostBtn {
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

/* 投稿カード */
#page-board .board-post {
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}

#page-board .board-post-head {
  margin-bottom: 10px !important;
  align-items: center !important;
}

/* 工程・日付ラベル */
#page-board .board-post-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

/* 投稿者・時刻 */
#page-board .board-post-meta {
  font-size: 10.5px !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}

/* 本文 */
#page-board .board-post-text {
  font-size: 13px !important;
  line-height: 1.7 !important;
  margin-bottom: 10px !important;
}

/* 写真グリッド */
#page-board .board-images {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 6px !important;
}

#page-board .board-images img {
  border-radius: 7px !important;
  max-height: 200px !important;
}

/* 空状態 */
#page-board .board-empty {
  border-radius: 12px !important;
  padding: 40px 16px !important;
  font-size: 12px !important;
}

/* モバイル */
@media (max-width: 768px) {
  #page-board .board-post-form {
    padding: 14px !important;
  }

  #page-board #saveBoardPostBtn {
    width: 100%;
    min-height: 44px;
  }

  #page-board .board-post {
    padding: 12px !important;
  }

  #page-board .board-images {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   C. 写真台帳（#page-photos）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#page-photos .card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 12px !important;
}

/* フィルター行 */
#page-photos .photo-filter-row {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#page-photos .photo-filter-row .field > label.fl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  opacity: 0.72;
}

#page-photos .photo-filter-row select,
#page-photos .photo-filter-row input[type="date"] {
  font-size: 12px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
}

#page-photos .photo-filter-row select:focus,
#page-photos .photo-filter-row input[type="date"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
  outline: none !important;
}

/* 絞り込み解除行 */
#page-photos .action-row {
  margin-bottom: 14px !important;
  align-items: center;
  gap: 10px !important;
}

#page-photos #clearPhotoFilterBtn {
  font-size: 11px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
}

/* 写真グリッド */
#page-photos .photo-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 10px !important;
}

/* 写真カード */
#page-photos .photo-card {
  border-radius: 10px !important;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

@media (hover: hover) {
  #page-photos .photo-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
    box-shadow: var(--shadow-sm) !important;
  }
}

#page-photos .photo-card img {
  height: 150px !important;
  border-radius: 0 !important; /* カード内はフラット */
}

#page-photos .photo-card-body {
  padding: 9px 11px !important;
}

/* 現場名・工程ラベル */
#page-photos .photo-card-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  margin-bottom: 3px !important;
}

/* 日付・投稿者 */
#page-photos .photo-card-meta {
  font-size: 10px !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  margin-bottom: 5px !important;
}

/* コメント本文 */
#page-photos .photo-card-text {
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  max-height: 44px;
  overflow: hidden;
}

/* PDFカード */
#page-photos .photo-card.pdf-card {
  padding: 12px 14px !important;
  min-height: 140px !important;
}

/* モバイル */
@media (max-width: 768px) {
  #page-photos .photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  #page-photos .photo-card img {
    height: 130px !important;
  }

  #page-photos .photo-filter-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #page-photos .photo-filter-row select,
  #page-photos .photo-filter-row input[type="date"] {
    font-size: 14px !important; /* iOS ズーム防止 */
  }
}

/* タブレット */
@media (min-width: 769px) and (max-width: 1024px) {
  #page-photos .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }

  #page-photos .photo-card img {
    height: 140px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   内訳コンボボックス（bd-combo-*）
   Phase UX：材料名を在庫マスタから確定選択
   ═══════════════════════════════════════════════════════════ */

.bd-combo-wrap {
  position: relative;
}

.bd-combo-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.bd-combo-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
  outline: none !important;
}

/* ドロップダウンリスト */
.bd-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 2000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bd-combo-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
}

.bd-combo-item:last-child {
  border-bottom: none;
}

.bd-combo-item:hover,
.bd-combo-item--active {
  background: var(--accent-subtle);
}

.bd-combo-item-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.bd-combo-item-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 500;
}

/* その他（対象外）は下線で区別 */
.bd-combo-item--other {
  border-top: 1px solid var(--border);
  margin-top: 2px;
}

.bd-combo-item--other .bd-combo-item-name {
  color: var(--text-muted);
  font-weight: 600;
}

/* ヒントテキスト */
.bd-combo-hint {
  margin-top: 5px;
  min-height: 18px;
}

.bd-combo-hint-text {
  font-size: 10.5px;
  color: var(--text-faint);
  font-weight: 600;
}

.bd-combo-hint-text[data-ok="1"] {
  color: var(--success);
}

/* モバイル：リストを大きく */
@media (max-width: 768px) {
  .bd-combo-list {
    max-height: 200px;
  }

  .bd-combo-item {
    padding: 10px 14px;
  }

  .bd-combo-item-name {
    font-size: 13px;
  }
}

/* 在庫：材料種別未設定バッジ（推奨） */
.inv-mat-warn-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  vertical-align: middle;
  margin-left: 5px;
}

/* ═══════════════════════════════════════════════════════════
   ブレークポイント統合パッチ
   方針: 375/380/390px → xs(~480px) に吸収
         480/520/600px → sm(~768px) に吸収（必要最小限のみ）
   ═══════════════════════════════════════════════════════════ */

/* ── 超小型画面（〜480px）統合 ──
   375/380/390px の個別定義を480px一本に収束させる           */
@media (max-width: 480px) {
  /* ページ余白（375pxの padding:8px と390pxの padding:10px を統合）*/
  .page {
    padding: var(--page-py) 10px calc(var(--page-py) + 60px) !important;
    padding-left:  max(10px, var(--safe-left)) !important;
    padding-right: max(10px, var(--safe-right)) !important;
  }

  /* stat-card を2列に（390pxブレーク相当）*/
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .stat-num {
    font-size: 20px !important;
  }

  /* 内訳カード（480px相当）*/
  .bd-card-row1 {
    grid-template-columns: 1fr !important;
  }

  .bd-card-row2 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* トップバー日付は (max-width:768px) 側でトップバー2行目に統一済み */
}

/* ── 600px → 768px に吸収（ring-grid）── */
@media (max-width: 768px) {
  /* 600pxブレークで定義されていた ring-grid の縮小を768pxで統一 */
  .ring-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 8px !important;
  }
  .ring-svg-wrap {
    max-width: 100px !important;
  }
}

/* ── 720px → sm/md 境界を明確化 ── */
/* 既存の (min-width: 720px) と (min-width: 769px) は隙間がある。
   769px を正式な境界として補強する。                           */
@media (min-width: 769px) {
  /* bd-card-row1 はモバイルで1列・PCで本来のグリッドに戻す */
  .bd-card-row1 {
    grid-template-columns: unset;
  }
}

/* ── 1100/1200px → lg(1025px+) に統合 ── */
/* 既存の max-width:1100px / max-width:1200px は
   コンテンツ幅の制限として使われている。
   1025px以上のPCビューとして一本化する。                        */
@media (min-width: 1025px) {
  /* ページコンテンツの最大幅（間延び防止）*/
  .page {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ═══════════════════════════════════════════════════════════
   ログイン画面 デザイン整備パッチ
   ═══════════════════════════════════════════════════════════ */

/* ── ロゴエリア ── */
.login-logo {
  margin-bottom: 26px !important;
}

.login-logo-icon {
  min-height: auto !important;
  margin-bottom: 0 !important;
  gap: 0 !important;
}

/* タイトル：少し大きく・引き締める */
.login-logo-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  color: var(--text) !important;
  line-height: 1.3;
}

/* サブタイトル：mono で整然と */
.login-logo-sub {
  font-size: 10px !important;
  font-family: var(--mono) !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.12em !important;
  margin-top: 5px !important;
  opacity: 0.72;
}

/* バージョンバッジ */
.login-app-ver {
  display: inline-block;
  margin-top: 8px;
  font-size: 9.5px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  opacity: 0.6;
}

.login-app-ver:empty {
  display: none;
}

/* ── フォーム ── */
.login-form {
  gap: 14px !important;
}

.login-form .field > label.fl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  opacity: 0.72;
}

.login-form input {
  font-size: 15px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
}

.login-form input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
  outline: none !important;
}

/* ── エラー表示 ── */
#loginError {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5;
  min-height: 0;
  padding: 0;
  transition: all 0.2s;
}

#loginError:not(:empty) {
  padding: 9px 12px !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent) !important;
  color: var(--danger) !important;
}

/* ── ボタン階層（主 > 副 > 極小）── */

/* ① ログインボタン：最も大きく目立たせる */
#loginBtn {
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
}

#loginBtn:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 36%, transparent) !important;
  transform: translateY(-1px) !important;
}

#loginBtn:active {
  transform: translateY(0) !important;
}

/* ② 新規登録・パスワードを忘れた：一段控えめ */
#toggleSignupBtn {
  font-size: 12px !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  background: transparent !important;
}

#toggleSignupBtn:hover {
  color: var(--text) !important;
  border-color: var(--accent) !important;
}

#resetPasswordBtn {
  font-size: 11px !important;
  padding: 7px 12px !important;
  border-radius: 7px !important;
  color: var(--text-faint) !important;
  border-color: transparent !important;
  background: transparent !important;
  opacity: 0.75;
}

#resetPasswordBtn:hover {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  opacity: 1;
  background: var(--surface2) !important;
}

/* ③ サンプルCTA：ログインより少し下 + 区切り線 */
.login-sample-cta {
  display: block;
  margin-top: 18px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  text-align: center;
  text-decoration: none !important;
  box-sizing: border-box;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  position: relative;
}

/* 区切り線（サンプルの前に「または」） */
.login-sample-cta::before {
  content: 'または';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-faint);
  background: var(--surface);
  padding: 0 8px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ── パスワード変更パネル ── */
#resetPwPanel .field > label.fl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  opacity: 0.72;
}

#resetPwPanel input {
  font-size: 15px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
}

#resetPwApplyBtn {
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  margin-top: 4px;
}

/* ── フッターメッセージ ── */
.login-msg {
  font-size: 10.5px !important;
  color: var(--text-muted) !important;
  text-align: center;
  margin-top: 16px !important;
  line-height: 1.65 !important;
  opacity: 0.80;
}

.login-msg .btn-secondary {
  font-size: 10px !important;
  padding: 4px 10px !important;
  border-radius: 5px !important;
  opacity: 0.75;
}

/* ── モバイル（〜480px）── */
@media (max-width: 480px) {
  .login-card {
    padding: 30px 22px !important;
    border-radius: 16px !important;
  }

  .login-logo-title {
    font-size: 15px !important;
  }

  .login-logo-icon {
    min-height: 68px !important;
  }

  .login-form input {
    font-size: 16px !important; /* iOS ズーム防止 */
    padding: 11px 12px !important;
  }

  #loginBtn {
    padding: 13px 18px !important;
    font-size: 15px !important;
    min-height: 50px;
  }
}

/* ── 横向き（landscape・高さが狭いとき）── */
@media (max-height: 600px) and (orientation: landscape) {
  .login-screen {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    justify-content: flex-start;
  }

  .login-card {
    padding: 20px 28px !important;
  }

  .login-logo {
    margin-bottom: 14px !important;
  }

  .login-logo-icon {
    min-height: 48px !important;
    flex-direction: row !important;
    gap: 10px !important;
  }

  .brand-cat-glyph--login {
    font-size: 30px !important;
  }

  .login-logo-sub,
  .login-app-ver {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   日報ビューアーモーダル（#reportModal）デザイン整備パッチ
   ═══════════════════════════════════════════════════════════ */

/* macOS トラックパッドでの縦スクロールを確実に拾う */
#reportModal .modal {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* ── モーダルヘッダー ── */
#reportModal .modal-head {
  padding-bottom: 12px !important;
  margin-bottom: 0 !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

#reportModal .modal-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text) !important;
}

/* ヘッダーのボタン群 */
#reportModal .modal-head > div[style*="flex"] {
  gap: 6px !important;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 編集ボタン */
#reportEditBtn {
  font-size: 11px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

/* 印刷 */
#reportPrintBtn {
  font-size: 11px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  color: var(--text-muted) !important;
}

/* 閉じる */
#closeReportModalBtn {
  font-size: 11px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  color: var(--text-faint) !important;
  opacity: 0.72;
}

@media (hover: hover) {
  #closeReportModalBtn:hover {
    opacity: 1;
    color: var(--text) !important;
  }
}

/* ── ビューアー本体の余白 ── */
#reportViewerBody {
  padding-top: 16px !important;
}

/* ── セクション共通 ── */
.viewer-section {
  margin-bottom: 22px !important;
}

/* セクション見出し h3 */
.viewer-section h3 {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  opacity: 0.65;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 7px !important;
  margin-bottom: 12px !important;
  gap: 5px !important;
}

/* ── 基本情報グリッド ── */
.viewer-grid {
  gap: 8px !important;
}

.viewer-row {
  padding: 9px 12px !important;
  border-radius: 8px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
}

.viewer-row .label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  opacity: 0.72;
  margin-bottom: 3px !important;
}

.viewer-row .val {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  line-height: 1.4;
  margin-top: 0 !important;
}

/* 人工（算出）の値は強調 */
.viewer-row:last-child .val {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

/* ── 施工内訳テーブル ── */
#reportModal .table-wrap {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

#reportModal table {
  border-collapse: collapse;
  width: 100%;
}

#reportModal th {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  opacity: 0.65;
  background: var(--surface2) !important;
  border-bottom: 2px solid var(--border) !important;
  padding: 8px 10px !important;
  white-space: nowrap;
}

#reportModal td {
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 12px !important;
  vertical-align: middle;
}

#reportModal tbody tr:last-child td {
  font-weight: 700 !important;
  background: var(--surface2) !important;
  border-bottom: none !important;
}

/* 撤去m（warning色） */
#reportModal td:nth-child(2) {
  font-family: var(--mono) !important;
  text-align: right !important;
  font-weight: 600;
}

/* 充填m（accent色） */
#reportModal td:nth-child(3) {
  font-family: var(--mono) !important;
  text-align: right !important;
  font-weight: 600;
}

/* ── テキスト系セクション（pre-wrap）── */
/* 作業内容・特記事項の .viewer-row を単独で使う場合 */
.viewer-section > .viewer-row {
  border-radius: 8px !important;
  padding: 12px 14px !important;
}

.viewer-section > .viewer-row .val {
  white-space: pre-wrap !important;
  line-height: 1.7 !important;
  font-size: 13px !important;
}

/* ── 品質チェック・安全対策のコンテナ ──
   クラスがなくインラインスタイルで定義されているため
   .viewer-section > div[style] で狙う                  */
.viewer-section > div[style*="border-radius:6px"],
.viewer-section > div[style*="border-radius: 6px"] {
  border-radius: 8px !important;
  padding: 12px 14px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
}

/* 品質チェック各行 */
.viewer-section > div[style*="border-radius:6px"] > div,
.viewer-section > div[style*="border-radius: 6px"] > div {
  font-size: 12px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewer-section > div[style*="border-radius:6px"] > div:last-child,
.viewer-section > div[style*="border-radius: 6px"] > div:last-child {
  border-bottom: none !important;
}

/* 安全対策バッジ群 */
#reportModal .badge.badge-green {
  margin-right: 4px !important;
  margin-bottom: 4px !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  border-radius: 5px !important;
}

/* ── 最終行（作成者・更新者）── */
.viewer-section:last-child {
  border-top: 1px solid var(--border) !important;
  padding-top: 14px !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
}

/* ── モバイル（〜768px）── */
@media (max-width: 768px) {
  #reportModal .modal-title {
    font-size: 13px !important;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #reportModal .modal-head > div[style*="flex"] {
    width: 100%;
    justify-content: flex-end !important;
  }

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

  .viewer-row {
    padding: 8px 11px !important;
  }

  #reportModal th,
  #reportModal td {
    padding: 7px 8px !important;
    font-size: 11px !important;
  }

  /* テーブルを横スクロール */
  #reportModal .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════════
   モーダル共通基盤 デザイン整備パッチ
   全モーダルに共通適用。個別IDで上書き不可の箇所は除外済み。
   ═══════════════════════════════════════════════════════════ */

/* ── オーバーレイ背景：少し深く ── */
.modal-overlay {
  background: rgba(42, 38, 32, 0.42) !important;
}

/* ── ヘッダー共通 ── */
.modal-head {
  gap: 10px !important;
  padding: 0 0 12px !important;
  margin-bottom: 16px !important;
  align-items: center !important;
}

/* ── タイトル ── */
.modal-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: var(--text) !important;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

/* ── 閉じるボタン：.modal-close クラスを統一スタイルに ──
   HTML の変更なしで、2つのパターン（modal-close / btn-sm）を揃える */

/* パターン①：.modal-close 単体（workerDetail・schQuickEdit 等） */
.modal-close:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}

@media (hover: hover) {
  .modal-close:not(.btn):hover {
    background: var(--surface2) !important;
    border-color: var(--accent) !important;
    color: var(--text) !important;
  }
}

/* パターン②：.btn.btn-secondary.btn-sm（closeItemModalBtn 等）*/
.modal-head .btn.btn-secondary.btn-sm {
  font-size: 11px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  flex-shrink: 0;
  color: var(--text-muted) !important;
}

@media (hover: hover) {
  .modal-head .btn.btn-secondary.btn-sm:hover {
    color: var(--text) !important;
  }
}

/* ── モーダル内カード：二重パディングを緩和 ── */
.modal > .card,
.modal > .site-modal-scroll > .card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
}

/* ── モーダル内の card-title ── */
.modal .card-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 12px !important;
}

/* ── フィールドラベル（modal 内共通）── */
.modal .field > label.fl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  opacity: 0.75;
}

/* ── モーダル内 input / select / textarea ── */
.modal .field input,
.modal .field select,
.modal .field textarea {
  font-size: 13px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
}

.modal .field input:focus,
.modal .field select:focus,
.modal .field textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
  outline: none !important;
}

/* ── モーダル内 action-row（下部ボタン群）── */
.modal .action-row {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border);
  gap: 8px !important;
}

/* 主要アクション（保存・登録）は目立たせる */
.modal .action-row .btn-primary {
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  flex-shrink: 0;
}

/* 副次アクション */
.modal .action-row .btn-secondary {
  font-size: 12px !important;
  padding: 8px 14px !important;
  border-radius: 7px !important;
  color: var(--text-muted) !important;
}

/* 削除ボタンは最も控えめ */
.modal .action-row .btn-soft-red {
  color: var(--text-faint) !important;
  opacity: 0.65;
  font-size: 12px !important;
}

@media (hover: hover) {
  .modal .action-row .btn-soft-red:hover {
    color: var(--danger) !important;
    opacity: 1;
  }
}

/* ── モーダル内テーブル ── */
.modal .table-wrap {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.modal th {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  opacity: 0.65;
  background: var(--surface2) !important;
  border-bottom: 2px solid var(--border) !important;
  padding: 8px 10px !important;
}

.modal td {
  padding: 8px 10px !important;
  font-size: 12px !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle;
}

.modal tbody tr:last-child td {
  border-bottom: none !important;
}

@media (hover: hover) {
  .modal tbody tr:hover td {
    background: var(--accent-subtle) !important;
  }
}

/* ── モーダル内グリッド ── */
.modal .grid.grid-2 {
  gap: 12px !important;
}

.modal .grid.grid-3 {
  gap: 10px !important;
}

/* ── 個別モーダルの微調整 ── */

/* 品目モーダル：supplier フィールドが追加されているので余白確保 */
#itemModal .card {
  padding: 16px !important;
}

/* 在庫調整モーダル：クイックパネルのチップを整える */
#adjustModal .adjust-quick-panel {
  gap: 6px !important;
}

#adjustModal .adjust-chip {
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  padding: 8px 12px !important;
}

/* 作業員詳細モーダル */
#workerDetailModal .field input {
  font-size: 14px !important;
}

/* 配置クイック編集：コンパクトさを維持 */
#schQuickEditModal .modal-head {
  margin-bottom: 12px !important;
}

/* 現場編集モーダル：巨大なため padding を少し詰める */
#siteModal.modal-overlay .modal {
  padding: 20px 20px !important;
}

/* 発注モーダル */
#orderModal .ord-desc {
  margin-bottom: 12px !important;
}

/* ── モバイル（〜768px）追加補正 ── */
@media (max-width: 768px) {
  /* 全モーダルの入力欄は iOS ズーム防止 */
  .modal .field input[type="text"],
  .modal .field input[type="number"],
  .modal .field input[type="email"],
  .modal .field select {
    font-size: 16px !important;
    min-height: 42px;
  }

  /* テキストエリアも同様 */
  .modal .field textarea {
    font-size: 15px !important;
  }

  /* モーダル内アクション：保存ボタンを全幅に */
  .modal .action-row {
    flex-wrap: wrap !important;
  }

  .modal .action-row .btn-primary {
    width: 100% !important;
    justify-content: center !important;
    min-height: 46px !important;
  }

  /* タイトルを省略 */
  .modal-title {
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* グリッドを1列に */
  .modal .grid.grid-2 {
    grid-template-columns: 1fr !important;
  }

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

/* ───────────────────────────────────────────────────────────
   Dashboard: reduce "too wide margins" on laptop
   Keep global .page max-width on other pages.
   ─────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  html.page-dashboard-active .page {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html.page-dashboard-active #page-dashboard {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ───────────────────────────────────────────────────────────
   Pages: reduce "too wide margins" on laptop/desktop
   - Keep centered layout
   - Just widen the container from 1280px
   ─────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  .page {
    max-width: 1560px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   サイドバー・トップバー デザイン整備パッチ
   ═══════════════════════════════════════════════════════════ */

/* ── サイドバー全体 ── */
.sidebar {
  border-right: 1px solid var(--border) !important;
}

/* ── ロゴエリア ── */
.logo {
  padding: 16px 14px 14px !important;
  gap: 10px !important;
}

.logo-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
}

.logo-sub {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  font-family: var(--mono) !important;
  opacity: 0.60;
  margin-top: 2px !important;
}

/* ── ナビセクション見出し ── */
.nav-section {
  font-size: 8.5px !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  opacity: 0.55;
  padding: 12px 10px 4px !important;
}

/* ── ナビアイテム ── */
.nav-item {
  font-size: 12.5px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  gap: 9px !important;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s !important;
}

.nav-item .icon.sm svg {
  stroke-width: 1.8;
}

/* active の左ライン：細く・きれいに */
.nav-item.active::before {
  width: 2.5px !important;
  top: 6px !important;
  bottom: 6px !important;
  border-radius: 0 2px 2px 0 !important;
}

/* hover はポインターデバイスのみ */
@media (hover: none) {
  .nav-item:hover {
    background: transparent !important;
  }
}

/* ── 区切り線 ── */
.nav-sep {
  margin: 6px 8px !important;
  opacity: 0.6;
}

/* ── ユーザー情報エリア ── */
.user-info {
  padding: 10px 12px !important;
}

/* ── サイドバーフッター（バージョン等）── */
.sidebar-footer {
  padding: 8px 12px !important;
  gap: 4px !important;
}

.sidebar-app-ver {
  font-size: 9px !important;
  font-family: var(--mono) !important;
  opacity: 0.50;
  letter-spacing: 0.06em;
}

/* ── トップバー ── */
.topbar {
  gap: 8px !important;
  min-height: 54px !important;
}

.topbar-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--text) !important;
}

/* ハンバーガー */
.hamburger {
  width: 36px !important;
  height: 36px !important;
  border-radius: 7px !important;
  font-size: 16px !important;
  flex-shrink: 0;
}

/* 日付バッジ */
.date-badge {
  font-size: clamp(11px, 2.8vw, 13px) !important;
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-radius: 7px !important;
}

/* 日報作成ボタン */
#newReportBtn {
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  white-space: nowrap;
}

/* モバイル */
@media (max-width: 768px) {
  .topbar-title {
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 160px);
  }

  .date-badge {
    font-size: clamp(10px, 3vw, 12px) !important;
    padding: 4px 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   空状態（Empty State）統一パッチ
   ═══════════════════════════════════════════════════════════ */

/* ── 共通ベース：全 empty 系クラスを統一 ── */
.perf-empty,
.board-empty,
.measure-ledger-empty,
.worker-empty,
.inv-dq-empty,
.hier-empty,
.member-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 32px 20px !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  border: 1px dashed var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: color-mix(in srgb, var(--surface2) 60%, transparent) !important;
}

/* border が二重にならないよう board-empty は色だけ上書き */
.board-empty {
  border-style: dashed !important;
}

/* member-empty はインラインリスト内なので border なし */
.member-empty {
  border: none !important;
  background: transparent !important;
  padding: 12px 0 !important;
  font-style: normal !important;
}

/* ── 在庫空状態（inv-empty）は独自構造を維持しつつ余白のみ調整 ── */
.inv-empty {
  padding: 32px 20px !important;
}

.inv-empty-icon {
  font-size: 28px !important;
  margin-bottom: 10px !important;
  opacity: 0.55;
}

.inv-empty-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
}

.inv-empty-hint {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
}

/* モバイル */
@media (max-width: 768px) {
  .perf-empty,
  .board-empty,
  .measure-ledger-empty,
  .worker-empty,
  .inv-dq-empty {
    padding: 24px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   アクセシビリティ フォーカスリング統一パッチ
   ─ キーボード操作時のみ表示（マウスクリックでは非表示）
   ═══════════════════════════════════════════════════════════ */

/* ── 全要素の :focus-visible を統一 ── */
:focus-visible {
  outline: 2.5px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ── ボタン ── */
.btn:focus-visible {
  outline: 2.5px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius: inherit !important;
}

/* ── ナビアイテム ── */
.nav-item:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 1px !important;
  border-radius: 7px !important;
}

/* ── モバイル下ナビ ── */
.mob-nav-item:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* ── モーダル内の入力欄（focus-visible は既存の focus と同じ） ── */
.modal .field input:focus-visible,
.modal .field select:focus-visible,
.modal .field textarea:focus-visible {
  outline: none !important; /* box-shadow で表現するため */
}

/* ── .modal-close の :focus-visible ── */
.modal-close:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius: 6px !important;
}

/* ═══════════════════════════════════════════════════════════
   アニメーション・トランジション 統一パッチ
   3段階スケール: fast(0.15s) / base(0.20s) / slow(0.28s)
   ※ 末尾追記で上書き（既存の transition は削除しない）
   ═══════════════════════════════════════════════════════════ */

/* ── CSS変数（新旧互換） ── */
:root {
  /* 新スケール（このパッチ内で使用） */
  --t-fast:  0.15s ease;
  --t-base:  0.20s ease-out;
  --t-slow:  0.28s cubic-bezier(0.4, 0, 0.2, 1);

  /* 既存変数（app全体で参照）も同じ3段階に寄せる */
  --transition-fast: var(--t-fast);
  --transition-base: var(--t-base);
  --transition-slow: var(--t-slow);
}

/* ── モーダル fadeIn（0.18s → 0.20s）── */
.modal-overlay {
  animation-duration: 0.20s !important;
  animation-timing-function: ease-out !important;
}

/* slideIn（モーダル本体）は既存の 0.22s + cubic-bezier を維持 */

/* ── fast：ボタン・カード・小さいUI ── */
.btn {
  transition:
    background-color var(--t-fast),
    border-color     var(--t-fast),
    color            var(--t-fast),
    box-shadow       var(--t-fast),
    transform        var(--t-fast),
    opacity          var(--t-fast) !important;
}

.nav-item,
.view-tab,
.dash-view-btn,
.cal-cell,
.week-cell,
.bd-card,
.rd-card {
  transition: all var(--t-fast) !important;
}

.card,
.stat-card,
.site-card {
  transition:
    border-color var(--t-fast),
    box-shadow   var(--t-fast),
    transform    var(--t-fast) !important;
}

.radio-btn,
.check-btn,
.filter-btn {
  transition: all var(--t-fast) !important;
}

/* ── base：フォーカス・折りたたみ・自然な開閉 ── */
input,
select,
textarea {
  transition:
    border-color var(--t-base),
    box-shadow   var(--t-base),
    background   var(--t-base),
    color        var(--t-base) !important;
}

/* FAB（スクロールツール等）の表示/非表示 */
.v0x-scroll-tools {
  transition:
    opacity    var(--t-base),
    transform  var(--t-base),
    visibility var(--t-base) !important;
}

/* ノーレン（折りたたみ）— 0.22/0.18 のズレを解消 */
.measure-noren {
  transition:
    max-height var(--t-base),
    opacity    var(--t-base),
    transform  var(--t-base),
    padding    var(--t-base) !important;
}

/* 矢印・スケール */
.material-toggle-arrow,
.hier-acc-toggle svg {
  transition: transform var(--t-base) !important;
}

/* プログレス fill */
.progress-fill,
.perf-gauge-fill,
.rd-bar,
.dash-core-fill,
.material-bar-fill {
  transition: width var(--t-base) !important;
}

/* ── slow：サイドバー・大きな動き ── */
@media (max-width: 768px) {
  .sidebar {
    transition: left var(--t-slow) !important;
  }
}

.measure-sticky-panel {
  transition: transform var(--t-slow) !important;
}

/* トースト（読む時間を確保：既存 0.30s を維持） */

/* ── prefers-reduced-motion（動きを減らす）対応 ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01s linear;
    --t-base: 0.01s linear;
    --t-slow: 0.01s linear;
    --transition-fast: var(--t-fast);
    --transition-base: var(--t-base);
    --transition-slow: var(--t-slow);
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ローディング状態（スケルトン）パッチ
   body[data-db-loading] のときのみ表示
   データ到着後（属性削除）で自動的に非表示
   ═══════════════════════════════════════════════════════════ */

@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}

body[data-db-loading] {
  /* ── ダッシュボード ── */
  #page-dashboard .stat-card {
    position: relative;
    overflow: hidden;
  }
  #page-dashboard .stat-card .stat-num,
  #page-dashboard .stat-card .stat-label {
    opacity: 0 !important;
  }
  #page-dashboard .stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--surface2) 0%, var(--surface3) 50%, var(--surface2) 100%);
    background-size: 800px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
  }
  #page-dashboard .global-summary .big-progress-num {
    opacity: 0 !important;
  }
  #page-dashboard .big-bar-fill {
    width: 0 !important;
    transition: none !important;
  }
  #page-dashboard .dash-site-chip {
    opacity: 0 !important;
  }

  /* ── 日報履歴 ── */
  #historyList::before,
  #historyList::after {
    content: '';
    display: block;
    height: 72px;
    border-radius: 12px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, var(--surface2) 0%, var(--surface3) 50%, var(--surface2) 100%);
    background-size: 800px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
  }
  #historyList::after { animation-delay: 0.15s; }

  /* ── 施工実績 ── */
  #performanceList::before {
    content: '';
    display: block;
    height: 160px;
    border-radius: 12px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, var(--surface2) 0%, var(--surface3) 50%, var(--surface2) 100%);
    background-size: 800px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
  }

  /* ── 在庫一覧 ── */
  #invItemList::before,
  #invItemList::after {
    content: '';
    display: block;
    height: 72px;
    border-radius: 12px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, var(--surface2) 0%, var(--surface3) 50%, var(--surface2) 100%);
    background-size: 800px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
  }
  #invItemList::after { animation-delay: 0.12s; }

  /* ── 現場マスタ ── */
  /* tbody は ::before が効きにくい環境があるため、table-wrap を対象にする */
  #page-sites .table-wrap::before {
    content: '';
    display: block;
    height: 52px;
    border-radius: 8px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, var(--surface2) 0%, var(--surface3) 50%, var(--surface2) 100%);
    background-size: 800px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
  }
}

/* ローディング完了後の出現を少しだけ滑らかに */
body:not([data-db-loading]) #page-dashboard .stat-card .stat-num,
body:not([data-db-loading]) #page-dashboard .stat-card .stat-label,
body:not([data-db-loading]) #page-dashboard .dash-site-chip,
body:not([data-db-loading]) #page-dashboard .global-summary .big-progress-num {
  animation: fadeInUp 0.3s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  body[data-db-loading] #page-dashboard .stat-card::after,
  body[data-db-loading] #historyList::before,
  body[data-db-loading] #historyList::after,
  body[data-db-loading] #performanceList::before,
  body[data-db-loading] #invItemList::before,
  body[data-db-loading] #invItemList::after,
  body[data-db-loading] #page-sites .table-wrap::before {
    animation: none !important;
    background: var(--surface2) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   文字サイズ（--font-scale）を「全体」に効かせるパッチ
   - rem/em で書かれている箇所は確実に追従
   - 既存の px 固定が残る箇所もあるが、まず体感の一貫性を改善
   ═══════════════════════════════════════════════════════════ */

html {
  /* 1rem の基準をスケールさせる（--font-scale は app.js が設定） */
  font-size: calc(16px * var(--font-scale, 1)) !important;
}

body {
  /* 既存の「body だけ calc(px * --font-scale)」による二重スケールを避ける */
  font-size: 0.875rem !important; /* 14px 相当（htmlが16px基準のため） */
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 768px) {
  body {
    /* モバイルも同様に rem 基準で統一 */
    font-size: 0.875rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   darksoft テーマ強化・新コンポーネント対応パッチ
   コンセプト：深夜の施工管理端末 / 電光板ターミナル
   ※ 末尾追記で上書き（既存ルールは削除しない）
   ═══════════════════════════════════════════════════════════ */

/* 1. カラー変数の改善 */
html[data-theme="darksoft"] {
  /* text-faint を少し明るく（コントラスト改善）*/
  --text-faint: #6dbb90;

  /* 枠線の視認性 */
  --border: rgba(0, 255, 136, 0.28);
  --border-light: rgba(0, 255, 136, 0.16);

  /* スキャンライン用 */
  --scanline: rgba(0, 0, 0, 0.18);
}

/* 2. 背景にスキャンライン */
html[data-theme="darksoft"] body {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      var(--scanline) 2px,
      var(--scanline) 4px
    ) !important;
  background-color: var(--bg) !important;
}

/* 3. カード枠と質感 */
html[data-theme="darksoft"] .card,
html[data-theme="darksoft"] .stat-card,
html[data-theme="darksoft"] .site-card,
html[data-theme="darksoft"] .bd-card,
html[data-theme="darksoft"] .board-post,
html[data-theme="darksoft"] .photo-card {
  border: 1px solid var(--border) !important;
  box-shadow:
    0 0 0 1px rgba(0, 255, 136, 0.06),
    inset 0 1px 0 rgba(0, 255, 136, 0.04) !important;
}

html[data-theme="darksoft"] .card:hover,
html[data-theme="darksoft"] .stat-card:hover,
html[data-theme="darksoft"] .site-card:hover {
  border-color: rgba(0, 255, 136, 0.50) !important;
  box-shadow:
    0 0 12px rgba(0, 255, 136, 0.08),
    0 0 0 1px rgba(0, 255, 136, 0.14),
    inset 0 1px 0 rgba(0, 255, 136, 0.06) !important;
}

/* 4. タイトル・ラベルをターミナル調に */
html[data-theme="darksoft"] .card-title {
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.20em !important;
  color: var(--accent) !important;
  opacity: 0.75 !important;
  text-transform: uppercase;
}

/* 5. 数字をグロー */
html[data-theme="darksoft"] .stat-num,
html[data-theme="darksoft"] .big-progress-num,
html[data-theme="darksoft"] .inv-l1-qty,
html[data-theme="darksoft"] .measure-row-val,
html[data-theme="darksoft"] .measure-ledger-total,
html[data-theme="darksoft"] .perf-agg-v {
  text-shadow:
    0 0 8px rgba(0, 255, 136, 0.60),
    0 0 20px rgba(0, 255, 136, 0.25) !important;
}

/* 6. Primary ボタンの発光 */
html[data-theme="darksoft"] .btn-primary {
  box-shadow:
    0 0 10px rgba(0, 255, 136, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.4) !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.06em;
}
html[data-theme="darksoft"] .btn-primary:hover {
  box-shadow:
    0 0 18px rgba(0, 255, 136, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* 7. プログレスバーにグロー */
html[data-theme="darksoft"] .progress-fill,
html[data-theme="darksoft"] .big-bar-fill,
html[data-theme="darksoft"] .perf-gauge-fill:not(.warn) {
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.50) !important;
}

/* 8. テーブル（ヘッダーを整然と） */
html[data-theme="darksoft"] th {
  font-family: var(--mono) !important;
  letter-spacing: 0.10em !important;
  color: var(--accent) !important;
  opacity: 0.70;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}
html[data-theme="darksoft"] td {
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--text) !important;
}
html[data-theme="darksoft"] tbody tr:hover td {
  background: rgba(0, 255, 136, 0.05) !important;
}

/* 9. フィールドラベル（暗背景で消えないように） */
html[data-theme="darksoft"] label.fl {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.08em;
  font-size: 10px !important;
}

/* 10. 入力欄 */
html[data-theme="darksoft"] input,
html[data-theme="darksoft"] select,
html[data-theme="darksoft"] textarea {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  caret-color: var(--accent);
}
html[data-theme="darksoft"] input:focus,
html[data-theme="darksoft"] select:focus,
html[data-theme="darksoft"] textarea:focus {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 2px rgba(0, 255, 136, 0.20),
    0 0 8px rgba(0, 255, 136, 0.12) !important;
  outline: none !important;
}
html[data-theme="darksoft"] input::placeholder {
  color: var(--text-faint) !important;
  opacity: 0.75;
}

/* 11. スクロールバー */
html[data-theme="darksoft"] ::-webkit-scrollbar-track {
  background: var(--bg) !important;
}
html[data-theme="darksoft"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 136, 0.22) !important;
  border: 2px solid var(--bg);
}
html[data-theme="darksoft"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 136, 0.40) !important;
}

/* 12. モーダル */
html[data-theme="darksoft"] .modal {
  background: var(--surface) !important;
  border-left: 1px solid var(--border) !important;
}
html[data-theme="darksoft"] .modal-title {
  font-family: var(--mono) !important;
  letter-spacing: 0.06em;
  color: var(--accent) !important;
}
html[data-theme="darksoft"] .modal-overlay {
  background: rgba(2, 8, 6, 0.75) !important;
  backdrop-filter: blur(6px) !important;
}

/* 13. バッジ */
html[data-theme="darksoft"] .badge-green {
  background: rgba(0, 255, 136, 0.12) !important;
  color: var(--accent) !important;
  border-color: rgba(0, 255, 136, 0.30) !important;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.40);
}
html[data-theme="darksoft"] .badge-orange {
  background: rgba(255, 204, 0, 0.12) !important;
  color: var(--warning) !important;
  border-color: rgba(255, 204, 0, 0.30) !important;
}
html[data-theme="darksoft"] .badge-red {
  background: rgba(255, 68, 102, 0.12) !important;
  color: var(--danger) !important;
  border-color: rgba(255, 68, 102, 0.30) !important;
}

/* 14. ナビ */
html[data-theme="darksoft"] .nav-item {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em;
  color: var(--text-muted) !important;
}
html[data-theme="darksoft"] .nav-item.active {
  color: var(--accent) !important;
  background: rgba(0, 255, 136, 0.08) !important;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.30);
}
html[data-theme="darksoft"] .nav-item.active::before {
  background: var(--accent) !important;
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.60);
}
html[data-theme="darksoft"] .nav-section {
  color: rgba(0, 255, 136, 0.40) !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.18em;
}

/* 15. トップバー/下ナビ */
html[data-theme="darksoft"] .topbar {
  background: rgba(7, 25, 18, 0.96) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(8px);
}
html[data-theme="darksoft"] .topbar-title {
  font-family: var(--mono) !important;
  letter-spacing: 0.06em;
  color: var(--text) !important;
}
html[data-theme="darksoft"] .date-badge {
  background: rgba(0, 255, 136, 0.08) !important;
  border-color: rgba(0, 255, 136, 0.25) !important;
  color: var(--accent) !important;
}
html[data-theme="darksoft"] .mobile-bottom-nav {
  background: rgba(7, 25, 18, 0.95) !important;
  border-top: 1px solid var(--border) !important;
  backdrop-filter: blur(12px);
}
html[data-theme="darksoft"] .mob-nav-label {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.06em;
  color: var(--text-muted) !important;
}
html[data-theme="darksoft"] .mob-nav-item.active .mob-nav-label {
  color: var(--accent) !important;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.40);
}
html[data-theme="darksoft"] .mob-nav-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 4px rgba(0, 255, 136, 0.60);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   新コンポーネント darksoft 対応
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 17. bd-combo */
html[data-theme="darksoft"] .bd-combo-input {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
}
html[data-theme="darksoft"] .bd-combo-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.18) !important;
}
html[data-theme="darksoft"] .bd-combo-list {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 255, 136, 0.12) !important;
}
html[data-theme="darksoft"] .bd-combo-item {
  border-bottom-color: var(--border-light) !important;
}
html[data-theme="darksoft"] .bd-combo-item:hover,
html[data-theme="darksoft"] .bd-combo-item--active {
  background: rgba(0, 255, 136, 0.08) !important;
}
html[data-theme="darksoft"] .bd-combo-item-name {
  color: var(--text) !important;
  font-family: var(--mono) !important;
}
html[data-theme="darksoft"] .bd-combo-item-sub {
  color: var(--text-muted) !important;
}
html[data-theme="darksoft"] .bd-combo-item--other .bd-combo-item-name {
  color: var(--text-muted) !important;
}
html[data-theme="darksoft"] .bd-combo-hint-text {
  color: var(--text-faint) !important;
}
html[data-theme="darksoft"] .bd-combo-hint-text[data-ok="1"] {
  color: var(--accent) !important;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.30);
}

/* 18. ord-*（発注） */
html[data-theme="darksoft"] .ord-desc {
  background: rgba(0, 255, 136, 0.06) !important;
  border-color: rgba(0, 255, 136, 0.20) !important;
  color: var(--text-muted) !important;
}
html[data-theme="darksoft"] .ord-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="darksoft"] .ord-row-name {
  color: var(--text) !important;
  font-family: var(--mono) !important;
}
html[data-theme="darksoft"] .ord-row-meta,
html[data-theme="darksoft"] .ord-row-stock {
  color: var(--text-muted) !important;
}
html[data-theme="darksoft"] .ord-row-supplier {
  color: var(--accent) !important;
}
html[data-theme="darksoft"] .ord-row-shortage {
  background: rgba(255, 68, 102, 0.12) !important;
  color: var(--danger) !important;
  border-color: rgba(255, 68, 102, 0.30) !important;
}
html[data-theme="darksoft"] .ord-qty {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--accent) !important;
  font-family: var(--mono) !important;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.30);
}
html[data-theme="darksoft"] .ord-qty:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.18) !important;
}
html[data-theme="darksoft"] .ord-qty-unit {
  color: var(--text-muted) !important;
  font-family: var(--mono) !important;
}
html[data-theme="darksoft"] .ord-item-note {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="darksoft"] .ord-empty {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
}

/* 19. viewer-*（日報ビューア） */
html[data-theme="darksoft"] .viewer-section h3 {
  color: var(--accent) !important;
  opacity: 0.75;
  border-bottom-color: var(--border) !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.14em;
}
html[data-theme="darksoft"] .viewer-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="darksoft"] .viewer-row .label {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.08em;
}
html[data-theme="darksoft"] .viewer-row .val {
  color: var(--text) !important;
}
html[data-theme="darksoft"] .viewer-row:last-child .val {
  color: var(--accent) !important;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.40);
}

/* empty state */
html[data-theme="darksoft"] .perf-empty,
html[data-theme="darksoft"] .board-empty,
html[data-theme="darksoft"] .measure-ledger-empty,
html[data-theme="darksoft"] .worker-empty,
html[data-theme="darksoft"] .inv-dq-empty {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
}

/* ログインカード（darksoft版） */
html[data-theme="darksoft"] .login-card {
  background: rgba(18, 37, 28, 0.96) !important;
  border: 1px solid rgba(0, 255, 136, 0.28) !important;
  box-shadow:
    0 0 40px rgba(0, 255, 136, 0.06),
    0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="darksoft"] .login-logo-title {
  color: var(--accent) !important;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.35);
}
html[data-theme="darksoft"] .login-logo-sub {
  color: var(--text-muted) !important;
  letter-spacing: 0.18em;
}
html[data-theme="darksoft"] #loginBtn {
  box-shadow:
    0 0 14px rgba(0, 255, 136, 0.40),
    0 4px 12px rgba(0, 0, 0, 0.5) !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.08em;
}
html[data-theme="darksoft"] .login-sample-cta {
  background: rgba(0, 255, 136, 0.06) !important;
  border-color: rgba(0, 255, 136, 0.20) !important;
  color: var(--text-muted) !important;
}

/* ローディングスケルトン（darksoft版） */
html[data-theme="darksoft"] body[data-db-loading] #page-dashboard .stat-card::after,
html[data-theme="darksoft"] body[data-db-loading] #historyList::before,
html[data-theme="darksoft"] body[data-db-loading] #historyList::after,
html[data-theme="darksoft"] body[data-db-loading] #performanceList::before,
html[data-theme="darksoft"] body[data-db-loading] #invItemList::before,
html[data-theme="darksoft"] body[data-db-loading] #invItemList::after {
  background:
    linear-gradient(
      90deg,
      var(--surface)  0%,
      rgba(0, 255, 136, 0.08) 50%,
      var(--surface) 100%
    ) !important;
}

/* 選択テキスト */
html[data-theme="darksoft"] ::selection {
  background: rgba(0, 255, 136, 0.25);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════
   印刷スタイル整備パッチ
   施工実績 / 配置管理 / 内訳一覧 の @media print
   ═══════════════════════════════════════════════════════════ */

@media print {
  /* 共通：印刷時に消すUI */
  .mobile-bottom-nav,
  .v0x-scroll-tools,
  .ai-support-fab,
  #themeSwitcher,
  .dash-mode-tabs-row,
  .inv-actions,
  #invFilterBar,
  .no-print {
    display: none !important;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #fff !important;
    color: #111 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
  }

  .page {
    display: block !important;
    padding: 0 !important;
  }

  .card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .card-title {
    color: #333 !important;
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 6px !important;
    margin-bottom: 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase;
    opacity: 1 !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     施工実績（#page-performance）
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #page-performance .perf-tools,
  #page-performance .perf-tabs,
  #page-performance .perf-agg-tools,
  #page-performance .perf-actions,
  #performanceAgg {
    display: none !important;
  }

  #page-performance .perf-card {
    background: #fff !important;
    border: 1px solid #bbb !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #page-performance .perf-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111 !important;
  }

  #page-performance .perf-badge {
    background: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #aaa !important;
    font-size: 10px !important;
  }

  #page-performance .perf-date {
    color: #555 !important;
    font-size: 11px !important;
  }

  #page-performance .perf-grid {
    gap: 6px !important;
    margin-top: 10px !important;
  }

  #page-performance .perf-meter {
    background: #f8f8f8 !important;
    border: 1px solid #ddd !important;
    padding: 8px 10px !important;
    border-radius: 0 !important;
  }

  #page-performance .perf-meter-label {
    color: #444 !important;
    font-size: 10px !important;
  }

  #page-performance .perf-meter-pct {
    font-size: 20px !important;
    color: #111 !important;
  }
  #page-performance .perf-meter-pct.ok { color: #1a7a4a !important; }
  #page-performance .perf-meter-pct.warn { color: #7a5a00 !important; }

  #page-performance .perf-gauge {
    height: 6px !important;
    background: #e0e0e0 !important;
    border-radius: 0 !important;
    border: none !important;
  }

  #page-performance .perf-gauge-fill {
    background: #2a7a50 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #page-performance .perf-gauge-fill.ok { background: #1a7a4a !important; }
  #page-performance .perf-gauge-fill.warn { background: #8a7a20 !important; }

  #page-performance .perf-meter-sub {
    color: #555 !important;
    font-size: 10px !important;
  }

  #page-performance .perf-mats {
    border-top: 1px solid #eee !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
  }

  #page-performance .perf-mats-title {
    color: #666 !important;
    font-size: 9px !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase;
    opacity: 1 !important;
  }

  #page-performance .perf-chip {
    background: #f0f0f0 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    box-shadow: none !important;
  }

  #page-performance .perf-chip-num {
    color: #1a5a3a !important;
    font-weight: 700 !important;
  }

  #page-performance::before {
    content: '施工実績一覧';
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #111;
    padding-bottom: 8px;
    border-bottom: 2px solid #333;
    margin-bottom: 16px;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     配置管理（#page-schedule）
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* カレンダー（ビジュアライザ）を非表示：テーブルだけ */
  #page-schedule .card:last-of-type {
    display: none !important;
  }

  /* フィルター・ボタン類 */
  #page-schedule .ui-layer--l0,
  #page-schedule .schedule-l3,
  #page-schedule .btn {
    display: none !important;
  }

  #page-schedule #schListPanel {
    display: block !important;
  }

  #page-schedule .table-wrap {
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #page-schedule table {
    width: 100%;
    border-collapse: collapse;
  }

  #page-schedule thead {
    display: table-header-group !important;
  }

  #page-schedule th {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: #444 !important;
    background: #f0f0f0 !important;
    border: 1px solid #ccc !important;
    padding: 7px 8px !important;
    white-space: nowrap;
  }

  #page-schedule th:last-child,
  #page-schedule td:last-child {
    display: none !important;
  }

  #page-schedule tbody tr {
    display: table-row !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    break-inside: avoid;
  }

  #page-schedule td {
    font-size: 11px !important;
    color: #111 !important;
    border: 1px solid #ddd !important;
    padding: 7px 8px !important;
    vertical-align: middle;
    display: table-cell !important;
  }

  #page-schedule .sch-site-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #111 !important;
    white-space: normal !important;
  }

  #page-schedule .sch-site-edit-btn {
    display: none !important;
  }

  #page-schedule .sch-worker-chip {
    background: #f0f0f0 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  #page-schedule .sch-count,
  #page-schedule .sch-task,
  #page-schedule .sch-note,
  #page-schedule .sch-status {
    background: transparent !important;
    border: none !important;
    color: #111 !important;
    font-size: 11px !important;
    padding: 0 !important;
    width: auto !important;
    pointer-events: none;
  }

  #page-schedule::before {
    content: '配置管理 — ' attr(data-print-date);
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #111;
    padding-bottom: 8px;
    border-bottom: 2px solid #333;
    margin-bottom: 14px;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     内訳一覧（#page-breakdownlist）
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #page-breakdownlist .perf-tools {
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
  }

  #page-breakdownlist #bdlBackBtn {
    display: none !important;
  }

  #page-breakdownlist #bdlSiteHint {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111 !important;
  }

  #page-breakdownlist .perf-card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #page-breakdownlist .perf-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #111 !important;
  }

  #page-breakdownlist .perf-badge {
    background: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #bbb !important;
    border-radius: 2px !important;
    font-size: 9px !important;
    padding: 2px 5px !important;
  }

  #page-breakdownlist .perf-chip {
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
    border-radius: 2px !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    box-shadow: none !important;
  }

  #page-breakdownlist .perf-chip--muted {
    border-style: dashed !important;
    color: #888 !important;
  }

  #page-breakdownlist .perf-meter-pct {
    font-size: 13px !important;
    color: #111 !important;
    font-weight: 700 !important;
  }

  #page-breakdownlist .perf-meter {
    border: 1px solid #e0e0e0 !important;
    background: #f8f8f8 !important;
    padding: 6px 8px !important;
    border-radius: 0 !important;
  }

  #page-breakdownlist .perf-grid {
    gap: 6px !important;
  }

  #page-breakdownlist::before {
    content: '内訳一覧';
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #111;
    padding-bottom: 8px;
    border-bottom: 2px solid #333;
    margin-bottom: 14px;
  }

  @page {
    size: A4 portrait;
    margin: 15mm 12mm 15mm 12mm;
  }
}

/* 操作マニュアル（バックアップ内・manual.html iframe） */
#page-manual .manual-embed-shell {
  min-height: 0;
}
#page-manual .manual-embed-frame {
  width: 100%;
  min-height: min(78dvh, 820px);
  height: min(78dvh, 820px);
  border: 0;
  display: block;
  background: var(--surface);
}
@media (max-width: 768px) {
  #page-manual .manual-embed-frame {
    min-height: min(62dvh, 620px);
    height: min(62dvh, 620px);
  }
}

/* モバイル：掲示板・マニュアル — ノッチ／ステータスバー（セーフエリア）に被らないよう上を大きく空ける */
@media (max-width: 768px) {
  :root {
    --mobile-page-top-gap: calc(env(safe-area-inset-top, 0px) + 28px);
    --mobile-scroll-under-topbar: calc(58px + env(safe-area-inset-top, 0px) + 20px);
  }
  body.ios-app-shell {
    --mobile-page-top-gap: calc(env(safe-area-inset-top, 0px) + 40px);
    --mobile-scroll-under-topbar: calc(64px + env(safe-area-inset-top, 0px) + 28px);
  }

  #page-board {
    padding-top: var(--mobile-page-top-gap) !important;
    scroll-padding-top: var(--mobile-scroll-under-topbar) !important;
  }
  #page-board .card,
  #page-board .board-post,
  #page-board .board-post-form,
  #page-board .board-images {
    scroll-margin-top: var(--mobile-scroll-under-topbar);
  }
  #page-board .board-images img {
    scroll-margin-top: var(--mobile-scroll-under-topbar);
  }

  #page-manual {
    padding-top: var(--mobile-page-top-gap) !important;
    scroll-padding-top: var(--mobile-scroll-under-topbar) !important;
  }
  #page-manual > .card:first-of-type {
    scroll-margin-top: var(--mobile-scroll-under-topbar);
    margin-bottom: 12px !important;
  }
  #page-manual .manual-embed-shell {
    margin-top: 4px;
  }
  #page-manual .manual-open-desktop-only {
    display: none;
  }
}

body.native-app-shell #page-manual .manual-open-desktop-only,
body.ios-app-shell #page-manual .manual-open-desktop-only,
body.android-app-shell #page-manual .manual-open-desktop-only {
  display: none !important;
}

.board-lightbox {
  box-sizing: border-box;
  padding:
    calc(16px + env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}
.board-lightbox img {
  max-width: 100%;
  max-height: calc(
    100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 56px
  );
  object-fit: contain;
}
.board-lightbox-close {
  top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  right: max(14px, env(safe-area-inset-right, 0px)) !important;
}
.board-lightbox-nav.prev {
  left: max(12px, env(safe-area-inset-left, 0px)) !important;
}
.board-lightbox-nav.next {
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
}

/* ═══════════════════════════════════════════════════════════
   バーコードスキャナー
   ═══════════════════════════════════════════════════════════ */

/* ── スキャンボタン（検索欄内）── */
#invScanBtn {
  font-size: 12px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  line-height: 1.1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  letter-spacing: .02em;
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border)) !important;
  color: var(--accent) !important;
}

#invScanBtn .inv-scan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#invScanBtn .inv-scan-text {
  display: inline-block;
}

/* ── スキャナーモーダル ── */
.barcode-modal {
  max-width: 360px;
  width: 100%;
}
.barcode-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.barcode-hint {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
  line-height: 1.5;
}
#barcodeReader {
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  min-height: 200px;
}
#barcodeReader video {
  border-radius: 10px !important;
  width: 100% !important;
}
#barcodeReader img {
  display: none !important;
}
#barcodeReader > div {
  border: 2px solid var(--accent) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45) !important;
}
.barcode-status {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  min-height: 18px;
  font-weight: 600;
}

/* ── 場所ピッカーモーダル ── */
.barcode-loc-modal {
  max-width: 340px;
  width: 100%;
}
.barcode-loc-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.barcode-loc-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}
.barcode-loc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.barcode-loc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
  font-family: inherit;
  width: 100%;
}
.barcode-loc-item:hover,
.barcode-loc-item:focus-visible {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.barcode-loc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.barcode-loc-qty {
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: 8px;
}

/* ── darksoft ── */
html[data-theme="darksoft"] #barcodeReader > div {
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(0,255,136,.30),
              0 0 0 9999px rgba(0,0,0,.65) !important;
}
html[data-theme="darksoft"] .barcode-loc-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="darksoft"] .barcode-loc-item:hover {
  border-color: var(--accent) !important;
  background: rgba(0,255,136,.07) !important;
}

/* ── モバイル ── */
@media (max-width: 480px) {
  .barcode-modal,
  .barcode-loc-modal {
    max-width: 100%;
  }
  #barcodeReader {
    min-height: 230px;
  }
  .barcode-loc-item {
    padding: 13px 14px;
    min-height: 52px;
  }
}

/* ═══════════════════════════════════════════════════════════
   バーコード自動補完 UI
   ═══════════════════════════════════════════════════════════ */

.barcode-autofill-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.barcode-autofill-hint::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: barcodeSpin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes barcodeSpin {
  to { transform: rotate(360deg); }
}

.barcode-autofilled {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent-subtle) 50%, var(--surface)) !important;
  transition: border-color 0.3s, background 0.3s !important;
}

#barcodeChangeCandidateBtn {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  margin-top: 4px;
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
}

.barcode-cand-modal {
  max-width: 340px;
  width: 100%;
}

.barcode-cand-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.barcode-cand-desc {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.barcode-cand-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.barcode-cand-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
  font-family: inherit;
  width: 100%;
}

.barcode-cand-item:hover,
.barcode-cand-item:focus-visible {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.barcode-cand-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.barcode-cand-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-muted);
}

.barcode-cand-conf {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  color: var(--text-faint);
}

html[data-theme="darksoft"] .barcode-cand-item:hover {
  border-color: var(--accent) !important;
  background: rgba(0, 255, 136, .07) !important;
}

/* ═══════════════════════════════════════════════════════════
   バーコード割り当てリスト（既存品目へJAN登録）
   ═══════════════════════════════════════════════════════════ */
.barcode-assign-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.barcode-assign-item:hover,
.barcode-assign-item:focus-visible {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.barcode-assign-item-name {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  line-height: 1.25;
}
.barcode-assign-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.2;
}
.barcode-assign-item-right {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   必要材料カード 仕上げパッチ
   目的：余白・立体感・ボタン触感の改善
   ═══════════════════════════════════════════════════════════ */
.dash-quartz-kpi-group--inline-mat {
  gap: 6px !important;
  width: min(100%, 234px) !important;
  max-width: 234px !important;
}
/* 材料名の下：タイル左寄せ・右に目安注釈 */
.dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band {
  grid-template-columns: 1fr !important;
}
.dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-row {
  grid-column: 1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
}
.dash-bdmat-title-row--quartz .dash-bdmat-title-quartz-band > .dash-quartz-kpi-group--inline-mat {
  grid-column: 1 !important;
  justify-self: start !important;
  width: min(100%, 234px) !important;
  max-width: 234px !important;
}
.dash-quartz-kpi-group--inline-mat .dash-quartz-tile {
  padding: 7px 8px 8px !important;
  border-radius: 9px !important;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--surface) 80%, white) 0%,
      var(--surface) 100%
    ) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 2px 5px rgba(56,48,42,.06) !important;
  transition: box-shadow .15s !important;
}
.dash-quartz-kpi-group--inline-mat .dash-quartz-k {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  opacity: .65 !important;
  margin-bottom: 3px !important;
}
.dash-quartz-kpi-group--inline-mat .dash-quartz-v {
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
}
.dash-quartz-kpi-group--inline-mat .dash-quartz-u {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  opacity: .70 !important;
}
.dash-quartz-kpi-group--inline-mat .dash-quartz-tile--lack {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--danger) 9%, var(--surface)) 0%,
      color-mix(in srgb, var(--danger) 5%, var(--surface)) 100%
    ) !important;
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 2px 6px color-mix(in srgb, var(--danger) 12%, transparent) !important;
}
.dash-quartz-kpi-group--inline-mat .dash-quartz-tile--lack .dash-quartz-v {
  color: var(--danger) !important;
}
.dash-quartz-kpi-group--inline-mat .dash-quartz-tile--lack .dash-quartz-k {
  color: var(--danger) !important;
  opacity: .80 !important;
}
.dash-fi-mat-fish-card {
  padding: 16px 16px 14px !important;
  border-radius: 13px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 2px 8px rgba(56,48,42,.07) !important;
  transition: box-shadow .18s, border-color .18s !important;
}
@media (hover: hover) {
  .dash-fi-mat-fish-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.55) inset,
      0 5px 16px rgba(56,48,42,.10) !important;
  }
}
.dash-fi-mat-fish-card .dash-row-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .005em !important;
}
.dash-fi-mat-fish-card--lack {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--danger) 28%, transparent),
    0 3px 10px color-mix(in srgb, var(--danger) 10%, transparent) !important;
}
.dash-bdmat-stock-actions .btn {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  min-height: 30px !important;
  opacity: 1 !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset !important;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s !important;
}
@media (hover: hover) {
  .dash-bdmat-stock-actions .btn:hover {
    background: var(--surface) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.55) inset,
      0 2px 8px rgba(56,48,42,.10) !important;
  }
}
.dash-bdmat-stock-actions .btn:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}
.dash-row-meters-pill {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 5px 9px !important;
  border-radius: 7px !important;
  letter-spacing: .02em !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset !important;
  font-family: var(--mono) !important;
}

/* ═══════════════════════════════════════════════════════════
   ダッシュボード ナビゲーション追加
   ═══════════════════════════════════════════════════════════ */

/* ── ナビヒント（→ テキスト）── */
.dash-nav-hint {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  letter-spacing: 0.04em;
  margin-left: 4px;
  transition: opacity var(--t-fast);
  flex-shrink: 0;
}

/* ── 現場名ボタン ── */
.dash-fi-place-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--t-fast);
  font-family: inherit;
}

@media (hover: hover) {
  .dash-fi-place-btn:hover {
    background: var(--accent-subtle);
  }

  .dash-fi-place-btn:hover .dash-fi-place-place::after {
    content: ' ✏';
    font-size: 12px;
    opacity: 0.5;
  }
}

/* ── 達成率 + バーエリアボタン ── */
.dash-progress-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 10px;
  font-family: inherit;
  transition: background var(--t-fast);
}

@media (hover: hover) {
  .dash-progress-btn:hover {
    background: var(--accent-subtle);
  }

  .dash-progress-btn:hover .dash-nav-hint {
    opacity: 1;
  }
}

/* ── 内訳N箇所 ── */
.dash-m-locs {
  cursor: pointer;
  border-radius: 5px;
  padding: 2px 4px;
  transition: color var(--t-fast), background var(--t-fast);
  display: flex;
  align-items: center;
  gap: 2px;
}

@media (hover: hover) {
  .dash-m-locs:hover {
    color: var(--accent);
    background: var(--accent-subtle);
  }

  .dash-m-locs:hover .dash-nav-hint {
    opacity: 1;
  }
}

/* ── 人工ボタン ── */
.dash-labor-btn {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: inherit;
  cursor: pointer;
  border-radius: 8px;
  font-family: inherit;
  transition: background var(--t-fast);
  gap: inherit;
}

@media (hover: hover) {
  .dash-labor-btn:hover {
    background: var(--accent-subtle);
  }

  .dash-labor-btn:hover .dash-nav-hint {
    opacity: 1;
  }
}

/* ── 必要材料ラベル行 ── */
.dash-glance-mat-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-mat-inv-link {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.75;
  letter-spacing: 0.03em;
  transition: opacity var(--t-fast), background var(--t-fast);
  margin-left: auto;
}

@media (hover: hover) {
  .dash-mat-inv-link:hover {
    opacity: 1;
    background: var(--accent-subtle);
  }
}

/* タッチ端末では hover なしで常に表示 */
@media (hover: none) {
  .dash-nav-hint {
    opacity: 0.65;
  }

  .dash-mat-inv-link {
    opacity: 1;
  }
}
.dash-fi-mat-mini--fish {
  gap: 12px !important;
  margin-top: 14px !important;
}

/* ═══════════════════════════════════════════════════════════
   日報「基本情報」UX（#page-report 内のみ。アプリシェルは変更しない）
   ═══════════════════════════════════════════════════════════ */
#page-report .report-ux-v2-grid .field,
#page-report .report-ux-team-row .field {
  min-width: 0;
}
#page-report .report-ux-native-radio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#page-report .report-ux-native-number,
#page-report select.report-ux-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: 0;
  top: 0;
}
#page-report .report-ux-chip-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
#page-report .report-ux-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#page-report .report-ux-chip.is-on {
  background: color-mix(in srgb, #2563eb 26%, var(--surface2));
  border-color: #2563eb;
  color: color-mix(in srgb, #1d4ed8 88%, var(--text));
}
#page-report .report-ux-slider {
  width: 100%;
  margin-top: 8px;
  display: block;
  box-sizing: border-box;
}
#page-report .report-ux-value-badge {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
#page-report .report-ux-team-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  margin-top: 10px;
}
#page-report .report-ux-team-row > .field:first-of-type + .field {
  flex: 0 0 auto;
}
#page-report .report-ux-task-field {
  flex: 1 1 220px;
  min-width: 0;
}
#page-report .report-ux-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
#page-report .report-ux-stepper-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#page-report .report-ux-stepper-val {
  min-width: 2.2em;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--text);
}

/* ── 日報：施工項目ジャンプ＋充填／撤去の数量入力方式（input は差し替えず #page-report 内） ── */
#page-report #reportBreakdownCard .rd-report-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  margin: 0 0 10px;
}
#page-report #reportBreakdownCard .rd-toolbar-field {
  margin: 0;
  flex: 1 1 160px;
  min-width: 0;
}
#page-report #reportBreakdownCard .rd-toolbar-field--grow {
  flex: 2 1 220px;
}
#page-report .rd-qty-mode-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
#page-report .qty-mode-radio {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#page-report .qty-mode-radio--on {
  border-color: color-mix(in srgb, var(--primary, #185fa5) 55%, var(--border));
  background: color-mix(in srgb, var(--primary, #185fa5) 14%, var(--surface2));
  color: var(--text);
}

#page-report .rd-qty-plan,
#page-report .rd-qty-stepper,
#page-report .rd-qty-preset,
#page-report .rd-qty-slider {
  display: none;
}
body.qty-mode-plan #page-report .rd-qty-plan {
  display: block;
}
body.qty-mode-stepper #page-report .rd-qty-stepper {
  display: flex;
}
body.qty-mode-preset #page-report .rd-qty-preset {
  display: block;
}
body.qty-mode-slider #page-report .rd-qty-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#page-report .rd-card input[type="number"].rd-qty-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  clip: rect(0, 0, 0, 0);
}

#page-report .rd-input-group.rd-qty-host {
  position: relative;
  align-items: stretch;
  min-width: 0;
}

body.qty-mode-stepper #page-report .rd-input-group.fill,
body.qty-mode-stepper #page-report .rd-input-group.remove:not(.disabled) {
  min-width: 128px;
}

#page-report .rd-qty-plan .rd-qty-disp {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  margin-bottom: 5px;
  min-height: 2.2em;
  outline: none;
}
#page-report .rd-plan-quick {
  font-size: 11px;
  padding: 6px 0;
  border-radius: 8px;
  border: 1px solid var(--primary, #185fa5);
  background: color-mix(in srgb, var(--primary, #185fa5) 10%, transparent);
  color: var(--primary, #185fa5);
  width: 100%;
  cursor: pointer;
  text-align: center;
  display: block;
  -webkit-tap-highlight-color: transparent;
}
#page-report .rd-plan-quick:active {
  opacity: 0.75;
}

#page-report .rd-qty-stepper {
  align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 220px;
}
#page-report .rd-stepper-btn {
  width: 40px;
  font-size: 20px;
  font-weight: 500;
  border: none;
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
#page-report .rd-stepper-btn:active {
  opacity: 0.65;
}
#page-report .rd-stepper-sep {
  width: 1px;
  background: var(--border-light);
  flex-shrink: 0;
}
#page-report .rd-stepper-disp {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  padding: 8px 4px;
  background: var(--surface2);
  font-variant-numeric: tabular-nums;
}

#page-report .rd-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 5px;
}
#page-report .rd-preset-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#page-report .rd-preset-btn:active {
  opacity: 0.65;
}
#page-report .rd-preset-btn--plan {
  border-color: var(--primary, #185fa5);
  background: color-mix(in srgb, var(--primary, #185fa5) 10%, transparent);
  color: var(--primary, #185fa5);
  grid-column: 1 / -1;
}
#page-report .rd-preset-disp {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* ============================================================
   patch_style_multiexpand.css
   日報「本日の施工記録」— 複数展開・全選択・全解除 スタイル
   すべてのセレクタは #page-report 配下に限定し、
   他ページへの副作用を完全に排除する。
   style.css の末尾に追記すること。
   ============================================================ */

/* ── ツールバー ─────────────────────────────────────────────── */

#page-report #rdMultiExpandToolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

#page-report .rd-multi-expand-toolbar-main {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

#page-report .rd-bd-hamburger--toolbar-sub {
  width: 36px;
  height: 32px;
  border-radius: 8px;
}

#page-report .rd-bd-hamburger--toolbar-sub .rd-hamburger-bars {
  gap: 4px;
  width: 16px;
}

#page-report #reportBreakdownBody.rd-fold-unselected .rd-card--compact {
  display: none !important;
}

#page-report #rdFoldUnselectedBtn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
}

/* 「項目を選ぶ」ボタン */
#page-report .rd-toolbar-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1.5px solid var(--accent);
  border-radius: 7px;
  background: var(--surface);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
#page-report .rd-toolbar-select-btn:hover,
#page-report .rd-toolbar-select-btn:focus-visible {
  background: var(--accent);
  color: #fff;
  outline: none;
}

/* 「選択中 N 件」カウント */
#page-report .rd-expand-count {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono, monospace);
  min-width: 0;
}

/* 全て / 畳む / 一覧から隠す ハンバーガー */
#page-report .rd-expand-quick-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
#page-report .rd-expand-quick-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
}
#page-report .rd-expand-quick-btn:hover,
#page-report .rd-expand-quick-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}
#page-report .rd-expand-clear-btn:hover,
#page-report .rd-expand-clear-btn:focus-visible {
  border-color: var(--warning, #c96d2c);
  color: var(--warning, #c96d2c);
}

/* ── カード：展開 / 畳み 状態 ──────────────────────────────── */

/* デフォルトはコンパクト（畳み）状態 */
#page-report #reportBreakdownBody .rd-card--compact .rd-input-group,
#page-report #reportBreakdownBody .rd-card--compact .rd-progress-row,
#page-report #reportBreakdownBody .rd-card--compact .rd-quick-actions {
  display: none;
}

/* カードヘッダ（クリック可能）のヒント装飾 */
#page-report #reportBreakdownBody .rd-card .rd-card-info {
  position: relative;
  padding-right: 22px; /* chevron スペース */
}
#page-report #reportBreakdownBody .rd-card .rd-card-info::after {
  content: '＋';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1;
  transition: transform 0.18s, color 0.18s;
}
#page-report #reportBreakdownBody .rd-card--expanded .rd-card-info::after {
  content: '－';
  color: var(--accent);
}

/* 展開状態 */
#page-report #reportBreakdownBody .rd-card--expanded {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 68 107 120) / 0.10);
  background: var(--surface);
}
#page-report #reportBreakdownBody .rd-card--expanded .rd-input-group,
#page-report #reportBreakdownBody .rd-card--expanded .rd-progress-row,
#page-report #reportBreakdownBody .rd-card--expanded .rd-quick-actions {
  display: flex; /* 各要素の元のdisplayに合わせる */
}
#page-report #reportBreakdownBody .rd-card--expanded .rd-progress-row {
  display: flex;
}

/* コンパクト状態でもヘッダ情報（バッジ）は常に見える */
#page-report #reportBreakdownBody .rd-card--compact .rd-card-info {
  opacity: 1;
}

/* コンパクト時はカード高さを最小化 */
#page-report #reportBreakdownBody .rd-card--compact {
  padding-top: 7px;
  padding-bottom: 7px;
  cursor: pointer;
}
#page-report #reportBreakdownBody .rd-card--compact:hover {
  border-color: var(--accent);
  background: var(--surface);
}

/* ═══ files.zip patch_style_card_mobile_fix（#page-report 施工記録カードのみ）═══ */

#page-report #reportBreakdownBody .rd-card {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
}

#page-report #reportBreakdownBody .rd-card .rd-card-header-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

#page-report #reportBreakdownBody .rd-card .rd-card-info {
  min-width: 0 !important;
  flex: 1 1 0;
}

#page-report #reportBreakdownBody .rd-card .rd-loc {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.3 !important;
  min-width: 0 !important;
}

#page-report #reportBreakdownBody .rd-card--expanded {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
}

#page-report #reportBreakdownBody .rd-card--expanded .rd-card-header-zone {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

#page-report #reportBreakdownBody .rd-card--expanded .rd-inputs-row-wrap {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

#page-report #reportBreakdownBody .rd-card--expanded .rd-input-group {
  grid-column: unset !important;
  grid-row: unset !important;
}

#page-report #reportBreakdownBody .rd-card--expanded .rd-progress-row {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

#page-report #reportBreakdownBody .rd-card--compact .rd-inputs-row-wrap {
  display: none !important;
}

#page-report #reportBreakdownBody .rd-card--compact {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
}

#page-report #reportBreakdownBody .rd-card--compact .rd-card-header-zone {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

@media (max-width: 480px) {
  #page-report #reportBreakdownBody .rd-card .rd-card-header-zone {
    padding: 0 2px;
  }
  #page-report #reportBreakdownBody .rd-card--expanded .rd-inputs-row-wrap {
    gap: 8px;
  }
}

/* ── ポップオーバー（項目選択シート）───────────────────────── */

#page-report .rd-popover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 1200;
  animation: rdFadeIn 0.15s ease;
}

#page-report .rd-popover {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 72dvh;
  background: var(--surface);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.14);
  z-index: 1210;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: rdSlideUp 0.22s cubic-bezier(0.32, 1, 0.46, 1);
}

@media (min-width: 600px) {
  #page-report .rd-popover {
    position: fixed;
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    width: min(440px, 92vw);
    max-height: 70dvh;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    animation: rdScaleIn 0.2s cubic-bezier(0.32, 1, 0.46, 1);
  }
}

#page-report .rd-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#page-report .rd-popover-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
#page-report .rd-popover-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
#page-report .rd-pop-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}
#page-report .rd-pop-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
#page-report .rd-pop-close {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
}

#page-report .rd-popover-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#page-report .rd-popover-empty {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 20px 0;
}

#page-report .rd-popover-item {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--surface2);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  user-select: none;
}
#page-report .rd-popover-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
#page-report .rd-popover-item.checked {
  border-color: var(--accent);
  background: var(--surface);
}
#page-report .rd-popover-item:hover {
  border-color: var(--accent);
}
#page-report .rd-popover-item-loc {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#page-report .rd-popover-item-meta {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--mono, monospace);
  white-space: nowrap;
}
#page-report .rd-pop-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.12s;
  flex-shrink: 0;
}
#page-report .rd-popover-item.checked .rd-pop-indicator {
  background: var(--accent);
}

#page-report .rd-popover-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── アニメーション ─────────────────────────────────────────── */

@keyframes rdFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rdSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes rdScaleIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── モバイル調整 ──────────────────────────────────────────── */

@media (max-width: 480px) {
  #page-report #rdMultiExpandToolbar {
    padding: 7px 10px;
    gap: 5px 8px;
  }
  #page-report .rd-toolbar-select-btn {
    font-size: 11px;
    padding: 5px 10px;
  }
  #page-report .rd-expand-count {
    font-size: 10px;
  }
  #page-report .rd-expand-quick-btn {
    font-size: 10px;
    padding: 4px 8px;
  }
}


/* 既存 .rd-input-group は縦積みのまま */
#page-report #reportBreakdownBody .rd-card--expanded .rd-input-group {
  flex-direction: column;
}

/* ── 日報：施工記録一覧のハンバーガー折りたたみ ── */
#page-report .rd-bd-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}
#page-report .rd-bd-title-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
#page-report .rd-bd-hamburger {
  flex-shrink: 0;
  width: 40px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#page-report .rd-hamburger-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
}
#page-report .rd-hamburger-bars span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
#page-report .rd-bd-hamburger:hover,
#page-report .rd-bd-hamburger:focus-visible {
  border-color: var(--accent);
  outline: none;
}
#page-report #reportBreakdownCard.rd-bd-collapsed .rd-breakdown-collapse-region {
  display: none !important;
}
#page-report #reportBreakdownCard.rd-bd-collapsed .rd-bd-hamburger {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
}

/* ── 現場モード（body.field-mode）— files.zip / patch_style_field_mode.css 相当 ── */
body.field-mode {
  --fm-tap-min: 52px;
  --fm-font-base: 15px;
  --fm-font-label: 12px;
  --fm-radius: 14px;
  --fm-gap: 12px;
}

body.field-mode .btn {
  min-height: var(--fm-tap-min) !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: var(--fm-radius) !important;
  letter-spacing: 0.01em !important;
}

body.field-mode .btn-sm {
  min-height: 44px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.field-mode .action-row .btn,
body.field-mode #reportActions .btn,
body.field-mode #saveReportBtn {
  min-height: 56px !important;
  font-size: 16px !important;
  border-radius: 16px !important;
}

body.field-mode .mob-nav-item {
  min-height: 60px !important;
  padding: 8px 6px !important;
  gap: 3px !important;
}

body.field-mode .mob-nav-icon {
  font-size: 26px !important;
}

body.field-mode .mob-nav-label {
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.field-mode input,
body.field-mode select,
body.field-mode textarea {
  font-size: 16px !important;
  padding: 12px 14px !important;
  min-height: var(--fm-tap-min) !important;
  border-radius: var(--fm-radius) !important;
}

body.field-mode textarea {
  min-height: 90px !important;
}

body.field-mode label.fl {
  font-size: var(--fm-font-label) !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}

body.field-mode .radio-btn,
body.field-mode .check-btn {
  min-height: 48px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: var(--fm-radius) !important;
}

body.field-mode #reportBreakdownBody .rd-input-group input {
  width: 80px !important;
  height: 52px !important;
  font-size: 20px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
}

body.field-mode #reportBreakdownBody .rd-input-group label {
  font-size: 10px !important;
  font-weight: 800 !important;
}

body.field-mode .rd-done-btn {
  min-height: 44px !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
}

body.field-mode #reportBreakdownBody .rd-loc {
  font-size: 15px !important;
  font-weight: 800 !important;
}

body.field-mode #reportCheckCard tr.report-check-tr td,
body.field-mode #reportCheckCard td.report-check-label {
  padding: 13px 8px !important;
  font-size: 13px !important;
}

body.field-mode #reportCheckCard .qc-badge {
  min-width: 64px !important;
  height: 44px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

body.field-mode .qc-all-ok-btn {
  min-height: 44px !important;
  font-size: 12px !important;
  padding: 8px 14px !important;
}

body.field-mode .card-title {
  font-size: 13px !important;
  margin-bottom: 16px !important;
}

body.field-mode .field {
  margin-bottom: var(--fm-gap) !important;
}

body.field-mode .mob-more-item {
  min-height: 72px !important;
  padding: 12px 8px !important;
  border-radius: 14px !important;
  gap: 6px !important;
}

body.field-mode .mob-more-icon {
  font-size: 26px !important;
}

body.field-mode .mob-more-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

body.field-mode #page-inventory .inv-l1-card {
  padding: 12px 13px !important;
}

body.field-mode #page-inventory .inv-l1-row3 .n1 {
  font-size: 15px !important;
}

body.field-mode #page-inventory .inv-l1-row3 .qty {
  font-size: 26px !important;
}

body.field-mode select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a7d85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px !important;
  -webkit-appearance: none;
  appearance: none;
}

body.field-mode::before {
  content: '🔨 現場モード';
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  right: 8px;
  z-index: 9900;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 999px;
  padding: 3px 9px;
  pointer-events: none;
  opacity: 0.85;
  line-height: 1.4;
}

body.field-mode .topbar ~ * .field-mode-badge,
body.field-mode.has-topbar::before {
  display: none;
}

body.field-mode .btn:active {
  transform: scale(0.97) !important;
  opacity: 0.88 !important;
}

body.field-mode .mob-nav-item:active {
  transform: scale(0.92) !important;
}

/* 在庫棚カード responsive — patch_style_inv_shelf_responsive.css */

/* ── ① ベース：auto-fill でカード幅240px以上を確保しつつ自動列数 ── */

#page-inventory .inv-l1-group-cards {
  display: grid !important;
  /* 最小240pxを確保しつつ画面幅に応じて列数が自動増加 */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 8px !important;
  align-content: start !important;
}

/* ── ② モバイル最狭（〜519px）: 常に1列 ── */
/* 375px幅では minmax(240px,1fr) で既に1列になるが、
   明示的に指定してメーカー列の折り返しを確実に防ぐ */
@media (max-width: 519px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* ── ③ 中型スマホ〜タブレット縦（520〜767px）: 2列 ── */
@media (min-width: 520px) and (max-width: 767px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* 2列時: カードを少しコンパクトに */
  #page-inventory .inv-l1-card {
    padding: 9px 10px !important;
  }
  #page-inventory .inv-l1-row3 .n1 {
    font-size: 13px !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: 22px !important;
  }
}

/* ── ④ タブレット（768〜899px）: 2列 ── */
@media (min-width: 768px) and (max-width: 899px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #page-inventory .inv-l1-card {
    padding: 10px 12px !important;
  }
}

/* ── ⑤ PC・タブレット横向き（900〜1199px）: 3列 ── */
/* 既存の900px+ 定義（2列）を上書きして3列にする */
@media (min-width: 900px) and (max-width: 1199px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  /* 3列時: カード内の品名サイズを調整 */
  #page-inventory .inv-l1-row3 .n1 {
    font-size: 15px !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: 26px !important;
  }
  /* メーカー列を少し広げる（3列だと列幅に余裕ができる） */
  #page-inventory .inv-l1-row3 {
    grid-template-columns: 24px minmax(0, 60px) minmax(0, 1fr) 74px !important;
  }
}

/* ── ⑥ ワイドPC（1200px+）: 4列 ── */
@media (min-width: 1200px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  #page-inventory .inv-l1-row3 .n1 {
    font-size: 15px !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: 26px !important;
  }
  #page-inventory .inv-l1-row3 {
    grid-template-columns: 24px minmax(0, 64px) minmax(0, 1fr) 74px !important;
  }
}

/* ── ⑦ カードの等高揃え（複数列時にカード高さを揃える）── */
/* 列数が2以上になる520px+ でカードを等高に */
@media (min-width: 520px) {
  #page-inventory .inv-l1-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  #page-inventory .inv-l1-row3,
  #page-inventory .inv-l1-row4 {
    flex: 1;
  }
}

/* ── ⑧ カテゴリグループ: 横幅いっぱいに広げる ── */
#page-inventory .inv-l1-group {
  /* コンテナ全幅を使う */
  width: 100%;
}

/* ── ⑨ inv-l1-row3 列幅: モバイル1列時は品名最大化 ── */
@media (max-width: 519px) {
  #page-inventory .inv-l1-row3 {
    /* 狭い幅でも品名スペースを確保（CB列は 28px で切れ防止） */
    grid-template-columns: 28px minmax(0, 44px) minmax(0, 1fr) 62px !important;
    gap: 4px !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: 22px !important;
  }
  #page-inventory .inv-l1-row3 .n1 {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}

/* ── ⑩ カテゴリタイトルを「棚の仕切り」として視認しやすく ── */
#page-inventory .inv-l1-group-title {
  position: sticky !important;
  top: 110px !important; /* フッターツールバー下 */
  z-index: 3 !important;
  background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  padding: 5px 4px 6px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
}

#page-inventory .inv-l1-group-title .t {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

/* ── ⑪ グループ間の仕切りを明確に ── */
#page-inventory .inv-l1-group {
  margin-bottom: 16px !important;
  padding-bottom: 4px !important;
}
#page-inventory .inv-l1-group + .inv-l1-group {
  border-top: 1px solid var(--border) !important;
  padding-top: 6px !important;
}

/* ── ⑫ モバイルでのスティッキータイトル位置調整 ── */
@media (max-width: 768px) {
  #page-inventory .inv-l1-group-title {
    top: 98px !important; /* モバイルトップバー高さ */
  }
}
@media (max-width: 480px) {
  #page-inventory .inv-l1-group-title {
    top: 94px !important;
  }
}

/* 現場モード slim（表示簡略化）— patch_style_field_mode_slim.css from files.zip */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   日報ページ（#page-report）
   最低限: 作業日・現場・天気・人数・主作業・施工記録・保存
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 報告書番号フィールド */
body.field-mode #page-report #r_reportNo,
body.field-mode #page-report label[for="r_reportNo"],
body.field-mode #page-report #r_reportNo + *,
body.field-mode #page-report .field:has(#r_reportNo) {
  display: none !important;
}

/* 気温・湿度 */
body.field-mode #page-report .field:has(#r_temp),
body.field-mode #page-report .field:has(#r_hum) {
  display: none !important;
}

/* 開始・終了時刻 */
body.field-mode #page-report .field:has(#r_start),
body.field-mode #page-report .field:has(#r_end) {
  display: none !important;
}

/* 作業責任者 */
body.field-mode #page-report .field:has(#r_supervisor) {
  display: none !important;
}

/* 音声入力バナー */
body.field-mode #page-report .voice-assist-banner {
  display: none !important;
}

/* 人工計算エリア（一人一日の目安・人工）*/
body.field-mode #page-report .report-labor-calc {
  display: none !important;
}

/* 作業内容・所見テキストエリア */
body.field-mode #page-report .field:has(#r_content) {
  display: none !important;
}

/* ---- 品質・安全チェックカード → 折りたたみ見出しに置換 ---- */
/* カード本体を隠す */
body.field-mode #reportCheckCard {
  display: none !important;
}

/* 施工記録カードのグリッドをシングルカラムに（タップしやすく） */
body.field-mode #page-report .grid.grid-3 {
  grid-template-columns: 1fr !important;
}

/* 天気ラジオグループがある行は2列を維持（天気 + 人数） */
body.field-mode #page-report .grid.grid-3:has(.radio-group) {
  grid-template-columns: 1fr 1fr !important;
}

/* 施工記録: 特記事項 */
body.field-mode #page-report .field:has(#r_notes) {
  display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ダッシュボード（#page-dashboard）
   現場モードでは上段（本日稼働）＋現場選択＋猫モード中心（在庫ダッシュは非表示）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 進捗タブ・在庫タブ切替（使わない） */
body.field-mode #page-dashboard .dash-mode-tabs-row {
  display: none !important;
}

/* 設定ボタン */
body.field-mode #page-dashboard #dashSettingsBtn {
  display: none !important;
}

/* L1 参考KPI（ガジェット帯・KPIカードグリッド） */
body.field-mode #page-dashboard .dash-layer--l1 {
  display: none !important;
}

/* 日報サイドパネル（直近日報） */
body.field-mode #page-dashboard #dashSiteReportHistory {
  display: none !important;
}

/* 内訳パネル（L2） */
body.field-mode #page-dashboard #dashBreakdown {
  display: none !important;
}

/* 在庫モード（ダッシュ内）のみ非表示。猫モード #dashModeCat は表示する */
body.field-mode #page-dashboard #dashModeStock {
  display: none !important;
}

/* 進捗ヘッダのサブタイトル（細かい情報） */
body.field-mode #page-dashboard .dash-subtitle {
  display: none !important;
}

/* 完了現場ボタン */
body.field-mode #page-dashboard #dashDoneToggleBtn {
  display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   在庫ページ（#page-inventory）
   移動伝票・在庫調整は残す。フィルタ・詳細設定は隠す
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 細かいフィルタバー（絞り込み解除・フィルタ編集・現場の在庫） */
body.field-mode #page-inventory .inv-filter-bar,
body.field-mode #page-inventory #invFilterBar,
body.field-mode #page-inventory .inv-maker-filter,
body.field-mode #page-inventory .inv-material-filter {
  display: none !important;
}

/* 発注リストボタン */
body.field-mode #page-inventory #openOrderModalBtn {
  display: none !important;
}

/* サンプル登録・在庫リセット（現場では不要） */
body.field-mode #page-inventory #seedInventoryBtn,
body.field-mode #page-inventory #resetInventoryBtn {
  display: none !important;
}

/* 品目追加・場所追加（現場では不要） */
body.field-mode #page-inventory #addItemBtn,
body.field-mode #page-inventory #addLocationBtn {
  display: none !important;
}

/* 選択系ボタン */
body.field-mode #page-inventory #invSelectAllShownBtn,
body.field-mode #page-inventory #invSelectionClearBtn,
body.field-mode #page-inventory #invBulkDeleteBtn,
body.field-mode #page-inventory #invFilterEditBtn2 {
  display: none !important;
}

/* 移動履歴（長いので隠す） */
body.field-mode #page-inventory .inv-history-section {
  display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   その他のページ
   現場では使わないページへのリンクをボトムナビから視覚的に薄める
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 掲示板・写真台帳・配置管理はタブとして残すが薄める
   （完全に隠すとナビ崩れの可能性があるため opacity のみ） */
body.field-mode .mob-nav-item[data-page="board"],
body.field-mode .mob-nav-item[data-page="photos"],
body.field-mode .mob-nav-item[data-page="schedule"] {
  opacity: 0.45 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   全ページ共通：ノイズになる補足テキストを隠す
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* カードタイトルのアイコン（視覚ノイズ削減） */
body.field-mode .card-title .icon {
  display: none !important;
}

/* ダッシュボード 設定ボタン類 */
body.field-mode .dash-settings-compact {
  display: none !important;
}

/* AIβボタン */
body.field-mode [id*="aiBtn"],
body.field-mode .ai-beta-btn,
body.field-mode [class*="ai-b"] {
  display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   日報: 現場モードバナー（チェック省略の注意書き）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 日報ページに「品質チェックは省略中」バナーをCSSで挿入 */
body.field-mode #reportBreakdownCard::after {
  content: '💡 現場モード中 — 品質チェックは省略。詳細は通常モードで。';
  display: block;
  margin-top: 10px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface2));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* 在庫ページ余白 — patch_style_inv_spacing.css */

/* ── ① CSS変数：トップバー高さを一箇所で定義 ──────────────
   既存の topbar は min-height:54px(mobile) / padding込みで約54-62px。
   ここでは安全マージンを含めた実測値に近い値を使う。          */
:root {
  --inv-topbar-h: 56px;   /* モバイル標準 */
  --inv-side-pad: 10px;   /* モバイル左右余白 */
  --inv-top-pad: 8px;     /* コンテンツ上余白 */
}

@media (min-width: 390px) {
  :root { --inv-topbar-h: 58px; --inv-side-pad: 12px; }
}

@media (min-width: 430px) {
  :root { --inv-topbar-h: 60px; --inv-side-pad: 14px; }
}

@media (min-width: 769px) {
  :root {
    --inv-topbar-h: 64px;
    --inv-side-pad: 18px;
    --inv-top-pad: 12px;
  }
}

@media (min-width: 900px) {
  :root { --inv-side-pad: 20px; --inv-top-pad: 14px; }
}

/* ── ② page-inventory 本体の padding を完全一元化 ──────────
   padding-bottom は 0 にして .main の --app-mobile-nav-gap に委ねる。
   !important を使うのはこの1箇所のみにして競合を終わらせる。   */

#page-inventory {
  padding: var(--inv-top-pad) var(--inv-side-pad) 0 !important;
  background: var(--bg);
}

/* PC: 少し広く */
@media (min-width: 900px) {
  #page-inventory {
    padding: var(--inv-top-pad) var(--inv-side-pad) 24px !important;
  }
}

/* ── ③ フッターツールバー sticky top を変数で一致 ─────────
   既存の top: 64px / top: 58px を変数に差し替え。           */

#page-inventory footer.ui-layer--l3.inv-actions {
  top: var(--inv-topbar-h) !important;
}

/* ── ④ カテゴリタブバーの上下余白を詰める ──────────────── */

#page-inventory .inv-category-bar {
  padding-top: 2px !important;
  padding-bottom: 4px !important;
  margin-bottom: 2px !important;
}

/* ── ⑤ inv-container の左右はページpaddigに任せ、内部余白は最小に ── */

.inv-container {
  /* max-width は既存定義を維持・ここでは余白だけ調整 */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

#page-inventory .inv-container {
  padding-top: 0 !important;
}

/* ── ⑥ inv-item-list の下余白 ─────────────────────────── */

#page-inventory .inv-item-list {
  padding-bottom: 16px !important;
}

/* ── ⑦ inv-actions（フッターツールバー）の上下余白を詰める ── */

#page-inventory footer.ui-layer--l3.inv-actions {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}

/* ── ⑧ モバイル: 既存の calc(152px+safe-area) !important を完全上書き ──
   同じ @media (max-width:768px) 内で後勝ちさせる。
   padding-bottom は 0 に統一（.main が --app-mobile-nav-gap で保証）。  */

@media (max-width: 768px) {
  #page-inventory {
    padding-bottom: 0 !important;  /* 152px を 0 で上書き */
  }
}

/* 最狭 (〜374px) */
@media (max-width: 374px) {
  #page-inventory {
    padding: 6px 8px 0 !important;
  }
  #page-inventory footer.ui-layer--l3.inv-actions {
    padding: 5px 7px !important;
  }
}

/* iPhone SE (375〜389px) */
@media (min-width: 375px) and (max-width: 389px) {
  #page-inventory {
    padding: 7px 10px 0 !important;
  }
}

/* 標準モバイル (390〜429px) */
@media (min-width: 390px) and (max-width: 429px) {
  #page-inventory {
    padding: 8px 11px 0 !important;
  }
}

/* 大型モバイル (430〜768px) */
@media (min-width: 430px) and (max-width: 768px) {
  #page-inventory {
    padding: 8px 13px 0 !important;
  }
}

/* ── ⑨ カード上下の余白 ────────────────────────────────── */

/* ページ内のカード（グローバル用の上下padding）*/
#page-inventory > .card,
#page-inventory .inv-container > .card {
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}

/* カテゴリタブとフッターツールバーの間の隙間をなくす */
#page-inventory .inv-container > .ui-layer--l0 {
  margin-bottom: 0 !important;
}

/* ── ⑩ フォントスケールレール（底部「文字 ％ ＋ −」）の余白 ── */

#page-inventory .inv-font-scale-rail {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* ── ⑪ 検索バーの余白 ──────────────────────────────────── */

#page-inventory .inv-search-row,
#page-inventory #invSearchRow {
  margin-bottom: 6px !important;
}

/* ── ⑫ グループ間余白の適正化 ─────────────────────────── */

#page-inventory .inv-l1-group {
  margin-bottom: 10px !important;
}

#page-inventory .inv-l1-group-title {
  /* スティッキーのtopをフッターツールバーの下に合わせる */
  top: calc(var(--inv-topbar-h) + 46px) !important; /* topbar + footerツールバー高さ */
}

@media (max-width: 768px) {
  #page-inventory .inv-l1-group-title {
    top: calc(var(--inv-topbar-h) + 40px) !important;
  }
}

/* 在庫カード品名 nowrap（ぱd.css / patch_style_inv_card_nowrap） */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ① 品名（.n1）を nowrap + ellipsis に変更
      ─ これが縦折れ根絶の核心 ─
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#page-inventory .inv-l1-row3 .n1 {
  /* 縦折れを物理的に禁止する */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  /* 最小幅ゼロ（flexアイテムのデフォルトmin-widthをリセット） */
  min-width: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ② グリッド列定義を画面幅別に正確に制御
   
   カード最小幅の設計:
     1列 = コンテナ全幅（〜519px）
     2列 = 約(幅-余白)/2 ≥ 160px（520〜767px）
     2列 = 約(幅-余白)/2 ≥ 180px（768〜899px: iPad Mini等）
     3列 = 約(幅-余白)/3 ≥ 200px（900〜1199px: iPad Air/Pro等）
     4列 = 約(幅-余白)/4 ≥ 240px（1200px+: Nest Hub Max等）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 〜519px: 1列 */
@media (max-width: 519px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* 520〜767px: 2列（iPhone横向き・大型スマホ） */
@media (min-width: 520px) and (max-width: 767px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* 768〜899px: 2列（iPad Mini・狭いタブレット） */
@media (min-width: 768px) and (max-width: 899px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* 900〜1199px: 3列（iPad Air・iPad Pro・Surface Pro） */
@media (min-width: 900px) and (max-width: 1199px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* 1200px+: 4列（Nest Hub Max・ワイドPC） */
@media (min-width: 1200px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ③ inv-l1-row3 のカラム幅を列数に合わせて調整
   
   [CB列] [メーカー列] [品名列] [数量列]
   列数が増える = カード幅が減る = メーカー・数量を詰める
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 1〜2列時（幅に余裕あり） */
@media (max-width: 899px) {
  #page-inventory .inv-l1-row3 {
    grid-template-columns: 28px minmax(0, 52px) minmax(0, 1fr) 64px !important;
    gap: 5px !important;
  }
  #page-inventory .inv-l1-row3 .n1 {
    font-size: 15px !important;
    font-weight: 900 !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: 24px !important;
  }
  #page-inventory .inv-l1-row3 .m {
    font-size: 10px !important;
  }
}

/* 3列時（iPad Air 900〜1199px） */
@media (min-width: 900px) and (max-width: 1199px) {
  #page-inventory .inv-l1-row3 {
    /* 3列でカード幅 ≈ 220〜280px → メーカー・数量を最小化 */
    grid-template-columns: 28px minmax(0, 44px) minmax(0, 1fr) 52px !important;
    gap: 4px !important;
  }
  #page-inventory .inv-l1-row3 .n1 {
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: 20px !important;
    letter-spacing: -.01em !important;
  }
  #page-inventory .inv-l1-row3 .m {
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }
}

/* 4列時（1200px+ Nest Hub Max等） */
@media (min-width: 1200px) {
  #page-inventory .inv-l1-row3 {
    /* 4列でカード幅 ≈ 240〜280px */
    grid-template-columns: 28px minmax(0, 48px) minmax(0, 1fr) 52px !important;
    gap: 4px !important;
  }
  #page-inventory .inv-l1-row3 .n1 {
    font-size: 13px !important;
    font-weight: 900 !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: 20px !important;
  }
  #page-inventory .inv-l1-row3 .m {
    font-size: 9px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ④ カードのパディング・最小高さを列数別に最適化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 3列・4列時はカードを少し詰める */
@media (min-width: 900px) {
  #page-inventory .inv-l1-card {
    padding: 10px 11px !important;
  }
  #page-inventory .inv-l1-row3,
  #page-inventory .inv-l1-row4 {
    min-height: 44px !important;
  }
}

@media (min-width: 1200px) {
  #page-inventory .inv-l1-card {
    padding: 11px 12px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ⑤ カードは複数列時に等高にする
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width: 520px) {
  #page-inventory .inv-l1-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ⑥ Nest Hub / Nest Hub Max 専用
      サイドバーがある分、コンテンツ幅が狭くなるため
      inv-container の max-width を画面幅に合わせて拡大
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width: 1024px) and (max-width: 1280px) {
  #page-inventory .inv-container {
    max-width: 100% !important;
  }
}

@media (min-width: 1280px) {
  #page-inventory .inv-container {
    max-width: 1200px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ⑦ iPad Air / iPad Pro のサイドバー考慮
      サイドバー幅 ≈ 200px を引いた実コンテンツ幅で
      グリッド列数が崩れないよう .main 側のレイアウトを補正
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* サイドバー付きレイアウトでは実幅が狭くなるため
   コンテナがサイドバー分を除いた幅に収まるよう max-width を調整 */
@media (min-width: 768px) and (max-width: 1023px) {
  /* iPad Mini / iPad Air 縦向き: コンテンツ幅を確実に確保 */
  #page-inventory .inv-container {
    max-width: 100% !important;
  }
}

/* 在庫フッターツールバー・メーカー列 — patch_style_inv_toolbar_maker.css */

/* ── ① フッターツールバー: タブレット幅での折り返しを許可 ──── */

/* 769〜1199px: flex-wrap:wrap に戻し、3列相当のボタン配置に */
@media (min-width: 769px) and (max-width: 1199px) {
  #page-inventory footer.ui-layer--l3.inv-actions {
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    padding: 7px 10px !important;
  }
  #page-inventory footer.inv-actions .btn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 7px 12px !important;
    min-height: 38px !important;
  }
}

/* 1200px+: 1行に収める（PCは幅が十分） */
@media (min-width: 1200px) {
  #page-inventory footer.ui-layer--l3.inv-actions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px 8px !important;
  }
  #page-inventory footer.inv-actions .btn {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 8px 13px !important;
    min-height: 38px !important;
  }
}

/* ── ② メーカー列（.m）: 3〜4列時は nowrap + 小さいフォント ── */

/* 900〜1199px（3列）: font-size:14px を 10px に抑制 */
@media (min-width: 900px) and (max-width: 1199px) {
  #page-inventory .inv-l1-row3 .m {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0 !important;
  }
}

/* 1200px+（4列）: 同様に抑制 */
@media (min-width: 1200px) {
  #page-inventory .inv-l1-row3 .m {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0 !important;
  }
}

/* 768〜899px（2列）: font-size:14px は許容だが nowrap は必要 */
@media (min-width: 768px) and (max-width: 899px) {
  #page-inventory .inv-l1-row3 .m {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ── ③ n1（品名）: 900px+ で font-size:22px を抑制 ────────── */
/* @media(min-width:900px)で22px !important になっているため
   3列・4列時はもっと小さくする必要がある */

@media (min-width: 900px) and (max-width: 1199px) {
  #page-inventory .inv-l1-row3 .n1 {
    font-size: 14px !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: 22px !important;
  }
}

@media (min-width: 1200px) {
  #page-inventory .inv-l1-row3 .n1 {
    font-size: 14px !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: 20px !important;
  }
}

/* ── ④ カードグリッドの列数（念のため最優先で再定義）──────── */

@media (min-width: 900px) and (max-width: 1199px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1200px) {
  #page-inventory .inv-l1-group-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* === files.zip: patch_dialog_system (#commonDialogModal) === */
#commonDialogModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

#commonDialogModal.show {
  opacity: 1;
}

.dialog-content {
  background: var(--surface, #ffffff);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.08);
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUpDialog 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpDialog {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  flex-shrink: 0;
}

.dialog-title {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #333333);
  line-height: 1.4;
  flex: 1;
}

.dialog-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #999999);
  border-radius: 6px;
  transition: all 0.15s ease;
  margin-left: 12px;
  flex-shrink: 0;
}

.dialog-close-btn:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
  color: var(--text, #333333);
}

.dialog-close-btn:active {
  background: var(--active-bg, rgba(0, 0, 0, 0.1));
}

.dialog-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 60px;
}

.dialog-message {
  margin: 0 0 16px 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text, #333333);
  white-space: pre-wrap;
  word-break: break-word;
}

.dialog-message:last-child {
  margin-bottom: 0;
}

.dialog-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text, #333333);
  background: var(--input-bg, #ffffff);
  transition: all 0.15s ease;
  margin-top: 12px;
}

.dialog-input:focus {
  outline: none;
  border-color: var(--accent, #0066cc);
  box-shadow: 0 0 0 3px var(--accent-light, rgba(0, 102, 204, 0.1));
  background: var(--input-focus-bg, #ffffff);
}

.dialog-input::placeholder {
  color: var(--text-muted, #999999);
}

.dialog-footer {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  flex-shrink: 0;
  justify-content: flex-end;
}

.dialog-btn-cancel,
.dialog-btn-ok {
  flex: 0 1 auto;
  min-width: 80px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.dialog-btn-cancel {
  background: var(--btn-secondary-bg, #f0f0f0);
  color: var(--text, #333333);
  border-color: var(--border, rgba(0, 0, 0, 0.08));
}

.dialog-btn-cancel:hover {
  background: var(--btn-secondary-hover-bg, #e0e0e0);
  border-color: var(--border, rgba(0, 0, 0, 0.12));
}

.dialog-btn-cancel:active {
  background: var(--btn-secondary-active-bg, #d0d0d0);
}

.dialog-btn-cancel:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light, rgba(0, 102, 204, 0.1));
}

.dialog-btn-ok {
  background: var(--accent, #0066cc);
  color: #ffffff;
  border-color: var(--accent, #0066cc);
}

.dialog-btn-ok:hover {
  background: var(--accent-dark, #0052a3);
  border-color: var(--accent-dark, #0052a3);
}

.dialog-btn-ok:active {
  background: var(--accent-darker, #003d7a);
  border-color: var(--accent-darker, #003d7a);
}

.dialog-btn-ok:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light, rgba(0, 102, 204, 0.1));
}

@media (max-width: 480px) {
  .dialog-content {
    max-width: 95vw;
    width: 100%;
  }

  .dialog-header {
    padding: 14px 16px;
  }

  .dialog-body {
    padding: 16px;
  }

  .dialog-footer {
    padding: 10px 16px;
    gap: 8px;
  }

  .dialog-btn-cancel,
  .dialog-btn-ok {
    flex: 1;
    min-width: 0;
  }
}

[data-theme="darksoft"] #commonDialogModal {
  background: rgba(0, 0, 0, 0.55);
}

[data-theme="darksoft"] .dialog-content {
  background: var(--surface);
  color: var(--text);
}

[data-theme="darksoft"] .dialog-header {
  border-bottom-color: var(--border);
}

[data-theme="darksoft"] .dialog-btn-cancel {
  background: var(--hover-bg);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="darksoft"] .dialog-btn-cancel:hover {
  background: var(--active-bg);
}

[data-theme="darksoft"] .dialog-input {
  background: var(--hover-bg);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="darksoft"] .dialog-input:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(100, 150, 255, 0.15);
}

.dialog-btn-cancel:focus-visible,
.dialog-btn-ok:focus-visible {
  outline: 2px solid var(--accent, #0066cc);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #commonDialogModal,
  .dialog-content {
    animation: none !important;
    transition: none !important;
  }
}


/* === files.zip: patch_css_cleanup.css (2026-05-14) === */
/* ─────────────────────────────────────────────────────────
   #page-inventory の padding 最終定義
   （L7975, L15571 の重複を吸収し L25696 を強化）
   ───────────────────────────────────────────────────────── */

/* CSS変数のデフォルト値を確実に定義 */
:root {
  --inv-top-pad: 12px;
  --inv-side-pad: 14px;
}

/* モバイル（〜767px）: 最終確定値 */
@media (max-width: 767px) {
  #page-inventory {
    /* 152px から 0 への上書きを確実に適用
       （5214行の !important 152px を最終的に無効化） */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* タブレット・PC（768px+）: padding-bottom は .main が保証 */
@media (min-width: 768px) {
  #page-inventory {
    padding-bottom: 24px !important;
  }
}

@media (min-width: 900px) {
  #page-inventory {
    padding-bottom: 28px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   .inv-row-two-part td 重複定義の最終確定
   （L5157 と L15246 の同一定義 → 1箇所に集約）
   ───────────────────────────────────────────────────────── */

.inv-row-two-part td {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* ─────────────────────────────────────────────────────────
   カテゴリバー・メーカーフィルタの重複定義を最終確定
   （各2セットずつ定義されている L7990+L15585, L8036+L15644 を統合）
   ───────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  #page-inventory .inv-category-bar {
    padding-bottom: 6px;
  }
  #page-inventory .inv-maker-filter {
    padding-bottom: 6px;
  }
}

#page-inventory .inv-category-bar {
  padding-bottom: 4px;
}

#page-inventory .inv-maker-filter {
  padding-bottom: 4px;
}

/* ─────────────────────────────────────────────────────────
   !important 多用による意図しない上書きを防ぐ
   優先度の低い装飾的なプロパティは !important を使わずに
   セレクタ詳細度で勝つ
   ───────────────────────────────────────────────────────── */

/* カード（.inv-l1-card）のパディング: L17138 (12px 14px !important) が最終 */
#page-inventory .inv-l1-card {
  padding: 12px 14px !important; /* 確定値 */
}

/* ─────────────────────────────────────────────────────────
   その他の軽微な重複の最終確定
   ───────────────────────────────────────────────────────── */

/* .inv-l1-row3, .inv-l1-row4 の min-height */
@media (min-width: 768px) {
  #page-inventory .inv-l1-row3,
  #page-inventory .inv-l1-row4 {
    min-height: 48px;
  }
}

@media (min-width: 900px) {
  #page-inventory .inv-l1-row3,
  #page-inventory .inv-l1-row4 {
    min-height: 44px !important; /* 3列以上では少し詰める */
  }
}


/* === patch_theme_consistency.css === */
/* ============================================================
   patch_theme_consistency.css
   
   🎨 ステップA: テーマ対応徹底
   
   問題:
   - ハードコード色（#00ff88, #30d158, #7bc9a0等）が
     テーマ専用テーマでないコンテキストでも使われ、
     ダーク/ライト切替時に視認性が崩れる
   - 4テーマ（warm/cool/darksoft/studio）+ apple/casio で
     ステータスカラーが統一されていない
   
   対策:
   1. 新しいセマンティック変数を追加
      --status-pre, --status-work, --status-done, --status-hold
      --status-ok, --status-warn
      → 各テーマで色を最適化
   2. ダークテーマでハードコード色のコントラスト不足を補正
   3. 既存の ui-state-badge クラスを変数に切替
   
   適用: style.css 末尾に追記
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   ① セマンティックステータスカラーをCSS変数化
   ───────────────────────────────────────────────────────── */

:root {
  /* ステータス系: HSL を独立変数化（テーマ毎に上書き可能） */
  --status-pre-text:  #4a6a9a;
  --status-pre-bg:    rgba(80, 128, 200, 0.08);
  --status-pre-border: rgba(80, 128, 200, 0.35);

  --status-work-text:  #8a6020;
  --status-work-bg:    rgba(200, 140, 60, 0.10);
  --status-work-border: rgba(200, 140, 60, 0.40);

  --status-done-text:  #3a6a4a;
  --status-done-bg:    rgba(60, 120, 80, 0.10);
  --status-done-border: rgba(60, 120, 80, 0.35);

  --status-hold-text:  #8a4040;
  --status-hold-bg:    rgba(180, 80, 80, 0.08);
  --status-hold-border: rgba(180, 80, 80, 0.35);

  --status-warn-text:  #8a5510;
  --status-warn-bg:    rgba(200, 120, 40, 0.10);
  --status-warn-border: rgba(200, 120, 40, 0.35);

  /* チップ等のラベル色 */
  --label-pill-text: #fff;
  --label-pill-shadow: 0 1px 2px rgba(56, 48, 42, 0.10);
}

/* ─────────────────────────────────────────────────────────
   ② ダークテーマ（darksoft）でのコントラスト補正
   ───────────────────────────────────────────────────────── */

[data-theme="darksoft"] {
  /* ハードコード色のうち実質的に「成功」を表すものは
     ダークテーマ用に明度を上げる */
  --status-pre-text:  #8eb4d8;
  --status-pre-bg:    rgba(110, 158, 210, 0.18);
  --status-pre-border: rgba(110, 158, 210, 0.45);

  --status-work-text:  #d8a55c;
  --status-work-bg:    rgba(216, 165, 92, 0.18);
  --status-work-border: rgba(216, 165, 92, 0.45);

  --status-done-text:  #7bc9a0;
  --status-done-bg:    rgba(123, 201, 160, 0.18);
  --status-done-border: rgba(123, 201, 160, 0.45);

  --status-hold-text:  #d88080;
  --status-hold-bg:    rgba(216, 128, 128, 0.18);
  --status-hold-border: rgba(216, 128, 128, 0.45);

  --status-warn-text:  #e5b870;
  --status-warn-bg:    rgba(229, 184, 112, 0.18);
  --status-warn-border: rgba(229, 184, 112, 0.45);
}

/* ─────────────────────────────────────────────────────────
   ③ 既存の ui-state-badge を変数化（後勝ち）
   ───────────────────────────────────────────────────────── */

.ui-state-badge.ui-status--pre {
  border-color: var(--status-pre-border) !important;
  background: var(--status-pre-bg) !important;
  color: var(--status-pre-text) !important;
}

.ui-state-badge.ui-status--work {
  border-color: var(--status-work-border) !important;
  background: var(--status-work-bg) !important;
  color: var(--status-work-text) !important;
}

.ui-state-badge.ui-status--done {
  border-color: var(--status-done-border) !important;
  background: var(--status-done-bg) !important;
  color: var(--status-done-text) !important;
}

.ui-state-badge.ui-status--hold {
  border-color: var(--status-hold-border) !important;
  background: var(--status-hold-bg) !important;
  color: var(--status-hold-text) !important;
}

.ui-state-badge.ui-mat--ok {
  border-color: var(--status-done-border) !important;
  background: var(--status-done-bg) !important;
  color: var(--status-done-text) !important;
}

.ui-state-badge.ui-mat--warn {
  border-color: var(--status-warn-border) !important;
  background: var(--status-warn-bg) !important;
  color: var(--status-warn-text) !important;
}

/* ─────────────────────────────────────────────────────────
   ④ ダークテーマでのその他補正
   ───────────────────────────────────────────────────────── */

[data-theme="darksoft"] {
  /* チップ・バッジの白文字を維持 */
  --label-pill-text: #fff;
  --label-pill-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* カレンダーチップ・週ピル・ガントバー: 影をテーマ追従 */
[data-theme="darksoft"] .cal-pill,
[data-theme="darksoft"] .week-pill,
[data-theme="darksoft"] .gantt-bar {
  box-shadow: var(--label-pill-shadow);
}


/* === patch_skeleton_loading.css === */
/* ============================================================
   patch_skeleton_loading.css
   
   ⚡ ステップC: スケルトンUI 全ページ展開
   
   問題:
   - shimmer スケルトンは page-dashboard のみ実装
   - 在庫・履歴・配置・現場マスタは「真っ白」読み込み中
   - ユーザーは「壊れた？」と感じる
   
   対策:
   1. body[data-db-loading] の条件で全ページに展開
   2. body[data-page-loading="<page>"] で個別ページのロード状態
   3. 共通の shimmer アニメーションを再利用
   
   適用: style.css 末尾に追記
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   共通: スケルトン用ベースカラーとアニメーション
   ───────────────────────────────────────────────────────── */

@keyframes shimmerPulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.55; }
  100% { opacity: 1; }
}

@keyframes shimmerSlide {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}

/* ─────────────────────────────────────────────────────────
   ① 在庫ページ（page-inventory）スケルトン
   ───────────────────────────────────────────────────────── */

body[data-db-loading] #page-inventory,
body[data-page-loading="inventory"] #page-inventory {
  /* カテゴリーバーをぼかし */
  .inv-category-bar,
  .inv-maker-filter {
    opacity: 0.4;
    pointer-events: none;
  }

  /* 在庫カードグリッドを skeleton 化 */
  .inv-l1-group-cards .inv-l1-card {
    position: relative;
    overflow: hidden;
    min-height: 80px;
  }

  .inv-l1-group-cards .inv-l1-card > * {
    opacity: 0 !important;
  }

  .inv-l1-group-cards .inv-l1-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
      var(--surface2, #e9e8e5) 0%,
      var(--surface3, #dedcd6) 50%,
      var(--surface2, #e9e8e5) 100%);
    background-size: 800px 100%;
    animation: shimmerSlide 1.4s ease-in-out infinite;
  }

  /* 在庫カードが0件の場合のプレースホルダー */
  .inv-l1-group-cards:empty::after {
    content: '';
    display: block;
    height: 240px;
    background: linear-gradient(90deg,
      var(--surface2, #e9e8e5) 0%,
      var(--surface3, #dedcd6) 50%,
      var(--surface2, #e9e8e5) 100%);
    background-size: 800px 100%;
    animation: shimmerSlide 1.4s ease-in-out infinite;
    border-radius: 14px;
    margin-top: 12px;
  }
}

/* ─────────────────────────────────────────────────────────
   ② 日報履歴ページ（page-history）スケルトン
   ───────────────────────────────────────────────────────── */

body[data-db-loading] #page-history,
body[data-page-loading="history"] #page-history {
  table tbody tr {
    position: relative;
    overflow: hidden;
  }

  table tbody tr td {
    color: transparent !important;
    position: relative;
  }

  table tbody tr td::after {
    content: '';
    position: absolute;
    inset: 8px 4px;
    border-radius: 4px;
    background: linear-gradient(90deg,
      var(--surface2, #e9e8e5) 0%,
      var(--surface3, #dedcd6) 50%,
      var(--surface2, #e9e8e5) 100%);
    background-size: 800px 100%;
    animation: shimmerSlide 1.4s ease-in-out infinite;
  }

  /* 履歴が空の場合 */
  table tbody:empty::after {
    content: '';
    display: block;
    height: 180px;
    background: linear-gradient(90deg,
      var(--surface2, #e9e8e5) 0%,
      var(--surface3, #dedcd6) 50%,
      var(--surface2, #e9e8e5) 100%);
    background-size: 800px 100%;
    animation: shimmerSlide 1.4s ease-in-out infinite;
    border-radius: 12px;
    margin-top: 12px;
  }
}

/* ─────────────────────────────────────────────────────────
   ③ 配置管理ページ（page-schedule）スケルトン
   ───────────────────────────────────────────────────────── */

body[data-db-loading] #page-schedule,
body[data-page-loading="schedule"] #page-schedule {
  #scheduleTableBody tr {
    position: relative;
  }

  #scheduleTableBody tr td {
    color: transparent !important;
    pointer-events: none;
  }

  #scheduleTableBody tr td::after {
    content: '';
    position: absolute;
    inset: 6px 4px;
    border-radius: 4px;
    background: linear-gradient(90deg,
      var(--surface2, #e9e8e5) 0%,
      var(--surface3, #dedcd6) 50%,
      var(--surface2, #e9e8e5) 100%);
    background-size: 800px 100%;
    animation: shimmerSlide 1.4s ease-in-out infinite;
  }

  /* ビジュアライザのカレンダー */
  #schVisualizer .cal-cell,
  #schVisualizer .week-cell {
    position: relative;
    overflow: hidden;
  }

  #schVisualizer .cal-cell::after,
  #schVisualizer .week-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      var(--surface2, #e9e8e5) 0%,
      var(--surface3, #dedcd6) 50%,
      var(--surface2, #e9e8e5) 100%);
    background-size: 800px 100%;
    animation: shimmerSlide 1.4s ease-in-out infinite;
    border-radius: inherit;
    opacity: 0.6;
  }
}

/* ─────────────────────────────────────────────────────────
   ④ 現場マスタページ（page-sites）スケルトン
   ───────────────────────────────────────────────────────── */

body[data-db-loading] #page-sites,
body[data-page-loading="sites"] #page-sites {
  table tbody tr {
    position: relative;
  }

  table tbody tr td {
    color: transparent !important;
  }

  table tbody tr td::after {
    content: '';
    position: absolute;
    inset: 8px 4px;
    border-radius: 4px;
    background: linear-gradient(90deg,
      var(--surface2, #e9e8e5) 0%,
      var(--surface3, #dedcd6) 50%,
      var(--surface2, #e9e8e5) 100%);
    background-size: 800px 100%;
    animation: shimmerSlide 1.4s ease-in-out infinite;
  }
}

/* ─────────────────────────────────────────────────────────
   ⑤ 共通：データ読み込み完了後の fade-in
   ───────────────────────────────────────────────────────── */

body:not([data-db-loading]):not([data-page-loading]) {
  #page-inventory .inv-l1-card,
  #page-history table tbody tr,
  #page-schedule #scheduleTableBody tr,
  #page-sites table tbody tr {
    animation: skeletonFadeIn 280ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }

  /* 行を順次フェードイン（最初の20件まで） */
  #page-inventory .inv-l1-card:nth-child(1)  { animation-delay: 0ms; }
  #page-inventory .inv-l1-card:nth-child(2)  { animation-delay: 30ms; }
  #page-inventory .inv-l1-card:nth-child(3)  { animation-delay: 60ms; }
  #page-inventory .inv-l1-card:nth-child(4)  { animation-delay: 90ms; }
  #page-inventory .inv-l1-card:nth-child(5)  { animation-delay: 120ms; }
  #page-inventory .inv-l1-card:nth-child(n+6) { animation-delay: 140ms; }
}

@keyframes skeletonFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────────────────
   ⑥ reduce-motion 対応
   ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body[data-db-loading] *::after,
  body[data-page-loading] *::after {
    animation: shimmerPulse 1.4s ease-in-out infinite !important;
  }

  body:not([data-db-loading]):not([data-page-loading]) * {
    animation: none !important;
  }
}


/* === files.zip: patch_design_tokens.css === */
/* ============================================================
   patch_design_tokens.css
   
   📏 ステップD: デザイントークン整理
   
   問題:
   - border-radius: 12px/10px/14px/8px/6px/7px が無秩序に混在
   - font-size: 10〜15px が用途不明瞭に分布
   - 影・トランジション・スペーシングのトークンが不在
   
   対策:
   1. CSS変数として完全なデザイントークンセットを定義
   2. 既存コードを壊さず、新しいコードで参照可能にする
   3. 段階的移行のため既存値は維持（変数のみ追加）
   
   適用: style.css 末尾に追記（最初の方が望ましい）
   ============================================================ */

:root {
  /* ─────────────────────────────────────────────────────
     Border Radius スケール
     ───────────────────────────────────────────────────── */
  --radius-xs: 4px;   /* タグ・小チップ */
  --radius-sm: 6px;   /* ボタン小・チェックボックス */
  --radius-md: 8px;   /* 入力・標準ボタン */
  --radius-lg: 10px;  /* カード・大入力 */
  --radius-xl: 12px;  /* 大カード */
  --radius-2xl: 14px; /* セクションカード */
  --radius-3xl: 16px; /* モーダル・大セクション */
  --radius-4xl: 20px; /* シート・特大要素 */
  --radius-pill: 999px; /* ピル型 */
  --radius-full: 9999px; /* 完全な円 */

  /* ─────────────────────────────────────────────────────
     Typography スケール
     ───────────────────────────────────────────────────── */
  --text-2xs: 9px;   /* キャプション・微小ラベル */
  --text-xs:  11px;  /* 補助テキスト */
  --text-sm:  12px;  /* タグ・バッジ・小ボタン */
  --text-base: 13px; /* 本文小 */
  --text-md:  14px;  /* 標準ボタン・テーブル */
  --text-lg:  15px;  /* 本文 */
  --text-xl:  17px;  /* 強調本文 */
  --text-2xl: 20px;  /* 見出し小 */
  --text-3xl: 24px;  /* 見出し */
  --text-4xl: 32px;  /* 大見出し・統計値 */
  --text-5xl: 40px;  /* ヒーロー */

  /* 行間 */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ─────────────────────────────────────────────────────
     Font Weight スケール
     ───────────────────────────────────────────────────── */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-extra:  800;
  --weight-black:  900;

  /* ─────────────────────────────────────────────────────
     Spacing スケール（4pxベース）
     ───────────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;

  /* ─────────────────────────────────────────────────────
     Shadow スケール
     ───────────────────────────────────────────────────── */
  /* 既存の --shadow-sm を補完する形 */
  --shadow-xs: 0 1px 2px rgba(56, 48, 42, 0.05);
  /* --shadow-sm は既存定義あり */
  --shadow-base: 0 4px 12px rgba(56, 48, 42, 0.08);
  --shadow-md-new: 0 8px 24px rgba(56, 48, 42, 0.10);
  --shadow-lg: 0 16px 40px rgba(56, 48, 42, 0.12);
  --shadow-xl: 0 24px 60px rgba(56, 48, 42, 0.16);

  /* リフトアニメーション用 */
  --shadow-hover: 0 8px 24px rgba(56, 48, 42, 0.14);

  /* ─────────────────────────────────────────────────────
     Transition トークン
     ───────────────────────────────────────────────────── */
  --duration-instant: 50ms;
  --duration-fast:    100ms;
  --duration-base:    150ms;
  --duration-slow:    250ms;
  --duration-slower:  350ms;

  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.16, 1, 0.3, 1);

  /* ─────────────────────────────────────────────────────
     Z-index スケール
     ───────────────────────────────────────────────────── */
  --z-base:       1;
  --z-dropdown:   10;
  --z-sticky:     20;
  --z-fixed:      30;
  --z-modal-bg:   100;
  --z-modal:      200;
  --z-popover:    300;
  --z-toast:      500;
  --z-tooltip:    1000;
  --z-top:        9999;
}

/* ─────────────────────────────────────────────────────────
   ダークテーマでの影調整（影をより強く）
   ───────────────────────────────────────────────────────── */

[data-theme="darksoft"] {
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-md-new: 0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-lg:   0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl:   0 24px 60px rgba(0, 0, 0, 0.60);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* ─────────────────────────────────────────────────────────
   モバイル向け調整
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    /* モバイルではフォントを若干大きめに */
    --text-base: 14px;
    --text-md:   15px;
    --text-lg:   16px;

    /* タップターゲット用に space を調整 */
    --space-button-min: 12px;
  }
}

/* ─────────────────────────────────────────────────────────
   ユーティリティクラス（新規コード用）
   ───────────────────────────────────────────────────────── */

/* 角丸ユーティリティ */
.r-xs   { border-radius: var(--radius-xs); }
.r-sm   { border-radius: var(--radius-sm); }
.r-md   { border-radius: var(--radius-md); }
.r-lg   { border-radius: var(--radius-lg); }
.r-xl   { border-radius: var(--radius-xl); }
.r-2xl  { border-radius: var(--radius-2xl); }
.r-3xl  { border-radius: var(--radius-3xl); }
.r-pill { border-radius: var(--radius-pill); }
.r-full { border-radius: var(--radius-full); }

/* テキストサイズユーティリティ */
.t-2xs { font-size: var(--text-2xs); }
.t-xs  { font-size: var(--text-xs); }
.t-sm  { font-size: var(--text-sm); }
.t-md  { font-size: var(--text-md); }
.t-lg  { font-size: var(--text-lg); }
.t-xl  { font-size: var(--text-xl); }
.t-2xl { font-size: var(--text-2xl); }
.t-3xl { font-size: var(--text-3xl); }
.t-4xl { font-size: var(--text-4xl); }

/* 影ユーティリティ */
.shadow-xs   { box-shadow: var(--shadow-xs); }
.shadow-base { box-shadow: var(--shadow-base); }
.shadow-md   { box-shadow: var(--shadow-md-new); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }


/* === files.zip: patch_interactions.css === */
/* ============================================================
   patch_interactions.css
   
   🎯 ステップB: グローバルフォーカス + タップフィードバック統一
   
   問題:
   - :focus-visible は200+要素のうち9箇所のみ実装
   - :active が局所的にしか定義されていない
   - モバイルで「押した感」が弱い
   
   対策:
   1. グローバルフォーカススタイル統一（キーボードナビ対応）
   2. 全インタラクティブ要素にタップフィードバック
   3. :hover の滑らかな transition
   4. reduce-motion 対応
   
   適用: style.css 末尾に追記（patch_theme_consistency.css の後）
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   ① グローバルフォーカスリング（キーボードのみ）
   ───────────────────────────────────────────────────────── */

/* button, input, select, textarea, a, [tabindex] にフォーカスリング */
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--accent, #446b78) !important;
  outline-offset: 2px;
  border-radius: 6px;
  transition: outline-offset 120ms ease;
}

/* マウス操作時はリングを抑制（hover/active のみ） */
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* 既存の input フォーカスリング（box-shadow ベース）と重複しないよう調整 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 1px; /* 入力欄は少し近く */
}

/* ─────────────────────────────────────────────────────────
   ② 全ボタンにタップフィードバック統一
   ───────────────────────────────────────────────────────── */

.btn,
button:not(.no-tap-anim),
[role="button"]:not(.no-tap-anim),
.icon-btn,
.mob-nav-item,
.mob-more-item,
.nav-item,
.tab,
.chip,
.dash-bd-tab,
.dash-view-btn,
.sch-pick-btn {
  /* ベース transition */
  transition:
    transform 100ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* タップ・クリック時のフィードバック（はっきり版） */
/* 戻りのトランジション：離した時にふわっと戻る */
.btn:not(:disabled),
button:not(.no-tap-anim):not(:disabled),
[role="button"]:not(.no-tap-anim):not(:disabled),
.icon-btn,
.mob-nav-item,
.mob-more-item,
.chip,
.dash-bd-tab {
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 押し込み時：はっきり縮む */
.btn:active:not(:disabled),
button:not(.no-tap-anim):active:not(:disabled),
[role="button"]:not(.no-tap-anim):active:not(:disabled),
.icon-btn:active,
.mob-nav-item:active,
.mob-more-item:active,
.chip:active,
.dash-bd-tab:active {
  transform: scale(0.94);
  transition-duration: 100ms;
}

/* リンクのタップフィードバック */
a:not(.no-tap-anim):active {
  opacity: 0.7;
  transition: opacity 50ms ease;
}

/* ─────────────────────────────────────────────────────────
   ③ ホバー時のリフト感（PCのみ）
   ───────────────────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .site-card:hover,
  .stat-card:hover,
  .bd-card:hover,
  .photo-card:hover {
    transform: translateY(-1px);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ボタンホバー時の微小なリフト */
  .btn-primary:hover:not(:disabled),
  .btn-secondary:hover:not(:disabled) {
    transform: translateY(-0.5px);
  }
}

/* ─────────────────────────────────────────────────────────
   ④ 入力欄のフォーカス強化
   ───────────────────────────────────────────────────────── */

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent, #446b78);
  box-shadow: 0 0 0 3px var(--accent-subtle, rgba(68, 107, 120, 0.11));
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* ─────────────────────────────────────────────────────────
   ⑤ チェックボックス・ラジオの視認性向上
   ───────────────────────────────────────────────────────── */

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent, #446b78);
  outline-offset: 2px;
}

/* チェック時のスケールアニメーション */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  animation: checkPop 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────
   ⑥ disabled 状態の明確化
   ───────────────────────────────────────────────────────── */

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   ⑦ reduce-motion 対応（既存の対応に上積み）
   ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .btn:active,
  button:active,
  [role="button"]:active,
  .icon-btn:active,
  .mob-nav-item:active,
  .mob-more-item:active,
  .chip:active {
    transform: none !important;
  }

  .card:hover,
  .site-card:hover,
  .stat-card:hover,
  .bd-card:hover,
  .photo-card:hover {
    transform: none !important;
  }

  input[type="checkbox"]:checked,
  input[type="radio"]:checked {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────
   ⑧ モバイルでのタッチ領域確保
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* タッチ可能要素の最小サイズ（Apple HIG 推奨 44x44） */
  button:not(.no-min-size),
  [role="button"]:not(.no-min-size),
  .btn,
  .icon-btn,
  .nav-item,
  .chip {
    min-height: 36px;
  }

  /* メインアクションボタンはより大きく */
  .btn-primary:not(.btn-sm),
  .btn-block {
    min-height: 44px;
  }
}


/* === files.zip: patch_dashboard_visual.css === */
/* ============================================================
   patch_dashboard_visual.css
   
   📊 ステップE: ダッシュボード視覚的優先順位改善
   
   問題:
   - 数字が並ぶだけで「何が重要か」が見えない
   - 緊急性・優先度の視覚化が弱い
   - 統計値（stat-card）の重要度が同じに見える
   - 進捗バーが薄く目立たない
   
   対策:
   1. 「本日のタスク」最上段の存在感を強化
   2. 第一情報（dash-firstinfo）の階層を視覚化
   3. 進捗バーをよりリッチに（グラデーション・アニメーション）
   4. KPI カードに優先度別の装飾
   5. ステータスバッジを色分け強化
   
   適用: style.css 末尾に追記
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   ① 本日稼働サマリー（dash-today-strip）の強化
   ───────────────────────────────────────────────────────── */

.dash-today-strip {
  position: relative;
  background: linear-gradient(135deg,
    var(--surface, #fff),
    var(--surface2, rgba(241,240,236,0.96)));
  border: 1px solid var(--border, rgba(56, 48, 42, 0.10));
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(56, 48, 42, 0.06);
  overflow: hidden;
}

/* アクセント帯（左端） */
.dash-today-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg,
    var(--accent, #446b78),
    var(--accent-light, #507986));
  border-radius: 0 2px 2px 0;
}

.dash-today-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dash-today-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text);
}

.dash-today-date {
  font-size: 15px;
  letter-spacing: 0.01em;
}

.dash-today-summary .dash-today-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 900;
  color: var(--accent, #446b78);
  letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────────────────
   ② 第一情報（dash-firstinfo）の視覚的優先度
   ───────────────────────────────────────────────────────── */

.dash-firstinfo {
  position: relative;
  background: linear-gradient(180deg,
    var(--surface, #fff),
    var(--surface2, rgba(241,240,236,0.96)));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(56, 48, 42, 0.06);
}

/* 上部の薄いハイライト（重要さの表現） */
.dash-firstinfo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent, #446b78),
    transparent);
  opacity: 0.4;
  border-radius: 0 0 2px 2px;
}

/* ─────────────────────────────────────────────────────────
   ③ KPI カードの優先度別装飾
   ───────────────────────────────────────────────────────── */

.kpi-card-grid .stat-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 200ms var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow 200ms var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.kpi-card-grid .stat-card .stat-num {
  font-variant-numeric: tabular-nums;
  /* 数字を強調 */
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* 重要度別の左帯 */
.kpi-card-grid .stat-card[data-priority="high"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--danger, #9a4745);
  border-radius: 0 2px 2px 0;
}

.kpi-card-grid .stat-card[data-priority="medium"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--warning, #75654d);
  border-radius: 0 2px 2px 0;
}

.kpi-card-grid .stat-card[data-priority="low"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--success, #5a695c);
  border-radius: 0 2px 2px 0;
}

/* ─────────────────────────────────────────────────────────
   ④ 進捗バー（big-progress）の強化
   ───────────────────────────────────────────────────────── */

.big-progress-bar {
  position: relative;
  height: 12px;
  background: var(--surface2, rgba(241, 240, 236, 0.96));
  border-radius: var(--radius-pill, 999px);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(56, 48, 42, 0.06);
}

.big-bar-fill {
  position: relative;
  height: 100%;
  background: linear-gradient(90deg,
    var(--accent, #446b78),
    var(--accent-light, #507986));
  border-radius: inherit;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0 8px var(--accent-glow, rgba(68, 107, 120, 0.14)),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* シャイン効果（読み込み完了後） */
.big-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent);
  transform: translateX(-100%);
  animation: barShine 3s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes barShine {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(200%); }
  100% { transform: translateX(200%); }
}

/* 完了に近い時の色変化 */
.big-progress-num[data-percent-high="true"] + .big-progress-bar .big-bar-fill,
.big-bar-fill[style*="width: 9"]:not([style*="width: 9px"]),
.big-bar-fill[style*="width:9"]:not([style*="width:9px"]),
.big-bar-fill[style*="width: 100"]:not([style*="width: 100px"]),
.big-bar-fill[style*="width:100"]:not([style*="width:100px"]) {
  background: linear-gradient(90deg,
    var(--success, #5a695c),
    color-mix(in srgb, var(--success, #5a695c) 70%, var(--accent, #446b78)));
}

/* ─────────────────────────────────────────────────────────
   ⑤ 数字のアニメーション（読み込み時のカウントアップ風）
   ───────────────────────────────────────────────────────── */

body:not([data-db-loading]) .stat-card .stat-num,
body:not([data-db-loading]) .dash-today-count,
body:not([data-db-loading]) .big-progress-num {
  animation: numberSlideUp 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes numberSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────────────────
   ⑥ ダッシュボードヘッダーの強化
   ───────────────────────────────────────────────────────── */

.dash-header {
  margin-bottom: 12px;
}

.dash-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.dash-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────
   ⑦ 現場選択ヒントボタンの目立たせ方
   ───────────────────────────────────────────────────────── */

.dash-site-select-hint {
  background: linear-gradient(135deg,
    var(--accent-subtle, rgba(68, 107, 120, 0.11)),
    color-mix(in srgb, var(--accent-subtle, rgba(68, 107, 120, 0.11)) 50%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent, #446b78) 30%, transparent);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 150ms var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  position: relative;
}

.dash-site-select-hint:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-subtle, rgba(68, 107, 120, 0.11)) 150%, transparent),
    color-mix(in srgb, var(--accent-subtle, rgba(68, 107, 120, 0.11)) 80%, transparent));
  border-color: var(--accent, #446b78);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 48, 42, 0.08);
}

.dash-site-select-hint .t {
  font-weight: 700;
  color: var(--accent, #446b78);
  font-size: 13px;
}

.dash-site-select-hint .s {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 8px;
}

/* 矢印インジケーター */
.dash-site-select-hint::after {
  content: '→';
  font-size: 16px;
  color: var(--accent, #446b78);
  margin-left: 8px;
  transition: transform 200ms var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.dash-site-select-hint:hover::after {
  transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────────
   ⑧ 完了現場トグルの抑制（目立ちすぎ防止）
   ───────────────────────────────────────────────────────── */

.dash-done-toggle .btn {
  opacity: 0.7;
  transition: opacity 150ms ease;
}

.dash-done-toggle .btn:hover {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────
   ⑨ モバイル最適化
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .dash-today-strip {
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 12px;
  }

  .dash-today-date {
    font-size: 14px;
  }

  .dash-today-summary .dash-today-count {
    font-size: 20px;
  }

  .kpi-card-grid {
    gap: 8px;
  }

  .kpi-card-grid .stat-card {
    padding: 12px 14px;
  }

  .big-progress-bar {
    height: 10px;
  }
}

/* ─────────────────────────────────────────────────────────
   ⑩ reduce-motion 対応
   ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .big-bar-fill::after {
    animation: none !important;
  }

  body:not([data-db-loading]) .stat-card .stat-num,
  body:not([data-db-loading]) .dash-today-count,
  body:not([data-db-loading]) .big-progress-num {
    animation: none !important;
  }
}

/* ───────────── スライダーモード（フェーダー風）─────────────
   PCもモバイルも同じUI。最低限のスタイルで、既存テーマと馴染ませる。 */

#page-report .rd-qty-slider {
  width: 100%;
  max-width: 100%;
}
#page-report .rd-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
#page-report .rd-slider-edge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
#page-report .rd-slider-edge--min {
  min-width: 12px;
  text-align: right;
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
}
#page-report .rd-slider-edge--plan {
  cursor: pointer;
  color: var(--primary, #185fa5);
  background: color-mix(in srgb, var(--primary, #185fa5) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #185fa5) 35%, transparent);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#page-report .rd-slider-edge--plan:active {
  opacity: 0.7;
}

#page-report .rd-slider-track {
  position: relative;
  flex: 1 1 auto;
  height: 24px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#page-report .rd-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: color-mix(in srgb, var(--primary, #185fa5) 40%, transparent);
  border-radius: 999px;
  pointer-events: none;
}
#page-report .rd-slider-planmark {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 16px;
  background: var(--text-muted);
  opacity: 0.45;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 1px;
}
#page-report .rd-slider-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 22px;
  height: 22px;
  background: var(--primary, #185fa5);
  border: 2px solid var(--surface);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  transition: transform 0.05s ease-out;
}
#page-report .rd-slider-track:active .rd-slider-thumb {
  transform: translate(-50%, -50%) scale(1.12);
}

#page-report .rd-slider-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  text-align: right;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--text);
  min-width: 40px;
  outline: none;
  cursor: text;
  align-self: flex-end;
  -webkit-tap-highlight-color: transparent;
}
#page-report .rd-slider-value:focus {
  background: var(--surface2);
  border-color: color-mix(in srgb, var(--primary, #185fa5) 50%, transparent);
}

/* ───────────── 入力対象トグル（充填 / 撤去）─────────────
   ツールバーで切り替え。body.qty-target-fill | qty-target-removal */

#page-report .rd-qty-target-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
#page-report .qty-target-radio {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#page-report .qty-target-radio--on {
  border-color: color-mix(in srgb, var(--primary, #185fa5) 55%, var(--border));
  background: color-mix(in srgb, var(--primary, #185fa5) 14%, var(--surface2));
  color: var(--text);
}
/* 撤去側ボタンは選択中に錆色アクセント */
#page-report #qt_removal.qty-target-radio--on {
  border-color: color-mix(in srgb, var(--warning, #c96d2c) 55%, var(--border));
  background: color-mix(in srgb, var(--warning, #c96d2c) 14%, var(--surface2));
}

/* 充填モード時：撤去入力グループ非表示 */
body.qty-target-fill #page-report .rd-input-group.remove {
  display: none !important;
}
/* 撤去モード時：充填入力グループ非表示 */
body.qty-target-removal #page-report .rd-input-group.fill {
  display: none !important;
}
/* 撤去モード時：撤去なしのカード自体を非表示 */
body.qty-target-removal #page-report .rd-card:has(.rd-input-group.remove.disabled) {
  display: none !important;
}

/* 表示中の入力グループは横いっぱい使う */
#page-report .rd-input-group.fill,
#page-report .rd-input-group.remove:not(.disabled) {
  width: 100%;
  max-width: 100%;
}

/* スライダー本体も横いっぱい */
body.qty-mode-slider #page-report .rd-input-group .rd-qty-slider {
  width: 100%;
}
/* ステッパーも横いっぱい（既存の max-width: 220px を解除） */
body.qty-mode-stepper #page-report .rd-input-group .rd-qty-stepper {
  width: 100%;
  max-width: 100%;
}

/* モバイル：カード内のレイアウトを縦積みに（1カラム）。
   横並びだとスライダーが押し込まれて狭くなるので、入力グループは全幅で1行ずつ。 */
@media (max-width: 768px) {
  #page-report .rd-card {
    grid-template-columns: 1fr !important;
  }
  #page-report .rd-card .rd-card-info {
    grid-column: 1 / -1 !important;
  }
  #page-report .rd-card .rd-input-group.fill,
  #page-report .rd-card .rd-input-group.remove {
    grid-column: 1 / -1 !important;
  }
  #page-report .rd-card .rd-progress-row {
    grid-column: 1 / -1 !important;
  }
  #page-report .rd-card .rd-quick-actions {
    grid-column: 1 / -1 !important;
  }
}

/* ═══════════════════════════════════════════════════════
   コンパクト化：ツールバー1行、ラベル非表示、カード余白圧縮
   ═══════════════════════════════════════════════════════ */

/* ツールバー：方式と対象を1行 inline で */
#page-report .rd-toolbar-compact {
  padding: 8px 12px;
  margin-bottom: 8px;
}
#page-report .rd-toolbar-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
#page-report .rd-toolbar-inline-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}
#page-report .rd-toolbar-inline .rd-qty-mode-pills,
#page-report .rd-toolbar-inline .rd-qty-target-pills {
  display: flex;
  gap: 4px;
  margin: 0;
}
#page-report .rd-toolbar-inline .qty-mode-radio,
#page-report .rd-toolbar-inline .qty-target-radio {
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
}

/* スライダーモード時：input-group 内の冒頭ラベル（「充填m」「撤去m」）を非表示 */
body.qty-mode-slider #page-report .rd-input-group.rd-qty-host > label:first-child {
  display: none;
}

/* スライダーモード時の rd-input-group：縦並びに、余計な余白を削減 */
body.qty-mode-slider #page-report .rd-input-group.rd-qty-host {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 0;
}

/* スライダー本体の余白圧縮 */
body.qty-mode-slider #page-report .rd-qty-slider {
  gap: 2px;
}
/* スライダー連動の数字をスライダー直下、右寄せ、コンパクトに */
body.qty-mode-slider #page-report .rd-slider-value {
  align-self: flex-end;
  margin-top: 0;
  font-size: 15px;
  padding: 1px 6px;
  min-width: 32px;
}

/* カード全体の余白圧縮（モバイル） */
@media (max-width: 768px) {
  #page-report .rd-card {
    padding: 10px 12px !important;
    gap: 6px !important;
  }
  /* 進捗バーと完了ボタンの上余白を減らす */
  #page-report .rd-card .rd-progress-row {
    margin-top: 0 !important;
  }
}

/* ステッパー時も「m」ラベル非表示（コンパクト化） */
body.qty-mode-stepper #page-report .rd-input-group.rd-qty-host > label:first-child {
  display: none;
}
body.qty-mode-stepper #page-report .rd-input-group.rd-qty-host {
  padding: 0;
}

/* ═══════════════════════════════════════════════════════
   スライダー右端ボタン：「現在値 / 計画値」フラクション表示
   ボタン全体タップ=計画値ジャンプ、現在値部分タップ=直接入力
   ═══════════════════════════════════════════════════════ */

#page-report .rd-slider-edge--plan {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 6px 10px;
  min-width: 76px;
  justify-content: center;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#page-report .rd-slider-edge--plan:active {
  opacity: 0.7;
}

/* 現在値部分（編集可、目立つ） */
#page-report .rd-slider-edge--plan .rd-slider-value {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  color: var(--primary, #185fa5);
  padding: 0 2px;
  border-radius: 4px;
  outline: none;
  cursor: text;
  min-width: 24px;
  text-align: right;
  -webkit-tap-highlight-color: transparent;
  /* 元のスタイル（margin・align-self等）は不要なので個別に上書き */
  background: transparent;
  border: 1.5px solid transparent;
  margin: 0;
  align-self: auto;
}
#page-report .rd-slider-edge--plan .rd-slider-value:focus {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--primary, #185fa5) 50%, transparent);
}

/* 撤去モード時：現在値の色を錆色に */
body.qty-target-removal #page-report .rd-slider-edge--plan .rd-slider-value {
  color: var(--warning, #c96d2c);
}
body.qty-target-removal #page-report .rd-slider-edge--plan .rd-slider-value:focus {
  border-color: color-mix(in srgb, var(--warning, #c96d2c) 50%, transparent);
}

/* セパレータ「 / 」と計画値部分（控えめ） */
#page-report .rd-slider-edge-sep {
  font-size: 13px;
  color: var(--text-muted);
  opacity: 0.7;
  font-weight: 400;
}
#page-report .rd-slider-edge-goal {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* 左端の%表示（今日の入力 / 計画値）：右端ボタンより小さく、控えめに */
#page-report .rd-slider-edge--min {
  min-width: 36px;
  text-align: right;
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
/* 達成時（100%）はアクセント色で強調 */
body.qty-target-fill #page-report .rd-card .rd-slider-edge--min[data-pct-100="1"],
body.qty-target-removal #page-report .rd-card .rd-slider-edge--min[data-pct-100="1"] {
  color: var(--text);
}

/* 計画値マーカー（縦線）：スナップ範囲内に指が入ったら強調 */
#page-report .rd-slider-planmark {
  transition: opacity 0.1s, height 0.1s, background 0.1s;
}
#page-report .rd-slider-planmark--active {
  opacity: 1 !important;
  height: 22px !important;
  background: var(--primary, #185fa5) !important;
  width: 3px !important;
}
body.qty-target-removal #page-report .rd-slider-planmark--active {
  background: var(--warning, #c96d2c) !important;
}

/* ═══════════════════════════════════════════════════════
   App Store Review対応：ネイティブアプリ内では課金導線を完全非表示
   ─ iOS / Android / iOS PWA（ホーム画面起動）すべてで適用
   ─ Web版（ブラウザ）はそのまま、課金導線が見える
   ═══════════════════════════════════════════════════════ */

/* 1. サイドバーの「プラン・料金」ボタン非表示 */
.native-app-shell #openPricingModalBtn,
.native-app-shell .sidebar-plan-btn {
  display: none !important;
}

/* 2. サイドバーの「現在のプラン」バッジ非表示 */
.native-app-shell #userPlanBadge {
  display: none !important;
}

/* 3. バックアップ画面の「料金・契約（案内）」カード非表示 */
.native-app-shell .backup-billing-note-card {
  display: none !important;
}

/* 4. 「ネイティブシェルでは契約操作が制限されます」案内文も非表示（中立化）
      ※ 既存ルール (.native-app-shell .native-billing-note { display: block; }) を上書き */
.native-app-shell .native-billing-note,
.native-app-shell .android-billing-note {
  display: none !important;
}

/* 5. プラン画面 (#page-pricing) を非表示。万一ナビゲーションで到達しても中身は空に。 */
.native-app-shell #page-pricing {
  display: none !important;
}

/* 6. プランアップグレードモーダルの「このアプリでは購入できません」案内を表示 */
.native-app-shell .native-app-only-notice {
  display: block !important;
}

/* 7. 各種購入CTAボタンの一括非表示（既存ルールを補強）
      Stripe / プランアップグレード / 請求管理 ボタン */
.native-app-shell .stripe-checkout-button,
.native-app-shell .stripe-billing-portal-button,
.native-app-shell .plan-upgrade-button,
.native-app-shell [data-action="createCheckoutSession"],
.native-app-shell .prc-portal-btn,
.native-app-shell #prcPortalBtn,
.native-app-shell #planUpgradeModalCheckoutBtn,
.native-app-shell #upgradeProBtnBackup,
.native-app-shell #upgradeAiBasicBtnBackup,
.native-app-shell #upgradeAiProBtnBackup,
.native-app-shell #manageBillingBtnBackup {
  display: none !important;
}

/* 8. プラン誘導モーダルの「閉じる」ボタンを右側中央に。
      ボタンが1つだけになるので、action-row の配置を維持する。 */
.native-app-shell #planUpgradeModal .action-row {
  justify-content: flex-end;
}

/* 9. 料金モーダル (#pricingModal) を完全に非表示。サイドバーから開けないが、
      JSが何らかの経路で呼んだ時のセーフネット */
.native-app-shell #pricingModal {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   iOS ネイティブ：ステータスバー／ノッチ重なり防止（Guideline 4）
   env(safe-area-inset-top) が 0 の WKWebView でも最低余白を確保。
   ═══════════════════════════════════════════════════════ */

body.ios-app-shell {
  --safe-top: max(env(safe-area-inset-top, 0px), 47px);
}
body.ios-app-shell.platform-iphone {
  --safe-top: max(env(safe-area-inset-top, 0px), 59px);
}
body.ios-app-shell.platform-ipad {
  --safe-top: max(env(safe-area-inset-top, 0px), 72px);
  --ipad-top-gap: 64px;
  --safe-left: max(env(safe-area-inset-left, 0px), 16px);
}

body.ios-app-shell .sample-demo-banner {
  padding-top: max(10px, var(--safe-top)) !important;
  padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
}
body.sample-demo-active.ios-app-shell #app.show {
  padding-top: calc(var(--safe-top) + 46px) !important;
  box-sizing: border-box;
}

body.ios-app-shell .login-screen {
  padding-top: max(clamp(20px, 5vh, 40px), calc(var(--safe-top) + 16px)) !important;
  box-sizing: border-box;
}

body.ios-app-shell .topbar {
  padding-top: max(12px, calc(var(--safe-top) + 10px)) !important;
  padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
  min-height: max(54px, calc(var(--safe-top) + 52px)) !important;
  box-sizing: border-box;
}

body.ios-app-shell.platform-ipad .sidebar {
  padding-top: calc(var(--safe-top) + var(--ipad-top-gap, 64px)) !important;
  padding-left: var(--safe-left, 0px) !important;
  box-sizing: border-box;
  height: calc(100dvh - var(--safe-top) - var(--ipad-top-gap, 64px)) !important;
  max-height: calc(100dvh - var(--safe-top) - var(--ipad-top-gap, 64px)) !important;
}
body.ios-app-shell.platform-ipad .sidebar .logo {
  padding-top: 28px !important;
  padding-bottom: 18px !important;
  padding-left: max(20px, calc(var(--safe-left, 0px) + 24px)) !important;
  padding-right: 16px !important;
}
body.ios-app-shell.platform-ipad .topbar {
  padding-top: max(20px, calc(var(--safe-top) + 28px)) !important;
  min-height: max(80px, calc(var(--safe-top) + 72px)) !important;
}

@media (min-width: 768px) {
  body.ios-app-shell:not(.platform-iphone) .sidebar {
    padding-top: calc(var(--safe-top, 72px) + 64px) !important;
    padding-left: max(env(safe-area-inset-left, 0px), 16px) !important;
    box-sizing: border-box;
  }
  body.ios-app-shell:not(.platform-iphone) .sidebar .logo {
    padding-top: 28px !important;
    padding-left: max(20px, calc(env(safe-area-inset-left, 0px) + 24px)) !important;
  }
  body.ios-app-shell:not(.platform-iphone) .topbar {
    padding-top: max(20px, calc(var(--safe-top, 72px) + 28px)) !important;
    min-height: max(80px, calc(var(--safe-top, 72px) + 72px)) !important;
  }
}

body.ios-app-shell .mob-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
}
body.ios-app-shell .v0x-scroll-tools {
  bottom: calc(86px + env(safe-area-inset-bottom, 0px) + 8px) !important;
}

/* ═══════════════════════════════════════════════════════
   プラン別 機能比較表（#page-pricing 内）
   ─ 4列：FREE / STANDARD / AI Basic / AI Pro
   ─ モバイル：横スクロール対応（テーブル幅を確保）
   ═══════════════════════════════════════════════════════ */

.pr-feature-compare {
  margin: 32px 0 24px;
  padding: 0 4px;
}

.pr-feature-compare-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}

.pr-feature-compare-sub {
  font-size: 0.86rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 16px;
}

.pr-compare-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(56, 48, 42, 0.04);
}

.pr-compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.86rem;
  background: var(--surface);
}

/* ヘッダー */
.pr-compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface2);
  font-weight: 700;
  font-size: 0.83rem;
  padding: 12px 10px;
  text-align: center;
  color: var(--text);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.pr-compare-th-feature {
  text-align: left !important;
  min-width: 140px;
  padding-left: 14px !important;
}

.pr-compare-th-plan {
  min-width: 80px;
  letter-spacing: 0.04em;
}

.pr-compare-th-free { color: var(--text-muted); }
.pr-compare-th-standard { color: #6b8e3d; }
.pr-compare-th-ai-basic { color: #d97b3a; }
.pr-compare-th-ai-pro { color: #b04a25; }

/* カテゴリー行 */
.pr-compare-category td {
  background: linear-gradient(90deg, rgba(107, 142, 61, 0.08), rgba(217, 123, 58, 0.04));
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text);
  padding: 10px 14px;
  letter-spacing: 0.03em;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* 通常行 */
.pr-compare-table tbody tr:not(.pr-compare-category):hover {
  background: rgba(107, 142, 61, 0.03);
}

.pr-compare-feature {
  padding: 10px 14px;
  font-size: 0.86rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.pr-compare-cell {
  text-align: center;
  padding: 10px 8px;
  font-weight: 700;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.pr-compare-yes {
  color: #6b8e3d;
  font-size: 1rem;
}

.pr-compare-no {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.86rem;
}

.pr-compare-unlimited {
  color: #6b8e3d;
  font-size: 0.78rem;
  font-weight: 600;
}

.pr-compare-limit {
  color: #d97b3a;
  font-size: 0.78rem;
  font-weight: 600;
}

.pr-compare-footnote {
  margin: 14px 4px 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* モバイル: テーブル幅と padding を圧縮 */
@media (max-width: 640px) {
  .pr-feature-compare-title {
    font-size: 1.15rem;
  }
  .pr-compare-table {
    min-width: 520px;
    font-size: 0.82rem;
  }
  .pr-compare-th-feature {
    min-width: 120px;
    padding-left: 10px !important;
  }
  .pr-compare-th-plan {
    min-width: 70px;
  }
  .pr-compare-feature {
    padding: 8px 10px;
  }
  .pr-compare-cell {
    padding: 8px 6px;
  }
}

/* ダークテーマ対応 */
[data-theme="darksoft"] .pr-compare-wrap {
  background: rgba(48, 54, 62, 0.6);
}
[data-theme="darksoft"] .pr-compare-table {
  background: transparent;
}
[data-theme="darksoft"] .pr-compare-table thead th {
  background: rgba(38, 44, 52, 0.8);
}
[data-theme="darksoft"] .pr-compare-feature {
  background: transparent;
}
[data-theme="darksoft"] .pr-compare-category td {
  background: linear-gradient(90deg, rgba(107, 142, 61, 0.15), rgba(217, 123, 58, 0.08));
}

/* ── モーダル／施工項目シート：下ナビより手前（zip マージ後の上書き） ── */
.modal-overlay.open,
.ring-detail-overlay.open,
.inv-site-stock-quick-overlay.open,
.modal-overlay.dialog-modal.show {
  z-index: 9000 !important;
}
#invFilterConfigModal.modal-overlay.open,
#invCatIconModal.modal-overlay.open,
#invDrillModal.modal-overlay.open {
  z-index: 9000 !important;
}
.bd-inv-picker-overlay:not([hidden]) {
  z-index: 9100 !important;
}
#aiSupportModal.modal-overlay.open {
  z-index: 12100 !important;
}
.rd-popover-backdrop,
#rdExpandBackdrop.rd-popover-backdrop,
#page-report .rd-popover-backdrop {
  z-index: 9490 !important;
}
.rd-popover,
#rdExpandPopover.rd-popover,
#page-report .rd-popover {
  z-index: 9500 !important;
}
body.rd-expand-popover-open .v0x-scroll-tools {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 768px) {
  .rd-popover,
  #rdExpandPopover.rd-popover,
  #page-report .rd-popover {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 64px - env(safe-area-inset-bottom, 0px) - 24px) !important;
    transform: none !important;
    animation: rdFadeIn 0.2s ease !important;
  }
}

/* ═══════════════════════════════════════════════════════
   在庫：--font-scale 最終優先（モバイル用固定 px パッチより後）
   文字サイズ ± が効かない原因＝末尾の font-size: Npx !important の上書き
   ═══════════════════════════════════════════════════════ */

#page-inventory .inv-l1-name {
  font-size: calc(19px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-icon {
  font-size: calc(14px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-spec-badge {
  font-size: calc(11px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-total-unit {
  font-size: calc(12px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-muted {
  font-size: calc(11px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-total-num {
  font-size: calc(26px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-row3 .m {
  font-size: calc(10px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-row3 .n1 {
  font-size: calc(21px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-row3 .qty {
  font-size: calc(36px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-row4 .m {
  font-size: calc(12px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-row4 .n1 {
  font-size: calc(20px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-row4 .mat {
  font-size: calc(12px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-row4 .qty {
  font-size: calc(24px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-quick-stock-row {
  font-size: calc(13px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-quick-stock-meta {
  font-size: calc(11px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-quick-stock-unit {
  font-size: calc(10px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-number {
  font-size: calc(14px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-number.total {
  font-size: calc(15px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-row-two-part .inv-number {
  font-size: calc(16px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-cat-label {
  font-size: calc(12px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-cat-count {
  font-size: calc(11px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-maker-filter .filter-btn {
  font-size: calc(13px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-maker-block-head {
  font-size: calc(14px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-cat-icon,
#page-inventory .inv-cat-tab--cfg .inv-cat-icon {
  font-size: calc(16px * var(--font-scale, 1)) !important;
}
#page-inventory .inv-l1-chip-qty {
  font-size: calc(13px * var(--font-scale, 1)) !important;
}
#invDrillModal .inv-dq-name {
  font-size: calc(17px * var(--font-scale, 1)) !important;
}

@media (max-width: 899px) {
  #page-inventory .inv-l1-row3 .n1 {
    font-size: calc(15px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: calc(24px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .m {
    font-size: calc(10px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-total-num {
    font-size: calc(20px * var(--font-scale, 1)) !important;
  }
}

@media (max-width: 767px) {
  #page-inventory .inv-l1-total-num {
    font-size: calc(20px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .n1 {
    font-size: calc(18px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: calc(34px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .m {
    font-size: calc(9px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row4 .n1 {
    font-size: calc(19px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row4 .qty {
    font-size: calc(23px * var(--font-scale, 1)) !important;
  }
}

@media (min-width: 520px) and (max-width: 767px) {
  #page-inventory .inv-l1-row3 .n1 {
    font-size: calc(13px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: calc(22px * var(--font-scale, 1)) !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  #page-inventory .inv-l1-row3 .n1 {
    font-size: calc(13px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: calc(20px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .m {
    font-size: calc(9px * var(--font-scale, 1)) !important;
  }
}

@media (min-width: 1200px) {
  #page-inventory .inv-l1-row3 .n1 {
    font-size: calc(13px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .qty {
    font-size: calc(20px * var(--font-scale, 1)) !important;
  }
  #page-inventory .inv-l1-row3 .m {
    font-size: calc(9px * var(--font-scale, 1)) !important;
  }
}

/* 在庫：チェックボックス列が 18px 等で半分切れるのを防止（グリッド末尾優先） */
#page-inventory .inv-l1-row3 {
  grid-template-columns: 28px minmax(0, 56px) minmax(0, 1fr) 78px;
}
@media (max-width: 899px) {
  #page-inventory .inv-l1-row3 {
    grid-template-columns: 28px minmax(0, 52px) minmax(0, 1fr) 64px !important;
  }
}
@media (max-width: 519px) {
  #page-inventory .inv-l1-row3 {
    grid-template-columns: 28px minmax(0, 44px) minmax(0, 1fr) 62px !important;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  #page-inventory .inv-l1-row3 {
    grid-template-columns: 28px minmax(0, 44px) minmax(0, 1fr) 52px !important;
  }
}
@media (min-width: 1200px) {
  #page-inventory .inv-l1-row3 {
    grid-template-columns: 28px minmax(0, 48px) minmax(0, 1fr) 52px !important;
  }
}
#page-inventory .inv-l1-cell-sel {
  overflow: visible !important;
  min-width: 28px !important;
  width: 28px !important;
}
#page-inventory .inv-l1-cell-sel input.inv-l1-sel {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

/* プル更新インジケータ（全テーマ共通 — neutral 専用ルールだけだと studio 等で常時表示になる） */
.v0x-refresh-indicator {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 9999;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--accent);
  box-shadow: 0 8px 24px rgba(56, 48, 42, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.v0x-refresh-indicator.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 猫モード：下までスクロールしたときの二重余白・プル更新表示を抑止 */
@media (max-width: 768px) {
  html.dash-cat-mode-active .v0x-refresh-indicator {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html.page-dashboard-active.dash-cat-mode-active,
  html.page-dashboard-active.dash-cat-mode-active body {
    overscroll-behavior-y: auto;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    height: auto !important;
  }
  #page-dashboard.dash-cat-mode {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  #page-dashboard.dash-cat-mode #dashModeCat {
    overflow: visible !important;
    max-height: none !important;
  }
  #page-dashboard.dash-cat-mode #dashModeProgress,
  #page-dashboard.dash-cat-mode #dashModeStock {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }
  #page-dashboard.dash-cat-mode .cat-mode-v2,
  #page-dashboard.dash-cat-mode .catv2-shell,
  #page-dashboard.dash-cat-mode .catv2-inner {
    min-height: 0 !important;
  }
  #page-dashboard.dash-cat-mode .catv2-bottom-spacer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
  }
  #page-dashboard.dash-cat-mode .catv2-footer.catv2-section-block {
    padding-bottom: 8px !important;
  }
}

/* ===== 朝のフェードイン演出 ===== */
@keyframes dashMorningFade {
  from {
    opacity: 0;
    filter: blur(12px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}
#page-dashboard.dash--morning-fade {
  animation: dashMorningFade 1.2s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-duration: 1.2s !important;
  transition: none !important;
  transform-origin: center top;
}
@media (prefers-reduced-motion: reduce) {
  #page-dashboard.dash--morning-fade {
    animation: dashMorningFadeReduced 0.5s ease both !important;
    animation-duration: 0.5s !important;
    transform: none !important;
  }
  @keyframes dashMorningFadeReduced {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ===== 朝のモード選択オーバーレイ ===== */
.morning-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
  overflow: hidden;
}

.morning-overlay-bg {
  position: absolute;
  inset: 0;
  background: var(--surface, #eceae6);
}

/* 朝日：左上から差し込む光（背景演出。CSSのまま） */
.morning-overlay-sun {
  position: absolute;
  top: 0;
  left: 0;
  width: 140vw;
  height: 140vw;
  background: radial-gradient(
    circle at top left,
    rgba(255, 244, 214, 0.95) 0%,
    rgba(252, 236, 200, 0.55) 22%,
    rgba(248, 230, 200, 0.22) 42%,
    rgba(236, 234, 230, 0) 66%
  );
  transform-origin: top left;
  transform: scale(0.35);
  opacity: 0;
  animation:
    morningSunRise 3.2s cubic-bezier(0.22, 1, 0.36, 1) both,
    morningSunBreathe 9s ease-in-out 3.2s infinite;
}
@keyframes morningSunRise {
  from { transform: scale(0.35); opacity: 0; }
  to   { transform: scale(1.0);  opacity: 1; }
}
@keyframes morningSunBreathe {
  0%   { opacity: 1.0;  transform: scale(1.0); }
  50%  { opacity: 0.82; transform: scale(0.97); }
  100% { opacity: 1.0;  transform: scale(1.0); }
}

.morning-overlay-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  padding: 0 24px;
}

/* 初期状態：全要素を隠す（WAAPIで出す） */
[data-morning-el] {
  opacity: 0;
  will-change: opacity, transform, filter;
}

.morning-greeting {
  font-size: 13px;
  color: var(--text-sub, #888);
  letter-spacing: 0.08em;
  margin: 0 0 4px;
}

.morning-question {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #2a2824);
  letter-spacing: 0.02em;
  margin: 0 0 20px;
  text-align: center;
}

.morning-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.morning-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  background: var(--surface2, #f5f3ef);
  border: 1px solid var(--border, #ddd);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-align: left;
}

.morning-btn:active {
  background: var(--btn-hover, #ede9e3);
  transform: scale(0.98);
}

.morning-btn-icon {
  font-size: 22px;
  line-height: 1;
}

.morning-btn-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #2a2824);
  letter-spacing: 0.01em;
}

.morning-skip {
  margin-top: 8px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-sub, #888);
  cursor: pointer;
  padding: 8px 16px;
  letter-spacing: 0.04em;
}

.morning-skip:active {
  opacity: 0.6;
}

.morning-overlay.morning-overlay--closing {
  animation: morningFadeOut 0.45s ease both;
  pointer-events: none;
}

@keyframes morningFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .morning-overlay-sun {
    animation: none !important;
    opacity: 0.9;
    transform: scale(1.0);
  }
}

/* 必要材料カード内：タイル群と注釈を横並びにする */
.dash-fi-mat-fish-card .dash-quartz-kpi-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.dash-fi-mat-fish-card .dash-quartz-kpi-row > .dash-quartz-kpi-group--inline-mat {
  flex: 0 0 auto;
  width: min(100%, 234px);
  max-width: 234px;
}
.dash-fi-mat-fish-card .dash-glance-mat-note {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  opacity: 0.6;
  white-space: nowrap;
  text-align: right;
}
.dash-fi-mat-fish-card .dash-bdmat-kpi-trail .dash-mat-detail-link {
  flex: 0 0 auto;
  margin-left: 0;
  align-self: center;
}

/* 箇所系（spot）内訳 */
.bd-card--spot .bd-length-only { display: none !important; }
.bd-card:not(.bd-card--spot) .bd-spot-only { display: none !important; }
.bd-card-row-type {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  align-items: flex-end;
}
.dash-fi-spot-mini {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.dash-fi-spot-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.dash-spot-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 6px 0;
  font-size: 13px;
}
.dash-spot-name {
  font-weight: 700;
  min-width: 0;
  flex: 1 1 120px;
}
.dash-spot-count {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}
.dash-spot-remain,
.dash-spot-remain-inline {
  font-size: 11px;
  color: var(--warning);
  letter-spacing: 0.03em;
}
.dash-spot-remain--done {
  color: var(--success);
}
.dash-spot-type-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.rd-card--spot .rd-input-group.spot label {
  color: var(--accent);
}
@media (max-width: 380px) {
  .dash-fi-mat-fish-card .dash-glance-mat-note {
    font-size: 10px;
  }
}

/* ===== 時間帯による微細な色変化 ===== */
/* 各時間帯で --bg / --surface / --surface2 / --surface3 を微調整 */
/* 色差は気づかないレベル（Lab色空間で2〜3ΔE程度） */
/* darksoft は夜用テーマのため対象外 */

/* 早朝 5-7時：淡い水色を微量ブレンド */
html:not([data-theme="darksoft"])[data-time-band="dawn"] {
  --bg: #e7e8e7;
  --surface: rgba(240, 242, 241, 0.96);
  --surface2: #e7e9e8;
  --surface3: #dbdedc;
}

/* 朝 7-10時：ほんのり暖色（クリーム） */
html:not([data-theme="darksoft"])[data-time-band="morning"] {
  --bg: #ebe9e3;
  --surface: rgba(243, 240, 234, 0.96);
  --surface2: #ebe9e3;
  --surface3: #e0ddd4;
}

/* 昼前 10-13時：標準ベージュ（基準値） */
html:not([data-theme="darksoft"])[data-time-band="late-morning"] {
  --bg: #e9e8e5;
  --surface: rgba(241, 240, 236, 0.96);
  --surface2: #e9e8e5;
  --surface3: #dedcd6;
}

/* 昼下がり 13-16時：やや黄み */
html:not([data-theme="darksoft"])[data-time-band="afternoon"] {
  --bg: #eae8e1;
  --surface: rgba(242, 240, 233, 0.96);
  --surface2: #eae8e1;
  --surface3: #dfddd3;
}

/* 夕方 16-18時：オレンジを微量 */
html:not([data-theme="darksoft"])[data-time-band="evening"] {
  --bg: #ebe7e2;
  --surface: rgba(243, 239, 234, 0.96);
  --surface2: #ebe7e2;
  --surface3: #e0dcd4;
}

/* 暮れ 18-20時：紫を微量 */
html:not([data-theme="darksoft"])[data-time-band="dusk"] {
  --bg: #e8e7e6;
  --surface: rgba(240, 239, 238, 0.96);
  --surface2: #e8e7e6;
  --surface3: #dddcd9;
}

/* 夜 20-24時：暗めベージュ */
html:not([data-theme="darksoft"])[data-time-band="night"] {
  --bg: #e3e1de;
  --surface: rgba(236, 234, 230, 0.96);
  --surface2: #e3e1de;
  --surface3: #d6d3cc;
}

/* 深夜 0-5時：グレー寄り */
html:not([data-theme="darksoft"])[data-time-band="midnight"] {
  --bg: #e2e2e1;
  --surface: rgba(235, 235, 234, 0.96);
  --surface2: #e2e2e1;
  --surface3: #d5d4d2;
}

/* ===== 朝の数字フェード（ピントが合うように現れる） ===== */
@keyframes dashNumberFocus {
  from {
    opacity: 0;
    filter: blur(16px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}

/* 朝の初回表示中だけ、ダッシュボード内の数字に適用 */
#page-dashboard.dash--morning-fade .dash-quartz-num,
#page-dashboard.dash--morning-fade .dash-quartz-v,
#page-dashboard.dash--morning-fade .dash-glance-ov-hero-v,
#page-dashboard.dash--morning-fade .dash-glance-nums,
#page-dashboard.dash--morning-fade .dash-labor-num,
#page-dashboard.dash--morning-fade .dash-mat-chip-num,
#page-dashboard.dash--morning-fade .dash-fi-anom-num,
#page-dashboard.dash--morning-fade .dash-gizmo-num,
#page-dashboard.dash--morning-fade .dash-firstinfo-hero-num,
#page-dashboard.dash--morning-fade .dash-labor-kv-v,
#page-dashboard.dash--morning-fade .dash-row-stat-v,
#page-dashboard.dash--morning-fade .dash-toner-num,
#page-dashboard.dash--morning-fade .mc-result-cans,
#page-dashboard.dash--morning-fade .dash-bdmat-fish-num {
  animation: dashNumberFocus 1.0s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  #page-dashboard.dash--morning-fade .dash-quartz-num,
  #page-dashboard.dash--morning-fade .dash-quartz-v,
  #page-dashboard.dash--morning-fade .dash-glance-ov-hero-v,
  #page-dashboard.dash--morning-fade .dash-glance-nums,
  #page-dashboard.dash--morning-fade .dash-labor-num,
  #page-dashboard.dash--morning-fade .dash-mat-chip-num,
  #page-dashboard.dash--morning-fade .dash-fi-anom-num,
  #page-dashboard.dash--morning-fade .dash-gizmo-num,
  #page-dashboard.dash--morning-fade .dash-firstinfo-hero-num,
  #page-dashboard.dash--morning-fade .dash-labor-kv-v,
  #page-dashboard.dash--morning-fade .dash-row-stat-v,
  #page-dashboard.dash--morning-fade .dash-toner-num,
  #page-dashboard.dash--morning-fade .mc-result-cans,
  #page-dashboard.dash--morning-fade .dash-bdmat-fish-num {
    animation: none;
    opacity: 1;
    filter: none;
  }
}

/* ===== 朝のフェード演出：初回限定の豪華版 ===== */
#page-dashboard.dash--morning-fade--first {
  animation: dashMorningFade 2.0s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-duration: 2.0s !important;
}

#page-dashboard.dash--morning-fade--first .dash-quartz-num,
#page-dashboard.dash--morning-fade--first .dash-quartz-v,
#page-dashboard.dash--morning-fade--first .dash-glance-ov-hero-v,
#page-dashboard.dash--morning-fade--first .dash-glance-nums,
#page-dashboard.dash--morning-fade--first .dash-labor-num,
#page-dashboard.dash--morning-fade--first .dash-mat-chip-num,
#page-dashboard.dash--morning-fade--first .dash-fi-anom-num,
#page-dashboard.dash--morning-fade--first .dash-gizmo-num,
#page-dashboard.dash--morning-fade--first .dash-firstinfo-hero-num,
#page-dashboard.dash--morning-fade--first .dash-labor-kv-v,
#page-dashboard.dash--morning-fade--first .dash-row-stat-v,
#page-dashboard.dash--morning-fade--first .dash-toner-num,
#page-dashboard.dash--morning-fade--first .mc-result-cans,
#page-dashboard.dash--morning-fade--first .dash-bdmat-fish-num {
  animation: dashNumberFocus 1.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* ===== 在庫画面 背景ネットワーク ===== */
#page-inventory {
  position: relative;
}
.inv-network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}
#page-inventory .inv-container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  #page-dashboard.dash--morning-fade--first .dash-quartz-num,
  #page-dashboard.dash--morning-fade--first .dash-quartz-v,
  #page-dashboard.dash--morning-fade--first .dash-glance-ov-hero-v,
  #page-dashboard.dash--morning-fade--first .dash-glance-nums,
  #page-dashboard.dash--morning-fade--first .dash-labor-num,
  #page-dashboard.dash--morning-fade--first .dash-mat-chip-num,
  #page-dashboard.dash--morning-fade--first .dash-fi-anom-num,
  #page-dashboard.dash--morning-fade--first .dash-gizmo-num,
  #page-dashboard.dash--morning-fade--first .dash-firstinfo-hero-num,
  #page-dashboard.dash--morning-fade--first .dash-labor-kv-v,
  #page-dashboard.dash--morning-fade--first .dash-row-stat-v,
  #page-dashboard.dash--morning-fade--first .dash-toner-num,
  #page-dashboard.dash--morning-fade--first .mc-result-cans,
  #page-dashboard.dash--morning-fade--first .dash-bdmat-fish-num {
    animation: none !important;
    opacity: 1;
    filter: none;
  }
}

/* ===== 日報保存時の図面スキャン演出 ===== */
#page-report { position: relative; }

.report-scan-fx {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  display: none;
}
.report-scan-fx.is-scanning {
  display: block;
  opacity: 1;
}

.report-scan-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(120,110,95,0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,110,95,0.14) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0;
}
.report-scan-fx.is-scanning .report-scan-grid {
  animation: reportGridFlash 1.6s ease-out both;
}
@keyframes reportGridFlash {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

.report-scan-beam {
  position: absolute;
  left: 0; right: 0;
  height: 200px;
  top: -200px;
  background: linear-gradient(
    to bottom,
    rgba(217,200,160,0) 0%,
    rgba(217,200,160,0.20) 45%,
    rgba(235,220,185,0.38) 50%,
    rgba(217,200,160,0.20) 55%,
    rgba(217,200,160,0) 100%
  );
}
.report-scan-beam::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  background: rgba(240,225,190,0.7);
}
.report-scan-fx.is-scanning .report-scan-beam {
  animation: reportBeamScan 1.6s cubic-bezier(0.4, 0, 0.6, 1) both;
}
@keyframes reportBeamScan {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(100% + 400px)); }
}

/* ===== 進捗バー：データ駆動（値で色・速度・質を変える） ===== */
.big-bar-fill.prog-low,
.progress-fill.prog-low,
#page-sites .site-progress-fill.prog-low,
.dash-core-fill.prog-low {
  background: #b07a55 !important;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.big-bar-fill.prog-mid,
.progress-fill.prog-mid,
#page-sites .site-progress-fill.prog-mid,
.dash-core-fill.prog-mid {
  background: var(--accent) !important;
  transition: width 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.big-bar-fill.prog-high,
.progress-fill.prog-high,
#page-sites .site-progress-fill.prog-high,
.dash-core-fill.prog-high {
  background: #7cc486 !important;
  transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ===== マイクロタイポグラフィ（サイズ別最適化） ===== */

/* --- 特大数字：日付・達成率・主要メトリクス --- */
.date-badge,
#headerDate,
.big-progress-num,
.dash-firstinfo-hero-num,
.dash-glance-ov-hero-v,
.dash-quartz-num,
.dash-quartz-v {
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.big-progress-num,
.dash-firstinfo-hero-num {
  letter-spacing: -0.03em;
}

/* --- 見出し：現場名・セクションタイトル --- */
.dash-firstinfo-hero-title,
.dash-today-card-name,
.site-name,
.stock-section-title,
.dash-title,
.modal-title,
.topbar-title {
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* --- 本文：説明文・メモ・コメント --- */
.dash-firstinfo-memo-v,
.board-post-body,
.report-notes,
.help-text,
.empty-state-text,
p.body-text {
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* --- 小さいラベル・キャプション：字間を開けて上品に --- */
.dash-glance-mat-label,
.dash-quartz-label,
.stock-kpi-label,
.metric-label,
.field-label,
.dash-today-card-teams,
.big-progress-meta,
.dash-firstinfo-hero-sub {
  letter-spacing: 0.06em;
}

/* --- ごく小さい英字ラベル（大文字想定）はさらに開ける --- */
.dash-section-kicker,
.overline,
.badge-label {
  letter-spacing: 0.12em;
}

/* --- 数字を含むメトリクス全般：等幅で揃える --- */
.dash-labor-num,
.dash-mat-chip-num,
.dash-bdmat-fish-num,
.mc-result-cans,
.dash-row-stat-v,
.dash-labor-kv-v,
.material-bar-num,
.kpi-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* === カラーテーマ選択時: html のデザイントークンを body で上書きしない === */
html[data-theme="studio"] body:not(.theme-apple):not(.theme-watch),
html[data-theme="warm"] body:not(.theme-apple):not(.theme-watch),
html[data-theme="cool"] body:not(.theme-apple):not(.theme-watch) {
  --bg: unset;
  --text: unset;
  --text-muted: unset;
  --text-faint: unset;
  --border: unset;
  --border-light: unset;
  --glass: unset;
  --glass-strong: unset;
  --shadow: unset;
  --shadow-hover: unset;
  background:
    radial-gradient(100% 60% at 80% 0%, var(--bg-glow) 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-grad-top) 0%, var(--bg) 45%, var(--bg-grad-bot) 100%) !important;
  background-attachment: fixed !important;
  color: var(--text) !important;
}

html[data-theme="studio"] body:not(.theme-apple):not(.theme-watch)::before,
html[data-theme="warm"] body:not(.theme-apple):not(.theme-watch)::before,
html[data-theme="cool"] body:not(.theme-apple):not(.theme-watch)::before,
html[data-theme="studio"] body:not(.theme-apple):not(.theme-watch)::after,
html[data-theme="warm"] body:not(.theme-apple):not(.theme-watch)::after,
html[data-theme="cool"] body:not(.theme-apple):not(.theme-watch)::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  opacity: 0 !important;
}

html[data-theme="darksoft"] body.theme-casio {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* === ログイン画面：カラーグラデ固定（和紙・夜モード・テーマ変数の上書きを無効化） === */
#loginScreen.login-screen,
.login-screen,
body.theme-casio .login-screen,
body.theme-casio #loginScreen.login-screen,
html[data-theme="darksoft"] .login-screen,
html[data-theme="darksoft"] #loginScreen.login-screen,
html[data-theme] .login-screen {
  background:
    radial-gradient(circle at 15% 20%, rgba(201,109,44,0.14), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(90,138,50,0.11), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(61,127,160,0.06), transparent 60%),
    linear-gradient(150deg, #faf7f1 0%, #f0ece2 100%) !important;
  color: #352f28 !important;
}
body.theme-casio .login-screen::before,
html[data-theme="darksoft"] .login-screen::before,
.login-screen::before {
  display: none !important;
  background: none !important;
  background-image: none !important;
}
#loginScreen .login-card,
.login-screen .login-card,
body.theme-casio .login-screen .login-card,
body.theme-casio .login-card,
html[data-theme="darksoft"] .login-card,
html[data-theme="darksoft"] #loginScreen .login-card,
html[data-theme="studio"] #loginScreen .login-card,
html:not([data-theme="studio"]) .login-card,
html[data-theme] #loginScreen .login-card {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(221,212,190,0.7) !important;
  background-image: none !important;
  background-clip: border-box !important;
  color: #352f28 !important;
  box-shadow: 0 22px 60px rgba(53,47,40,0.12) !important;
  border-radius: var(--radius-xl) !important;
}
#loginScreen .login-logo-title,
body.theme-casio .login-logo-title,
html[data-theme="darksoft"] .login-logo-title {
  color: #466f9f !important;
  text-shadow: none !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
#loginScreen .login-logo-sub,
body.theme-casio .login-logo-sub,
html[data-theme="darksoft"] .login-logo-sub,
#loginScreen .login-msg,
#loginScreen label {
  color: #82776a !important;
}
#loginScreen input,
#loginScreen select,
#loginScreen textarea,
body.theme-casio .login-screen input,
body.theme-casio .login-screen select {
  background: rgba(255,255,255,0.92) !important;
  color: #352f28 !important;
  border-color: rgba(221,212,190,0.7) !important;
}
#loginScreen .btn-primary,
#loginScreen #loginBtn {
  background: linear-gradient(135deg, #5a8a4a, #6ca35e) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(79,143,70,0.23) !important;
}

/* === ログイン画面：日替わりテーマ（app.js applyLoginDayTheme / Asia/Tokyo） === */
#loginScreen.login-theme-newyear.login-screen {
  background:
    radial-gradient(circle at 20% 18%, rgba(196,48,48,0.16), transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(212,168,75,0.18), transparent 46%),
    linear-gradient(150deg, #fdf6ee 0%, #f5e8dc 100%) !important;
}
#loginScreen.login-theme-newyear #loginBtn {
  background: linear-gradient(135deg, #b84a3a, #d4a84b) !important;
  box-shadow: 0 12px 26px rgba(184,74,58,0.28) !important;
}
#loginScreen.login-theme-newyear .login-logo-title { color: #9c3b32 !important; }

#loginScreen.login-theme-setsubun.login-screen {
  background:
    radial-gradient(circle at 18% 22%, rgba(201,109,44,0.18), transparent 46%),
    radial-gradient(circle at 80% 75%, rgba(90,138,50,0.12), transparent 44%),
    linear-gradient(150deg, #faf4ea 0%, #f0e6d4 100%) !important;
}
#loginScreen.login-theme-setsubun #loginBtn {
  background: linear-gradient(135deg, #c96d2c, #d4924a) !important;
  box-shadow: 0 12px 26px rgba(201,109,44,0.26) !important;
}

#loginScreen.login-theme-valentine.login-screen {
  background:
    radial-gradient(circle at 22% 20%, rgba(220,120,140,0.18), transparent 48%),
    radial-gradient(circle at 78% 80%, rgba(240,180,190,0.14), transparent 46%),
    linear-gradient(150deg, #fdf5f7 0%, #f5e8ec 100%) !important;
}
#loginScreen.login-theme-valentine #loginBtn {
  background: linear-gradient(135deg, #c45c78, #e08898) !important;
  box-shadow: 0 12px 26px rgba(196,92,120,0.24) !important;
}
#loginScreen.login-theme-valentine .login-logo-title { color: #a84862 !important; }

#loginScreen.login-theme-hinamatsuri.login-screen {
  background:
    radial-gradient(circle at 20% 18%, rgba(240,160,190,0.16), transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(120,170,220,0.12), transparent 46%),
    linear-gradient(150deg, #fdf6fa 0%, #eef2f8 100%) !important;
}
#loginScreen.login-theme-hinamatsuri #loginBtn {
  background: linear-gradient(135deg, #d87898, #7a9fd4) !important;
  box-shadow: 0 12px 26px rgba(180,110,150,0.24) !important;
}

#loginScreen.login-theme-spring.login-screen {
  background:
    radial-gradient(circle at 18% 20%, rgba(240,170,190,0.20), transparent 48%),
    radial-gradient(circle at 84% 76%, rgba(180,210,160,0.14), transparent 46%),
    linear-gradient(150deg, #fdf8fa 0%, #f0ece8 100%) !important;
}
#loginScreen.login-theme-spring #loginBtn {
  background: linear-gradient(135deg, #d47898, #7aaa6a) !important;
  box-shadow: 0 12px 26px rgba(190,120,140,0.22) !important;
}
#loginScreen.login-theme-spring .login-logo-title { color: #b86888 !important; }

#loginScreen.login-theme-goldenweek.login-screen {
  background:
    radial-gradient(circle at 16% 22%, rgba(90,160,80,0.16), transparent 48%),
    radial-gradient(circle at 84% 78%, rgba(70,130,190,0.12), transparent 46%),
    linear-gradient(150deg, #f6faf4 0%, #e8f0ea 100%) !important;
}
#loginScreen.login-theme-goldenweek #loginBtn {
  background: linear-gradient(135deg, #4a9a5a, #5a8aaa) !important;
  box-shadow: 0 12px 26px rgba(74,154,90,0.24) !important;
}

#loginScreen.login-theme-tanabata.login-screen {
  background:
    radial-gradient(circle at 20% 15%, rgba(100,120,200,0.18), transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(160,100,200,0.14), transparent 48%),
    linear-gradient(150deg, #f2f4fa 0%, #e6eaf5 100%) !important;
}
#loginScreen.login-theme-tanabata #loginBtn {
  background: linear-gradient(135deg, #5a6aaa, #8868b8) !important;
  box-shadow: 0 12px 26px rgba(90,106,170,0.26) !important;
}
#loginScreen.login-theme-tanabata .login-logo-title { color: #4a5898 !important; }

#loginScreen.login-theme-summer.login-screen {
  background:
    radial-gradient(circle at 18% 20%, rgba(70,160,210,0.16), transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(240,190,80,0.14), transparent 46%),
    linear-gradient(150deg, #f4fafe 0%, #e8f2f8 100%) !important;
}
#loginScreen.login-theme-summer #loginBtn {
  background: linear-gradient(135deg, #3a98c8, #5ab0d8) !important;
  box-shadow: 0 12px 26px rgba(58,152,200,0.24) !important;
}
#loginScreen.login-theme-summer .login-logo-title { color: #3a7aa8 !important; }

#loginScreen.login-theme-autumn.login-screen {
  background:
    radial-gradient(circle at 20% 18%, rgba(210,120,50,0.16), transparent 48%),
    radial-gradient(circle at 82% 80%, rgba(160,90,40,0.12), transparent 46%),
    linear-gradient(150deg, #faf6f0 0%, #f0e6da 100%) !important;
}
#loginScreen.login-theme-autumn #loginBtn {
  background: linear-gradient(135deg, #c87830, #a85828) !important;
  box-shadow: 0 12px 26px rgba(200,120,48,0.26) !important;
}
#loginScreen.login-theme-autumn .login-logo-title { color: #a86028 !important; }

#loginScreen.login-theme-halloween.login-screen {
  background:
    radial-gradient(circle at 18% 20%, rgba(220,120,40,0.18), transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(100,60,140,0.14), transparent 46%),
    linear-gradient(150deg, #faf4ec 0%, #ece4dc 100%) !important;
}
#loginScreen.login-theme-halloween #loginBtn {
  background: linear-gradient(135deg, #d87820, #6848a0) !important;
  box-shadow: 0 12px 26px rgba(180,90,30,0.26) !important;
}

#loginScreen.login-theme-winter.login-screen {
  background:
    radial-gradient(circle at 20% 18%, rgba(120,160,210,0.16), transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(200,210,230,0.18), transparent 46%),
    linear-gradient(150deg, #f6f8fc 0%, #e8eef6 100%) !important;
}
#loginScreen.login-theme-winter #loginBtn {
  background: linear-gradient(135deg, #5a88b8, #7898c8) !important;
  box-shadow: 0 12px 26px rgba(90,136,184,0.24) !important;
}
#loginScreen.login-theme-winter .login-logo-title { color: #4a7098 !important; }

/* === 材料計算内訳（ダッシュボード/在庫） === */
.calc-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
  font-style: italic;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}
.calc-detail-btn:active { transform: scale(0.9); }
.dash-quartz-num .calc-detail-btn { margin-left: 2px; margin-right: 2px; }
.measure-stock-row strong .calc-detail-btn { margin-left: 6px; vertical-align: middle; }

.calc-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.calc-detail-modal.is-open { display: flex; }
.calc-detail-modal-inner {
  background: var(--surface);
  border-radius: 16px;
  padding: 18px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  max-height: min(85vh, 520px);
  overflow-y: auto;
}

.calc-detail-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.calc-detail-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  margin: 10px 0 4px;
  letter-spacing: 0.03em;
}
.calc-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light, var(--border));
}
.calc-detail-row span { color: var(--text-muted); }
.calc-detail-row b { font-variant-numeric: tabular-nums; text-align: right; }
.calc-detail-op {
  font-size: 11px;
  color: var(--text-faint, var(--text-muted));
  padding: 6px 0;
  font-style: italic;
}
.calc-detail-result {
  margin-top: 4px;
  border-bottom: none;
  font-size: 15px;
}
.calc-detail-result b { color: var(--accent); }

/* 材料カード見出し：名前 + m + 箇所数 */
.dash-bdmat-namerow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.dash-bdmat-namerow .dash-row-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.dash-bdmat-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
.dash-bdmat-meta-m {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}
.dash-bdmat-meta-loc {
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

/* タイル + 内訳 + 変更 を横一列 */
.dash-bdmat-kpi-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.dash-bdmat-kpi-row > .dash-quartz-kpi-group--inline-mat {
  flex: 0 1 auto;
  min-width: 0;
}
.dash-bdmat-kpi-trail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* 必要材料カードの「内訳 ›」リンク */
.dash-mat-detail-link {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 4px 2px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-end;
}
.dash-mat-detail-link:active { opacity: 0.6; }
.measure-stock-row .dash-mat-detail-link {
  margin-left: auto;
  align-self: center;
}

/* ===== シーリング特化UI：品目モーダル整理 ＋ 在庫機能の非表示（2026-06 追加） ===== */
/* 品目モーダルのセクション化 */
#itemModal .item-modal-section { margin-bottom: 12px; }
#itemModal .item-modal-section:last-of-type { margin-bottom: 0; }
#itemModal .item-modal-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  margin: 0 0 12px;
  padding-left: 9px;
  border-left: 3px solid var(--accent);
  line-height: 1.2;
}
#itemModal .im-inventory-fields { display: none !important; }
/* 品目モーダルに動的注入される在庫突き合わせ用の要素を隠す */
body.sealing-focus #itemModal .material-id-field,
body.sealing-focus #itemModal .material-detail-help { display: none !important; }

/* 在庫管理 機能の非表示（sealing-focus 時） */
body.sealing-focus .nav-item[data-page="inventory"],
body.sealing-focus .dash-mode-tab[data-dash-mode="stock"],
body.sealing-focus [data-inv-site-stock-quick="1"],
body.sealing-focus #sidebarInvSiteStockBtn,
body.sealing-focus #downloadInventoryCsvBtn { display: none !important; }
/* ===== /シーリング特化UI ===== */

/* 色別在庫：製品専用の色チップ */
#colorStockModal .cs-color-palette {
  margin: 8px 0 4px;
  padding: 10px 0 4px;
  border-top: 0.5px solid var(--border);
}
#colorStockModal .cs-color-palette-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}
#colorStockModal .cs-color-palette-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#colorStockModal .cs-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  max-width: 100%;
}
#colorStockModal .cs-color-chip:active { opacity: 0.7; }
#colorStockModal .cs-color-chip-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex: none;
  border: 0.5px solid var(--border);
}
#colorStockModal .cs-color-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9em;
}
/* ===== サイドメニュー グループ分け（2026-06 追加） ===== */
.nav-group { display: block; }
.nav-section.nav-section-group { margin: 14px 0 4px; }
.nav-group:first-of-type .nav-section.nav-section-group { margin-top: 2px; }
/* ===== /サイドメニュー グループ分け ===== */

/* トップバー「＋日報」— finalNoBlack / studio の黒 primary より後で固定 */
.topbar .topbar-actions #newReportBtn.btn.btn-primary,
html[data-theme="studio"] .topbar .topbar-actions #newReportBtn.btn-primary,
html[data-theme="warm"] .topbar .topbar-actions #newReportBtn.btn-primary,
html[data-theme="cool"] .topbar .topbar-actions #newReportBtn.btn-primary,
html[data-theme="darksoft"] .topbar .topbar-actions #newReportBtn.btn-primary {
  background: linear-gradient(135deg, #4f8f46, #6ca35e) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(79, 143, 70, 0.22) !important;
}
.topbar .topbar-actions #newReportBtn.btn-primary .topbar-report-long,
.topbar .topbar-actions #newReportBtn.btn-primary .topbar-report-short {
  color: #fff !important;
}

/* 在庫「品目を追加」— メインCTA（studio の黒 primary 上書きを打ち消す） */
#addItemBtn.btn.btn-primary,
.inv-actions-togglebar #addItemBtn.btn-primary,
html[data-theme="studio"] #addItemBtn.btn-primary,
html[data-theme="warm"] #addItemBtn.btn-primary,
html[data-theme="cool"] #addItemBtn.btn-primary,
html[data-theme="darksoft"] #addItemBtn.btn-primary {
  background: linear-gradient(135deg, #4f8f46, #6ca35e) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(79, 143, 70, 0.22) !important;
}