/* ==========================================================================
   DEALCENTRAL — "Survey" visual identity
   --------------------------------------------------------------------------
   Loaded AFTER assets/css/index.css. It repaints the entire product by
   redefining the design tokens that index.css already consumes, so no markup
   and no JavaScript has to change.

   Direction: the language of land surveying and title documents — precise,
   gridded, ink-on-paper. Deep forest green rather than the navy blue every
   competitor uses, with a single high-visibility orange for action.

   Sections
     1. Fonts
     2. Tokens
     3. Base + typography
     4. Buttons
     5. Header / navigation
     6. Cards, panels, surfaces
     7. Data: tables, figures, badges
     8. Forms
     9. Marketing pages (their own class contract)
    10. Footer
    11. Accessibility + motion
   ========================================================================== */

/* 1. FONTS ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* 2. TOKENS ================================================================
   Overriding this block is what repaints the product. Every value below is
   consumed by rules already present in index.css.
   ========================================================================== */
:root {
  /* --- Brand ---------------------------------------------------------- */
  --dc-ink:            #0B1120 !important;   /* deepest green-black — headings, ink */
  --dc-forest:         #111827 !important;   /* primary brand */
  --dc-forest-deep:    #111827 !important;
  --dc-verdant:        #374151 !important;   /* interactive green */
  --dc-verdant-soft:   #E6F0EA !important;
  --dc-signal:         #E4622E !important;   /* surveyor orange — the ONE accent */
  --dc-signal-deep:    #C44E1F !important;
  --dc-signal-soft:    #FCEDE6 !important;

  /* --- Neutrals: biased green, so they read as chosen ----------------- */
  --dc-stone:          #F1F4F1 !important;   /* page ground */
  --dc-stone-2:        #E7ECE7 !important;
  --dc-paper:          #FFFFFF !important;   /* surfaces */
  --dc-rule:           #D9E0DA !important;   /* hairlines */
  --dc-rule-strong:    #BEC9C0 !important;
  --dc-text:           #24312B !important;
  --dc-text-soft:      #55635B !important;
  --dc-text-mute:      #7C8A82 !important;

  /* --- Semantic (separate from the accent) ---------------------------- */
  --dc-ok:             #10B981 !important;
  --dc-warn:           #B4791A !important;
  --dc-danger:         #B3372C !important;
  --dc-info:           #1F6890 !important;

  /* ===== Remap the existing contract ================================== */
  --color-primary:          var(--dc-forest) !important;
  --color-primary-hover:    var(--dc-forest-deep) !important;
  --color-secondary:        var(--dc-paper) !important;
  --color-secondary-hover:  var(--dc-stone) !important;
  --color-accent:           var(--dc-signal) !important;
  --color-accent-hover:     var(--dc-signal-deep) !important;
  --color-cyber-cyan:       var(--dc-verdant) !important;

  --color-background-dark:  var(--dc-ink) !important;
  --color-background-light: var(--dc-stone) !important;
  --color-surface:          var(--dc-paper) !important;

  --color-text-primary:     var(--dc-text) !important;
  --color-text-secondary:   var(--dc-text-soft) !important;
  --color-text-on-dark:     #F4F8F5 !important;

  --color-border:           var(--dc-rule) !important;
  --color-success:          var(--dc-ok) !important;
  --color-warning:          var(--dc-warn) !important;
  --color-error:            var(--dc-danger) !important;

  /* Status badges — distinguishable without relying on hue alone */
  --badge-new-leads:        var(--dc-info) !important;
  --badge-acquisitions:     var(--dc-verdant) !important;
  --badge-dispositions:     #6B4E9E !important;
  --badge-offers:           var(--dc-warn) !important;
  --badge-under-contract:   var(--dc-signal) !important;
  --badge-closed:           var(--dc-ok) !important;
  --badge-alerts:           var(--dc-danger) !important;

  --bg-main:                var(--dc-stone) !important;
  --bg-surface:             var(--dc-paper) !important;
  --bg-surface-hover:       var(--dc-stone) !important;
  --border-color:           var(--dc-rule) !important;
  --border-color-glow:      rgba(30, 122, 85, .32) !important;

  --primary:                var(--dc-paper) !important;
  --primary-hover:          var(--dc-stone) !important;
  --primary-gradient:       linear-gradient(135deg, var(--dc-forest) 0%, var(--dc-forest-deep) 100%) !important;
  --accent:                 var(--dc-signal) !important;
  --accent-hover:           var(--dc-signal-deep) !important;
  --accent-blue:            var(--dc-verdant) !important;
  --accent-blue-gradient:   linear-gradient(135deg, var(--dc-verdant) 0%, var(--dc-forest) 100%) !important;
  --gradient-3d-cyan:       linear-gradient(135deg, var(--dc-verdant) 0%, var(--dc-forest) 100%) !important;
  --gradient-3d-emerald:    linear-gradient(135deg, var(--dc-ok) 0%, var(--dc-forest-deep) 100%) !important;

  --color-performing:       var(--dc-ok) !important;
  --color-non-performing:   var(--dc-warn) !important;
  --color-danger:           var(--dc-danger) !important;
  --color-info:             var(--dc-info) !important;

  --text-main:              var(--dc-text) !important;
  --text-secondary:         var(--dc-text-soft) !important;
  --text-muted:             var(--dc-text-mute) !important;

  /* --- Type ----------------------------------------------------------- */
  --font-header: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  --font-body:   'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  --font-mono:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace !important;

  /* --- Geometry: squared off, closer to a document than a bubble ------ */
  --radius-sm:   3px !important;
  --radius-md:   4px !important;
  --radius-lg:   6px !important;
  --radius-full: 999px !important;

  /* --- Depth: shallow and honest, no glow ----------------------------- */
  --glass-shadow:            0 1px 2px rgba(14, 33, 25, .06) !important;
  --shadow-3d-card:          0 1px 2px rgba(14, 33, 25, .06), 0 1px 1px rgba(14, 33, 25, .04) !important;
  --shadow-3d-card-hover:    0 4px 14px rgba(14, 33, 25, .10) !important;
  --glow-shadow-emerald:     0 0 0 3px rgba(30, 122, 85, .18) !important;
  --glow-shadow-blue:        0 0 0 3px rgba(31, 104, 144, .18) !important;
  --glow-shadow-cyan:        0 0 0 3px rgba(30, 122, 85, .18) !important;

  --transition-fast:   .12s ease !important;
  --transition-normal: .2s ease !important;
  --transition-slow:   .32s ease !important;

  /* Glassmorphism tokens from the abandoned dark theme in index.css. They are
     declared !important there (rgba(30,41,59,.7)), which painted modals dark
     while their labels stayed dark — the sign-in dialog became unreadable.
     Overridden here so dialogs are opaque and legible. */
  --glass-bg:     var(--dc-paper) !important;
  --glass-border: var(--dc-rule) !important;
}

