/* ============================================================================
   LSH-CORE / Liberty Sync Holdings — BLACK · RED · GOLD
   ---------------------------------------------------------------------------
   持株会社らしい重厚さ。黒を地に、金を主操作、赤を強調(LIVE/重要)に使う。
     gold  … 主操作 (ボタン / リンク / 選択状態) ＝ ブランド
     red   … 強調 (LIVE・重要・危険の合図)
     black … 地
   赤を「意味のある場所」に絞ることで、danger の赤とブランドの赤が衝突しない。

   このファイルは **最後に読み込む前提**。
     1. --lsh-* パレットを定義
     2. 既存の --sll-unified-* / --sll-admin-* / --mw-* / --nx-* … と、
        各ページが素の <style> で定義している汎用トークン (--bg / --text /
        --primary / --sl-* …) を !important で上書き
     3. フォーム・表・モーダル・バッジ・スクロールバー・選択範囲・
        フォーカスリングまで黒地仕様に統一
     4. @media print では白地・黒文字に戻す (帳票 / 明細の印刷用)

   コントラスト (WCAG, 本文 4.5:1 / 大きい文字 3:1)
     text  #f4f2ee on #0b0b0e … 17.2:1
     muted #a8a2a0 on #0b0b0e …  7.8:1   / on #15151b … 7.2:1
     gold  #d4af37 on #0b0b0e …  9.3:1
     red-soft #ff4d5e on #0b0b0e … 6.1:1   (本文の赤は必ず red-soft を使う。
                                            ブランド赤 #d92038 は 3.9:1 なので
                                            塗り(面)専用)
     ink   #0b0b0e on #d4af37 …  9.3:1   (金ボタンの文字は黒)
     #fff  on #d92038         …  5.0:1   (赤ボタンの文字は白)
   ============================================================================ */

