/* =========================================================
   共通スタイル（全業務アプリ・ポータル共通）
   - ブランドカラーはアプリごとに body の theme-* クラスで切替
   - レイアウト・コンポーネントは基本Tailwindユーティリティを使用し、
     ここにはユーティリティで表現しづらい補助スタイルのみ記述する
   ========================================================= */

/* --- アプリ別ブランドカラー（CSS変数）--- */
:root {
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
}
/* 販売管理：ブルー */
.theme-sales {
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
}
/* 在庫管理：グリーン */
.theme-inventory {
  --brand-50: #ecfdf5;
  --brand-100: #d1fae5;
  --brand-500: #10b981;
  --brand-600: #059669;
  --brand-700: #047857;
}
/* 顧客管理：パープル */
.theme-crm {
  --brand-50: #f5f3ff;
  --brand-100: #ede9fe;
  --brand-500: #8b5cf6;
  --brand-600: #7c3aed;
  --brand-700: #6d28d9;
}
/* 勤怠・経費：アンバー */
.theme-attendance {
  --brand-50: #fffbeb;
  --brand-100: #fef3c7;
  --brand-500: #f59e0b;
  --brand-600: #d97706;
  --brand-700: #b45309;
}
/* 稟議・ワークフロー：ティール */
.theme-workflow {
  --brand-50: #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-500: #14b8a6;
  --brand-600: #0d9488;
  --brand-700: #0f766e;
}
/* プロジェクト管理：インディゴ */
.theme-project {
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
}
/* ヘルプデスク：ローズ */
.theme-helpdesk {
  --brand-50: #fff1f2;
  --brand-100: #ffe4e6;
  --brand-500: #f43f5e;
  --brand-600: #e11d48;
  --brand-700: #be123c;
}
/* 生産管理：シアン */
.theme-production {
  --brand-50: #ecfeff;
  --brand-100: #cffafe;
  --brand-500: #06b6d4;
  --brand-600: #0891b2;
  --brand-700: #0e7490;
}
/* 予約管理：オレンジ */
.theme-reservation {
  --brand-50: #fff7ed;
  --brand-100: #ffedd5;
  --brand-500: #f97316;
  --brand-600: #ea580c;
  --brand-700: #c2410c;
}

/* --- ベース --- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* =========================================================
   jpn-ui 設計契約への準拠（社内資産 DESIGN.md / CHECKLIST.md）
   ※ Tailwindユーティリティより後勝ちさせるため selector を調整
   ========================================================= */

/* フォント：欧文先 → 和文（OSフォールバックを明示）。
   body.font-sans で .font-sans ユーティリティに勝たせる。 */
body.font-sans {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo",
    sans-serif;
  /* UI本文の行間（saas profile 既定）*/
  line-height: 1.6;
}

/* フォーカスリングは必ず可視（outline:none 禁止 / Reject項目）。
   .outline-none ユーティリティを :focus-visible 時に上書きする。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 数値列の桁揃え（テーブル内の数字を等幅化）*/
table { font-variant-numeric: tabular-nums; }

/* テーブル行は本文ルールを継承しない（行高は詰める）*/
table td, table th { line-height: 1.4; }

/* --- スクロールバー（細めで上品に）--- */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* --- Lucideアイコンの既定サイズ調整（width/heightをCSSでも担保）--- */
[data-lucide] { stroke-width: 2; }

/* --- サイドバー：モバイル時の開閉アニメーション --- */
@media (max-width: 1023px) {
  [data-sidebar] {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  [data-sidebar].is-open { transform: translateX(0); }
}

/* --- カードのホバー浮き上がり（ポータル等）--- */
.card-hover { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.18); }

/* --- タイムライン（対応履歴・申請履歴で使用）--- */
.timeline { position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: #e2e8f0;
}

/* --- トースト（デモ操作の通知）--- */
#toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* --- 印刷（請求書）：サイドバー等を隠して紙面のみ --- */
@media print {
  [data-no-print] { display: none !important; }
  .print-area { box-shadow: none !important; border: none !important; }
  body { background: #fff !important; }
}