/* ============================================================
   LA PALMA PRO — IdV-specific overrides on top of desktop.css
   Sub-line tags, sidebar palm-green skin, gold accents.
   ============================================================ */

/* Sidebar reskin — palm green, not dark neutral */
.sidebar {
  background: var(--brand-deep);
}

.sidebar__brand-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent);
  font-weight: var(--w-semibold);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: -0.01em;
}

.sidebar__brand-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.sidebar__link--active {
  background: rgba(200, 160, 71, 0.16);
}

.sidebar__link--active::before {
  background: var(--accent);
}

.sidebar__footer-agency {
  color: rgba(255, 255, 255, 0.7);
}
.sidebar__footer-version {
  color: rgba(255, 255, 255, 0.35);
}

/* Topbar — cream paper background */
.topbar {
  background: var(--paper);
}

/* Avatar — palm green tint */
.topbar__avatar-circle {
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: var(--w-semibold);
}

/* Topbar title — Fraunces */
.topbar__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--w-semibold);
  letter-spacing: -0.005em;
}

/* Hero / page title — Fraunces */
.hero__title,
.section-heading,
.schools-header__title,
.tickets-header__title,
.cal-controls__month,
.trip-header__title,
.surface__title,
.brand__name {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  letter-spacing: -0.015em;
}

/* Stat values — display font */
.stat-card__value {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  letter-spacing: -0.025em;
}

/* Buttons — primary becomes palm green */
.btn--primary {
  background: var(--brand);
}
.btn--primary:hover {
  background: var(--brand-deep);
}

/* Tab underline — gold */
.tabs__item--active {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

/* Filter focus — gold */
.filter-search:focus,
.filter-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 160, 71, 0.15);
}

/* Live dot — palm green for "on track", gold for "in volo" / "in viaggio" */
.live-dot--gold {
  background: var(--accent);
}
.live-dot--gold::after {
  background: var(--accent);
}

/* ============================================================
   SUB-LINE BADGES — IdV's 6 commercial product lines
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--w-semibold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: uppercase;
}
.tag--atelier    { background: var(--line-atelier-soft); color: var(--line-atelier); }
.tag--sartoriale { background: var(--line-sartoriale-soft); color: var(--brand-deep); }
.tag--smart      { background: var(--line-smart-soft); color: var(--line-smart); }
.tag--cultura    { background: var(--line-cultura-soft); color: var(--line-cultura); }
.tag--honeymoon  { background: var(--line-honeymoon-soft); color: var(--line-honeymoon); }
.tag--jaime      { background: var(--line-jaime-soft); color: var(--line-jaime); }
.tag--lg { font-size: 12px; padding: 3px 10px; }

/* ============================================================
   AVATARS — initials chip (compact for table density)
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.avatar--lg { width: 40px; height: 40px; font-size: 13px; }
.avatar--xl { width: 56px; height: 56px; font-size: 16px; }
.avatar--gold    { background: var(--accent-soft); color: var(--accent-text); }
.avatar--purple  { background: var(--line-atelier-soft); color: var(--line-atelier); }
.avatar--blush   { background: var(--line-honeymoon-soft); color: var(--line-honeymoon); }
.avatar--blue    { background: var(--line-smart-soft); color: var(--line-smart); }
.avatar--brown   { background: var(--line-cultura-soft); color: var(--line-cultura); }

.cell-with-avatar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cell-with-avatar__name { font-weight: var(--w-semibold); color: var(--color-neutral-800); }
.cell-with-avatar__sub  { font-size: var(--text-xs); color: var(--color-neutral-500); margin-top: 1px; }

/* ============================================================
   LIVE TICKER — couples in-trip RIGHT NOW
   ============================================================ */
.ticker {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.ticker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border);
}
.ticker__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--w-semibold);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ticker__title em {
  font-style: italic;
  color: var(--brand);
  font-weight: var(--w-medium);
}
.ticker__count {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  font-weight: var(--w-medium);
}
.ticker__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.ticker__row:hover {
  background: var(--brand-tint);
}
.ticker__row:last-child {
  border-bottom: none;
}
.ticker__couple-name {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--color-neutral-800);
}
.ticker__couple-meta {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  margin-top: 1px;
}
.ticker__destination {
  font-size: var(--text-sm);
  color: var(--color-neutral-700);
  font-weight: var(--w-medium);
}
.ticker__day {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  text-align: right;
  white-space: nowrap;
}
.ticker__planb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: var(--w-semibold);
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   AGENT INBOX — Cicero auto-drafts queue
   ============================================================ */
.inbox-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.inbox-item:hover {
  background: var(--brand-tint);
}
.inbox-item:last-child {
  border-bottom: none;
}
.inbox-item__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.inbox-item__type--whatsapp { background: #25D366; color: #fff; }
.inbox-item__type--email { background: var(--brand-soft); color: var(--brand-deep); }
.inbox-item__type--phone { background: var(--accent-soft); color: var(--accent-text); }
.inbox-item__from {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--color-neutral-800);
}
.inbox-item__subject {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inbox-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  white-space: nowrap;
}
.inbox-item__confidence {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--w-semibold);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.inbox-item__confidence--high { color: var(--signal-ok); }
.inbox-item__confidence--mid  { color: var(--accent-text); }
.inbox-item__confidence--low  { color: var(--signal-warn); }

/* ============================================================
   AI-DRAFT preview block (used in inbox + plan-B engine)
   ============================================================ */
