/* Tools drawer: framework panel adoption.
   Framework owns panel, backdrop, button, input, actions, and scroll primitives.
   Viewer owns Tools drawer placement, width, internal stack layout, and spacing. */

body.sp-app-shell.sv-viewer{
  --sv-tools-drawer-w:clamp(calc(var(--sp-4) * 16),26vw,calc(var(--sp-4) * 24));
  --sv-tools-gutter:var(--sp-4);
  --sv-tools-header-pad-block:var(--sp-3);
  --sv-tools-section-gap:var(--sp-5);
  --sv-tools-control-gap:var(--sp-3);
  --sv-tools-control-min-h:calc(var(--sp-10) + var(--sp-2));
  --sv-tools-inline-btn-min-w:calc(var(--sp-10) * 2);
}

#drawerBackdrop.sp-panel-backdrop.sv-drawerBackdrop{
  z-index:calc(var(--sp-layer-panel) - 1)!important;
  background:var(--sp-backdrop)!important;
  opacity:var(--sp-opacity-0)!important;
  pointer-events:none!important;
}

#drawerBackdrop.sp-panel-backdrop.sv-drawerBackdrop.is-open{
  opacity:var(--sp-opacity-100)!important;
  pointer-events:auto!important;
}

#toolDrawer.sv-drawer.sp-panel{
  --sp-panel-drawer-w:var(--sv-tools-drawer-w);
  position:fixed!important;
  inset:0 auto 0 0!important;
  width:min(var(--sp-panel-drawer-w),calc(100vw - var(--sp-3)))!important;
  max-width:calc(100vw - var(--sp-3))!important;
  height:var(--sp-shell-app-h,100dvh)!important;
  min-height:var(--sp-shell-app-h,100dvh)!important;
  display:flex!important;
  flex-direction:column!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  transform:translateX(-100%)!important;
  transition:transform var(--sp-duration-4) var(--sp-ease-standard)!important;
  z-index:var(--sp-layer-panel)!important;
  border-top:0!important;
  border-bottom:0!important;
  border-left:0!important;
  border-right:var(--sp-border-1)!important;
  border-radius:0!important;
  background:var(--sp-elev)!important;
  box-shadow:var(--sp-shadow-3)!important;
}

#toolDrawer.sv-drawer.sp-panel.is-open{
  transform:translateX(0)!important;
}

#toolDrawer .sp-panel__header.sv-drawerHeader{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:var(--sp-panel-gap)!important;
  padding-block:var(--sv-tools-header-pad-block)!important;
  padding-inline:var(--sv-tools-gutter)!important;
  border-bottom:var(--sp-border-1)!important;
  background:var(--sp-elev)!important;
}

#toolDrawer .sv-drawerHeader strong{
  font-size:var(--sp-fs-5)!important;
  line-height:var(--sp-lh-1)!important;
  font-weight:var(--sp-fw-bold)!important;
  letter-spacing:var(--sp-ls-tight-2)!important;
}

#toolDrawer .sp-panel__body.sv-drawerBody{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:var(--sv-tools-section-gap)!important;
  padding:var(--sv-tools-gutter)!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  background:transparent!important;
}

#toolDrawer .sv-drawerSection{
  display:flex!important;
  flex-direction:column!important;
  gap:var(--sv-tools-control-gap)!important;
  margin:0!important;
  padding:0!important;
}

#toolDrawer .sv-drawerSectionTitle{
  margin:0!important;
  color:var(--sp-muted)!important;
  font-size:var(--sp-fs-2)!important;
  line-height:var(--sp-lh-1)!important;
  font-weight:var(--sp-fw-bold)!important;
  letter-spacing:var(--sp-ls-loose)!important;
  text-transform:uppercase!important;
}

#toolDrawer .sv-drawerActionsStack,
#toolDrawer .sv-previewModes{
  display:flex!important;
  flex-direction:column!important;
  gap:var(--sv-tools-control-gap)!important;
}

#toolDrawer .sv-searchRow,
#toolDrawer .sv-publishRow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:var(--sv-tools-control-gap)!important;
  align-items:stretch!important;
}

#toolDrawer .sp-input{
  width:100%!important;
  min-height:var(--sv-tools-control-min-h)!important;
}

#toolDrawer .sv-drawerBody .sp-btn{
  width:100%!important;
  min-height:var(--sv-tools-control-min-h)!important;
}

#toolDrawer .sv-searchRow .sp-btn,
#toolDrawer .sv-publishRow .sp-btn{
  width:auto!important;
  min-width:var(--sv-tools-inline-btn-min-w)!important;
}

@media (max-width:52rem){
  body.sp-app-shell.sv-viewer{
    --sv-tools-drawer-w:min(78vw,calc(var(--sp-4) * 21));
  }

  #toolDrawer .sv-searchRow,
  #toolDrawer .sv-publishRow{
    grid-template-columns:minmax(0,1fr)!important;
  }

  #toolDrawer .sv-searchRow .sp-btn,
  #toolDrawer .sv-publishRow .sp-btn{
    width:100%!important;
    min-width:0!important;
  }
}

/* Tools filter row: keep input and Filter action inline.
   Framework owns sp-composer, sp-input, and sp-btn.
   Viewer owns this drawer-specific row behavior. */