:root {
  color-scheme: dark;

  /* ---- ground ---------------------------------------------------------- */
  --lsh-ink: #0b0b0e;          /* 最も暗い地 (body 背景) */
  --lsh-ink-2: #101016;        /* 地のグラデーション 2 段目 */
  --lsh-surface: #15151b;      /* カード面 */
  --lsh-surface-soft: #12121a; /* 一段沈めた面 (サブパネル・溝) */
  --lsh-surface-2: #1d1d25;    /* 一段持ち上げた面 (入力欄・ヘッダ) */
  --lsh-surface-3: #262630;    /* hover / 最前面 */
  --lsh-line: #2b2b36;         /* 罫線 */
  --lsh-line-soft: #22222b;
  --lsh-line-strong: #3a3a48;
  --lsh-overlay: rgba(5, 5, 8, 0.74);   /* モーダル背後の暗幕 */

  /* ---- type ------------------------------------------------------------ */
  --lsh-text: #f4f2ee;         /* 本文 */
  --lsh-muted: #a8a2a0;        /* 副次テキスト (4.5:1 以上) */
  --lsh-faint: #7b7570;        /* 装飾・区切り専用。本文には使わない */

  /* ---- brand ----------------------------------------------------------- */
  --lsh-gold: #d4af37;         /* 主操作・ブランド */
  --lsh-gold-soft: #e8c766;
  --lsh-gold-deep: #a8861f;
  --lsh-red: #d92038;          /* 強調・LIVE・重要 (面で使う) */
  --lsh-red-soft: #ff4d5e;     /* 赤の文字はこちら */

  /* ---- semantic -------------------------------------------------------- */
  --lsh-success: #2ea36f;
  --lsh-warning: #e8873a;      /* 金と紛れないオレンジ */
  --lsh-danger: #ff4d5e;       /* ブランド赤より明るくして区別 */
  --lsh-info: #e8c766;         /* 情報 = やわらかい金 (青は使わない) */

  /* ---- composites ------------------------------------------------------ */
  --lsh-gradient-gold: linear-gradient(135deg, #d4af37, #b8891f);
  --lsh-gradient-ground: linear-gradient(180deg, #0b0b0e 0%, #0b0b0e 55%, #101016 100%);
  --lsh-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
  --lsh-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.4);
  --lsh-ring: 0 0 0 3px rgba(212, 175, 55, 0.42);

  /* ---- tint washes (面の上に薄く敷く色) ---------------------------------- */
  --lsh-gold-wash: rgba(212, 175, 55, 0.14);
  --lsh-red-wash: rgba(217, 32, 56, 0.16);
  --lsh-success-wash: rgba(46, 163, 111, 0.16);
  --lsh-warning-wash: rgba(232, 135, 58, 0.16);
}

/* ============================================================================
   1. 既存トークンの再マッピング
   --------------------------------------------------------------------------
   ページ側の <style> が :root で古い明るい値を再定義しているため、
   ここは !important を付けて確実に勝たせる。
   ============================================================================ */

:root {
  /* --- sll-unified-* (sll-unified-theme.css) ---------------------------- */
  --sll-unified-bg: var(--lsh-ink) !important;
  --sll-unified-bg-2: var(--lsh-ink-2) !important;
  --sll-unified-surface: var(--lsh-surface) !important;
  --sll-unified-surface-strong: var(--lsh-surface-2) !important;
  --sll-unified-surface-soft: var(--lsh-surface-soft) !important;
  --sll-unified-line: var(--lsh-line) !important;
  --sll-unified-line-strong: var(--lsh-line-strong) !important;
  --sll-unified-text: var(--lsh-text) !important;
  --sll-unified-muted: var(--lsh-muted) !important;
  --sll-unified-primary: var(--lsh-gold) !important;
  --sll-unified-primary-strong: var(--lsh-gold-soft) !important;
  --sll-unified-accent: var(--lsh-red) !important;
  --sll-unified-blue: var(--lsh-gold-soft) !important;
  --sll-unified-green: var(--lsh-success) !important;
  --sll-unified-amber: var(--lsh-warning) !important;
  --sll-unified-red: var(--lsh-red-soft) !important;
  --sll-unified-shadow: var(--lsh-shadow) !important;
  --sll-unified-shadow-soft: var(--lsh-shadow-soft) !important;

  /* --- sll-admin-* (sll-admin-theme.css) -------------------------------- */
  --sll-admin-bg: var(--lsh-ink) !important;
  --sll-admin-card: var(--lsh-surface) !important;
  --sll-admin-card-strong: var(--lsh-surface-2) !important;
  --sll-admin-line: var(--lsh-line) !important;
  --sll-admin-text: var(--lsh-text) !important;
  --sll-admin-muted: var(--lsh-muted) !important;
  --sll-admin-primary: var(--lsh-gold) !important;
  --sll-admin-primary-strong: var(--lsh-gold-soft) !important;
  --sll-admin-accent: var(--lsh-red) !important;
  --sll-admin-blue: var(--lsh-gold-soft) !important;
  --sll-admin-info: var(--lsh-info) !important;
  --sll-admin-success: var(--lsh-success) !important;
  --sll-admin-warning: var(--lsh-warning) !important;
  --sll-admin-danger: var(--lsh-danger) !important;
  --sll-admin-shadow: var(--lsh-shadow) !important;
  --sll-admin-shadow-soft: var(--lsh-shadow-soft) !important;

  /* --- My Work (sll-my-work.css) ---------------------------------------- */
  --mw-bg: var(--lsh-ink) !important;
  --mw-surface: var(--lsh-surface) !important;
  --mw-surface-strong: var(--lsh-surface-2) !important;
  --mw-text: var(--lsh-text) !important;
  --mw-muted: var(--lsh-muted) !important;
  --mw-line: var(--lsh-line) !important;
  --mw-primary: var(--lsh-gold) !important;
  --mw-primary-dark: var(--lsh-gold-deep) !important;
  --mw-blue: var(--lsh-gold-soft) !important;
  --mw-green: var(--lsh-success) !important;
  --mw-amber: var(--lsh-warning) !important;
  --mw-red: var(--lsh-danger) !important;
  --mw-shadow: var(--lsh-shadow) !important;
  --mw-shadow-soft: var(--lsh-shadow-soft) !important;

  /* --- my-profile-edit -------------------------------------------------- */
  --mpe-surface: var(--lsh-surface) !important;
  --mpe-surface-strong: var(--lsh-surface-2) !important;
  --mpe-line: var(--lsh-line) !important;
  --mpe-text: var(--lsh-text) !important;
  --mpe-muted: var(--lsh-muted) !important;
  --mpe-primary: var(--lsh-gold) !important;
  --mpe-danger: var(--lsh-danger) !important;
  --mpe-shadow: var(--lsh-shadow) !important;
  --mpe-shadow-soft: var(--lsh-shadow-soft) !important;

  /* --- AI office (sll-ai-office.css) ------------------------------------ */
  --aio-primary: var(--lsh-gold) !important;
  --aio-accent: var(--lsh-red) !important;
  --aio-ink: var(--lsh-text) !important;
  --aio-muted: var(--lsh-muted) !important;
  --aio-line: var(--lsh-line) !important;
  --aio-soft: var(--lsh-surface-2) !important;
  --aio-ok: var(--lsh-success) !important;
  --aio-warn: var(--lsh-warning) !important;
  --aio-danger: var(--lsh-danger) !important;

  /* --- dashboard-next (generic names) ----------------------------------- */
  --violet: var(--lsh-gold) !important;
  --nav: var(--lsh-ink) !important;
  --panel: var(--lsh-surface) !important;

  /* --- ページ埋め込み <style> が使う汎用トークン ------------------------- */
  --bg: var(--lsh-ink) !important;
  --bg-base: var(--lsh-ink) !important;
  --bg-soft: var(--lsh-surface-soft) !important;
  --bg-cool: var(--lsh-surface-soft) !important;
  --ink: var(--lsh-text) !important;
  --text: var(--lsh-text) !important;
  --text-main: var(--lsh-text) !important;
  --text-sub: var(--lsh-muted) !important;
  --text-soft: var(--lsh-muted) !important;
  --muted: var(--lsh-muted) !important;
  --line: var(--lsh-line) !important;
  --line-strong: var(--lsh-line-strong) !important;
  --surface: var(--lsh-surface) !important;
  --surface-soft: var(--lsh-surface-soft) !important;
  --surface-strong: var(--lsh-surface-2) !important;
  --card: var(--lsh-surface) !important;
  --primary: var(--lsh-gold) !important;
  --primary-soft: var(--lsh-gold-wash) !important;
  --accent: var(--lsh-red) !important;
  --accent-ink: var(--lsh-text) !important;
  --accent-gold: var(--lsh-gold) !important;
  --accent-rose: var(--lsh-red) !important;
  --accent-sky: var(--lsh-gold-soft) !important;
  --accent-mint: var(--lsh-success) !important;
  --accent-indigo: var(--lsh-gold-soft) !important;
  --danger: var(--lsh-danger) !important;
  --success: var(--lsh-success) !important;
  --ok: var(--lsh-success) !important;
  --warning: var(--lsh-warning) !important;
  --c-new: var(--lsh-gold) !important;
  --shadow: var(--lsh-shadow) !important;
  --shadow-soft: var(--lsh-shadow-soft) !important;
  --shadow-card: var(--lsh-shadow-soft) !important;

  /* --- 役割色 (--role-*) ------------------------------------------------- */
  --role-accent: var(--lsh-gold) !important;
  --role-soft: var(--lsh-gold-wash) !important;
  --role-glow: rgba(212, 175, 55, 0.28) !important;
  --role-contrast: var(--lsh-ink) !important;

  /* --- --sl-* (37ページが使うページ内トークン) --------------------------- */
  --sl-bg: var(--lsh-ink) !important;
  --sl-surface: var(--lsh-surface) !important;
  --sl-card: var(--lsh-surface) !important;
  --sl-chip-bg: var(--lsh-surface-2) !important;
  --sl-border: var(--lsh-line) !important;
  --sl-text: var(--lsh-text) !important;
  --sl-muted: var(--lsh-muted) !important;
  --sl-primary: var(--lsh-gold) !important;
  --sl-primary-soft: var(--lsh-gold-wash) !important;
  --sl-accent: var(--lsh-red) !important;
  --sl-success: var(--lsh-success) !important;
  --sl-warn: var(--lsh-warning) !important;
  --sl-sky: var(--lsh-gold-soft) !important;
  --sl-shadow: var(--lsh-shadow) !important;
  /* 明るいピンク→水色の装飾グラデーションは、上に載る文字が明色になるので
     黒側へ反転させる (でないと明色文字が読めなくなる) */
  --sl-gradient-from: #14141b !important;
  --sl-gradient-to: #0b0b0e !important;

  /* --- server / srv-* --------------------------------------------------- */
  --srv-bg: var(--lsh-ink) !important;
  --srv-surface: var(--lsh-surface) !important;
  --srv-line: var(--lsh-line) !important;
  --srv-text: var(--lsh-text) !important;
  --srv-muted: var(--lsh-muted) !important;
  --srv-primary: var(--lsh-gold) !important;
  --srv-primary-strong: var(--lsh-gold-soft) !important;
  --srv-accent: var(--lsh-red) !important;
  --srv-ok: var(--lsh-success) !important;
  --srv-warn: var(--lsh-warning) !important;
  --srv-danger: var(--lsh-danger) !important;
  --srv-shadow: var(--lsh-shadow) !important;

  /* --- next UI (--nx-*) -------------------------------------------------- */
  --nx-bg: var(--lsh-ink) !important;
  --nx-surface: var(--lsh-surface) !important;
  --nx-ink: var(--lsh-text) !important;
  --nx-muted: var(--lsh-muted) !important;
  --nx-line: var(--lsh-line) !important;
  --nx-nav: var(--lsh-ink) !important;
  --nx-nav2: var(--lsh-surface-2) !important;
  --nx-accent: var(--lsh-gold) !important;
  --nx-shadow: var(--lsh-shadow) !important;
}

/* ============================================================================
   2. 地
   ============================================================================ */

html {
  color-scheme: dark;
  background: var(--lsh-ink) !important;
}

body {
  background: var(--lsh-gradient-ground) !important;
  background-attachment: fixed !important;
  color: var(--lsh-text) !important;
}

/* 明るい前提で書かれたページ骨格が白のまま残らないようにする。
   インライン style で背景を指定している要素 (アバター等) は除外。 */
body > main,
.page:not([style*="background"]),
.shell:not([style*="background"]),
.app:not([style*="background"]),
.content:not([style*="background"]),
.container:not([style*="background"]),
.main-content:not([style*="background"]),
.workspace:not([style*="background"]),
.admin-shell:not([style*="background"]),
.dashboard-shell:not([style*="background"]),
.os-page:not([style*="background"]),
.os-layout:not([style*="background"]) {
  background-color: transparent !important;
  color: var(--lsh-text);
}

/* ============================================================================
   3. 面 (カード / パネル)
   ============================================================================ */

.card:not([style*="background"]),
.panel:not([style*="background"]),
.box:not([style*="background"]),
.tile:not([style*="background"]),
.sect:not([style*="background"]),
.section-card:not([style*="background"]),
.menu-card:not([style*="background"]),
.module-card:not([style*="background"]),
.widget:not([style*="background"]),
.stat:not([style*="background"]),
.kpi:not([style*="background"]),
.note:not([style*="background"]),
.empty:not([style*="background"]),
.empty-state:not([style*="background"]),
.table-panel:not([style*="background"]),
.os-panel:not([style*="background"]),
.os-card:not([style*="background"]),
.os-module-card:not([style*="background"]),
.os-stat:not([style*="background"]),
.os-alert-card:not([style*="background"]),
.os-list-row:not([style*="background"]),
.os-kanban-col:not([style*="background"]),
.sl-card:not([style*="background"]),
.mw-card:not([style*="background"]),
.nx-card:not([style*="background"]),
.aio-card:not([style*="background"]) {
  background-color: var(--lsh-surface) !important;
  border-color: var(--lsh-line);
  color: var(--lsh-text);
}

.os-header:not([style*="background"]),
.top-bar:not([style*="background"]),
.topbar:not([style*="background"]),
.page-header:not([style*="background"]),
.toolbar:not([style*="background"]) {
  background-color: var(--lsh-surface-2) !important;
  border-color: var(--lsh-line);
  color: var(--lsh-text);
}

hr,
.divider,
.sep {
  border-color: var(--lsh-line) !important;
  background-color: var(--lsh-line);
}

/* ============================================================================
   4. リンク
   ============================================================================ */

a,
a:visited {
  color: var(--lsh-gold);
}

a:hover,
a:focus-visible {
  color: var(--lsh-gold-soft);
}

/* 面の中でリンク色を明示していないボタン風リンクは継承させる */
a.btn,
a.os-btn,
a.card,
a.menu-card,
a.tile {
  color: inherit;
}

/* ============================================================================
   5. ボタン
   金 = 主操作 (文字は黒) / 赤 = 危険・LIVE (文字は白) / それ以外は黒地
   ============================================================================ */

button,
.btn,
.os-btn,
.ai-btn,
.side-btn,
.action-btn,
.link-button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  background-color: var(--lsh-surface-2);
  border: 1px solid var(--lsh-line);
  color: var(--lsh-text);
}

