/*
 * SmartHR UI 風。
 * 色付きの上の帯(--color-header。ナコムの色が決まったらここを差し替え、帯の文字の色 --color-on-header も読める色に合わせる)に、
 * ブランド・主な行き先・道具を横一列。帯の青緑は白い文字では読みにくい(2.2:1)ので、帯の文字は濃い色にする。
 * 温かみのある灰色の背景に白いカード、表の見出しを塗り、タグは枠付き
 */
[data-theme="smarthr"] {
  --font-body: "Yu Gothic UI", "Meiryo", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --color-bg: #f8f7f6;
  --color-surface: #ffffff;
  --color-field-bg: #ffffff;
  --color-border: #d6d3d0;
  --color-border-strong: #d6d3d0;
  --color-card-border: transparent;
  --color-divider: #edebe8;
  --color-text: #23221e;
  --color-muted: #706d65;
  --color-link: #0071c1;
  --color-focus: #0077c7;
  --color-primary: #0077c7;
  --color-primary-hover: #00589b;
  --color-on-primary: #ffffff;
  --color-button-text: #23221e;
  --color-button-bg: #ffffff;
  --color-button-border: #d6d3d0;
  --color-button-hover-bg: #f8f7f6;
  --color-header: #00c4cc;
  --color-on-header: #23221e;
  --color-header-field-bg: #ffffff;
  --color-header-field-border: transparent;
  --color-header-button-text: #23221e;
  --color-header-button-bg: #ffffff;
  --color-header-button-border: transparent;
  --color-nav-bg: #00c4cc;
  --color-nav-text: #23221e;
  --color-nav-hover-bg: rgba(255, 255, 255, 0.25);
  --color-nav-active-bg: transparent;
  --color-nav-active-text: #23221e;
  --color-tab-text: #23221e;
  --color-tab-active-text: #0077c7;
  --color-table-bg: #ffffff;
  --color-table-head-bg: #edebe8;
  --color-table-head-text: #23221e;
  --color-info-bg: #e5f2fa;
  --color-info-fg: #0071c1;
  --color-success-bg: #eaf5ee;
  --color-success-fg: #0f7f46;
  --color-warning-bg: #fdf5d6;
  --color-warning-fg: #7a5a00;
  --color-danger-bg: #fdeceb;
  --color-danger-fg: #e01e5a;
  --color-neutral-bg: #f8f7f6;
  --color-neutral-fg: #706d65;
  --color-late-bg: #fdefe3;
  --color-late-fg: #a14a00;
  --tag-border-color: currentColor;
  --radius: 4px;
  --radius-card: 6px;
  --radius-button: 4px;
  --radius-tag: 4px;
  --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.12);
  --button-weight: 700;
  --tab-underline: 3px;
  --header-height: 3rem;
  --h1-size: 1.4rem;
  --cell-padding: 0.6rem 1rem;
  --page-padding: 1.25rem 1.5rem;
}

/* 横一列: ブランド・主な行き先・道具 */
@media (min-width: 40.0625rem) {
  [data-theme="smarthr"] .app-shell-signed-in { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "brand links tools" "main main main"; grid-template-rows: auto 1fr; }
  [data-theme="smarthr"] .site-links { flex-wrap: nowrap; align-items: stretch; padding: 0 0.5rem; border-bottom: 0; }
  [data-theme="smarthr"] .site-links a { display: flex; align-items: center; border-radius: 0; padding: 0 0.85rem; }
  [data-theme="smarthr"] .site-links a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--color-on-header); }
}
@media (max-width: 40rem) {
  [data-theme="smarthr"] .site-links a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--color-on-header); border-radius: 0; }
}
[data-theme="smarthr"] .site-links a { font-weight: 700; }
[data-theme="smarthr"] .karte-table-wrap, [data-theme="smarthr"] .karte > .karte-table { border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
[data-theme="smarthr"] .karte-table th { font-weight: 700; }
[data-theme="smarthr"] .karte-tabs a { font-weight: 700; }
[data-theme="smarthr"] .karte-unit a.active { background: var(--color-primary); }