/* More Fun Admin — Adaptive deep editor container
   Responsibility: editor viewport behavior only. No business/data styling. */

/* Desktop: deep forms use a wider scoped sheet for detailed administration. */
.drawer{
  width:min(760px,calc(100vw - var(--sidebar) - 36px));
}
.drawer-body{
  scrollbar-gutter:stable;
}
.drawer-head,.drawer-foot{
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(18px);
}
.drawer-head{position:sticky;top:0;z-index:3}
.drawer-foot{position:sticky;bottom:0;z-index:3}

/* Combo is structurally more complex than a normal sheet.
   Keep the existing domain/editor logic, but give it an independent work surface. */
#comboInlineEditor{
  position:fixed;
  z-index:46;
  top:78px;
  right:22px;
  bottom:18px;
  left:calc(var(--sidebar) + 22px);
  margin:0;
  padding:18px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  border-radius:20px;
  background:rgba(255,255,255,.985);
  box-shadow:0 22px 70px rgba(24,43,67,.20),0 0 0 1px rgba(30,52,78,.06);
}
#comboInlineEditor>.section-head{
  position:sticky;
  top:-18px;
  z-index:5;
  margin:-18px -18px 16px;
  padding:16px 18px 14px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
#comboInlineEditor .option-editor-list{max-width:1180px}
#comboInlineEditor .check-list{max-height:300px;overflow:auto;overscroll-behavior:contain}

@media(max-width:1180px){
  .drawer{width:min(78vw,720px)}
  #comboInlineEditor{left:calc(var(--sidebar) + 14px);right:14px;bottom:14px}
}

/* Tablet: operational shortcuts remain compact, but selecting complete settings opens
   the same detailed editor with almost the full available canvas. */
@media(max-width:1040px){
  .drawer{width:min(86vw,760px)}
  #comboInlineEditor{top:72px;left:14px;right:14px;bottom:14px;border-radius:18px}
  #comboInlineEditor .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #comboInlineEditor .field.full{grid-column:1/-1}
}

/* Mobile: complete capability remains available; deep editing becomes a dedicated full-screen task. */
@media(max-width:780px){
  .drawer{top:0;bottom:0;left:0;right:0;width:100%;border-left:0}
  .drawer-head{padding-top:calc(14px + env(safe-area-inset-top))}
  .drawer-body{padding:14px 14px 96px}
  .drawer-foot{padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr}
  .drawer-foot button{width:100%;min-height:48px}

  #comboInlineEditor{
    top:0;
    right:0;
    bottom:0;
    left:0;
    border:0;
    border-radius:0;
    padding:14px 14px calc(92px + env(safe-area-inset-bottom));
    box-shadow:none;
  }
  #comboInlineEditor>.section-head{
    top:-14px;
    margin:-14px -14px 14px;
    padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  }
  #comboInlineEditor>.section-head .actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:10px!important;overflow:visible!important}
  #comboInlineEditor>.section-head .actions button{min-height:48px!important;width:100%!important}
  #comboInlineEditor .form-grid{grid-template-columns:1fr}
  #comboInlineEditor .field.full{grid-column:auto}
  #comboInlineEditor .option-editor-card{border-radius:14px}
  #comboInlineEditor .check-list{max-height:38vh}
}