/* dash-config.css — the widget configuration dialog (js/dash-widget-config.js).
 *
 * The dialog reuses dashboard-edit.js's own `.de10-cfg*` chrome so it is
 * visually the same object as the rest of the editor. Everything here is what
 * that chrome does not cover: the two-column layout, the live preview panel,
 * the AI button on a label, and the coded pickers behaving inside a dialog. */

/* Wider than the stock 600px form: a preview you cannot see the whole of is
   not a preview, and the controls read better in a column beside it. */
.de10-cfg.dwc { width: min(940px, 95vw); }

.dwc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 0;
  align-items: start;
}
.dwc-controls { padding-right: 20px; min-width: 0; }

/* ── The preview rail ─────────────────────────────────────────────────────
   Sticky, because the controls column is taller than the dialog and the whole
   point is to watch the numbers change while you change the query. */
.dwc-side {
  position: sticky; top: 0;
  border-left: 1px solid #e2e8f0;
  padding: 0 4px 0 20px;
  min-width: 0;
}
.dwc-side-lbl {
  font: 700 10px/1 "Inter", system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #94a3b8;
  margin-bottom: 10px;
}
.dwc-preview {
  border: 1px solid #e2e8f0; border-radius: 12px;
  background: #fff; padding: 14px;
  min-height: 190px;
  /* A widget renderer draws to the size of its box. Give it a real one, and
     clip rather than scroll — this is a picture of the widget, not the widget. */
  max-height: 300px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.dwc-preview > * { max-width: 100%; }

.dwc-empty {
  color: #94a3b8; font: 500 12px/1.5 "Inter", system-ui, sans-serif;
  text-align: center; padding: 24px 8px;
}

.dwc-facts {
  margin: 10px 0 0; color: #475569;
  font: 600 11.5px/1.45 "Inter", system-ui, sans-serif;
}
/* The honesty line: when the window outruns the snapshot, this says so rather
   than letting a floor masquerade as a total. Amber, not red — the number is
   useful, it is just not exact. */
.dwc-note {
  margin: 8px 0 0; padding: 9px 11px;
  border-radius: 9px; border: 1px solid #fde68a; background: #fffbeb;
  color: #92400e; font: 500 11px/1.5 "Inter", system-ui, sans-serif;
}
.dwc-asof {
  margin: 10px 0 0; color: #94a3b8;
  font: 500 10.5px/1.4 "Inter", system-ui, sans-serif;
}

/* ── Controls ─────────────────────────────────────────────────────────────
   The AI button sits ON the label, the way it does on every Work popup. */
.de10-cfg.dwc label.dwc-lbl {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dwc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dwc-split > div { min-width: 0; }
.dwc-static {
  margin: 0; color: #64748b;
  font: 500 12px/1.55 "Inter", system-ui, sans-serif;
}
/* A hidden row must not leave its label's margin behind. */
.de10-cfg.dwc [hidden] { display: none !important; }

/* The pickers were built for the Requests form, which is a page. In here the
   dialog owns the type scale, so match the other fields in the dialog. */
.de10-cfg.dwc .rq-pick { margin-bottom: 12px; }
.de10-cfg.dwc .rq-pick-trig { border-radius: 9px; }

/* ⚠️ `.de10-cfg` is z-index 99999. `.rq-pick-pop.is-unclipped` (css/browse.css)
   is 2600, which is above every page but far BELOW this dialog — so an
   unclipped menu opened in here rendered underneath the form it belongs to.
   js/pick-unclip.js sets the value inline; this is the backstop for the
   still-clipped case, and for anything that re-renders the popover. */
.de10-cfg.dwc .rq-pick.is-open { z-index: 100002; }
.de10-cfg.dwc .rq-pick-pop { z-index: 100002; }

@media (max-width: 860px) {
  .dwc-body { grid-template-columns: minmax(0, 1fr); }
  .dwc-controls { padding-right: 0; }
  .dwc-side {
    position: static; border-left: 0; border-top: 1px solid #e2e8f0;
    padding: 18px 0 0; margin-top: 6px;
  }
}