/* Addon: Bootstrap Metronic demo58 + Modderr wordmark only. */

/* Wordmark logo */
.site-logo {
  text-decoration: none;
  color: inherit;
}

.site-logo:hover {
  opacity: 0.9;
}

.site-logo-text {
  font-family: 'Outfit', Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.site-logo-accent {
  color: var(--bs-primary);
}

.modderr-layout .container-xxl {
  max-width: 1200px;
}

/* ------------------------------------------------------------
   TEMPORARY compatibility for remaining Tailwind Metronic pages
   (admin/staff/modder). This prevents broken/unstyled screens
   while we refactor them to native Bootstrap Metronic markup.
------------------------------------------------------------- */
.kt-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  box-shadow: var(--bs-box-shadow-sm);
}
.kt-card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.kt-card-content,
.kt-card-group {
  padding: 1.5rem;
}
.kt-card-table .kt-card-content {
  padding: 0;
}
.kt-card-title {
  font-weight: 700;
  color: var(--bs-heading-color);
  margin: 0;
}
.kt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 0.475rem;
  border: 1px solid transparent;
  font-weight: 600;
}
.kt-btn-primary {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
.kt-btn-outline,
.kt-btn-ghost,
.kt-btn-secondary {
  background: var(--bs-light);
  border-color: var(--bs-border-color);
  color: var(--bs-gray-800);
}
.kt-input {
  display: block;
  width: 100%;
  padding: 0.825rem 1rem;
  border-radius: 0.475rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}
.kt-form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--bs-gray-700);
}
.kt-table {
  width: 100%;
  margin: 0;
}
.kt-table th,
.kt-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px dashed var(--bs-border-color);
  vertical-align: middle;
}
.kt-table thead th {
  font-weight: 700;
  color: var(--bs-gray-600);
}
.link {
  color: var(--bs-primary);
  text-decoration: none;
}
.link:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Section spacing and card rhythm (Phase 1 design system)
------------------------------------------------------------- */
.addon-section {
  margin-bottom: 1.5rem;
}
.addon-section:last-child {
  margin-bottom: 0;
}
/* Card sections: consistent gap between stacked cards */
.card.addon-section,
.kt-card.addon-section {
  margin-bottom: 1.75rem;
}
.card.addon-section:last-child,
.kt-card.addon-section:last-child {
  margin-bottom: 0;
}

/* Success/error alert fallbacks (Bootstrap-compatible) */
.text-green-600, .text-green-400 { color: var(--bs-success) !important; }
.bg-green-50, .dark\:bg-green-900\/20 { background-color: rgba(var(--bs-success-rgb), 0.15) !important; }
.border-green-200, .dark\:border-green-800 { border-color: var(--bs-success) !important; }
.text-red-600, .text-red-400 { color: var(--bs-danger) !important; }
.bg-red-50, .dark\:bg-red-900\/20 { background-color: rgba(var(--bs-danger-rgb), 0.15) !important; }
.border-red-200, .dark\:border-red-800 { border-color: var(--bs-danger) !important; }
.text-secondary-foreground { color: var(--bs-secondary-color); }
.bg-muted\/50 { background-color: var(--bs-light); }
.border-border { border-color: var(--bs-border-color); }
.rounded-md { border-radius: 0.475rem; }

/* Utility aliases (Bootstrap equivalents for mixed-class pages) */
.text-lg { font-size: 1.125rem; }
.font-medium { font-weight: 500; }
.text-mono { font-family: ui-monospace, monospace; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 1rem; }
.gap-1 { gap: 0.25rem; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.p-6 { padding: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-auto { margin-top: auto; }
.min-h-[120px] { min-height: 120px; }
.fs-8 { font-size: 0.875rem; }
.text-muted-foreground { color: var(--bs-secondary-color); }
.text-gray-700 { color: var(--bs-body-color); }

/* ------------------------------------------------------------
   Reusable modal shell (for in-page edit modals)
------------------------------------------------------------- */
.modal-content.addon-modal-content { border-radius: 0.75rem; }
.addon-modal-body .form-label { font-weight: 600; color: var(--bs-gray-700); }