/* 2b. DIALOGS =============================================================
   The sign-in modal is the first thing a new customer interacts with; it must
   never inherit a half-finished theme. Pinned explicitly rather than left to
   token resolution.
   ========================================================================= */
.modal, .modal-box, .modal-content, .modal-card,
#login-modal .modal-content, #login-modal > div,
.auth-modal, .dc-modal {
  background: var(--dc-paper) !important;
  color: var(--dc-text) !important;
  border: 1px solid var(--dc-rule) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 18px 48px rgba(14, 33, 25, .22) !important;
  backdrop-filter: none !important;
}

.modal label, .modal-content label, #login-modal label,
.modal h1, .modal h2, .modal h3, #login-modal h2, #login-modal h3 {
  color: var(--dc-ink) !important;
}
.modal p, .modal-content p, #login-modal p, .modal small {
  color: var(--dc-text-soft) !important;
}

.modal input, .modal select, .modal textarea,
#login-modal input, #login-modal select {
  background: var(--dc-paper) !important;
  color: var(--dc-text) !important;
  border: 1px solid var(--dc-rule-strong) !important;
}
.modal input::placeholder, #login-modal input::placeholder {
  color: var(--dc-text-mute) !important;
}

/* The active auth tab was rendering as a stock blue that belongs to no palette
   on this site. */
.auth-tab.active, .modal .tab.active,
#auth-tab-login.active, #auth-tab-register.active {
  background: var(--dc-forest) !important;
  color: #FFFFFF !important;
}
.auth-tab, .modal .tab {
  background: transparent !important;
  color: var(--dc-text-soft) !important;
}

/* Dim the page behind the dialog rather than tinting the dialog itself. */
.modal-overlay, .overlay, .modal-backdrop {
  background: rgba(14, 33, 25, .55) !important;
  backdrop-filter: blur(2px) !important;
}

