/* ===== Realico X — logo + pin + collapse (shared, additive to both pages) ===== */
.brand{align-items:center}
.s-logowrap{position:relative;flex:1 1 auto;min-width:0;height:30px;display:flex;align-items:center}
.brand .s-logo{height:21px;width:auto;color:var(--ink);display:block;flex:0 0 auto;transition:opacity .25s cubic-bezier(.4,0,.2,1)}
.brand .s-logo-mini{position:absolute;left:50%;top:50%;width:30px;height:30px;flex:0 0 auto;transform:translate(-50%,-50%);opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}
.brand .s-pin{margin-left:auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--faint);flex:0 0 auto;transition:background-color .18s var(--ease),color .18s var(--ease)}
.brand .s-pin:hover{background:var(--panel-2);color:var(--ink)}
.brand .s-pin svg{width:16px;height:16px;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.app:not(.unpinned) .brand .s-pin{color:var(--gold-deep)}
.app.unpinned .brand .s-pin svg{transform:rotate(45deg)}

/* ===== layout: sidebar fixed-overlay ALWAYS; grid stays 1 column always =====
   offset is padding-left (animates smoothly, no track-count change = no jump) */
.app{grid-template-columns:1fr!important;padding-left:248px;transition:padding-left .32s cubic-bezier(.4,0,.2,1)}
.app>.main,.app>.app-main{grid-column:1;min-width:0}
.app .side{
  position:fixed;top:0;left:0;bottom:0;width:248px;z-index:60;
  background:var(--sidebar)!important;border-right:none!important;
  transition:width .32s cubic-bezier(.4,0,.2,1),box-shadow .32s cubic-bezier(.4,0,.2,1),background-color .3s var(--ease);
}
.app.unpinned{padding-left:64px}
.app.unpinned .side{width:64px}
.app.unpinned .side:hover{width:248px;box-shadow:0 24px 64px -22px rgba(0,0,0,.4)}

/* everything slides HORIZONTALLY only — labels fade, heights stay constant */
.nav-item{white-space:nowrap;overflow:hidden;transition:background-color .18s var(--ease),color .18s var(--ease),font-size .24s cubic-bezier(.4,0,.2,1),padding .3s cubic-bezier(.4,0,.2,1),gap .26s cubic-bezier(.4,0,.2,1)}
.nav-child{white-space:nowrap;overflow:hidden}
.sp-nm,.sp-rl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s var(--ease)}
.sp-gear{transition:opacity .18s var(--ease)}
.side-foot{transition:opacity .22s var(--ease)}
/* anti-blink: kredity karta sa pri zúžení nesmie zalomiť (výška musí ostať konštantná) */
.cr-card{overflow:hidden}
.cr-top{flex-wrap:nowrap;white-space:nowrap}
.cr-lbl,.cr-val,.cr-btn{white-space:nowrap}
/* footer nabehne až keď je bar rozbalený, mizne hneď */
.app.unpinned .side:hover .side-foot{transition:opacity .2s var(--ease) .16s}

/* collapsed (unpinned, not hovered): icons only — heights stay constant, no jump */
.app.unpinned .side:not(:hover) .s-logo{opacity:0}
.app.unpinned .side:not(:hover) .s-logo-mini{opacity:1}
.app.unpinned .side:not(:hover) .s-pin{display:none}
.app.unpinned .side:not(:hover) .sp-nm,
.app.unpinned .side:not(:hover) .sp-rl{opacity:0}
.app.unpinned .side:not(:hover) .sp-gear{opacity:0}
.app.unpinned .side:not(:hover) .nav-item{font-size:0}
.app.unpinned .side:not(:hover) .nav-item .count{display:none}
.app.unpinned .side:not(:hover) .nav-sec{font-size:0}
.app.unpinned .side:not(:hover) .grp-chev{display:none}
.app.unpinned .side:not(:hover) .nav-children{grid-template-rows:0fr!important}
.app.unpinned .side:not(:hover) .side-foot{opacity:0;pointer-events:none}
/* collapsed: smaller profile avatar — fixed wrap height keeps content from jumping, smooth transition */
.sp-avwrap{height:56px;display:flex;align-items:center;justify-content:center}
.sp-av{transition:width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1),font-size .3s cubic-bezier(.4,0,.2,1)}
.app.unpinned .side:not(:hover) .sp-av{width:38px;height:38px;font-size:13px}

/* ===== lighter menu weights — one step down everywhere ===== */
.sp-av{font-weight:600}
.sp-nm{font-weight:600}
.nav-sec{font-weight:600}
.nav-item{font-weight:500}
.nav-item.active{font-weight:600}
.nav-item .count{font-weight:600}
.nav-child{font-weight:400}
.nav-child.active{font-weight:500}
.cr-lbl{font-weight:500}
.cr-val{font-weight:700}
.cr-btn{font-weight:600}

/* mobile: sidebar hidden (<=820 via app media) -> remove fixed-sidebar gutter so content is full width */
@media(max-width:820px){.app,.app.unpinned{padding-left:0!important}}