/* =========================================================
   あきはラボ 業務管理アプリ — デザインシステム
   ========================================================= */

/* サイドバー後付け FOUC の可視ゲート（初回ペイント前に本文を不可視化）。
   各業務ページ head のインライン script が <html> に akiha-layout-pending を付与し（head パース
   時点＝body 描画より前＝app.js とレンダーブロッキング CSS/Google Fonts 読込の競争を排除）、
   app.js renderLayout 完了で解除する（+1500ms のフェイルセーフあり）。このルールは render-blocking
   な style.css 常設＝初回ペイント時点で必ず適用される。visibility:hidden は領域を保持＝ガタつき最小。
   shell/login/placeholder はインライン script を入れない＝ゲート非対象（真っ白リスクなし）。 */
html.akiha-layout-pending body { visibility: hidden; }

:root {
  /* カラー */
  --color-main: #4BBFBF;
  --color-main-dark: #3aa3a3;
  --color-main-light: #e6f6f6;
  --color-sub: #4A6274;
  --color-sub-dark: #384b59;

  --color-bg: #f4f7f8;
  --color-surface: #ffffff;
  --color-border: #e2e8ec;
  --color-text: #2b3a44;
  /* muted＝#6b7d88 は白地でコントラスト約4.3:1＝WCAG AA(4.5:1)にわずかに届かない
     → 一段濃く（#5c6e7a≒5.1:1）。本文系テキストのAA底上げ（2026-07-12 決裁・全画面に効く改善） */
  --color-text-muted: #5c6e7a;

  --color-success: #3bb273;
  --color-warning: #e0a44b;
  --color-danger: #d9534f;
  --color-info: #4b8fbf;

  /* タイポ */
  --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Consolas", "SFMono-Regular", "Menlo", "Courier New", monospace; /* 等幅（設定ページのバージョン表記等。ブランド表示は撤去済み） */

  /* 余白・角丸・影 */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(40, 60, 70, 0.08);
  --shadow: 0 4px 16px rgba(40, 60, 70, 0.10);
  --shadow-lg: 0 10px 30px rgba(40, 60, 70, 0.14);

  --header-h: 64px;
  --sidebar-w: 240px;
  --platform-h: 56px; /* プラットフォームのトップバー高さ（48→56＝クリック目標44px以上の確保・2026-07-12） */
}

/* ---------- リセット ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* ---------- レイアウト ---------- */
/* 外枠フレーム：上＝プラットフォームのトップバー／下＝app-shell（レール＋テナント）を縦積み */
.platform-frame {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* プラットフォームのトップバー（全幅・最上部・sticky・テナントバーより上）
   SL新IA（2026-07-11・2026-07-12 実目視反映）＝明るい基調・薄い罫線・teal 一点アクセント。
   左＝WSタブ（.platform-tabs・全表示）／右端＝👤アバター＋ユーザー名（ブランド表示は撤去）。 */
.platform-topbar {
  height: var(--platform-h);
  flex-shrink: 0;
  background: var(--color-surface);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: stretch; /* 左枠を下端まで届かせる（タブ連結用）。右枠は自前で中央寄せ */
  justify-content: space-between;
  padding: 0 12px 0 8px;
  position: sticky;
  top: 0;
  z-index: 40;
}
/* タブをトップバー下端（＝WS色ストリップ）へ底付けする＝「ブラウザのタブ」型（2026-07-12） */
.platform-topbar__left { display: flex; align-items: flex-end; gap: 0; min-width: 0; }
.platform-topbar__ws {
  font-size: 13px; opacity: 0.78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.platform-topbar__right { display: flex; align-items: center; flex-shrink: 0; gap: 4px; }

/* ---------- WSタブ（SL新IA・トップバー左） ----------
   全WSをそのまま並べる（「＋N ▾」畳みは 2026-07-12 廃止）。 */
/* タブ＝頭文字アイコン＋WS名テキストの常時表示（2026-07-12 アクセシビリティ方針転換＝
   PC不慣れ・老眼前提。ホバーツールチップは廃止＝ホバーだけが担う情報を残さない）。
   現在タブ＝WS色ベタ塗り（背景は JS が railColorFill を inline 指定・文字白）＝取り違え防止。
   クリック目標44px以上。 */
.platform-tabs { display: flex; align-items: flex-end; gap: 6px; padding: 0 6px; }
.platform-tab {
  height: 48px; /* 44px以上を維持しつつトップバー（56px）下端まで届く＝上に8pxの空き */
  padding: 0 14px 0 9px;
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none;
  border-radius: 10px 10px 0 0; /* 角丸は上側だけ・下は角なしでストリップに接続 */
  /* トップバーの下罫線1px（border-box内側）を跨いで下端をストリップ上端に密着させる。
     現在タブはベタ塗りがこの1pxを覆う＝ストリップと隙間なく一体。非現在タブは透明＝罫線が透けて
     「ブラウザの非アクティブタブ」の見え方（罫線がタブの下を走る）になる */
  margin-bottom: -1px; position: relative; z-index: 1;
  cursor: pointer; transition: background .15s ease;
}
.platform-tab:hover { background: rgba(0, 0, 0, 0.05); }
/* 現在タブのホバー：ベタ塗りは inline style（railColorFill）＝CSS hover より常に優先＝追加規則不要 */
.platform-tab__avatar {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; /* 大きめに（2026-07-13 小柳） */
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; font-weight: 700; line-height: 1;
  background-size: cover; background-position: center; /* アップロードアイコン用 */
}
.platform-tab__name {
  font-size: 14px; font-weight: 600; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.platform-tab.is-current .platform-tab__name { color: #fff; } /* ベタ塗り上は白（fill はAA補正済み） */

/* トップバー直下の全幅WS色ストリップ（取り違え防止の保険・2026-07-12）。
   色は現在タブのベタ塗りと同色（railColorFill）＝タブ下端と隙間なく一体＝「ブラウザのタブ」型 */
.platform-ws-strip { height: 3px; flex-shrink: 0; }

/* トップバー右端の👤ユーザーメニュー（SL新IA＝アバター＋ユーザー名の常時表示・全集約メニュー） */
.platform-user { position: relative; }
/* カプセル（ピル）廃止＝アバター＋名前を素で置く（2026-07-12 小柳フィードバック・teal枠カプセルは撤回）。
   ホバーの合図＝小さめ radius の角丸矩形の薄背景のみ。 */
.platform-user__btn {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 10px; /* クリック目標44px以上（2026-07-12） */
  border: none; background: none; color: inherit;
  border-radius: 8px; font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.platform-user__btn:hover { background: rgba(0, 0, 0, 0.06); }
.platform-user__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-main); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1; flex-shrink: 0;
}
.platform-user__name {
  font-size: 14px; /* バー内テキスト14px以上（2026-07-12 アクセシビリティ底上げ） */
  font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-text); /* 生の既定色でなくデザイントークンに明示固定（2026-07-12 所見2） */
}
.platform-user__caret { font-size: 10px; opacity: 0.8; }
.platform-user__menu {
  display: none; position: absolute; right: 0; left: auto; top: calc(100% + 8px);
  /* 幅は「タイル2個で決まっている」見た目（2026-07-12 小柳確定）：
     タイル幅80×2＋gap22＋メニューpadding6×2＝194 ＋左右ゆとり≒214。
     プロフィールカードの長いメールは ellipsis 優先で省略表示 */
  min-width: 214px; max-width: 214px; padding: 6px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: var(--shadow); z-index: 60;
}
.platform-user.is-open .platform-user__menu { display: block; }
/* account/members（暫定フル画面）は app.js renderLayout が👤を左枠に置く（app.js はスコープ外＝不変更）。
   右寄せメニューだと画面左へはみ出すため、左枠内の👤はメニューを左寄せにする */
.platform-topbar__left .platform-user .platform-user__menu { left: 0; right: auto; }
/* メニュー先頭のプロフィールカード（Google アカウントメニュー式・2026-07-12）。
   非インタラクティブ＝div・cursor:default・hover ハイライトなし（設定への誘導は下の項目が担う）。
   縦組み・中央揃え（2026-07-12 実目視反映）＝大アバター（上・中央）→表示名→メール。
   ※役割行（管理者/スタッフ）は要否・位置を主任が別途判断中＝暫定でメールの下に残置。 */
.platform-user__profile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px 12px; cursor: default; text-align: center;
}
.platform-user__profile-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-main); color: #fff;
  font-size: 22px; font-weight: 700; line-height: 1;
}
.platform-user__profile-text { min-width: 0; max-width: 100%; }
.platform-user__profile-name {
  font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--color-text); /* トークン明示（2026-07-12 所見2） */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.platform-user__profile-email {
  font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; /* 12px以上（2026-07-12 底上げ） */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 「SL管理者」バッジ（is_sysadmin のみ・2026-07-12 決定＝WS役割行の代替）。
   控えめな細枠チップ・teal系。文字色は #2d7f7f＝teal を白地AA(4.5:1)まで暗くした派生
   （--color-main-dark #3aa3a3 は小さい文字だとAA不足のため） */
.platform-user__profile-sys {
  display: inline-block; margin-top: 4px; padding: 2px 10px;
  font-size: 12px; line-height: 1.5; border-radius: 999px;
  border: 1px solid var(--color-main); color: #2d7f7f;
}
/* 設定・ヘルプ＝「iOSホーム画面アイコン」型タイルの中央寄せ横並び（2026-07-12 小柳決定＝折衷案）。
   クリック領域＝アイコン＋ラベル全体（.platform-user__tile ＝ <a>・当たり判定を狭めない）。
   枠線・背景・ホバーのハイライト（薄背景＋teal枠）は内側の正方形 .platform-user__tile-icon
   にだけ描く＝ラベルは枠の外・下の小さいキャプション＝正方形が純粋に保たれる。
   旧メニュー項目リスト＋ヘルプサブリストの CSS は撤去済み＝死にコードを残さない */
.platform-user__tiles {
  display: flex; justify-content: space-evenly; padding: 12px 0 10px; /* 左端・タイル間・右端の3余白を均等に（gap撤去＝2026-07-12） */
}
.platform-user__tile {
  width: 80px; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: none; background: none; /* button 自体は枠線/背景なし（transparent） */
  color: var(--color-sub); text-decoration: none; cursor: pointer;
}
.platform-user__tile-icon {
  width: 64px; height: 64px; /* 角丸正方形＝枠線/背景/ホバーはここにだけ（52→64＝2026-07-12 所見1） */
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: 16px;
  background: none;
  transition: background .15s ease, border-color .15s ease;
}
.platform-user__tile-icon svg { width: 28px; height: 28px; } /* 正方形拡大に釣り合うアイコン寸法（属性22pxを上書き） */
.platform-user__tile:hover .platform-user__tile-icon {
  background: rgba(0, 0, 0, 0.05); border-color: var(--color-main);
}
.platform-user__tile-label { font-size: 13px; color: var(--color-text); line-height: 1; } /* 11.5→13（2026-07-12 底上げ） */
/* ログアウト＝メニュー下端の帯を丸ごとクリック判定（横幅いっぱいの行・テキストは中央のまま・
   2026-07-12 小柳フィードバック）。ホバーで赤系＝文字を --color-danger へ＋薄い赤背景
   （既存パレットの danger トークン #d9534f を rgba で敷く）。confirm 無し＝既存どおり即ログアウト。 */
.platform-user__logout {
  display: block; width: 100%; box-sizing: border-box;
  margin: 4px 0 0; padding: 10px 0; text-align: center;
  border: none; background: none; border-radius: 6px;
  font-size: 13px; color: var(--color-text-muted); cursor: pointer; /* 12.5→13（2026-07-12 底上げ） */
  transition: background .15s ease, color .15s ease;
}
.platform-user__logout:hover { background: rgba(217, 83, 79, 0.08); color: var(--color-danger); }
.platform-user__sep { height: 1px; background: var(--color-border); margin: 6px 4px; }

/* スマホ幅（〜640px）の上部バー（2026-10-18 小柳「WS名やユーザー名が邪魔・被ってる」）。
   文字を出さない＝WS はアイコンだけのタブ（所属 1 個＝切替先が無いので隠す・現在 WS は色ストリップが示す）／
   👤 はアバターだけ（名前はメニューのプロフィールカード）。1 行・高さ不変・重ならない・
   タブが多いときはタブ列の中だけ横に流す（ページは横スクロールしない）。パソコン幅は不変。 */
@media (max-width: 640px) {
  .platform-topbar { padding: 0 6px 0 4px; }
  .platform-topbar__left { flex: 1 1 auto; }
  .platform-tabs {
    min-width: 0; gap: 4px; padding: 0 4px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    margin-bottom: -1px; /* タブ下端を下罫線の上へ（PC のタブの -1px と同じ役・はみ出しは切らない） */
  }
  .platform-tabs::-webkit-scrollbar { display: none; }
  .platform-tabs.is-single { display: none; }
  .platform-tab { padding: 0 6px; margin-bottom: 0; flex-shrink: 0; }
  .platform-tab__name { display: none; }
  .platform-user__btn { padding: 0 8px; } /* アバター 28＋左右 8＝44px 四方 */
  .platform-user__name { display: none; }
}

/* ヘルプページ（help.html）＝FAQ/問い合わせ/不具合報告/利用規約の4項目リスト（2026-07-12） */
.help-list { display: flex; flex-direction: column; gap: 14px; }
.help-item { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; }
.help-item__title { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.help-item__desc { font-size: 12.5px; color: var(--color-text-muted); margin: 0; line-height: 1.7; }
.help-item__link { color: var(--color-main-dark); text-decoration: underline; }

/* ---------- 外枠シェル（shell.html＝親ページ・段階1） ----------
   上＝platform-topbar（シェルが所有）＋下＝テナント iframe。親は再読込しない。 */
.shell-frame { height: 100vh; height: 100dvh; min-height: 0; } /* min-height でなく固定＝iframe が残り全高を占めて内側でスクロール。
   100dvh＝アドレスバーの出入りに追従（未対応ブラウザは前行の 100vh のまま）。min-height:0＝.platform-frame の
   min-height:100vh が 100dvh より大きいときに勝って下端がはみ出すのを打ち消す（2026-10-18） */
.shell-content {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  position: relative; /* 裏読み込み iframe（.is-loading）の絶対配置基準 */
  overflow: auto; -webkit-overflow-scrolling: touch; /* iOS Safari：iframe が中身の高さに伸びる場合の受け皿 */
  background: var(--color-bg); /* 万一の隙間・読み込み中も白でなくアプリ背景色（実目視所見2） */
}
/* 版の知らせ（2026-10-19・shell.js showUpdate）：トップバー（＋WS色ストリップ）の下に 1 行の控えめな帯。
   器 .shell-update は常に在る（role=status の読み上げのため）＝空なら高さ 0。帯が出ると .shell-content（flex:1）が
   その分だけ縮む＝iframe の高さで組む画面（スマホ幅の受付 3 段）は iframe の中の高さが変わるだけ。 */
.shell-update { flex-shrink: 0; }
.shell-update__bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 4px 12px; min-height: 44px;
  background: var(--color-main-light); color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  font-size: 13.5px; line-height: 1.4; text-align: center;
}
.shell-update.is-stale .shell-update__bar { background: #fdf1df; } /* 画面が古い（409）＝少しだけ強く（warning 系の淡色） */
.shell-update__btn {
  min-height: 36px; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--color-main); background: var(--color-surface); color: #2d7f7f; /* teal を白地 AA まで暗くした文字色 */
  font-size: 13.5px; font-weight: 600;
}
.shell-update__btn:hover { background: var(--color-main-light); }
.shell-content .shell-tenant { flex: 1; width: 100%; border: 0; display: block; background: var(--color-bg); }
/* ダブルバッファの裏読み込み中：表と同寸で最前面(z-index:2)に置くが opacity:0 で不可視にする。
   ・visibility:hidden だと iframe が描画されず、可視化の瞬間に初回ペイント＝白が一瞬出る
     （＝#6/#7「縦メニューが消えてページが白くなる・スクロールバー長が変わる」の真因）。
   ・opacity:0 なら iframe は自分の中身を確定ラスタライズしつつ不可視＝スワップは opacity:0→1 の
     合成のみで再描画不要＝白が構造的に出ない。旧フレームは通常フローのまま下で見え続けるので
     スクロール位置・スクロールバー長も不変。pointer-events:none＝読み込み中への誤操作/透過を止める。 */
.shell-content .shell-tenant.is-loading {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
}
/* 裏読み込み中に表示され続ける旧WS画面：操作不能にする（verifier所見[中]＝現在WSは既に
   新WSのため、この窓での保存が新WS側に書かれる混線を窓ごと塞ぐ。inert 属性との二重防御） */
.shell-content .shell-tenant.is-stale { pointer-events: none; }

/* 帳票印刷用の非表示 iframe（shell.js AKIHA.shellPrintSheet が使い捨てで生成）。
   0×0＋画面外＝画面には一切出さない。display:none は印刷できないブラウザ（旧Firefox等）が
   あるため使わない（print-js と同型の定石） */
.shell-print-frame {
  position: fixed; right: 0; bottom: 0;
  width: 0; height: 0; border: 0; overflow: hidden;
}

/* iframe 内（シェル配下＝body.is-embedded・app.js renderLayout が付与）：
   platform-topbar はこの文書に無い＝外枠バー高さ分の sticky オフセットを打ち消す */
body.is-embedded .app-shell { min-height: 100vh; }
body.is-embedded .sidebar { top: 0; height: 100vh; }
body.is-embedded .topbar { top: 0; }

.app-shell {
  display: flex;
  flex: 1;
  min-height: calc(100vh - var(--platform-h));
}

/* サイドバー */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--color-sub);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--platform-h);
  height: calc(100vh - var(--platform-h));
  z-index: 30; /* sticky は重なりの層を作る＝無指定だと管理メニューの飛び出し（z-index:70）が本文の position 付きの要素（事業の数字のゲージ等）の下になる。プラットフォームバー（40）より下 */
}
.sidebar__logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--color-main);
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px; color: #fff;
  flex-shrink: 0;
}

