/* ============================================================
   Components — Cards, Forms, Buttons, Badges, Alerts, Tables
   Dark Mode Safety Net Overrides for Tailwind semantic colors
   ============================================================ */

/* === Cards === */
.card {
  background: var(--vp-c-bg);
  border-radius: var(--card-border-radius);
  box-shadow: var(--vp-shadow-1);
  border: 1px solid var(--vp-c-divider);
}
.card:hover {
  box-shadow: var(--vp-shadow-2);
}

/* === Form Inputs === */
.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--vp-c-bg);
  color: var(--vp-c-text-1);
  font-size: 0.875rem;
  font-family: var(--vp-font-family-base);
}
.form-input:hover { border-color: var(--vp-c-brand-1); }
.form-input:focus { border-color: var(--vp-c-brand-1); box-shadow: 0 0 0 3px var(--vp-c-brand-soft); }
.form-input::placeholder { color: var(--vp-c-text-3); }
.form-input:disabled { opacity: 0.5; cursor: not-allowed; }
select.form-input { appearance: auto; }
textarea.form-input { min-height: 80px; resize: vertical; }

/* === Buttons === */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; border-radius: 8px; transition: all 0.2s; cursor: pointer; border: 1px solid transparent; font-size: 0.875rem; padding: 0.5rem 1rem; text-decoration: none; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.625rem 1.25rem; font-size: 1rem; }
.btn-brand { background: var(--vp-c-brand-1); color: #fff; }
.btn-brand:hover { background: var(--vp-c-brand-2); }
.btn-secondary { background: var(--vp-c-bg-soft); color: var(--vp-c-text-1); border-color: var(--vp-c-border); }
.btn-secondary:hover { background: var(--vp-c-bg-mute); }
.btn-ghost { background: transparent; color: var(--vp-c-text-2); }
.btn-ghost:hover { background: var(--vp-c-bg-soft); color: var(--vp-c-text-1); }
.btn-danger { background: var(--vp-c-danger-1); color: #fff; }
.btn-danger:hover { background: var(--vp-c-danger-2); }
.btn-accent { background: var(--blooms); color: #fff; }
.btn-accent:hover { opacity: 0.9; }

/* === Badges === */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.badge-success { background: var(--vp-c-success-soft); color: var(--vp-c-success); }
.badge-warning { background: var(--vp-c-warning-soft); color: var(--vp-c-warning); }
.badge-danger { background: var(--vp-c-danger-soft); color: var(--vp-c-danger-1); }
.badge-info { background: var(--vp-c-info-soft); color: var(--vp-c-info); }
.badge-neutral { background: var(--vp-c-bg-soft); color: var(--vp-c-text-2); }

/* === Alerts === */
.alert { padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid; font-size: 0.875rem; }
.alert-success { background: var(--vp-c-success-soft); border-color: var(--vp-c-success); color: var(--vp-c-success); }
.alert-warning { background: var(--vp-c-warning-soft); border-color: var(--vp-c-warning); color: var(--vp-c-warning); }
.alert-danger { background: var(--vp-c-danger-soft); border-color: var(--vp-c-danger-1); color: var(--vp-c-danger-1); }
.alert-info { background: var(--vp-c-info-soft); border-color: var(--vp-c-info); color: var(--vp-c-info); }

/* === Tables === */
.table-header { background: var(--vp-c-bg-soft); }

/* === Dark Mode Safety Net Overrides for standard Tailwind semantic colors === */
html.dark .bg-red-50    { background-color: rgba(229, 72, 77, 0.10) !important; }
html.dark .bg-red-100   { background-color: rgba(229, 72, 77, 0.16) !important; }
html.dark .text-red-600 { color: #F06B6E !important; }
html.dark .text-red-700 { color: #F06B6E !important; }
html.dark .text-red-800 { color: #F28B8E !important; }
html.dark .border-red-200 { border-color: rgba(229, 72, 77, 0.25) !important; }
html.dark .border-red-300 { border-color: rgba(229, 72, 77, 0.35) !important; }

html.dark .bg-green-50  { background-color: rgba(74, 222, 128, 0.10) !important; }
html.dark .bg-green-100 { background-color: rgba(74, 222, 128, 0.16) !important; }
html.dark .text-green-600 { color: #4ade80 !important; }
html.dark .text-green-700 { color: #4ade80 !important; }
html.dark .text-green-800 { color: #6AE89A !important; }
html.dark .border-green-200 { border-color: rgba(74, 222, 128, 0.25) !important; }
html.dark .border-green-300 { border-color: rgba(74, 222, 128, 0.35) !important; }

html.dark .bg-blue-50   { background-color: rgba(86, 154, 171, 0.10) !important; }
html.dark .bg-blue-100  { background-color: rgba(86, 154, 171, 0.16) !important; }
html.dark .text-blue-600 { color: #6BB5C5 !important; }
html.dark .text-blue-700 { color: #6BB5C5 !important; }
html.dark .text-blue-800 { color: #8CC8D4 !important; }
html.dark .border-blue-200 { border-color: rgba(86, 154, 171, 0.25) !important; }

html.dark .bg-yellow-50  { background-color: rgba(210, 171, 78, 0.10) !important; }
html.dark .bg-yellow-100 { background-color: rgba(210, 171, 78, 0.16) !important; }
html.dark .text-yellow-600 { color: #D2AB4E !important; }
html.dark .text-yellow-800 { color: #E0C06E !important; }
html.dark .border-yellow-200 { border-color: rgba(210, 171, 78, 0.25) !important; }

html.dark .bg-orange-50  { background-color: rgba(244, 128, 32, 0.10) !important; }
html.dark .bg-orange-100 { background-color: rgba(244, 128, 32, 0.16) !important; }
html.dark .text-orange-600 { color: #F5923E !important; }
html.dark .text-orange-800 { color: #F7A862 !important; }
html.dark .border-orange-200 { border-color: rgba(244, 128, 32, 0.25) !important; }

html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.16) !important; }
html.dark .text-purple-600 { color: #B883F5 !important; }
html.dark .text-purple-800 { color: #C9A5F7 !important; }

html.dark .bg-amber-50   { background-color: rgba(210, 171, 78, 0.10) !important; }
html.dark .bg-amber-100  { background-color: rgba(210, 171, 78, 0.16) !important; }
html.dark .text-amber-500 { color: #D2AB4E !important; }
html.dark .text-amber-700 { color: #E0C06E !important; }
html.dark .text-amber-800 { color: #E8D08E !important; }
html.dark .border-amber-200 { border-color: rgba(210, 171, 78, 0.25) !important; }

html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.16) !important; }
html.dark .text-indigo-600 { color: #818CF8 !important; }

/* Gray safety net (fallback for unmigrated classes) */
html.dark .bg-white       { background-color: var(--vp-c-bg) !important; }
html.dark .bg-gray-50     { background-color: var(--vp-c-bg-soft) !important; }
html.dark .bg-gray-100    { background-color: var(--vp-c-bg-mute) !important; }
html.dark .bg-gray-800    { background-color: var(--sg-chrome-bg) !important; }
html.dark .bg-gray-900    { background-color: var(--sg-chrome-bg) !important; }
html.dark .text-gray-900  { color: var(--vp-c-text-1) !important; }
html.dark .text-gray-800  { color: var(--vp-c-text-1) !important; }
html.dark .text-gray-700  { color: var(--vp-c-text-2) !important; }
html.dark .text-gray-600  { color: var(--vp-c-text-2) !important; }
html.dark .text-gray-500  { color: var(--vp-c-text-3) !important; }
html.dark .text-gray-400  { color: var(--vp-c-text-3) !important; }
html.dark .text-gray-300  { color: var(--sg-chrome-text) !important; }
html.dark .border-gray-200 { border-color: var(--vp-c-border) !important; }
html.dark .border-gray-300 { border-color: var(--vp-c-border) !important; }
html.dark .border-gray-700 { border-color: var(--sg-chrome-border) !important; }
html.dark .border-gray-800 { border-color: var(--sg-chrome-border) !important; }