/* app_factory's own rules, linked after app.css by templates/base.html (both shared
   with fastapi_scaffolding byte-for-byte — see the `manifest` skill's
   references/extension_points.md). */

/* The form's line length. Capped rather than full-bleed (a form is read line by
   line), but generously: these forms are two columns of labelled inputs, not prose,
   so the shared 760px left each column near 370px — too narrow for the manifest tables' names
   and queries. */
.pt-panel { max-width: 1180px; }

/* The Clarify walker's dialog. A RULE rather than the inline style it used to be,
   because one of its stages needs to be wider than the rest: the shell is rendered
   once and kept for the life of the dialog, so a stage that wants another size can
   only ask for it from the inside — and an inline style is the one thing a stage's
   own rule cannot outrank, whatever its specificity.
   See _clarify_incorporate_review.html, which widens it to fill the window. */
.modal-clarify { max-width: 920px; }

/* ------ generation review: the tree tab (generate_manifest_tree.html) --------
   The review modal renders the app's OWN hierarchy view over a manifest generation
   that has not been saved (ui/tree_preview_routes.py), so everything below the pane
   is styled by the .pt-* block in app.css and nothing is restated here. What IS needed is
   the two ways an embedded tree differs from the page: it is sized by its flex parent
   rather than by the viewport, and it has no shell around it. */
.gm-tree {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 6px;
}
/* the page version is `calc(100dvh - 3.25rem)`, which inside a modal is a scrollbar */
.gm-tree .pt-page.pt-preview { height: auto; flex: 1 1 auto; min-height: 0; }
.gm-tree .pt-tree { background: transparent; }
.gm-tree .pt-detail { padding: .75rem 1rem; }

/* Problems found reading the generation — the reasons behind the modal's "did not
   pass dry-run validation" banner, which has never shown them. */
.gm-problems {
  border: 1px solid var(--bs-warning, #e0a800); border-radius: 6px;
  padding: .5rem .65rem; margin: 0 0 .55rem; font-size: 12.5px;
  max-height: 9rem; overflow: auto; flex: 0 0 auto;
}
.gm-problems.fatal { border-color: var(--bs-danger, #da292e); }
.gm-problems strong { display: flex; align-items: center; gap: .4rem; }
.gm-problems strong i, .gm-problems strong svg { width: 15px; height: 15px; }
.gm-problems ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.gm-problems li { margin: .12rem 0; }
.gm-empty { padding: 1rem .6rem; font-size: 13px; }
/* Tree tab: the form is reduced to its footer, so it must not keep the textarea's
   share of the modal body. */
.gm-form-collapsed { flex: 0 0 auto !important; }
/* The Plain tab's ACE pane. data-fill sizes the editor from THIS box, so it needs a
   definite height of its own — which it gets by being the form's growing child. */
.gm-code-pane { flex: 1 1 auto; min-height: 0; }
.gm-code-pane > .ace-editor { min-height: 0; height: 100%; }

/* ------ generation review: the diagram tab (generate_manifest_diagram.html) ---
   The ER diagram over a manifest generation that has not been saved. Mermaid draws
   the SVG and is themed through themeVariables at init rather than from here, so
   what this block owns is the frame around it: the pane (sized by its flex parent,
   exactly like .gm-tree beside it), the toolbar, and the canvas that pans and zooms
   the rendered SVG as one transformed stage. */
.gm-diagram {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 6px;
}
.gm-erd { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.gm-erd-toolbar {
  display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; flex-wrap: wrap;
  padding: .35rem .5rem; border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
}
.gm-erd-spacer { flex: 1 1 auto; }
.gm-erd-stats { font-size: 12.5px; white-space: nowrap; }
/* The viewport. overflow:hidden rather than auto: this scrolls by dragging, and a
   scrollbar would fight the pointer capture for the same gesture. */
.gm-erd-canvas {
  flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden;
  cursor: grab; touch-action: none; background: var(--surface);
}
.gm-erd-canvas.is-panning { cursor: grabbing; }
.gm-erd-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.gm-erd-stage svg { display: block; max-width: none; }
.gm-erd-status {
  flex: 0 0 auto; display: flex; align-items: center; gap: .4rem;
  padding: .4rem .6rem; font-size: 12.5px;
  border-top: 1px solid var(--outline-variant);
}
/* A table's box is a link into the Tree tab (gmErd.wireEntities). Only boxes that
   HAVE a node to open get the class, so an entity drawn for a relation that leaves
   the project stays visibly inert. */
.gm-erd-clickable { cursor: pointer; }
.gm-erd-clickable:hover rect.entityBox,
.gm-erd-clickable:focus-visible rect.entityBox { stroke: var(--primary); stroke-width: 2px; }
.gm-erd-clickable:focus { outline: none; }
.gm-erd-hint { font-size: 12.5px; display: inline-flex; align-items: center; gap: .3rem; }
.gm-erd-hint i, .gm-erd-hint svg { width: 14px; height: 14px; }
/* The diagram's schema filter: the house dropdown (.actions-menu) holding checkboxes.
   Two departures from a menu of actions — it opens to the RIGHT, because it sits at
   the left end of the toolbar and the shared panel is right-anchored, and its items
   are labels, which do not come with a button's pointer. */
.gm-erd-filter .actions-menu-panel { left: 0; right: auto; }
.gm-erd-filter label.actions-menu-item { cursor: pointer; }
.gm-erd-filter .checkbox { flex: 0 0 auto; }
/* Every schema unticked: the canvas is legitimately empty, and says so rather than
   looking like a diagram that failed to draw. */
.gm-erd-blank {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: .45rem; font-size: 13px; pointer-events: none;
}
.gm-erd-blank i, .gm-erd-blank svg { width: 16px; height: 16px; }

/* The warning beside app.css's .flash.error / .flash.success: the projects screens'
   block notices (a stale generation, a share that cannot reach anyone). DaisyUI's
   alert is not in the build's include list. */
.flash.warning { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--on-surface); }