button:hover:not(:disabled),
.btn:hover,
.os-btn:hover,
.ai-btn:hover,
.side-btn:hover,
.action-btn:hover {
  border-color: rgba(212, 175, 55, 0.55);
  color: var(--lsh-text);
}

.btn.primary,
.btn-primary,
.os-btn.primary,
.ai-btn.primary,
.side-btn.primary,
button.primary,
.primary.btn,
.mw-button-primary,
input[type="submit"] {
  background: var(--lsh-gradient-gold) !important;
  border-color: var(--lsh-gold-deep) !important;
  color: var(--lsh-ink) !important;
}

.btn.primary:hover,
.btn-primary:hover,
.os-btn.primary:hover,
button.primary:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, #e8c766, #c39a26) !important;
  color: var(--lsh-ink) !important;
}

.btn.danger,
.btn-danger,
.os-btn.danger,
button.danger,
.danger.btn {
  background: var(--lsh-red) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.btn.secondary,
.btn.ghost,
.os-btn.ghost,
button.secondary,
button.ghost {
  background-color: transparent !important;
  border-color: var(--lsh-line) !important;
  color: var(--lsh-gold-soft) !important;
}

button:disabled,
.btn:disabled,
.btn.is-disabled,
[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================================
   6. フォーム部品
   ============================================================================ */

input,
select,
textarea {
  background-color: var(--lsh-surface-2) !important;
  border: 1px solid var(--lsh-line) !important;
  color: var(--lsh-text) !important;
  caret-color: var(--lsh-gold);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--lsh-gold);
}

input[type="checkbox"],
input[type="radio"] {
  background-color: transparent !important;
  border: 0 !important;
}

input[type="color"] {
  padding: 2px;
}

input[type="file"] {
  color: var(--lsh-muted) !important;
}

::placeholder {
  color: var(--lsh-muted) !important;
  opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
  background-color: var(--lsh-surface-soft) !important;
  color: var(--lsh-muted) !important;
}

/* Chrome の自動入力が白背景で焼き付くのを防ぐ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--lsh-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--lsh-surface-2) inset !important;
  box-shadow: 0 0 0 1000px var(--lsh-surface-2) inset !important;
  caret-color: var(--lsh-text) !important;
}

optgroup,
option {
  background-color: var(--lsh-surface-2);
  color: var(--lsh-text);
}

label,
.form-label,
legend {
  color: var(--lsh-muted);
}

fieldset {
  border-color: var(--lsh-line);
}

/* 日付ピッカー等のブラウザ既定UIを暗色に */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
  color-scheme: dark;
}

