/* ==========================================================================
   RevvIT — global UI polish layer (additive & theme-aware)
   Linked AFTER each page's own styles so these refinements win without a rewrite.
   Purely visual: shadows, motion, scrollbars, focus, sheen. No layout changes.
   Accent green comes from the existing --red token (fallback #1f9d3a).
   ========================================================================== */

:root { --rv-ease: cubic-bezier(.4, 0, .2, 1); --rv-accent: var(--red, #1f9d3a); }

/* Crisper type everywhere */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Thin, themed scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(136, 140, 153, .35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(136, 140, 153, .32); border-radius: 20px;
  border: 2px solid transparent; background-clip: padding-box; transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(31, 157, 58, .55); background-clip: padding-box; }

/* Brand-tinted text selection */
::selection { background: rgba(31, 157, 58, .24); }

/* Consistent, accessible focus rings (keyboard only) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(31, 157, 58, .6); outline-offset: 2px; border-radius: 8px;
}

/* Smooth micro-interactions on the common interactive elements */
.card, .stat-card, .kpi-pill, .kpi-card, .auto-card, .dealer-header, .dept-header,
.brand-chip, .action-btn, .topbar-btn, .nav-item, .nav-link, .state-pill, .lead-table tr,
.leads-table tbody tr, button, a.btn, .assign-chip, .signal-chip, .plan-badge {
  transition: transform .16s var(--rv-ease), box-shadow .16s var(--rv-ease),
              border-color .16s var(--rv-ease), background-color .16s var(--rv-ease),
              color .16s var(--rv-ease);
}

/* Softer, layered shadows on real cards */
.card, .auto-card, .dept-header {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
}

/* Small KPI/stat tiles get a gentle hover lift — feels alive without moving layout */
.stat-card, .kpi-pill, .kpi-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
}
.stat-card:hover, .kpi-pill:hover, .kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .07), 0 16px 36px rgba(0, 0, 0, .11);
}

/* Buttons: tactile press + a subtle top sheen on primary/CTA buttons */
button:active, .action-btn:active, .topbar-btn:active, a.btn:active, .modal-save:active { transform: translateY(1px); }
.topbar-btn.primary, .action-btn.primary, .modal-save, .auto-btn, .filter-search-btn {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
  box-shadow: 0 4px 14px rgba(31, 157, 58, .26);
}
.topbar-btn.primary:hover, .action-btn.primary:hover, .modal-save:hover, .auto-btn:hover, .filter-search-btn:hover {
  box-shadow: 0 7px 22px rgba(31, 157, 58, .4);
}

/* Sidebar active item: crisp accent rail + faint tint */
.nav-item.active, .nav-link.active { box-shadow: inset 3px 0 0 var(--rv-accent); }

/* Table rows: quiet hover highlight for scannability */
.lead-table tbody tr:hover, .leads-table tbody tr:hover, .detail-table tbody tr:hover {
  background: rgba(31, 157, 58, .045);
}

/* Chips/badges sit a touch crisper */
.signal-chip, .assign-chip, .source-badge, .tier { box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }

/* Images never overflow their box (safety for logos/thumbs) */
img { max-width: 100%; }

/* --------------------------------------------------------------------------
   Fixes
   -------------------------------------------------------------------------- */

/* Primary/CTA buttons must keep WHITE text — the light-theme ".topbar-btn"
   override (color:#6b7280 !important) was bleeding into ".topbar-btn.primary",
   leaving white-on-green buttons with grey text that blended into the fill. */
[data-theme="light"] .topbar-btn.primary,
[data-theme="light"] .topbar-btn.primary:hover,
[data-theme="light"] .action-btn.primary,
[data-theme="light"] .btn.primary,
[data-theme="light"] .submit-btn,
[data-theme="light"] .modal-save,
[data-theme="light"] .auto-btn { color: #fff !important; }

/* RevvIT wordmark is a mostly-dark logo — on the dark theme it would vanish
   without the old white box, so tint it to a clean monochrome white instead
   (keeps it crisp with no 'pasted' backing). Light theme shows it as-is. */
[data-theme="dark"] .rv-logo { filter: brightness(0) invert(1); }