/* Fixed full-height diagram viewer. */
.diagram-card .viewer-controls button,
.diagram-card .viewer-controls output,
.diagram-card .viewer-hint{
  display:none!important;
}

@media(min-width:1001px){
  .result-grid{align-items:start}
  .diagram-card{
    position:sticky;
    top:82px;
    height:calc(100vh - 98px);
    min-height:560px;
    display:flex;
    flex-direction:column;
  }
  .diagram-card .diagram-canvas{
    flex:1 1 auto;
    width:100%;
    height:auto;
    min-height:0;
    padding:10px;
    overflow:hidden;
    cursor:default!important;
    touch-action:auto;
  }
  .diagram-card .diagram-stage{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    margin:0!important;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:none!important;
  }
  .diagram-card .diagram-stage>img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain;
  }
}

@media(max-width:1000px){
  .diagram-card{position:static;height:auto}
  .diagram-card .diagram-stage{width:100%!important;max-width:100%!important;transform:none!important}
  .diagram-card .diagram-stage>img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain}
}

/* Order list controls. */
.agga-order-list-button{
  min-height:38px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid #ffffff35;
  background:#fff;
  color:#151718;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
}
.agga-order-list-button:hover{border-color:var(--red);color:var(--red)}
.agga-order-list-button b{min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:12px;font-size:11px}

.table-wrap th.agga-order-column,
.table-wrap td.agga-order-column{text-align:center;width:104px}
.agga-order-add{
  min-width:82px;
  min-height:31px;
  padding:0 8px;
  border:1px solid var(--red);
  background:var(--red);
  color:#fff;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  cursor:pointer;
}
.agga-order-add:hover{background:#c93e2a;border-color:#c93e2a}
.agga-order-add.is-added{background:#eef7f1;border-color:#2e8b59;color:#247347}

.agga-order-overlay{
  position:fixed;
  z-index:10000;
  inset:0;
  display:flex;
  justify-content:flex-end;
  background:rgba(9,15,18,.62);
}
.agga-order-overlay[hidden]{display:none}
.agga-order-panel{
  width:min(520px,100%);
  height:100%;
  display:flex;
  flex-direction:column;
  background:#f5f6f4;
  box-shadow:-18px 0 50px rgba(0,0,0,.24);
}
.agga-order-head{min-height:78px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#181a1b;color:#fff;border-bottom:4px solid var(--red)}
.agga-order-head h2{margin:0;font-size:21px;text-transform:uppercase}
.agga-order-close{width:40px;height:40px;border:1px solid #ffffff42;background:transparent;color:#fff;font-size:26px;cursor:pointer}
.agga-order-items{flex:1;overflow:auto;padding:16px 18px}
.agga-order-empty{padding:60px 22px;text-align:center;color:#717778;line-height:1.5}
.agga-order-item{margin-bottom:10px;padding:15px;display:grid;grid-template-columns:minmax(0,1fr) 92px 34px;gap:12px;align-items:center;background:#fff;border:1px solid #d9dcdd}
.agga-order-item strong{display:block;color:#151718;font-family:monospace;font-size:14px}
.agga-order-item p{margin:4px 0;color:#383d3e;font-size:12px;line-height:1.4}
.agga-order-item small{display:block;color:#808687;font-size:10px;line-height:1.35}
.agga-order-qty span{display:block;margin-bottom:5px;color:#858a8b;font-size:9px;font-weight:800;text-transform:uppercase}
.agga-order-qty input{width:100%;height:38px;padding:0 7px;border:1px solid #c7cbcc;background:#fff;text-align:center;font-weight:800}
.agga-order-remove{width:34px;height:34px;border:0;background:#eceeed;color:#6a7071;font-size:20px;cursor:pointer}
.agga-order-remove:hover{background:#ffe4df;color:var(--red)}
.agga-order-footer{padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:10px;border-top:1px solid #d9dcdd;background:#fff}
.agga-order-copy,.agga-order-clear{min-height:46px;padding:0 16px;border:0;font-size:11px;font-weight:900;text-transform:uppercase;cursor:pointer}
.agga-order-copy{background:var(--red);color:#fff}
.agga-order-copy:hover{background:#c93e2a}
.agga-order-clear{background:#eceeed;color:#555b5c}
.agga-order-notice{grid-column:1/-1;margin:0;color:#247347;font-size:11px;text-align:center}

@media(max-width:680px){
  .topbar{gap:10px}
  .agga-order-list-button{margin-left:auto;padding:0 9px;font-size:9px}
  .topbar-meta{display:none}
  .table-wrap table{min-width:730px}
  .agga-order-item{grid-template-columns:minmax(0,1fr) 76px 34px;padding:12px;gap:8px}
  .agga-order-footer{grid-template-columns:1fr}
}