/* ==========================================================================
   Ivory and deep green — shared by all three sites and the CRM.

   Loaded from base.html on top of custom.css. It redefines the shared
   colour variables rather than restyling components, so every page
   changes at once.

   Sites: probatebayarea.com, eastbayhomes.com, casasbayarea.com.
   Listing pages keep their own dark palette (listing.css) on purpose.

   Light background, deep green text and generous type are easier to read
   than the dark palette, which matters for an audience that is often an
   executor or trustee aged 55+.

   The admin / CRM section is at the bottom of this file.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg-primary:    #F5F3EC;   /* warm ivory page */
  --bg-secondary:  #FFFFFF;
  --bg-tertiary:   #FFFFFF;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #FBFAF6;
  --bg-input:      #FFFFFF;
  --bg-overlay:    rgba(22, 59, 55, 0.55);

  /* Action colour. Keeps the --gold names so nothing else has to change. */
  --gold:           #163B37;  /* deep green */
  --gold-hover:     #0F2B28;
  --gold-champagne: #7C9A8B;  /* mid sage: a pale tint disappears on a light page */
  --gold-bronze:    #596C66;
  --gold-tint:      rgba(22, 59, 55, 0.08);
  --gold-glow:      rgba(22, 59, 55, 0.16);
  --accent-warm:    #C0A272;  /* brass emphasis keeps a thread of the old brand */

  /* Text */
  --text-primary: #163B37;
  --text-muted:   #596C66;
  --text-subtle:  #7C8C86;
  --text-inverse: #FFFFFF;    /* on green buttons */

  /* Borders */
  --border:       #D5DDD4;
  --border-light: #E4E9E2;
  --border-gold:  rgba(22, 59, 55, 0.28);
}

/* Editorial serif headlines — the calm, trustworthy half of the look. */
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  letter-spacing: -0.01em;
}
h1 { letter-spacing: -0.02em; }

/* Flat surfaces: the reference design uses no shadows or gradients. */
.btn-primary {
  background: var(--gold);
  box-shadow: none;
}
.btn-primary:hover { background: var(--gold-hover); }

.card, .stat-card, .panel { box-shadow: none; }

/* Selection and focus read green rather than gold. */
::selection { background: rgba(22, 59, 55, 0.14); color: #163B37; }

/* The shared eXp Realty logo is a white PNG made for dark backgrounds.
   On ivory it is nearly invisible, so render it dark instead. */
img[alt="eXp Realty"] { filter: brightness(0); opacity: 0.82; }


/* ==========================================================================
   ADMIN / CRM — "Forest & Cream"

   Deep green sidebar, cream workspace, brass highlights.

   Every selector below is inside .sidebar, .sidebar-mobile-header or
   .main-content. Those three class names appear only in base_admin.html,
   so nothing here can reach a public website page.
   ========================================================================== */

/* The sidebar redefines the shared colour names for itself only. Its links,
   labels and badges already read these names, so they all follow at once. */
.sidebar {
  --text-primary: #F6F4ED;
  --text-muted:   rgba(246, 244, 237, 0.74);
  --text-subtle:  rgba(246, 244, 237, 0.46);
  --text-inverse: #163B37;
  --border:       rgba(246, 244, 237, 0.14);
  --border-light: rgba(246, 244, 237, 0.10);
  --gold:         #C0A272;
  --gold-bronze:  #A98B55;
  --gold-tint:    rgba(246, 244, 237, 0.09);

  background: #163B37;
  border-right: 1px solid rgba(11, 30, 28, 0.6);
}

/* Rounded brass tile holding the mark, like the reference. */
.sidebar .brand-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: #C0A272;
  color: #163B37;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar .brand-name {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #F6F4ED;
  line-height: 1.2;
  white-space: nowrap;
}

.sidebar .brand-tagline {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(246, 244, 237, 0.48);
  white-space: nowrap;
}

/* Quiet rows; the open page gets a soft pill and a brass edge. */
.sidebar .sidebar-link {
  border-radius: 0 8px 8px 0;
  margin-right: 8px;
}

.sidebar .sidebar-link:hover {
  background: rgba(246, 244, 237, 0.07);
  border-left-color: rgba(192, 162, 114, 0.45);
  color: #F6F4ED;
}

.sidebar .sidebar-link.active {
  background: rgba(246, 244, 237, 0.10);
  border-left-color: #C0A272;
  color: #F6F4ED;
}

.sidebar .sidebar-link .badge-count {
  background: rgba(192, 162, 114, 0.22);
  color: #E6D3AE;
}

.sidebar .sidebar-footer,
.sidebar .sidebar-branding {
  border-top-color: rgba(246, 244, 237, 0.13);
}

.sidebar .brand-badge { color: #C0A272; }

/* Small screens: the slide-down bar above the page. */
.sidebar-mobile-header {
  background: #163B37;
  color: #F6F4ED;
  border-bottom: 1px solid rgba(11, 30, 28, 0.6);
}
.sidebar-mobile-header .brand-name { color: #F6F4ED; }
.sidebar-mobile-header .btn-ghost  { color: #F6F4ED; }

/* Workspace side: cream page, serif page titles, hairline under the header. */
.main-content {
  background: var(--bg-primary);
}

.main-content .page-header {
  border-bottom: 1px solid var(--border-light);
}

.main-content .page-title {
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #163B37;
}

/* Flat cards read better than lifted ones on a light page. */
.main-content .stat-card:hover,
.main-content .product-card:hover {
  box-shadow: 0 6px 18px rgba(22, 59, 55, 0.08);
}


/* ==========================================================================
   LEFTOVERS FROM THE DARK PALETTE

   A few places hard-coded a near-black colour instead of using a colour
   name, so the switch to ivory missed them. They are corrected here rather
   than in custom.css, which keeps the whole palette change in one file.
   ========================================================================== */

/* Every other table row was near-black. Now a barely-there warm tint. */
.table tbody tr:nth-child(even) {
  background: #FBF9F3;
}
.table tbody tr:hover {
  background: rgba(22, 59, 55, 0.055);
}

/* The quiet button (filter chips, "All") was dark brown on dark brown. */
.btn-secondary {
  background: #FFFFFF;
  color: #163B37;
  border-color: #CBD6CE;
}
.btn-secondary:hover {
  background: #F0EEE5;
  border-color: #163B37;
}

/* The "please wait" veil was black; on a light page it should be ivory. */
.loading-overlay {
  background: rgba(245, 243, 236, 0.78);
}


/* ==========================================================================
   SIDEBAR FIT

   The sidebar is 200px wide and the business name is long, so let the name
   wrap onto two lines and stack the footer instead of clipping them.
   ========================================================================== */
.sidebar .brand-name {
  font-size: 0.92rem;
  line-height: 1.22;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sidebar .sidebar-brand {
  align-items: flex-start;
}

.sidebar .sidebar-footer {
  display: block;
}
.sidebar .sidebar-footer .sidebar-link {
  padding-left: 0;
  border-left-width: 0;
  margin-right: 0;
}