/* shadcn/ui のデザイン言語に寄せたトークンとコンポーネント。
 *
 * React を入れない方針のため、shadcn のコンポーネント実装そのものは
 * 使わず、見た目の決まり（色トークン・角丸・境界線・フォーカスリング・
 * 余白の取り方）を素の CSS で再現している。
 * レイアウトのユーティリティは Tailwind の CDN 版を併用する。
 *
 * 配色の方針:
 *   無彩色だけだと「押せる場所」が分かりにくいという指摘を受けて、
 *   操作できる要素にだけ青を割り当てている。
 *     青   = 押せる/たどれる（主ボタン・リンク・電話番号・フォーカス）
 *     灰   = 押せるが主役ではない（副ボタン）
 *     赤   = 取り消し・注意（架電NG）
 *     緑/橙 = 状態の良し悪し（取得済み/確度低）
 *   背景をわずかに青寄りの灰にして、白いカードを浮かせている。
 */

:root {
  --background: 220 20% 97%;
  --foreground: 222 25% 14%;
  --card: 0 0% 100%;
  --muted: 220 16% 94%;
  --muted-foreground: 220 9% 46%;
  --border: 220 14% 88%;
  --input: 220 14% 85%;
  --primary: 221 83% 53%;
  --primary-hover: 221 83% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 16% 96%;
  --secondary-foreground: 222 25% 20%;
  --destructive: 0 74% 50%;
  --destructive-foreground: 0 0% 100%;
  --success: 152 62% 34%;
  --warning: 32 95% 44%;
  --ring: 221 83% 53%;
  --radius: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 222 24% 10%;
    --foreground: 210 20% 96%;
    --card: 222 20% 14%;
    --muted: 220 16% 20%;
    --muted-foreground: 220 12% 65%;
    --border: 220 14% 24%;
    --input: 220 14% 28%;
    --primary: 217 91% 62%;
    --primary-hover: 217 91% 70%;
    --primary-foreground: 222 47% 11%;
    --secondary: 220 16% 20%;
    --secondary-foreground: 210 20% 96%;
    --destructive: 0 84% 62%;
    --success: 152 60% 48%;
    --warning: 38 92% 58%;
    --ring: 217 91% 62%;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* --- Card --- */
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 1px 3px hsl(222 25% 14% / .06), 0 1px 2px hsl(222 25% 14% / .04);
}
.card-header { padding: 1.25rem 1.25rem 0.75rem; }
.card-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.card-desc { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin: 0.25rem 0 0; }
.card-content { padding: 1.25rem; }

/* --- Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.8125rem;
  font-weight: 600;
  height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid transparent;
  cursor: pointer;
  /* 面と影を付けて、文字ではなくボタンだと分かるようにする */
  box-shadow: 0 1px 2px hsl(222 25% 14% / .08);
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s;
  text-decoration: none;
  user-select: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--ring) / .35);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* 主ボタン（検索）。この画面で最初に押すものを青で示す */
.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 2px hsl(var(--primary) / .35);
}
.btn-primary:hover:not(:disabled) { background: hsl(var(--primary-hover)); }

/* 副ボタン。透明ではなく面を持たせ、押せることが分かるようにする */
.btn-outline {
  background: hsl(var(--card));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--input));
}
.btn-outline:hover:not(:disabled) {
  background: hsl(var(--secondary));
  border-color: hsl(var(--primary) / .5);
  color: hsl(var(--primary));
}

.btn-ghost { background: transparent; color: hsl(var(--muted-foreground)); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { background: hsl(var(--muted)); color: hsl(var(--primary)); }

.btn-destructive {
  background: hsl(var(--card));
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / .35);
}
.btn-destructive:hover:not(:disabled) {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  border-color: hsl(var(--destructive));
}

.btn-sm { height: 1.875rem; padding: 0 0.625rem; font-size: 0.75rem; }

/* --- Input / Select / Label --- */
.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.375rem;
}
.input, .select {
  display: block;
  width: 100%;
  height: 2.25rem;
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / .18);
}
.input::placeholder { color: hsl(var(--muted-foreground) / .7); }

/* iOS Safari は 16px 未満の入力欄でフォーカス時に自動ズームするため、
   狭い画面では 16px に上げる。 */
@media (max-width: 640px) {
  .input, .select { font-size: 16px; height: 2.75rem; }
  .btn { height: 2.75rem; }
  .btn-sm { height: 2.25rem; }
}

.checkbox {
  width: 1rem; height: 1rem; accent-color: hsl(var(--primary));
  border-radius: 3px; cursor: pointer;
}

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }
.badge-success { background: hsl(var(--success) / .13); color: hsl(var(--success)); border-color: hsl(var(--success) / .3); }
.badge-warning { background: hsl(var(--warning) / .15); color: hsl(var(--warning)); border-color: hsl(var(--warning) / .35); }
.badge-danger { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .3); }
.badge-outline { border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); background: hsl(var(--card)); }

/* --- Table --- */
.table-wrap {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  background: hsl(var(--card));
}
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
table.data th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  color: hsl(var(--secondary-foreground));
  background: hsl(var(--muted));
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
  white-space: nowrap;
}
table.data td {
  padding: 0.75rem;
  border-bottom: 1px solid hsl(var(--border) / .7);
  vertical-align: top;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: hsl(var(--muted) / .35); }

