/* SmartHR Design System 風 UI（data-ui-style="smarthr"）
   参考: https://smarthr.design/products/design-tokens/color/
   ※ ブランドカラー（#00c4cc）は使わず、プロダクト用セマンティックトークンを適用 */

html[data-ui-style="smarthr"] {
  /* 色テーマ選択より優先して SmartHR プロダクト色を適用 */
  --theme-primary: #0077c7;
  --theme-primary-2: #0071c1;
  --theme-primary-rgb: 0, 119, 199;
  --theme-bg-1: #f8f7f6;
  --theme-bg-2: #f8f7f6;
  --theme-bg-3: #f2f1f0;
  --theme-surface: #f8f7f6;
  --theme-surface-2: #ffffff;
  --theme-surface-3: #ffffff;
  --theme-surface-4: #f8f7f6;
  --theme-surface-5: #f2f1f0;
  --theme-border: #d6d3d0;
  --theme-border-2: #d6d3d0;
  --theme-border-3: #d6d3d0;
  --theme-border-4: #d6d3d0;
  --theme-border-5: #d6d3d0;
  --theme-border-6: #c1bdb7;
  --theme-border-7: #edebe8;
  --theme-text: #23221e;
  --theme-text-2: #706d65;
  --theme-text-3: #706d65;
  --theme-text-4: #706d65;
  --theme-text-5: #706d65;
  --theme-text-6: #23221e;
  --theme-accent-soft: #e8f3fb;
  --theme-shadow-rgb: 3, 3, 2;
  --theme-btn-shadow-rgb: 0, 119, 199;

  --ui-text: #23221e;
  --ui-text-muted: #706d65;
  --ui-label: #706d65;
  --ui-label-bg: #0077c7;
  --ui-label-border: #0071c1;
  --ui-label-fg: #ffffff;
  --ui-btn-text: #0077c7;

  --shr-main: #0077c7;
  --shr-danger: #e01e5a;
  --shr-warning: #ffcc17;
  --shr-border: #d6d3d0;
  --shr-head: #edebe8;
  --shr-background: #f8f7f6;
  --shr-column: #f8f7f6;
  --shr-over-bg: #f2f1f0;
  --shr-radius: 6px;
  --shr-radius-lg: 8px;
  --shr-font: "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

html[data-ui-style="smarthr"] body,
html[data-ui-style="smarthr"] body.page-master-grid,
html[data-ui-style="smarthr"] body.page-mobile {
  font-family: var(--shr-font);
  background: var(--shr-background);
  color: var(--ui-text);
}

/* --- 共通ウィンドウ / タイトルバー --- */
html[data-ui-style="smarthr"] .window,
html[data-ui-style="smarthr"] .page-admin.page-search-layout .window {
  border: 1px solid var(--shr-border);
  border-radius: var(--shr-radius-lg);
  box-shadow: none;
  background: #fff;
}

html[data-ui-style="smarthr"] .page-menu .titlebar,
html[data-ui-style="smarthr"] .titlebar,
html[data-ui-style="smarthr"] .page-admin.page-search-layout .titlebar {
  background: #fff;
  color: #23221e;
  border-bottom: 1px solid var(--shr-border);
  border-radius: var(--shr-radius-lg) var(--shr-radius-lg) 0 0;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
}

html[data-ui-style="smarthr"] .titlebar-split a {
  color: var(--shr-main);
  opacity: 1;
}

html[data-ui-style="smarthr"] .titlebar-split a:hover {
  text-decoration: underline;
}

html[data-ui-style="smarthr"] .content {
  padding: 16px;
}

/* --- ボタン --- */
html[data-ui-style="smarthr"] .btn-primary,
html[data-ui-style="smarthr"] .btn.btn-primary,
html[data-ui-style="smarthr"] button.btn-primary {
  background: var(--shr-main);
  border: 1px solid var(--shr-main);
  border-radius: var(--shr-radius);
  box-shadow: none;
  color: #fff;
  font-weight: 700;
}

html[data-ui-style="smarthr"] .btn-primary:hover {
  filter: none;
  background: #0071c1;
  border-color: #0071c1;
}

html[data-ui-style="smarthr"] .btn,
html[data-ui-style="smarthr"] .page-admin.page-search-layout .btn,
html[data-ui-style="smarthr"] .theme-picker-select,
html[data-ui-style="smarthr"] .userbar-logout-btn,
html[data-ui-style="smarthr"] .mobile-qr-open-btn,
html[data-ui-style="smarthr"] .mobile-qr-close-btn {
  border-radius: var(--shr-radius);
  border-color: var(--shr-border);
  box-shadow: none;
}

html[data-ui-style="smarthr"] .userbar-logout-btn {
  border-radius: var(--shr-radius);
  color: #23221e;
  background: #fff;
}

html[data-ui-style="smarthr"] .userbar-logout-btn:hover {
  background: var(--shr-over-bg);
}

html[data-ui-style="smarthr"] .userbar-admin-link {
  color: #0071c1;
}

/* --- アラート / リード --- */
html[data-ui-style="smarthr"] .alert,
html[data-ui-style="smarthr"] .page-lead,
html[data-ui-style="smarthr"] .menu-empty-hint,
html[data-ui-style="smarthr"] .menu-flash {
  border-radius: var(--shr-radius);
}

html[data-ui-style="smarthr"] .alert-error,
html[data-ui-style="smarthr"] .menu-flash-error {
  color: #e01e5a;
  background: #fff0f4;
  border: 1px solid #f5b5c8;
}

html[data-ui-style="smarthr"] .alert-success,
html[data-ui-style="smarthr"] .menu-flash-success {
  color: #0f7f85;
  background: #e8f7f7;
  border: 1px solid #9ed9dc;
}

html[data-ui-style="smarthr"] .page-lead {
  background: var(--shr-column);
  border: 1px solid var(--shr-border);
  color: var(--ui-text-muted);
}

/* --- メニュー --- */
html[data-ui-style="smarthr"] .page-header {
  font-size: 1.5rem; /* XL */
  font-weight: 700;
  color: #23221e;
}

html[data-ui-style="smarthr"] .tabbar .tab,
html[data-ui-style="smarthr"] .tab {
  border-radius: var(--shr-radius) var(--shr-radius) 0 0;
  border-color: var(--shr-border);
  background: var(--shr-head);
  color: #23221e;
}

html[data-ui-style="smarthr"] .tab.active,
html[data-ui-style="smarthr"] .tabbar .tab.active {
  background: #fff;
  color: var(--shr-main);
  border-bottom-color: #fff;
  font-weight: 700;
}

html[data-ui-style="smarthr"] .panel,
html[data-ui-style="smarthr"] .button-grid a,
html[data-ui-style="smarthr"] .button-grid button,
html[data-ui-style="smarthr"] .menu-item,
html[data-ui-style="smarthr"] .menu-link {
  border-radius: var(--shr-radius);
  border-color: var(--shr-border);
}

html[data-ui-style="smarthr"] .button-grid a:hover,
html[data-ui-style="smarthr"] .menu-link:hover {
  background: var(--shr-over-bg);
}

/* --- ログイン / 管理 --- */
html[data-ui-style="smarthr"] .login-form input[type="text"],
html[data-ui-style="smarthr"] .login-form input[type="password"],
html[data-ui-style="smarthr"] .login-form input[type="email"],
html[data-ui-style="smarthr"] .page-admin.page-search-layout input,
html[data-ui-style="smarthr"] .page-admin.page-search-layout select,
html[data-ui-style="smarthr"] .page-admin.page-search-layout textarea {
  border-radius: var(--shr-radius);
  border-color: var(--shr-border);
}

html[data-ui-style="smarthr"] .login-form label {
  color: #23221e;
}

html[data-ui-style="smarthr"] .login-boot-hint a,
html[data-ui-style="smarthr"] a {
  color: #0071c1;
}

html[data-ui-style="smarthr"] .page-admin.page-search-layout .titlebar h1 {
  color: #23221e;
}

/* --- マスタグリッド --- */
html[data-ui-style="smarthr"] body.page-master-grid,
html[data-ui-style="smarthr"].page-master-grid body {
  background: var(--shr-background);
  font-family: var(--shr-font);
}

html[data-ui-style="smarthr"] .sup-window {
  border: 1px solid var(--shr-border);
  border-radius: var(--shr-radius-lg);
  box-shadow: none;
  background: #fff;
}

html[data-ui-style="smarthr"] .sup-top-strip {
  background: var(--shr-main) !important;
  height: 4px;
}

html[data-ui-style="smarthr"] .sup-btn,
html[data-ui-style="smarthr"] .sup-window button,
html[data-ui-style="smarthr"] .sup-window .btn {
  border-radius: var(--shr-radius);
}

html[data-ui-style="smarthr"] .sup-title-row h1 {
  color: #23221e;
}

html[data-ui-style="smarthr"] .sup-grid thead th,
html[data-ui-style="smarthr"] table thead th {
  background: var(--shr-head);
  color: #23221e;
  border-color: var(--shr-border);
}

html[data-ui-style="smarthr"] .sup-grid td,
html[data-ui-style="smarthr"] .sup-grid th {
  border-color: var(--shr-border);
}

/* --- モバイル --- */
html[data-ui-style="smarthr"] .m-card,
html[data-ui-style="smarthr"] .m-panel,
html[data-ui-style="smarthr"] .m-header {
  border-radius: var(--shr-radius-lg);
  border-color: var(--shr-border);
  box-shadow: none;
}

html[data-ui-style="smarthr"] .m-header {
  background: #fff;
  color: #23221e;
  border-bottom: 1px solid var(--shr-border);
}

/* --- レビュー画面など --- */
html[data-ui-style="smarthr"] .review-card,
html[data-ui-style="smarthr"] .review-panel {
  border-radius: var(--shr-radius-lg);
  border-color: var(--shr-border);
  box-shadow: none;
}

/* テーマ色セレクト: SmartHR 時は色テーマが無効なことを示す */
html[data-ui-style="smarthr"] .theme-picker-item.is-style-locked .theme-picker-select {
  opacity: 0.55;
  pointer-events: none;
}

html[data-ui-style="smarthr"] .theme-picker-hint {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 11px;
  color: var(--ui-text-muted);
  margin-top: 2px;
}

html[data-ui-style="digital"] .theme-picker-hint,
html[data-ui-style="explorer"] .theme-picker-hint {
  display: none;
}