/* ════════════════════════════════════════════════════════════════
   EHP ↔ Metronic compatibility layer
   ─────────────────────────────────────────────────────────────────
   Loaded after custom.css. Remaps legacy Metronic light-theme classes
   inside the new dark `.ehp-bg-grad` shell to ehp tokens, so the
   pages I Phase-A-wrapped (kept inner markup, swapped only the
   chrome) render legibly on the dark theme.

   Scope: everything inside .ehp-bg-grad. Pages outside the shell
   (e.g. tools-ai-editor.html which is full-bleed standalone) are not
   affected.
   ════════════════════════════════════════════════════════════════ */

/* ─── Text colors ─── */
.ehp-bg-grad .text-gray-900,
.ehp-bg-grad .text-gray-800,
.ehp-bg-grad .text-neutral-900,
.ehp-bg-grad .text-neutral-800,
.ehp-bg-grad .text-slate-900,
.ehp-bg-grad .text-slate-800,
.ehp-bg-grad .text-black     { color: #f4f4f5; }

.ehp-bg-grad .text-gray-700,
.ehp-bg-grad .text-gray-600,
.ehp-bg-grad .text-neutral-700,
.ehp-bg-grad .text-neutral-600,
.ehp-bg-grad .text-slate-700,
.ehp-bg-grad .text-slate-600 { color: #a1a1aa; }

.ehp-bg-grad .text-gray-500,
.ehp-bg-grad .text-gray-400,
.ehp-bg-grad .text-neutral-500,
.ehp-bg-grad .text-neutral-400,
.ehp-bg-grad .text-slate-500,
.ehp-bg-grad .text-slate-400 { color: #71717a; }

.ehp-bg-grad .text-gray-300,
.ehp-bg-grad .text-gray-200,
.ehp-bg-grad .text-neutral-300,
.ehp-bg-grad .text-neutral-200,
.ehp-bg-grad .text-slate-300,
.ehp-bg-grad .text-slate-200 { color: #52525b; }

/* Allow .text-white to remain literally white — it's used on
   colored buttons where we still want high contrast. */

/* Indigo accents → brand purple */
.ehp-bg-grad .text-indigo-400,
.ehp-bg-grad .text-indigo-500,
.ehp-bg-grad .text-indigo-600 { color: #9256ff; }

.ehp-bg-grad .text-indigo-300 { color: #a78bfa; }

/* ─── Background colors ─── */
.ehp-bg-grad .bg-white         { background-color: #111114; }
.ehp-bg-grad .bg-gray-50,
.ehp-bg-grad .bg-gray-100,
.ehp-bg-grad .bg-neutral-50,
.ehp-bg-grad .bg-neutral-100   { background-color: #16161b; }

.ehp-bg-grad .bg-gray-200,
.ehp-bg-grad .bg-gray-300      { background-color: #1c1c22; }

.ehp-bg-grad .bg-gray-900,
.ehp-bg-grad .bg-black         { background-color: #0a0a0d; }

/* ─── Border colors ─── */
.ehp-bg-grad .border-gray-100,
.ehp-bg-grad .border-gray-200,
.ehp-bg-grad .border-gray-300,
.ehp-bg-grad .border-neutral-200,
.ehp-bg-grad .border-neutral-300 { border-color: rgba(255,255,255,.07); }

.ehp-bg-grad .border-gray-700,
.ehp-bg-grad .border-gray-800,
.ehp-bg-grad .border-gray-900,
.ehp-bg-grad .border-white       { border-color: rgba(255,255,255,.12); }

/* Translucent borders used by landing-page-style inner cards */
.ehp-bg-grad [class*="border-neutral-300/"],
.ehp-bg-grad [class*="border-white/"]     { border-color: rgba(255,255,255,.10); }

/* ─── Metronic card primitives ─── */
.ehp-bg-grad .card {
  background-color: #111114;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  color: #f4f4f5;
}
.ehp-bg-grad .card-header {
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ehp-bg-grad .card-title {
  font-weight: 600;
  font-size: 14px;
  color: #f4f4f5;
}
.ehp-bg-grad .card-body {
  padding: 1.25rem;
}
.ehp-bg-grad .card-footer {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 0.875rem 1.25rem;
}

/* ─── Metronic form primitives ─── */
.ehp-bg-grad .input,
.ehp-bg-grad input.input,
.ehp-bg-grad textarea.input,
.ehp-bg-grad select.select {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  background: #111114;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  color: #f4f4f5;
  font-size: 14px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.ehp-bg-grad textarea.input { height: auto; padding: 10px 12px; }
.ehp-bg-grad .input:focus-within,
.ehp-bg-grad input.input:focus,
.ehp-bg-grad textarea.input:focus,
.ehp-bg-grad select.select:focus {
  border-color: rgba(146,86,255,.55);
  box-shadow: 0 0 0 3px rgba(146,86,255,.30);
}
/* Metronic `<label class="input"><input ...></label>` wrapper pattern */
.ehp-bg-grad label.input { gap: 8px; }
.ehp-bg-grad label.input > input,
.ehp-bg-grad label.input > textarea {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: #f4f4f5; font-size: 14px;
  height: auto; padding: 0;
}
.ehp-bg-grad .input::placeholder,
.ehp-bg-grad label.input > input::placeholder { color: #52525b; }

.ehp-bg-grad .form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #a1a1aa;
}
.ehp-bg-grad .form-label.text-gray-900 { color: #a1a1aa; }

/* Metronic checkbox helpers */
.ehp-bg-grad .checkbox {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  background: #111114;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 3px;
  cursor: pointer; flex-shrink: 0;
  position: relative;
  vertical-align: middle;
}
.ehp-bg-grad .checkbox:checked {
  background: #9256ff; border-color: #9256ff;
}
.ehp-bg-grad .checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ehp-bg-grad .checkbox-sm { width: 14px; height: 14px; }
.ehp-bg-grad .checkbox-label { color: #a1a1aa; font-size: 13px; }
.ehp-bg-grad .checkbox-group { display: inline-flex; align-items: center; gap: 8px; }

/* Metronic select */
.ehp-bg-grad select.select,
.ehp-bg-grad .select {
  background-color: #111114;
  color: #f4f4f5;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
}

/* ─── Metronic button primitives ─── */
.ehp-bg-grad .btn-dark {
  background-color: #9256ff;
  color: #fff !important;
  border-color: #9256ff;
}
.ehp-bg-grad .btn-dark:hover:not(:disabled) { background-color: #7642d8; border-color: #7642d8; }

.ehp-bg-grad .btn-light {
  background-color: #16161b;
  color: #f4f4f5;
  border-color: rgba(255,255,255,.07);
}
.ehp-bg-grad .btn-light:hover:not(:disabled) { background-color: #1a1a20; }

.ehp-bg-grad .btn-success {
  background-color: #34c77b;
  color: #0b1a12;
  border-color: #34c77b;
}
.ehp-bg-grad .btn-danger {
  background-color: #f25c5c;
  color: #fff;
  border-color: #f25c5c;
}
.ehp-bg-grad .btn-warning {
  background-color: #f0a020;
  color: #1a1207;
  border-color: #f0a020;
}
.ehp-bg-grad .btn-info {
  background-color: #6aa9ff;
  color: #061226;
  border-color: #6aa9ff;
}

/* `btn-subtle` modifier — Metronic renders these as soft tinted blocks, not
   solid fills. Used for inline alert banners (e.g. website-wizard domain error).
   Without this, .btn-danger etc. above paint a jarring solid block. */
.ehp-bg-grad .btn-subtle.btn-danger,
.ehp-bg-grad .card.btn-subtle.btn-danger {
  background-color: rgba(242,92,92,.10) !important;
  border: 1px solid rgba(242,92,92,.30) !important;
  color: #f25c5c !important;
}
.ehp-bg-grad .btn-subtle.btn-success,
.ehp-bg-grad .card.btn-subtle.btn-success {
  background-color: rgba(52,199,123,.10) !important;
  border: 1px solid rgba(52,199,123,.30) !important;
  color: #34c77b !important;
}
.ehp-bg-grad .btn-subtle.btn-warning {
  background-color: rgba(240,160,32,.10) !important;
  border: 1px solid rgba(240,160,32,.30) !important;
  color: #f0a020 !important;
}
.ehp-bg-grad .btn-subtle.btn-primary,
.ehp-bg-grad .btn-subtle.btn-info {
  background-color: rgba(146,86,255,.10) !important;
  border: 1px solid rgba(146,86,255,.30) !important;
  color: #9256ff !important;
}
/* a btn-subtle alert's inner text should read as normal body copy, not the accent */
.ehp-bg-grad .btn-subtle .text-sm,
.ehp-bg-grad .btn-subtle p { color: #a1a1aa !important; }
/* and don't let the legacy fixed h-[200px] make the banner a giant block */
.ehp-bg-grad .btn-subtle .card-body[class*="h-["] { height: auto !important; }

/* Metronic .btn outline / icon defaults */
.ehp-bg-grad .btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,.12);
  color: #f4f4f5;
}
.ehp-bg-grad .btn-outline:hover { background: #16161b; }
.ehp-bg-grad .btn-icon {
  padding: 0 8px;
  background: #16161b;
  color: #a1a1aa;
  border-color: rgba(255,255,255,.07);
}

/* ─── Container / wrappers ─── */
.ehp-bg-grad .container-fixed,
.ehp-bg-grad .container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.ehp-bg-grad .container-fixed { max-width: 1240px; }

/* ─── Misc Metronic remnants ─── */
.ehp-bg-grad .menu-item,
.ehp-bg-grad .menu-link { color: #a1a1aa; }
.ehp-bg-grad .menu-link:hover { color: #f4f4f5; }
.ehp-bg-grad .badge { color: #f4f4f5; }
.ehp-bg-grad .badge-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
}
.ehp-bg-grad .badge-success { color: #34c77b; background: rgba(52,199,123,.12); }
.ehp-bg-grad .badge-warning { color: #f0a020; background: rgba(240,160,32,.12); }
.ehp-bg-grad .badge-danger  { color: #f25c5c; background: rgba(242,92,92,.12); }
.ehp-bg-grad .badge-info    { color: #6aa9ff; background: rgba(106,169,255,.12); }
.ehp-bg-grad .badge-light   { color: #a1a1aa; background: #16161b; }

/* Alert blocks (used in tools pages for warnings) */
.ehp-bg-grad .bg-warning-light { background-color: rgba(240,160,32,.10); border-color: rgba(240,160,32,.30); }
.ehp-bg-grad .bg-danger-light  { background-color: rgba(242,92,92,.10);  border-color: rgba(242,92,92,.30); }
.ehp-bg-grad .bg-success-light { background-color: rgba(52,199,123,.10); border-color: rgba(52,199,123,.30); }
.ehp-bg-grad .bg-info-light    { background-color: rgba(106,169,255,.10);border-color: rgba(106,169,255,.30); }
.ehp-bg-grad .bg-primary-light { background-color: rgba(146,86,255,.10); border-color: rgba(146,86,255,.30); }

.ehp-bg-grad .border-warning { border-color: rgba(240,160,32,.30); }
.ehp-bg-grad .border-danger  { border-color: rgba(242,92,92,.30); }
.ehp-bg-grad .border-success { border-color: rgba(52,199,123,.30); }
.ehp-bg-grad .border-info    { border-color: rgba(106,169,255,.30); }
.ehp-bg-grad .border-primary { border-color: rgba(146,86,255,.30); }
.ehp-bg-grad .border-primary-clarity { border-color: rgba(146,86,255,.30); }

.ehp-bg-grad .text-warning { color: #f0a020; }
.ehp-bg-grad .text-danger  { color: #f25c5c; }
.ehp-bg-grad .text-success { color: #34c77b; }
.ehp-bg-grad .text-info    { color: #6aa9ff; }
.ehp-bg-grad .text-primary { color: #9256ff; }
.ehp-bg-grad .text-primary-active { color: #7642d8; }

/* Tables (Metronic .datatable-table / generic <table>) */
.ehp-bg-grad table:not(.ehp-table) th,
.ehp-bg-grad .datatable-table th { color: #a1a1aa; font-weight: 500; }
.ehp-bg-grad table:not(.ehp-table) td,
.ehp-bg-grad .datatable-table td {
  border-top: 1px solid rgba(255,255,255,.07);
  color: #f4f4f5;
}

/* Hover row shading */
.ehp-bg-grad table:not(.ehp-table) tbody tr:hover,
.ehp-bg-grad .datatable-table tbody tr:hover { background: #16161b; }

/* ─── Remove duplicate focus rings ─── */
/* When an input lives inside .ehp-ai-aura (which paints a brand gradient
   border), the input's own focus ring + the wrapper's ring make a "double
   outline" — kill the inner one. */
.ehp-ai-aura textarea:focus,
.ehp-ai-aura input:focus,
.ehp-ai-aura .ehp-field:focus-within {
  box-shadow: none;
  border-color: transparent;
  outline: 0;
}