/* 狭い画面ではテーブルをカードに組み替える。
   架電しながら片手で見るため、会社名と電話番号が縦に並ぶ形にする。 */
@media (max-width: 768px) {
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data thead { display: none; }
  table.data tr {
    border-bottom: 1px solid hsl(var(--border));
    padding: 0.875rem 0.75rem;
  }
  table.data tbody tr:last-child { border-bottom: none; }
  table.data td {
    padding: 0.1875rem 0;
    border: none;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
  }
  table.data td::before {
    content: attr(data-label);
    flex: 0 0 5.5rem;
    font-size: 0.6875rem;
    color: hsl(var(--muted-foreground));
  }
  table.data td[data-label="会社名"] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
  }
  table.data td[data-label="会社名"]::before { display: none; }
  /* 行番号は見出しの上に小さく添える。「No.」のラベルは省く */
  table.data td[data-label="No."] {
    display: block;
    text-align: left;
    font-size: 0.6875rem;
    margin-bottom: 0.125rem;
  }
  table.data td[data-label="No."]::before { display: none; }
  table.data td:empty { display: none; }
}

/* --- トースト通知 --- */
.toast-container {
  position: fixed;
  /* ヘッダー（sticky）の直下・画面右寄せ。ヘッダーを覆うと
     「架電NGリスト」「ログアウト」が隠れてしまうため下にずらす。 */
  top: 3.75rem;
  right: 1rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-left-width: 3px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px hsl(222 25% 14% / .12);
  padding: 0.75rem 0.75rem 0.75rem 0.875rem;
  width: 100%;
  pointer-events: auto;
  opacity: 0;
  /* 画面の右外から滑り込ませ、右へ戻って消える */
  transform: translateX(calc(100% + 1.5rem));
  transition: opacity .22s ease, transform .22s cubic-bezier(.22, .8, .3, 1);
}
.toast-shown { opacity: 1; transform: translateX(0); }
.toast-leaving { opacity: 0; transform: translateX(calc(100% + 1.5rem)); }

.toast-success { border-left-color: hsl(var(--success)); }
.toast-error { border-left-color: hsl(var(--destructive)); }
.toast-info { border-left-color: hsl(var(--primary)); }

.toast-body { flex: 1; min-width: 0; }
.toast-title { margin: 0; font-size: 0.8125rem; font-weight: 600; }
.toast-desc {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  overflow-wrap: anywhere;
}
.toast-action {
  margin-top: 0.375rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.toast-action:hover { color: hsl(var(--primary-hover)); }
.toast-action:disabled { opacity: .5; cursor: not-allowed; }

.toast-close {
  background: none;
  border: none;
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.125rem;
  cursor: pointer;
}
.toast-close:hover { color: hsl(var(--foreground)); }

@media (max-width: 640px) {
  .toast-container {
    top: 3.5rem;
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}

/* 行番号の列。狭くして本文の邪魔をしない。 */
.no-col { width: 3.5rem; }
table.data td[data-label="No."] {
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 検索条件を変えたが、まだ検索していないことの案内 */
.dirty-hint {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  color: hsl(var(--warning));
}

/* 並べ替えの見出しボタン。見出しの見た目のまま押せることを示す。 */
.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.sort-btn:hover { color: hsl(var(--primary)); }
.sort-btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: 3px; }
.sort-mark {
  font-size: 0.625rem;
  line-height: 1;
  color: hsl(var(--muted-foreground) / .45);
}
/* 現在の並べ替え軸だけ印を濃くする */
.sort-btn[aria-sort] { color: hsl(var(--primary)); }
.sort-btn[aria-sort] .sort-mark { color: hsl(var(--primary)); }

/* ページ送り。一覧の上下に同じものを置くため、表示はクラスで決める。 */
.pager { display: flex; }

/* --- リンク・その他 --- */
.link { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.link:hover { color: hsl(var(--primary-hover)); }

/* 電話番号はこの画面で最も重要な情報かつ発信できるリンク。青＋太字で目立たせる */
.tel-link {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.875rem;
  color: hsl(var(--primary));
  text-decoration: none;
}
.tel-link:hover { text-decoration: underline; }

.muted { color: hsl(var(--muted-foreground)); }
.alert {
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
}
.alert-danger { border-color: hsl(var(--destructive) / .35); background: hsl(var(--destructive) / .07); color: hsl(var(--destructive)); }
.alert-warning { border-color: hsl(var(--warning) / .4); background: hsl(var(--warning) / .1); color: hsl(38 92% 32%); }
.alert:empty { display: none; }

.progress { height: 0.5rem; background: hsl(var(--muted)); border-radius: 9999px; overflow: hidden; }
.progress-fill { height: 100%; background: hsl(var(--primary)); width: 0%; transition: width .3s ease; }

/* 読み込み中のスケルトン */
.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / .5) 50%, hsl(var(--muted)) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
  height: 0.875rem;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.spinner {
  width: 0.875rem; height: 0.875rem;
  border: 2px solid hsl(var(--primary-foreground) / .35);
  border-top-color: hsl(var(--primary-foreground));
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }