/* PeakDigit theme for Chatwoot — matched pixel-for-pixel to Respond.io dark inbox.
   Strategy: override Chatwoot's own semantic design tokens (RGB triplets) under .dark,
   so every component (sidebar, lists, buttons, inputs, modals) re-colors consistently
   without targeting fragile compiled class names. Served same-origin from a bind mount;
   survives chatwoot image updates (nothing lives inside the image). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Respond.io palette (sampled from product screenshot) ----------
   rail / main bg   #101113   -> 16 17 19
   sidebar / list   #222225   -> 34 34 37
   active / banner  #353C45   -> 53 60 69
   accent blue      #6BA4FF   -> 107 164 255
   accent dark      #689FF7   -> 104 159 247
   border weak      #2A2C2F   -> 42 44 47
   border strong    #3A3B3E   -> 58 59 62
----------------------------------------------------------------------------- */

html.dark, .dark {
  --slate-1: 16 17 19;
  --slate-2: 24 25 28;
  --slate-3: 34 34 37;
  --slate-4: 42 44 47;
  --slate-5: 53 60 69;
  --slate-6: 58 59 62;
  --slate-7: 70 74 80;
  --slate-8: 96 102 110;
  --slate-9: 120 126 135;
  --slate-10: 140 146 155;
  --slate-11: 182 187 195;
  --slate-12: 240 241 243;

  --blue-9: 107 164 255;
  --blue-10: 104 159 247;
  --blue-11: 150 192 255;
  --blue-12: 218 236 255;
  --border-blue: 107, 164, 255, .5;
  --border-blue-strong: 150 192 255;
  --text-blue: 218 236 255;

  --iris-9: 107 164 255;
  --iris-10: 104 159 247;
  --iris-11: 150 192 255;
  --solid-iris: 30 48 78;
  --solid-purple: 30 48 78;

  --background-color: 16 17 19;
  --surface-1: 16 17 19;
  --surface-2: 34 34 37;
  --surface-active: 53 60 69;
  --solid-1: 34 34 37;
  --solid-2: 42 44 47;
  --solid-3: 53 60 69;
  --solid-active: 53 60 69;
  --solid-blue: 24 42 72;
  --solid-blue-2: 24 25 28;
  --card-color: 34 34 37;
  --button-color: 42 44 47;
  --label-background: 42 44 47;
  --alpha-1: 34, 34, 37, .85;
  --alpha-3: 24, 25, 28, .96;
  --background-input-box: 255, 255, 255, .04;

  --border-weak: 42 44 47;
  --border-strong: 58 59 62;
  --border-container: 42 44 47;
}

html, body, #app, .dark, button, input, textarea, select {
  font-family: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

.dark .shadow, .dark .shadow-md, .dark .shadow-lg { box-shadow: none !important; }

.dark .bg-n-brand, .dark .bg-blue-800, .dark .bg-woot-500,
.dark button.bg-n-brand, .dark .button.primary {
  background-color: rgb(107 164 255) !important;
  color: #0B1220 !important;
}
.dark .bg-n-brand:hover, .dark .button.primary:hover { background-color: rgb(104 159 247) !important; }
.dark .text-n-brand, .dark .text-woot-500 { color: rgb(107 164 255); }

.dark .woot-sidebar-menu, .dark [class*="primary-sidebar"], .dark nav.sidebar {
  background-color: rgb(16 17 19) !important;
  border-right: 1px solid rgb(42 44 47) !important;
}

a[href*="chatwoot.com"], [class*="powered-by"], .powered-by { display: none !important; }

body.pd-auth-bg { background: rgb(16 17 19) !important; }
body.pd-auth-bg::before {
  content: ''; position: fixed; inset: 0;
  background: url('/pd-brand/logo-light.png') center/560px no-repeat;
  opacity: .035; pointer-events: none; z-index: 0;
}
body.pd-auth-bg #app { position: relative; z-index: 1; }

