/* ═══════════════════════════════════════════════════════════
   TESTAMIND – Affiliate Portal Minimal Dark Theme v2.0
   Palette: white on dark — no neon, no gradients
   ═══════════════════════════════════════════════════════════ */

/* ── Fonts ── */
* { font-family: 'Heebo', Arial, sans-serif !important; }

/* ── CSS variables ── */
:root {
  --tm-bg:       #f9fafb;
  --tm-bg2:      #f3f4f6;
  --tm-bg3:      #ffffff;
  --tm-sidebar:  #1f2937;
  --tm-header:   #ffffff;
  --tm-accent:   #111827;
  --tm-accent2:  #374151;
  --tm-border:   rgba(0,0,0,0.08);
  --tm-border2:  rgba(0,0,0,0.15);
  --tm-muted:    #6b7280;
  --tm-text:     #111827;
  --tm-green:    #4ade80;
  --tm-yellow:   #facc15;
  --tm-red:      #f87171;
}

/* ── Body / root ── */
body.antialiased,
body {
  background: var(--tm-bg) !important;
  color: var(--tm-text) !important;
}

/* ── Main portal wrapper ── */
/* The portal root is <div class="portal h-screen flex bg-gray-100"> —
   bg-gray-100 is on the SAME element, so we need both selectors */
.portal,
div.portal,
div.portal.bg-gray-100,
div.portal.h-screen {
  background: var(--tm-bg) !important;
  background-color: var(--tm-bg) !important;
}

/* ── Sidebar ── */
.portal .bg-gray-800,
.portal nav.bg-gray-800,
.portal .flex-col.w-64,
.portal .flex-col.w-64 > * {
  background: var(--tm-sidebar) !important;
  background-color: var(--tm-sidebar) !important;
  border-right: 1px solid var(--tm-border2);
}

/* ── Sidebar logo area ── */
.portal .items-center.h-16.flex-shrink-0 {
  background: var(--tm-sidebar) !important;
  border-bottom: 1px solid var(--tm-border);
}

/* ── Top header bar ── */
.portal .relative.z-10.flex-shrink-0.flex.h-16.bg-white,
.portal .flex.h-16.bg-white {
  background: var(--tm-header) !important;
  background-color: var(--tm-header) !important;
  border-bottom: 1px solid var(--tm-border2) !important;
  box-shadow: none;
}

/* ── Main content area ── */
#portal-content-wrap,
.portal main {
  background: var(--tm-bg) !important;
  background-color: var(--tm-bg) !important;
}

/* ── Content wrapper ── */
#affiliate-portal-content {
  background: transparent !important;
}

