/* ═══════════════════════════════════════════════════════
   PROPi.IN — Apple-white 2026 skin
   Token override file. Loaded LAST after design.css,
   components.css, dashboard_theme.css, home.css.
   Same approach as myipl-apple-2026.css / TRC public unify.
   ═══════════════════════════════════════════════════════ */

/* ── 1. Tokens: identical at :root and html.light-theme so the
       old dark/light toggle can never bring dark back ── */
:root,
html.light-theme {
  /* Public design tokens (design.css) */
  --propi-primary: #0071e3;
  --propi-primary-light: #147ce5;
  --propi-primary-dark: #0051a2;
  --propi-primary-50: #f0f7ff;
  --propi-accent: #0071e3;
  --propi-accent-light: #64a8f0;
  --propi-success: #248a3d;
  --propi-success-dark: #1e7e34;
  --propi-warning: #b25000;
  --propi-dark: #1d1d1f;
  --propi-gray-900: #1d1d1f;
  --propi-gray-800: #1d1d1f;
  --propi-gray-700: #424245;
  --propi-gray-600: #6e6e73;
  --propi-gray-500: #86868b;
  --propi-gray-400: #d2d2d7;
  --propi-gray-300: #e8e8ed;
  --propi-gray-200: #f5f5f7;
  --propi-gray-100: #ffffff;
  --propi-white: #1d1d1f; /* matches existing light-theme inversion (used as text) */

  --gradient-primary: linear-gradient(135deg, #0071e3, #147ce5);
  --gradient-hero: #ffffff;
  --gradient-card: #ffffff;
  --gradient-success: linear-gradient(135deg, #248a3d, #34c759);
  --gradient-accent: linear-gradient(135deg, #0071e3, #147ce5);
  --shadow-glow: 0 0 0 4px rgba(0, 113, 227, 0.12);

  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Dashboard tokens (dashboard_theme.css) — light always */
  --bg-body: #f5f5f7;
  --bg-card: #ffffff;
  --bg-card-hover: rgba(0, 113, 227, 0.04);
  --bg-surface: #ffffff;
  --bg-topbar: rgba(255, 255, 255, 0.92);
  --bg-sidebar: #ffffff;
  --bg-input: #ffffff;
  --bg-table-head: #f5f5f7;
  --bg-ac: #ffffff;
  --border: #e8e8ed;
  --border-input: #d2d2d7;
  --border-focus: rgba(0, 113, 227, 0.5);
  --text-primary: #1d1d1f;
  --text-secondary: #424245;
  --text-muted: #6e6e73;
  --text-dim: #86868b;
  --text-on-surface: #424245;
  --text-white: #1d1d1f;
  --accent: #0071e3;
  --accent-light: #0071e3;
  --accent-bg: rgba(0, 113, 227, 0.10);
  --green: #248a3d;
  --green-bg: rgba(52, 199, 89, 0.12);
  --red: #d70015;
  --blue-bg: rgba(0, 113, 227, 0.08);
  --blue: #0071e3;
  --shadow: rgba(0, 0, 0, 0.06);
  --select-arrow: %236e6e73;
  --option-bg: #ffffff;
}

/* ── 2. Base ── */
html { background: #ffffff; }
body {
  background: var(--bg-body) !important;
  color: #1d1d1f !important;
  font-family: var(--font-sans) !important;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  color: #1d1d1f;
  letter-spacing: -0.015em;
  font-weight: 700;
}
a { color: #0071e3; }
a:hover { color: #0051a2; }

/* ── 3. Public navbar: frosted white ── */
.navbar {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid #e8e8ed !important;
  box-shadow: none !important;
}
.navbar.scrolled { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 1px 8px rgba(0,0,0,.06) !important; }
.navbar__links a, .navbar__links span { color: #1d1d1f !important; }
.navbar__links a:hover { color: #0071e3 !important; }
.navbar__brand-text { color: #1d1d1f !important; }
.navbar__brand-text span { color: #f43f5e !important; }
.navbar__brand-icon {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
.navbar__hamburger span { background: #1d1d1f !important; }

/* Mobile slide-down menu: white sheet */
.mobile-menu, .mobile-menu__inner {
  background: #ffffff !important;
  color: #1d1d1f !important;
}
.mobile-menu__link { color: #1d1d1f !important; border-color: #e8e8ed !important; }
.mobile-menu hr { border-top-color: #e8e8ed !important; }

/* Old dark/light toggle: gone (site is always light now) */
.theme-toggle, #publicThemeToggle, #themeToggle { display: none !important; }

/* ── 4. Buttons: Apple pills ── */
.btn { border-radius: 980px !important; font-family: var(--font-sans) !important; font-weight: 500 !important; }
.btn--primary, .btn-primary {
  background: #0071e3 !important;
  border-color: #0071e3 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.btn--primary:hover, .btn-primary:hover { background: #0077ed !important; }
.btn--secondary, .btn--ghost, .btn-outline {
  background: #ffffff !important;
  border: 1px solid #d2d2d7 !important;
  color: #1d1d1f !important;
}
.btn--secondary:hover, .btn--ghost:hover, .btn-outline:hover { border-color: #86868b !important; color: #1d1d1f !important; }

/* ── 5. Cards / sections (public components) ── */
.section { background: transparent; }
.features-section { background: #f5f5f7 !important; }
.step-card, .feature-card, .location-card, .card, .stat {
  background: #ffffff !important;
  border: 1px solid #e8e8ed !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  color: #1d1d1f;
}
.step-card:hover, .feature-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06) !important; transform: none; }
.step-card h4, .feature-card h5, .card-title { color: #1d1d1f !important; }
.feature-card__icon, .step-card__icon {
  background: #f0f7ff !important;
  color: #0071e3 !important;
  border-radius: 14px !important;
}
.location-card__header { border-radius: 18px 18px 0 0 !important; }
.location-tag {
  background: #f5f5f7 !important;
  border: 1px solid #e8e8ed !important;
  color: #424245 !important;
  border-radius: 980px !important;
}
.location-tag:hover { border-color: #0071e3 !important; color: #0071e3 !important; }
.badge { border-radius: 980px !important; }
.badge--primary { background: rgba(0,113,227,.08) !important; color: #0071e3 !important; }
.badge--accent { background: rgba(0,113,227,.08) !important; color: #0071e3 !important; }
.badge--success { background: rgba(52,199,89,.12) !important; color: #248a3d !important; }
.text-muted { color: #6e6e73 !important; }

/* CTA band: light, not dark gradient */
.cta-section {
  background: #f5f5f7 !important;
}
.cta-section::before { display: none !important; }
.cta-section h2 { color: #1d1d1f !important; }
.cta-section p { color: #6e6e73 !important; }
.cta-section .btn--primary { background: #0071e3 !important; color: #fff !important; }
.cta-section .btn--ghost { background: #fff !important; color: #1d1d1f !important; border: 1px solid #d2d2d7 !important; }

/* ── 6. Footer: light ── */
.footer {
  background: #f5f5f7 !important;
  border-top: 1px solid #e8e8ed !important;
  color: #6e6e73 !important;
}
.footer__brand-text { color: #1d1d1f !important; }
.footer__brand-text span { color: #f43f5e !important; }
.footer__heading { color: #1d1d1f !important; }
.footer__desc, .footer__bottom, .footer__bottom span { color: #6e6e73 !important; }
.footer__links a { color: #424245 !important; }
.footer__links a:hover { color: #0071e3 !important; }
.footer__bottom { border-top: 1px solid #e8e8ed !important; }

/* ── 7. Forms ── */
input, select, textarea, .form-control {
  font-family: var(--font-sans) !important;
}
.form-control, .search-bar input {
  background: #ffffff !important;
  border: 1px solid #d2d2d7 !important;
  color: #1d1d1f !important;
  border-radius: 12px !important;
}
.form-control:focus, .search-bar input:focus {
  border-color: #0071e3 !important;
  box-shadow: 0 0 0 4px rgba(0,113,227,.12) !important;
}
.form-label { color: #424245 !important; }

/* Flash messages */
.flash { background: #ffffff !important; border: 1px solid #e8e8ed !important; color: #1d1d1f !important; border-radius: 12px !important; }
.flash--success { border-color: rgba(52,199,89,.4) !important; }
.flash--error { border-color: rgba(215,0,21,.35) !important; }

/* ── 8. Dashboard chrome (logged-in CRM) ── */
.dk-sidebar, .sidebar { background: #ffffff !important; border-right: 1px solid #e8e8ed !important; }
.dk-brand-text, .dk-user-name { color: #1d1d1f !important; }
.topbar { background: rgba(255,255,255,.92) !important; border-bottom: 1px solid #e8e8ed !important; }
.topbar-page { color: #424245 !important; }
.tabbar, .bottom-nav { background: rgba(255,255,255,.96) !important; border-top: 1px solid #e8e8ed !important; }

/* ── 9. Mobile friendliness safety net ── */
html, body { overflow-x: hidden; max-width: 100vw; }
img, video { max-width: 100%; height: auto; }
button, .btn, a.btn { min-height: 40px; }
@media (max-width: 600px) {
  body { font-size: 15px; }
  h1 { font-size: clamp(26px, 8vw, 34px) !important; }
  h2 { font-size: clamp(21px, 6vw, 26px) !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  input, select, textarea { font-size: 16px !important; } /* prevents iOS focus zoom */
}

/* === Navbar discipline 2026-07-06 (single-line, no mid-text wrap, clean collapse) === */
.navbar { gap: 16px; }
.navbar__brand { flex: 0 0 auto; }
.navbar__actions { flex: 0 0 auto; }
.navbar__links { flex-wrap: nowrap !important; gap: 2px !important; min-width: 0; }
.navbar__links a {
  white-space: nowrap !important;
  padding: 8px 10px !important;
  font-size: 0.86rem !important;
  letter-spacing: -0.01em;
}
/* Below 1400px there isn't room for the full row — use the hamburger menu (keeps CTAs visible) */
@media (max-width: 1400px) {
  .navbar__links { display: none !important; }
  .navbar__hamburger { display: flex !important; }
}