/*
 * immobilier.css
 * Real estate CRM theme overrides — applied on top of the base Growmax theme.
 *
 * Color direction (from design spec):
 *   Main brand     : Keep Growmax primary
 *   Immobilier     : Dark green  #1e5c35
 *   Premium accent : Soft gold   #c9a96e
 *   Background     : Very light grey  #f8fafc
 *   Text           : Dark navy   #2c3e50
 *   Status         : Keep existing system
 *
 *   Active/hover surfaces now use the "Pure immobilier" gradient
 *   (light → dark green) — calm and professional.
 ******************************************************************************/

/* ─── 1. CSS custom properties ─────────────────────────────────────── */
:root {
  /* Immobilier accent palette */
  --immo-green:         #1e5c35;
  --immo-green-mid:     #2e7d52;
  --immo-green-soft:    #5dcaa5;
  --immo-green-light:   #e8f5ee;
  --immo-gold:          #c9a96e;
  --immo-gold-light:    #fdf6e3;
  --immo-navy:          #1a2b3c;
  --immo-charcoal:      #2c3e50;

  /* Pure immobilier gradient — light → dark green */
  --gradient-immo: linear-gradient(
    to right top,
    #358167  5%,
    #2e7d52 40%,
    #1e5c35 90%
  );

  /* Body & background overrides */
  --bs-body-bg:         #f8fafc;
  --bs-body-color:      #2c3e50;

  /* Heading color — dark navy */
  --bs-heading-color:   #1a2b3c;

  /* Card */
  --bs-card-bg:         #ffffff;
  --bs-card-border-color: rgba(26,43,60,.08);
}

/* ─── 2. Body & typography ──────────────────────────────────────────── */
body {
  color: var(--immo-charcoal) !important;
  background-color: var(--bs-body-bg) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--immo-navy) !important;
}

/* Breadcrumb muted text stays legible */
.text-muted {
  color: #6b7c93 !important;
}

/* ─── 3. Cards ──────────────────────────────────────────────────────── */
.card {
  background-color: #ffffff !important;
  border: 1px solid rgba(26,43,60,.08) !important;
  box-shadow: 0 2px 8px rgba(26,43,60,.06) !important;
}

.card-header {
  background-color: #ffffff !important;
  border-bottom-color: rgba(26,43,60,.08) !important;
}

/* ─── 4. Sidebar / menu ─────────────────────────────────────────────── */
/* Green-gradient sidebar — full inversion from the white version */
#layout-menu,
#layout-menu.layout-menu,
#layout-menu.menu-vertical,
aside.layout-menu,
.bg-menu-theme,
.layout-menu.bg-menu-theme,
.menu-vertical.bg-menu-theme {
  background: var(--gradient-immo) !important;
  color: #ffffff !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 2px 0 20px rgba(30,92,53,.35) !important;
}

/* Inactive item text + icons — slightly translucent white for depth */
.menu-inner > .menu-item > .menu-link {
  color: rgba(255,255,255,.82) !important;
}
.menu-inner > .menu-item > .menu-link .menu-icon,
.menu-inner > .menu-item > .menu-link i {
  color: rgba(255,255,255,.82) !important;
}

/* Sub-menu toggle arrow (chevron) */
.menu-inner > .menu-item > .menu-link::after,
.menu-inner > .menu-item > .menu-link .menu-toggle::after {
  color: rgba(255,255,255,.60) !important;
}

/* Active item — white translucent pill so it "pops" on the green bg */
.menu-inner > .menu-item.active > .menu-link,
.menu-inner > .menu-item.open  > .menu-link,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme .menu-inner > .menu-item.open  > .menu-link,
.layout-menu .menu-inner > .menu-item.active > .menu-link,
#layout-menu .menu-inner > .menu-item.active > .menu-link {
  background: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.15) !important;
}
.menu-inner > .menu-item.active > .menu-link i,
.menu-inner > .menu-item.open  > .menu-link i,
.menu-inner > .menu-item.active > .menu-link .menu-icon,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link i,
.layout-menu .menu-inner > .menu-item.active > .menu-link i,
#layout-menu .menu-inner > .menu-item.active > .menu-link i {
  color: #ffffff !important;
}

/* Hover — lighter translucent white pill */
.menu-inner > .menu-item:not(.active) > .menu-link:hover,
.bg-menu-theme .menu-inner > .menu-item:not(.active) > .menu-link:hover,
.layout-menu .menu-inner > .menu-item:not(.active) > .menu-link:hover,
#layout-menu .menu-inner > .menu-item:not(.active) > .menu-link:hover {
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  border-radius: 0.5rem !important;
}
.menu-inner > .menu-item:not(.active) > .menu-link:hover i,
.menu-inner > .menu-item:not(.active) > .menu-link:hover .menu-icon,
.bg-menu-theme .menu-inner > .menu-item:not(.active) > .menu-link:hover i,
.layout-menu .menu-inner > .menu-item:not(.active) > .menu-link:hover i,
#layout-menu .menu-inner > .menu-item:not(.active) > .menu-link:hover i {
  color: #ffffff !important;
}
/* Sub-arrow chevron on hover */
.menu-inner > .menu-item:not(.active) > .menu-link:hover::after,
.menu-inner > .menu-item:not(.active) > .menu-link:hover .menu-toggle::after {
  color: #ffffff !important;
}

/* Menu inner shadow */
.menu-inner-shadow {
  display: none !important;
}