.draft {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 100%);
  border: 1px solid var(--accent-tint);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  position: relative;
}
.draft__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  margin-bottom: var(--space-2);
}
.draft__label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.draft__body {
  font-size: var(--text-sm);
  color: var(--color-neutral-700);
  line-height: var(--lh-normal);
  font-family: var(--font-body);
}
.draft__body em { color: var(--brand-deep); font-style: italic; }
.draft__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ============================================================
   CICERO BRAIN NARRATION (italic voice in trip detail)
   ============================================================ */
.cicero-narration {
  font-style: italic;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--brand-deep);
  line-height: var(--lh-loose);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-left: 2px solid var(--accent);
  margin: var(--space-3) 0;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.cicero-narration::before {
  content: '— Cicero · ';
  font-style: normal;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  display: block;
  margin-bottom: 4px;
}

/* ============================================================
   PLAN-B ENGINE OPTIONS
   ============================================================ */
.plan-b {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.plan-b__option {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.plan-b__option:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.plan-b__label {
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 4px;
}
.plan-b__title {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--color-neutral-800);
}
.plan-b__detail {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  margin-top: 2px;
}

/* ============================================================
   STACK SYNC ROW (Salesforce indicators)
   ============================================================ */
.sync-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  padding: 4px var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--color-neutral-600);
  font-weight: var(--w-medium);
}
.sync-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-ok);
  box-shadow: 0 0 0 2px rgba(46, 128, 86, 0.15);
}

/* ============================================================
   AGENCY HEATMAP — 170 partner agencies
   ============================================================ */
.heatmap {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 3px;
  padding: var(--space-3) 0;
}
.heatmap__cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--brand-soft);
  transition: transform var(--dur-fast) var(--ease-out);
}
.heatmap__cell:hover {
  transform: scale(1.4);
  z-index: 2;
  position: relative;
}
.heatmap__cell--l1 { background: var(--brand-soft); }
.heatmap__cell--l2 { background: #C5DCC8; }
.heatmap__cell--l3 { background: #8DC09E; }
.heatmap__cell--l4 { background: #4F9F73; }
.heatmap__cell--l5 { background: var(--brand); }
.heatmap__cell--new { background: var(--accent); }

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  margin-top: var(--space-2);
}
.heatmap-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 2px;
}

/* ============================================================
   WHATSAPP THREAD PREVIEW
   ============================================================ */
.wa-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: #ECE5DD;
  border-radius: var(--radius-md);
  max-height: 280px;
  overflow-y: auto;
}
.wa-msg {
  max-width: 75%;
  padding: 8px 12px;
  font-size: var(--text-sm);
  border-radius: 12px;
  position: relative;
  line-height: 1.4;
}
.wa-msg--in {
  background: var(--surface);
  align-self: flex-start;
  border-top-left-radius: 4px;
}
.wa-msg--out {
  background: #DCF8C6;
  align-self: flex-end;
  border-top-right-radius: 4px;
}
.wa-msg__time {
  display: block;
  font-size: 10px;
  color: var(--color-neutral-500);
  margin-top: 4px;
  text-align: right;
}

/* ============================================================
   CONVERSATIONAL QUOTE BUILDER — chat input + AI responses
   ============================================================ */
.chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.chat__msg {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}
.chat__msg--user {
  background: var(--brand);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat__msg--cicero {
  background: var(--surface);
  border: 1px solid var(--border);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  color: var(--ink);
}
.chat__msg-label {
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.7;
}
.chat__msg--cicero .chat__msg-label {
  color: var(--accent-text);
}

.chat-input {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}
.chat-input input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--text-sm);
  padding: 4px 8px;
}
.chat-input input::placeholder { color: var(--color-neutral-400); }

/* Itinerary suggestion cards (in nuovo-preventivo) */
.itinerary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.itinerary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
  cursor: pointer;
}
.itinerary-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.itinerary-card__line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.itinerary-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--w-semibold);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}
.itinerary-card__sub {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-3);
}
.itinerary-card__price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--w-semibold);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.itinerary-card__price-sub {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  margin-left: 4px;
}
.itinerary-card__detail {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--color-neutral-600);
  line-height: var(--lh-normal);
}

/* Hero metric strip (control tower) */
.hero-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero-strip__cell {
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--border);
}
.hero-strip__cell:last-child {
  border-right: none;
}
.hero-strip__label {
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin-bottom: 4px;
}
.hero-strip__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--w-semibold);
  color: var(--ink);
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 30;
  line-height: 1;
}
.hero-strip__sub {
  font-size: 11px;
  color: var(--color-neutral-500);
  margin-top: 6px;
}

/* Eyebrow / mantra footer line */
.mantra {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-neutral-500);
  padding: var(--space-8) 0 var(--space-4);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -0.005em;
}
.mantra strong {
  color: var(--brand-deep);
  font-weight: var(--w-semibold);
}

/* Day-by-day with brain narration */
.day-block {
  border-bottom: 1px solid var(--border);
  padding: var(--space-5) 0;
}
.day-block:last-child { border-bottom: none; }
.day-block__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.day-block__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--w-semibold);
  color: var(--brand-deep);
  letter-spacing: -0.02em;
}
.day-block__title {
  font-size: var(--text-md);
  font-weight: var(--w-semibold);
  color: var(--color-neutral-800);
}
.day-block__date {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
}
.day-block__desc {
  font-size: var(--text-sm);
  color: var(--color-neutral-700);
  line-height: var(--lh-loose);
}

/* Couple hero block */
.couple-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(135deg, var(--brand-tint) 0%, var(--surface) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}
.couple-hero__photo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--line-honeymoon-soft) 0%, var(--accent-soft) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--w-semibold);
  color: var(--brand-deep);
  letter-spacing: -0.01em;
}
.couple-hero__names {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--w-semibold);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.couple-hero__sub {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  margin-top: 4px;
}

/* Salesforce status pills tighter row */
.salesforce-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-3);
}