/* ============================================================================
   SLAM Design System - Tailwind / BS4 Compatibility Layer  (GENERATED)
   ----------------------------------------------------------------------------
   Many pages were authored with Tailwind utility classes (and some Bootstrap-4
   spacing) that have no runtime in this Bootstrap-5 app, so they rendered
   unstyled. This file implements exactly the utility classes in use, mapped to
   the SLAM design tokens: greys flip with the theme, blues rebrand to the
   accent, and reds/greens/yellows map to Bootstrap semantic tokens - so every
   page conforms in both light and dark automatically.

   Regenerate with:  python _gen_compat.py
   Do not edit by hand.
   ============================================================================ */

:root{
  --tw-gray-50: #f8fafc;
  --tw-gray-100: #f1f5f9;
  --tw-gray-200: #e2e8f0;
  --tw-gray-300: #cbd5e1;
  --tw-gray-400: #94a3b8;
  --tw-gray-500: #64748b;
  --tw-gray-600: #475569;
  --tw-gray-700: #334155;
  --tw-gray-800: #1e293b;
  --tw-gray-900: #0f172a;
  --tw-gray-950: #020617;
}

[data-bs-theme="dark"], [data-theme="dark"]{
  --tw-gray-50: #0b1220;
  --tw-gray-100: #121a2b;
  --tw-gray-200: #1a2436;
  --tw-gray-300: #243049;
  --tw-gray-400: #324159;
  --tw-gray-500: #64748b;
  --tw-gray-600: #94a3b8;
  --tw-gray-700: #cbd5e1;
  --tw-gray-800: #dbe4f0;
  --tw-gray-900: #f8fafc;
  --tw-gray-950: #ffffff;
}


/* ---- base utilities ---- */
.absolute{position:absolute}
.appearance-none{appearance:none;-webkit-appearance:none}
.bg-blue-600{background-color:var(--slam-accent)}
.bg-gray-100{background-color:var(--tw-gray-100)}
.bg-gray-300{background-color:var(--tw-gray-300)}
.bg-gray-50{background-color:var(--tw-gray-50)}
.bg-red-50{background-color:var(--bs-danger-bg-subtle)}
.bg-red-700{background-color:var(--bs-danger)}
.bg-yellow-100{background-color:var(--bs-warning-bg-subtle)}
.block{display:block}
.border-b-2{border-bottom-width:2px;border-bottom-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-gray-200{border-color:var(--tw-gray-200)}
.border-gray-300{border-color:var(--tw-gray-300)}
.border-red-200{border-color:var(--bs-danger)}
.border-red-300{border-color:var(--bs-danger)}
.border-t{border-top-width:1px;border-top-style:solid}
.cursor-pointer{cursor:pointer}
.divide-gray-200{border-color:var(--tw-gray-200)}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex{display:flex}
.focus\:border-blue-500:focus{border-color:var(--slam-accent)}
.focus\:border-red-500:focus{border-color:var(--bs-danger)}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{box-shadow:var(--slam-focus-ring)}
.focus\:ring-blue-500:focus{box-shadow:0 0 0 3px var(--slam-accent)}
.focus\:ring-offset-2:focus{--tw-ring-offset:0}
.focus\:ring-red-500:focus{box-shadow:0 0 0 3px var(--bs-danger)}
.focus\:ring-red-600:focus{box-shadow:0 0 0 3px var(--bs-danger)}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-medium{font-weight:500}
.font-weight-bold{font-weight:700}
.gap-6{gap:1.5rem}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid{display:grid}
.h-20{height:5rem}
.h-4{height:1rem}
.hidden{display:none}
.hover\:bg-blue-700:hover{background-color:var(--slam-accent-hover)}
.hover\:bg-gray-50:hover{background-color:var(--tw-gray-50)}
.hover\:bg-red-800:hover{background-color:var(--bs-danger)}
.hover\:border-gray-400:hover{border-color:var(--tw-gray-400)}
.inline-flex{display:inline-flex}
.inset-0{top:0;right:0;bottom:0;left:0}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.leading-6{line-height:1.5rem}
.leading-tight{line-height:1.25}
.max-w-2xl{max-width:42rem}
.max-w-7xl{max-width:80rem}
.max-w-lg{max-width:32rem}
.min-h-screen{min-height:100vh}
.min-w-0{min-width:0}
.ml-2{margin-left:0.5rem}
.ml-3{margin-left:0.75rem}
.ml-4{margin-left:1rem}
.mr-1{margin-right:0.25rem}
.mr-2{margin-right:0.5rem}
.mr-3{margin-right:0.75rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.pl-3{padding-left:0.75rem}
.placeholder-gray-400::placeholder{color:var(--tw-gray-400)}
.pr-10{padding-right:2.5rem}
.pt-8{padding-top:2rem}
.px-2\.5{padding-left:0.625rem;padding-right:0.625rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.relative{position:relative}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:var(--slam-radius-lg, 0.75rem)}
.rounded-md{border-radius:var(--slam-radius-md, 0.5rem)}
.space-x-3 > :not([hidden]) ~ :not([hidden]){margin-left:0.75rem}
.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:0.75rem}
.space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1rem}
.space-y-5 > :not([hidden]) ~ :not([hidden]){margin-top:1.25rem}
.space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:1.5rem}
.space-y-8 > :not([hidden]) ~ :not([hidden]){margin-top:2rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-blue-600{color:var(--slam-accent)}
.text-gray-300{color:var(--tw-gray-300)}
.text-gray-500{color:var(--tw-gray-500)}
.text-gray-600{color:var(--tw-gray-600)}
.text-gray-700{color:var(--tw-gray-700)}
.text-gray-800{color:var(--tw-gray-800)}
.text-gray-900{color:var(--tw-gray-900)}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-red-700{color:var(--bs-danger-text-emphasis)}
.text-red-800{color:var(--bs-danger-text-emphasis)}
.text-red-900{color:var(--bs-danger-text-emphasis)}
.text-right{text-align:right}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-yellow-800{color:var(--bs-warning-text-emphasis)}
.w-1\/4{width:25%}
.w-20{width:5rem}
.w-4{width:1rem}
.w-full{width:100%}

@media (min-width: 640px) {
  .sm\:col-span-2{grid-column:span 2 / span 2}
  .sm\:gap-4{gap:1rem}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:grid{display:grid}
  .sm\:items-start{align-items:flex-start}
  .sm\:max-w-md{max-width:28rem}
  .sm\:max-w-xs{max-width:20rem}
  .sm\:mt-0{margin-top:0}
  .sm\:mt-px{margin-top:1px}
  .sm\:p-6{padding:1.5rem}
  .sm\:pt-10{padding-top:2.5rem}
  .sm\:pt-2{padding-top:0.5rem}
  .sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:rounded-lg{border-radius:var(--slam-radius-lg, 0.75rem)}
  .sm\:space-y-5 > :not([hidden]) ~ :not([hidden]){margin-top:1.25rem}
  .sm\:text-sm{font-size:0.875rem;line-height:1.25rem}
  .sm\:w-full{width:100%}
}

@media (min-width: 1024px) {
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
}