/* ============================================================
   SIMSAR V21.1 — SIDEBAR + SCREEN THEME POLISH
   CSS-only. Original DOM and workflows remain unchanged.
   ============================================================ */

:root{
  --v211-red:#e23628;
  --v211-red-dark:#c92f23;
  --v211-ink:#172033;
  --v211-muted:#738096;
  --v211-bg:#f7f8fb;
  --v211-card:#ffffff;
  --v211-line:#e8ebf0;
  --v211-soft:#f5f7fa;
  --v211-shadow:0 7px 22px rgba(15,23,42,.05);
  --rail:228px !important;
}

html,
body{
  background:var(--v211-bg) !important;
  color:var(--v211-ink) !important;
}

/* SIDEBAR */
.side-rail{
  width:228px !important;
  min-width:228px !important;
  padding:14px 11px 16px !important;
  gap:10px !important;
  background:#fff !important;
  border-right:1px solid var(--v211-line) !important;
  box-shadow:2px 0 12px rgba(15,23,42,.02) !important;
}

.side-rail .brand{
  min-height:62px !important;
  padding:4px 7px 12px !important;
  margin-bottom:3px !important;
  border-bottom:1px solid #f0f2f5 !important;
}

.side-rail .brand-mark{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border-radius:11px !important;
  background:#fff4f2 !important;
  color:var(--v211-red) !important;
  border:1px solid #f6d7d2 !important;
  box-shadow:none !important;
  font-size:16px !important;
}

.side-rail .brand b{
  font-size:15px !important;
  line-height:1.15 !important;
  color:var(--v211-ink) !important;
}

.side-rail .brand span{
  font-size:10px !important;
  color:#8a94a5 !important;
  font-weight:650 !important;
}

.side-rail .rail-nav{
  display:grid !important;
  gap:3px !important;
  padding:4px 0 !important;
  scrollbar-width:none;
}

.side-rail .rail-nav::-webkit-scrollbar{
  display:none;
}

.side-rail .rail-nav button{
  position:relative !important;
  min-height:43px !important;
  padding:6px 9px !important;
  gap:10px !important;
  border-radius:10px !important;
  color:#2d3850 !important;
  font-size:12px !important;
  font-weight:780 !important;
  box-shadow:none !important;
  transition:background-color .14s ease,color .14s ease,border-color .14s ease !important;
}

.side-rail .rail-nav button i{
  width:27px !important;
  min-width:27px !important;
  height:27px !important;
  border-radius:8px !important;
  background:#f5f7f9 !important;
  border:1px solid #edf0f3 !important;
  color:#8490a3 !important;
  font-size:12px !important;
  box-shadow:none !important;
}

.side-rail .rail-nav button:hover{
  background:#f7f8fa !important;
  color:#172033 !important;
}

.side-rail .rail-nav button:hover i{
  background:#fff !important;
  color:var(--v211-red) !important;
  border-color:#f0d7d3 !important;
}

.side-rail .rail-nav button.active{
  background:#fff4f2 !important;
  color:var(--v211-red-dark) !important;
  box-shadow:none !important;
  font-weight:850 !important;
}

.side-rail .rail-nav button.active:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:var(--v211-red);
}

.side-rail .rail-nav button.active i{
  background:#fff !important;
  color:var(--v211-red) !important;
  border-color:#f0cbc5 !important;
}

.side-rail .rail-card{
  display:none !important;
}

/* GLOBAL SCREEN THEME */
.main{
  background:var(--v211-bg) !important;
}

.main > .page{
  color:var(--v211-ink) !important;
}

.main > .page.active{
  animation:none !important;
}

.main .page > .section-head{
  min-height:54px !important;
  margin:7px 0 11px !important;
  padding:0 1px !important;
}

.main .page > .section-head h2{
  margin:0 !important;
  color:#141d2f !important;
  font-size:19px !important;
  font-weight:850 !important;
  letter-spacing:-.25px !important;
}

.main .page > .section-head p{
  margin:4px 0 0 !important;
  color:var(--v211-muted) !important;
  font-size:10.5px !important;
  font-weight:650 !important;
}