/* 3. BASE + TYPOGRAPHY ===================================================== */
body {
  background: var(--dc-stone);
  color: var(--dc-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings take the FACE here but not the colour.
   Setting `color` on a bare h1-h6 selector overrides inheritance, so a heading
   inside a dark section that sets `color:#fff` on its container is dragged back
   to dark ink and disappears — dark text on a dark ground. That is what made
   ".favorites-hero" ("Saved deals") read as an empty green band, and it would
   do the same in the footer and every other inverted block.
   Colour is set once on `body` below and inherited, so dark sections keep
   working simply by setting their own colour. */
h1, h2, h3, h4, h5, h6,
.brand strong, .brand-main {
  font-family: var(--font-header);
  color: inherit;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* Headings on the normal light ground still want the darker ink, so apply it
   by context rather than to the element type. */
body, main, article, section, .container, .card, .panel {
  --dc-heading-color: var(--dc-ink);
}
.main-content h1, .main-content h2, .main-content h3,
.card h1, .card h2, .card h3, .card h4,
.admin-card h2, .admin-card h3 {
  color: var(--dc-heading-color, var(--dc-ink));
}

/* Anything that deliberately inverts keeps its own colour, including headings. */
.favorites-hero, .favorites-hero *,
.sold-hero, .sold-hero *,
.split-hero-content, .split-hero-content *,
.header, .header *,
.footer, .footer *,
.site-footer, .site-footer *,
[class*="-hero"] h1, [class*="-hero"] h2, [class*="-hero"] h3 {
  --dc-heading-color: inherit;
}

h1 { font-weight: 800; line-height: 1.06; }
h2 { font-weight: 700; line-height: 1.14; }
h3, h4 { font-weight: 600; line-height: 1.24; }

/* Eyebrows and small caps labels earn their letter-spacing */
.eyebrow, .section-label, .kicker, .badge-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dc-text-mute);
}

a { color: var(--dc-verdant); }
a:hover { color: var(--dc-forest); }

::selection { background: var(--dc-signal-soft); color: var(--dc-ink); }

/* 4. BUTTONS ==============================================================
   Squared, confident, no gradient wash. One accent does the shouting.
   ========================================================================= */
.btn,
button.btn,
.nav-cta,
.pricing-cta {
  font-family: var(--font-body);
  font-weight: 650;
  letter-spacing: .005em;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn-primary,
.btn.btn-primary {
  background: var(--dc-forest);
  border: 1px solid var(--dc-forest);
  color: #FFFFFF;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--dc-forest-deep);
  border-color: var(--dc-forest-deep);
  transform: none;
}

/* The single loud control on any given screen */
.btn-accent,
.btn.btn-accent {
  background: var(--dc-signal);
  border: 1px solid var(--dc-signal);
  color: #FFFFFF;
}
.btn-accent:hover,
.btn.btn-accent:hover {
  background: var(--dc-signal-deep);
  border-color: var(--dc-signal-deep);
}

.btn-secondary,
.btn.btn-secondary,
.btn-outline {
  background: transparent;
  border: 1px solid var(--dc-rule-strong);
  color: var(--dc-ink);
}
.btn-secondary:hover,
.btn.btn-secondary:hover,
.btn-outline:hover {
  background: var(--dc-stone-2);
  border-color: var(--dc-ink);
}

.btn:disabled, .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* 5. HEADER / NAVIGATION ================================================== */
.header, #main-header {
  background: var(--dc-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  box-shadow: none;
}

.brand-tagline {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244, 248, 245, .58);
}

.nav-link {
  font-weight: 550;
  font-size: .92rem;
  color: rgba(244, 248, 245, .82);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-link:hover { color: #FFFFFF; background: rgba(255, 255, 255, .07); }
.nav-link.active { color: #FFFFFF; }

/* Active tab marked with a rule, not a pill */
.nav-link.active::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 5px;
  background: var(--dc-signal);
  border-radius: 1px;
}

.nav-dropdown-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--dc-rule);
  box-shadow: 0 12px 28px rgba(14, 33, 25, .14);
  padding: 6px 0;
}
.nav-dropdown-item {
  font-weight: 550;
  color: var(--dc-text);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-dropdown-item:hover {
  background: var(--dc-verdant-soft);
  color: var(--dc-forest);
  padding-left: 20px;              /* keep the original inset; no jump */
  box-shadow: inset 3px 0 0 var(--dc-verdant);
}

/* 6. CARDS, PANELS, SURFACES ============================================== */
.card, .panel, .admin-card, .pricing-card,
.deal-card, .property-card, .stat-card {
  background: var(--dc-paper);
  border: 1px solid var(--dc-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3d-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover, .deal-card:hover, .property-card:hover {
  border-color: var(--dc-rule-strong);
  box-shadow: var(--shadow-3d-card-hover);
}

.view-panel { background: var(--dc-stone); }

/* 7. DATA: TABLES, FIGURES, BADGES ========================================
   Money and identifiers are the product. They get the mono face and
   tabular figures so columns line up and digits don't dance.
   ========================================================================= */
table { border-collapse: collapse; }

th {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dc-text-soft);
  background: var(--dc-stone);
  border-bottom: 1px solid var(--dc-rule-strong);
  text-align: left;
}
td { border-bottom: 1px solid var(--dc-rule); }
tbody tr:hover { background: var(--dc-stone); }

/* Display-sized figures use the HEADER face. Monospace at 2rem+ sets commas
   and decimal points with their own full character cell, so "1,200+" reads as
   "1 , 200+" and "$2.4B" as "$2 . 4B". Mono earns its place in tables, where
   column alignment is the point — not in headline numbers. */
.stat-value, .stat-text strong, .pricing-price, .metric-value, [data-figure] {
  font-family: var(--font-header);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--dc-ink);
}

/* Tabular money inside data tables keeps the mono face for column alignment. */
td .price, td .amount, td .money, td[data-money],
table .price, table .amount, table .money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--dc-ink);
}

