/* ───────────────────────────────────────────────────────────────────────────── App-wide UI density — Compact / Medium / Comfortable. Driven entirely by a `tt-density-*` class on (stamped by MainLayout from the user's preference). Deliberately CSS-only: there are 75 hand-rolled three-dot menus across 71 files with drifting Size/Dense attributes, so threading a parameter through them would be 71 chances to miss one — and MudMenu renders its dropdown into the app-root popover provider, NOT inside the grid, so the menu items can't be reached by a grid-scoped selector anyway. A body class reaches everything regardless. MEDIUM IS A NO-OP: every value below :root matches MudBlazor's own defaults, so a user who never touches the setting sees exactly the app they have today. Only Compact/Comfortable actually change anything. The three levels are a token table, not three copies of the rules — add a knob once, all levels get it. ───────────────────────────────────────────────────────────────────────────── */ :root { /* Dropdown menu items */ --tt-menu-item-py: 8px; /* .mud-menu-item vertical padding (MudBlazor: 8px) */ --tt-menu-item-px: 12px; /* ...horizontal (MudBlazor: 12px) */ --tt-menu-text-my: 4px; /* .mud-menu-item-text margin (MudBlazor: 4px) */ --tt-menu-list-py: 4px; /* .mud-menu-list padding (MudBlazor: 4px) */ --tt-menu-icon-gap: 12px; /* icon → label gap (MudBlazor: 12px) */ --tt-menu-min-w: 112px; /* .mud-menu-list min-width (MudBlazor: 112px) */ --tt-menu-font: 1rem; /* item label size */ /* Icon buttons sitting in a grid cell — the ⋮ activator AND every inline action (edit, delete, star…). These have to move together: a row is as tall as its tallest control, so shrinking cell padding alone changes nothing while any button in the row keeps its original height. */ --tt-rowbtn-pad: 8px; --tt-rowbtn-icon: 1.25rem; /* Grid rows — MudBlazor dense cell padding is 6px 24px 6px 16px */ --tt-row-py: 6px; --tt-row-px: 16px; /* Tritium AppBar internals — today's values. The bar has its OWN preference (see the tt-appbar-* blocks below), so these live in :root rather than in the tt-density-* scale. --tt-taskbar-h is deliberately NOT redeclared here: tritiumWindow.css's :root owns its 46px default, and duplicating it would create two sources of truth for the same number. */ --tt-tb-chip-h: 32px; --tt-tb-ctl-h: 28px; --tt-tb-font: .82rem; --tt-tb-logo: 18px; --tt-tb-icon: 1.25rem; /* MudIcon sizes its svg from font-size (w/h are 1em) */ --tt-tb-btn-pad: 8px; --tt-tb-badge-pull: 0px; /* see the badge rule below */ /* Dashboard glass header. --tt-dash-hdr is the load-bearing one: the header's min-height AND the scroller's top padding are both matched against it, so they can never drift and clip the first panel under the glass. It follows the general UI density (not the AppBar's) because it is page chrome, not the bottom bar. */ --tt-dash-hdr: 56px; --tt-dash-hdr-pad: 8px; --tt-dash-hdr-gap: 8px; --tt-dash-hdr-title: 1.25rem; /* MudBlazor Typo.h6 default */ --tt-dash-hdr-icon: 1.25rem; --tt-dash-hdr-btn: 8px; --tt-dash-hdr-font: .875rem; /* Dashboard panels. Medium mirrors the markup's own utility classes exactly — the header ships with `pa-3` (12px) and the body with `pa-2` (8px), and Typo.subtitle2 is .875rem — so Medium stays the no-op it is everywhere else. */ --tt-panel-hdr-pad: 12px; --tt-panel-body-pad: 8px; --tt-panel-title: .875rem; --tt-panel-icon: 1.25rem; --tt-panel-btn: 8px; /* Pinned-elements strip (My Suitcase) above a TritiumDataGrid */ --tt-pin-tile-w: 64px; --tt-pin-tile-pad: 4px; --tt-pin-icon: 2.5rem; /* MudIcon Size.Large */ --tt-pin-name: .6rem; --tt-pin-row-py: 6px; --tt-pin-gap: 8px; } body.tt-density-compact { --tt-menu-item-py: 3px; --tt-menu-item-px: 10px; --tt-menu-text-my: 1px; --tt-menu-list-py: 2px; --tt-menu-icon-gap: 8px; --tt-menu-min-w: 100px; --tt-menu-font: .875rem; --tt-rowbtn-pad: 4px; --tt-rowbtn-icon: 1.05rem; --tt-row-py: 2px; --tt-row-px: 10px; --tt-pin-tile-w: 48px; --tt-pin-tile-pad: 2px; --tt-pin-icon: 1.75rem; --tt-pin-name: .55rem; --tt-pin-row-py: 3px; --tt-pin-gap: 5px; --tt-dash-hdr: 44px; --tt-dash-hdr-pad: 5px; --tt-dash-hdr-gap: 4px; --tt-dash-hdr-title: 1.05rem; --tt-dash-hdr-icon: 1.1rem; --tt-dash-hdr-btn: 5px; --tt-dash-hdr-font: .8rem; --tt-panel-hdr-pad: 7px; --tt-panel-body-pad: 5px; --tt-panel-title: .8rem; --tt-panel-icon: 1.05rem; --tt-panel-btn: 4px; } body.tt-density-comfortable { --tt-menu-item-py: 12px; --tt-menu-item-px: 16px; --tt-menu-text-my: 6px; --tt-menu-list-py: 8px; --tt-menu-icon-gap: 16px; --tt-menu-min-w: 180px; --tt-menu-font: 1.0625rem; --tt-rowbtn-pad: 11px; --tt-rowbtn-icon: 1.4rem; --tt-row-py: 12px; --tt-row-px: 20px; --tt-pin-tile-w: 84px; --tt-pin-tile-pad: 7px; --tt-pin-icon: 3.25rem; --tt-pin-name: .7rem; --tt-pin-row-py: 10px; --tt-pin-gap: 12px; --tt-dash-hdr: 70px; --tt-dash-hdr-pad: 12px; --tt-dash-hdr-gap: 12px; --tt-dash-hdr-title: 1.45rem; --tt-dash-hdr-icon: 1.45rem; --tt-dash-hdr-btn: 11px; --tt-dash-hdr-font: .95rem; --tt-panel-hdr-pad: 17px; --tt-panel-body-pad: 14px; --tt-panel-title: .98rem; --tt-panel-icon: 1.4rem; --tt-panel-btn: 11px; } /* ───────────────────────────────────────────────────────────────────────────── Tritium AppBar — its OWN preference, independent of the density above, so compact grids with a large AppBar (or the reverse) is a valid combination. Anchored differently from the density scale: today's 46px bar is the FLOOR, not the middle. Compact IS today's bar, and the other two step up 8px each. Compact is the default, so this stays a no-op until deliberately changed — same safety property as Medium density. Overriding --tt-taskbar-h propagates for free to the window-host insets, maximized-window bounds, the body padding that reserves page space, the launcher window's bottom anchor and the auto-hide transform — every one of them already reads the variable. ───────────────────────────────────────────────────────────────────────────── */ body.tt-appbar-medium { --tt-taskbar-h: 58px; /* 46 + 12 */ --tt-tb-chip-h: 38px; --tt-tb-ctl-h: 34px; --tt-tb-font: .88rem; --tt-tb-logo: 21px; --tt-tb-icon: 1.45rem; --tt-tb-btn-pad: 10px; --tt-tb-badge-pull: 2px; } body.tt-appbar-comfortable { --tt-taskbar-h: 66px; /* 46 + 20 */ --tt-tb-chip-h: 44px; --tt-tb-ctl-h: 40px; --tt-tb-font: .95rem; --tt-tb-logo: 24px; --tt-tb-icon: 1.65rem; --tt-tb-btn-pad: 12px; --tt-tb-badge-pull: 4px; } /* ── Menus ──────────────────────────────────────────────────────────────────── Scoped to .mud-menu-item / .mud-menu-list (NOT the generic .mud-list-item, which the nav drawer and every picker also use — those must not move). Each selector is one class deeper than the MudBlazor rule it replaces, which is what wins on specificity, including over .mud-menu-item-dense. */ body[class*="tt-density-"] .mud-menu-item { padding: var(--tt-menu-item-py) var(--tt-menu-item-px); } body[class*="tt-density-"] .mud-menu-item .mud-menu-item-text { margin: var(--tt-menu-text-my) 0; font-size: var(--tt-menu-font); } body[class*="tt-density-"] .mud-menu-item .mud-menu-item-icon { margin-inline-end: var(--tt-menu-icon-gap); } body[class*="tt-density-"] .mud-menu-list { padding: var(--tt-menu-list-py) 0; min-width: var(--tt-menu-min-w); } /* MudBlazor indents icon-less items to line up with icon-ed ones using a hardcoded 36px; that has to track the icon gap or the columns stop aligning at the other densities. 24px = the icon's own box. */ body[class*="tt-density-"] .mud-menu-list:has(.mud-menu-item-icon) .mud-menu-item:not(:has(.mud-menu-item-icon)) .mud-menu-item-text { margin-inline-start: calc(24px + var(--tt-menu-icon-gap)); } /* ── Icon buttons in a grid cell ─────────────────────────────────────────────── EVERY inline action, not just the ⋮ — a row is only as short as its tallest control, so leaving the edit/delete/star buttons at their original size would hold the row height and the density change wouldn't be visible at all. Checkbox and expander cells are excluded: MudBlazor sizes those to align the selection column, and resizing them knocks the column out of alignment with the header. */ body[class*="tt-density-"] .mud-table-cell:not(.mud-table-cell-checkbox) .mud-button-root.mud-icon-button:not(.mud-table-row-expander) { padding: var(--tt-rowbtn-pad); } body[class*="tt-density-"] .mud-table-cell:not(.mud-table-cell-checkbox) .mud-button-root.mud-icon-button:not(.mud-table-row-expander) .mud-icon-root { font-size: var(--tt-rowbtn-icon); } /* ── Tritium AppBar internals ────────────────────────────────────────────────── Height alone isn't enough: a 62px bar with 32px chips and a .82rem brand reads as a fat bar with small controls floating in it. The controls scale with it so the extra space becomes comfort, not padding. Selectors are body-prefixed so they outrank the plain .tt-tb-* rules in tritiumWindow.css. */ body[class*="tt-appbar-"] .tt-tb-chip { height: var(--tt-tb-chip-h); font-size: var(--tt-tb-font); } body[class*="tt-appbar-"] .tt-tb-module, body[class*="tt-appbar-"] .tt-tb-clock { height: var(--tt-tb-ctl-h); font-size: var(--tt-tb-font); } body[class*="tt-appbar-"] .tt-tb-chev { width: var(--tt-tb-ctl-h); height: var(--tt-tb-ctl-h); } body[class*="tt-appbar-"] .tt-tb-brand, body[class*="tt-appbar-"] .tt-tb-brand--btn { font-size: var(--tt-tb-font); } body[class*="tt-appbar-"] .tt-tb-brand--btn { height: var(--tt-tb-ctl-h); } body[class*="tt-appbar-"] .tt-tb-brand__logo { width: var(--tt-tb-logo); height: var(--tt-tb-logo); } /* The separators are sized by margin against the bar height — recompute or they stop looking centred. */ body[class*="tt-appbar-"] .tt-tb-sep { margin: calc((var(--tt-taskbar-h) - 28px) / 2) 3px; } /* Icon buttons in the bar — the tray actions (Suitcase, Notes, Mail, Help…), the hamburger, everything GlobalActionZone renders. Without these the bar grows but its icons sit unchanged in the middle of it, which reads as padding rather than a bigger bar. MudIcon sizes its svg from font-size (w/h are 1em). Deliberately NOT a blanket `.tt-taskbar .mud-icon-root`: that would also capture the clock's caret, which has its own deliberate size. */ body[class*="tt-appbar-"] .tt-taskbar .mud-button-root.mud-icon-button { padding: var(--tt-tb-btn-pad); } body[class*="tt-appbar-"] .tt-taskbar .mud-button-root.mud-icon-button .mud-icon-root { font-size: var(--tt-tb-icon); } body[class*="tt-appbar-"] .tt-tb-chip .mud-icon-root { font-size: var(--tt-tb-icon); } /* Unread-count badges (Mail, Suitcase) — pull them back toward the icon as the bar grows. MudBadge anchors to the BUTTON's top-right corner (`inset: auto auto calc(100% - 4px) calc(100% - 4px)`), but the glyph stays centred inside the padding. So every pixel of extra padding pushes the badge diagonally away from the icon it belongs to, and at Comfortable it visibly floats off on its own. Compensating by the FULL growth would glue it over the glyph, so this pulls back roughly half — the badge still drifts out a little, just not in lockstep with the button. Only the position is compensated: the number's own size is left to MudBlazor. */ body[class*="tt-appbar-"] .tt-taskbar .mud-badge { transform: translate(calc(-1 * var(--tt-tb-badge-pull)), var(--tt-tb-badge-pull)); } /* The launcher panels hosted IN the bar cap their height against the viewport with a hardcoded 70px that assumed a 46px bar. Derive it so they don't overlap a taller bar. */ body[class*="tt-appbar-"] .tt-taskbar .msc-panel-dropdown, body[class*="tt-appbar-"] .tt-taskbar .notes-panel-dropdown, body[class*="tt-appbar-"] .tt-taskbar .msg-panel-dropdown { max-height: calc(100vh - var(--tt-taskbar-h) - 24px); } /* ── Dashboard control bubble ────────────────────────────────────────────────── The full-width header is gone; the bubble floats over the desktop instead, so density now scales the control sizes rather than a bar height. --tt-dash-hdr itself is no longer consumed for layout, but the button/icon tokens carry over unchanged. */ body[class*="tt-density-"] .dashboard-bubble { padding: var(--tt-dash-hdr-pad, 8px); gap: calc(var(--tt-dash-hdr-gap, 8px) / 4); } body[class*="tt-density-"] .dashboard-bubble .mud-button-root.mud-icon-button { padding: var(--tt-dash-hdr-btn, 8px); } body[class*="tt-density-"] .dashboard-bubble .mud-icon-root { font-size: var(--tt-dash-hdr-icon, 1.25rem); } /* ── Dashboard panels ────────────────────────────────────────────────────────── !important where MudBlazor's own spacing utilities are (`pa-3` on the header, `pa-2` on the body). Icon sizing is scoped to the panel's CHROME — header actions and the edit-mode tools — deliberately NOT `.dashboard-panel .mud-icon-root`, which would also resize icons drawn *inside* widgets (KPI glyphs, list rows, chart legends) that have their own deliberate sizes. */ body[class*="tt-density-"] .dashboard-panel-header { padding: var(--tt-panel-hdr-pad, 12px) !important; } body[class*="tt-density-"] .dashboard-panel-header .mud-typography-subtitle2 { font-size: var(--tt-panel-title, .875rem); } body[class*="tt-density-"] .dashboard-panel .mud-card-content { padding: var(--tt-panel-body-pad, 8px) !important; } body[class*="tt-density-"] .dashboard-panel-header .mud-button-root.mud-icon-button, body[class*="tt-density-"] .dash-content-tools .mud-button-root.mud-icon-button { padding: var(--tt-panel-btn, 8px); } body[class*="tt-density-"] .dashboard-panel-header .mud-icon-root, body[class*="tt-density-"] .dash-content-tools .mud-icon-root { font-size: var(--tt-panel-icon, 1.25rem); } /* 🔴 MudBlazor pulls header actions OUT of the header's padding: .mud-card-header-actions { align-self: flex-start; margin-top: -8px; margin-right: -8px; } That pins the collapse/hide/close buttons to the very corner, and at Compact — where the header padding is only 7px — the -8px pull puts them past the padding entirely, flush against the card edge. Cancelling the negative margins lets the header's own padding become the gap, so it scales with density (7 / 12 / 17px), and centring them vertically lines them up with the title instead of the top edge. */ body[class*="tt-density-"] .dashboard-panel-header .mud-card-header-actions { align-self: center; margin-top: 0; margin-right: 0; margin-inline-end: 0; } /* ── Pinned-elements strip (My Suitcase) above a TritiumDataGrid ─────────────── It sits at the top of the grid at a fixed 64px tile, so at any density it was the one thing that visibly didn't move. Overrides the .pinned-* rules in app.css. */ body[class*="tt-density-"] .pinned-icons-row { padding: var(--tt-pin-row-py) 4px; gap: var(--tt-pin-gap); } body[class*="tt-density-"] .pinned-icon { width: var(--tt-pin-tile-w); padding: var(--tt-pin-tile-pad); } body[class*="tt-density-"] .pinned-icon-name { font-size: var(--tt-pin-name); } body[class*="tt-density-"] .pinned-icon .pinned-icon-wrapper > .mud-icon-root { font-size: var(--tt-pin-icon); } /* The unpin button is absolutely positioned over the tile corner — it follows the row-button size so it stays proportional to the tile it's pinned to. */ body[class*="tt-density-"] .pinned-unpin-wrap .mud-button-root.mud-icon-button { padding: calc(var(--tt-rowbtn-pad) / 2); } body[class*="tt-density-"] .pinned-unpin-wrap .mud-icon-root { font-size: calc(var(--tt-rowbtn-icon) * .8); } /* ── Grid rows ──────────────────────────────────────────────────────────────── Overrides MudBlazor's dense cell padding. TritiumDataGrid hardcodes Dense="true" and stays that way — driving the padding here keeps the shared component decoupled from ISessionService (per the Components/_Shared convention) and still gives three distinct levels rather than a bool's two. */ body[class*="tt-density-"] .mud-table-dense .mud-table-row .mud-table-cell { padding: var(--tt-row-py) var(--tt-row-px); padding-inline-start: var(--tt-row-px); padding-inline-end: calc(var(--tt-row-px) * 1.5); } body[class*="tt-density-"] .mud-table-dense .mud-table-row .mud-table-cell:last-child { padding-inline-end: var(--tt-row-px); }