/*
 * dialogs.css — the presentation for dialogs.js and its browsers.
 *
 * Extracted from demo.html so that view.html can use the same dialogs without
 * a second copy of these rules. Two copies of one stylesheet drift exactly the
 * way two copies of one table do, and this project keeps checkers for that.
 *
 * Everything here is expressed through CSS variables, so a page supplies its
 * own palette: demo.html is light, view.html is dark. The variables a host
 * must define are --panel, --line, --ink, --dim, --accent, --rel and --warn.
 */

  /* ---- dialog ---- */
  .udmf-dialog { background: var(--panel); border: 1px solid var(--line); max-width: 860px; }
  .udmf-title { font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #ebebe8; }
  .udmf-tabbar { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--line); background: #ebebe8; }
  .udmf-tab { border: 1px solid var(--line); border-bottom: 0; background: #dedeDA; padding: 4px 12px; cursor: pointer; }
  .udmf-tab-active { background: var(--panel); position: relative; top: 1px; }
  .udmf-pane { padding: 12px; }

  /* TWENTY-FOUR columns. UDB's group boxes are absolutely positioned, so a
     coarse grid rounds real geometry into gaps that are not there: on the
     sector Properties tab ` Heights ` and ` Sector damage ` sit 6px apart in a
     570px tab, and at twelve columns that 1% gap became a whole empty column.
     A group carries its own grid-column from fieldmodel's DIALOG_LAYOUT;
     span 24 fills the row. `align-items: start` keeps a short group from
     stretching to match a tall neighbour, which is what WinForms does. */
  .udmf-grid { display: grid; grid-template-columns: repeat(24, 1fr);
               gap: 0 8px; align-items: start; }
  /* `hidden` hides an element through the user agent's `display: none`, and an
     author rule beats the UA sheet — so the moment a pane also carries
     `.udmf-grid` it stays visible WHILE hidden, and every tab renders at once,
     stacked down the dialog. Restated here because the grid rule above is
     exactly what breaks it. */
  .udmf-pane[hidden] { display: none; }
  .udmf-grid > .udmf-group { min-width: 0; }

  /* The "Front side" / "Back side" checkbox above each sidedef pane. It spans
     the whole grid so the groups below start on their own row, as they do on
     UDB's form where it sits above the panel rather than inside it. */
  /* An uncaptioned box: UDB draws no frame or title around these, so neither
     do we — the spacing still comes from the grid cell it occupies. */
  .udmf-group-bare { border: 0; padding: 0; margin: 0; }

  /* The controls of a multi-field row sit side by side under its one caption —
     UDB's PairedFieldsControl is two boxes on one line, not two rows. */
  .udmf-rowfields { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .udmf-rowfields > * { flex: 1 1 0; min-width: 0; }

  .udmf-sidetoggle { grid-column: 1 / -1; display: flex; align-items: center;
                     gap: 6px; margin: 0 0 6px; color: var(--ink); }
  .udmf-sidetoggle input { margin: 0; }

  /* UDB disables the whole panel when the line has no sidedef on that side
     (frontgroup.Enabled = false). Disabled, not hidden: the tab stays, which
     is how you can see that the side is absent. */
  .udmf-pane-disabled > .udmf-group { opacity: .45; pointer-events: none; }
  .udmf-group { border: 1px solid var(--line); margin: 0 0 12px; padding: 8px 10px 10px; }
  .udmf-group legend { padding: 0 4px; color: var(--dim); font-weight: 600; }
  /* UDB sizes a group's label column to its WIDEST LABEL and right-aligns the
     labels into it. That is not a guess: in every group on the four forms the
     labels share a right edge and vary on the left — ` Ceiling `'s seven sit
     at x 26/32/37/63/47/56/44 and all end at 106, with the controls at 110.
     ` Position `'s end at 26 with its controls at 32, ` Sector damage `'s at
     84 with controls at 90.

     So the column is max-content over the group rather than one constant. The
     190px that used to be here was this project's own invention and it
     swallowed narrow groups whole: on the thing's Properties tab ` Position `
     (span 7 of 24) rendered X / Y / Z as 12-pixel input boxes, with the
     values correct and invisible.

     The rows are `display: contents` so that every row in a group shares that
     one column and the labels line up, which is what a fixed width was doing
     for them before. */
  .udmf-fields { display: grid; grid-template-columns: max-content 1fr;
                 gap: 4px 8px; align-items: center; }
  .udmf-flaggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 12px; }
  .udmf-row { display: contents; }
  /* A control UDB draws with no Label of its own — the thing type browser, the
     texture pickers, the comment box — takes the whole width. */
  .udmf-row > :only-child { grid-column: 1 / -1; }
  /* And anything appended straight into the body rather than as a row: a flag
     checkbox captions itself, so it has no label column to sit in. */
  .udmf-fields > :not(.udmf-row) { grid-column: 1 / -1; }
  .udmf-label { color: var(--ink); text-align: right; }
  .udmf-input { padding: 2px 5px; border: 1px solid var(--line); background: #fff; width: 100%; }
  textarea.udmf-input { min-height: 90px; resize: vertical; }
  .udmf-mixed { background: #fbfbf6; }
  .udmf-relative { color: var(--rel); font-weight: 600; }
  .udmf-numeric { display: flex; gap: 2px; }
  .udmf-spin { width: 22px; border: 1px solid var(--line); background: #f0f0ec; cursor: pointer; }
  .udmf-select { padding: 2px 4px; border: 1px solid var(--line); background: #fff; width: 100%; }
  .udmf-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
  .udmf-browseface { width: 100%; text-align: left; padding: 3px 6px; border: 1px solid var(--line);
                     background: #fff; cursor: pointer; font-family: ui-monospace, Menlo, monospace; }
  .udmf-unused { opacity: .45; }
  .udmf-unknown { border-color: var(--warn); }
  .udmf-note { margin: 8px 0 0; color: var(--dim); }
  .udmf-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px;
                 border-top: 1px solid var(--line); background: #ebebe8; }
  .udmf-ok, .udmf-cancel { padding: 4px 18px; border: 1px solid var(--line); background: #f0f0ec; cursor: pointer; }
  .udmf-ok { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* ---- browser window ----
     A floating window rather than a full-screen modal backdrop: two of these
     have to be able to overlap so the one underneath can be seen and clicked.
     `windows.js` owns the z-index and the cascade offset, so neither is set
     here — a fixed z-index in CSS is exactly what stopped them stacking. */
  /* No `transform: translateX(-50%)` for centring: windows.js sets `left` in
     PIXELS to cascade, and a percentage transform on top of that pulls each
     window half its own width to the left — straight off screen for the first
     one. The cascade origin is passed in by the caller instead. */
  .udmf-modalback { position: fixed; display: flex; max-height: 84vh; }
  .udmf-window { box-shadow: 0 10px 40px rgba(0,0,0,.45); }
  /* The height is bounded on the WINDOW, not just the inner panel: the window
     is what the cascade moves, so a panel sized to 80vh inside a window
     already offset 100px down runs off the bottom of the screen. */
  .udmf-modal { background: var(--panel); border: 1px solid var(--line); width: min(560px, 92vw);
                max-height: 100%; display: flex; flex-direction: column; padding: 0 0 10px;
                min-height: 0; }
  /* The title doubles as the drag handle, so it needs to read as one. */
  .udmf-modalback .udmf-title { user-select: none; }
  .udmf-modal .udmf-input { margin: 10px; width: calc(100% - 20px); }
  .udmf-list { overflow: auto; border-top: 1px solid var(--line); }
  .udmf-cat { padding: 4px 10px; background: #ebebe8; color: var(--dim); font-weight: 600; position: sticky; top: 0; }
  /* `color: var(--ink)` is not decoration. This is a <button>, and a button
     does NOT inherit `color` from its container — it takes the user agent's
     own, which is black. With a light palette that happened to look right; on
     view.html's dark one it is black text on a #2b2b2b panel, i.e. invisible.
     Every other control here sets its colour explicitly, and this one was the
     single omission. */
  .udmf-item { display: flex; gap: 10px; width: 100%; text-align: left; border: 0;
               background: none; color: var(--ink); font: inherit;
               padding: 4px 10px; cursor: pointer; }
  .udmf-item:hover { background: #eef3fb; }
  .udmf-itemid { color: var(--dim); min-width: 4em; font-variant-numeric: tabular-nums; }
  .udmf-modal .udmf-cancel { margin: 10px 10px 0; align-self: flex-end; }

  /* ---- the Game Configurations dialog (configform.js) ----
     UDB's ConfigForm is 795x415 with a 259px list on the left and a 506px tab
     control on the right (ConfigForm.Designer.cs:277-288), and those two
     numbers are the only geometry worth carrying: everything inside the tabs is
     a stack of captioned rows, which is what the derived table already says. */
  .udmf-configform { width: min(860px, 96vw); max-width: none; }
  .udmf-configbody { display: grid; grid-template-columns: 259px 1fr; gap: 0;
                     align-items: stretch; }
  .udmf-configlist { border-right: 1px solid var(--line); overflow: auto;
                     min-height: 360px; max-height: 60vh; }
  .udmf-configright { min-width: 0; display: flex; flex-direction: column; }
  .udmf-configright .udmf-pane { overflow: auto; max-height: 60vh; }

  .udmf-configitem { display: flex; align-items: center; gap: 6px;
                     padding: 3px 8px; cursor: pointer; }
  .udmf-configitem:hover { background: rgba(127,127,127,.12); }
  .udmf-configitem.udmf-selected { background: var(--accent); color: #fff; }
  /* `lvi.ForeColor = InactiveCaptionText` for an unchecked configuration
     (ConfigForm.cs:73) — dimmed, still listed, still selectable. */
  .udmf-configoff .udmf-configname { color: var(--dim); }
  .udmf-configname { flex: 1 1 auto; min-width: 0; overflow: hidden;
                     text-overflow: ellipsis; white-space: nowrap; }

  /* The right-hand side is disabled until a configuration is selected
     (`tabs.Enabled = false`, ConfigForm.Designer.cs:282). Disabled, not hidden,
     so the five tabs are visible and inert — the same rule the linedef form's
     absent-sidedef pane follows. */
  .udmf-configright.udmf-pane-disabled { opacity: .45; pointer-events: none; }

  .udmf-note { color: var(--dim); margin: 0 0 10px; line-height: 1.35;
               white-space: pre-wrap; }

  /* The resource list. UDB's is a ListView in Details view with one column,
     "Resource location" (ResourceListEditor.Designer.cs:199). */
  .udmf-reslist { border: 1px solid var(--line); min-height: 150px;
                  max-height: 240px; overflow: auto; margin: 0 0 8px; }
  .udmf-resitem { display: flex; align-items: center; gap: 8px; padding: 3px 6px;
                  cursor: pointer; }
  .udmf-resitem:hover { background: rgba(127,127,127,.12); }
  .udmf-resitem.udmf-selected { background: var(--accent); color: #fff; }
  .udmf-restype { flex: 0 0 auto; width: 2.4em; text-align: center;
                  border: 1px solid var(--line); border-radius: 2px;
                  font-size: 11px; color: var(--dim); }
  .udmf-resloc { flex: 1 1 auto; min-width: 0; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
  .udmf-resnote, .udmf-resflag { flex: 0 0 auto; font-size: 11px; color: var(--dim); }
  /* UDB's own MistyRose, and only for the one state that means what UDB's
     `IsValid() == false` means: granted, and gone. */
  .udmf-resbad { background: #ffe4e1; color: #000; }
  .udmf-resunknown .udmf-resnote { color: var(--warn); }
  .udmf-grant { margin-left: 4px; padding: 0 6px; font-size: 11px; }

  .udmf-resbuttons { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
  .udmf-btn { padding: 3px 10px; }
  .udmf-btn:disabled { opacity: .5; }

  .udmf-setlist, .udmf-modelist { border: 1px solid var(--line); min-height: 140px;
                                  max-height: 220px; overflow: auto; margin: 0 0 8px; }
  .udmf-setitem, .udmf-modeitem { display: flex; align-items: center; gap: 8px;
                                  padding: 3px 6px; cursor: pointer; }
  .udmf-setitem:hover, .udmf-modeitem:hover { background: rgba(127,127,127,.12); }
  .udmf-setitem.udmf-selected { background: var(--accent); color: #fff; }
  .udmf-setname, .udmf-modename { flex: 1 1 auto; min-width: 0; }
  .udmf-setcount, .udmf-modeplugin { flex: 0 0 auto; font-size: 11px; color: var(--dim); }
  /* `lvi.ForeColor = GrayText; lvi.BackColor = InactiveBorder` for a mode this
     configuration's map format cannot use (ConfigForm.cs:214-216). */
  .udmf-modeoff { opacity: .5; }

  .udmf-buttons { display: flex; justify-content: flex-end; gap: 8px;
                  padding: 10px 12px; border-top: 1px solid var(--line); }
  .udmf-error { margin: 0 12px 8px; padding: 6px 8px; border: 1px solid var(--warn);
                color: var(--warn); }
  .udmf-configres { width: min(560px, 94vw); }

  /* `.udmf-row` is `display: contents` (line 79), because inside `.udmf-fields`
     it exists only to PAIR a label with a control in that two-column grid. On
     these two forms the rows are not in a grid, so `display: contents` dissolves
     every row into one long flow — "Engine:", "Application:" and "Skill Level:"
     all ended up on one line.

     WORSE, and this is the trap dialogs.css already restates once for
     `.udmf-pane`: an author `display` beats the user agent's `[hidden]`, so a
     hidden row STAYS VISIBLE. The Testing tab showed its Parameters box, both
     path checkboxes, the Result box AND the "cannot be displayed" label all at
     once, with "Customize parameters" unchecked — the visibility logic was
     running correctly and being ignored. Restated here for the same reason and
     with the same shape as line 35. */
  .udmf-configform .udmf-row,
  .udmf-configres .udmf-row { display: flex; align-items: baseline; gap: 8px;
                              margin: 0 0 8px; }
  .udmf-configform .udmf-row[hidden],
  .udmf-configres .udmf-row[hidden] { display: none; }
  .udmf-configform .udmf-check[hidden],
  .udmf-configres .udmf-check[hidden] { display: none; }
  .udmf-configform .udmf-note[hidden] { display: none; }
  /* UDB sizes a caption column to its widest label and right-aligns into it
     (MainForm's forms do this throughout); these two forms have one column of
     captions per tab, so one width serves. */
  .udmf-configform .udmf-row > .udmf-label,
  .udmf-configres .udmf-row > .udmf-label { flex: 0 0 11em; text-align: right; }
  .udmf-configform .udmf-row > select,
  .udmf-configform .udmf-row > input[type=text],
  .udmf-configform .udmf-row > textarea { flex: 1 1 auto; min-width: 0; }
  .udmf-configres .udmf-row input[type=text] { flex: 1 1 auto; min-width: 0; }
  /* The engine row's two buttons sit against the combo, not stretched. */
  .udmf-configform .udmf-row > .udmf-btn,
  .udmf-configform .udmf-row > .udmf-browse { flex: 0 0 auto; }
  .udmf-check { display: flex; align-items: center; gap: 6px; margin: 0 12px 8px; }
  .udmf-browse { flex: 0 0 auto; padding: 0 8px; }

  .udmf-ctxmenu { position: fixed; z-index: 400; background: var(--panel);
                  border: 1px solid var(--line); padding: 2px 0;
                  box-shadow: 0 2px 8px rgba(0,0,0,.3); }
  .udmf-ctxitem { display: block; width: 100%; text-align: left; border: 0;
                  background: none; padding: 4px 18px 4px 12px; cursor: pointer;
                  color: inherit; font: inherit; }
  .udmf-ctxitem:hover:not(:disabled) { background: var(--accent); color: #fff; }
  .udmf-ctxitem:disabled { color: var(--dim); cursor: default; }

  /* The ledger's "not implemented yet" affordance, same name and same meaning
     as the chrome's `-todo` classes in menus.css: dimmed, and inert. Used here
     on the Nodebuilder tab (no nodebuilder is registered), the Browse button on
     the Testing tab (a browser is never told a file's path) and the two
     texture-set import/export buttons. */
  .udmf-todo { color: var(--dim); }
  .udmf-todo:disabled { opacity: .5; }

/* ---------------------------------------------------------- texture browser
 * The window is `windows.js`'s, so only the browser's own parts are here, and
 * everything goes through this sheet's variables — demo.html is light and
 * view.html is dark, and a hardcoded palette here would be legible in exactly
 * one of them.
 *
 * The one colour set in SCRIPT is the used-item orange (ImageBrowserItem.cs:96,
 * `fgbrush_used = Brushes.Orange`), because it is the piece of UDB's drawing
 * that carries meaning rather than style. Unused items inherit the theme's own
 * text colour, which is what UDB does too outside its dark theme
 * (`fgbrush_unused = SystemBrushes.ControlText`, :121).
 */
.udmf-texbrowser { width: min(760px, 92vw); }
.udmf-texbar { display: flex; gap: 10px; align-items: center; margin: 0 10px 6px; }
.udmf-texbar .udmf-input { flex: 1 1 auto; margin: 0; width: auto; }
.udmf-texused { font-size: 11px; color: var(--dim); white-space: nowrap;
                display: flex; align-items: center; gap: 4px; }
.udmf-texheading { font-size: 11px; color: var(--dim); margin: 0 10px 6px; }
.udmf-texbody { overflow: auto; border-top: 1px solid var(--line);
                border-bottom: 1px solid var(--line); padding: 6px 10px; min-height: 0; }
.udmf-texgroup { font-size: 11px; color: var(--dim); letter-spacing: 0.06em;
                 margin: 8px 0 4px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.udmf-texgrid { display: flex; flex-wrap: wrap; gap: 6px; }
.udmf-textile { width: 84px; padding: 2px; border: 1px solid transparent;
                cursor: pointer; text-align: center; }
.udmf-textile:hover { border-color: var(--line); }
.udmf-textile.sel { border-color: var(--accent); }
.udmf-textile canvas { display: block; image-rendering: pixelated; }
.udmf-texname { font-size: 10px; color: var(--ink); overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.udmf-texempty { color: var(--dim); font-size: 12px; padding: 12px; }

/* ------------------------------------------------------------ script editor
 * The highlight is a <pre> behind a transparent <textarea>; the two MUST share
 * every metric or the caret drifts from the colouring. Token colours are this
 * page's — UDB's are Scintilla's and are not in the source we have.
 */
.udmf-scripted { width: min(820px, 94vw); }
.udmf-scriptwrap { position: relative; margin: 0 10px; height: 46vh; min-height: 180px; }
.udmf-scripthl, .udmf-scriptta {
  position: absolute; inset: 0; margin: 0; padding: 6px; border: 1px solid var(--line);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre; overflow: auto; tab-size: 4; }
.udmf-scripthl { background: var(--panel); color: var(--ink); pointer-events: none; }
.udmf-scriptta { background: transparent; color: transparent; caret-color: var(--ink);
                 resize: none; outline: none; }
.udmf-tok-keyword  { color: #7cb0ff; font-weight: 600; }
.udmf-tok-property { color: #c792ea; }
.udmf-tok-constant { color: #d0a05a; }
.udmf-tok-string   { color: #98c379; }
.udmf-tok-number   { color: #d19a66; }
.udmf-tok-comment  { color: #6a7a6a; font-style: italic; }
.udmf-scripterrors { margin: 6px 10px 0; max-height: 96px; overflow: auto;
                     font: 11px/1.5 ui-monospace, Menlo, monospace; color: var(--warn); }
.udmf-scripterr { cursor: pointer; }
.udmf-scripterr:hover { text-decoration: underline; }
.udmf-scriptstatus { flex: 1 1 auto; font-size: 11px; color: var(--dim); align-self: center; }

/* -------------------------------------------------------------- fit textures
 * `Plugins/BuilderModes/Interface/FitTexturesForm.Designer.cs` is NOT part of
 * dialogparity.js's derivation — `fieldmodel.js`'s own header names the four
 * Core/Windows forms that pipeline covers, and this one lives elsewhere — so
 * it is hand-built, the same standing `.udmf-modal` already has for
 * `confirmThree`. What is ported is the STRUCTURE the Designer's
 * `Controls.Add` calls describe: two group boxes in that order ("Options",
 * then "Texture Repeating"), each a row pairing a checkbox/label with a field
 * beside it — not the absolute WinForms pixel coordinates, which this flow
 * layout does not attempt to reproduce.
 */
.udmf-fittex .udmf-modal { width: min(300px, 92vw); }
.udmf-fittex-body { padding: 10px 12px 0; }
.udmf-fittex-row { display: flex; align-items: center; justify-content: space-between;
                   gap: 10px; margin: 0 0 6px; }
.udmf-fittex-pattern { display: flex; align-items: center; gap: 4px; }
.udmf-fittex-pattern .udmf-label { white-space: nowrap; }
.udmf-fittex-pattern .udmf-input { width: 4.5em; margin: 0; }
.udmf-fittex-reset { width: 22px; height: 22px; border: 1px solid var(--line);
                     background: #f0f0ec; cursor: pointer; }
/* Overrides `.udmf-modal .udmf-cancel`'s bottom-of-column placement — that
   rule is confirmThree's, for a Cancel button with no footer row around it. */
.udmf-fittex .udmf-footer .udmf-cancel { margin: 0; align-self: auto; }
.udmf-fittex .udmf-disabled { opacity: .45; }
.udmf-fittex fieldset.udmf-group:disabled { opacity: .45; }