/* ---- フォーカスリング (金) ------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--lsh-gold) !important;
  outline-offset: 2px;
}

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--lsh-gold) !important;
  outline: none !important;
  box-shadow: var(--lsh-ring) !important;
}

/* ---- 選択範囲 ------------------------------------------------------------- */
::selection {
  background: var(--lsh-gold);
  color: var(--lsh-ink);
}

::-moz-selection {
  background: var(--lsh-gold);
  color: var(--lsh-ink);
}

/* ============================================================================
   7. 表
   ============================================================================ */

table {
  background-color: var(--lsh-surface) !important;
  border-color: var(--lsh-line) !important;
  color: var(--lsh-text);
}

thead,
thead tr,
th {
  background-color: var(--lsh-surface-2) !important;
  color: var(--lsh-muted) !important;
  border-color: var(--lsh-line) !important;
}

td {
  border-color: var(--lsh-line) !important;
  color: inherit;
}

tbody tr:nth-child(even) > td {
  background-color: rgba(255, 255, 255, 0.018);
}

tbody tr:hover > td {
  background-color: rgba(212, 175, 55, 0.07);
}

caption {
  color: var(--lsh-muted);
}

/* ============================================================================
   8. モーダル / ドロワー / ポップオーバー
   ============================================================================ */

dialog,
.modal,
.modal-content,
.modal-card,
.modal-body,
.dialog,
.sheet,
.drawer,
.os-drawer,
.popover,
.dropdown,
.menu-panel,
.sll-dialog,
[role="dialog"] {
  background-color: var(--lsh-surface) !important;
  border-color: var(--lsh-line) !important;
  color: var(--lsh-text) !important;
  box-shadow: var(--lsh-shadow);
}

