/* ==========================================================================
   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 #157a5c).
   ========================================================================== */

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

/* 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(21,122,92, .55); background-clip: padding-box; }

/* Brand-tinted text selection */
::selection { background: rgba(21,122,92, .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(21,122,92, .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(21,122,92, .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(21,122,92, .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(21,122,92, .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. */
/* polish.css loads AFTER a template's own <style>, so any page that forgets to
   define .submit-btn got only the white-text rule below and rendered as white
   on native grey. :where() keeps this at zero specificity, so a template that
   DOES define the button still wins. */
:where(.submit-btn) { background: var(--red, #12735a); color: #fff; border: none;
  border-radius: 9px; padding: 13px 28px; cursor: pointer; }
:where(.submit-btn:disabled) { background: var(--border, #d1d5db); color: var(--muted, #6b7280); cursor: not-allowed; }

[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); }

/* ==========================================================================
   RevvIT — SIMPLE UI LAYER  (added Aug 2026, from dealership usability feedback)
   --------------------------------------------------------------------------
   WHY: the showroom staff using this are not tech-savvy. The UI was built at
   power-user density: most controls measured 21-29px tall with 10-12px text.
   WCAG 2.2 AA requires a 24px minimum target; Apple HIG / Material / WCAG AAA
   recommend 44px. The lead-status dropdown (~21px) failed even the AA minimum.

   WHAT: a floor, not a redesign. Every interactive control gets >=44px height
   and >=14px text; informational micro-text gets a readable floor. Nothing is
   repositioned and no colour semantics change here, so layouts stay intact.

   HOW IT WINS: this file is linked AFTER each page's own <style>, so equal
   specificity means these rules apply without touching 46 templates. Rules use
   min-height (never height) so nothing clips, and padding is left alone where
   growing it would break a dense table.
   ========================================================================== */

/* --- 1. Touch targets: every button-ish control gets a 44px floor ---------- */
.topbar-btn, .action-btn, .btn-sm, .submit-btn, .modal-save, .modal-cancel,
.auto-btn, .auto-mini, .cp-btn, .rv-btn, .remove-btn, .req-btn, .copy-btn,
.section-action, .logout-btn, .theme-toggle, .filter-search-btn, .invite-again {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1.2;
}

/* Text on those controls must be readable, not 11px */
.topbar-btn, .action-btn, .btn-sm, .auto-btn, .auto-mini, .cp-btn, .rv-btn,
.remove-btn, .req-btn, .copy-btn, .section-action, .logout-btn, .invite-again {
  font-size: 14px;
}
.submit-btn, .modal-save, .modal-cancel { font-size: 15px; }

/* A little more horizontal room so the bigger text isn't cramped */
.topbar-btn, .btn-sm, .auto-mini, .remove-btn, .req-btn, .section-action { padding-left: 16px; padding-right: 16px; }
.submit-btn, .modal-save { padding-left: 26px; padding-right: 26px; }

/* The primary action must LOOK like the primary action, from across the room */
.topbar-btn.primary, .action-btn.primary, .submit-btn, .modal-save, .auto-btn, .cp-btn:not(.ghost) {
  font-weight: 700; letter-spacing: .1px;
}

/* --- 2. Form controls: same 44px floor, readable text --------------------- */
.form-input, .form-select, .field-input, .cp-input, .rv-input, .policy-select,
.state-select, .filter-select, .filter-input, .rv-select,
input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="date"], input[type="time"], input[type="datetime-local"], select {
  min-height: 44px;
  font-size: 15px;
}
textarea, .cp-textarea, .form-input[rows] { font-size: 15px; line-height: 1.5; }

/* Checkboxes are ~13px by default — far too small to hit reliably */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--rv-accent); }

/* --- 3. The lead-status pill: the most-touched control in the product ------
   Was 11px text / 4px padding (~23px tall) with a 9px caret. */
.state-pill { min-height: 44px; font-size: 14px; padding: 8px 14px; }
.state-arrow { font-size: 13px; }
.state-opt   { min-height: 44px; font-size: 15px; }

/* --- 4. Sidebar navigation ------------------------------------------------ */
.nav-item { min-height: 48px; font-size: 15px; margin-bottom: 4px; }
.nav-section { font-size: 11px; }

/* --- 5. Filter / view tabs ------------------------------------------------ */
.ftab, .utab, .tier-tab { min-height: 40px; font-size: 14px; display: inline-flex; align-items: center; }

/* --- 6. Legibility floor for informational micro-text ---------------------
   318 instances of <=11.5px text existed. Badges also lose ALL-CAPS, which is
   measurably slower to read for low-literacy users than sentence case. */
.role-badge, .status-badge, .case-badge, .req-status, .pill, .source-badge, .tier {
  font-size: 12.5px; text-transform: none; letter-spacing: 0; padding: 4px 10px;
}
.data-table th, .lead-table th, .leads-table th, .cp-table th, .review-table th, table.rv th {
  font-size: 12.5px; text-transform: none; letter-spacing: .2px;
}
.kpi-label, .kpi-pill-lbl, .stat-label, .form-label, .field-label, .cred-label {
  font-size: 12px; letter-spacing: .3px;
}
.muted, .lead-meta, .staff-email, .kpi-sub, .section-sub, .page-sub, .bh-sub, .cp-sub {
  font-size: 13px;
}

/* --- 7. Make the keyboard/hover affordance unmistakable ------------------- */
.topbar-btn:hover, .btn-sm:hover, .submit-btn:hover, .modal-save:hover,
.section-action:hover, .cp-btn:hover, .rv-btn:hover { filter: brightness(1.06); }

/* --- 8. A real ERROR colour ----------------------------------------------
   The brand token --red is actually GREEN (#157a5c), so every error message
   styled with it rendered green and read as success. Errors now read red in
   both themes without touching the brand token. */
:root { --rv-err: #dc2626; --rv-err-bg: rgba(220,38,38,.09); --rv-err-bd: rgba(220,38,38,.32); }
[data-theme="dark"] { --rv-err: #fca5a5; }
.error-banner, .alert-error, .field-error, .form-error {
  background: var(--rv-err-bg) !important;
  border: 1px solid var(--rv-err-bd) !important;
  color: var(--rv-err) !important;
  font-size: 14px;
}

/* --- 9. The one big primary action on a role's landing page ---------------
   Sales/branch/CRM landing pages opened onto stats and staff rosters with no
   obvious way to start work — the only route to leads was an 11.5px text link.
   This is one unmistakable button, placed above the fold on every such page. */
.big-cta {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin: 0 0 22px; padding: 20px 24px;
  background: var(--red, #157a5c); color: #fff !important;
  border: none; border-radius: 14px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(21,122,92,.3);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.big-cta:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(21,122,92,.42); }
.big-cta-icon  { font-size: 26px; line-height: 1; flex-shrink: 0; }
.big-cta-main  { font-size: 20px; font-weight: 800; letter-spacing: -.2px; }
.big-cta-sub   { font-size: 14px; opacity: .92; margin-top: 3px; }
.big-cta-go    { margin-left: auto; font-size: 26px; font-weight: 700; flex-shrink: 0; }
@media (max-width: 600px) { .big-cta-main { font-size: 17px; } .big-cta-sub { font-size: 13px; } }

/* --- 10. The merged "Save after call" button on a lead ---------------------
   This is the single most important action a salesperson takes. It is now full
   width and sticky-adjacent so it can never be mistaken for a secondary control. */
.save-all-btn {
  width: 100%; min-height: 56px !important; font-size: 17px !important; font-weight: 800 !important;
  margin-top: 6px; border-radius: 12px; letter-spacing: .2px;
}

/* --- 11. Walk-in capture form uses its own class names -------------------- */
.btn-submit, .btn-cancel {
  min-height: 52px; font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 28px;
}
.field-input, .field-select, .wi-input, .wi-select { min-height: 44px; font-size: 15px; }