/*
 * Material Design 3(Google 風)。
 * 背景と同じ色の上の帯と、左の細い帯(ナビゲーションレール)。角の丸い面と色の濃淡で区切り、ボタンは丸く大きい
 */
[data-theme="material"] {
  --font-body: "Roboto", "Yu Gothic UI", "Meiryo", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --color-bg: #fef7ff;
  --color-surface: #f7f2fa;
  --color-field-bg: #fffbfe;
  --color-border: #e7e0ec;
  --color-border-strong: #79747e;
  --color-card-border: transparent;
  --color-divider: #e7e0ec;
  --color-text: #1d1b20;
  --color-muted: #49454f;
  --color-link: #6750a4;
  --color-focus: #6750a4;
  --color-primary: #6750a4;
  --color-primary-hover: #574192;
  --color-on-primary: #ffffff;
  --color-button-text: #6750a4;
  --color-button-bg: transparent;
  --color-button-border: #79747e;
  --color-button-hover-bg: #efe8f6;
  --color-header: #fef7ff;
  --color-on-header: #1d1b20;
  --color-header-field-bg: #ece6f0;
  --color-header-field-border: transparent;
  --color-header-button-text: #6750a4;
  --color-header-button-bg: transparent;
  --color-header-button-border: #79747e;
  --color-nav-bg: #fef7ff;
  --color-nav-text: #49454f;
  --color-nav-hover-bg: transparent;
  --color-nav-active-bg: transparent;
  --color-nav-active-text: #1d1b20;
  --color-tab-text: #49454f;
  --color-tab-active-text: #6750a4;
  --color-table-bg: transparent;
  --color-table-head-bg: transparent;
  --color-table-head-text: #49454f;
  --color-info-bg: #e8def8;
  --color-info-fg: #1d192b;
  --color-success-bg: #c4eed0;
  --color-success-fg: #072711;
  --color-warning-bg: #ffdea6;
  --color-warning-fg: #261900;
  --color-danger-bg: #ffdad6;
  --color-danger-fg: #410002;
  --color-neutral-bg: #e7e0ec;
  --color-neutral-fg: #49454f;
  --color-late-bg: #ffdbcb;
  --color-late-fg: #341100;
  --tag-border-color: transparent;
  --radius: 12px;
  --radius-card: 16px;
  --radius-button: 20px;
  --radius-tag: 8px;
  --radius-field: 4px;
  --shadow-card: none;
  --control-height: 2.5rem;
  --button-padding: 1.25rem;
  --button-weight: 500;
  --tab-underline: 3px;
  --header-height: 3.5rem;
  --h1-weight: 400;
  --h1-size: 1.6rem;
  --figure-weight: 500;
}

/* ナビゲーションレール: 項目を縦に並べ、選んでいる項目は丸い塗り */
@media (min-width: 40.0625rem) {
  [data-theme="material"] .app-shell-signed-in { grid-template-columns: 6.25rem auto minmax(0, 1fr); grid-template-areas: "brand brand tools" "links main main"; grid-template-rows: auto 1fr; }
  [data-theme="material"] .site-links { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 0.75rem; padding: 0.5rem 0.25rem; border-bottom: 0; }
  [data-theme="material"] .site-links a { display: grid; justify-items: center; gap: 0.25rem; width: 5.75rem; padding: 0; font-size: 0.7rem; line-height: 1.3; text-align: center; white-space: normal; border-radius: 0; }
  [data-theme="material"] .site-links a::before { content: ""; width: 3.5rem; height: 2rem; border-radius: 1rem; box-shadow: inset 0 0 0 2px #79747e33; }
  [data-theme="material"] .site-links a[aria-current="page"] { font-weight: 600; }
  [data-theme="material"] .site-links a[aria-current="page"]::before { background: #e8def8; box-shadow: none; }
}
[data-theme="material"] .site-brand { font-size: 1.1rem; font-weight: 500; padding-left: 1.25rem; }
[data-theme="material"] .site-tools input[type="search"] { border-radius: 1.75rem; padding: 0 1rem; }
[data-theme="material"] .site-links a[aria-current="page"] { background: var(--color-nav-active-bg); }
@media (max-width: 40rem) {
  [data-theme="material"] .site-links a[aria-current="page"] { background: #e8def8; border-radius: 1rem; }
}
[data-theme="material"] .karte-card { padding: 0.9rem 1rem; }
[data-theme="material"] .karte-tabs a { flex: 1 1 auto; text-align: center; }
[data-theme="material"] .karte-table-wrap, [data-theme="material"] .karte-panel > .karte-table, [data-theme="material"] .karte > .karte-table { background: var(--color-surface); border-radius: var(--radius-card); }
[data-theme="material"] .karte-table th, [data-theme="material"] .karte-table td { padding: 0.65rem 1rem; }
[data-theme="material"] .karte-table th { font-weight: 500; }
[data-theme="material"] .customer-filter { padding: 1rem; }
[data-theme="material"] .karte-unit a { border-radius: 8px; }
[data-theme="material"] .karte-unit a.active { background: #e8def8; border-color: #e8def8; color: #1d192b; }