/* ============================================================
   EHostWP — custom utilities and components
   Designed to layer on top of Tailwind, NOT replace it.
   Use sparingly — prefer Tailwind utilities for one-offs.
   ============================================================ */

/* Background gradient — soft brand orbs */
.ehp-bg-grad {
  background-image:
    radial-gradient(1200px 600px at 20% -10%, rgba(146,86,255,0.06), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(255,181,71,0.04), transparent 60%);
  background-color: #0a0a0d;
}

/* Subtle grid pattern overlay */
.ehp-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Striped image placeholder */
.ehp-placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    #16161b 0 12px,
    #1c1c22 12px 24px
  );
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #52525b;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Buttons — base shape, color via Tailwind */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms cubic-bezier(.22,1,.36,1),
              border-color 120ms cubic-bezier(.22,1,.36,1),
              transform 120ms cubic-bezier(.22,1,.36,1);
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; gap: 6px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 15px; gap: 10px; }

.btn-primary    { background: #9256ff; color: #fff; border-color: #9256ff; }
.btn-primary:hover:not(:disabled)    { background: #7642d8; }
.btn-secondary  { background: #16161b; color: #f4f4f5; border-color: rgba(255,255,255,.07); }
.btn-secondary:hover:not(:disabled)  { background: #1a1a20; }
.btn-ghost      { background: transparent; color: #f4f4f5; }
.btn-ghost:hover:not(:disabled)      { background: #16161b; }
.btn-outline    { background: transparent; color: #f4f4f5; border-color: rgba(255,255,255,.12); }
.btn-outline:hover:not(:disabled)    { background: #16161b; }
.btn-ai         { background: #ffb547; color: #1a1207; border-color: #ffb547; }
.btn-ai:hover:not(:disabled)         { background: #f3a32f; }
.btn-danger     { background: #f25c5c; color: #fff; border-color: #f25c5c; }
.btn-danger:hover:not(:disabled)     { background: #e04a4a; }

/* Inputs */
.ehp-field {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px;
  background: #111114;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  transition: border-color 120ms, box-shadow 120ms;
}
.ehp-field:focus-within {
  border-color: rgba(146,86,255,.55);
  box-shadow: 0 0 0 3px rgba(146,86,255,.30);
}
.ehp-field > input,
.ehp-field > textarea {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: #f4f4f5; font-size: 14px; font-family: inherit;
}
.ehp-field svg { color: #71717a; flex-shrink: 0; }

/* Card hover */
.ehp-card { background: #111114; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; }
.ehp-card-hover { transition: background 120ms, border-color 120ms; }
.ehp-card-hover:hover { background: #1a1a20; border-color: rgba(255,255,255,.12); }

/* Badge — base; tone via modifier */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  line-height: 1; letter-spacing: -0.005em;
  white-space: nowrap;
}
.badge-sm { height: 18px; padding: 0 6px; font-size: 11px; gap: 4px; }
.badge-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; flex-shrink: 0;
}
.badge-neutral { background: #16161b; color: #a1a1aa; }
.badge-primary { background: rgba(146,86,255,.12); color: #9256ff; }
.badge-ai      { background: rgba(255,181,71,.12); color: #ffb547; }
.badge-success { background: rgba(52,199,123,.12); color: #34c77b; }
.badge-warning { background: rgba(240,160,32,.12); color: #f0a020; }
.badge-danger  { background: rgba(242,92,92,.12); color: #f25c5c; }
.badge-info    { background: rgba(106,169,255,.12); color: #6aa9ff; }

/* Sidebar items */
.ehp-side-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: 0; border-radius: 8px;
  color: #a1a1aa; font-size: 13px; font-weight: 400;
  cursor: pointer; text-align: left;
  position: relative;
  transition: background 120ms, color 120ms;
}
.ehp-side-item:hover { background: #16161b; color: #f4f4f5; }
.ehp-side-item.active {
  background: #16161b; color: #f4f4f5; font-weight: 500;
}
.ehp-side-item.active::before {
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px;
  width: 2px; background: #9256ff; border-radius: 99px;
}
.ehp-side-item.active svg { color: #9256ff; }
.ehp-side-item svg { color: #71717a; flex-shrink: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  border: 2px solid #0a0a0d;
}
::-webkit-scrollbar-thumb:hover { background: #52525b; }

/* Tabular numerals */
.tabular { font-variant-numeric: tabular-nums; }

/* Mono helper */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* AI gradient border */
.ehp-ai-aura { position: relative; }
.ehp-ai-aura::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, #ffb547 0%, #9256ff 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Pulse / spinner / fade-up animations */
@keyframes ehp-pulse { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes ehp-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ehp-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-3%, 2%); } }
@keyframes ehp-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes ehp-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
.ehp-fade-up { animation: ehp-fade-up 360ms cubic-bezier(.22,1,.36,1) both; }
.ehp-caret { animation: ehp-blink 1s steps(2) infinite; }
.ehp-shimmer {
  background: linear-gradient(90deg, #16161b 0%, #1c1c22 50%, #16161b 100%);
  background-size: 200% 100%;
  animation: ehp-shimmer 2s linear infinite;
}

/* Status dot with pulse */
.status-dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.status-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: currentColor;
}
.status-dot.is-live::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: currentColor; opacity: .5;
  animation: ehp-pulse 1.6s cubic-bezier(.22,1,.36,1) infinite;
}

/* Focus ring */
*:focus-visible { outline: 2px solid rgba(146,86,255,.55); outline-offset: 2px; border-radius: 6px; }

/* Section heading spacer */
h1, h2, h3, h4 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
}

/* Kbd */
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  background: #111114; border: 1px solid rgba(255,255,255,.07);
  border-radius: 4px; padding: 1px 5px; color: #a1a1aa;
}

/* Table base */
.ehp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ehp-table thead { background: #16161b; color: #a1a1aa; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.ehp-table th { text-align: left; padding: 10px 16px; font-weight: 500; white-space: nowrap; }
.ehp-table td { padding: 12px 16px; vertical-align: middle; border-top: 1px solid rgba(255,255,255,.07); }
.ehp-table tbody tr { transition: background 120ms; }
.ehp-table tbody tr:hover { background: #16161b; }