dialog::backdrop {
  background: var(--lsh-overlay);
}

.modal-backdrop,
.backdrop,
.overlay,
.os-drawer-backdrop,
.dialog-backdrop,
.sll-dialog-backdrop {
  background: var(--lsh-overlay) !important;
}

/* ============================================================================
   9. バッジ / チップ / ステータス
   ============================================================================ */

.badge,
.badge-pill,
.pill,
.chip,
.tag,
.os-chip,
.label-chip {
  background-color: var(--lsh-surface-2);
  border-color: var(--lsh-line);
  color: var(--lsh-text);
}

.badge.primary,
.pill.primary,
.chip.primary,
.os-chip.primary,
.badge.is-active,
.chip.is-active,
.chip.on {
  background: var(--lsh-gold-wash) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  color: var(--lsh-gold-soft) !important;
}

.badge.danger,
.pill.danger,
.chip.danger,
.badge.is-live,
.badge.live,
.chip.live,
.chip.is-live,
.pill.live,
.pill.is-live,
.stat.live,
.val.live,
.live-badge,
.live-pill {
  background: var(--lsh-red-wash) !important;
  border-color: rgba(217, 32, 56, 0.5) !important;
  color: var(--lsh-red-soft) !important;
}

.badge.success,
.pill.success,
.chip.success,
.badge.ok,
.status-ok {
  background: var(--lsh-success-wash) !important;
  border-color: rgba(46, 163, 111, 0.45) !important;
  color: var(--lsh-success) !important;
}

.badge.warning,
.pill.warning,
.chip.warning,
.badge.warn,
.status-warn {
  background: var(--lsh-warning-wash) !important;
  border-color: rgba(232, 135, 58, 0.45) !important;
  color: var(--lsh-warning) !important;
}

/* 文字だけの意味色 (黒地で 4.5:1 以上を満たす明るい側を使う) */
.text-danger,
.is-danger,
.error,
.err {
  color: var(--lsh-danger) !important;
}

.text-success,
.is-success,
.ok {
  color: var(--lsh-success) !important;
}

.text-warning,
.is-warning,
.warn {
  color: var(--lsh-warning) !important;
}

.muted,
.small.muted,
.hint,
.meta,
.sub,
small.muted {
  color: var(--lsh-muted) !important;
}

/* ============================================================================
   10. スクロールバー
   ============================================================================ */

* {
  scrollbar-color: var(--lsh-line-strong) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--lsh-ink);
}

::-webkit-scrollbar-thumb {
  background: var(--lsh-line-strong);
  border: 2px solid var(--lsh-ink);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--lsh-gold-deep);
}

::-webkit-scrollbar-corner {
  background: var(--lsh-ink);
}

/* ============================================================================
   11. その他
   ============================================================================ */

code,
kbd,
pre,
samp {
  background-color: var(--lsh-surface-soft);
  border-color: var(--lsh-line);
  color: var(--lsh-gold-soft);
}

blockquote {
  border-left-color: var(--lsh-gold);
  color: var(--lsh-muted);
}

mark,
.os-mark {
  background: var(--lsh-gold-wash);
  color: var(--lsh-gold-soft);
}

progress::-webkit-progress-bar {
  background-color: var(--lsh-surface-soft);
}

progress::-webkit-progress-value {
  background-color: var(--lsh-gold);
}

meter {
  background: var(--lsh-surface-soft);
}

iframe {
  color-scheme: dark;
  border-color: var(--lsh-line);
}

::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
}

/* 画像やロゴを黒地に載せたときの縁取り緩和 */
img.on-dark,
.logo img {
  background: transparent;
}

/* ============================================================================
   12. 実行時に JS が注入するクローム (ヘッダー検索 / 在席パネル / メッセージ
       ドック / 財務リアルタイム / SaaS カード など)
   --------------------------------------------------------------------------
   sll-core-menu.js · sll-global-logo.js · sll-message-dock.js ·
   sll-enterprise-os.js は <style> を実行時に document へ差し込むため、
   この CSS より **後ろ** に来る。同じ詳細度では勝てないので
   :not(#lsh-never) で ID 相当の詳細度を持たせる
   (#lsh-never は存在しない id なので、対象要素は変わらない)。
   ※ 画面専用。紙面は下の @media print が単独で担当する。
   本来は各 JS 側の色定義を直すのが筋（CSS 担当範囲外のため暫定対応）。
   ============================================================================ */

