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

:root {
  --ink: #0A0F1E;
  --teal: #0B7F76;
  --teal-mist: #E8F6F4;
  --teal-deep: #075E58;
  --teal-bright: #14B8A6;
  --blue: #173B63;
  --blue-mist: #EAF1F7;
  --gold: #D3B653;
  --gold-tint: #F8F2DD;
  --white: #FFFFFF;
  --mist: #F8FAFC;
  --slate: #475569;
  --border: #E5EAF0;
}

html {
  background: var(--white);
}

.bg-white {
  background-color: var(--white) !important;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

input,
select,
textarea {
  color: var(--ink);
}

input::placeholder,
textarea::placeholder {
  color: var(--slate);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

input[type='checkbox'] {
  accent-color: var(--teal);
}

.font-mono {
  font-family: 'IBM Plex Mono', monospace !important;
}

.tab-active {
  border-bottom-color: var(--teal) !important;
  color: var(--teal) !important;
}

.bg-gray-950,
.bg-gray-900 {
  background-color: var(--white) !important;
}

.bg-gray-900\/50,
.bg-gray-800 {
  background-color: var(--mist) !important;
}

.bg-gray-700,
.bg-slate-800,
.bg-zinc-800 {
  background-color: var(--blue-mist) !important;
}

.border-gray-800,
.border-gray-800\/50,
.border-gray-700 {
  border-color: var(--border) !important;
}

.text-white,
.text-gray-100,
.text-gray-200 {
  color: var(--ink) !important;
}

.text-gray-300 {
  color: var(--ink) !important;
}

.text-gray-400,
.text-gray-500,
.text-slate-400,
.text-zinc-400 {
  color: var(--slate) !important;
}

.text-gray-600 {
  color: var(--slate) !important;
}

.hover\:bg-gray-700:hover,
.hover\:bg-gray-900\/50:hover {
  background-color: var(--blue-mist) !important;
}

.hover\:border-gray-700:hover {
  border-color: var(--teal) !important;
}

.hover\:text-white:hover,
.hover\:text-gray-200:hover,
.hover\:text-gray-300:hover,
.hover\:text-gray-400:hover {
  color: var(--ink) !important;
}

.bg-teal-600 {
  background-color: var(--teal) !important;
}

.bg-cyan-700,
.bg-violet-700 {
  background-color: var(--teal) !important;
}

.hover\:bg-teal-500:hover,
.hover\:bg-cyan-600:hover,
.hover\:bg-violet-600:hover {
  background-color: var(--teal-deep) !important;
}

.bg-blue-600,
.bg-blue-500,
.bg-purple-500 {
  background-color: var(--blue) !important;
}

.bg-teal-500 {
  background-color: var(--teal-bright) !important;
}

.bg-yellow-500 {
  background-color: var(--gold) !important;
}

.bg-gray-500 {
  background-color: var(--slate) !important;
}

.bg-teal-600.text-white,
.bg-blue-600.text-white,
.bg-cyan-700.text-white,
.bg-violet-700.text-white {
  color: var(--white) !important;
}

.bg-teal-900\/40,
.bg-teal-900\/50,
.bg-teal-900\/60 {
  background-color: var(--teal-mist) !important;
}

.border-teal-700 {
  border-color: var(--teal) !important;
}

.text-teal-300,
.text-teal-400 {
  color: var(--teal-deep) !important;
}

.bg-blue-900\/40,
.bg-blue-900\/60 {
  background-color: var(--blue-mist) !important;
}

.text-blue-300,
.text-blue-400,
.hover\:text-blue-300:hover {
  color: var(--blue) !important;
}

.bg-amber-900\/40,
.bg-amber-900\/60,
.bg-yellow-900\/60 {
  background-color: var(--gold-tint) !important;
}

.text-amber-300,
.text-amber-400,
.text-amber-400\/70,
.text-yellow-200,
.text-yellow-300,
.text-yellow-400,
.text-yellow-500 {
  color: var(--ink) !important;
}

.border-yellow-600\/60,
.border-yellow-700 {
  border-color: var(--gold) !important;
}

.bg-green-900\/40,
.bg-green-900\/60,
.bg-emerald-900\/60 {
  background-color: var(--teal-mist) !important;
}

.text-green-300,
.text-green-400,
.text-green-500,
.text-emerald-300 {
  color: var(--teal-deep) !important;
}

.bg-red-900\/40,
.bg-red-900\/60,
.bg-rose-900\/40,
.bg-rose-900\/60 {
  background-color: var(--mist) !important;
}

.text-red-300,
.text-red-400,
.text-rose-300,
.text-rose-400 {
  color: var(--ink) !important;
}

.border-red-800 {
  border-color: var(--ink) !important;
}

.bg-cyan-900\/40,
.bg-cyan-900\/60,
.bg-sky-900\/40 {
  background-color: var(--blue-mist) !important;
}

.text-cyan-300,
.text-cyan-400,
.text-cyan-500,
.text-sky-400 {
  color: var(--blue) !important;
}

.border-cyan-800,
.border-cyan-900,
.border-cyan-900\/40 {
  border-color: var(--blue) !important;
}

.bg-indigo-900\/40,
.bg-indigo-900\/60,
.bg-violet-900\/40,
.bg-violet-900\/60,
.bg-purple-900\/40,
.bg-purple-900\/60 {
  background-color: var(--blue-mist) !important;
}

.text-indigo-300,
.text-indigo-400,
.text-violet-300,
.text-violet-400,
.text-purple-300,
.text-purple-400,
.hover\:text-purple-300:hover {
  color: var(--blue) !important;
}

.border-violet-800,
.border-violet-900 {
  border-color: var(--blue) !important;
}

.bg-pink-900\/40,
.bg-pink-900\/60,
.bg-fuchsia-900\/40 {
  background-color: var(--blue-mist) !important;
}

.text-pink-300,
.text-pink-400,
.text-fuchsia-300,
.text-fuchsia-400 {
  color: var(--blue) !important;
}

.bg-orange-900\/40,
.bg-orange-900\/60 {
  background-color: var(--mist) !important;
}

.text-orange-300,
.text-orange-400 {
  color: var(--ink) !important;
}

.bg-lime-900\/40 {
  background-color: var(--teal-mist) !important;
}

.text-lime-400 {
  color: var(--teal-deep) !important;
}

.bg-black\/50,
.bg-black\/70 {
  background-color: rgb(10 15 30 / 28%) !important;
}

.rounded-xl {
  border-radius: 8px !important;
}

.stage-card,
#emailRef > div,
#intakeList > div {
  box-shadow: 0 1px 2px rgb(10 15 30 / 6%);
}

.stage-card:hover {
  border-color: var(--teal) !important;
  box-shadow: 0 6px 18px rgb(10 15 30 / 10%);
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .crm-topbar-inner,
  .crm-topbar-primary {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-topbar-inner {
    gap: 8px;
  }

  .crm-topbar-primary {
    gap: 4px;
    min-width: 0;
  }

  .crm-topbar-primary > h1 {
    text-align: center;
  }

  .crm-topbar-nav {
    display: grid !important;
    gap: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .crm-topbar-nav > button {
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap;
  }

  .crm-topbar-actions {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-width: 0;
    width: 100%;
  }

  .crm-aida-contact {
    white-space: nowrap;
  }

  #syncStatus:not(:empty) {
    flex-basis: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-card {
    transition: none;
  }

  .stage-card:hover {
    transform: none;
  }
}