/**
 * Tailwind-class shim — operations (and similar) templates use Tailwind-style
 * utility classes, but the app does not ship Tailwind. Without these rules,
 * body text stays the dark-theme gray while “white card” backgrounds do not
 * apply, producing faint / unreadable copy. Keep this file scoped to common
 * class names only; extend as new utilities appear in templates.
 */

/* ----- Layout ----- */
.container {
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-2xl { max-width: 42rem; }

/* ----- Flex / grid ----- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-4 { gap: 1rem; }

/* Tailwind “space-*” approximations for flex children */
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }

/* ----- Spacing ----- */
.block { display: block; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-6 { margin-top: 1.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.ml-2 { margin-left: 0.5rem; }
.pt-4 { padding-top: 1rem; }

/* ----- Typography ----- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }
.leading-5 { line-height: 1.25rem; }
.whitespace-nowrap { white-space: nowrap; }

/* ----- Slate / gray text (readable on white) ----- */
.text-gray-900 { color: #0f172a !important; }
.text-gray-700 { color: #334155 !important; }
.text-gray-600 { color: #475569 !important; }
.text-gray-500 { color: #64748b !important; }
.text-gray-400 { color: #94a3b8 !important; }

.text-blue-600 { color: #2563eb !important; }
.text-green-600 { color: #16a34a !important; }
.text-green-800 { color: #166534 !important; }
.text-orange-600 { color: #ea580c !important; }
.text-red-600 { color: #dc2626 !important; }
.text-red-800 { color: #991b1b !important; }
.text-yellow-800 { color: #854d0e !important; }
.text-white { color: #ffffff !important; }

/* ----- Surfaces ----- */
.bg-white {
  background-color: #ffffff !important;
  color: #0f172a;
}
.bg-gray-50 { background-color: #f9fafb !important; }
.bg-blue-600 {
  background-color: #2563eb !important;
  color: #ffffff !important;
}
.bg-green-100 { background-color: #dcfce7 !important; }
.bg-red-100 { background-color: #fee2e2 !important; }
.bg-yellow-100 { background-color: #fef9c3 !important; }

/* ----- Borders / divide ----- */
.border { border-width: 1px; border-style: solid; border-color: #e5e7eb; }
.border-t { border-top-width: 1px; border-top-style: solid; border-top-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db !important; }
.border-transparent { border-color: transparent !important; }

.divide-y > * + * {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #e5e7eb;
}
.divide-gray-200 > * + * {
  border-top-color: #e5e7eb;
}

/* ----- Radius / shadow ----- */
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-full { border-radius: 9999px; }
.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.overflow-hidden { overflow: hidden; }

/* ----- Sizing ----- */
.w-full { width: 100%; }
.min-w-full { min-width: 100%; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }

/* Form controls that use gray borders — force dark ink on white field */
input.border-gray-300,
textarea.border-gray-300,
select.border-gray-300 {
  background-color: #ffffff;
  color: #0f172a;
}
input.border-gray-300::placeholder,
textarea.border-gray-300::placeholder {
  color: #64748b;
}

/* ----- Hover (escape colon for valid CSS class names) ----- */
.hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }
.hover\:bg-gray-50:hover { background-color: #f9fafb !important; }
.hover\:text-blue-800:hover { color: #1e40af !important; }
.hover\:text-blue-900:hover { color: #1e3a8a !important; }
.hover\:text-gray-900:hover { color: #0f172a !important; }
.hover\:text-green-900:hover { color: #14532d !important; }

/* ----- Focus (lightweight; not a full ring clone) ----- */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(59, 130, 246, 0.45);
}
.focus\:ring-blue-500:focus {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(59, 130, 246, 0.45);
}
.focus\:ring-offset-2:focus {
  outline-offset: 2px;
}
.focus\:border-blue-500:focus {
  border-color: #3b82f6 !important;
}

/* ================================================================
   Bootstrap 5 compatibility shims
   Templates that use Bootstrap utility classes render correctly
   without requiring Bootstrap to be loaded.
   ================================================================ */

/* Layout */
.container-fluid { width: 100%; padding: 0; }

/* Flexbox utilities */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }

/* Bootstrap grid (simple flexbox fallback) */
.row { display: flex; flex-wrap: wrap; margin: -0.375rem; }
.row.g-2 > * { padding: 0.25rem; }
.row.g-3 > * { padding: 0.375rem; }
.col-md-2 { flex: 0 0 auto; width: 16.6667%; min-width: 140px; padding: 0.375rem; }
.col-md-3 { flex: 0 0 auto; width: 25%; min-width: 180px; padding: 0.375rem; }
.col-md-4 { flex: 0 0 auto; width: 33.3333%; min-width: 220px; padding: 0.375rem; }
.col-md-6 { flex: 0 0 auto; width: 50%; min-width: 260px; padding: 0.375rem; }
.col-md-8 { flex: 0 0 auto; width: 66.6667%; padding: 0.375rem; }
.col-md-12 { flex: 0 0 auto; width: 100%; padding: 0.375rem; }
.col-lg-4 { flex: 0 0 auto; width: 33.3333%; min-width: 220px; padding: 0.375rem; }
.col-lg-8 { flex: 0 0 auto; width: 66.6667%; padding: 0.375rem; }
@media (max-width: 767px) {
  .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-12,
  .col-lg-4, .col-lg-8 { width: 100% !important; min-width: 0; }
}

/* Spacing utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 2rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.ms-auto { margin-left: auto !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.ps-3 { padding-left: 0.75rem !important; }
.pe-3 { padding-right: 0.75rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

/* Sizing */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Typography */
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-primary { color: #3b82f6 !important; }
.text-success { color: #22c55e !important; }
.text-warning { color: #f59e0b !important; }
.text-danger { color: #ef4444 !important; }
.text-info { color: #6366f1 !important; }
.text-dark { color: #1e293b !important; }
.text-white { color: #fff !important; }
.small { font-size: 0.85rem !important; }
.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }

/* Bootstrap card aliases (design-system uses .content-card) */
.card { background: var(--card-bg, #1e293b); border: 1px solid var(--border-color, rgba(148,163,184,0.18)); border-radius: var(--radius-lg, 0.75rem); }
.card-body { padding: 1.25rem 1.5rem; }
.card-header { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border-color, rgba(148,163,184,0.18)); font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.card-title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; }
.border-primary { border-left: 3px solid #3b82f6 !important; }
.border-success { border-left: 3px solid #22c55e !important; }
.border-warning { border-left: 3px solid #f59e0b !important; }
.border-danger { border-left: 3px solid #ef4444 !important; }
.border-info { border-left: 3px solid #6366f1 !important; }
.bg-primary { background: rgba(59,130,246,0.9) !important; color: #fff !important; }
.bg-success { background: rgba(34,197,94,0.9) !important; color: #fff !important; }
.bg-warning { background: rgba(251,191,36,0.9) !important; }
.bg-info { background: rgba(99,102,241,0.9) !important; color: #fff !important; }
.bg-danger { background: rgba(239,68,68,0.9) !important; color: #fff !important; }
.bg-dark { background: rgba(15,23,42,0.95) !important; color: #fff !important; }
.bg-secondary { background: rgba(100,116,139,0.4) !important; }

/* Forms */
.form-select { width: 100%; padding: 0.5rem 0.6rem; border-radius: 0.5rem; border: 1px solid rgba(148,163,184,0.5); background: rgba(15,23,42,0.9); color: var(--text-main); }
.form-label { display: block; font-size: 0.8rem; color: var(--text-soft); margin-bottom: 0.25rem; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid rgba(148,163,184,0.15); font-size: 0.88rem; vertical-align: middle; }
.table-sm th, .table-sm td { padding: 0.35rem 0.65rem; }
.table-striped tbody tr:nth-child(even) { background: rgba(148,163,184,0.05); }
.table-light thead, .table-light th { background: rgba(148,163,184,0.1); color: var(--text-main); }
.table-bordered { border: 1px solid rgba(148,163,184,0.2); }
.table-bordered th, .table-bordered td { border: 1px solid rgba(148,163,184,0.15); }

/* Buttons */
.btn-outline-secondary { background: transparent; border: 1px solid rgba(148,163,184,0.5); color: var(--text-main); }
.btn-outline-secondary:hover { background: rgba(148,163,184,0.15); }
.btn-outline-danger { background: transparent; border: 1px solid rgba(239,68,68,0.5); color: #ef4444; }
.btn-outline-danger:hover { background: rgba(239,68,68,0.1); }
.btn-outline-primary { background: transparent; border: 1px solid rgba(59,130,246,0.5); color: #3b82f6; }
.btn-outline-primary:hover { background: rgba(59,130,246,0.1); }

/* Bootstrap nav tabs (without JS — tabs still shown, first is active) */
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; list-style: none; margin: 0; }
.nav-tabs { border-bottom: 1px solid rgba(148,163,184,0.2); margin-bottom: 1rem; }
.nav-tabs .nav-item { margin: 0; }
.nav-tabs .nav-link, .nav-tabs button.nav-link {
  display: block; padding: 0.5rem 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
  border: 1px solid transparent;
  color: var(--text-soft);
  background: none;
  cursor: pointer;
  font-size: 0.88rem;
  text-decoration: none;
}
.nav-tabs .nav-link:hover { color: var(--text-main); background: rgba(148,163,184,0.08); }
.nav-tabs .nav-link.active { border-color: rgba(148,163,184,0.2) rgba(148,163,184,0.2) transparent; background: var(--card-bg, #1e293b); color: var(--text-main); }
.tab-content .tab-pane { display: none; }
.tab-content .tab-pane.show.active { display: block; }

/* Alerts */
.alert-success { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; border-radius: 0.5rem; padding: 0.75rem 1rem; }
.alert-warning { background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); color: #f59e0b; border-radius: 0.5rem; padding: 0.75rem 1rem; }
.alert-danger { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; border-radius: 0.5rem; padding: 0.75rem 1rem; }
.alert-info { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3); color: #3b82f6; border-radius: 0.5rem; padding: 0.75rem 1rem; }

/* Bootstrap badge aliases */
.badge.bg-primary { background: rgba(59,130,246,0.9) !important; color: #fff; }
.badge.bg-success { background: rgba(34,197,94,0.9) !important; color: #fff; }
.badge.bg-warning { background: rgba(251,191,36,0.9) !important; }
.badge.bg-danger { background: rgba(239,68,68,0.9) !important; color: #fff; }
.badge.bg-info { background: rgba(99,102,241,0.9) !important; color: #fff; }
.badge.bg-dark { background: rgba(15,23,42,0.95) !important; color: #fff; }
.badge.bg-secondary { background: rgba(100,116,139,0.4) !important; }

/* Bootstrap icons (graceful fallback) */
.bi::before { content: ""; }  /* prevent broken square boxes */

/* Bootstrap progress bars */
.progress { height: 0.5rem; background: rgba(148,163,184,0.2); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: #22c55e; border-radius: 999px; transition: width 0.4s ease; }