/* ============================================================
   shadcn/ui Style CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

/* ============================================================
   1. CSS変数（カラーパレット・サイズ変数）
   ============================================================ */

@layer base {
  :root {
    /* 基本カラー */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    /* カード */
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    /* ポップオーバー */
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    /* プライマリ（サイドバー背景色と統一: #565a72） */
    --primary: 231 14% 39%;
    --primary-foreground: 0 0% 98%;

    /* セカンダリ */
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    /* ミュート */
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 5% 34%;

    /* アクセント */
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    /* デストラクティブ */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    /* ボーダー */
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;

    /* ラディウス */
    --radius: 2px;
    --radius-card: 3px;

    /* レイアウト */
    --header-height: 50px;
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 54px;
    --sidebar-background: #565a72;
    --nav-item-height: 40px;

  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

/* カラーパレット変数 */
:root {
  /* ===== 白系（White） ===== */
  --white-50: 0 0% 100%;
  --white-100: 0 0% 99.5%;
  --white-150: 0 0% 99%;
  --white-200: 0 0% 98.5%;
  --white-250: 0 0% 98%;
  --white-300: 0 0% 97.5%;
  --white-350: 0 0% 97%;
  --white-400: 0 0% 96.5%;
  --white-450: 0 0% 96%;
  --white-500: 0 0% 95%;
  --white-550: 0 0% 94.5%;
  --white-600: 0 0% 94%;
  --white-650: 0 0% 93.5%;
  --white-700: 0 0% 93%;
  --white-750: 0 0% 92.5%;
  --white-800: 0 0% 92%;
  --white-850: 0 0% 91.5%;
  --white-900: 0 0% 91%;
  --white-950: 0 0% 90.5%;
  --white-1000: 0 0% 90%;

  /* ===== 黒系（Black） ===== */
  --black-50: 0 0% 20%;
  --black-100: 0 0% 18%;
  --black-150: 0 0% 17%;
  --black-200: 0 0% 15%;
  --black-250: 0 0% 13%;
  --black-300: 0 0% 12%;
  --black-350: 0 0% 11%;
  --black-400: 0 0% 10%;
  --black-450: 0 0% 9%;
  --black-500: 0 0% 8%;
  --black-550: 0 0% 7%;
  --black-600: 0 0% 6%;
  --black-650: 0 0% 5.5%;
  --black-700: 0 0% 5%;
  --black-750: 0 0% 4%;
  --black-800: 0 0% 3%;
  --black-850: 0 0% 2.5%;
  --black-900: 0 0% 2%;
  --black-950: 0 0% 1%;
  --black-1000: 0 0% 0%;

  /* ===== グレー系（Gray） ===== */
  --gray-50: 0 0% 98%;
  --gray-100: 0 0% 96%;
  --gray-150: 0 0% 93%;
  --gray-200: 0 0% 90%;
  --gray-250: 0 0% 87%;
  --gray-300: 0 0% 83%;
  --gray-350: 0 0% 79%;
  --gray-400: 0 0% 74%;
  --gray-450: 0 0% 68%;
  --gray-500: 0 0% 62%;
  --gray-550: 0 0% 54%;
  --gray-600: 0 0% 46%;
  --gray-650: 0 0% 42%;
  --gray-700: 0 0% 38%;
  --gray-750: 0 0% 32%;
  --gray-800: 0 0% 26%;
  --gray-850: 0 0% 19%;
  --gray-900: 0 0% 13%;
  --gray-950: 0 0% 9%;
  --gray-1000: 0 0% 6%;

  /* ===== 赤系（Red） ===== */
  --red-50: 0 100% 97%;
  --red-100: 0 100% 94%;
  --red-150: 0 100% 90%;
  --red-200: 0 100% 86%;
  --red-250: 0 100% 80%;
  --red-300: 0 100% 74%;
  --red-350: 0 100% 68%;
  --red-400: 0 100% 62%;
  --red-450: 0 92% 61%;
  --red-500: 0 84% 60%;
  --red-550: 0 78% 56%;
  --red-600: 0 72% 51%;
  --red-650: 0 73% 47%;
  --red-700: 0 74% 42%;
  --red-750: 0 72% 38%;
  --red-800: 0 70% 35%;
  --red-850: 0 66% 33%;
  --red-900: 0 63% 31%;
  --red-950: 0 69% 23%;
  --red-1000: 0 75% 15%;

  /* ===== 黄系（Yellow） ===== */
  --yellow-50: 48 100% 96%;
  --yellow-100: 48 96% 89%;
  --yellow-150: 48 97% 83%;
  --yellow-200: 48 97% 77%;
  --yellow-250: 47 97% 71%;
  --yellow-300: 46 97% 65%;
  --yellow-350: 44 96% 60%;
  --yellow-400: 43 96% 56%;
  --yellow-450: 40 94% 53%;
  --yellow-500: 38 92% 50%;
  --yellow-550: 35 93% 47%;
  --yellow-600: 32 95% 44%;
  --yellow-650: 29 92% 40%;
  --yellow-700: 26 90% 37%;
  --yellow-750: 24 86% 34%;
  --yellow-800: 23 83% 31%;
  --yellow-850: 22 80% 28%;
  --yellow-900: 22 78% 26%;
  --yellow-950: 21 85% 20%;
  --yellow-1000: 21 92% 14%;

  /* ===== 緑系（Green） ===== */
  --green-50: 138 76% 97%;
  --green-100: 141 84% 93%;
  --green-150: 141 82% 89%;
  --green-200: 141 79% 85%;
  --green-250: 142 78% 79%;
  --green-300: 142 77% 73%;
  --green-350: 142 73% 65%;
  --green-400: 142 69% 58%;
  --green-450: 142 70% 51%;
  --green-500: 142 71% 45%;
  --green-550: 142 73% 40%;
  --green-600: 142 76% 36%;
  --green-650: 142 74% 32%;
  --green-700: 142 72% 29%;
  --green-750: 143 68% 26%;
  --green-800: 143 64% 24%;
  --green-850: 143 62% 22%;
  --green-900: 144 61% 20%;
  --green-950: 144 70% 15%;
  --green-1000: 145 80% 10%;

  /* ===== 青系（Blue） ===== */
  --blue-50: 210 100% 97%;
  --blue-100: 210 100% 94%;
  --blue-150: 210 100% 90%;
  --blue-200: 210 100% 86%;
  --blue-250: 210 100% 80%;
  --blue-300: 210 100% 74%;
  --blue-350: 210 100% 68%;
  --blue-400: 210 100% 62%;
  --blue-450: 210 100% 56%;
  --blue-500: 210 100% 50%;
  --blue-550: 210 100% 47%;
  --blue-600: 210 100% 44%;
  --blue-650: 210 100% 40%;
  --blue-700: 210 100% 36%;
  --blue-750: 210 100% 32%;
  --blue-800: 210 100% 28%;
  --blue-850: 210 100% 24%;
  --blue-900: 210 100% 20%;
  --blue-950: 210 100% 17%;
  --blue-1000: 210 100% 14%;

  /* ===== ネイビー系（Navy） ===== */
  --navy-50: 220 30% 96%;
  --navy-100: 220 30% 92%;
  --navy-150: 220 29% 87%;
  --navy-200: 220 28% 82%;
  --navy-250: 220 27% 76%;
  --navy-300: 220 26% 70%;
  --navy-350: 220 25% 62%;
  --navy-400: 220 24% 55%;
  --navy-450: 220 37% 47%;
  --navy-500: 220 50% 40%;
  --navy-550: 220 55% 36%;
  --navy-600: 220 60% 32%;
  --navy-650: 220 65% 28%;
  --navy-700: 220 70% 25%;
  --navy-750: 220 72% 21%;
  --navy-800: 220 75% 18%;
  --navy-850: 220 77% 15%;
  --navy-900: 220 80% 12%;
  --navy-950: 220 82% 10%;
  --navy-1000: 220 85% 8%;

  /* ===== オレンジ系（Orange） ===== */
  --orange-50: 34 100% 97%;
  --orange-100: 34 100% 92%;
  --orange-200: 34 100% 86%;
  --orange-300: 34 100% 78%;
  --orange-400: 34 96% 68%;
  --orange-500: 25 95% 53%;
  --orange-600: 21 90% 48%;
  --orange-700: 17 88% 40%;
  --orange-800: 15 79% 34%;
  --orange-900: 15 75% 28%;

  /* ===== パープル系（Purple） ===== */
  --purple-50: 270 100% 98%;
  --purple-100: 269 100% 95%;
  --purple-200: 269 100% 92%;
  --purple-300: 269 97% 85%;
  --purple-400: 270 95% 75%;
  --purple-500: 270 50% 60%;
  --purple-600: 271 81% 56%;
  --purple-700: 272 72% 47%;
  --purple-800: 273 67% 39%;
  --purple-900: 274 66% 32%;

  /* ===== Zinc系パレット ===== */
  --zinc-50: 240 5% 96%;
  --zinc-100: 240 5% 93%;
  --zinc-200: 240 5% 84%;
  --zinc-300: 240 5% 74%;
  --zinc-400: 240 4% 56%;
  --zinc-500: 240 4% 41%;
  --zinc-600: 240 4% 31%;
  --zinc-700: 240 5% 23%;
  --zinc-800: 240 4% 18%;
  --zinc-900: 240 5% 13%;
  --zinc-950: 240 6% 10%;
  --zinc-1000: 240 10% 4%;

  /* ===== Slate系パレット ===== */
  --slate-50: 210 40% 98%;
  --slate-100: 210 40% 96%;
  --slate-200: 214 32% 91%;
  --slate-300: 213 27% 84%;
  --slate-400: 215 20% 65%;
  --slate-500: 215 16% 47%;
  --slate-600: 215 19% 35%;
  --slate-700: 215 25% 27%;
  --slate-800: 217 33% 17%;
  --slate-900: 222 47% 11%;
  --slate-950: 225 65% 8%;
  --slate-1000: 229 84% 5%;
}

/* ============================================================
   2. リセットスタイル・基本スタイル
   ============================================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-color: hsl(var(--border));
}

html {
  font-size: 16px;
}

body {
  /* font-family: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif; */
  font-size: "Roboto Mono", "Noto Sans JP", monospace;
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
}


/* ============================================================
   3. ボタン
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  height: 28px;
  padding: 3px 12px;
  transition: all 0.2s;
  outline: none;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.6;
}

.btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Default */
.btn-default {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: transparent;
}

.btn-default:hover {
  background: hsl(var(--primary) / 0.9);
}

/* Primary（btn-defaultの別名） */
.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: transparent;
}

