/*
 * Salesforce Lightning 風。
 * 上2段(白い帯にブランド・検索・ログイン中の人、その下にアプリのタブ)。上部に淡い青の帯を敷き、白い枠のカードを重ねる。
 * カルテの見出し(名前・コード・電話・住所・担当)を白い枠で囲み、項目を横に並べる
 */
[data-theme="lightning"] {
  --font-body: "Salesforce Sans", "Segoe UI", "Yu Gothic UI", "Meiryo", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --color-bg: #eef1f6;
  --color-surface: #ffffff;
  --color-field-bg: #ffffff;
  --color-border: #e5e5e5;
  --color-border-strong: #c9c9c9;
  --color-card-border: #c9c9c9;
  --color-divider: #e5e5e5;
  --color-text: #181818;
  --color-muted: #444444;
  --color-link: #0b5cab;
  --color-focus: #0176d3;
  --color-primary: #0176d3;
  --color-primary-hover: #014486;
  --color-on-primary: #ffffff;
  --color-button-text: #0176d3;
  --color-button-bg: #ffffff;
  --color-button-border: #c9c9c9;
  --color-button-hover-bg: #f3f3f3;
  --color-header: #ffffff;
  --color-on-header: #181818;
  --color-header-field-bg: #ffffff;
  --color-header-field-border: #c9c9c9;
  --color-header-button-text: #0176d3;
  --color-header-button-bg: #ffffff;
  --color-header-button-border: #c9c9c9;
  --color-nav-bg: #ffffff;
  --color-nav-text: #181818;
  --color-nav-hover-bg: #f3f3f3;
  --color-nav-active-bg: #f3f3f3;
  --color-nav-active-text: #181818;
  --color-tab-text: #181818;
  --color-tab-active-text: #181818;
  --color-table-bg: #ffffff;
  --color-table-head-bg: #f3f3f3;
  --color-table-head-text: #444444;
  --color-info-bg: #ffffff;
  --color-info-fg: #0176d3;
  --color-success-bg: #2e844a;
  --color-success-fg: #ffffff;
  --color-warning-bg: #fef1cd;
  --color-warning-fg: #8c4b02;
  --color-danger-bg: #fef1ee;
  --color-danger-fg: #ba0517;
  --color-neutral-bg: #f3f3f3;
  --color-neutral-fg: #181818;
  --color-late-bg: #fff1ea;
  --color-late-fg: #a96404;
  --tag-border-color: currentColor;
  --radius: 4px;
  --radius-card: 4px;
  --radius-button: 4px;
  --radius-tag: 15rem;
  --shadow-card: 0 2px 2px rgba(0, 0, 0, 0.1);
  --tab-underline: 3px;
  --header-height: 3rem;
  --h1-size: 1.25rem;
  --cell-padding: 0.4rem 0.6rem;
}

[data-theme="lightning"] .site-brand::before { content: ""; display: inline-block; width: 1.6rem; height: 1.1rem; border-radius: 0.55rem; background: var(--color-primary); margin-right: 0.5rem; }
[data-theme="lightning"] .site-brand, [data-theme="lightning"] .site-tools { border-bottom: 1px solid var(--color-border); }
/* 2段目: アプリのタブ */
[data-theme="lightning"] .site-links { gap: 0; padding: 0 1rem; border-top: 3px solid var(--color-primary); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); position: relative; z-index: 1; }
[data-theme="lightning"] .site-links a { border-radius: 0; padding: 0.55rem 0.9rem; border-bottom: 3px solid transparent; }
[data-theme="lightning"] .site-links a[aria-current="page"] { border-bottom-color: var(--color-primary); font-weight: 600; }
/* 上部の淡い青の帯 */
[data-theme="lightning"] .site-main { background: linear-gradient(#b0c4df 0 7rem, transparent 7rem); }
[data-theme="lightning"] .karte { padding: 0.75rem; }
[data-theme="lightning"] .karte > h1, [data-theme="lightning"] .karte-header, [data-theme="lightning"] .karte-breadcrumb + .karte-header {
  background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
[data-theme="lightning"] .karte > h1 { margin: 0 0 0.75rem; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; }
[data-theme="lightning"] .karte > h1::before, [data-theme="lightning"] .karte-header h1::before { content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 4px; background: #5867e8; }
[data-theme="lightning"] .karte-breadcrumb { background: var(--color-surface); margin: 0; padding: 0.5rem 1rem 0; border: 1px solid var(--color-card-border); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
[data-theme="lightning"] .karte-breadcrumb + .karte-header { border-top: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); }
[data-theme="lightning"] .karte-header { padding: 0.5rem 1rem 0.75rem; }
[data-theme="lightning"] .karte-header h1 { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
/* ハイライト: 見出しの項目を横に並べる */
[data-theme="lightning"] .karte-header-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem 1rem; border-top: 1px solid var(--color-divider); padding-top: 0.6rem; }
[data-theme="lightning"] .karte-header-list > div { display: grid; gap: 0; }
[data-theme="lightning"] .karte-header-list dt { font-size: 0.75rem; }
[data-theme="lightning"] .karte-tabs { background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-card) var(--radius-card) 0 0; padding: 0 0.75rem; gap: 0; }
[data-theme="lightning"] .karte-panel { background: var(--color-surface); border: 1px solid var(--color-card-border); border-top: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); padding: 1rem; box-shadow: var(--shadow-card); }
[data-theme="lightning"] .karte-table th { font-weight: 700; font-size: 0.75rem; }
[data-theme="lightning"] .karte-table-wrap, [data-theme="lightning"] .karte > .karte-table { border: 1px solid var(--color-card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
[data-theme="lightning"] .karte-unit a.active { background: var(--color-primary); }