/* サイドバー下部のログイン情報＋ログアウト（セクションを色分け） */
.sidebar__user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sidebar__user:empty { display: none; }
.sidebar__user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sidebar__user-name { font-size: 14px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__user-role { font-size: 11px; opacity: 0.65; }
.sidebar__user .btn { flex-shrink: 0; color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); }
.sidebar__user .btn:hover { background: rgba(255, 255, 255, 0.16); }

/* 層2 accountability：担当スタッフバッジ（共用端末で選択中の担当を常時表示＋担当交代ボタン） */
.sidebar__staff {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sidebar__staff-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sidebar__staff-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; opacity: 0.6; }
.sidebar__staff-name { font-size: 14px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__staff-switch {
  flex-shrink: 0;
  font-size: 11px; padding: 5px 10px;
  border-radius: 8px; cursor: pointer;
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}
.sidebar__staff-switch:hover { background: rgba(255, 255, 255, 0.16); }

.sidebar__nav { padding: 12px 10px; flex: 1; overflow-y: auto; transition: opacity .12s ease; }
/* 権限で絞り込み終わるまでメニューを隠す（全項目→絞り込みのちらつき防止・WS切替時の読み込み感を消す） */
.sidebar__nav.is-navpending { opacity: 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  font-size: 14px;
  /* 行の高さ＝アイコン（20px）と同じ＝閉じた時（アイコンだけ）と開いた時（文字つき）で項目の高さが同じ＝位置がずれない */
  line-height: 20px;
  margin-bottom: 4px;
  transition: background .15s, color .15s;
}
/* セグメント（横並び単一選択ボタン） */
.segmented { display: flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.segmented .seg-btn { flex: 1; padding: 9px 12px; background: #fff; border: none; border-right: 1px solid var(--color-border); cursor: pointer; font: inherit; color: #4A6274; white-space: nowrap; }
.segmented .seg-btn:last-child { border-right: none; }
.segmented .seg-btn.is-active { background: var(--color-main); color: #fff; font-weight: 700; }

.nav-item[hidden] { display: none; }
.nav-item:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.nav-item.is-active { background: var(--color-main); color: #fff; }
.nav-item .nav-icon { display: inline-flex; width: 22px; flex-shrink: 0; }
.icon { width: 20px; height: 20px; display: block; }
/* ナビのグループ（フォルダー） */
.nav-group { margin: 6px 0; }
.nav-group__label,
.nav-group__head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 6px 14px; margin-bottom: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.45);
  background: none; border: none; text-align: left; cursor: default;
}
.nav-group__head { cursor: pointer; }
.nav-group__head:hover { color: rgba(255, 255, 255, 0.8); }
.nav-group__chevron { transition: transform .15s; font-size: 12px; }
.nav-group.is-open .nav-group__chevron { transform: rotate(180deg); }
.nav-group:not(.is-open) .nav-group__items { display: none; }
/* グループ内の項目は少しインデント */
.nav-group__items .nav-item { margin-left: 8px; }

/* 「管理メニュー」フォルダー：見出しを通常のメニュー項目と同じ見た目に */
.nav-group--folder { margin: 4px 0; }
.nav-group--folder .nav-group__head {
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; letter-spacing: 0;
  color: rgba(255, 255, 255, 0.82);
  text-transform: none;
  transition: background .15s, color .15s;
}
.nav-group--folder .nav-group__head:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.nav-group--folder .nav-group__title { display: flex; align-items: center; gap: 12px; }
.nav-group--folder .nav-group__title .nav-icon { display: inline-flex; width: 22px; flex-shrink: 0; }
.nav-group--folder .nav-group__chevron { color: rgba(255, 255, 255, 0.7); font-size: 16px; line-height: 1; }

/* ---------- 設定：メニュー項目のアーカイブ ---------- */
.settings-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .settings-cols { grid-template-columns: 1fr; } }
.menu-toggle-list { list-style: none; margin: 0; padding: 0; }
.menu-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  margin-bottom: 8px; background: #fff;
}
.menu-toggle-row__label { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--color-sub, #4A6274); }
.menu-toggle-row__label .nav-icon { display: inline-flex; width: 20px; color: var(--color-main); }
.menu-toggle-row__label .icon { width: 18px; height: 18px; }

/* ---------- ダッシュボード：今日の活動ログ（スクロール） ---------- */
.activity-today { max-height: 260px; overflow-y: auto; }
.activity-today__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--color-border);
}
.activity-today__row:last-child { border-bottom: none; }
.activity-today__note { flex: 1; min-width: 0; }