.main .page .project-card,
.main .page .property-card,
.main .page .profile-card,
.main .page .profile-details,
.main .page .support-card,
.main .page .compare-card,
.main .page .map-panel,
.main .page .map-stage,
.main .page .simsar-v3-card,
.main .page .simsar-v3-search-card,
.main .page .simsar-v3-empty{
  border:1px solid var(--v211-line) !important;
  background:#fff !important;
  box-shadow:var(--v211-shadow) !important;
}

.main .page input,
.main .page select,
.main .page textarea{
  border:1px solid #e2e6ec !important;
  background:#fff !important;
  color:#263247 !important;
  box-shadow:none !important;
}

.main .page input:focus,
.main .page select:focus,
.main .page textarea:focus{
  border-color:#df9d95 !important;
  box-shadow:0 0 0 3px rgba(226,54,40,.07) !important;
  outline:none !important;
}

.main .page .btn{
  border-radius:9px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

.main .page .btn.orange{
  background:var(--v211-red) !important;
  border-color:var(--v211-red) !important;
  color:#fff !important;
}

.main .page .btn.orange:hover{
  background:var(--v211-red-dark) !important;
  border-color:var(--v211-red-dark) !important;
}

.main .page .btn.light{
  background:#fff !important;
  border:1px solid #e0e5eb !important;
  color:#344054 !important;
}

#page-explore .btn.blue,
#page-profile .btn.blue,
#page-saved-searches .btn.blue{
  background:var(--v211-red) !important;
  border-color:var(--v211-red) !important;
  color:#fff !important;
}

/* TOPBAR */
.topbar{
  min-height:64px !important;
  background:#fff !important;
  border-bottom:1px solid var(--v211-line) !important;
  box-shadow:none !important;
}

.simsar-v21-topnav{
  gap:17px !important;
}

.simsar-v21-topnav button{
  color:#364158 !important;
  font-size:11.5px !important;
  font-weight:800 !important;
}

.simsar-v21-topnav button:hover,
.simsar-v21-topnav button.active{
  color:var(--v211-red) !important;
}

.top-search{
  min-height:40px !important;
  border:1px solid #e4e8ed !important;
  border-radius:10px !important;
  background:#fafbfc !important;
}

.top-actions > button,
.top-actions .btn,
#sm18-account-button{
  min-height:38px !important;
  border-radius:9px !important;
  box-shadow:none !important;
}

/* HOME */
#page-home .hero{
  border-radius:22px !important;
  box-shadow:0 10px 30px rgba(78,28,22,.08) !important;
}

#page-home .search-card{
  border:1px solid var(--v211-line) !important;
  background:#fff !important;
  box-shadow:var(--v211-shadow) !important;
}

#page-home .kpis{
  gap:9px !important;
}

#page-home .kpis > div{
  border:1px solid var(--v211-line) !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:none !important;
}

#page-home .kpis b{
  color:var(--v211-red) !important;
}

/* EXPLORE */
#page-explore .filter-bar{
  box-shadow:none !important;
  border-color:var(--v211-line) !important;
}

#page-explore .property-card{
  box-shadow:0 4px 15px rgba(15,23,42,.04) !important;
}

#page-explore .property-card:hover{
  box-shadow:0 7px 20px rgba(15,23,42,.055) !important;
}

#page-explore .price,
#page-explore .heart{
  color:var(--v211-red) !important;
}

#page-explore .badge.sale,
#page-explore .badge.rent{
  background:var(--v211-red) !important;
}

/* PROFILE */
#page-profile .simsar-v19-card{
  border-color:var(--v211-line) !important;
  box-shadow:var(--v211-shadow) !important;
}

#page-profile .simsar-v19-avatar{
  background:linear-gradient(145deg,#e54537,#c92f23) !important;
}

@media(max-width:1100px){
  :root{
    --rail:210px !important;
  }

  .side-rail{
    width:210px !important;
    min-width:210px !important;
  }
}

@media(max-width:900px){
  .side-rail{
    display:none !important;
  }

  .main{
    background:#f8f9fb !important;
  }

  .mobile-nav{
    border:1px solid #e6e9ee !important;
    background:rgba(255,255,255,.97) !important;
    box-shadow:0 12px 32px rgba(15,23,42,.12) !important;
  }

  .mobile-nav button.active{
    background:var(--v211-red) !important;
    color:#fff !important;
  }
}