/* ═══════════════════════════════════════════
   MINGHAO Admin UX Consistency Layer
   Standardizes: KPI cards, badges, buttons, tables
   Load after Tailwind CDN
   ═══════════════════════════════════════════ */

/* ── KPI Cards: border-left accent (standard) ── */
.kpi-card {
  @apply bg-[#0a1428] rounded-xl p-5 shadow-sm border border-[rgba(34,211,238,0.15)] border-l-4;
  border-left-color: #1E40AF;
}
.kpi-card.kpi-green  { border-left-color: #10B981; }
.kpi-card.kpi-amber  { border-left-color: #F59E0B; }
.kpi-card.kpi-red    { border-left-color: #EF4444; }
.kpi-card .kpi-value { font-size: 1.75rem; font-weight: 800; color: #111827; font-family: 'JetBrains Mono', monospace; }
.kpi-card .kpi-label { font-size: 0.8125rem; color: #6B7280; margin-top: 0.25rem; }
.kpi-card .kpi-change { font-size: 0.75rem; margin-top: 0.5rem; }
.kpi-card .kpi-change.up   { color: #10B981; }
.kpi-card .kpi-change.down { color: #EF4444; }

/* ── Badges: green-100 standard ── */
.badge {
  display: inline-flex; align-items: center; padding: 0.125rem 0.625rem;
  border-radius: 9999px; font-size: 0.75rem; font-weight: 500;
}
/* ── Badges: dark-theme high-contrast overrides (replaces Tailwind bg-*-100) ── */
.badge-success  { background: #065F46; color: #6EE7B7; }
.badge-warning  { background: #78350F; color: #FCD34D; }
.badge-danger   { background: #7F1D1D; color: #FCA5A5; }
.badge-info     { background: #1E3A8A; color: #93C5FD; }
.badge-neutral  { background: #374151; color: #D1D5DB; }

/* Tailwind badge class overrides for dark HUD theme — high contrast, semi-transparent */
.bg-green-100, .bg-green-50 { background-color: rgba(16,185,129,0.15) !important; border: 1px solid rgba(16,185,129,0.5) !important; }
.bg-green-100.text-green-700, .bg-green-100.text-green-600,
.bg-green-50.text-green-700, .bg-green-50.text-green-600 { color: #4ADE80 !important; }

.bg-amber-100 { background-color: rgba(245,158,11,0.15) !important; border: 1px solid rgba(245,158,11,0.5) !important; }
.bg-amber-100.text-amber-700, .bg-amber-100.text-amber-600 { color: #FBBF24 !important; }

.bg-red-100 { background-color: rgba(239,68,68,0.15) !important; border: 1px solid rgba(239,68,68,0.5) !important; }
.bg-red-100.text-\[\#f87171\], .bg-red-100.text-red-700, .bg-red-100.text-red-600,
.bg-red-50.text-red-700, .bg-red-50.text-red-600 { color: #F87171 !important; }

.bg-blue-100 { background-color: rgba(34,211,238,0.15) !important; border: 1px solid rgba(34,211,238,0.5) !important; }
.bg-blue-100.text-blue-700, .bg-blue-100.text-blue-600,
.bg-blue-100.text-\[\#22d3ee\] { color: #22D3EE !important; }

.bg-purple-100 { background-color: rgba(139,92,246,0.15) !important; border: 1px solid rgba(139,92,246,0.5) !important; }
.bg-purple-100.text-purple-700, .bg-purple-100.text-purple-600 { color: #A78BFA !important; }

.bg-yellow-100 { background-color: rgba(245,158,11,0.12) !important; border: 1px solid rgba(250,204,21,0.5) !important; }
.bg-yellow-100.text-\[\#facc15\], .bg-yellow-100.text-yellow-700, .bg-yellow-100.text-yellow-600 { color: #FDE047 !important; }

.bg-gray-100 { background-color: rgba(31,41,55,0.5) !important; border: 1px solid rgba(107,114,128,0.3) !important; }
.bg-gray-100.text-gray-500, .bg-gray-100.text-gray-600 { color: #9CA3AF !important; }

/* ── Buttons: brand-600 primary ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 600;
  transition: all 0.15s; cursor: pointer; border: none;
}
.btn-primary   { background: #1E40AF; color: white; }
.btn-primary:hover { background: #1E3A8A; }
.btn-secondary { background: white; color: #1E40AF; border: 1px solid #1E40AF; }
.btn-secondary:hover { background: #EFF6FF; }
.btn-danger    { background: #EF4444; color: white; }
.btn-danger:hover { background: #DC2626; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.625rem 1.5rem; font-size: 0.9375rem; }

/* ── Tables: compact standard ── */
.table-standard { width: 100%; border-collapse: collapse; }
.table-standard thead th {
  padding: 0.625rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600;
  color: #6B7280; text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(10,20,40,0.5); border-bottom: 2px solid rgba(34,211,238,0.15);
}
.table-standard tbody td {
  padding: 0.5rem 1rem; font-size: 0.875rem; color: #374151;
  border-bottom: 1px solid rgba(34,211,238,0.1);
}
.table-standard tbody tr:hover { background: rgba(34,211,238,0.05); }/* =========================================================================
   HUD FORM ELEMENTS — Global Override
   All inputs/selects/textarea → dark HUD background
   ========================================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
select,
textarea {
  background-color: rgba(10, 20, 40, 0.8) !important;
  color: #e0e8ff !important;
  border-color: rgba(34, 211, 238, 0.2) !important;
}
input::placeholder,
textarea::placeholder {
  color: #6e80a0 !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #22d3ee !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15) !important;
  outline: none !important;
  background-color: rgba(34, 211, 238, 0.06) !important;
}
/* Override any bg-white/bg-gray-* on form elements */
input.bg-white, input[class*="bg-white"],
select.bg-white, select[class*="bg-white"],
textarea.bg-white, textarea[class*="bg-white"],
input.bg-gray-50, input[class*="bg-gray-50"],
select.bg-gray-50, select[class*="bg-gray-50"],
textarea.bg-gray-50, textarea[class*="bg-gray-50"],
input.bg-gray-100, input[class*="bg-gray-100"],
select.bg-gray-100, select[class*="bg-gray-100"],
textarea.bg-gray-100, textarea[class*="bg-gray-100"] {
  background-color: rgba(10, 20, 40, 0.8) !important;
  color: #e0e8ff !important;
  border-color: rgba(34, 211, 238, 0.2) !important;
}
/* Dark mode consistency */
.dark input, .dark select, .dark textarea,
input.dark\:bg-gray-800, select.dark\:bg-gray-800, textarea.dark\:bg-gray-800 {
  background-color: rgba(10, 20, 40, 0.8) !important;
  color: #e0e8ff !important;
  border-color: rgba(34, 211, 238, 0.2) !important;
}
/* Checkbox & radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #22d3ee;
}
/* Select dropdown arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2322d3ee' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
/* Range slider */
input[type="range"] {
  accent-color: #22d3ee;
  background: transparent !important;
}

/* =========================================================================
   EasyMDE / CodeMirror Dark Theme Override
   ========================================================================= */
.EasyMDEContainer {
  background: rgba(10,20,40,0.8) !important;
  border-radius: 0.5rem !important;
  border: 1px solid rgba(34,211,238,0.15) !important;
  overflow: hidden;
}
.EasyMDEContainer .editor-toolbar {
  background: rgba(10,20,40,0.6) !important;
  border-bottom: 1px solid rgba(34,211,238,0.12) !important;
}
.EasyMDEContainer .editor-toolbar button {
  color: #8a9ab5 !important;
  background: transparent !important;
  border-color: transparent !important;
}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
  background: rgba(34,211,238,0.1) !important;
  color: #22d3ee !important;
  border-color: rgba(34,211,238,0.2) !important;
}
.EasyMDEContainer .editor-toolbar .separator {
  border-left-color: rgba(34,211,238,0.12) !important;
  border-right-color: transparent !important;
}
.EasyMDEContainer .CodeMirror {
  background: rgba(10,20,40,0.8) !important;
  color: #c0d0f0 !important;
  border-color: rgba(34,211,238,0.1) !important;
}
.EasyMDEContainer .CodeMirror .CodeMirror-cursor {
  border-left-color: #22d3ee !important;
}
.EasyMDEContainer .CodeMirror .CodeMirror-selected {
  background: rgba(34,211,238,0.15) !important;
}
.EasyMDEContainer .CodeMirror .CodeMirror-focused .CodeMirror-selected {
  background: rgba(34,211,238,0.2) !important;
}
.EasyMDEContainer .CodeMirror .CodeMirror-placeholder {
  color: #6e80a0 !important;
}
.EasyMDEContainer .CodeMirror .CodeMirror-line span {
  color: #c0d0f0 !important;
}
.EasyMDEContainer .CodeMirror .cm-header { color: #22d3ee !important; }
.EasyMDEContainer .CodeMirror .cm-link  { color: #60a5fa !important; }
.EasyMDEContainer .CodeMirror .cm-quote { color: #34d399 !important; }
.EasyMDEContainer .CodeMirror .cm-strong { color: #e0e8ff !important; }
.EasyMDEContainer .CodeMirror .cm-string { color: #fbbf24 !important; }
.EasyMDEContainer .CodeMirror .cm-comment { color: #6e80a0 !important; font-style: italic; }
.EasyMDEContainer .CodeMirror .cm-keyword { color: #a78bfa !important; }
.EasyMDEContainer .CodeMirror .cm-atom { color: #22d3ee !important; }
.EasyMDEContainer .CodeMirror .cm-number { color: #34d399 !important; }
.EasyMDEContainer .CodeMirror-fullscreen {
  background: #060e1a !important;
}
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
  background: rgba(10,20,40,0.9) !important;
  color: #c0d0f0 !important;
}
.EasyMDEContainer .editor-preview pre,
.EasyMDEContainer .editor-preview-side pre {
  background: rgba(10,20,40,0.8) !important;
  color: #c0d0f0 !important;
}
.EasyMDEContainer .editor-preview code,
.EasyMDEContainer .editor-preview-side code {
  background: rgba(34,211,238,0.08) !important;
  color: #22d3ee !important;
}
.EasyMDEContainer .editor-statusbar {
  background: rgba(10,20,40,0.6) !important;
  color: #6e80a0 !important;
  border-top: 1px solid rgba(34,211,238,0.1) !important;
}