.btn-primary:hover {
  background: hsl(var(--primary) / 0.9);
}

/* Secondary */
.btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: transparent;
}

.btn-secondary:hover {
  background: hsl(var(--secondary) / 0.8);
}

/* Outline */
.btn-outline {
  background: transparent;
  border-color: hsl(var(--input));
  color: hsl(var(--foreground));
}

.btn-outline:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: hsl(var(--foreground));
  border-color: transparent;
}

.btn-ghost:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.btn-ghost-dark {
  background: transparent;
  color: hsl(var(--foreground));
  border-color: transparent;
}

.btn-ghost-dark:hover {
  background: hsl(var(--gray-200));
  color: hsl(var(--accent-foreground));
}

/* Destructive */
.btn-destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  border-color: transparent;
}

.btn-destructive:hover {
  background: hsl(var(--destructive) / 0.9);
}

/* User */
.btn-user {
  background: hsl(var(--green-500));
  color: #fff;
  border-color: transparent;
}

.btn-user:hover {
  background: hsl(var(--green-500) / 0.8);
}

/* Link */
.btn-link {
  background: transparent;
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 4px;
  border-color: transparent;
}

.btn-link:hover {
  text-decoration: none;
}

/* Sizes */
.btn-sm {
  height: 24px;
  padding: 3px 8px;
  font-size: 12px;
}

.btn-lg {
  height: 36px;
  padding: 3px 16px;
  font-size: 14px;
}

.btn-md {
  height: 28px;
  padding: 0 12px;
  font-size: 13px;
}

.btn-icon {
  height: 28px;
  width: 28px;
  padding: 1px 3px 3px 3px;
}

.btn-sm.btn-icon {
  height: 24px;
  width: 24px;
}

.btn-md.btn-icon {
  height: 28px;
  width: 28px;
  padding: 0;
}

/* ============================================================
   4. インプット・フォーム
   ============================================================ */

.input {
  display: flex;
  width: 100%;
  height: 28px;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  padding: 3px 8px;
  font-size: 13px;
  color: hsl(var(--foreground));
  transition: all 0.2s;
}

.input::placeholder {
  color: hsl(var(--muted-foreground));
}

.input:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.input-error {
  border-color: hsl(var(--destructive));
}

/* テキストエリア */
.textarea {
  min-height: 80px;
  height: auto;
  padding: 8px;
  resize: vertical;
}

/* セレクト */
.select {
  display: block;
  width: 100%;
  height: 28px;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  padding: 3px 8px;
  font-size: 13px;
  color: hsl(var(--foreground));
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
  cursor: pointer;
  transition: all 0.2s;
}

.select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ラベル */
.label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 2px;
  padding-left: 2px;
}

