/* Minimal global tweaks layered on top of Tailwind (CDN). */
[x-cloak] { display: none !important; }

/* Display face for page titles — Bricolage Grotesque carries the brand voice;
   body/UI text stays Instrument Sans. Scoped away from .prose so headings in
   inbound (untrusted) email HTML keep neutral styling. */
h1:not(.prose h1) { font-family: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, sans-serif; }

/* ── Gano Excel Light Mode (https://ganoexcel.us/ design system) ────────── */
body {
  background-color: #faf7f2; /* --color-cream */
  color: #1c1c1c;            /* --color-charcoal */
}

/* Crisp card shadows with warm border matching the official site */
.shadow-card {
  box-shadow: 0 1px 3px rgba(28, 28, 28, 0.05), 0 0 0 1px #e5e0d8 !important;
}

/* Warm Gano Excel crimson selection + thin scrollbars. */
::selection { background: #fbd5d5; color: #690a19; }
* { scrollbar-width: thin; scrollbar-color: #d6d3d1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #a8a29e; }

/* Constrain rich email HTML so a wild inbound message can't blow out the layout. */
.prose img { max-width: 100%; height: auto; }
.prose table { display: block; max-width: 100%; overflow-x: auto; }

/* Table headers in light mode */
thead.bg-slate-50\/60,
thead {
  background-color: #f7f4ed !important;
}
thead th {
  color: #6b6b6b !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* ── Gano Excel Dark Mode Theme (High Contrast & Clear Readability) ────────
   Deep espresso-black background (#121110) with crisp card surfaces (#1a1816),
   high-contrast white/light-slate text (#ffffff, #f1f5f9, #cbd5e1),
   and signature crimson red (#c41230) & warm gold (#e8bc20) accents.
   ──────────────────────────────────────────────────────────────────────── */
html.dark {
  color-scheme: dark;
}
html.dark body {
  background-color: #121110 !important;
  color: #f1f5f9 !important;
}
html.dark .bg-slate-50,
html.dark .bg-slate-100\/50 {
  background-color: #121110 !important;
}
html.dark .bg-white {
  background-color: #1a1816 !important;
}
html.dark .bg-white\/85 {
  background-color: rgba(26, 24, 22, 0.92) !important;
}
html.dark .bg-slate-100 {
  background-color: #26221f !important;
}
html.dark .bg-slate-200 {
  background-color: #332d28 !important;
}

/* High-Contrast Typography in Dark Mode (no low-contrast muddy brown) */
html.dark .text-slate-900 {
  color: #ffffff !important;
}
html.dark .text-slate-800 {
  color: #ffffff !important;
}
html.dark .text-slate-700 {
  color: #f1f5f9 !important;
}
html.dark .text-slate-600 {
  color: #e2e8f0 !important;
}
html.dark .text-slate-500 {
  color: #cbd5e1 !important;
}
html.dark .text-slate-400 {
  color: #94a3b8 !important;
}

/* Borders & Dividers in Dark Mode */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/80 {
  border-color: #332e29 !important;
}
html.dark .border-slate-300 {
  border-color: #443e37 !important;
}
html.dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #272320 !important;
}

/* Hover States in Dark Mode */
html.dark .hover\:bg-slate-50:hover {
  background-color: #26221f !important;
}
html.dark .hover\:bg-slate-100:hover {
  background-color: #332d28 !important;
  color: #ffffff !important;
}
html.dark .hover\:border-slate-300:hover {
  border-color: #574b42 !important;
}

/* Cards & Elevated Containers */
html.dark .shadow-card {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px #332e29 !important;
}
html.dark .shadow-pop {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px #443e37 !important;
}

/* Table Headers & Rows in Dark Mode */
html.dark thead,
html.dark thead.bg-slate-50\/60 {
  background-color: #161413 !important;
  border-bottom: 1px solid #332e29 !important;
}
html.dark thead th {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}
html.dark tbody tr:hover,
html.dark tr.hover\:bg-slate-50\/60:hover {
  background-color: #23201c !important;
}

/* Unread / New Conversation Row in Dark Mode (replaces glaring pink block) */
html.dark tr.bg-rose-50\/50,
html.dark .bg-rose-50\/50,
html.dark .bg-rose-50 {
  background-color: rgba(196, 18, 48, 0.18) !important;
}
html.dark tr.bg-rose-50\/50:hover {
  background-color: rgba(196, 18, 48, 0.28) !important;
}
html.dark tr.bg-rose-50\/50 td {
  color: #ffffff !important;
}
html.dark tr.bg-rose-50\/50 a {
  color: #ffffff !important;
}
html.dark tr.bg-rose-50\/50 .text-slate-400,
html.dark tr.bg-rose-50\/50 .text-slate-500,
html.dark tr.bg-rose-50\/50 .text-slate-600 {
  color: #fca5a5 !important;
}

/* Sidebar / Left Menu — deep espresso black, darker shade of the brown (zero bright red) */
aside,
aside.bg-\[\#0c0b0a\],
html.dark aside,
html.dark aside.bg-\[\#0c0b0a\] {
  background-color: #0c0b0a !important;
  border-right: 1px solid #1e1b18 !important;
}
html.dark a.hover\:text-brand-700:hover,
html.dark .hover\:text-brand-700:hover {
  color: #f87171 !important; /* High-contrast crimson hover for links */
}

/* Status Badges in Dark Mode */
html.dark .bg-amber-50 {
  background-color: rgba(232, 188, 32, 0.18) !important;
}
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900 {
  color: #fce183 !important; /* Crisp luminous gold */
  font-weight: 600 !important;
}
html.dark .border-amber-200,
html.dark .border-amber-300 {
  border-color: #6a4f26 !important;
}
html.dark .bg-amber-100 {
  background-color: rgba(217, 119, 6, 0.25) !important;
}

html.dark .bg-rose-100 {
  background-color: rgba(196, 18, 48, 0.28) !important;
}
html.dark .text-rose-700,
html.dark .text-rose-800 {
  color: #fca5a5 !important;
  font-weight: 600 !important;
}
html.dark .border-rose-200,
html.dark .border-rose-300 {
  border-color: #5c1822 !important;
}

html.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.16) !important;
}
html.dark .text-emerald-700,
html.dark .text-emerald-800 {
  color: #86efac !important;
  font-weight: 600 !important;
}

html.dark .bg-sky-50 {
  background-color: rgba(14, 165, 233, 0.16) !important;
}
html.dark .text-sky-700,
html.dark .text-sky-800 {
  color: #7dd3fc !important;
  font-weight: 600 !important;
}

/* Inputs, Textareas, Selects in Dark Mode */
html.dark input[type="text"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark textarea,
html.dark select {
  background-color: #161413 !important;
  color: #ffffff !important;
  border-color: #38332e !important;
}
html.dark input[type="text"]:focus,
html.dark input[type="search"]:focus,
html.dark input[type="tel"]:focus,
html.dark input[type="email"]:focus,
html.dark input[type="password"]:focus,
html.dark input[type="number"]:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #c41230 !important;
  --tw-ring-color: #c41230 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8 !important;
}
html.dark input:disabled,
html.dark textarea:disabled,
html.dark select:disabled {
  background-color: #1a1816 !important;
  color: #64748b !important;
}

/* Topbar search focus in dark mode */
html.dark .focus-within\:border-brand-300:focus-within {
  border-color: #c41230 !important;
}
html.dark .focus-within\:bg-white:focus-within {
  background-color: #1a1816 !important;
}

/* Dark mode scrollbars & selection */
html.dark ::selection {
  background: #860c1f;
  color: #ffffff;
}
html.dark * {
  scrollbar-color: #443e37 #1a1816;
}
html.dark *::-webkit-scrollbar-thumb {
  background: #443e37;
}
html.dark *::-webkit-scrollbar-thumb:hover {
  background: #574b42;
}