.price, .amount, .money, .deal-price, [data-money] {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--dc-ink);
}

.parcel, .apn, .deal-id, .invoice-no, code, kbd {
  font-family: var(--font-mono);
  font-size: .86em;
}

/* Status pills: bordered, legible, never colour-only */
.badge, .pill, .status-badge, .tag {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  padding: .18em .5em;
}

/* 8. FORMS ================================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
select, textarea, .form-control, .input {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--dc-text);
  background: var(--dc-paper);
  border: 1px solid var(--dc-rule-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, select:focus, textarea:focus,
.form-control:focus, .input:focus {
  outline: none;
  border-color: var(--dc-verdant);
  box-shadow: var(--glow-shadow-emerald);
}
input::placeholder, textarea::placeholder { color: var(--dc-text-mute); }

label, .form-label {
  font-size: .8rem;
  font-weight: 650;
  color: var(--dc-text-soft);
  letter-spacing: .01em;
}

/* 9. MARKETING PAGES ======================================================
   pricing.php / about.php / how-it-works.php / faq.php / contact.php carry
   their own inline styles in a different (blue) palette, which is why the
   site currently looks like two products. These rules pull that chrome onto
   the same identity as the app.
   ========================================================================= */
.nav {
  background: var(--dc-ink);
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.nav .brand, .nav .brand strong { color: #FFFFFF; }
.nav .brand small { color: rgba(244, 248, 245, .6); font-family: var(--font-mono); letter-spacing: .08em; }

.nav-links a {
  color: rgba(244, 248, 245, .82);
  font-family: var(--font-body);
  font-weight: 550;
  border-radius: var(--radius-md);
}
.nav-links a:hover,
.nav-links a.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .08);
}
.nav-links a.nav-cta,
.nav-cta {
  background: var(--dc-signal) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-md);
}
.nav-links a.nav-cta:hover,
.nav-cta:hover {
  background: var(--dc-signal-deep) !important;
  transform: none;
}

.hero {
  background: var(--dc-forest);
  border-bottom: 1px solid var(--dc-forest-deep);
}
.hero h1 { font-family: var(--font-header); color: #FFFFFF; }
.hero p  { color: rgba(240, 247, 242, .78); }

/* Pricing: emphasis by weight and rule, not by scaling the card up */
.pricing-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--dc-rule);
  box-shadow: var(--shadow-3d-card);
}
.pricing-card.featured {
  border: 1px solid var(--dc-forest);
  border-top: 3px solid var(--dc-signal);
  transform: none;
  box-shadow: 0 8px 24px rgba(14, 33, 25, .10);
}
.pricing-title  { font-family: var(--font-header); color: var(--dc-ink); }
/* Display prices use the header face, not the mono one — mono at 2.5rem sets
   "$9.99" with gappy letterfit and reads like a serial number. Mono stays for
   tabular data, where column alignment is the point. */
.pricing-price  {
  font-family: var(--font-header);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--dc-ink);
}
.pricing-price span { font-family: var(--font-body); font-weight: 500; color: var(--dc-text-mute); letter-spacing: 0; }
.pricing-header { border-bottom: 1px solid var(--dc-rule); }
.pricing-features li { color: var(--dc-text-soft); }
.pricing-features li svg { color: var(--dc-verdant); }

/* 10. FOOTER ============================================================== */
.footer, .site-footer, footer.footer {
  background: var(--dc-ink);
  color: rgba(244, 248, 245, .74);
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.footer a, .site-footer a { color: rgba(244, 248, 245, .74); }
.footer a:hover, .site-footer a:hover { color: #FFFFFF; }
.footer h4, .site-footer h4 {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 248, 245, .52);
}

/* 11. ACCESSIBILITY + MOTION ==============================================
   The previous stylesheet removed focus outlines in several places, which
   makes the product unusable by keyboard. Put a visible one back everywhere.
   ========================================================================= */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--dc-signal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print: the deal sheet is a document people hand to other people */
@media print {
  .header, #main-header, .nav, .footer, .site-footer,
  .nav-account-actions, .mobile-toggle { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .card, .panel, .pricing-card { border: 1px solid #999999; box-shadow: none; }
}