/* SIMSAR_SIDEBAR_PREMIUM_V22_3
   Visual-only production polish. Navigation behavior remains unchanged. */

:root{
  --s223-ink:#17233a;
  --s223-muted:#7c899d;
  --s223-line:#e7ebf0;
  --s223-soft:#f6f8fa;
  --s223-red:#e9372b;
  --s223-red-dark:#c92c22;
  --s223-red-soft:#fff3f1;
  --s223-shadow:0 8px 26px rgba(15,23,42,.055);
  --rail:242px !important;
}

/* ===== SIDEBAR FRAME ===== */
.side-rail{
  width:242px !important;
  min-width:242px !important;
  padding:18px 14px 18px !important;
  gap:12px !important;
  background:
    linear-gradient(180deg,#ffffff 0%,#fdfefe 100%) !important;
  border-right:1px solid #e6ebf1 !important;
  box-shadow:3px 0 18px rgba(15,23,42,.025) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:none !important;
}

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

/* ===== BRAND ===== */
.side-rail .brand{
  min-height:76px !important;
  padding:4px 6px 15px !important;
  margin:0 0 5px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  border-bottom:1px solid #edf0f4 !important;
}

.side-rail .brand-mark{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  border-radius:14px !important;
  border:1px solid #f0bdb7 !important;
  background:
    linear-gradient(145deg,#ef4638 0%,#dd2d21 100%) !important;
  box-shadow:0 7px 16px rgba(226,54,40,.15) !important;
  overflow:hidden !important;
  padding:0 !important;
}

.side-rail .brand-mark img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:inherit !important;
}

.side-rail .brand > div:last-child{
  min-width:0 !important;
}

.side-rail .brand b{
  display:block !important;
  color:#111c31 !important;
  font-size:16px !important;
  font-weight:900 !important;
  line-height:1.18 !important;
  letter-spacing:-.2px !important;
  white-space:nowrap !important;
}

.side-rail .brand span{
  display:block !important;
  margin-top:4px !important;
  color:#8b97aa !important;
  font-size:10.5px !important;
  font-weight:750 !important;
  line-height:1.25 !important;
}

/* ===== NAVIGATION ===== */
.side-rail .rail-nav{
  display:grid !important;
  gap:5px !important;
  padding:3px 0 0 !important;
  overflow:visible !important;
}

.side-rail .rail-nav button{
  position:relative !important;
  width:100% !important;
  min-height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:11px !important;
  margin:0 !important;
  padding:5px 10px !important;
  border:1px solid transparent !important;
  border-radius:13px !important;
  background:transparent !important;
  color:#2b3952 !important;
  font-size:12.5px !important;
  font-weight:780 !important;
  line-height:1.2 !important;
  text-align:left !important;
  box-shadow:none !important;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease !important;
}

.side-rail .rail-nav button > span{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.side-rail .rail-nav button i{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  flex:0 0 32px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  border:1px solid #e7ecf2 !important;
  border-radius:10px !important;
  background:
    linear-gradient(180deg,#fafbfd 0%,#f4f6f9 100%) !important;
  color:#71809a !important;
  font-style:normal !important;
  font-size:0 !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.025),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition:.15s ease !important;
}

.side-rail .rail-nav button i svg{
  width:17px !important;
  height:17px !important;
  display:block !important;
  stroke:currentColor !important;
}

.side-rail .rail-nav button:hover{
  background:#f8f9fb !important;
  border-color:#eef1f5 !important;
  color:#17233a !important;
  transform:translateX(1px);
}

.side-rail .rail-nav button:hover i{
  background:#fff !important;
  border-color:#e3e8ee !important;
  color:#df4437 !important;
}

.side-rail .rail-nav button.active{
  min-height:50px !important;
  padding-right:32px !important;
  background:
    linear-gradient(90deg,#fff0ee 0%,#fff7f6 100%) !important;
  border-color:#f7d9d5 !important;
  color:var(--s223-red-dark) !important;
  font-weight:900 !important;
  box-shadow:
    0 4px 14px rgba(226,54,40,.055),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.side-rail .rail-nav button.active:before{
  content:"" !important;
  position:absolute !important;
  left:-1px !important;
  top:9px !important;
  bottom:9px !important;
  width:4px !important;
  border-radius:0 5px 5px 0 !important;
  background:var(--s223-red) !important;
}

.side-rail .rail-nav button.active:after{
  content:"›" !important;
  position:absolute !important;
  right:12px !important;
  top:50% !important;
  transform:translateY(-53%) !important;
  color:var(--s223-red) !important;
  font-size:22px !important;
  font-weight:500 !important;
  line-height:1 !important;
}

.side-rail .rail-nav button.active i{
  background:#fff !important;
  border-color:#f1c8c3 !important;
  color:var(--s223-red) !important;
  box-shadow:0 4px 10px rgba(226,54,40,.07) !important;
}

/* visual group separation before profile */
.side-rail .rail-nav button.simsar-s223-group-start{
  margin-top:10px !important;
}

.side-rail .rail-nav button.simsar-s223-group-start:before{
  /* active indicator is re-declared below when both classes exist */
}

.side-rail .rail-nav button.simsar-s223-group-start:not(.active){
  border-top-color:transparent !important;
}

.side-rail .rail-nav button.simsar-s223-group-start::marker{
  display:none;
}

.side-rail .simsar-s223-divider{
  height:1px !important;
  margin:10px 8px 4px !important;
  background:#edf0f4 !important;
  border:0 !important;
}

/* ===== SIDEBAR PROMO CARD ===== */
.side-rail .simsar-s223-promo{
  position:relative !important;
  overflow:hidden !important;
  margin-top:11px !important;
  padding:17px 15px 15px !important;
  min-height:152px !important;
  border:1px solid #f3d8d4 !important;
  border-radius:17px !important;
  background:
    radial-gradient(circle at 110% 115%,rgba(228,55,43,.16),transparent 42%),
    linear-gradient(145deg,#fff7f5 0%,#fff 62%,#fff0ed 100%) !important;
}

.side-rail .simsar-s223-promo:after{
  content:"⌂" !important;
  position:absolute !important;
  right:13px !important;
  bottom:4px !important;
  color:rgba(226,54,40,.08) !important;
  font-size:78px !important;
  font-weight:900 !important;
  line-height:1 !important;
  transform:rotate(-8deg);
}

.side-rail .simsar-s223-promo small{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  color:#17233a !important;
  font-size:9px !important;
  font-weight:900 !important;
  line-height:1.5 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

.side-rail .simsar-s223-promo p{
  position:relative !important;
  z-index:1 !important;
  max-width:135px !important;
  margin:9px 0 13px !important;
  color:#7b8799 !important;
  font-size:10px !important;
  font-weight:650 !important;
  line-height:1.55 !important;
}

.side-rail .simsar-s223-promo button{
  position:relative !important;
  z-index:1 !important;
  min-height:35px !important;
  padding:0 13px !important;
  border:0 !important;
  border-radius:9px !important;
  background:
    linear-gradient(180deg,#ec4639 0%,#df3125 100%) !important;
  color:#fff !important;
  font:inherit !important;
  font-size:10.5px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 6px 14px rgba(226,54,40,.18) !important;
}

/* keep any legacy rail-card out of the layout */
.side-rail > .rail-card{
  display:none !important;
}

/* ===== UTILITY / TOPBAR ===== */
.simsar-v21-utility{
  min-height:38px !important;
  height:auto !important;
  padding:0 20px !important;
  background:#f8fafc !important;
  border-bottom:1px solid #e7ebf0 !important;
  color:#526176 !important;
  font-size:11px !important;
  font-weight:800 !important;
}

.topbar{
  min-height:66px !important;
  background:rgba(255,255,255,.98) !important;
  border-bottom:1px solid #e7ebf0 !important;
  box-shadow:0 2px 12px rgba(15,23,42,.025) !important;
}

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

.simsar-v21-topnav button{
  position:relative !important;
  min-height:43px !important;
  color:#3c4960 !important;
  font-size:12px !important;
  font-weight:850 !important;
}

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

.top-search{
  min-height:43px !important;
  border:1px solid #e1e6ed !important;
  border-radius:12px !important;
  background:#fbfcfd !important;
  box-shadow:
    0 2px 8px rgba(15,23,42,.025),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.top-search:focus-within{
  border-color:#e8aaa3 !important;
  box-shadow:
    0 0 0 3px rgba(226,54,40,.06),
    0 2px 8px rgba(15,23,42,.025) !important;
}

/* ===== HOME POLISH ===== */
#page-home .hero{
  overflow:hidden !important;
  border:1px solid rgba(120,40,32,.12) !important;
  border-radius:24px !important;
  box-shadow:0 14px 34px rgba(71,25,20,.10) !important;
}

#page-home .search-card{
  border:1px solid #e7ebf0 !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 7px 22px rgba(15,23,42,.045) !important;
}

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

#page-home .kpis > div{
  border:1px solid #e7ebf0 !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:0 5px 17px rgba(15,23,42,.035) !important;
}

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

/* ===== RESPONSIVE ===== */
@media(max-width:1120px){
  :root{
    --rail:220px !important;
  }

  .side-rail{
    width:220px !important;
    min-width:220px !important;
    padding-left:11px !important;
    padding-right:11px !important;
  }

  .side-rail .rail-nav button{
    font-size:11.5px !important;
  }

  .side-rail .simsar-s223-promo{
    display:none !important;
  }
}

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

@media(max-height:920px) and (min-width:901px){
  .side-rail .simsar-s223-promo{
    display:none !important;
  }

  .side-rail .rail-nav{
    gap:3px !important;
  }

  .side-rail .rail-nav button{
    min-height:41px !important;
  }
}