/* =============== ApexTrend custom.css (safe with Tailwind) =============== */
/* This file avoids overriding Tailwind utilities. No global .hidden/.container/.a rules. */

:root{
  --bg: #ffffff;
  --fg: #0f172a;          /* slate-900 */
  --muted: #475569;       /* slate-600 */
  --border: #e5e7eb;      /* gray-200 */
  --brand: #2563eb;       /* blue-600 */
  --brand-700:#1d4ed8;
  --success-bg:#ecfdf5;   /* emerald-50 */
  --success-bd:#a7f3d0;   /* emerald-300 */
  --success-fg:#065f46;   /* emerald-800 */
  --warn-bg:#fffbeb;      /* amber-50 */
  --warn-bd:#fde68a;      /* amber-300 */
  --warn-fg:#78350f;      /* amber-900 */
  --err-bg:#fef2f2;       /* rose-50 */
  --err-bd:#fecaca;       /* rose-300 */
  --err-fg:#7f1d1d;       /* rose-900 */
  --radius: 12px;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --fg: #e5e7eb;
    --muted:#94a3b8;
    --border:#1f2937;
    --brand:#3b82f6;
    --brand-700:#2563eb;
    --success-bg:#022c22; --success-bd:#065f46; --success-fg:#a7f3d0;
    --warn-bg:#451a03;    --warn-bd:#b45309;   --warn-fg:#fde68a;
    --err-bg:#3b0a0a;     --err-bd:#b91c1c;    --err-fg:#fecaca;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
}

/* Safe base tweaks */
img{ max-width:100%; height:auto; border-radius:8px; }

/* Cards (opt-in) */
.apx-card{
  background: var(--bg);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Buttons (opt-in) */
.apx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:12px; font-weight:600;
  background:var(--brand); color:#fff; border:1px solid transparent;
}
.apx-btn:hover{ background:var(--brand-700); text-decoration:none; }
.apx-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Alerts (opt-in; great for your query-param banners) */
.apx-alert{
  border-radius:12px; padding:.85rem 1rem; margin-bottom:1rem;
  border:1px solid var(--border);
}
.apx-alert-success{ background: var(--success-bg); border-color: var(--success-bd); color: var(--success-fg); }
.apx-alert-warn{    background: var(--warn-bg);    border-color: var(--warn-bd);    color: var(--warn-fg); }
.apx-alert-error{   background: var(--err-bg);     border-color: var(--err-bd);     color: var(--err-fg); }

/* Fieldset (opt-in; for "Explore" / "Risk Mgmt") */
.apx-fieldset{
  border:1px solid var(--border); border-radius:14px; padding:1rem;
}
.apx-legend{
  padding:0 .5rem; font-weight:700; color:var(--muted);
}

/* Sticky top alert strip (opt-in) */
.apx-sticky-strip{
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

/* Footer quick links (opt-in wrapper) */
.apx-footer-links a{ display:block; padding:.25rem 0; }

/* Tables (opt-in) */
.apx-table{ width:100%; border-collapse: collapse; }
.apx-table th, .apx-table td{ padding:.6rem .75rem; border-bottom:1px solid var(--border); text-align:left; }
.apx-table th{ font-weight:700; color:var(--muted); background: color-mix(in oklab, var(--bg) 90%, #000); }

/* Captcha input width helper (opt-in) */
.apx-captcha-input{ width: 120px; }
