/* ═══════════════════════════════════════════════
   SmartFinca Sidebar-Toggle — SAP BO Theme
   ═══════════════════════════════════════════════ */

:root{
  --sidebar-width: 260px;
  --sidebar-collapsed: 64px;
}

.app-sidebar{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: #1e293b;
  will-change: width;
  transition: width .25s ease, box-shadow .25s ease;
  box-shadow: 1px 0 0 rgba(255,255,255,.04);
  z-index: 1000;
}

.sidebar-toggle{
  margin-left: auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, transform .02s;
}

.sidebar-toggle:hover{
  background: rgba(255,255,255,.12);
}

.sidebar-toggle:focus-visible{
  outline: 2px solid rgba(59,130,246,.4);
  outline-offset: 1px;
}

.app-sidebar[data-state="open"]{
  transform: translateX(0);
  width: var(--sidebar-width);
}

.app-sidebar[data-state="collapsed"]{
  width: var(--sidebar-collapsed);
}

.app-sidebar[data-state="collapsed"] .label-text{ display: none; }
.app-sidebar .icon{ width: 18px; min-width: 18px; display: inline-grid; place-items: center; }

@media (max-width: 1024px){
  .app-sidebar{
    width: min(88vw, 300px);
    transform: translateX(-100%);
    transition: transform .25s ease, width .25s ease;
  }
  .app-sidebar[data-state="open"]{ transform: translateX(0); }
  body.sidebar-open{ overflow: hidden; }
  .backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 999;
  }
  .backdrop.show{ opacity: 1; pointer-events: auto; }
}