/*
 * menus.css — presentation for menus.js.
 *
 * Separate from dialogs.css for the same reason menus.js is separate from
 * dialogs.js, and expressed through the same CSS variables so a host page
 * supplies its own palette: --panel, --line, --ink, --dim, --accent.
 *
 * The geometry is a WinForms MenuStrip's: a 24px bar, dropdowns with a
 * left gutter wide enough for a check mark, and the shortcut text in a right
 * column that every row shares so the shortcuts line up.
 */

.udmf-menubar { display: flex; align-items: stretch; height: 24px;
                background: var(--panel); border-bottom: 1px solid var(--line);
                user-select: none; font: inherit; }

.udmf-menu-top { position: relative; display: flex; align-items: center;
                 padding: 0 9px; color: var(--ink); cursor: default;
                 white-space: nowrap; }
.udmf-menu-top:hover, .udmf-menu-open { background: var(--accent); color: #fff; }

/* An open dropdown must escape the 24px bar, so it is absolutely positioned
   and the bar does NOT clip its overflow. z-index sits below windows.js's
   WINDOW_Z_BASE of 100 — a floating window the user has raised belongs above
   the menu, and a menu opened over one closes on the click that opens it. */
.udmf-menu-panel { position: absolute; top: 100%; left: 0; z-index: 60;
                   min-width: 200px; padding: 2px 0;
                   background: var(--panel); border: 1px solid var(--line);
                   box-shadow: 0 6px 20px rgba(0,0,0,.45); }

/* The toolbar's own context menu (MainForm.Designer.cs:1354). The same panel as
   a menu-bar dropdown, but raised at the cursor rather than under a bar item —
   so it is fixed-positioned and menus.js sets the coordinates. */
.udmf-menu-panel.udmf-ctxmenu { position: fixed; top: auto; left: auto; }

/* A toolbar dropdown (split-button arrow or ToolStripDropDownButton) is raised
   the same way and for the same reason: `.udmf-toolbar` clips its own
   overflow-y on purpose (below), which would clip an ordinary `top: 100%`
   panel nested inside it just as it clips an overflowing row of buttons.
   `Toolbar._openDropdown` appends this to `document.body` and sets the
   coordinates from the anchor's own `getBoundingClientRect`. */
.udmf-menu-panel.udmf-menu-panel-floating { position: fixed; top: auto; left: auto; }

.udmf-menu-item { position: relative; display: grid;
                  grid-template-columns: 20px 1fr auto; align-items: center;
                  gap: 0 14px; padding: 3px 10px 3px 4px;
                  color: var(--ink); cursor: default; white-space: nowrap; }
.udmf-menu-item:hover { background: var(--accent); color: #fff; }
.udmf-menu-check { text-align: center; }
.udmf-menu-right { color: var(--dim); font-variant-numeric: tabular-nums; }
.udmf-menu-item:hover .udmf-menu-right { color: #dce6f3; }

/* `pointer-events: none` as well as the colour: a disabled row must not take
   the hover highlight either, or it looks live right up until it is clicked. */
.udmf-menu-disabled { color: var(--dim); pointer-events: none; }

/* Not a UDB state — an action this editor has not built yet. Distinct from
   disabled, which is UDB's own rule about when an action does not apply. */
/* A WWWDB ADDITION — an item UDB's menu does not have (HANDOFF 5d). Marked so
   it is never mistaken for parity when reading the bar. The dashed rule is the
   same visual language the page-only strip in `view.html` uses. */
.udmf-menu-addition .udmf-menu-text::after {
  content: '+'; margin-left: 6px; opacity: .55; font-size: 10px;
}
.udmf-menu-addition { border-left: 2px dashed #3a3a3a; }
.udmf-menu-todo { color: var(--dim); font-style: italic; }
.udmf-menu-todo .udmf-menu-right { opacity: .5; }

.udmf-menu-sep { height: 0; margin: 3px 2px 3px 24px;
                 border-top: 1px solid var(--line); }

/* Submenus are nested panels revealed on hover, so they follow their parent
   row without any positioning code. `top: -3px` lines the first child up with
   the parent row rather than with the panel's padded edge. */
.udmf-menu-sub { display: none; top: -3px; left: 100%; }
.udmf-menu-parent:hover > .udmf-menu-sub { display: block; }

/* The accelerator underline. Hidden until Alt is pressed, which is what
   menus.js decides — by then this is just how an underlined letter looks. */
.udmf-menu-text u { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------------------------------------------------------- modes toolbar
 *
 * `modestoolbar` — MainForm.Designer.cs:2763-2773. UDB's is a 30px-wide
 * ToolStrip docked to one side, holding image-only buttons and the group
 * separators between them.
 *
 * The width here is 30px ONLY in icon mode. Without UDB's PNGs the buttons
 * carry their mode's name as text and the strip has to be wide enough to read
 * — a stated divergence, confined to this widget, and reversed by handing
 * ModeToolbar an `icons` map. See the class comment in menus.js.
 */
.udmf-modebar { display: flex; flex-direction: column; align-items: stretch;
                width: 172px; flex: 0 0 auto; overflow-y: auto;
                padding: 2px 0; background: var(--panel);
                border-right: 1px solid var(--line);
                user-select: none; font: inherit; }
.udmf-modebar-icons { width: 30px; padding: 0 2px; }
/* DockersPosition == 0 puts this strip on the RIGHT (MainForm.cs:370). */
.udmf-modebar-right { border-right: 0; border-left: 1px solid var(--line); }

.udmf-modebtn { display: flex; align-items: center; gap: 6px;
                margin: 0; padding: 3px 8px;
                background: transparent; border: 1px solid transparent;
                color: var(--ink); font: inherit; text-align: left;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                cursor: default; }
.udmf-modebar-icons .udmf-modebtn { justify-content: center; padding: 2px 0; }
.udmf-modebtn img { width: 16px; height: 16px; }
.udmf-modebtn:hover { background: var(--accent); color: #fff; }
/* ToolStripButton.Checked — the mode you are in stays pressed. */
.udmf-modebtn-checked { background: var(--accent); color: #fff; }
/* The "not implemented yet" affordance, on an ICON.
   Dimming the COLOR is what greys a caption, and it does nothing at all to an
   image — so the moment UDB's own pictures went in, the twenty-one unbuilt
   modes and the thirty-odd unbuilt toolbar buttons became indistinguishable
   from the live ones. Greyscale plus a drop in opacity is the image's
   equivalent of the greyed caption, and it is applied to the same items by the
   same class, so the two can never disagree about which is which. */
.udmf-modebtn-todo { color: var(--dim); }
.udmf-modebtn-todo img { filter: grayscale(1); opacity: .4; }
.udmf-modebtn-todo:hover { background: transparent; color: var(--dim); }
.udmf-modebtn-todo:hover img { filter: grayscale(1); opacity: .4; }

/* AddEditModeSeperator gives each one Margin(0, 3, 0, 3) — MainForm.cs:2306. */
.udmf-modebar-sep { height: 0; margin: 3px 4px;
                    border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ main toolbar
 *
 * `toolbar` — MainForm.Designer.cs:1352-1412: a 25px-high ToolStrip under the
 * menu bar. Same icon story as the modes strip: without UDB's PNGs the buttons
 * carry their Text, so they are wider than UDB's 23px and the bar is taller.
 * Reversed by handing Toolbar an `icons` map.
 */
/* UDB's toolbar is ONE 25px row that CLIPS, with a ToolStrip overflow chevron
   (`AutoSize = false`, MainForm.Designer.cs:1352). Wrapping to six rows of
   text is further from that than scrolling one row, so it scrolls. */
.udmf-toolbar { display: flex; align-items: stretch; flex-wrap: nowrap;
                overflow-x: auto; overflow-y: hidden;
                min-height: 25px; padding: 1px 4px; gap: 1px;
                background: var(--panel); border-bottom: 1px solid var(--line);
                user-select: none; font: inherit; }
.udmf-toolbar-icons .udmf-tbtn { width: 23px; padding: 0; }

.udmf-tbtn { display: flex; align-items: center; justify-content: center;
             padding: 1px 7px; background: transparent;
             border: 1px solid transparent; color: var(--ink); font: inherit;
             white-space: nowrap; cursor: default; }
.udmf-tbtn img { width: 16px; height: 16px; }
.udmf-tbtn:hover { background: var(--accent); color: #fff; }
/* ToolStripButton.Checked — a pressed toggle, and the pressed member of the
   view-mode and merge-mode radio sets. */
.udmf-tbtn-checked { background: var(--accent); color: #fff; }
.udmf-tbtn-todo { color: var(--dim); }
.udmf-tbtn-todo img { filter: grayscale(1); opacity: .4; }
.udmf-tbtn-todo:hover { background: transparent; color: var(--dim); }
.udmf-tbtn-todo:hover img { filter: grayscale(1); opacity: .4; }
/* EditModeChanged disables both radio sets outside a classic mode. That is
   UDB's own disabled state rather than this project's unbuilt one, so it is a
   different class — but an image needs the same treatment to show it. */
.udmf-tbtn-disabled { color: var(--dim); opacity: .5; pointer-events: none; }
.udmf-tbtn-disabled img { filter: grayscale(1); }
/* A DisplayStyle = Text item shows a VALUE, so it reads as a field. */
.udmf-tbtn-value { border-color: var(--line); min-width: 110px;
                   justify-content: flex-start; }

.udmf-tsep { width: 0; margin: 2px 5px; border-left: 1px solid var(--line); }

/* A split button is a button and an arrow — ButtonClick fires the action, the
   arrow opens the alternatives (MainForm.Designer.cs:2077). */
.udmf-tsplit { position: relative; display: flex; align-items: stretch; }
.udmf-tarrow { padding: 0 3px; background: transparent;
               border: 1px solid transparent; border-left-color: var(--line);
               color: var(--dim); font: inherit; cursor: default; }
.udmf-tarrow:hover { background: var(--accent); color: #fff; }

/* A ToolStripDropDownButton (`thingfilters`, `linedefcolorpresets`) is ONE
   region — the whole button opens the dropdown, unlike the split button
   above, which has a separate arrow for that. */
.udmf-tdrop { position: relative; display: flex; }

/* -------------------------------------------------------------- status bar
 * `statusbar` — MainForm.Designer.cs:2249-2269, 23px along the bottom, with
 * `statuslabel` springing to take the slack (:2278). */
.udmf-statusbar { display: flex; align-items: center; height: 23px; gap: 2px;
                  padding: 0 6px; background: var(--panel);
                  border-top: 1px solid var(--line); color: var(--dim);
                  user-select: none; font: inherit; white-space: nowrap; }
/* Everything but the springing message keeps its natural width — UDB sizes
   each label explicitly (configlabel 280, gridlabel 64, MainForm.Designer.cs:
   2287, :2297) and none of them is allowed to squeeze the others out. */
.udmf-slabel { padding: 0 4px; flex: 0 0 auto; }
.udmf-sspring { overflow: hidden; text-overflow: ellipsis; }
.udmf-sspring { flex: 1 1 auto; min-width: 0; color: var(--ink); }
.udmf-slabel-action { cursor: default; }
.udmf-slabel-action:hover { color: var(--ink); text-decoration: underline; }
.udmf-slabel-todo { opacity: .55; }
.udmf-slabel-todo img, .udmf-sbtn-todo img { filter: grayscale(1); opacity: .4; }
.udmf-ssep { width: 0; height: 14px; border-left: 1px solid var(--line); margin: 0 3px; }
.udmf-sdrop { position: relative; display: flex; }
.udmf-sbtn { display: flex; align-items: center; padding: 0 6px;
             background: transparent;
             border: 1px solid transparent; color: var(--ink); font: inherit;
             cursor: default; }
/* `ShowDropDownArrow = false` (MainForm.Designer.cs:2327, :2472): the arrow is
   drawn INTO the icon, which is why they are called Grid2_arrowup and
   Zoom_arrowup. So an icon needs no arrow of ours beside it. */
.udmf-sbtn img { width: 16px; height: 16px; }
.udmf-sbtn:hover { background: var(--accent); color: #fff; }
/* Opens UPWARD: the bar is at the bottom of the window. */
.udmf-sdrop .udmf-menu-panel { top: auto; bottom: 100%; left: 0; }

/* --------------------------------------------------------- the info panel
 * `panelinfo`, docked Bottom (MainForm.Designer.cs:2594): five UserControls
 * taking turns, each a set of captioned boxes of label/value rows. */
.udmf-info { display: flex; align-items: stretch; gap: 8px; overflow-x: auto;
             padding: 4px 6px; background: var(--panel);
             border-top: 1px solid var(--line); color: var(--ink);
             user-select: none; font: inherit; white-space: nowrap; }
.udmf-info-mode { align-self: center; padding: 0 8px; color: var(--dim); }
.udmf-info-group { margin: 0; padding: 2px 8px 4px; border: 1px solid var(--line); }
.udmf-info-bare { border-color: transparent; }
.udmf-info-group legend { padding: 0 4px; color: var(--dim); font-weight: 600; }
.udmf-info-rows { display: grid; grid-template-columns: max-content 1fr;
                  gap: 0 8px; align-items: baseline; }
.udmf-info-row { display: contents; }
.udmf-info-label { color: var(--dim); text-align: right; }
.udmf-info-value { color: var(--ink); }
/* UDB greys a value the map does not carry — an unset tag, an absent offset. */
.udmf-info-off { color: var(--dim); opacity: .6; }
/* A count past the format's maximum goes RED, and so does its caption
   (StatisticsControl.cs). */
.udmf-info-over { color: #d05a5a; }
/* This project's own affordance, not UDB's: a value it cannot compute yet. */
.udmf-info-todo { color: var(--dim); opacity: .45; }
/* The texture panes. `flowLayoutPanelFront` is a FlowLayoutPanel holding
   panelFrontTop/Mid/Low left to right; each is a 64x64 ConfigurablePictureBox
   with `BackColor = AppWorkspace` and its name label centred underneath
   (LinedefInfoPanel.Designer.cs:499-509, UpdateTexturePanel :634-637). */
.udmf-info-strip { display: flex; gap: 6px; align-items: flex-start; }
.udmf-info-tex { display: flex; flex-direction: column; align-items: center;
                 gap: 1px; width: 64px; }
.udmf-info-texframe { position: relative; display: block; line-height: 0; }
.udmf-info-tex canvas { width: 64px; height: 64px; display: block;
                        background: var(--appworkspace, #6d6d6d);
                        border: 1px solid var(--line); image-rendering: pixelated; }
.udmf-info-texname { color: var(--ink); font-size: .92em; max-width: 64px;
                     overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
/* `labelTextureFrontTop` is parented ONTO the picture box at (1,1) with a
   half-transparent back colour (LinedefInfoPanel.cs:54-64), so it is an
   overlay on the image and not a row of its own. */
.udmf-info-texsize { position: absolute; left: 1px; top: 1px; line-height: 1.1;
                     padding: 0 2px; font-size: .82em; color: var(--ink);
                     background: rgba(0, 0, 0, .5); }

/* ----------------------------------------------------------- the dockers
 * `dockerspanel` — a DockersControl (MainForm.Designer.cs:2775-2783) with a
 * vertical tab strip on its INNER edge, so the tabs face the map
 * (DockersControl.cs:118-128). `dockerswidth` defaults to 300 and
 * `dockersposition` to 1, which is the RIGHT side
 * (ProgramConfiguration.cs:361-363). */
.udmf-dockers { display: flex; align-items: stretch; height: 100%;
                background: var(--panel); border-left: 1px solid var(--line);
                color: var(--ink); user-select: none; font: inherit;
                overflow: hidden; }
.udmf-dockers-collapsed { width: auto; }

.udmf-dockertabs { display: flex; flex-direction: column; flex: 0 0 auto;
                   border-right: 1px solid var(--line); }
.udmf-dockers:not(.udmf-dockers-right) .udmf-dockertabs {
  border-right: 0; border-left: 1px solid var(--line); }
/* A vertical tab: the caption reads bottom-to-top, as a left-aligned
   TabAlignment does in WinForms. */
.udmf-dockertab { writing-mode: vertical-rl; transform: rotate(180deg);
                  padding: 10px 4px; background: transparent;
                  border: 0; border-bottom: 1px solid var(--line);
                  color: var(--dim); font: inherit; cursor: default;
                  white-space: nowrap; }
.udmf-dockertab:hover { color: var(--ink); }
.udmf-dockertab-on { background: var(--accent); color: #fff; }

.udmf-dockerbody { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 6px; }
.udmf-dockerpage { min-width: 0; }

/* The Undo / Redo list — one row per level, the current one highlighted and
   the redo side greyed (UndoRedoPanel.cs:63-77). */
.udmf-undolist { display: flex; flex-direction: column; }
.udmf-undorow { padding: 2px 6px; cursor: default; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.udmf-undorow:hover { background: rgba(255,255,255,.06); }
.udmf-undorow-now { background: var(--accent); color: #fff; }
.udmf-undorow-now:hover { background: var(--accent); }
.udmf-undorow-redo { color: var(--dim); }
.udmf-undorow-trim { color: var(--dim); text-align: center; cursor: default; }

/* ------------------------------------------------ a shape mode's options */
.udmf-shapeopts { display: flex; flex-direction: column; gap: 4px; }
.udmf-shaperow { display: flex; align-items: center; gap: 6px; }
.udmf-shapelabel { flex: 1 1 auto; color: var(--dim); }
.udmf-shapenum { width: 90px; background: #333; color: var(--ink);
                 border: 1px solid var(--line); font: inherit; padding: 1px 4px; }
.udmf-shapeselect { background: #333; color: var(--ink);
                    border: 1px solid var(--line); font: inherit; }
.udmf-shapesep { height: 0; margin: 4px 0; border-top: 1px solid var(--line); }
.udmf-shapegroup { margin: 4px 0; padding: 2px 8px 6px; border: 1px solid var(--line); }
.udmf-shapegroup legend { padding: 0 4px; color: var(--dim); font-weight: 600; }
.udmf-shaperows { display: flex; flex-direction: column; gap: 4px; }
.udmf-shapereset { margin-top: 6px; align-self: flex-start; padding: 2px 10px;
                   background: transparent; border: 1px solid var(--line);
                   color: var(--ink); font: inherit; cursor: default; }
.udmf-shapereset:hover { background: var(--accent); color: #fff; }