/* ─── 4b. Brand block ───────────────────────────────────────────────── */
.immo-brand-block {
  padding: 1.5rem 1.25rem 1rem !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  align-items: flex-start !important;
}
.immo-brand-link {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.18rem !important;
  text-decoration: none !important;
}
.immo-brand-name {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  color: #f04e23 !important;
  line-height: 1 !important;
}
.immo-brand-tagline {
  font-size: .62rem !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.65) !important;
  line-height: 1.3 !important;
}
.immo-brand-badge {
  display: inline-block !important;
  margin-top: .25rem !important;
  padding: .15rem .55rem !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,.55) !important;
  border-radius: .35rem !important;
  background: transparent !important;
}
.immo-menu-toggle {
  color: rgba(255,255,255,.70) !important;
}

/* ─── 5. Navbar ─────────────────────────────────────────────────────── */
.layout-navbar {
  border-bottom: 1px solid rgba(26,43,60,.08) !important;
  background-color: #ffffff !important;
}

/* ─── 6. Buttons — immobilier utility variants ──────────────────────── */
.btn-immo-green {
  background-color: var(--immo-green) !important;
  border-color: var(--immo-green) !important;
  color: #ffffff !important;
}
.btn-immo-green:hover {
  background-color: var(--immo-green-mid) !important;
  border-color: var(--immo-green-mid) !important;
}
.btn-outline-immo-green {
  border-color: var(--immo-green) !important;
  color: var(--immo-green) !important;
  background-color: transparent !important;
}
.btn-outline-immo-green:hover {
  background-color: var(--immo-green) !important;
  color: #ffffff !important;
}

/* Gradient button — for primary CTAs that want the full immobilier identity */
.btn-immo-gradient {
  background: var(--gradient-immo) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(30,92,53,.25) !important;
}
.btn-immo-gradient:hover {
  filter: brightness(1.05) !important;
  box-shadow: 0 6px 16px rgba(30,92,53,.35) !important;
}

.btn-immo-gold {
  background-color: var(--immo-gold) !important;
  border-color: var(--immo-gold) !important;
  color: #1a2b3c !important;
}
.btn-immo-gold:hover {
  background-color: #b8934a !important;
  border-color: #b8934a !important;
}

/* ─── 7. Badge utilities ────────────────────────────────────────────── */
.badge-immo-green,
.bg-immo-green {
  background-color: var(--immo-green) !important;
  color: #ffffff !important;
}
.badge-immo-green-light,
.bg-immo-green-light {
  background-color: var(--immo-green-light) !important;
  color: var(--immo-green) !important;
}
.badge-immo-gold,
.bg-immo-gold {
  background-color: var(--immo-gold) !important;
  color: #1a2b3c !important;
}
.badge-immo-gold-light,
.bg-immo-gold-light {
  background-color: var(--immo-gold-light) !important;
  color: #8a6a2e !important;
}

/* ─── 8. Text utilities ─────────────────────────────────────────────── */
.text-immo-green  { color: var(--immo-green)  !important; }
.text-immo-gold   { color: var(--immo-gold)   !important; }
.text-immo-navy   { color: var(--immo-navy)   !important; }

/* ─── 9. Availability status badges (bien immobilier) ───────────────── */
.status-disponible  { background-color: var(--immo-green-light) !important; color: var(--immo-green) !important; font-weight: 600; }
.status-reserve     { background-color: #fff8e1 !important; color: #e65100 !important; font-weight: 600; }
.status-vendu       { background-color: #fce4ec !important; color: #c62828 !important; font-weight: 600; }
.status-loue        { background-color: #e3f2fd !important; color: #1565c0 !important; font-weight: 600; }
.status-indisponible{ background-color: #f5f5f5 !important; color: #616161 !important; font-weight: 600; }

/* ─── 10. Page/content background ──────────────────────────────────── */
.layout-page,
.content-wrapper {
  background-color: var(--bs-body-bg) !important;
}

/* ─── 11. Tables ────────────────────────────────────────────────────── */
.table {
  --bs-table-color: var(--immo-charcoal);
  --bs-table-striped-color: var(--immo-charcoal);
}

.table thead th {
  color: var(--immo-navy) !important;
  font-weight: 600 !important;
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom-color: rgba(26,43,60,.12) !important;
}

/* ─── 12. Form controls ─────────────────────────────────────────────── */
.form-label {
  color: var(--immo-navy) !important;
  font-weight: 500;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--immo-green-mid) !important;
  box-shadow: 0 0 0 .2rem rgba(30,92,53,.15) !important;
}

/* ─── 13. Dividers & borders ────────────────────────────────────────── */
hr,
.border-bottom,
.border-top {
  border-color: rgba(26,43,60,.08) !important;
}

/* ─── 14. Dashboard KPI cards accent bar ───────────────────────────── */
.card .avatar-initial.rounded.bg-label-success { background-color: var(--immo-green-light) !important; color: var(--immo-green) !important; }
.card .avatar-initial.rounded.bg-label-warning { background-color: var(--immo-gold-light) !important; color: #8a6a2e !important; }

/* ─── 15. Page title breadcrumb ─────────────────────────────────────── */
.py-3.mb-4 .text-muted,
h4 .text-muted,
h4.fw-light {
  color: #6b7c93 !important;
}

/* ─── 16. Scrollbar (subtle green tint) ─────────────────────────────── */
::-webkit-scrollbar-thumb {
  background-color: rgba(30,92,53,.25) !important;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(30,92,53,.45) !important;
}