.sidebar__footer {
  padding: 14px 20px;
  font-size: 11px;
  opacity: 0.6;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* メイン */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--header-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: var(--platform-h); /* プラットフォームバーの下に貼り付く（二重sticky） */
  z-index: 20;
}
.topbar__title { font-size: 18px; font-weight: 700; }
.topbar__meta { font-size: 13px; color: var(--color-text-muted); }
.topbar__hamburger {
  display: none;
  background: none; border: none;
  font-size: 22px; color: var(--color-sub);
}

.content { padding: 24px; max-width: 1200px; width: 100%; }

/* 未実装テナントのプレースホルダ（ws/placeholder.html＝シェルの iframe 内・段階1） */
.tenant-placeholder {
  min-height: 100vh; /* iframe 内の単独文書＝外枠バーは無い（全高で中央寄せ） */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 10px; color: var(--color-text);
}
.tenant-placeholder__title { font-size: 28px; font-weight: 700; margin: 0; }
.tenant-placeholder__note { font-size: 14px; margin: 0; }

/* ---------- ダッシュボード ---------- */
.dash-hero {
  background: linear-gradient(135deg, var(--color-main) 0%, var(--color-main-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
.dash-hero h1 { font-size: 22px; font-weight: 700; }
.dash-hero p { margin-top: 6px; font-size: 14px; opacity: 0.92; }

.section-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: .04em;
  margin: 6px 0 14px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--color-main);
}
.feature-card__icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  background: var(--color-main-light);
  color: var(--color-main-dark);
  display: grid; place-items: center;
}
.feature-card__icon .icon { width: 26px; height: 26px; }
.feature-card__title { font-size: 17px; font-weight: 700; }
.feature-card__arrow { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--color-main-dark); }

/* 統計カード */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.stat-card__label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.stat-card__value { font-size: 26px; font-weight: 700; margin-top: 4px; }
.stat-card__value small { font-size: 14px; font-weight: 500; color: var(--color-text-muted); }
.stat-card__value.is-text { font-size: 17px; font-weight: 600; color: var(--color-text-muted); }
.stat-card__sub { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }

/* ---------- 共通UIパーツ ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  background: var(--color-main);
  color: #fff;
  transition: background .15s, opacity .15s;
}
.btn:hover { background: var(--color-main-dark); }
.btn--ghost { background: transparent; color: var(--color-sub); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--color-bg); }
.btn--sub { background: var(--color-sub); }
.btn--sub:hover { background: var(--color-sub-dark); }
.btn--danger { background: var(--color-danger); }
.btn--danger:hover { background: #b52b27; }
/* hidden 属性を .btn の display:inline-flex より優先させる（[hidden] 単独だと .btn に負けて表示されてしまう） */
.btn[hidden] { display: none; }
/* 非同期操作中（AKIHA.withBusy/runBusy が付与）：色を落とし＋小スピナーを横に添える。
   既存テキストは残す（.btn は inline-flex + gap＝::after がそのまま隣に並ぶ）。
   pointer-events は disabled と二重の保険。 */
