/* ContactHub adapter for Verdannet UI v0.3.0. */
:root {
  --bg: var(--vd-bg);
  --panel: var(--vd-surface);
  --text: var(--vd-text);
  --muted: var(--vd-text-muted);
  --line: var(--vd-border);
  --accent: var(--vd-primary);
  --accent2: var(--vd-primary-soft);
  --danger: var(--vd-danger);
  --success: var(--vd-success);
  --shadow: var(--vd-shadow-card);
}

html,
body {
  background: var(--vd-bg);
  color: var(--vd-text);
  font-family: var(--vd-font-sans);
}

body {
  background:
    radial-gradient(circle at 90% 4%, color-mix(in srgb, var(--vd-ambience-accent) 6%, transparent), transparent 22rem),
    linear-gradient(180deg, var(--vd-bg-soft), var(--vd-bg));
}

.topbar {
  min-height: 72px;
  height: auto;
  background: linear-gradient(145deg, var(--vd-blue-900), var(--vd-blue-950));
  border-bottom: 1px solid color-mix(in srgb, var(--vd-primary) 36%, transparent);
  box-shadow: 0 8px 26px rgb(38 74 99 / 0.12);
}

.contact-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
}

.contact-brand__mark {
  position: relative;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: var(--vd-radius-sm);
  background: color-mix(in srgb, #fff 10%, transparent);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  font-weight: 900;
}

.contact-brand__mark::after {
  content: "";
  position: absolute;
  right: -0.16rem;
  bottom: -0.16rem;
  width: 0.48rem;
  height: 0.48rem;
  border: 2px solid var(--vd-blue-950);
  border-radius: 50%;
  background: var(--vd-ambience-accent);
}

.contact-brand__copy {
  display: grid;
  line-height: 1.05;
}

.contact-brand__copy strong {
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}

.contact-brand__copy small {
  margin-top: 0.24rem;
  color: rgb(255 255 255 / 0.68);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.topbar nav > a,
.link-button {
  color: rgb(255 255 255 / 0.78);
}

.topbar nav > a:hover,
.link-button:hover {
  color: #fff;
}

.user-pill {
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--vd-radius-pill);
}

.hero {
  border: 1px solid color-mix(in srgb, var(--vd-primary) 16%, var(--vd-border));
  border-radius: var(--vd-radius-lg);
  background:
    radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--vd-ambience-accent) 18%, transparent), transparent 15rem),
    linear-gradient(135deg, var(--vd-blue-900), var(--vd-blue-700));
  box-shadow: var(--vd-shadow-float);
}

.hero .eyebrow {
  color: #e4f0f7;
}

.eyebrow {
  color: var(--vd-primary);
}

.button {
  border-radius: var(--vd-radius-sm);
  background: var(--vd-primary);
  color: var(--vd-primary-contrast);
  transition: background var(--vd-duration-fast) var(--vd-ease), transform var(--vd-duration-fast) var(--vd-ease), border-color var(--vd-duration-fast) var(--vd-ease);
}

.button:hover {
  background: var(--vd-primary-hover);
  transform: translateY(-1px);
}

.button.secondary {
  border-color: var(--vd-border-strong);
  background: var(--vd-surface);
  color: var(--vd-primary);
}

.button.secondary:hover {
  border-color: color-mix(in srgb, var(--vd-primary) 45%, var(--vd-border));
  background: var(--vd-primary-soft);
}

.topbar .button {
  border: 1px solid rgb(255 255 255 / 0.14);
  background: #fff;
  color: var(--vd-blue-900);
}

.panel,
.stat,
.company-card,
.mini-stat,
.auth-card,
.table-wrap,
.filters,
.service-card,
.note-block {
  border-color: var(--vd-border);
  background: var(--vd-surface);
  box-shadow: var(--vd-shadow-card);
}

.panel,
.auth-card {
  border-radius: var(--vd-radius-md);
}

.stat,
.company-card,
.mini-stat,
.table-wrap,
.filters,
.service-card,
.note-block {
  border-radius: var(--vd-radius-sm);
}

.field-control,
input,
select,
textarea {
  border-color: var(--vd-border-strong);
  border-radius: var(--vd-radius-sm);
  background: var(--vd-surface);
  color: var(--vd-text);
}

.field-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--vd-focus);
  outline: 3px solid color-mix(in srgb, var(--vd-focus) 18%, transparent);
}

th {
  color: var(--vd-text-muted);
  background: var(--vd-surface-2);
}

td a,
.company-facts a,
.source-line a,
.service-card a {
  color: var(--vd-primary);
}

.badge.internal,
.flash {
  color: var(--vd-success);
  background: color-mix(in srgb, var(--vd-success) 11%, var(--vd-surface));
}

.badge.external,
.stepper .active {
  color: var(--vd-primary);
  background: var(--vd-primary-soft);
}

.choice:hover,
.company-link:hover {
  border-color: color-mix(in srgb, var(--vd-primary) 38%, var(--vd-border));
  background: var(--vd-primary-soft);
}

.service-card.used { border-left-color: var(--vd-primary); }
.service-card.offered { border-left-color: var(--vd-ambience-accent); }

.contacthub-display-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.contacthub-ambience-select {
  min-width: 8.75rem;
  min-height: 2.25rem;
  padding: 0 2rem 0 0.7rem;
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-sm);
  background: var(--vd-surface);
  color: var(--vd-text);
  font: inherit;
  font-size: var(--vd-text-xs);
  font-weight: 700;
}

.contacthub-theme-toggle {
  min-height: 2.25rem;
  padding-inline: 0.7rem;
  gap: 0.35rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root[data-vd-ambience] .hero {
  background:
    radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--vd-ambience-accent) 24%, transparent), transparent 15rem),
    linear-gradient(135deg, var(--vd-blue-900), color-mix(in srgb, var(--vd-blue-700) 86%, var(--vd-ambience-accent)));
}

:root[data-vd-theme="dark"] .contacthub-app-header,
:root[data-vd-theme="dark"] .vd-sidebar {
  background-color: var(--vd-bg-soft);
}

:root[data-vd-theme="dark"] .panel,
:root[data-vd-theme="dark"] .stat,
:root[data-vd-theme="dark"] .company-card,
:root[data-vd-theme="dark"] .mini-stat,
:root[data-vd-theme="dark"] .auth-card,
:root[data-vd-theme="dark"] .table-wrap,
:root[data-vd-theme="dark"] .filters,
:root[data-vd-theme="dark"] .service-card,
:root[data-vd-theme="dark"] .note-block,
:root[data-vd-theme="dark"] .field-control,
:root[data-vd-theme="dark"] input,
:root[data-vd-theme="dark"] select,
:root[data-vd-theme="dark"] textarea {
  background: var(--vd-surface);
  color: var(--vd-text);
  border-color: var(--vd-border);
}

:focus-visible {
  outline-color: var(--vd-focus);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .contacthub-display-controls { gap: 0.3rem; }
  .contacthub-ambience-select { min-width: 7.5rem; max-width: 8.5rem; }
  .contacthub-theme-toggle [data-vd-theme-label] { display: none; }
}