/* ── White cards / panels ── */
.portal .bg-white,
.portal [class*="bg-white"] {
  background: var(--tm-bg3) !important;
  background-color: var(--tm-bg3) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* ── Shadow cards ── */
.portal .shadow,
.portal .shadow-sm,
.portal .shadow-lg,
.portal .rounded-lg.shadow,
.portal .rounded-lg.shadow-sm {
  background: var(--tm-bg3) !important;
  border: 1px solid var(--tm-border) !important;
  box-shadow: none !important;
}

/* ── Gray backgrounds ── */
.portal .bg-gray-50  { background: var(--tm-bg2) !important; }
.portal .bg-gray-100 { background: var(--tm-bg) !important; }
.portal .bg-gray-200 { background: var(--tm-bg3) !important; }

/* ── Text colors ── */
.portal .text-gray-900,
.portal .text-gray-800 { color: #111827 !important; }
.portal .text-gray-700 { color: #374151 !important; }
.portal .text-gray-600 { color: #4b5563 !important; }
.portal .text-gray-500 { color: #6b7280 !important; }
.portal .text-gray-400 { color: #9ca3af !important; }

/* ── Nav items (sidebar is still dark) ── */
.portal nav a,
.portal nav button {
  color: #9ca3af !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}
.portal nav a:hover,
.portal nav button:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

/* ── Active nav item ── */
.portal nav a.bg-gray-900,
.portal nav a.text-white,
.portal nav [aria-current="page"] {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  font-weight: 700 !important;
}
.portal nav a.bg-gray-900 svg,
.portal nav a.text-white svg,
.portal nav [aria-current="page"] svg {
  color: #ffffff !important;
}

/* ── Nav icons ── */
.portal nav a svg { color: #6b7280 !important; }
.portal nav a:hover svg { color: #ffffff !important; }

/* ── Borders ── */
.portal .border,
.portal .border-b,
.portal .border-t,
.portal .border-r,
.portal .border-l,
.portal .border-gray-100,
.portal .border-gray-200,
.portal .border-gray-300 {
  border-color: var(--tm-border) !important;
}
.portal .divide-gray-200 > * + *,
.portal .divide-y > * + * {
  border-color: var(--tm-border) !important;
}

/* ── Tables ── */
.portal table {
  background: var(--tm-bg3) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.portal table thead,
.portal thead {
  background: var(--tm-bg2) !important;
}
.portal table thead th,
.portal thead th {
  color: #111827 !important;
  border-bottom: 1px solid var(--tm-border2) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
}
.portal table tbody tr {
  border-bottom: 1px solid var(--tm-border) !important;
  transition: background 0.1s ease !important;
}
.portal table tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
}
.portal table tbody td {
  color: var(--tm-text) !important;
  padding: 11px 16px !important;
}

/* ── Stat / KPI numbers ── */
.portal .text-2xl,
.portal .text-3xl,
.portal .text-4xl {
  color: #111827 !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 900 !important;
}

/* ── Primary buttons ── */
.portal button[type="submit"],
.portal .btn-primary,
.portal [class*="bg-indigo"],
.portal [class*="bg-blue"],
.portal input[type="submit"] {
  background: #1f2937 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity 0.15s !important;
}
.portal button[type="submit"]:hover,
.portal .btn-primary:hover {
  opacity: 0.88 !important;
}

/* ── Secondary buttons ── */
.portal button.bg-white,
.portal a.bg-white {
  background: transparent !important;
  border: 1px solid var(--tm-border2) !important;
  color: var(--tm-text) !important;
}
.portal button.bg-white:hover,
.portal a.bg-white:hover {
  border-color: rgba(255,255,255,0.4) !important;
  color: #ffffff !important;
}

/* ── Inputs / selects ── */
.portal input[type="text"],
.portal input[type="email"],
.portal input[type="url"],
.portal input[type="password"],
.portal input[type="number"],
.portal textarea,
.portal select {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  color: #111827 !important;
  border-radius: 6px !important;
  transition: border-color 0.15s !important;
}
.portal input:focus,
.portal textarea:focus,
.portal select:focus {
  border-color: rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
  outline: none !important;
}

/* ── Labels ── */
.portal label {
  color: #9ca3af !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
}

/* ── Affiliate link input ── */
.portal .flex.rounded-md.shadow-sm input,
.portal [class*="copy"] input {
  background: var(--tm-bg2) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ── Status badges ── */
.portal .bg-green-100  { background: rgba(74,222,128,0.12) !important; }
.portal .text-green-800,
.portal .text-green-700 { color: var(--tm-green) !important; }

.portal .bg-yellow-100 { background: rgba(250,204,21,0.12) !important; }
.portal .text-yellow-800,
.portal .text-yellow-700 { color: var(--tm-yellow) !important; }

.portal .bg-red-100  { background: rgba(248,113,113,0.12) !important; }
.portal .text-red-800,
.portal .text-red-700 { color: var(--tm-red) !important; }

.portal .bg-blue-100  { background: rgba(255,255,255,0.06) !important; }
.portal .text-blue-800,
.portal .text-blue-700 { color: #e5e7eb !important; }

.portal .bg-indigo-100 { background: rgba(255,255,255,0.06) !important; }
.portal .text-indigo-800,
.portal .text-indigo-700,
.portal .text-indigo-600 { color: #d1d5db !important; }

/* ── Profile dropdown ── */
.portal .rounded-md.bg-white.shadow-xs,
.portal [x-show="open"] .rounded-md.bg-white {
  background: var(--tm-bg3) !important;
  border: 1px solid var(--tm-border2) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.portal .rounded-md.bg-white a { color: var(--tm-text) !important; }
.portal .rounded-md.bg-white a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
}

/* ── "Signed in as" email ── */
.portal .text-sm.font-medium.text-gray-900 {
  color: #111827 !important;
}

/* ── Headings ── */
.portal h1, .portal h2, .portal h3,
.portal h4, .portal h5, .portal h6 {
  color: #111827 !important;
}

/* ── Alert / notification boxes ── */
.portal .bg-yellow-50 { background: rgba(250,204,21,0.06) !important; border-color: rgba(250,204,21,0.2) !important; }
.portal .bg-blue-50   { background: rgba(255,255,255,0.04) !important; border-color: var(--tm-border) !important; }
.portal .bg-green-50  { background: rgba(74,222,128,0.06) !important; border-color: rgba(74,222,128,0.2) !important; }
.portal .bg-red-50    { background: rgba(248,113,113,0.06) !important; border-color: rgba(248,113,113,0.2) !important; }

/* ── Stat cards grid ── */
.portal dl.grid .bg-white,
.portal .grid.grid-cols-1.gap-5 .bg-white {
  background: var(--tm-bg3) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease !important;
}
.portal dl.grid .bg-white:hover,
.portal .grid.grid-cols-1.gap-5 .bg-white:hover {
  border-color: rgba(255,255,255,0.2) !important;
}

/* ── Mobile hamburger ── */
.portal .px-4.border-r.border-gray-200 {
  background: var(--tm-header) !important;
  border-right-color: var(--tm-border) !important;
}

/* ── Pagination ── */
.portal nav[aria-label*="Pagination"] a {
  background: var(--tm-bg3) !important;
  border: 1px solid var(--tm-border) !important;
  color: var(--tm-text) !important;
  border-radius: 6px !important;
}
.portal nav[aria-label*="Pagination"] .current {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* ── "Back to site" link ── */
.portal .text-gray-400 { color: #4b5563 !important; }
.portal .text-gray-400:hover { color: #9ca3af !important; }

/* ── Dividers ── */
.portal .border-t.border-gray-100,
.portal .border-t.border-gray-200 {
  border-color: var(--tm-border) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--tm-bg); }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }

/* ── Focus rings ── */
.portal *:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15) !important;
}