.btn.is-busy { opacity: .6; pointer-events: none; }
.btn.is-busy::after {
  content: "";
  width: 12px; height: 12px; flex-shrink: 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: akiha-busy-spin .7s linear infinite;
}
@keyframes akiha-busy-spin { to { transform: rotate(360deg); } }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge--stock { background: #e6f6f6; color: #2f8c8c; }
.badge--reserved { background: #fdf0db; color: #b9802c; }
.badge--sold { background: #eef1f3; color: #6b7d88; }
.badge--warn { background: #fbe4e0; color: #b4552d; }
/* メンバー管理：WSスコープ停止中の行は淡く（membership.status=suspended・v2 弾2） */
tr.is-suspended > td { opacity: 0.6; }
/* 状態セレクト（バッジ風） */
.status-select {
  appearance: none; -webkit-appearance: none;
  border: none; border-radius: 999px;
  padding: 5px 30px 5px 14px;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px;
}
.status-select:focus { outline: 2px solid rgba(75,191,191,.4); outline-offset: 1px; }
.status-select.is-uketsuke { background-color: #fdf0db; color: #b9802c; }
.status-select.is-taiou { background-color: #e6f6f6; color: #2f8c8c; }
.status-select.is-kanryo { background-color: #eef1f3; color: #6b7d88; }

/* フォーム */
.field { margin-bottom: 16px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
@media (max-width: 520px) { .field-row { flex-direction: column; gap: 0; } }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { /* チェック/ラジオは幅100%の入力枠スタイルから除外（備考欄トグル等・2026-10-03） */
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.4;            /* body の line-height:1.6 継承で入力欄が縦に間延びするのを抑える */
  font-family: inherit;
  background: #fff;
  color: var(--color-text);
}
/* パスワード／PIN のマスク文字：Noto Sans JP は伏字が縦棒（｜）で表示されるため、
   伏字が丸ドット（●）になる欧文フォントに寄せる（入力する数字/文字の見た目は実質同じ）。 */
.field input[type="password"] {
  font-family: Verdana, "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.15em;
}
/* 参照専用の担当者表示（入力欄を撤去し読み取り表示に置換・2026-07-09 小柳決裁）。
   入力欄と縦位置が揃うよう padding を合わせつつ、枠なし・背景なしで「入力ではない」と分かる見た目。 */
.field-static {
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
  font-weight: 600;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px var(--color-main-light);
}

/* テーブル */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: middle; /* 件名などが折り返して行が高くなっても操作列が中央で揃う */
  border-bottom: 1px solid var(--color-border);
}
table.data th { background: var(--color-bg); font-weight: 600; color: var(--color-text-muted); font-size: 13px; }
table.data tr:hover td { background: #fafcfc; }

/* ---------- レスポンシブ（タブレット） ---------- */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    height: 100vh; /* モバイルはドロワー＝全高（プラットフォームバーの上に被さる） */
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: translateX(0); }
  .topbar__hamburger { display: block; }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 55;
  }
  .sidebar-backdrop.is-open { display: block; }
}

/* ---------- レイアウト補助 ---------- */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar input, .toolbar select {
  padding: 9px 11px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: #fff;
}
.toolbar .grow { flex: 1; min-width: 160px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.muted { color: var(--color-text-muted); }
.row-actions { display: flex; gap: 8px; align-items: center; }
.row-actions .btn { flex-shrink: 0; white-space: nowrap; }
/* テーブルの操作列は table-cell を維持する（td に display:flex を当てると列組みから外れて右へズレる）。
   ボタンはインラインで横並び＝行が高くなっても中央で揃う。 */
td.row-actions { display: table-cell; white-space: nowrap; vertical-align: middle; }
td.row-actions .btn { display: inline-flex; vertical-align: middle; }
td.row-actions .btn + .btn { margin-left: 8px; }
.btn--sm { padding: 6px 12px; font-size: 13px; }

/* サービス管理：メニュー価格計算機（補助） */
.calc-box { margin-top: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--color-bg); }
.calc-box > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--color-sub-dark, #4A6274); }
.calc-axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.calc-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; }
.calc-result b { font-size: 16px; color: var(--color-main-dark); }
.pc-warn { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fdecec; color: #c0392b; font-size: 11px; font-weight: 700; }
.code-pill {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700; letter-spacing: .02em; color: var(--color-sub-dark);
}
.thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--color-bg); border: 1px solid var(--color-border); }
.empty { text-align: center; color: var(--color-text-muted); padding: 40px 0; }

/* 採番プレビュー */
.code-preview {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-main-light); color: var(--color-main-dark);
  border-radius: var(--radius-sm); padding: 6px 14px;
  font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 18px;
}
.code-preview small { font-weight: 500; font-size: 11px; color: var(--color-text-muted); }

/* ---------- モーダル ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(30, 42, 50, .5);
  display: none; align-items: center; justify-content: center; z-index: 80; padding: 20px;
}
.modal-backdrop.is-open { display: flex; }

.modal {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
}
.modal__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--color-border); }
.modal__head h3 { font-size: 16px; font-weight: 700; }
.modal__close { background: none; border: none; font-size: 22px; color: var(--color-text-muted); line-height: 1; }
.modal__body { padding: 20px 22px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--color-border); }
/* 受付番号検索の結果（受付ごとの帳票一覧） */
.hist-group { margin-top: 10px; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.hist-group__head { background: #f3f6f7; padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--sub, #4A6274); }
/* flex-wrap＝長い件名/区分でも末尾の金額・操作ボタンがモーダル外へはみ出さず折り返す（クリック不可の根治） */
.hist-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--color-border); font-size: 13px; }
.hist-row:first-of-type { border-top: none; }
.hist-row--link { color: inherit; text-decoration: none; cursor: pointer; }
.hist-row--link:hover { background: #f3f6f7; }
/* nowrap+flex-shrink:0＝flex子として潰されて「請求」等が縦組みになるのを防ぐ */
.hist-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; flex-shrink: 0; }
.hist-badge--est { background: #4BBFBF; }
.hist-badge--rep { background: #4A6274; }

.master-list { list-style: none; }
.master-list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.master-list li .code-pill { min-width: 44px; }
.master-list li .name { flex: 1; }
.master-list li.is-active { background: rgba(75, 191, 191, 0.14); border-radius: 6px; padding-inline: 8px; }


/* 横並びラジオ */
.radio-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 8px 0; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500; }
.radio-row input { margin: 0; }

/* ---------- 値札（印刷） ---------- */
.label-sheet { display: none; }
@media print {
  body.printing-labels .app-shell, body.printing-labels .sidebar-backdrop { display: none !important; }
  body.printing-labels .label-sheet {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 4mm; padding: 6mm;
  }
  /* 空欄テンプレート（コード・価格は手書き） */
  .price-tag {
    border: 1px dashed #999; border-radius: 4px; padding: 4mm;
    display: flex; flex-direction: column; gap: 3mm;
    break-inside: avoid; min-height: 24mm;
  }
  .price-tag__info { display: flex; flex-direction: column; gap: 3mm; }
  .price-tag__shop { font-size: 7pt; color: #555; }
  .price-tag__line {
    font-size: 10pt; font-weight: 700;
    border-bottom: 1px solid #333; padding-bottom: 4mm;
  }
}

/* ---------- 棚卸し ---------- */
.data tr.is-checked { background: rgba(75, 191, 191, 0.10); }
.data tr.is-checked .code-pill { opacity: 0.85; }
.stocktake-report { display: none; }
@media print {
  body.printing-report .app-shell, body.printing-report .sidebar-backdrop { display: none !important; }
  body.printing-report .stocktake-report { display: block !important; color: #111; padding: 8mm; }
  .stocktake-report h1 { font-size: 16pt; margin: 0 0 4mm; }
  .stocktake-report h2 { font-size: 12pt; margin: 6mm 0 2mm; border-bottom: 1px solid #333; padding-bottom: 1mm; }
  .stocktake-report .report-meta { font-size: 10pt; line-height: 1.7; margin-bottom: 4mm; }
  /* border-collapse は印刷時に内側の線が消える/太さが揺れるブラウザ挙動があるため separate で
     全線を保証。二重線を避けるため、外枠は table に上＋左、各セルは右＋下のみ描く
     （closing-report・custody/cred シートと同じ前例パターン。iframe 印刷所見・2026-07-08） */
  .stocktake-report table {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10pt;
    border-top: 1px solid #999; border-left: 1px solid #999;
  }
  .stocktake-report .report-summary th, .stocktake-report .report-summary td {
    border-right: 1px solid #999; border-bottom: 1px solid #999; padding: 2mm 3mm; text-align: left;
  }
  .stocktake-report .report-summary th { background: #f0f0f0; width: 22%; }
  .stocktake-report .report-table th, .stocktake-report .report-table td {
    border-right: 1px solid #999; border-bottom: 1px solid #999; padding: 1.5mm 3mm;
  }
  .stocktake-report .report-table th { background: #f0f0f0; }
  .stocktake-report .report-sign { margin-top: 12mm; font-size: 10pt; }
}

/* ---------- 締め作業 ---------- */
.closing-report { display: none; }
/* モーダル内で日次レポートを画面表示する用 */
.closing-report--inline { display: block; color: var(--color-text, #222); }
.closing-report--inline h1 { font-size: 18px; margin: 0 0 10px; }
.closing-report--inline h2 { font-size: 14px; margin: 18px 0 6px; border-bottom: 1px solid var(--color-border); padding-bottom: 4px; }
.closing-report--inline .report-meta { font-size: 12px; line-height: 1.7; margin-bottom: 12px; color: var(--color-text-muted, #667); }
.closing-report--inline table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 4px; }
.closing-report--inline th, .closing-report--inline td { border: 1px solid var(--color-border); padding: 6px 8px; text-align: left; }
.closing-report--inline .report-summary th { background: rgba(75,191,191,0.1); width: 22%; white-space: nowrap; }
.closing-report--inline .report-table th { background: rgba(75,191,191,0.1); }
.closing-report--inline .report-sign { margin-top: 18px; font-size: 13px; color: var(--color-text-muted, #667); }
.closing-row__price { width: 110px; text-align: right; }
.closing-row__method { width: 140px; }
.cash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.cash-field { display: flex; flex-direction: column; gap: 6px; }
.cash-field > span { font-size: 12px; color: var(--sub, #4A6274); font-weight: 500; }
.cash-field input { text-align: right; }
.cash-field--readonly output {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f3f6f7;
  text-align: right;
  font-weight: 700;
  font-size: 18px;
}
.cash-field--diff output { background: #eef6f6; }
.cash-field--diff output.is-short { background: #fdecec; color: #c0392b; }
.cash-field--diff output.is-over { background: #fff6e5; color: #b8860b; }
.cash-field--diff output.is-ok { background: #e8f7ee; color: #1e8449; }
.cash-denom__table { width: 100%; max-width: 420px; border-collapse: collapse; }
.cash-denom__table th, .cash-denom__table td { padding: 6px 10px; border-bottom: 1px solid #e5eaec; font-size: 14px; }
.cash-denom__table thead th { font-size: 12px; color: var(--sub, #4A6274); }
.cash-denom__table tfoot th, .cash-denom__table tfoot td { border-top: 2px solid #cdd7da; border-bottom: none; font-weight: 700; }
.cash-denom__table .denom-qty { width: 90px; text-align: right; }
.cash-denom__table tfoot output { font-size: 17px; font-weight: 700; }
.cash-diff-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.cash-diff-pill.is-ok { background: #e8f7ee; color: #1e8449; }
.cash-diff-pill.is-short { background: #fdecec; color: #c0392b; }
.cash-diff-pill.is-over { background: #fff6e5; color: #b8860b; }
@media print {
  body.printing-closing .app-shell, body.printing-closing .sidebar-backdrop { display: none !important; }
  body.printing-closing .closing-report { display: block !important; color: #111; padding: 8mm; }
  .closing-report h1 { font-size: 16pt; margin: 0 0 4mm; }
  .closing-report h2 { font-size: 12pt; margin: 6mm 0 2mm; border-bottom: 1px solid #333; padding-bottom: 1mm; }
  .closing-report .report-meta { font-size: 10pt; line-height: 1.7; margin-bottom: 4mm; }
  /* border-collapse は印刷時に内側の線が消えるブラウザ挙動があるため separate で全線を保証。
     二重線を避けるため、外枠は table に上＋左、各セルは右＋下のみ描く。 */
  .closing-report table {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10pt;
    border-top: 1px solid #999; border-left: 1px solid #999;
  }
  .closing-report th, .closing-report td {
    border-right: 1px solid #999; border-bottom: 1px solid #999;
  }
  .closing-report .report-summary th, .closing-report .report-summary td {
    padding: 2mm 3mm; text-align: left;
  }
  .closing-report .report-summary th { background: #f0f0f0; width: 22%; }
  .closing-report .report-table th, .closing-report .report-table td {
    padding: 1.5mm 3mm;
  }
  .closing-report .report-table th { background: #f0f0f0; }
  .closing-report .report-sign { margin-top: 12mm; font-size: 10pt; }
}

/* ---------- 見積書 ---------- */
.modal.modal--wide { max-width: 720px; }
.estimate-totals {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; margin: 12px 0 4px;
}
.estimate-totals__nums { margin-left: auto; min-width: 240px; }
.estimate-totals__nums > div {
  display: flex; justify-content: space-between; gap: 24px; padding: 4px 0;
}
.estimate-totals__grand {
  border-top: 2px solid var(--color-border); margin-top: 4px; padding-top: 8px !important;
  font-size: 18px; color: var(--color-primary, #4BBFBF);
}
.estimate-totals__grand strong { font-size: 20px; }
.ee-lines .ln-name, .ee-lines .ln-price, .ee-lines .ln-qty {
  width: 100%; padding: 6px 8px; border: 1px solid var(--color-border);
  border-radius: 6px; font: inherit;
}

table.data tr.is-clickable { cursor: pointer; }

/* 見積リスト：項目名（見出し）は中央ぞろえ・本文は左ぞろえ（金額のみ右ぞろえ） */
#table th { text-align: center; }

/* 列の区切りが分かるよう縦罫線を表示（幅調整の確認用） */
#table { border: 1px solid var(--color-border); }
#table th:not(:last-child),
#table td:not(:last-child) { border-right: 1px solid var(--color-border); }
.detail-head { display: flex; gap: 24px; flex-wrap: wrap; }
.detail-head .muted, .detail-subject .muted, .detail-note .muted { font-size: 12px; }
.detail-subject { margin-top: 10px; }
.detail-note { margin-top: 12px; padding: 10px 12px; background: var(--color-bg); border-radius: 8px; font-size: 13px; line-height: 1.6; }

.note-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip {
  font: inherit; font-size: 12px; line-height: 1.3;
  padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 999px;
  background: #fff; color: var(--color-text-muted, #4A6274); cursor: pointer;
  max-width: 100%; text-align: left;
}
.chip:hover { background: rgba(75, 191, 191, 0.12); border-color: var(--color-primary, #4BBFBF); color: inherit; }

/* ---------- 作業報告書：写真アップロード（画面） ---------- */
.photo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.photo-col { border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; }
.photo-col__label { font-size: 13px; font-weight: 600; color: var(--color-text-muted, #4A6274); margin-bottom: 8px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 8px; }
.photo-grid:empty { display: none; }
.photo-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px solid var(--color-border); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb__del {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff; border-radius: 50%; font-size: 14px; line-height: 1;
}
.photo-thumb:hover .photo-thumb__del { background: var(--color-danger, #d9534f); }
.photo-add { cursor: pointer; }
@media (max-width: 600px) { .photo-cols { grid-template-columns: 1fr; } }

/* 詳細プレビュー内の before/after 表示 */
.rp-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0; }
.rp-photos__label { font-size: 13px; font-weight: 600; color: var(--color-text-muted, #4A6274); margin-bottom: 6px; }
.rp-photos__imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.rp-photos__imgs img { width: 100%; border-radius: 8px; border: 1px solid var(--color-border); display: block; }
.rp-photos__empty { font-size: 13px; color: var(--color-text-muted, #4A6274); padding: 8px 0; }

/* ---------- 販促データ（PDF一覧） ---------- */
.promo-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 12px;
  background: #f3f9f9; border: 1px solid var(--color-border); border-radius: 10px;
  font-size: 14px;
}
.promo-bar__name { font-weight: 600; }
.promo-bar__count { margin-left: auto; font-size: 13px; }
.promo-group { padding: 8px; margin-bottom: 14px; }
.promo-folder {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; font-weight: 600; font-size: 14px; color: var(--color-text, #2c3e50);
  border-bottom: 1px solid var(--color-border); margin-bottom: 4px;
}
.promo-folder__count { font-weight: 400; font-size: 12px; }
.promo-folder__del { margin-left: auto; }
.promo-file {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 6px; font-size: 14px;
}
.promo-file:hover { background: rgba(75, 191, 191, 0.10); }
.promo-file__open {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  border: none; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.promo-file__icon { color: #d9534f; flex-shrink: 0; }
.promo-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-file__open:hover .promo-file__name { text-decoration: underline; }
.promo-file__meta { font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.promo-file__del { flex-shrink: 0; }
@media (max-width: 600px) { .promo-file__meta { display: none; } }

.estimate-sheet, .report-sheet { display: none; }
@media print {
  @page { size: A4 portrait; margin: 0; }
  /* 見積書と請求書は同じ .estimate-sheet 視覚スタイルを共用するが、印刷スコープは分離する
     （所見2＝どちらか印刷で2枚出る事故の根治）。見積エディタ・請求エディタは同一ページ
     （documents.html / reception.html）で両方のシートを body 直下に残すため、印刷クラスを
     共用すると body.printing-estimate .estimate-sheet が両シートに当たって2枚刷られる。
     ・見積シート＝class="estimate-sheet"・印刷クラス printing-estimate
     ・請求シート＝class="estimate-sheet invoice-sheet"（視覚スタイルは estimate-sheet を継承）
       ・印刷クラス printing-invoice
     可視化ルールを :not(.invoice-sheet) と .estimate-sheet.invoice-sheet で振り分け＝
     その場印刷（両シートが body 同居）でも当該シート1枚だけが表示される。 */
  body.printing-estimate .app-shell, body.printing-estimate .sidebar-backdrop,
  body.printing-invoice .app-shell, body.printing-invoice .sidebar-backdrop { display: none !important; }
  body.printing-estimate .estimate-sheet:not(.invoice-sheet),
  body.printing-invoice .estimate-sheet.invoice-sheet {
    display: block !important; color: #111; padding: 12mm; font-size: 10.5pt;
    /* 余白 12mm 四方（2026-10-03 刷新＝発行者欄を右上の通常フローへ移し固定フッターを廃止。
       下端は .es-runfoot（高さ約4mm・bottom 6mm）だけ＝本文の padding-bottom は 12mm で足りる） */
    width: 210mm; min-height: 297mm; box-sizing: border-box;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .estimate-sheet .es-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 2.5pt solid #4BBFBF; padding-bottom: 3mm; margin-bottom: 3.5mm;
  }
  .estimate-sheet h1 { font-size: 22pt; letter-spacing: 4pt; margin: 0; color: #2c4a4a; line-height: 1.2; }
  .estimate-sheet .es-meta { text-align: right; font-size: 9pt; line-height: 1.5; }
  /* 上段2列（spec §1-2）：左 118mm＝宛名→挨拶→ご依頼内容／右 60mm＝発行者欄（118+8+60=186） */
  .estimate-sheet .es-top { display: flex; align-items: flex-start; gap: 8mm; margin-bottom: 3mm; }
  .estimate-sheet .es-top__left { width: 118mm; flex: none; }
  .estimate-sheet .es-top__right { width: 60mm; flex: none; margin-top: 11.6mm; } /* 宛名行（15pt×1.3＋下余白）＋挨拶の上マージン分だけ下げ、会社情報の上端を挨拶の高さに揃える（2026-10-03 小柳） */
  .estimate-sheet .es-customer { font-size: 15pt; font-weight: 700; line-height: 1.3; border-bottom: 1px solid #333; padding-bottom: 1.5mm; }
  .estimate-sheet .es-customer span { font-size: 11pt; }
  /* 挨拶＝1文1行（<br> 区切り）。左列 118mm＝10pt で約33字まで折り返さない */
  .estimate-sheet .es-greeting { font-size: 10pt; line-height: 1.6; margin: 3mm 0; }
  .estimate-sheet .es-subject {
    font-size: 11pt; line-height: 1.4; margin: 0; padding: 1.5mm 3mm; background: #f3f9f9; border-left: 3pt solid #4BBFBF;
  }
  .estimate-sheet .es-subject span { display: block; font-size: 8.5pt; color: #666; }
  /* 発行者欄＝右列内の小さな横並び flex（通常フロー・fixed ではない）。
     左：ロゴマーク画像1枚 14mm（.es-issuer__mark）／右：会社情報 8pt 5行（.es-issuer__info）。
     あきはラボ・UNIVERSE の見積/請求とも共用。UNIVERSE の社印 .es-seal（ws/universe/theme.css）は
     本欄基準（position:relative）の absolute＝基準ブロックが「右上 60mm×約23mm」に変わるため
     top/right は theme.css 側で再調整（spec §6）。 */
  .estimate-sheet .es-issuer { display: flex; align-items: flex-start; /* 情報の1行目（あきはラボ）を挨拶の1行目と同じ高さに＝上揃え・行高1.6で揃う */ gap: 3mm; }
  .estimate-sheet .es-issuer__mark { flex: none; width: 14mm; }
  .estimate-sheet .es-issuer__mark img { width: 100%; height: auto; display: block; }
  .estimate-sheet .es-issuer__info { font-size: 8pt; line-height: 1.6; text-align: left; min-width: 0; }
  .estimate-sheet .es-issuer__name { font-size: 10pt; line-height: 1.6; font-weight: 700; color: #2c4a4a; margin-bottom: 0; white-space: nowrap; }
  /* 【移行後に削除】旧発行者欄（ロックアップ 22mm・固定フッター時代）の残置ルール。
     akihalab / universe 両テナントが .es-issuer__mark へ移行したら消す（2026-10-03）。 */
  .estimate-sheet .es-logo { display: flex; align-items: center; }
  .estimate-sheet .es-logo .akiha-logo img { object-fit: contain; }
  .estimate-sheet .es-logo-text { font-size: 15pt; font-weight: 700; color: #2c4a4a; }
  /* お支払い合計を大きく目立たせる。期限（有効期限／お支払期限）は金額の直下に小さく
     （.es-grand__right に金額＋.es-grand__due。期限が空ならテナント側が .es-grand__due を出さない） */
  .estimate-sheet .es-grand {
    display: flex; justify-content: space-between; align-items: center;
    margin: 0 0 4mm; padding: 3.5mm 6mm; border: 2pt solid #4BBFBF; border-radius: 2mm; background: #f3f9f9;
  }
  .estimate-sheet .es-grand__label { font-size: 12pt; font-weight: 700; color: #2c4a4a; }
  .estimate-sheet .es-grand__right { text-align: right; }
  .estimate-sheet .es-grand__amount { font-size: 24pt; font-weight: 700; color: #2c4a4a; line-height: 1.2; }
  .estimate-sheet .es-grand__due { display: block; font-size: 9pt; color: #2c4a4a; margin-top: 0.5mm; line-height: 1.4; }
  .estimate-sheet .es-section { font-size: 10.5pt; font-weight: 700; margin: 0 0 2mm; color: #2c4a4a; line-height: 1.4; }
  /* border-collapse は印刷時に内側の線が消える/太さが揺れるブラウザ挙動があるため separate で
     全線を保証（closing-report 等と同じ前例。iframe 印刷所見・2026-07-08）。
     この表は tfoot の左下が枠外（es-foot-spacer＝罫線なしの空白セル）のため「外枠を table に
     上＋左」方式が使えない＝**セル側で分担**する：全セルに右＋下・各行の先頭セルに左・
     表の最上段（thead）に上・tfoot は spacer 直後のセルが行の左端＝そこに左線。
     隣接セルは右線のみ＝二重線なし。spacer の border:none（末尾のルール・同 specificity 後勝ち）が
     first-child の左線を打ち消す＝従来どおり枠外は無線。 */
  .estimate-sheet .es-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10pt; empty-cells: show; }
  .estimate-sheet .es-table th, .estimate-sheet .es-table td {
    border-right: 0.4mm solid #777; border-bottom: 0.4mm solid #777; padding: 1.5mm 3mm; text-align: left; line-height: 1.3;
  }
  .estimate-sheet .es-table th:first-child, .estimate-sheet .es-table td:first-child { border-left: 0.4mm solid #777; }
  .estimate-sheet .es-table thead th { border-top: 0.4mm solid #777; background: #4BBFBF; color: #fff; text-align: center; }
  /* ページ分割（spec §5）：2ページ目にも見出し行・行の途中で割らない。合計（tfoot）は表の末尾にそのまま */
  .estimate-sheet .es-table thead { display: table-header-group; }
  .estimate-sheet .es-table tr { page-break-inside: avoid; break-inside: avoid; }
  .estimate-sheet .es-table tfoot th { background: #f7f7f7; text-align: right; white-space: nowrap; }
  /* tfoot の見える左端（所見1＝縦線が数量列の線から1〜2pxずれる off-by-one-width の是正）。
     従来は「es-foot-spacer + th の border-left」＝境界の右側 [x,x+w] に線を引いていたが、
     tbody の縦線はセルの border-right＝境界の左側 [x-w,x] に引かれる＝線幅1本ぶんずれた。
     spacer（colspan=2）の border-right で描けば tbody 側と同じ境界左側＝縦に揃い、tbody 縦線と
     連続する。spacer の他辺は border:none のまま（枠外は無線）＝右辺だけ与える。 */
  .estimate-sheet .es-table tfoot .es-foot-spacer,
  .estimate-sheet .es-table tfoot .es-total .es-foot-spacer {
    border: none; background: none; border-right: 0.4mm solid #777;
  }
  /* 合計行の背景は「見える th/td」だけに限定（designer 所見 2026-10-03）：従来の `.es-total td` は
     spacer `td.es-foot-spacer` にも当たり、上の background:none に詳細度で勝って枠の外へ背景がはみ出た。
     塗り側を :not(.es-foot-spacer) に限定し、上の打ち消し側（spacer の background:none）も残す＝二重封鎖。 */
  .estimate-sheet .es-table tfoot .es-total th,
  .estimate-sheet .es-table tfoot .es-total td:not(.es-foot-spacer) { font-size: 12.5pt; font-weight: 700; background: #e6f4f4; }
  /* 備考＝枠付きボックス。見出し行は置かず、枠の内側左上に小さく「備考」（.es-note__label・7.5pt グレー）。
     定型文は <p>（「・」付き）・自由記入は <p class="free">（「・」なし）。
     内容ゼロのときはテナント側がボックスごと出さない。改ページで割らない。 */
  .estimate-sheet .es-note {
    margin-top: 3mm; font-size: 9pt; line-height: 1.5; border: 1px solid #999; padding: 1.5mm 3mm 2.5mm;
    page-break-inside: avoid; break-inside: avoid;
  }
  .estimate-sheet .es-note__label { font-size: 7.5pt; font-weight: 400; color: #666; line-height: 1.3; margin-bottom: 0.8mm; }
  .estimate-sheet .es-note p { margin: 0; padding-left: 1em; text-indent: -1em; }
  .estimate-sheet .es-note p::before { content: "・"; }
  .estimate-sheet .es-note .free { padding-left: 0; text-indent: 0; margin-top: 0.8mm; }
  .estimate-sheet .es-note .free::before { content: none; }
  /* お振込先 .es-bank（請求書のみ・定期請求等で口座を印字するとき。内訳表の下・備考の前）。
     体裁は備考と同じ枠付き・9pt・左寄せ。見出し .es-bank__label は「備考」ラベルと同じ小さく薄い見た目。
     口座が改ページで割れないように avoid。口座が空ならテナント側がブロックごと出さない。 */
  .estimate-sheet .es-bank {
    margin-top: 3mm; font-size: 9pt; line-height: 1.5; text-align: left; border: 1px solid #999; padding: 1.5mm 3mm 2.5mm;
    page-break-inside: avoid; break-inside: avoid;
  }
  .estimate-sheet .es-bank__label { font-size: 7.5pt; font-weight: 400; color: #666; line-height: 1.3; margin-bottom: 0.8mm; }
  .estimate-sheet .es-guide { margin-top: 5mm; font-size: 9pt; line-height: 1.9; color: #444; }
  /* 下端の薄い1行（spec §4）＝全ページ：社名・書類種別・書類番号。fixed＝全ページに刷られる。
     ページ番号は入れない（counter(page) は Chrome の通常要素で使えない）。不要ならこのクラスを外すだけ。 */
  .estimate-sheet .es-runfoot {
    position: fixed; bottom: 6mm; left: 12mm; right: 12mm;
    font-size: 7.5pt; color: #888; text-align: right; line-height: 1.3;
  }

  /* ---------- 作業報告書（印刷） ---------- */
  body.printing-report-sheet .app-shell, body.printing-report-sheet .sidebar-backdrop { display: none !important; }
  body.printing-report-sheet .report-sheet {
    display: block !important; color: #111; padding: 10mm; font-size: 10.5pt;
    /* 下端は固定フッター（発行者欄≒21mm＋余白）の分を空ける＝本文が被らない */
    padding-bottom: 36mm;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* 見積書シートの共通パーツ（ヘッダー・宛名・件名・備考・発行元）を流用 */
  .report-sheet .es-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 2.5pt solid #4BBFBF; padding-bottom: 3mm; margin-bottom: 5mm;
  }
  .report-sheet h1 { font-size: 22pt; letter-spacing: 4pt; margin: 0; color: #2c4a4a; }
  .report-sheet .es-meta { text-align: right; font-size: 9.5pt; line-height: 1.8; }
  .report-sheet .es-customer { font-size: 15pt; font-weight: 700; border-bottom: 1px solid #333; padding-bottom: 1.5mm; }
  .report-sheet .es-customer span { font-size: 11pt; }
  .report-sheet .es-greeting { font-size: 10pt; line-height: 1.8; margin: 4mm 0; }
  .report-sheet .es-subject {
    font-size: 11pt; margin: 3mm 0; padding: 2mm 3mm; background: #f3f9f9; border-left: 3pt solid #4BBFBF;
  }
  .report-sheet .es-subject span { display: block; font-size: 8.5pt; color: #666; }
  .report-sheet .es-note { margin-top: 5mm; font-size: 9.5pt; border: 1px solid #999; padding: 3mm; }
  .report-sheet .es-note__label { font-weight: 700; margin-bottom: 1mm; }
  /* 発行者欄＝レターヘッド方式で全ページ下端に固定（2026-09-12 案1採択）。
     流し込みだと本文がページ一杯のとき発行者欄だけが次ページ頭に取り残されるため。
     position:fixed は印刷時に各ページへ繰り返し描画される（Chrome/Edge/Safari 共通の定石） */
  .report-sheet .es-issuer {
    display: flex; justify-content: flex-end; align-items: center; gap: 4mm;
    position: fixed; bottom: 10mm; left: 10mm; right: 10mm;
    border-top: 1px solid #ccc; padding-top: 4mm;
  }
  .report-sheet .es-logo { display: flex; align-items: center; }
  .report-sheet .es-logo .akiha-logo img { object-fit: contain; }
  .report-sheet .es-logo-text { font-size: 15pt; font-weight: 700; color: #2c4a4a; }
  .report-sheet .es-issuer__info { font-size: 9pt; line-height: 1.7; text-align: left; }
  .report-sheet .es-issuer__name { font-size: 12pt; font-weight: 700; color: #2c4a4a; }
  /* before / after 写真：改ページで割れないように */
  .report-sheet .rp-photos { display: flex; gap: 5mm; margin: 4mm 0; }
  .report-sheet .rp-photos__col { flex: 1; }
  .report-sheet .rp-photos__label { font-size: 9.5pt; font-weight: 700; color: #2c4a4a; margin-bottom: 1.5mm; }
  .report-sheet .rp-photos__imgs img { width: 100%; border: 1px solid #ccc; margin-bottom: 2mm; page-break-inside: avoid; }
  .report-sheet .rp-photos__empty { font-size: 9pt; color: #888; padding: 4mm; border: 1px dashed #ccc; text-align: center; }
  .report-sheet .rp-photos--gallery { display: block; }
  .report-sheet .rp-photos--gallery .rp-photos__imgs { display: grid; grid-template-columns: repeat(var(--rp-cols, 2), 1fr); gap: 3mm; }
  .report-sheet .rp-photos--gallery .rp-photos__imgs img { margin-bottom: 0; }
  .report-sheet .rp-comment { margin-top: 4mm; font-size: 9.5pt; line-height: 1.7; padding: 3mm; background: #f7f7f7; }
  .report-sheet .rp-comment__label { font-weight: 700; margin-bottom: 1mm; color: #2c4a4a; }
}

/* ---------- お預かりシート / ログイン情報シート（受付から印刷） ---------- */
.custody-sheet, .cred-sheet { display: none; }
@media print {
  body.printing-custody-sheet .app-shell, body.printing-custody-sheet .sidebar-backdrop,
  body.printing-cred-sheet .app-shell, body.printing-cred-sheet .sidebar-backdrop { display: none !important; }
  body.printing-custody-sheet .custody-sheet,
  body.printing-cred-sheet .cred-sheet {
    display: block !important; position: relative; width: 210mm; min-height: 297mm; padding: 20mm;
    color: #000; background: #fff;
    font-family: "Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* 共通パーツ */
  .custody-sheet .sh-head, .cred-sheet .sh-head { border-bottom: 2px solid #000; padding-bottom: 6mm; margin-bottom: 7mm; }
  .custody-sheet .sh-head { display: flex; justify-content: space-between; align-items: flex-end; }
  .cred-sheet .sh-head { text-align: center; }
  .sh-org { font-size: 9.5pt; letter-spacing: .1em; }
  .sh-title { font-size: 19pt; font-weight: 700; letter-spacing: .12em; }
  .cred-sheet .sh-title { font-size: 20pt; display: block; margin-top: 3mm; }
  .cred-sheet .sh-sub { font-size: 9.5pt; margin-top: 3mm; letter-spacing: .05em; }
  .sh-no { text-align: right; font-size: 10pt; }
  .sh-no b { font-weight: 700; }
  .sh-note { font-size: 8.5pt; color: #333; }
  .sh-lead { font-size: 9.5pt; line-height: 1.8; margin-bottom: 6mm; text-align: justify; }

  /* border-collapse は印刷時に内側の線が消えるブラウザ挙動があるため separate で全線を保証。
     二重線（2px）を避けるため、外枠は table に上＋左、各セルは右＋下のみ描く。 */
  .custody-sheet table, .cred-sheet table {
    width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 7mm;
    border-top: 1px solid #000; border-left: 1px solid #000;
  }
  .custody-sheet th, .custody-sheet td, .cred-sheet th, .cred-sheet td {
    border-right: 1px solid #000; border-bottom: 1px solid #000;
    padding: 3.5mm 4mm; vertical-align: middle; font-size: 10.5pt; text-align: left;
  }
  .custody-sheet th, .cred-sheet th { width: 40mm; background: #f0f0f0; font-weight: 700; letter-spacing: .03em; }
  .custody-sheet td, .cred-sheet td { height: 13mm; }
  .cred-sheet th { width: 46mm; }
  .cred-sheet td { height: 16mm; }
  .sh-cell-note { font-size: 8.5pt; color: #333; font-weight: 400; display: block; margin-top: .8mm; }
  .sh-fill { font-weight: 700; }
  /* 付属品「その他」：2行目に置き、（ ）を横幅いっぱいに */
  .sh-other { display: flex; align-items: baseline; margin-top: 2mm; white-space: nowrap; }
  .sh-other__fill { flex: 1; min-height: 5mm; margin: 0 1mm; }
  /* 返却欄：返却日の記入欄を横幅いっぱいに */
  .sh-return { display: flex; align-items: baseline; }
  .sh-return__fill { flex: 1; }

  .sh-section-label { font-size: 9pt; font-weight: 700; letter-spacing: .1em; color: #555; margin-bottom: 2mm; }
  .sh-terms { border: 1px solid #000; padding: 5mm 6mm; margin-bottom: 8mm; }
  .sh-stub .sh-terms { margin: 3mm 0 0; }
  .sh-terms__ttl { font-size: 10.5pt; font-weight: 700; letter-spacing: .08em; margin-bottom: 3mm; border-bottom: 1px solid #000; padding-bottom: 2mm; }
  .sh-terms__list { list-style: none; font-size: 9pt; line-height: 1.75; counter-reset: item; }
  .sh-terms__list li { padding-left: 7mm; position: relative; margin-bottom: 1.5mm; }
  .sh-terms__list li:last-child { margin-bottom: 0; }
  .sh-terms__list li::before { content: counter(item)"．"; counter-increment: item; position: absolute; left: 0; font-weight: 700; }
  .sh-terms__note { font-size: 9pt; line-height: 1.75; }

  /* お預かりシート：切り取り線＋お客様控え */
  .sh-cut { border-top: 1.5px dashed #000; margin: 6mm 0; position: relative; text-align: center; }
  .sh-cut span { position: absolute; top: -2.6mm; left: 50%; transform: translateX(-50%); background: #fff; padding: 0 3mm; font-size: 8pt; color: #555; letter-spacing: .1em; }
  .sh-stub { border: 1px solid #000; padding: 5mm 6mm; }
  .sh-stub__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3mm; }
  .sh-stub__title { font-size: 12pt; font-weight: 700; letter-spacing: .08em; }
  .sh-stub__org { font-size: 8.5pt; color: #333; }
  .sh-stub__row { display: flex; gap: 8mm; font-size: 10pt; margin-bottom: 2.5mm; align-items: flex-end; }
  .sh-stub__item { display: flex; align-items: flex-end; gap: 2mm; flex: 1; }
  .sh-stub__val { flex: 1; border-bottom: 1px solid #000; min-height: 6mm; font-weight: 700; font-size: 10.5pt; }
  .sh-stub__note { font-size: 8pt; color: #333; line-height: 1.6; margin-top: 2mm; }
  /* お客様控え：LINE友だち追加（QR＋短い案内・押しつけない） */
  .sh-stub__line { display: flex; align-items: center; gap: 4mm; margin-top: 3mm; padding-top: 3mm; border-top: 1px solid #000; }
  .sh-stub__qr { width: 20mm; height: 20mm; flex: 0 0 20mm; display: block; }
  .sh-stub__linetxt { font-size: 9pt; line-height: 1.7; }
  .sh-stub__linetxt b { display: block; font-size: 10pt; letter-spacing: .05em; margin-bottom: 1mm; }

  /* ログイン情報シート：フッター */
  .sh-foot { margin-top: 10mm; text-align: center; font-size: 8.5pt; color: #333; letter-spacing: .05em; line-height: 1.7; }
}

/* WS選択画面（複数所属で未選択・上バーのドロップダウンがまだ無い状態）：
   カード内にWSボタンの縦リスト（レールは廃止・2026-07-07 Slack/Notion 型へ移行） */
.ws-pick { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; text-align: left; }
.ws-pick__item {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px;
  background: #fff; color: var(--color-text); font-size: 14px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ws-pick__item:hover { border-color: var(--color-main); background: rgba(0, 0, 0, 0.02); }
.ws-pick__avatar {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
}
.ws-pick__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- アカウント設定：情報リスト ---------- */
.account-info { margin: 0; }
.account-info > div,
.account-info dt { }
.account-info dt {
  font-size: 12px; font-weight: 600; color: var(--color-text-muted);
  margin-top: 12px;
}
.account-info dt:first-child { margin-top: 0; }
.account-info dd {
  margin: 2px 0 0; font-size: 15px; color: var(--color-text);
}
.account-info dd ul { margin: 4px 0 0; padding-left: 0; list-style: none; }
.account-info dd li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 14px;
}
.account-info dd li:last-child { border-bottom: none; }

/* ---------- ログイン画面 ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
/* data-no-layout の WS（.uv-app 等）で本文の代わりに出す案内・選択（api.js screenWrap）＝画面の前面に固定 */
.login-wrap--front {
  position: fixed; inset: 0; z-index: 10000; overflow-y: auto; background: var(--color-bg);
}
.login-card { width: 100%; max-width: 360px; padding: 32px 28px; }
.login-brand {
  font-size: 22px; font-weight: 700; color: #2c4a4a; text-align: center; margin-bottom: 24px;
}
.login-brand small { display: block; font-size: 12px; font-weight: 500; color: #4A6274; margin-top: 4px; }
.login-btn { width: 100%; margin-top: 8px; }
/* ラベルの QR から来たときの 1 行（login.js・2026-10-24 ラベル 段0） */
.login-note { font-size: 13px; color: #4A6274; text-align: center; margin: -12px 0 16px; }
.login-note[hidden] { display: none; }
.login-error {
  background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2;
  border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px;
}
/* Google ログインの区切り「または」（GIS ボタンは login.js が client_id 設定時のみ描く） */
.login-or {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px; color: var(--color-sub-dark); font-size: 12.5px;
}
.login-or::before, .login-or::after {
  content: ""; flex: 1; height: 1px; background: var(--color-border);
}
#google-signin { display: flex; justify-content: center; }

/* ---------- テナント: 株式会社UNIVERSE の軽いレイアウト（左サイドバー） ----------
   あきはラボ app.js の renderLayout（あきはラボ固有ナビをハードコード）は流用せず、
   UNIVERSE 専用の最小サイドバーを持つ（ws/universe/・物理分離）。 */
.uv-app { display: flex; min-height: 100vh; }
.uv-side {
  width: 200px; flex-shrink: 0; background: var(--color-main, #4BBFBF); color: #fff;
  padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
}
.uv-side__brand { font-weight: 700; font-size: 15px; padding: 4px 10px 14px; line-height: 1.4; }
.uv-nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: none; background: none; color: #fff;
  padding: 10px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; font-family: inherit;
}
.uv-nav-item__icon { display: inline-flex; width: 22px; flex-shrink: 0; }
.uv-nav-item__icon .icon { width: 20px; height: 20px; }
/* クリックできる表の行（行クリックで編集モーダル等）＝カーソル＋ホバー */
.data tbody tr.row-clickable { cursor: pointer; }
.data tbody tr.row-clickable:hover { background: var(--color-main-light); }
.uv-nav-item:hover { background: rgba(255, 255, 255, 0.14); }
.uv-nav-item.is-active { background: rgba(255, 255, 255, 0.24); font-weight: 700; }
.uv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* UNIVERSE ページ見出し＝あきはラボの <header class="topbar"> と同じ白い見出しバー（2026-07-13 小柳）。
   iframe 内単独文書＝top:0 に sticky。左＝メニュー名、右＝ページのアクション（＋新規 等）。 */
.uv-topbar {
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 24px; height: var(--header-h);
  position: sticky; top: 0; z-index: 5;
}
.uv-topbar__title { font-size: 18px; font-weight: 700; color: var(--color-text); }
.uv-content { padding: 20px 24px; width: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
  .uv-app { flex-direction: column; }
  .uv-side { width: auto; flex-direction: row; flex-wrap: wrap; padding: 10px; }
  .uv-side__brand { width: 100%; padding: 4px 8px 8px; }
  .uv-nav-item { width: auto; }
}

/* ---------- 印刷 ---------- */
@media print {
  .platform-topbar, .sidebar, .topbar, .topbar__hamburger, .no-print { display: none !important; }
  /* 外枠を印刷では潰す（app-shell 非表示時に空フレームが白紙ページを作らないように） */
  .platform-frame, .app-shell { min-height: 0 !important; }
  .main, .content { padding: 0; max-width: none; }
  body { background: #fff; }
}

/* テーマ機能（ライト/ダーク）は 2026-07-12 実目視フィードバックで廃止＝dark 変数上書きCSSも撤去済み */

/* =========================================================
   プラットフォーム設定ページ（platform-settings.html・SL新IA 仮実装）
   縦積みセクション＋上部の節ナビ（アンカー）。card 流儀を再利用。
   ========================================================= */
/* 左メニュー＋右パネル（2026-07-12 小柳＝節を切替表示に）。左が固定幅の縦メニュー・右が選択中の節。 */
.pset-layout { display: flex; gap: 20px; align-items: flex-start; }
.pset-menu {
  display: flex; flex-direction: column; gap: 2px;
  flex: 0 0 200px; width: 200px; position: sticky; top: 12px;
}
/* メニュー上部プロフィール（Windows 11 設定風・2026-07-12）＝アカウント項目そのもの（クリックで節切替） */
.pset-menu__profile {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 8px; margin-bottom: 8px; border: 1px solid transparent; border-radius: 8px;
  background: none; cursor: pointer; transition: background .15s ease;
}
.pset-menu__profile:hover { background: rgba(0, 0, 0, 0.04); }
.pset-menu__profile.is-active { background: rgba(75, 191, 191, 0.12); } /* teal 薄塗り＝プロフィールは反転にしない（アバター/名前の可読性優先） */
.pset-menu__profile-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 600;
}
.pset-menu__profile-name { min-width: 0; font-size: 14px; font-weight: 600; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pset-menu__item {
  text-align: left; font-size: 14px; padding: 10px 14px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--color-text);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.pset-menu__item:hover { background: rgba(0, 0, 0, 0.04); }
.pset-menu__item.is-active {
  background: var(--color-main); color: #fff; font-weight: 500;
}
.pset-content { flex: 1 1 auto; min-width: 0; }
/* ワークスペース一覧（全表示・クリックで該当WSの設定へ・2026-07-12） */
.pset-ws-list { display: flex; flex-direction: column; gap: 8px; }
.pset-ws-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.pset-ws-item:hover { border-color: var(--color-main); background: rgba(75, 191, 191, 0.05); }
.pset-ws-item__chip {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 600;
}
.pset-ws-item__label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pset-ws-item__name { font-size: 14.5px; font-weight: 600; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pset-ws-item__role { font-size: 12px; color: var(--color-text-muted); }
.pset-ws-item__chev { flex: 0 0 auto; font-size: 20px; color: var(--color-text-muted); line-height: 1; }
/* 節は選択中のみ表示（左メニューで切替） */
.pset-section { margin-bottom: 0; }
.pset-section:not(.is-active) { display: none; }
/* 画面が狭いときは左メニューを上に積む */
@media (max-width: 640px) {
  .pset-layout { flex-direction: column; }
  .pset-menu { flex-direction: row; flex-wrap: wrap; width: auto; flex-basis: auto; position: static; }
  .pset-menu__item { font-size: 13px; padding: 7px 12px; }
}
.pset-section .section-label { margin: 0 0 12px; }
.pset-row { display: flex; align-items: baseline; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.pset-row__label { min-width: 140px; font-size: 13px; color: var(--color-text-muted); }
.pset-row__value { font-size: 13.5px; }
/* 「将来」プレースホルダのチップ（仮実装であることの明示） */
.chip-future {
  display: inline-block; font-size: 11px; line-height: 1; padding: 4px 8px;
  border-radius: 999px; border: 1px solid var(--color-border);
  color: var(--color-text-muted); background: none; vertical-align: middle;
}

/* ============================================================
   あきはラボ 縦メニュー＝白基調（2026-07-13 小柳）
   既存の .sidebar 系（ダーク地・白文字）を**後段で上書き**＝白地・濃色文字・
   エメラルド（--color-main）のアクセント。追加のみ＝戻すときはこのブロックを消すだけ。
   ※ UNIVERSE は data-no-layout で .sidebar を使わず .uv-side（ws/universe/theme.css）＝影響なし。
   ============================================================ */
.sidebar { background: #fff; color: var(--color-text); border-right: 1px solid var(--color-border); }
.sidebar__user { background: var(--color-bg); border-top-color: var(--color-border); }
.sidebar__user-name { color: var(--color-text); }
.sidebar__user .btn { color: var(--color-text); border-color: var(--color-border); background: #fff; }
.sidebar__user .btn:hover { background: var(--color-main-light); }
.sidebar__staff { background: var(--color-bg); border-bottom-color: var(--color-border); }
.sidebar__staff-name { color: var(--color-text); }
.sidebar__staff-switch { color: var(--color-text); border-color: var(--color-border); background: #fff; }
.sidebar__staff-switch:hover { background: var(--color-main-light); }
.nav-item { color: var(--color-text); }
.nav-item:hover { background: var(--color-main-light); color: var(--color-main-dark); }
.nav-item.is-active { background: var(--color-main); color: #fff; }
.nav-group__label { color: var(--color-text-muted); }
.nav-group__head:hover { color: var(--color-text); }
.nav-group--folder .nav-group__head { color: var(--color-text); }
.nav-group--folder .nav-group__head:hover { background: var(--color-main-light); color: var(--color-main-dark); }
.nav-group--folder .nav-group__chevron { color: var(--color-text-muted); }

/* ============================================================
   左メニューの開閉式（2026-10-09・docs/ws/akihalab/reception-timeline-layout.md §3.1）
   body.nav-collapsed（app.js renderLayout が保存値から描画前に付与）＝アイコンのみ・幅 64px。
   幅は --sidebar-w の切替だけで変える＝ページ側はサイドバー幅を固定値で持たない。
   900px 以下はドロワー（常に開いた形）＝閉じた形のルールはすべて min-width: 901px に閉じ込める。
   ============================================================ */
.sidebar__collapse {
  display: block; width: calc(100% - 20px); margin: 6px 10px 12px; padding: 9px 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text-muted); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.sidebar__collapse:hover { background: var(--color-main-light); color: var(--color-main-dark); }
@media (max-width: 900px) { .sidebar__collapse { display: none; } }

@media (min-width: 901px) {
  body.nav-collapsed { --sidebar-w: 64px; }
  body.nav-collapsed .nav-label,
  body.nav-collapsed .nav-group__chevron,
  body.nav-collapsed .nav-group__label { display: none; }
  body.nav-collapsed .sidebar__nav { padding: 12px 8px; }
  body.nav-collapsed .sidebar__nav .nav-item,
  body.nav-collapsed .nav-group--folder .nav-group__head { justify-content: center; gap: 0; padding: 12px; }
  body.nav-collapsed .nav-group--folder .nav-group__title { gap: 0; }
  /* 管理メニュー配下のページにいる＝子が見えないので見出しを淡く強調 */
  body.nav-collapsed .nav-group--folder.has-active > .nav-group__head { background: var(--color-main-light); color: var(--color-main-dark); }
  /* 担当スタッフバッジ＝名前は切れても常時表示（成りすまし防止の可視性を残す）・交代ボタンは開いた状態で */
  body.nav-collapsed .sidebar__staff { padding: 8px 6px; justify-content: center; text-align: center; }
  body.nav-collapsed .sidebar__staff-info { align-items: center; }
  body.nav-collapsed .sidebar__staff-name { font-size: 11px; max-width: 52px; }
  body.nav-collapsed .sidebar__staff-switch { display: none; }
  body.nav-collapsed .sidebar__collapse { width: calc(100% - 16px); margin: 6px 8px 12px; padding: 9px 0; text-align: center; font-size: 16px; line-height: 1; }

  /* 管理メニューの子＝通常は畳む（is-open は開いた状態用の記憶として温存）。
     クリックで is-flyout＝右側に既存の .nav-group__items をそのまま出す（hidden の絞り込みも同じ）。 */
  body.nav-collapsed .nav-group--folder .nav-group__items { display: none; }
  body.nav-collapsed .nav-group--folder.is-flyout .nav-group__items {
    display: block; position: fixed; z-index: 70;
    min-width: 200px; padding: 6px;
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
  }
  body.nav-collapsed .nav-group--folder.is-flyout .nav-group__items .nav-item { margin-left: 0; justify-content: flex-start; gap: 12px; padding: 10px 12px; }
  body.nav-collapsed .nav-group--folder.is-flyout .nav-group__items .nav-label { display: inline; }
  body.nav-collapsed .nav-group--folder.is-flyout > .nav-group__head { background: var(--color-main-light); color: var(--color-main-dark); }
  /* フォルダー以外のグループ（現状なし）は閉じた形では子を常に並べる */
  body.nav-collapsed .nav-group:not(.nav-group--folder) .nav-group__head { display: none; }
  body.nav-collapsed .nav-group:not(.nav-group--folder) .nav-group__items { display: block; }
  body.nav-collapsed .nav-group:not(.nav-group--folder) .nav-group__items .nav-item { margin-left: 0; }
}

/* ---------- 権限の表（js/perm-table.js・admin-r1 2026-10-18）＝なし／見る／編集のラジオ ---------- */
.perm-table th[scope="row"] { font-weight: 500; text-align: left; }
.perm-table .perm-desc { color: #888; font-weight: 400; font-size: 11px; }
.perm-table .perm-cell { text-align: center; width: 56px; }
.perm-table .perm-say { font-size: 12px; color: #555; }
.perm-radio, .field label.perm-radio { display: inline-block; padding: 6px 10px; margin: 0; cursor: pointer; font-weight: 400; }
.label-like { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.perm-radio input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.perm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.perm-extra { font-size: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.perm-extra li { margin: 4px 0; }
.member-history { font-size: 12px; margin: 6px 0 0; padding-left: 18px; }
.member-history li { margin: 4px 0; }
.danger-zone { border: 1px solid #e0a89a; border-radius: 6px; padding: 10px 12px; margin-top: 14px; }
.danger-zone h4 { margin: 0 0 6px; font-size: 13px; color: #b4552d; }

/* ---------- 書類の履歴と「提示済みにする」（app/js/doc-history.js・M2b 2026-10-20）＝見積・請求・報告の画面で共用 ---------- */
.dh { margin-top: 14px; }
.dh__title { font-size: 14px; margin: 0 0 8px; }
.dh-present { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 10px; font-size: 13px; }
.dh-present[data-state="draft"], .dh-present[data-state="pending"] { border-color: var(--color-warning); background: #fdf6ea; }
.dh-present__line { margin: 0; }
.dh-present__act { margin-top: 8px; }
.dh-present__reason { width: 100%; max-width: 280px; margin-right: 8px; padding: 6px 8px; font-size: 13px; vertical-align: middle; }
.dh-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef1f3; color: #5c6e7a; }
.dh-tag--draft, .dh-tag--pending { background: #fdf0db; color: #9a6a1f; }
.dh-tag--presented { background: #e6f6f6; color: #2f8c8c; }
.dh-tag--voided { background: #fbe4e0; color: #b4552d; }
.dh-msg { margin: 6px 0 0; font-size: 12px; color: var(--color-text-muted); }
.dh-msg--error { color: #b4552d; }
.dh-empty { font-size: 13px; color: var(--color-text-muted); margin: 4px 0; }
.dh-list { list-style: none; margin: 0; padding: 0; }
.dh-row { border-top: 1px solid var(--color-border); padding: 8px 2px; font-size: 13px; }
.dh-row:first-child { border-top: none; }
.dh-row__title { font-weight: 600; margin-right: 8px; }
.dh-row__meta { color: var(--color-text-muted); font-size: 12px; }
.dh-row__summary { margin: 4px 0 0; overflow-wrap: anywhere; }
.dh-row__note { margin: 2px 0 0; font-size: 12px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.dh-row__acts { margin-top: 6px; }
.dh-row__acts .btn + .btn { margin-left: 6px; }
.dh-row__panel { margin-top: 6px; padding: 8px 10px; background: var(--color-bg); border-radius: var(--radius-sm); }
.dh-diff { margin: 0; padding-left: 18px; }
.dh-diff li { margin: 3px 0; overflow-wrap: anywhere; }
.dh-diff__sub { display: inline-block; margin-top: 2px; font-size: 11px; color: var(--color-text-muted); }
.dh-diff__text, .dh-snap__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.dh-diff__from { color: var(--color-text-muted); text-decoration: line-through; }
.dh-snap__fields { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0; }
.dh-snap__fields dt { color: var(--color-text-muted); }
.dh-snap__fields dd { margin: 0; overflow-wrap: anywhere; }
.dh-snap__lines { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12px; }
.dh-snap__lines th, .dh-snap__lines td { border-bottom: 1px solid var(--color-border); padding: 4px 6px; text-align: left; }
.dh-snap__lines .dh-num { text-align: right; white-space: nowrap; }
.dh-snap__totals, .dh-snap__photos { margin: 4px 0; font-size: 12px; }