/* =============================================================
   KDK 共通デザイン（portal / cockpit / invoice-portal）
   ここが共通CSSの唯一の正本。各テンプレへの転記は禁止。
   仕様の解説・早見表は docs/reference/リファレンス_UI設計.md
   （情報の流れは CSS → md の一方通行）。
   対象外: parts-ai（AIチャットUIで構造が特殊）
   配信: shared/ui.py の register_shared_static()（/static/kdk/）
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@300;400;500&display=swap');

/* ===== デザイントークン ===== */
:root {
  color-scheme: light;   /* ネイティブUI（select プルダウン・スクロールバー等）の配色基準 */
  --kdk-accent:    #378ADD;
  --kdk-positive:  #1D9E75;
  --kdk-negative:  #D85A30;
  --kdk-active:    #7A2525;
  --bg:            #f5f4f0;
  --surface:       #ffffff;
  --surface2:      #fafaf8;
  --border:        #e0dfd9;
  --border-light:  #f0efe9;
  --text:          #1a1a1a;
  --text-muted:    #666666;
  --text-dim:      #aaaaaa;
  --font-sans:  'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:  'DM Mono', monospace;
  --font-scale: 1;
  --fs-xs:   calc(11px * var(--font-scale));
  --fs-sm:   calc(12px * var(--font-scale));
  --fs-base: calc(14px * var(--font-scale));
  --fs-md:   calc(16px * var(--font-scale));
  --fs-lg:   calc(18px * var(--font-scale));
  --fs-xl:   calc(22px * var(--font-scale));
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  /* ロール色（凡例は portal Users ページ） */
  --role-admin: #D4AF37; --role-exec: #8B5CF6; --role-acct: #378ADD;
  --role-staff: #1D9E75; --role-cust: #8A8A8A; --tester-ring: #E5484D;
}
[data-theme="dark"] {
  color-scheme: dark;   /* プルダウンの選択ハイライト等を暗色側で描かせる */
  --bg:           #1c1c1c;
  --surface:      #242424;
  --surface2:     #2c2c2c;
  --border:       #383838;
  --border-light: #303030;
  --text:         #cecece;
  --text-muted:   #888888;
  --text-dim:     #555555;
}

/* ===== リセット・ベース ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; }
body { font-family: var(--font-sans); font-size: var(--fs-base); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; }

/* =============================================================
   共通ヘッダー（中央タイトル＋本人ゾーン）
   ============================================================= */
.app-header { padding: 40px 20px 0; }
.portal-header { text-align: center; margin-bottom: 32px; }
.portal-logo { font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.portal-zone {
  display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 8px;
  width: 100%; max-width: 92vw; margin: 0 auto 32px;
}
.zone-item {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--text);
  text-decoration: none; transition: border-color 0.2s;
}
a.zone-item:hover { border-color: var(--kdk-active); }
.zone-link, .zone-logout { justify-content: center; font-weight: 500; }
.zone-account .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ロール色ドット（テスターは赤リング） */
.role-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--role-staff); }
.role-dot[data-role="管理者"] { background: var(--role-admin); }
.role-dot[data-role="経営"]   { background: var(--role-exec); }
.role-dot[data-role="経理"]   { background: var(--role-acct); }
.role-dot[data-role="社員"]   { background: var(--role-staff); }
.role-dot[data-role="得意先"] { background: var(--role-cust); }
.role-dot.tester { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--tester-ring); }

/* Logout アイコン（Lucide log-out・currentColor 追従） */
.logout-link, .zone-logout { display: inline-flex; align-items: center; gap: 6px; }
.logout-link::before, .zone-logout::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =============================================================
   カードメニュー（portal 流。端数はダミーで埋めず左詰め）
   幅の既定は 880px（3列）。portal トップのみ 1180px（4列）に上書き。
   ============================================================= */
.portal-cards { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 20px; width: 100%; max-width: 880px; }
.portal-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; width: 280px; display: flex; flex-direction: column; align-items: center;
  text-align: center; transition: box-shadow 0.2s, border-color 0.2s; text-decoration: none; color: inherit;
}
a.portal-card:hover { border-color: var(--kdk-active); box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.card-icon { font-size: 40px; margin-bottom: 16px; line-height: 1; }
.card-name { font-size: var(--fs-md); font-weight: 600; margin-bottom: 20px; }
.card-btn { width: 100%; padding: 10px 0; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 500; border: none; cursor: pointer; transition: opacity 0.15s; text-align: center; }
.card-btn.btn-primary { background: var(--kdk-accent); color: #fff; border-color: transparent; }
a.portal-card:hover .card-btn.btn-primary { opacity: 0.88; }

@media (max-width: 768px) {
  .app-header { padding: 24px 16px 0; }
}