/* Inroads Dashboard Styles */
.score-pill { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
.status-green { background: #dcfce7; color: #166534; }
.status-yellow { background: #fef9c3; color: #854d0e; }
.status-red { background: #fee2e2; color: #991b1b; }
table { border-collapse: collapse; }
th a { text-decoration: none; color: inherit; }
th a:hover { color: #2563eb; }

/* ── User dropdown menu ───────────────────────────────────────── */
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  min-width: 220px; z-index: 2002;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.15s ease;
}
.user-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  color: #374151; text-decoration: none; transition: background 0.1s;
}
.menu-item:hover { background: #f3f4f6; }
.menu-danger { color: #dc2626; }
.menu-danger:hover { background: #fef2f2; }

html.dark .user-menu { background: #1e293b; box-shadow: 0 10px 25px rgba(0,0,0,0.4); }
html.dark .menu-item { color: #e2e8f0; }
html.dark .menu-item:hover { background: #334155; }
html.dark .menu-danger { color: #f87171; }
html.dark .menu-danger:hover { background: #451a1a; }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — High contrast, colorblind-friendly
   Uses !important to override Tailwind utility classes
   ══════════════════════════════════════════════════════════════════ */

/* ── Base backgrounds ─────────────────────────────────────────── */
html.dark .bg-white          { background-color: #1e293b !important; }
html.dark .bg-gray-50        { background-color: #0f172a !important; }
html.dark .bg-gray-100       { background-color: #1e293b !important; }

/* ── Text — bright and high contrast ──────────────────────────── */
html.dark .text-gray-900     { color: #f1f5f9 !important; }
html.dark .text-gray-800     { color: #e2e8f0 !important; }
html.dark .text-gray-700     { color: #e2e8f0 !important; }
html.dark .text-gray-600     { color: #cbd5e1 !important; }
html.dark .text-gray-500     { color: #94a3b8 !important; }
html.dark .text-gray-400     { color: #94a3b8 !important; }
html.dark .text-gray-300     { color: #94a3b8 !important; }
html.dark .font-medium       { color: #f1f5f9; }
html.dark th                 { color: #e2e8f0 !important; }
html.dark td                 { color: #cbd5e1 !important; }

/* ── Borders ──────────────────────────────────────────────────── */
html.dark .border            { border-color: #334155 !important; }
html.dark .border-t          { border-top-color: #334155 !important; }
html.dark .border-b          { border-bottom-color: #334155 !important; }
html.dark .border-gray-200   { border-color: #334155 !important; }
html.dark .border-gray-300   { border-color: #475569 !important; }
html.dark .border-dashed     { border-color: #475569 !important; }

/* ── Table hover ──────────────────────────────────────────────── */
html.dark tr:hover td        { background: #334155 !important; }

/* ── Links — bright blue for visibility ───────────────────────── */
html.dark a                  { color: #60a5fa; }
html.dark a:hover            { color: #93c5fd; }
html.dark a.text-blue-600    { color: #60a5fa !important; }
html.dark a.text-blue-600:hover { color: #93c5fd !important; }
html.dark .hover\:text-blue-600:hover { color: #60a5fa !important; }
html.dark .hover\:underline:hover { color: #93c5fd !important; }

/* ── Score colors — bright on dark, colorblind-safe ───────────── */
html.dark .text-green-600    { color: #4ade80 !important; }
html.dark .text-green-700    { color: #4ade80 !important; }
html.dark .text-green-800    { color: #86efac !important; }
html.dark .text-blue-600     { color: #60a5fa !important; }
html.dark .text-blue-700     { color: #93c5fd !important; }
html.dark .text-blue-800     { color: #93c5fd !important; }
html.dark .text-blue-900     { color: #bfdbfe !important; }

/* ── Stat card backgrounds — vivid but not blinding ───────────── */
html.dark .bg-green-50       { background-color: #14532d !important; }
html.dark .border-green-200  { border-color: #166534 !important; }
html.dark .border-green-100  { border-color: #166534 !important; }

html.dark .bg-blue-50        { background-color: #1e3a5f !important; }
html.dark .border-blue-200   { border-color: #1e40af !important; }

html.dark .bg-purple-50      { background-color: #3b0764 !important; }
html.dark .border-purple-200 { border-color: #581c87 !important; }
html.dark .text-purple-700   { color: #c084fc !important; }
html.dark .text-purple-800   { color: #d8b4fe !important; }
html.dark .text-purple-600   { color: #a855f7 !important; }

html.dark .bg-amber-50       { background-color: #451a03 !important; }
html.dark .border-amber-200  { border-color: #78350f !important; }
html.dark .border-amber-300  { border-color: #92400e !important; }
html.dark .text-amber-700    { color: #fbbf24 !important; }
html.dark .text-amber-800    { color: #fcd34d !important; }
html.dark .text-amber-900    { color: #fde68a !important; }
html.dark .text-amber-600    { color: #f59e0b !important; }

html.dark .bg-red-50         { background-color: #450a0a !important; }
html.dark .border-red-200    { border-color: #7f1d1d !important; }
html.dark .text-red-800      { color: #fca5a5 !important; }

/* ── Score pills — high contrast ──────────────────────────────── */
html.dark .status-green      { background: #166534; color: #86efac; }
html.dark .status-yellow     { background: #713f12; color: #fde68a; }
html.dark .status-red        { background: #7f1d1d; color: #fecaca; }

/* ── Form inputs — clearly visible ────────────────────────────── */
html.dark input[type="text"],
html.dark input[type="number"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark select,
html.dark textarea {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html.dark input::placeholder  { color: #64748b !important; }
html.dark input[type="checkbox"] { accent-color: #3b82f6; }

/* ── Bar chart colors ─────────────────────────────────────────── */
html.dark .bg-green-500      { background-color: #22c55e !important; }
html.dark .bg-blue-500       { background-color: #3b82f6 !important; }
html.dark .bg-blue-400       { background-color: #60a5fa !important; }
html.dark .bg-yellow-400     { background-color: #facc15 !important; }
html.dark .bg-gray-300       { background-color: #475569 !important; }
html.dark .bg-purple-200     { background-color: #581c87 !important; }
html.dark .bg-purple-600     { background-color: #9333ea !important; }
html.dark .text-yellow-700   { color: #fbbf24 !important; }

/* ── Misc ─────────────────────────────────────────────────────── */
html.dark .bg-gray-50\/50    { background-color: rgba(15, 23, 42, 0.5) !important; }
html.dark code               { background-color: #334155 !important; color: #e2e8f0 !important; }
html.dark .prose             { color: #cbd5e1 !important; }
html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3          { color: #f1f5f9 !important; }
html.dark .shadow-sm         { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) !important; }
html.dark .font-mono         { color: inherit; }

/* ── Hover states ─────────────────────────────────────────────── */
html.dark .hover\:bg-blue-50:hover         { background-color: #1e3a5f !important; }
html.dark .hover\:bg-blue-50\/30:hover     { background-color: rgba(30, 58, 95, 0.3) !important; }
html.dark .hover\:bg-amber-50\/30:hover    { background-color: rgba(69, 26, 3, 0.3) !important; }
html.dark .hover\:border-blue-300:hover    { border-color: #3b82f6 !important; }
html.dark .hover\:border-blue-400:hover    { border-color: #60a5fa !important; }
html.dark .hover\:bg-blue-50:hover         { background-color: #1e3a5f !important; }
html.dark .hover\:shadow-sm:hover          { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) !important; }

/* ── Selection (keep readable) ────────────────────────────────── */
html.dark ::selection { background: #3b82f6; color: #fff; }