@import url('./reloop-app-brand-v1.css?v=2.1.0');

/* BLUEFLOW desktop sidebar full-height column fill v3
   Match the actual 272px desktop app grid exactly, then paint that full column
   for the entire page height in both light and dark themes. */
@media (min-width:901px){
  #app.app{
    --bf-sidebar-w:272px;
    position:relative!important;
    grid-template-columns:var(--bf-sidebar-w) minmax(0,1fr)!important;
    min-height:calc(100dvh - var(--bf-topbar-h,36px))!important;
    background:#f6faff!important;
    isolation:isolate;
  }

  #app.app::before{
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    top:0;
    bottom:0;
    width:var(--bf-sidebar-w);
    background:#fff;
    border-right:1px solid #dce8f5;
    pointer-events:none;
  }

  #app.app>.side{
    position:sticky!important;
    z-index:1000!important;
    width:var(--bf-sidebar-w)!important;
    min-width:var(--bf-sidebar-w)!important;
    background:#fff!important;
    border-right-color:#dce8f5!important;
  }

  #app.app>.main{
    position:relative;
    z-index:1;
    min-width:0!important;
    min-height:calc(100dvh - var(--bf-topbar-h,36px))!important;
    background:#f6faff!important;
  }

  html[data-theme="dark"] #app.app{
    background:#09111d!important;
  }

  html[data-theme="dark"] #app.app::before{
    background:#0d1724!important;
    border-right-color:#25394d!important;
  }

  html[data-theme="dark"] #app.app>.side{
    background:#0d1724!important;
    border-right-color:#25394d!important;
  }

  html[data-theme="dark"] #app.app>.main{
    background:#09111d!important;
  }
}