body.sp-app-shell.sv-viewer{
  --sv-tools-filter-btn-min-w:calc(var(--sp-10) * 2);
}

#toolDrawer .sv-searchRow.sp-composer{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:stretch!important;
}

#toolDrawer .sv-searchRow .sp-input{
  min-width:0!important;
}

#toolDrawer .sv-searchRow .sp-btn{
  width:auto!important;
  min-width:var(--sv-tools-filter-btn-min-w)!important;
  padding-inline:var(--sp-4)!important;
  white-space:nowrap!important;
}

@media (max-width:52rem){
  #toolDrawer .sv-searchRow.sp-composer{
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  #toolDrawer .sv-searchRow .sp-btn{
    width:auto!important;
    min-width:var(--sv-tools-filter-btn-min-w)!important;
  }
}

/* Tools drawer compact Viewer sizing pass.
   Framework still owns panel/backdrop/buttons/input/composer primitives.
   Viewer only adjusts this drawer's size, rhythm, and responsive fit. */

body.sp-app-shell.sv-viewer{
  --sv-tools-drawer-w:clamp(calc(var(--sp-4) * 17),84vw,calc(var(--sp-4) * 22));
  --sv-tools-gutter:var(--sp-3);
  --sv-tools-header-pad-block:var(--sp-2);
  --sv-tools-section-gap:var(--sp-4);
  --sv-tools-control-gap:var(--sp-2);
  --sv-tools-control-min-h:calc(var(--sp-9) + var(--sp-1));
  --sv-tools-inline-btn-min-w:calc(var(--sp-10) + var(--sp-8));
}

#toolDrawer.sv-drawer.sp-panel{
  width:min(var(--sv-tools-drawer-w),calc(100vw - var(--sp-6)))!important;
  max-width:calc(100vw - var(--sp-6))!important;
}

#toolDrawer .sp-panel__header.sv-drawerHeader{
  padding-block:var(--sv-tools-header-pad-block)!important;
  padding-inline:var(--sv-tools-gutter)!important;
}

#toolDrawer .sp-panel__body.sv-drawerBody{
  gap:var(--sv-tools-section-gap)!important;
  padding:var(--sv-tools-gutter)!important;
}

#toolDrawer .sv-drawerSection,
#toolDrawer .sv-drawerActionsStack,
#toolDrawer .sv-previewModes{
  gap:var(--sv-tools-control-gap)!important;
}

#toolDrawer .sv-searchRow,
#toolDrawer .sv-publishRow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:var(--sv-tools-control-gap)!important;
  align-items:stretch!important;
}

#toolDrawer .sp-input,
#toolDrawer .sv-drawerBody .sp-btn{
  min-height:var(--sv-tools-control-min-h)!important;
}

#toolDrawer .sv-searchRow .sp-btn,
#toolDrawer .sv-publishRow .sp-btn{
  width:auto!important;
  min-width:var(--sv-tools-inline-btn-min-w)!important;
  padding-inline:var(--sp-3)!important;
}

@media (max-width:52rem){
  body.sp-app-shell.sv-viewer{
    --sv-tools-drawer-w:min(84vw,calc(var(--sp-4) * 22));
    --sv-tools-gutter:var(--sp-3);
    --sv-tools-section-gap:var(--sp-4);
    --sv-tools-control-gap:var(--sp-2);
  }

  #toolDrawer.sv-drawer.sp-panel{
    width:min(var(--sv-tools-drawer-w),calc(100vw - var(--sp-6)))!important;
    max-width:calc(100vw - var(--sp-6))!important;
  }

  #toolDrawer .sv-searchRow,
  #toolDrawer .sv-publishRow{
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  #toolDrawer .sv-searchRow .sp-btn,
  #toolDrawer .sv-publishRow .sp-btn{
    width:auto!important;
    min-width:var(--sv-tools-inline-btn-min-w)!important;
  }
}

/* Tools drawer mobile proportion override.
   Keeps the Framework drawer primitive; Viewer only controls this drawer's mobile size. */
@media (max-width:52rem){
  body.sp-app-shell.sv-viewer{
    --sv-tools-drawer-w:min(72vw,calc(var(--sp-4) * 20));
    --sv-tools-section-gap:var(--sp-4);
    --sv-tools-control-gap:var(--sp-2);
    --sv-tools-control-min-h:var(--sp-10);
    --sv-tools-inline-btn-min-w:calc(var(--sp-10) * 2.35);
  }

  #toolDrawer.sv-drawer.sp-panel{
    width:var(--sv-tools-drawer-w)!important;
    max-width:var(--sv-tools-drawer-w)!important;
  }

  #toolDrawer .sp-panel__body.sv-drawerBody{
    gap:var(--sv-tools-section-gap)!important;
  }

  #toolDrawer .sv-searchRow{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:var(--sv-tools-control-gap)!important;
  }

  #toolDrawer .sv-searchRow .sp-btn{
    width:auto!important;
    min-width:var(--sv-tools-inline-btn-min-w)!important;
  }
}

/* Tools drawer edit-mode locked state.
   Framework owns disabled styling; Viewer adds edit-mode intent only. */
#toolDrawer [data-sv-edit-only="true"]:disabled{
  opacity:var(--sp-opacity-40)!important;
}

body.sv-tools-edit-locked #toolDrawer [data-sv-edit-only="true"]{
  cursor:not-allowed!important;
}