/* SPA login/reset card: force dark surfaces + Respond.io blue regardless of theme class */
body.pd-auth-bg .bg-white, body.pd-auth-bg [class*="bg-n-background"], body.pd-auth-bg [class*="bg-n-solid"] {
  background-color: rgb(34 34 37) !important;
  border: 1px solid rgb(58 59 62) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body.pd-auth-bg h1, body.pd-auth-bg h2, body.pd-auth-bg h3, body.pd-auth-bg label, body.pd-auth-bg p { color: #F0F1F3 !important; }
body.pd-auth-bg input {
  background: rgb(16 17 19) !important; border: 1px solid rgb(58 59 62) !important; color: #F0F1F3 !important; border-radius: 8px !important;
}
body.pd-auth-bg input:focus { border-color: rgb(107 164 255) !important; box-shadow: 0 0 0 3px rgba(107,164,255,.2) !important; }
body.pd-auth-bg button[type="submit"], body.pd-auth-bg .button.primary {
  background: rgb(107 164 255) !important; color: #0B1220 !important; border: none !important; border-radius: 8px !important;
}
body.pd-auth-bg a { color: rgb(107 164 255) !important; }

/* ================= Main app: PeakDigit sidebar (super-admin style pills) ================= */
.dark aside.bg-n-background { background-color: rgb(24 25 28) !important; border-color: rgb(42 44 47) !important; }
/* logo block injected by layout script */
#pd-side-logo { display:flex; align-items:center; padding: 14px 12px 10px; }
#pd-side-logo img { height: 22px; width: auto; }
/* pill rows like the super admin sidebar */
.dark aside.bg-n-background a.h-8.rounded-lg, .dark aside.bg-n-background a.h-8 {
  background-color: rgb(34 34 37) !important; margin: 2px 0 !important; border: 1px solid transparent !important;
  color: rgb(200 204 210) !important;
}
.dark aside.bg-n-background a.h-8:hover { background: rgb(42 44 47) !important; }
.dark aside.bg-n-background a.h-8[class*="bg-n-"][class*="active"], .dark aside.bg-n-background a.h-8.router-link-active,
.dark aside.bg-n-background a.h-8.router-link-exact-active, .dark aside.bg-n-background a.h-8[aria-current] {
  background-color: rgb(53 60 69) !important; color: rgb(107 164 255) !important; border-color: rgb(58 59 62) !important;
}
.dark aside.bg-n-background a.h-8 span[class*="i-"] { color: rgb(160 166 175) !important; }
.dark aside.bg-n-background a.h-8.router-link-active span[class*="i-"] { color: rgb(107 164 255) !important; }
/* hide the tiny account-switcher icon (brand icon moves to the logo block) */
.dark aside.bg-n-background section > div:first-child > div.size-6 { display:none !important; }

/* ================= Main area: animated PeakDigit watermark + empty state at bottom ================= */
#pd-watermark {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;
  display:flex; align-items:center; justify-content:center;
}
#pd-watermark::before {               /* soft brand glow */
  content:''; position:absolute; width:900px; height:900px; border-radius:50%;
  background: radial-gradient(circle, rgba(107,164,255,.10) 0%, rgba(107,164,255,0) 60%);
  animation: pd-glow 9s ease-in-out infinite;
}
#pd-watermark img {
  width: 520px; max-width:60%; opacity:.07; filter: drop-shadow(0 0 40px rgba(107,164,255,.25));
  animation: pd-float 7s ease-in-out infinite;
}
#pd-watermark .pd-tag {
  position:absolute; bottom:34%; letter-spacing:.35em; font-size:11px; text-transform:uppercase;
  color: rgba(160,166,175,.35); animation: pd-fade 7s ease-in-out infinite;
}
@keyframes pd-float { 0%,100%{ transform: translateY(0) scale(1);} 50%{ transform: translateY(-14px) scale(1.02);} }
@keyframes pd-glow  { 0%,100%{ transform: scale(1); opacity:.8;} 50%{ transform: scale(1.15); opacity:1;} }
@keyframes pd-fade  { 0%,100%{ opacity:.6;} 50%{ opacity:1;} }
@media (prefers-reduced-motion: reduce) { #pd-watermark *, #pd-watermark::before { animation: none !important; } }
/* empty-state block moved to the bottom (marked by layout script) */
.pd-empty-host { position:relative !important; }
.pd-empty-bottom { position:absolute !important; left:0; right:0; bottom:40px; top:auto !important; height:auto !important; z-index:1; }
.pd-empty-bottom .h-full { height:auto !important; }
.pd-empty-bottom .mt-9 { margin-top: 10px !important; }
.pd-empty-bottom img, .pd-empty-bottom svg:first-of-type { display:none !important; }   /* drop generic bubble illustration */
.pd-empty-bottom p, .pd-empty-bottom span { color: rgb(140 146 155) !important; }
/* top-level sidebar rows (Contacts, Reports, Settings…) — same pill */
.dark aside.bg-n-background li > div.h-8.rounded-lg {
  background-color: rgb(34 34 37) !important; margin: 2px 0 !important; color: rgb(200 204 210) !important;
}
.dark aside.bg-n-background li > div.h-8.rounded-lg:hover { background-color: rgb(42 44 47) !important; }
.dark aside.bg-n-background li > div.h-8.rounded-lg[class*="bg-n-"][class*="alpha"], .dark aside.bg-n-background li > div.h-8.rounded-lg.text-n-slate-12 { background-color: rgb(53 60 69) !important; color: rgb(107 164 255) !important; }

.pd-auth-card {
  background: rgb(34 34 37) !important;
  border: 1px solid rgb(58 59 62) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.pd-auth-card input {
  background: rgb(16 17 19) !important; border: 1px solid rgb(58 59 62) !important;
  color: #F0F1F3 !important; border-radius: 8px !important;
}
.pd-auth-card input:focus { border-color: rgb(107 164 255) !important; box-shadow: 0 0 0 3px rgba(107,164,255,.2) !important; outline: none; }
.pd-auth-card label { color: rgb(182 187 195) !important; }
.pd-auth-card button[type="submit"] { background: rgb(107 164 255) !important; color: #0B1220 !important; }

/* ================= Super Admin console (Administrate) — readable dark ================= */
.dark.pd-sa body, .dark.pd-sa main, .dark.pd-sa [class*="bg-white"], .dark.pd-sa [class*="bg-woot-25"], .dark.pd-sa [class*="bg-slate-25"], .dark.pd-sa [class*="bg-slate-50"] {
  background-color: rgb(16 17 19) !important;
}
.dark.pd-sa [role="navigation"] { background-color: rgb(34 34 37) !important; border-color: rgb(42 44 47) !important; }
/* header bars / toolbars that were white */
.dark.pd-sa header, .dark.pd-sa .header, .dark.pd-sa main > div:first-child > div.flex.items-center,
.dark.pd-sa [class*="border-b"][class*="bg-white"] { background-color: rgb(34 34 37) !important; border-color: rgb(42 44 47) !important; }

/* text — the big fix: every slate/black text tone -> light */
.dark.pd-sa, .dark.pd-sa body, .dark.pd-sa main, .dark.pd-sa td, .dark.pd-sa th, .dark.pd-sa p, .dark.pd-sa span, .dark.pd-sa div, .dark.pd-sa label, .dark.pd-sa h1, .dark.pd-sa h2, .dark.pd-sa h3, .dark.pd-sa h4, .dark.pd-sa dt, .dark.pd-sa dd,
.dark.pd-sa [class*="text-slate-"], .dark.pd-sa [class*="text-black"], .dark.pd-sa [class*="text-gray-"] {
  color: rgb(230 232 236) !important;
}
.dark.pd-sa th, .dark.pd-sa [class*="text-slate-500"], .dark.pd-sa [class*="text-slate-600"], .dark.pd-sa .text-xs { color: rgb(160 166 175) !important; }
.dark.pd-sa a:not(.button):not([class*="bg-"]) { color: rgb(107 164 255) !important; }
.dark.pd-sa a.text-red-500, .dark.pd-sa a[class*="text-red"], .dark.pd-sa [data-method="delete"], .dark.pd-sa a[href*="destroy"] { color: rgb(248 113 113) !important; }

/* sidebar nav items + active */
.dark.pd-sa [role="navigation"] a { color: rgb(200 204 210) !important; }
.dark.pd-sa [role="navigation"] a:hover { background-color: rgb(42 44 47) !important; }
.dark.pd-sa [role="navigation"] a[class*="bg-white"], .dark.pd-sa [role="navigation"] .active, .dark.pd-sa [role="navigation"] a[aria-current] {
  background-color: rgb(53 60 69) !important; color: rgb(107 164 255) !important;
}

/* tables */
.dark.pd-sa table { background: transparent !important; }
.dark.pd-sa tr { border-color: rgb(42 44 47) !important; }
.dark.pd-sa tr:hover td { background-color: rgb(24 25 28) !important; }
.dark.pd-sa [class*="divide-"] > * { border-color: rgb(42 44 47) !important; }

/* inputs, selects, search */
.dark.pd-sa input, .dark.pd-sa select, .dark.pd-sa textarea {
  background-color: rgb(24 25 28) !important; color: rgb(240 241 243) !important; border: 1px solid rgb(58 59 62) !important; border-radius: 8px !important;
}
.dark.pd-sa input::placeholder { color: rgb(140 146 155) !important; }
.dark.pd-sa input:focus, .dark.pd-sa select:focus { border-color: rgb(107 164 255) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(107,164,255,.2) !important; }

/* buttons */
.dark.pd-sa .button, .dark.pd-sa button, .dark.pd-sa input[type="submit"], .dark.pd-sa a[class*="bg-woot"], .dark.pd-sa a[class*="bg-blue"] {
  background-color: rgb(107 164 255) !important; color: #0B1220 !important; border: none !important; border-radius: 8px !important;
}
.dark.pd-sa .button:hover, .dark.pd-sa button:hover { background-color: rgb(104 159 247) !important; }

/* stat cards on dashboard */
.dark.pd-sa [class*="shadow"], .dark.pd-sa [class*="rounded"][class*="border"] { background-color: rgb(34 34 37) !important; border-color: rgb(42 44 47) !important; box-shadow: none !important; }
.dark.pd-sa [class*="text-4xl"], .dark.pd-sa [class*="text-3xl"], .dark.pd-sa [class*="text-2xl"] { color: rgb(255 255 255) !important; }

/* chart bars/labels (Chartkick/Chart.js draws to canvas; axis text set via JS below) */
.dark.pd-sa canvas { filter: none !important; }