/* VendAssist — shared server-rendered interface */
:root {
  --va-canvas: #f6f7fb;
  --va-surface: #ffffff;
  --va-surface-muted: #f8fafc;
  --va-ink: #172033;
  --va-muted: #64748b;
  --va-line: #dbe2ea;
  --va-brand: #16803c;
  --va-brand-strong: #116b32;
  --va-brand-soft: #eaf7ee;
  --va-accent: #2563eb;
  --va-radius: 16px;
  --va-shadow: 0 8px 24px rgba(23, 32, 51, .06);
}

* { box-sizing: border-box; }
html, body { background: var(--va-canvas) !important; color: var(--va-ink) !important; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Shell */
.va-shell { background: var(--va-canvas) !important; color: var(--va-ink) !important; }
.va-sidebar { background: var(--va-surface) !important; border-color: var(--va-line) !important; box-shadow: 1px 0 0 rgba(23, 32, 51, .02); }
.va-sidebar [class*="border-zinc"], .va-sidebar [class*="border-gray"] { border-color: var(--va-line) !important; }
.va-sidebar .nav-link { color: var(--va-muted) !important; border-left: 0 !important; margin-left: 0 !important; border-radius: 10px; }
.va-sidebar .nav-link:hover { background: var(--va-brand-soft) !important; color: var(--va-brand-strong) !important; }
.va-sidebar .nav-link.active { background: var(--va-brand-soft) !important; color: var(--va-brand-strong) !important; box-shadow: inset 3px 0 0 var(--va-brand); }
.va-sidebar [class*="text-zinc-"], .va-sidebar [class*="text-gray-"] { color: var(--va-muted) !important; }
.va-sidebar .nav-link.active { color: var(--va-brand-strong) !important; }

/* Common controls and surfaces. These deliberately override legacy dark Tailwind utilities. */
.va-page [class*="bg-zinc-900"], .va-page [class*="bg-zinc-800"], .va-page [class*="bg-gray-900"], .va-page [class*="bg-gray-800"],
.va-page [class*="bg-slate-900"], .va-page [class*="bg-slate-800"] { background-color: var(--va-surface) !important; }
.va-page [class*="bg-zinc-950"], .va-page [class*="bg-gray-950"], .va-page [class*="bg-slate-950"] { background-color: var(--va-canvas) !important; }
.va-page [class*="border-zinc"], .va-page [class*="border-gray"], .va-page [class*="border-slate"] { border-color: var(--va-line) !important; }
.va-page [class*="text-zinc-50"], .va-page [class*="text-zinc-100"], .va-page [class*="text-white"],
.va-page [class*="text-gray-100"], .va-page [class*="text-gray-200"] { color: var(--va-ink) !important; }
.va-page [class*="text-zinc-"], .va-page [class*="text-gray-"], .va-page [class*="text-slate-"] { color: var(--va-muted) !important; }
.va-page [class*="text-zinc-50"], .va-page [class*="text-zinc-100"], .va-page [class*="text-white"],
.va-page [class*="text-gray-100"], .va-page [class*="text-gray-200"] { color: var(--va-ink) !important; }
.va-page h1, .va-page h2, .va-page h3, .va-page h4, .va-page th, .va-page strong { color: var(--va-ink) !important; }
.va-page input, .va-page select, .va-page textarea {
  background: var(--va-surface) !important; color: var(--va-ink) !important; border-color: var(--va-line) !important;
  border-radius: 10px !important;
}
.va-page input::placeholder, .va-page textarea::placeholder { color: #94a3b8 !important; }
.va-page input:focus, .va-page select:focus, .va-page textarea:focus { border-color: var(--va-brand) !important; box-shadow: 0 0 0 3px rgba(22, 128, 60, .12) !important; }
.va-page button:not([class*="bg-red"]):not([class*="bg-orange"]):not([class*="bg-yellow"]):not([class*="bg-blue"]),
.va-page [role="button"]:not([class*="bg-red"]):not([class*="bg-orange"]):not([class*="bg-yellow"]):not([class*="bg-blue"]) {
  border-radius: 10px;
}
.va-page [class*="hover:bg-emerald-"], .va-page [class*="hover:bg-green-"] { transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.va-page [class*="bg-emerald"][class*="text-white"], .va-page [class*="bg-green-"][class*="text-white"],
.va-page [class*="bg-blue-"][class*="text-white"], .va-page [class*="bg-red-"][class*="text-white"] { color: #fff !important; }
.va-page [class*="rounded-xl"], .va-page [class*="rounded-2xl"] { border-radius: var(--va-radius) !important; }
.va-page table { background: var(--va-surface); border: 1px solid var(--va-line); border-radius: var(--va-radius); overflow: hidden; }
.va-page thead { background: var(--va-surface-muted) !important; }
.va-page tr { border-color: var(--va-line) !important; }
.va-page .empty-state, .va-page [class*="empty"] { color: var(--va-muted); }

/* Login uses the same light, restrained identity without the application shell. */
.va-login { background: var(--va-canvas) !important; color: var(--va-ink) !important; }
.va-login form { background: var(--va-surface) !important; border: 1px solid var(--va-line); border-radius: var(--va-radius) !important; box-shadow: var(--va-shadow) !important; }
.va-login [class*="text-gray-"] { color: var(--va-muted) !important; }
.va-login input { background: var(--va-surface) !important; border-color: var(--va-line) !important; color: var(--va-ink) !important; }
.va-login button[type="submit"] { background: var(--va-brand) !important; border-radius: 10px !important; }

/* The public TV view keeps its high-distance readability while sharing the same palette. */
.va-tv, .va-tv .tv-root { background: var(--va-canvas) !important; color: var(--va-ink) !important; }
.va-tv .tv-header { background: var(--va-surface) !important; border-color: var(--va-line) !important; }
.va-tv .tv-company, .va-tv .tv-time, .va-tv .rank-name { color: var(--va-ink) !important; }
.va-tv .tv-date, .va-tv .slide-label, .va-tv .slide-period, .va-tv .rank-sub, .va-tv .split-title, .va-tv .empty-text { color: var(--va-muted) !important; }
.va-tv .rank-row { background: var(--va-surface) !important; border-color: var(--va-line) !important; border-radius: var(--va-radius) !important; box-shadow: var(--va-shadow); }
.va-tv .count-badge { background: var(--va-brand-soft) !important; color: var(--va-brand-strong) !important; }
.va-tv .split-divider, .va-tv .tv-progress { background: var(--va-line) !important; }
.va-tv .tv-progress-bar, .va-tv .tv-dot.active { background: var(--va-brand) !important; }
.va-tv .tv-dot { background: #cbd5e1 !important; }

/* ValorCerto is also server-rendered: green is its primary action, blue remains the sole accent. */
.va-simulator { background: var(--va-canvas) !important; color: var(--va-ink) !important; }
.va-simulator .vc-card, .va-simulator .vc-card-lg, .va-simulator .result-card, .va-simulator .vc-modal { border-color: var(--va-line) !important; border-radius: var(--va-radius) !important; box-shadow: var(--va-shadow) !important; }
.va-simulator .vc-input, .va-simulator .vc-input-plain { border-color: var(--va-line) !important; border-radius: 10px !important; }
.va-simulator .vc-input:focus, .va-simulator .vc-input-plain:focus { border-color: var(--va-brand) !important; box-shadow: 0 0 0 3px rgba(22, 128, 60, .12) !important; }
.va-simulator .vc-btn-primary { background: var(--va-brand) !important; border-radius: 10px !important; }
.va-simulator .vc-btn-primary:hover { background: var(--va-brand-strong) !important; }
.va-simulator .vc-tab.active, .va-simulator .highlight-row { background: var(--va-brand-soft) !important; color: var(--va-brand-strong) !important; border-color: #b7e3c4 !important; }
.va-simulator .vc-tab.active, .va-simulator .highlight-row .detail-label, .va-simulator .highlight-row .detail-value { color: var(--va-brand-strong) !important; }
.va-simulator .vc-slider::-webkit-slider-thumb, .va-simulator .vc-slider::-moz-range-thumb { background: var(--va-brand) !important; }

@media (max-width: 767px) {
  .va-page { padding-bottom: 5rem; }
  .va-page.va-board-page { padding-bottom: 0; }
  .va-page.va-tight-bottom-page { padding-bottom: 0; }
  .va-sidebar { box-shadow: 0 -4px 18px rgba(23, 32, 51, .08); }
}

/* Responsive foundation for the server-rendered screens.  Keep horizontal
   scrolling inside data-heavy components instead of allowing the viewport to
   grow beyond the device. */
html { min-width: 0; }
body.va-page { min-width: 0; max-width: 100%; }
.va-page, .va-page main, .va-page main > *, .va-page [class*="flex-1"] { min-width: 0; }
.va-page main { width: 100%; }
.va-page img, .va-page svg { max-width: 100%; }
.va-page input, .va-page select, .va-page textarea { max-width: 100%; min-width: 0; }
.va-page p, .va-page span, .va-page td, .va-page th, .va-page button, .va-page a {
  overflow-wrap: anywhere;
}
.va-page .truncate { overflow-wrap: normal; }
.va-page table { max-width: 100%; }
.va-page [class*="overflow-x-auto"] { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* Dialogs must remain usable with the mobile keyboard and long forms. */
.va-page [class*="fixed"][class*="inset-0"] { overscroll-behavior: contain; }
.va-page [class*="fixed"][class*="inset-0"] > [class*="max-w-"] {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

@media (max-width: 767px) {
  .va-shell { min-height: 100dvh; height: 100dvh !important; }
  .va-page > main { padding: 1rem !important; padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important; }
  .va-page > main.flex { padding: 0 !important; padding-bottom: calc(5rem + env(safe-area-inset-bottom)) !important; }
  /* The board columns scroll internally; reserving the bottom-nav height on
     the main element creates a visible blank band below the last cards. */
  .va-page > main.va-board-main { padding-bottom: 0 !important; }
  .va-page > main.va-tight-bottom-main { padding-bottom: 0 !important; }
  .va-page .va-sidebar + main { min-width: 0; }

  /* Bottom navigation remains a single safe, scrollable row for every role. */
  .va-sidebar ~ nav.va-bottom-nav {
    min-height: calc(4rem + env(safe-area-inset-bottom));
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)) !important;
    justify-content: flex-start !important;
    gap: .15rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .va-sidebar ~ nav.va-bottom-nav::-webkit-scrollbar { display: none; }
  .va-sidebar ~ nav.va-bottom-nav > a { flex: 0 0 auto; min-width: 3.75rem; padding: .3rem .45rem !important; }

  .va-page .h-14 { height: auto; min-height: 3.5rem; }
  .va-page .px-6 { padding-left: 1rem; padding-right: 1rem; }
  .va-page .p-6, .va-page .p-8 { padding: 1rem; }
  .va-page .grid.grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
  .va-page .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .va-page .grid.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }

  .va-page table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; border-radius: 12px; }
  .va-page th, .va-page td { padding-left: .75rem !important; padding-right: .75rem !important; }
  .va-page .flex.items-center.justify-between { gap: .75rem; }
  .va-page .flex.items-center.justify-between > .flex { min-width: 0; flex-wrap: wrap; }
  .va-page [class*="w-44"], .va-page [class*="w-52"], .va-page [class*="w-64"] { width: 100% !important; }

  /* Dense board and calendar screens retain intentional, contained scrolling. */
  .va-page .kanban-col { min-height: 140px; }
  .va-mobile-board {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    background: var(--va-canvas);
    overscroll-behavior-x: contain;
  }
  .va-mobile-board .va-board-track { width: max-content; min-width: max-content !important; }
  .va-mobile-board .va-board-column { width: min(18rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); }
  .va-mobile-board .lead-card, .va-mobile-board .va-kanban-column { min-width: 0; }
  .va-filter-bar { flex-wrap: wrap; gap: .5rem !important; padding: .65rem 1rem !important; }
  .va-filter-bar > div { flex: 0 1 auto; min-width: 0; }
  .va-filter-bar span { white-space: nowrap; }

  /* On phones, conversations show list or chat; the AI panel is deliberately
     hidden until the desktop breakpoint so it cannot squeeze the message view. */
  body[x-data="conversations()"] > div.flex-1 { min-width: 0; }
  body[x-data="conversations()"] > .va-conversation-pane {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: var(--va-canvas);
    padding-bottom: calc(5rem + env(safe-area-inset-bottom)) !important;
  }
  body.va-tight-bottom-page[x-data="conversations()"] > .va-conversation-pane {
    padding-bottom: 0 !important;
  }
  body[x-data="conversations()"] .lead-item,
  body[x-data="conversations()"] #msgArea,
  body[x-data="conversations()"] .lead-item > div { min-width: 0; max-width: 100%; }
  body[x-data="conversations()"] .lead-item span,
  body[x-data="conversations()"] #msgArea p { overflow-wrap: anywhere; }
  body[x-data="conversations()"] .max-w-xs { max-width: min(80vw, 28rem); }

  /* Header controls should wrap below titles instead of forcing the page wide. */
  .va-toolbar { align-items: flex-start !important; flex-wrap: wrap; }
  .va-toolbar > .flex:last-child { width: 100%; }
  .va-toolbar select, .va-toolbar .relative { flex: 1 1 9rem; min-width: 0; }
  .va-page button, .va-page .nav-link { min-height: 2.75rem; }
  .va-page .flex.gap-3:has(> input.flex-1) { flex-wrap: wrap; }
  .va-page .flex.gap-3:has(> input.flex-1) > input { flex-basis: 100%; }

  /* Simulator: its inline layout is intentionally desktop-oriented. */
  .va-simulator header > div { padding-left: 1rem !important; padding-right: 1rem !important; gap: .75rem !important; }
  .va-simulator header img { height: 34px !important; transform: none !important; }
  .va-simulator .vc-tab { padding: .5rem .65rem; font-size: .78rem; }
  .va-simulator .vc-modal { max-height: calc(100dvh - 2rem) !important; overflow-y: auto; }
  .va-simulator .proposal-row { align-items: flex-start; flex-direction: column; }
  .va-simulator .proposal-row > div:last-child { width: 100%; justify-content: space-between; }
  .va-simulator .detail-row { align-items: flex-start; gap: .5rem; }
  .va-simulator .detail-value { text-align: right; overflow-wrap: anywhere; }

  /* The TV dashboard also remains legible when opened from a phone/tablet. */
  .va-tv .tv-header { padding: .7rem 1rem; }
  .va-tv .tv-company { font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
  .va-tv .tv-time { font-size: 1.2rem; }
  .va-tv .tv-slide { padding: 1rem; }
  .va-tv .rank-row { gap: .6rem; padding: .65rem .75rem; }
  .va-tv .rank-name { min-width: 0; overflow-wrap: anywhere; }
  .va-tv .rank-value { font-size: .9rem; white-space: nowrap; }
  .va-tv .split-body { gap: .75rem; }
  .va-tv .split-divider { display: none; }
  .va-tv .split-col { min-width: 0; }
  .va-tv .slide-period { font-size: .67rem; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .va-page > main { min-width: 0; }
  .va-page .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .va-page .grid.lg\\:grid-cols-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .va-page .grid.lg\\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .va-page .px-6 { padding-left: 1.25rem; padding-right: 1.25rem; }
}