/*
 * 自作画面で使う見た目。
 *
 * 🚨 Filament の CSS は作り置きで、使っていない Tailwind の class は入っていない。
 *    無い class を書くと **何のエラーも出ずに見た目だけ壊れる**（白地に白文字など）。
 *    サーバに node が無くビルドできないので、要るものだけをここに手で書く。
 *    増やしたら factoryflow:check-css-classes が守る。
 *
 * 色は Filament の変数（--gray-*）に乗せて、テーマの切り替えに追随させる。
 * 変数の無い色（琥珀・緑・赤・青・紫）は実色で書く。
 */

/* ── 余白 ───────────────────────────── */
.ff-scope .p-5 { padding: 1.25rem; }
.ff-scope .mt-4 { margin-top: 1rem; }
.ff-scope .mb-1 { margin-bottom: 0.25rem; }
.ff-scope .ms-2 { margin-inline-start: 0.5rem; }
.ff-scope .ms-4 { margin-inline-start: 1rem; }
.ff-scope .ps-5 { padding-inline-start: 1.25rem; }

/* ── 大きさ ─────────────────────────── */
.ff-scope .h-2 { height: 0.5rem; }
.ff-scope .w-2 { width: 0.5rem; }

/* ── 並べ方 ─────────────────────────── */
.ff-scope .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .ff-scope .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ff-scope .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── 枠 ─────────────────────────────── */
.ff-scope .border-t-2 { border-top-width: 2px; }
.ff-scope .border-red-500 { border-color: rgb(239 68 68); }
.ff-scope .hover\:shadow:hover { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.ff-scope .hover\:underline:hover { text-decoration-line: underline; }

/* ── 印の色（丸い点） ───────────────── */
.ff-scope .bg-green-500  { background-color: rgb(34 197 94); }
.ff-scope .bg-blue-500   { background-color: rgb(59 130 246); }
.ff-scope .bg-purple-500 { background-color: rgb(168 85 247); }

/* ── 注意（琥珀） ───────────────────── */
.ff-scope .bg-amber-50   { background-color: rgb(255 251 235); }
.ff-scope .bg-amber-100  { background-color: rgb(254 243 199); }
.ff-scope .bg-amber-500  { background-color: rgb(245 158 11); }
.ff-scope .text-amber-600 { color: rgb(217 119 6); }
.ff-scope .text-amber-700 { color: rgb(180 83 9); }
.ff-scope .text-amber-800 { color: rgb(146 64 14); }
.ff-scope .text-amber-950 { color: rgb(69 26 3); }

/* ── 問題（赤） ─────────────────────── */
.ff-scope .bg-red-100    { background-color: rgb(254 226 226); }
.ff-scope .text-red-600  { color: rgb(220 38 38); }
.ff-scope .text-red-700  { color: rgb(185 28 28); }
.ff-scope .text-red-800  { color: rgb(153 27 27); }

/* ── よい（緑） ─────────────────────── */
.ff-scope .bg-emerald-600 { background-color: rgb(5 150 105); }
.ff-scope .text-green-600 { color: rgb(22 163 74); }

/* ── 文字（テーマに追随） ───────────── */
.ff-scope .text-gray-800 { color: rgb(var(--gray-800)); }
.ff-scope .text-gray-900 { color: rgb(var(--gray-900)); }

/* ── 暗い画面 ───────────────────────── */
/* 🚨 Filament は <html> に .dark を付ける。opacity 付きの class は
      作り置きに無いので、ここで実体を書く。 */
.dark .ff-scope .dark\:bg-gray-800\/40 { background-color: rgb(var(--gray-800) / 0.4); }
.dark .ff-scope .dark\:bg-gray-700\/50 { background-color: rgb(var(--gray-700) / 0.5); }
.dark .ff-scope .dark\:bg-amber-900\/20 { background-color: rgb(120 53 15 / 0.2); }
.dark .ff-scope .dark\:bg-amber-900\/30 { background-color: rgb(120 53 15 / 0.3); }
.dark .ff-scope .dark\:bg-amber-900\/40 { background-color: rgb(120 53 15 / 0.4); }
.dark .ff-scope .dark\:bg-red-900\/30 { background-color: rgb(127 29 29 / 0.3); }
.dark .ff-scope .dark\:bg-red-900\/40 { background-color: rgb(127 29 29 / 0.4); }
.dark .ff-scope .dark\:text-amber-200 { color: rgb(253 230 138); }
.dark .ff-scope .dark\:text-amber-300 { color: rgb(252 211 77); }
.dark .ff-scope .dark\:text-red-200 { color: rgb(254 202 202); }
.dark .ff-scope .dark\:text-red-300 { color: rgb(252 165 165); }
.dark .ff-scope .dark\:text-gray-100 { color: rgb(var(--gray-100)); }
.dark .ff-scope .dark\:text-gray-300 { color: rgb(var(--gray-300)); }
.dark .ff-scope .dark\:divide-gray-700 > * + * { border-color: rgb(var(--gray-700)); }
.dark .ff-scope .dark\:hover\:bg-gray-700:hover { background-color: rgb(var(--gray-700)); }

/* ── Filament の色名だが作り置きに無いもの ─────────
   🚨 --warning-* / --info-* の変数は用意されていないので実色で書く。 */
.ff-scope .bg-warning-100  { background-color: rgb(254 243 199); }
.ff-scope .text-warning-800 { color: rgb(146 64 14); }
.ff-scope .bg-info-100     { background-color: rgb(219 234 254); }
.ff-scope .text-info-800   { color: rgb(30 64 175); }
.ff-scope .text-success-600 { color: rgb(22 163 74); }
.dark .ff-scope .dark\:bg-warning-900  { background-color: rgb(120 53 15); }
.dark .ff-scope .dark\:text-warning-200 { color: rgb(253 230 138); }
.dark .ff-scope .dark\:bg-info-900     { background-color: rgb(30 58 138); }
.dark .ff-scope .dark\:text-info-200   { color: rgb(191 219 254); }
.dark .ff-scope .dark\:text-success-400 { color: rgb(74 222 128); }