.label-sm {
  font-size: 12px;
}

/* フォームグループ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

/* リンクホバー */
.link-hover {
  text-decoration: none;
}

.link-hover:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ブラウザ標準パスワード表示ボタンを非表示 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* ============================================================
   5. チェックボックス・スイッチ
   ============================================================ */

.checkbox {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid hsl(var(--primary));
  background: hsl(var(--background));
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.checkbox:hover {
  background: hsl(var(--accent));
}

.checkbox:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.checkbox:checked {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.checkbox:checked::after {
  content: "";
  width: 8px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.checkbox-label input {
  margin-top: 2px;
}

/* スイッチ */
.switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: hsl(var(--input));
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
  border: none;
  outline: none;
  flex-shrink: 0;
}

.switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: hsl(var(--background));
  border-radius: 8px;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.switch.active {
  background: hsl(var(--primary));
}

.switch.active::before {
  transform: translateX(16px);
}

/* ============================================================
   6. カード
   ============================================================ */

.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius-card);
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* .card + .card {
  margin-top: 5px;
} */

.cards-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cards-grid {
  display: grid;
  gap: 5px;
}

.card-header {
  padding: 12px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.card-description {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.card-content {
  padding: 12px;
}

.card-footer {
  padding: 0 12px 12px;
  display: flex;
  align-items: center;
}

/* ============================================================
   7. KPIカード
   ============================================================ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.kpi-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.kpi-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-label {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.kpi-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

.kpi-change {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.kpi-change.positive {
  color: hsl(var(--green-600));
}

.kpi-change.negative {
  color: hsl(var(--red-600));
}

/* ============================================================
   8. バッジ
   ============================================================ */

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin: 0 4px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: white;
  line-height: 1.2;
}

.badge-default    { background: hsl(var(--primary)); }
.badge-secondary  { background: hsl(var(--gray-500)); }
.badge-outline    { background: hsl(var(--gray-500)); }
.badge-destructive{ background: hsl(var(--destructive)); }
.badge-green      { background: hsl(var(--green-600)); }
.badge-red        { background: hsl(var(--red-500)); }
.badge-yellow     { background: hsl(var(--yellow-500)); }
.badge-blue       { background: hsl(var(--blue-500)); }
.badge-gray       { background: hsl(var(--gray-500)); }
.badge-purple     { background: hsl(var(--purple-500)); }
.badge-navy       { background: hsl(var(--navy-600)); }

/* ============================================================
   9. アラート
   ============================================================ */

.alert {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid;
  border-left: 4px solid;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
}

.alert-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.alert-body {
  flex: 1;
}

.alert-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
  line-height: 1.2;
}

.alert-description {
  font-size: 12px;
  line-height: 1.5;
}

.alert-destructive {
  border-color: hsl(var(--red-400));
  background: hsl(var(--red-100));
  color: hsl(var(--red-800));
}

.alert-warning {
  border-color: hsl(var(--orange-400));
  background: hsl(var(--orange-100));
  color: hsl(var(--orange-800));
}

.alert-success {
  border-color: hsl(var(--green-400));
  background: hsl(var(--green-100));
  color: hsl(var(--green-800));
}

.alert-info {
  border-color: hsl(var(--blue-400));
  background: hsl(var(--blue-100));
  color: hsl(var(--blue-800));
}

/* ============================================================
   10. タブ
   ============================================================ */

.tabs {
  width: 100%;
}

.tabs-list {
  display: inline-flex;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: hsl(var(--muted));
  padding: 3px;
  color: hsl(var(--muted-foreground));
}

.tab-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius);
  padding: 3px 10px;
  height: 22px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  color: hsl(var(--muted-foreground));
}

.tab-trigger:hover {
  background: hsl(var(--muted) / 0.8);
  color: hsl(var(--foreground));
}

.tab-trigger.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.tab-content {
  margin-top: 16px;
}

/* ============================================================
   11. テーブル
   ============================================================ */

.table-wrapper {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow-x: auto;
}

.card > .table-wrapper {
  border: none;
  border-radius: 0;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.table thead {
  background: hsl(var(--navy-50));
}

.table th,
.table td {
  border-top: 1px solid hsl(var(--border));
  border-right: 1px solid hsl(var(--border));
  vertical-align: middle;
  white-space: nowrap;
}

.table th {
  padding: 4px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

.table td {
  padding: 2px 8px;
  line-height: 1.5;
  background: hsl(var(--card));
}

.table th:first-child,
.table td:first-child { border-left: none; }

.table th:last-child,
.table td:last-child  { border-right: none; }

.table thead tr:first-child th { border-top: none; }
.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr:hover td { background: hsl(var(--accent)); }

.table-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.table td .checkbox,
.table th .checkbox {
  display: block;
  margin-top: 2px;
}

.table td .btn,
.table th .btn {
  margin: 0;
}

.table td .badge,
.table th .badge {
  margin: 0;
}

.table td svg,
.table th svg {
  margin: 0;
}

/* スクロール式テーブル */
.table-scroll {
  max-height: 400px;
  overflow: auto;
  border-radius: var(--radius);
}

.table-scroll .table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: hsl(var(--muted));
  backdrop-filter: blur(8px);
}

/* ページネーション */
.table-wrapper + .table-pagination {
  border-top: 1px solid hsl(var(--border));
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.table-pagination-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.table-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  color: hsl(var(--foreground));
}

.table-pagination-btn:hover:not(:disabled) {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

.table-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.table-pagination-btn.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

.table-page-size {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-page-size select {
  height: 28px;
  padding: 3px 8px;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  font-size: 13px;
  font-family: inherit;
}

/* ============================================================
   12. ダイアログ（モーダル）
   ============================================================ */

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  padding: 16px;
}

.dialog-overlay.open {
  opacity: 1;
  visibility: visible;
}

.dialog {
  position: relative;
  z-index: 50;
  width: 100%;
  max-width: 512px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: scale(0.95);
  transition: transform 0.2s;
}

.dialog-overlay.open .dialog {
  transform: scale(1);
}

.dialog-header {
  padding: 24px 24px 0;
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.dialog-description {
  margin-top: 8px;
  font-size: 14px;
  color: hsl(var(--muted-foreground));
}

.dialog-content {
  padding: 24px;
}

.dialog-footer {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

@media (min-width: 640px) {
  .dialog-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

.dialog-close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  color: hsl(var(--foreground));
}

.dialog-close:hover {
  opacity: 1;
}

/* ============================================================
   13. ドロップダウンメニュー
   ============================================================ */

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  z-index: 50;
  min-width: 192px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s;
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  border-radius: var(--radius);
  padding: 3px 8px;
  height: 28px;
  font-size: 13px;
  outline: none;
  transition: all 0.1s;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  color: hsl(var(--foreground));
  gap: 8px;
}

.dropdown-item:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.dropdown-separator {
  height: 1px;
  margin: 4px -4px;
  background: hsl(var(--border));
}

.dropdown-label {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}

/* ============================================================
   14. ヘッダー
   ============================================================ */

.header {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  z-index: 100;
  height: var(--header-height);
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  transition: left 0.2s ease;
}

.sidebar.collapsed ~ .header,
.header.sidebar-collapsed {
  left: var(--sidebar-collapsed-width);
}

.header-left {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  padding: 0 12px 0 2px;
  gap: 16px;
}

/* ブランド */
.header-brand {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: 2px;
  margin-left: -16px;
  margin-right: 20px;
  flex-shrink: 0;
  overflow: hidden;
}

.header-brand-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.header-brand-name {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.06em;
  white-space: nowrap;
  overflow: hidden;
  color: rgb(10, 10, 102);
  line-height: 1.4;
}

.header-brand-company-name {
  font-size: 12px;
  font-weight: 700;
  margin-left: 1px;
  margin-bottom: 2px;
  letter-spacing: -0.06em;
  white-space: nowrap;
  overflow: hidden;
  color: rgb(10, 10, 102);
  line-height: 1.3;
}

.header-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.header-date {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: hsl(var(--gray-200));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--sidebar-background));
  cursor: pointer;
  flex-shrink: 0;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.header-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.header-user-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: hsl(var(--sidebar-background));
}

.header-user-role {
  font-size: 11px;
  color: hsl(var(--sidebar-background));
  white-space: nowrap;
}

.header-logout-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 8px;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  transition: all 0.15s;
  background: transparent;
  border: none;
  cursor: pointer;
}

.header-logout-btn:hover {
  background: hsl(var(--accent));
  color: hsl(var(--destructive));
}

.header-logout-btn svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   15. サイドバー
   ============================================================ */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-background);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
  z-index: 105;
  overflow: hidden;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

/* サイドバートグル */
.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  width: calc(100% - 16px);
  height: var(--nav-item-height);
  margin: 8px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
  line-height: 1.5;
}

.sidebar.collapsed .sidebar-toggle {
  width: var(--nav-item-height);
  padding: 0;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-toggle-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.sidebar.collapsed .sidebar-toggle-icon {
  transform: rotate(180deg);
}

.sidebar-toggle-text {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .sidebar-toggle-text {
  display: none;
}

/* サイドバーコンテンツ */
.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.sidebar.collapsed .sidebar-content {
  padding: 8px 0;
}

/* サイドバーフッター */
.sidebar-footer {
  min-height: var(--header-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.sidebar-copyright {
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .sidebar-footer {
  display: none;
}

/* サイドバーナビ */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 10px;
  height: var(--nav-item-height);
  border-radius: var(--radius);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  line-height: 1.5;
}

.sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar-nav-item.active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.sidebar-nav-item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-nav-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-nav-item-text {
  display: none;
}

.sidebar.collapsed .sidebar-nav-item {
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  width: var(--nav-item-height);
  margin: 0 auto 2px;
}

.sidebar.collapsed .sidebar-nav {
  padding: 0;
}

.sidebar.collapsed .badge {
  display: none;
}

/* ツールチップ */
.sidebar-tooltip {
  position: absolute;
  left: calc(var(--sidebar-collapsed-width) + 4px);
  top: 50%;
  transform: translateY(-50%);
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  border-radius: var(--radius);
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 200;
}

.sidebar.collapsed .sidebar-nav-item:hover .sidebar-tooltip,
.sidebar.collapsed .sidebar-toggle:hover .sidebar-tooltip {
  opacity: 1;
  visibility: visible;
  position: fixed;
  left: calc(var(--sidebar-collapsed-width) + 4px);
  top: var(--tooltip-y, 50vh);
  transform: translateY(-50%);
}

/* サイドバーセクション */
.sidebar-section {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  gap: 3px;
}

.sidebar-section:first-child {
  margin-top: 0;
}

.sidebar-section-title {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .sidebar-section-title {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

/* ============================================================
   16. メインコンテンツ
   ============================================================ */

.main-content {
  margin-left: var(--sidebar-width);
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  padding: 12px 14px 12px 20px;
  transition: margin-left 0.2s ease;
}

.sidebar.collapsed ~ .main-content,
.main-content.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed-width);
}

/* ページ表示切り替え */
.page {
  display: none;
}

.page.active {
  display: block;
}

/* モバイルメニューボタン */
.mobile-menu-btn {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  transition: all 0.15s;
  background: transparent;
  border: none;
  cursor: pointer;
}

.mobile-menu-btn:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}

.mobile-menu-btn svg {
  width: 18px;
  height: 18px;
}

/* サイドバーオーバーレイ */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 80;
}

.sidebar-overlay.active {
  display: block;
}

/* ============================================================
   17. ページヘッダー
   ============================================================ */

.page-header {
  /* margin-bottom: 20px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.page-title {
  margin-left: 2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-subtitle {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   18. アコーディオン
   ============================================================ */

.accordion {
  width: 100%;
}

.accordion-item {
  border-bottom: 1px solid hsl(var(--border));
}

.accordion-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  color: hsl(var(--foreground));
}

.accordion-trigger:hover {
  text-decoration: underline;
}

.accordion-trigger svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.accordion-item.open .accordion-trigger svg {
  transform: rotate(180deg);
}

.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.accordion-item.open .accordion-content {
  max-height: 600px;
}

.accordion-body {
  padding: 8px 0 24px;
  display: flex;
  gap: 10px;
}

/* ============================================================
   19. プログレスバー
   ============================================================ */

.progress {
  position: relative;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 9999px;
  background: hsl(var(--secondary));
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: hsl(var(--primary));
  transition: width 0.3s ease;
}

/* ============================================================
   20. セパレーター
   ============================================================ */

.separator {
  flex-shrink: 0;
  background: hsl(var(--border));
}

.separator-horizontal {
  height: 1px;
  width: 100%;
}

.separator-vertical {
  width: 1px;
  height: 100%;
}

/* ============================================================
   21. アバター
   ============================================================ */

.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 9999px;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-size: 14px;
  font-weight: 500;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.avatar-lg {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

/* ============================================================
   22. トースト通知
   ============================================================ */

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 13px;
  min-width: 260px;
  max-width: 380px;
  pointer-events: all;
  animation: toast-in 0.25s ease;
  transition: opacity 0.2s, transform 0.2s;
}

.toast.hiding {
  opacity: 0;
  transform: translateX(20px);
}

.toast-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.toast-body {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.toast-description {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: color 0.15s;
}

.toast-close:hover {
  color: hsl(var(--foreground));
}

.toast-success {
  border-left: 4px solid hsl(var(--green-600));
}

.toast-success .toast-icon {
  color: hsl(var(--green-600));
}

.toast-error {
  border-left: 4px solid hsl(var(--red-500));
}

.toast-error .toast-icon {
  color: hsl(var(--red-500));
}

.toast-warning {
  border-left: 4px solid hsl(var(--yellow-500));
}

.toast-warning .toast-icon {
  color: hsl(var(--yellow-500));
}

.toast-info {
  border-left: 4px solid hsl(var(--blue-500));
}

.toast-info .toast-icon {
  color: hsl(var(--blue-500));
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   23. スペーシングユーティリティ
   ============================================================ */

/* margin */
.m-0  { margin: 0; }
.m-1  { margin: 4px; }
.m-2  { margin: 8px; }
.m-3  { margin: 12px; }
.m-4  { margin: 16px; }
.m-6  { margin: 24px; }
.m-8  { margin: 32px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mr-auto { margin-right: auto; }

/* padding */
.p-0  { padding: 0; }
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-6  { padding: 24px; }
.p-8  { padding: 32px; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }

/* gap */
.gap-0 { gap: 0; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }

/* ============================================================
   24. Flexbox ユーティリティ
   ============================================================ */

.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* ============================================================
   25. Grid ユーティリティ
   ============================================================ */

.grid           { display: grid; }
.grid-cols-1    { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ============================================================
   26. タイポグラフィ
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 15px; }

.text-xs   { font-size: 11px; line-height: 14px; }
.text-sm   { font-size: 12px; line-height: 16px; }
.text-base { font-size: 13px; line-height: 18px; }
.text-lg   { font-size: 15px; line-height: 22px; }
.text-xl   { font-size: 18px; line-height: 26px; }
.text-2xl  { font-size: 22px; line-height: 30px; }
.text-3xl  { font-size: 28px; line-height: 36px; }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.leading-none   { line-height: 1; }
.leading-tight  { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-loose  { line-height: 1.75; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-foreground      { color: hsl(var(--foreground)); }
.text-muted           { color: hsl(var(--muted-foreground)); }
.text-muted-foreground{ color: hsl(var(--muted-foreground)); }
.text-primary         { color: hsl(var(--primary)); }
.text-destructive     { color: hsl(var(--destructive)); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap { white-space: nowrap; }

/* ============================================================
   27. カラーユーティリティ（主要なもの）
   ============================================================ */

.bg-background  { background-color: hsl(var(--background)); }
.bg-foreground  { background-color: hsl(var(--foreground)); }
.bg-card        { background-color: hsl(var(--card)); }
.bg-primary     { background-color: hsl(var(--primary)); }
.bg-secondary   { background-color: hsl(var(--secondary)); }
.bg-muted       { background-color: hsl(var(--muted)); }
.bg-accent      { background-color: hsl(var(--accent)); }
.bg-destructive { background-color: hsl(var(--destructive)); }

.border-border  { border-color: hsl(var(--border)); }

/* ============================================================
   28. サイズ・表示ユーティリティ
   ============================================================ */

.w-full   { width: 100%; }
.w-auto   { width: auto; }
.h-full   { height: 100%; }
.h-auto   { height: auto; }
.min-h-screen { min-height: 100vh; }

.hidden   { display: none; }
.block    { display: block; }
.inline-block { display: inline-block; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

.overflow-hidden  { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }

.rounded     { border-radius: var(--radius); }
.rounded-card{ border-radius: var(--radius-card); }
.rounded-full{ border-radius: 9999px; }

.border      { border: 1px solid hsl(var(--border)); }
.border-0    { border: none; }
.border-t    { border-top: 1px solid hsl(var(--border)); }
.border-b    { border-bottom: 1px solid hsl(var(--border)); }

.shadow-sm   { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow      { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); }
.shadow-md   { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.shadow-lg   { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); }

.opacity-50  { opacity: 0.5; }
.opacity-70  { opacity: 0.7; }
.opacity-100 { opacity: 1; }

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

.select-none { user-select: none; }

/* ============================================================
   29. モバイル対応（@media queries）
   ============================================================ */

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }

  .sidebar-toggle {
    display: none;
  }

  .sidebar {
    transform: translateX(-100%);
    top: 0;
    z-index: 105;
    width: var(--sidebar-width) !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* collapsed状態をモバイルでリセット */
  .sidebar.collapsed {
    width: var(--sidebar-width) !important;
  }

  .sidebar.collapsed .sidebar-section-title {
    opacity: 1 !important;
    height: auto !important;
    padding: 4px 10px !important;
  }

  .sidebar.collapsed .sidebar-nav-item {
    justify-content: flex-start !important;
    padding: 3px 10px !important;
    width: auto !important;
    margin: 0 0 2px !important;
    gap: 10px !important;
  }

  .sidebar.collapsed .sidebar-nav-item-text {
    display: block !important;
  }

  .sidebar.collapsed .sidebar-tooltip {
    display: none;
  }

  .sidebar.collapsed .sidebar-footer {
    display: flex !important;
  }

  /* sidebar-brandテキストはcollapsedでも常時表示 */
  .sidebar .sidebar-brand,
  .sidebar.collapsed .sidebar-brand {
    justify-content: flex-start !important;
    padding: 0 16px !important;
  }

  .sidebar .sidebar-brand-text,
  .sidebar.collapsed .sidebar-brand-text {
    display: block !important;
  }

  /* ヘッダーは左端から */
  .header,
  .header.sidebar-collapsed {
    left: 0 !important;
  }

  .header-center {
    display: none;
  }

  .header-user {
    display: none;
  }

  .main-content {
    margin-left: 0 !important;
  }

  /* ページヘッダー縦積み */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-actions {
    width: 100%;
  }

  /* KPIグリッド */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* タブ折り返し */
  .tabs-list {
    flex-wrap: wrap;
    height: auto;
    padding: 4px;
  }

  .tab-trigger {
    flex: 1;
    min-width: 60px;
  }

  /* グリッド */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .toast {
    min-width: unset;
    max-width: 100%;
  }
}

@media (min-width: 769px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   30. コピペコントロール
   ============================================================ */

.copy-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid hsl(var(--border));
}

.copy-row:last-child {
  border-bottom: none;
}

.copy-row > .btn {
  flex-shrink: 0;
  margin-top: 1px;
}

.copy-label {
  flex: 1;
  font-size: 13px;
  color: hsl(var(--foreground));
  line-height: 1.6;
  word-break: break-all;
}

/* ============================================================
   31. セマンティックカラーユーティリティ
   ============================================================ */

.bg-blue-50   { background-color: hsl(var(--blue-50)); }
.bg-blue-100  { background-color: hsl(var(--blue-100)); }
.text-blue-600{ color: hsl(var(--blue-600)); }
.text-blue-800{ color: hsl(var(--blue-800)); }

.bg-green-50   { background-color: hsl(var(--green-50)); }
.bg-green-100  { background-color: hsl(var(--green-100)); }
.text-green-600{ color: hsl(var(--green-600)); }
.text-green-800{ color: hsl(var(--green-800)); }

.bg-red-50   { background-color: hsl(var(--red-50)); }
.bg-red-100  { background-color: hsl(var(--red-100)); }
.text-red-600{ color: hsl(var(--red-600)); }
.text-red-800{ color: hsl(var(--red-800)); }

.bg-yellow-50   { background-color: hsl(var(--yellow-50)); }
.bg-yellow-100  { background-color: hsl(var(--yellow-100)); }
.text-yellow-600{ color: hsl(var(--yellow-600)); }
.text-yellow-800{ color: hsl(var(--yellow-800)); }

.bg-navy-50   { background-color: hsl(var(--navy-50)); }
.bg-navy-100  { background-color: hsl(var(--navy-100)); }
.text-navy-600{ color: hsl(var(--navy-600)); }
.text-navy-800{ color: hsl(var(--navy-800)); }

.bg-gray-50   { background-color: hsl(var(--gray-50)); }
.bg-gray-100  { background-color: hsl(var(--gray-100)); }
.bg-gray-200  { background-color: hsl(var(--gray-200)); }
.text-gray-500{ color: hsl(var(--gray-500)); }
.text-gray-600{ color: hsl(var(--gray-600)); }