@media screen {
  #sllHeaderSearch .sll-hs-box:not(#lsh-never),
  #sllHeaderSearchResults:not(#lsh-never),
  #sllPresencePanel .pp-head:not(#lsh-never),
  #sllPresencePanel .pp-sec.clk:not(#lsh-never),
  #sllMsgDrawer:not(#lsh-never),
  #sllMsgDrawer .hd:not(#lsh-never),
  #sllMsgDrawer .hd button:not(#lsh-never),
  .sll-core-global-menu .sll-core-menu-search:not(#lsh-never),
  .sll-global-notice:not(#lsh-never),
  .sll-global-dock-empty:not(#lsh-never),
  .sll-next-ui-dialog:not(#lsh-never),
  .sll-next-ui-dialog-head > button:not(#lsh-never),
  .sll-next-ui-dialog-actions button:not(#lsh-never),
  .sll-next-ui-control-btn:not(#lsh-never),
  .sll-ui-mobile-switch:not(#lsh-never),
  .sll-finrt-btn:not(#lsh-never),
  .sll-finrt-syncitem:not(#lsh-never),
  .sll-finrt-alert:not(#lsh-never),
  .dash-saas-card:not(#lsh-never),
  .dash-saas-alert:not(#lsh-never),
  .dash-gcal-event:not(#lsh-never),
  .dash-gcal-connected:not(#lsh-never),
  .dash-gcal-source:not(#lsh-never) {
    background: var(--lsh-surface) !important;
    border-color: var(--lsh-line) !important;
    color: var(--lsh-text) !important;
  }

  #sllHeaderSearchResults a:hover:not(#lsh-never),
  #sllPresencePanel .pp-bdg:not(#lsh-never) {
    background: var(--lsh-surface-2) !important;
    color: var(--lsh-text) !important;
  }

  /* 主操作は金 + 黒文字 */
  #sllMsgToggle:not(#lsh-never),
  .sll-finrt-btn.primary:not(#lsh-never),
  .sll-next-ui-dialog-actions [data-sll-ui-save]:not(#lsh-never),
  .sll-core-menu-link.is-current .sll-core-menu-icon:not(#lsh-never),
  .sll-core-menu-link.is-current .sll-core-menu-demo:not(#lsh-never) {
    background: var(--lsh-gradient-gold) !important;
    border-color: var(--lsh-gold-deep) !important;
    color: var(--lsh-ink) !important;
  }

  #sllMsgToggle .b:not(#lsh-never) {
    background: var(--lsh-red) !important;
    color: #ffffff !important;
  }

  /* 意味色のバッジ / アラート */
  .sll-finrt-badge:not(#lsh-never),
  #sllPresencePanel .pp-bdg.liver:not(#lsh-never) {
    background: var(--lsh-surface-2) !important;
    border-color: var(--lsh-line) !important;
    color: var(--lsh-text) !important;
  }

  .sll-finrt-badge.ok:not(#lsh-never),
  .dash-saas-card.is-ok:not(#lsh-never) {
    background: var(--lsh-success-wash) !important;
    border-color: rgba(46, 163, 111, 0.45) !important;
    color: var(--lsh-success) !important;
  }

  .sll-finrt-badge.err:not(#lsh-never),
  .sll-finrt-alert.error:not(#lsh-never),
  .dash-saas-card.is-bad:not(#lsh-never),
  .sll-global-level-critical:not(#lsh-never) {
    background: var(--lsh-red-wash) !important;
    border-color: rgba(217, 32, 56, 0.5) !important;
    color: var(--lsh-red-soft) !important;
  }

  .dash-saas-card.is-warn:not(#lsh-never),
  .dash-saas-alert.is-warn:not(#lsh-never),
  .sll-global-level-high:not(#lsh-never) {
    background: var(--lsh-warning-wash) !important;
    border-color: rgba(232, 135, 58, 0.45) !important;
    color: var(--lsh-warning) !important;
  }

  .sll-finrt-alert.info:not(#lsh-never),
  .dash-gcal-source.core:not(#lsh-never) {
    background: var(--lsh-gold-wash) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
    color: var(--lsh-gold-soft) !important;
  }

  .sll-finrt-badge.off:not(#lsh-never),
  #sllPresencePanel .pp-row .d.off:not(#lsh-never) {
    background: var(--lsh-surface-2) !important;
    color: var(--lsh-muted) !important;
  }

  .sll-finrt-bar.expense:not(#lsh-never) {
    background: var(--lsh-red) !important;
  }

  #sllMenuFab .sll-menu-fab-icon span:not(#lsh-never) {
    background: var(--lsh-ink) !important;
  }

  .sll-global-notice a:not(#lsh-never) {
    color: var(--lsh-gold) !important;
  }
}

/* ============================================================================
   13. 印刷 (@media print)
   --------------------------------------------------------------------------
   帳票・明細・給与明細・請求書を印刷するため、紙の上では白地・黒文字に戻す。
   --lsh-* を印刷用に差し替えるので、上の全マッピングが自動的に紙向きになる。
   ============================================================================ */

@media print {
  :root {
    color-scheme: light;

    --lsh-ink: #ffffff;
    --lsh-ink-2: #ffffff;
    --lsh-surface: #ffffff;
    --lsh-surface-soft: #ffffff;
    --lsh-surface-2: #f4f4f4;
    --lsh-surface-3: #eeeeee;
    --lsh-line: #bdbdbd;
    --lsh-line-soft: #d8d8d8;
    --lsh-line-strong: #999999;
    --lsh-overlay: transparent;

    --lsh-text: #000000;
    --lsh-muted: #3f3f3f;
    --lsh-faint: #5a5a5a;

    --lsh-gold: #6f5a10;
    --lsh-gold-soft: #7d6614;
    --lsh-gold-deep: #4f400b;
    --lsh-red: #a8001a;
    --lsh-red-soft: #a8001a;

    --lsh-success: #10593a;
    --lsh-warning: #7a4210;
    --lsh-danger: #a8001a;
    --lsh-info: #6f5a10;

    --lsh-gradient-gold: none;
    --lsh-gradient-ground: none;
    --lsh-shadow: none;
    --lsh-shadow-soft: none;
    --lsh-ring: none;

    --lsh-gold-wash: transparent;
    --lsh-red-wash: transparent;
    --lsh-success-wash: transparent;
    --lsh-warning-wash: transparent;
  }

  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* 紙の上では地色・影・発光を全部落とす。
     画面用テーマは .os-header などをクラス + !important で塗っているので、
     :not(#lsh-never) で ID 相当の詳細度を持たせて確実に勝たせる
     (#lsh-never という id は存在しないので、対象は「全要素」のまま)。
     インライン style で背景を持つ要素 (アバター等) と img / svg は除外。 */
  body *:not(#lsh-never):where(:not(img):not(svg):not(svg *):not([style*="background"])),
  body *:not(#lsh-never):where(:not(img):not(svg):not(svg *):not([style*="background"]))::before,
  body *:not(#lsh-never):where(:not(img):not(svg):not(svg *):not([style*="background"]))::after {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #111111 !important;
    border-color: #bdbdbd !important;
    filter: none !important;
  }

  body a:not(#lsh-never),
  body a:visited:not(#lsh-never) {
    color: #000000 !important;
    text-decoration: underline;
  }

  body table:not(#lsh-never),
  body th:not(#lsh-never),
  body td:not(#lsh-never) {
    border-color: #8c8c8c !important;
  }

  body thead:not(#lsh-never),
  body thead tr:not(#lsh-never),
  body th:not(#lsh-never) {
    background-color: #eeeeee !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body tbody tr:nth-child(even) > td:not(#lsh-never),
  body tbody tr:hover > td:not(#lsh-never) {
    background-color: transparent !important;
  }

  ::placeholder {
    color: #6a6a6a !important;
  }

  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  progress {
    accent-color: auto;
  }

  body input:not(#lsh-never),
  body select:not(#lsh-never),
  body textarea:not(#lsh-never) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #8c8c8c !important;
  }

  /* 画面では黒地に金なので文字色に --lsh-ink (紙では白) を使っている箇所がある。
     紙の上では必ず黒に戻す。 */
  body .btn:not(#lsh-never),
  body .btn.primary:not(#lsh-never),
  body .btn-primary:not(#lsh-never),
  body button:not(#lsh-never),
  body .os-btn:not(#lsh-never),
  body .badge:not(#lsh-never),
  body .pill:not(#lsh-never),
  body .chip:not(#lsh-never) {
    color: #111111 !important;
    background: transparent !important;
    border-color: #8c8c8c !important;
  }

  /* 画面専用のフローティング・クロームは紙に出さない */
  .no-print,
  [data-no-print],
  #sllMsgDrawer,
  #sllMsgToggle,
  #sllMenuFab,
  #sllHeaderSearchResults,
  #sllPresencePanel,
  .sll-message-dock,
  .sll-notification-dock {
    display: none !important;
  }

  /* ページ途中で表や明細が切れないように */
  tr,
  .card,
  .panel,
  .os-panel,
  .sheet {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ============================================================================
   14. 強制ライト指定への保険
   ページ側が color-scheme: light を残している場合の巻き戻し
   ============================================================================ */

html.sll-next-ui,
html[data-theme],
body[data-theme] {
  color-scheme: dark;
}

@media print {
  html.sll-next-ui,
  html[data-theme],
  body[data-theme] {
    color-scheme: light;
  }
}

/* ============================================================================
   15. 実描画検証で見つかった残存ライト面の後追い修正 (2026-07-29)
   --------------------------------------------------------------------------
   headless Chrome で 12 画面をレンダリングし WCAG コントラスト比を実測した
   結果、JS が実行時に注入する <style> の中に白地・紫文字が残っていた。
   注入 <style> はこの CSS より後ろに来るうえ !important 付きの宣言もあるため、
   :not(#lsh-never) で詳細度を 1 段上げたうえで !important を付ける。
   （#lsh-never という id は存在しないので、対象要素は一切変わらない）
   色以外（レイアウト・表示/非表示・挙動）には触れない。
   ============================================================================ */

@media screen {
  /* --- グローバルメニュー: カテゴリ面が白のままだった（最重要） ---------- */
  .sll-core-menu-category:not(#lsh-never) {
    background: var(--lsh-surface) !important;
    border-color: var(--lsh-line) !important;
    color: var(--lsh-text) !important;
  }

  .sll-core-menu-category[open]:not(#lsh-never) {
    background: var(--lsh-surface-2) !important;
  }

  .sll-core-menu-category-summary:not(#lsh-never),
  .sll-core-menu-category-title:not(#lsh-never) {
    color: var(--lsh-text) !important;
  }

  .sll-core-menu-category-summary:hover:not(#lsh-never) {
    background: var(--lsh-surface-3) !important;
  }

  /* カテゴリ見出し: 金文字が金地に乗って読めなくなっていた */
  .sll-core-menu-section-title:not(#lsh-never) {
    background: var(--lsh-gold-wash) !important;
    color: var(--lsh-gold-soft) !important;
  }

  /* 件数バッジ: 白地に金 = 1.93:1 だった */
  .sll-core-menu-count:not(#lsh-never) {
    background: var(--lsh-surface-3) !important;
    border-color: var(--lsh-line-strong) !important;
    color: var(--lsh-gold-soft) !important;
  }

  /* DEMO バッジ: 紫ピンク 2.93:1 だった */
  .sll-core-menu-demo:not(#lsh-never) {
    background: var(--lsh-red-wash) !important;
    color: var(--lsh-red-soft) !important;
  }

  .sll-core-menu-icon:not(#lsh-never) {
    background: var(--lsh-gold-wash) !important;
    color: var(--lsh-gold-soft) !important;
  }

  /* メニュー内検索欄: 背景 #fff に文字 #f4f2ee = 実質不可視だった */
  .sll-core-menu-search-input:not(#lsh-never) {
    background: var(--lsh-surface-2) !important;
    border-color: var(--lsh-line) !important;
    color: var(--lsh-text) !important;
    box-shadow: none !important;
  }

  .sll-core-menu-search-input:not(#lsh-never)::placeholder {
    color: var(--lsh-faint) !important;
  }

  .sll-core-menu-search-input:focus:not(#lsh-never) {
    border-color: var(--lsh-gold) !important;
    outline-color: rgba(212, 175, 55, 0.35) !important;
  }

  .sll-core-menu-search-icon:not(#lsh-never),
  .sll-core-menu-search-empty:not(#lsh-never) {
    color: var(--lsh-muted) !important;
  }

  /* --- ヘッダー右のクローム ------------------------------------------- */
  #sllRoleScope:not(#lsh-never) {
    background: var(--lsh-gold-wash) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
    color: var(--lsh-gold-soft) !important;
  }

  #sllHeaderSearch input:not(#lsh-never) {
    color: var(--lsh-text) !important;
  }

  #sllHeaderSearch input:not(#lsh-never)::placeholder {
    color: var(--lsh-faint) !important;
  }

  #sllHeaderSearchResults a:not(#lsh-never) {
    color: var(--lsh-text) !important;
  }

  #sllHeaderSearchResults a:hover:not(#lsh-never) {
    background: var(--lsh-surface-3) !important;
  }

  #sllHeaderSearchResults a .c:not(#lsh-never),
  #sllHeaderSearchResults .sll-hs-none:not(#lsh-never) {
    color: var(--lsh-muted) !important;
  }

  #sllBackTop:not(#lsh-never) {
    background: var(--lsh-surface-2) !important;
    border-color: var(--lsh-line-strong) !important;
    color: var(--lsh-gold-soft) !important;
  }

  #sllBottomNav:not(#lsh-never) {
    background: var(--lsh-surface) !important;
    border-top-color: var(--lsh-line) !important;
  }

  #sllPresencePanel:not(#lsh-never) {
    background: var(--lsh-surface) !important;
    color: var(--lsh-text) !important;
  }

  /* --- メッセージドック (sll-message-dock.js) --------------------------- */
  #sllMsgDrawer .hd .t:not(#lsh-never) {
    color: var(--lsh-text) !important;
  }

  #sllMsgDrawer iframe:not(#lsh-never),
  #sllMsgFrame:not(#lsh-never) {
    background: var(--lsh-ink) !important;
  }

  /* --- 財務リアルタイム パネル (sll-core-menu.js) ----------------------- */
  .sll-finrt-box:not(#lsh-never) {
    background: var(--lsh-surface) !important;
    border-color: var(--lsh-line) !important;
    color: var(--lsh-text) !important;
  }

  .sll-finrt-box h3:not(#lsh-never) {
    color: var(--lsh-text) !important;
  }

  /* --- ダッシュボードの SaaS カード (sll-enterprise-os.js) -------------- */
  .dash-saas-value:not(#lsh-never) {
    color: var(--lsh-text) !important;
  }

  .dash-saas-label:not(#lsh-never),
  .dash-saas-note:not(#lsh-never) {
    color: var(--lsh-muted) !important;
  }

  .dash-saas-card.is-bad .dash-saas-value:not(#lsh-never) {
    color: var(--lsh-red-soft) !important;
  }

  .dash-saas-card.is-warn .dash-saas-value:not(#lsh-never) {
    color: var(--lsh-warning) !important;
  }

  /* --- 明るい塗りのボタン/バッジに白文字が残っていた箇所 ---------------- */
  /* 金・赤・緑の塗りは明度が高いので、上に載せる文字は黒でないと読めない */
  .seg button.is-on:not(#lsh-never),
  .taxseg button.is-on:not(#lsh-never) {
    color: var(--lsh-ink) !important;
  }

  /* --- JS が style 属性で直に置く淡色の行背景（帳簿の合計行など） -------- */
  [style*="background:#faf8ff"]:not(#lsh-never),
  [style*="background: #faf8ff"]:not(#lsh-never),
  [style*="background:#f7f5ff"]:not(#lsh-never),
  [style*="background:#f6f4ff"]:not(#lsh-never),
  [style*="background:#f9f8ff"]:not(#lsh-never),
  [style*="background:#fff"]:not(#lsh-never) {
    background: var(--lsh-surface-2) !important;
    color: var(--lsh-text) !important;
  }
}

@media screen {
  /* 実測でわずかに 4.5:1 を割っていた副次テキスト（灰紫の残り） */
  .dash-saas-move i:not(#lsh-never),
  .dash-gcal-event > strong:not(#lsh-never),
  .dash-gcal-event small:not(#lsh-never),
  .dash-gcal-event i:not(#lsh-never),
  .sll-finrt-empty:not(#lsh-never),
  .sll-finrt-box .muted:not(#lsh-never) {
    color: var(--lsh-muted) !important;
  }
}