/* ---------------------------------------------------------------------------
   H.365 — global styling.

   MudBlazor's theme carries colour and typography (see H365Theme). This file only
   adds the layout chrome MudBlazor has no component for: the module bar, the
   sidebar header, page headers and grid density tweaks.
   --------------------------------------------------------------------------- */

/* The root font size is deliberately NOT overridden. MudBlazor sizes paddings, control
   heights and icons in rem, so shrinking the root shrinks the whole interface rather than
   just the text. Text sizing lives in H365Theme's typography scale (14px body). */
html, body {
    margin: 0;
    padding: 0;
}

/* --- App bar / module navigation ----------------------------------------- */

.h365-brand {
    font-weight: 600;
    letter-spacing: 0.04em;
}

.h365-modulebar {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.h365-modulebar::-webkit-scrollbar {
    display: none;
}

.h365-module-btn {
    white-space: nowrap;
    border-radius: 2px;
    opacity: 0.85;
}

.h365-module-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.12);
}

.h365-module-active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 -2px 0 0 currentColor;
}

/* --- Sidebar -------------------------------------------------------------- */

/* The drawer lays its content out as a flex column. MudDivider defaults to
   DividerType.FullWidth, which is `flex-grow: 1` — intended for a flex ROW, where it
   spans the width. In this column it grows *vertically* instead and pushes the options
   to the bottom of the pane, so the divider is pinned and the menu takes the slack. */
.h365-sidebar {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.h365-sidebar-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px;
    min-height: 56px;
    flex: 0 0 auto;
}

.h365-sidebar-divider {
    flex: 0 0 auto;
}

.h365-sidebar-title {
    font-weight: 600;
    line-height: 1.3;
}

/* Takes the remaining height and scrolls on its own, so a long module menu never
   overflows the drawer. */
.h365-navmenu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.h365-navmenu .mud-nav-link {
    font-size: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.h365-navmenu .mud-nav-link-icon {
    min-width: 34px;
}

/* --- Page frame ----------------------------------------------------------- */

.h365-main {
    background-color: var(--mud-palette-background);
    min-height: 100vh;
}

.h365-page {
    padding: 14px 20px 28px 20px;
}

.h365-breadcrumbs .mud-breadcrumb-item {
    font-size: 13px;
}

.h365-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.h365-page-title {
    display: flex;
    align-items: center;
    font-weight: 600;
}

.h365-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* --- Form controls -------------------------------------------------------- */

/* Input *text* size comes from the theme's Subtitle1 (MudBlazor tags input wrappers with
   mud-typography-subtitle1) — see H365Theme. Only the label needs overriding here, and it
   has to match MudBlazor's own three-class selector to win the cascade. */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: 14px;
}

.mud-input-helper-text {
    font-size: 12px;
}

/* --- Data grids ----------------------------------------------------------- */

/* Grid text sits one step below body: still comfortably readable, but it keeps a wide
   table from running off the screen. */
.h365-grid .mud-table-cell {
    padding: 7px 12px;
    font-size: 13px;
}

.h365-grid .mud-table-head .mud-table-cell {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.h365-grid .mud-table-toolbar {
    padding-left: 10px;
    padding-right: 10px;
    min-height: 56px;
}

.h365-grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.h365-grid-search {
    max-width: 300px;
}

/* --- Report parameter bar -------------------------------------------------
   Sits above the grid rather than inside its toolbar: report parameters are
   asked before the query runs, and the grid's own toolbar is for filtering
   rows that have already come back. Keeping them apart is what makes it
   obvious which controls need Run pressing and which take effect at once. */

.h365-report-params {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 10px;
}

/* --- Numeric columns ------------------------------------------------------
   Amounts sit centred in the cell; the heading sits to the right of the column.
   Set by the owner on 2026-08-03 — the on-screen preference, applied to Debit,
   Credit, Balance and every other figure so no two amount columns are read a
   different way.

   The exports keep amounts right aligned. A printed statement is read down the
   last digit, and that is what an auditor expects of one.

   text-align alone does not move the heading: MudBlazor lays the header cell
   out as a flex row (title, sort arrow, filter icon), so the text sits wherever
   the flex line starts regardless. The alignment has to be done on the flex
   container, which is what these selectors reach. */

.h365-grid td.h365-num,
.h365-grid tfoot td.h365-num {
    text-align: center;
}

.h365-grid th.h365-num {
    text-align: right;
}

.h365-grid th.h365-num .column-header,
.h365-grid th.h365-num .sortable-column-header,
.h365-grid th.h365-num .mud-table-cell-header-sortable {
    justify-content: flex-end;
}

/* Tabular figures line their digits up in columns, so the decimal points in a
   column of amounts sit under one another instead of drifting. */
.h365-grid td.h365-num,
.h365-grid tfoot td.h365-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* The totals row is a conclusion, not another row of data. */
.h365-grid tfoot td {
    font-weight: 600;
    border-top: 2px solid var(--mud-palette-lines-default);
}

/* --- Opening balances ----------------------------------------------------- */

/* The opening balance screens are a sheet the user types into, so the grid holds
   real inputs rather than text. They are sized down hard: a MudNumericField at its
   normal width turns a twelve-column grid into a horizontal scroll, and the figures
   these columns take are short. */

.h365-opening-amount {
    min-width: 116px;
    max-width: 140px;
}

.h365-opening-quantity {
    min-width: 100px;
    max-width: 124px;
}

.h365-opening-date {
    min-width: 148px;
    max-width: 172px;
}

.h365-opening-text {
    min-width: 120px;
    max-width: 160px;
}

/* Amounts read right-aligned wherever they are, including inside an input. Without
   this the digits sit against the left edge of the box and no longer line up with
   the column heading or with the row above. */
.h365-opening-amount input,
.h365-opening-quantity input {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* A figure outside the grid - the totals strip, a card - still wants its digits in
   columns. The grid's own cells get this from .h365-num. */
.h365-num-text {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* An editable cell is tight against its neighbours, so the row keeps the density the
   rest of the app has rather than growing to input height plus padding. */
.h365-grid .h365-opening-amount .mud-input-control,
.h365-grid .h365-opening-quantity .mud-input-control,
.h365-grid .h365-opening-date .mud-input-control,
.h365-grid .h365-opening-text .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* --- Login ---------------------------------------------------------------- */

.h365-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background:
        radial-gradient(1200px 600px at 15% 15%, rgba(27, 79, 114, 0.16), transparent 60%),
        radial-gradient(900px 500px at 85% 85%, rgba(14, 116, 144, 0.14), transparent 60%),
        var(--mud-palette-background-gray);
}

.h365-auth-card {
    width: 100%;
    max-width: 420px;
}

.h365-auth-brand {
    text-align: center;
    margin-bottom: 14px;
}

/* --- Sign-in screen ------------------------------------------------------- */

/* The sign-in card is wider than the other chromeless screens (change password,
   no access, not found), which keep the 420px column above. */
.h365-login {
    max-width: 940px;
}

.h365-login-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 14px;
    overflow: hidden;
}

/* --- brand side --- */

.h365-login-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 36px 24px;
    color: #EAF2F8;
    background:
        radial-gradient(560px 320px at 85% 8%, rgba(34, 211, 238, 0.30), transparent 62%),
        radial-gradient(460px 460px at 5% 100%, rgba(14, 116, 144, 0.42), transparent 60%),
        linear-gradient(155deg, #1B4F72 0%, #123B57 55%, #0C2739 100%);
}

/* A faint grid, so the panel reads as an instrument rather than a poster. */
.h365-login-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
}

.h365-login-hero-body,
.h365-login-hero-foot {
    position: relative;
    z-index: 1;
}

.h365-login-hero-foot {
    color: rgba(234, 242, 248, 0.55);
}

.h365-login-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 12px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    background: linear-gradient(140deg, #2E86AB 0%, #0E7490 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.h365-login-title {
    color: #FFFFFF;
    margin-bottom: 6px;
}

.h365-login-tagline {
    color: rgba(234, 242, 248, 0.78);
    max-width: 300px;
}

.h365-login-features {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.h365-login-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: rgba(234, 242, 248, 0.86);
}

.h365-login-feature .mud-icon-root {
    flex: 0 0 auto;
    padding: 6px;
    border-radius: 8px;
    color: #7FD7EA;
    background: rgba(255, 255, 255, 0.08);
    box-sizing: content-box;
}

/* --- form side --- */

.h365-login-form {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--mud-palette-surface);
}

.h365-login-welcome {
    font-weight: 600;
    margin-bottom: 4px;
}

/* Shown only when the brand panel is dropped on a narrow screen. */
.h365-login-compact-brand {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.h365-login-submit {
    height: 42px;
    font-size: 14px;
    letter-spacing: 0.02em;
}

@media (max-width: 899px) {
    .h365-login-panel {
        grid-template-columns: 1fr;
    }

    .h365-login-hero {
        display: none;
    }

    .h365-login-compact-brand {
        display: flex;
    }

    .h365-login-form {
        padding: 32px 24px;
    }

    .h365-login {
        max-width: 440px;
    }
}

/* --- Module dashboard tiles ---------------------------------------------- */

.h365-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.h365-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    background-color: var(--mud-palette-surface);
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.h365-tile:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.h365-tile-group {
    margin-bottom: 18px;
}

/* --- Trade documents (purchase and sale invoices) -------------------------- */

/* The document's state, stamped across the page. Set from data-watermark on the
   wrapper so one rule serves UNPOSTED, POSTED and CANCELLED, and pointer-events
   is off so the stamp never swallows a click meant for a field underneath. */
.h365-doc {
    position: relative;
}

.h365-doc::before {
    content: attr(data-watermark);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-24deg);
    font-size: clamp(4rem, 13vw, 12rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 0.06;
}

.h365-doc-unposted::before {
    color: var(--mud-palette-warning);
}

.h365-doc-posted::before {
    color: var(--mud-palette-success);
}

.h365-doc-cancelled::before {
    color: var(--mud-palette-error);
}

/* Everything real sits above the stamp. */
.h365-doc > * {
    position: relative;
    z-index: 1;
}

.h365-doc-header,
.h365-doc-entry {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.h365-doc-entry {
    background: var(--mud-palette-background-grey);
}

.h365-doc-lines .mud-table-cell {
    font-size: 13px;
    padding: 4px 8px;
    vertical-align: middle;
}

.h365-doc-lines .mud-table-head .mud-table-cell {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.h365-doc-lines .mud-input-control {
    margin: 0;
}

.h365-line-item {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.h365-line-code {
    font-size: 12px;
    font-weight: 600;
}

.h365-line-name {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.h365-line-hint {
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
}

/* A titled block inside a document — the header halves, serials, freight, totals.
   Stretched to the row height so three panels side by side line up at the bottom. */
.h365-doc-panel {
    background: var(--mud-palette-surface);
}

.h365-fill {
    height: 100%;
}

.h365-panel-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.h365-panel-subject {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    margin-left: 8px;
}

/* The row the serial panel is pointed at, so it is obvious which line is being
   entered against when several are on screen. */
.h365-doc-lines .h365-line-selected > .mud-table-cell {
    background: var(--mud-palette-action-default-hover);
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
}

/* A key name printed inline in helper text, so a shortcut reads as a key. */
.h365-kbd {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 0 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
    border-radius: 3px;
    background: var(--mud-palette-background-grey);
}

/* The classic new-record marker on the entry row at the foot of the grid. */
.h365-new-row-marker {
    color: var(--mud-palette-text-disabled);
    font-weight: 700;
    text-align: center;
}

.h365-serial-table td,
.h365-serial-table th {
    font-size: 13px;
    padding: 3px 6px;
}

.h365-serial-table th {
    font-size: 12px;
    font-weight: 600;
}

.h365-serial-table .mud-input-control {
    margin: 0;
}

/* Freight and Paid are typed into the totals column, so their fields are sized to
   the figures beside them rather than filling the panel. */
.h365-total-input {
    width: 120px;
}

.h365-total-input .mud-input-control {
    margin: 0;
}

/* A rate and the amount it produced, side by side — additional tax, document discount.
   The rate is the narrower of the two because it is the shorter number. */
.h365-total-pair {
    display: flex;
    gap: 4px;
}

.h365-total-pair > :first-child {
    width: 76px;
}

.h365-total-pair > :last-child {
    width: 120px;
}

.h365-total-pair .mud-input-control {
    margin: 0;
}

.h365-total-pair input {
    text-align: right;
}

.h365-total-input input {
    text-align: right;
}

.h365-doc-totals {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.h365-doc-totals > .mud-paper {
    min-width: 320px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.h365-total-row {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    font-size: 13px;
    padding: 2px 0;
}

.h365-total-row > span:last-child {
    font-variant-numeric: tabular-nums;
}

.h365-total-grand {
    font-size: 15px;
    font-weight: 700;
}

/* --- Misc ----------------------------------------------------------------- */

.h365-prewrap {
    white-space: pre-wrap;
    word-break: break-word;
}

.h365-matrix-cell {
    text-align: center;
    padding: 4px 8px !important;
}

.h365-matrix-name {
    white-space: nowrap;
}

/* --- Bulk import --------------------------------------------------------- */

.h365-import-points {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
}

.h365-import-points li {
    margin-bottom: 2px;
}

.h365-import-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.h365-import-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* The column reference can run to fifty rows, so it scrolls inside the dialog rather than
   pushing the preview grid off the bottom of it. */
.h365-import-columns {
    max-height: 320px;
    overflow-y: auto;
}

.h365-import-columns td,
.h365-import-columns th {
    font-size: 12px;
    padding: 4px 8px !important;
}

.h365-import-columns code {
    font-size: 12px;
    white-space: nowrap;
}

/* A rejected line is tinted rather than hidden: the user needs to see what was in it. */
.h365-import-rejected {
    background-color: rgba(211, 47, 47, 0.06) !important;
}

/* --- Point of sale --------------------------------------------------------- */

/* The counter is the one screen in the application worked by somebody who is not
   looking at it, so it is laid out on different principles from every other:
   bigger figures, fewer of them, and the total large enough to be read across a
   shop. Everything scales with the viewport rather than being fixed, because a
   till runs on anything from a 10" terminal to a desktop monitor. */

.h365-pos {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.h365-pos-terminal-pick {
    min-width: 220px;
}

.h365-pos-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 12px;
    align-items: start;
}

/* Below a tablet the side panel goes under the cart rather than beside it. The
   Pay button then sits at the bottom of the scroll, which is where a thumb is. */
@media (max-width: 1100px) {
    .h365-pos-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.h365-pos-cart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.h365-pos-entry {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
}

@media (max-width: 700px) {
    .h365-pos-entry {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The scan box is where the cursor lives all day, so it is deliberately the
   loudest control on the screen. */
.h365-pos-scan input {
    font-size: 18px;
    font-weight: 600;
}

.h365-pos-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
    color: var(--mud-palette-text-secondary);
}

.h365-pos-lines td,
.h365-pos-lines th {
    padding: 4px 8px;
    vertical-align: middle;
}

.h365-pos-lines th {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.h365-pos-lines .mud-input-control {
    margin: 0;
}

/* Which line the function keys act on. Marked with a bar down the left rather
   than a fill, so it stays legible against the striped rows. */
.h365-pos-line-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.h365-pos-line-selected {
    background: var(--mud-palette-table-hover);
}

.h365-pos-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.h365-pos-side > .mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
}

.h365-pos-total-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 2px 0;
}

.h365-pos-total-row > span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* The figure the customer is about to be told. Read across a counter, so it is
   the largest thing on the page. */
.h365-pos-grand {
    font-size: 20px;
    font-weight: 700;
}

.h365-pos-grand > span:last-child {
    font-size: 24px;
    font-weight: 700;
}

.h365-pos-closed {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px dashed var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

/* The shortcut strip. A till is worked from the keyboard, and this is what
   teaches the keys - so it is always visible rather than tucked into a help
   dialog nobody at a counter is going to open. */
.h365-pos-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
}

.h365-pos-keybar {
    margin-top: 12px;
    padding: 8px 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
    border-radius: 4px;
}

.h365-pos-key {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.h365-pos-keys kbd,
.h365-pos-lines kbd,
.mud-button kbd {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 11px;
    padding: 1px 5px;
    margin-right: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
    border-radius: 3px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* The amount due, at the top of the payment panel. */
.h365-pos-pay-due {
    text-align: center;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.h365-pos-pay-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    text-align: center;
}

#blazor-error-ui {
    color-scheme: light only;
    background: #ffd7d7;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1500;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* --- Document header panels: closing the gaps ------------------------------ */

/* Helper text that only shows on focus still reserves a line under every control it is
   set on, so a panel full of them reads as a page of gaps. Lift those containers out of
   the flow — nothing is drawn there until the field is focused, and the rows sit
   together the rest of the time. Helper text that is always visible keeps its space,
   because it is part of what the field says. */
.h365-doc-header .mud-input-control {
    position: relative;
}

.h365-doc-header .mud-input-control-helper-container:has(.mud-input-helper-onfocus) {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0;
    padding: 0 4px 2px;
    border-radius: 0 0 4px 4px;
    z-index: 3;
    pointer-events: none;
}

/* Once it is out of the flow it hangs over whatever is beneath, so on focus it is given
   a ground of its own and reads as a hint rather than as two overlapping rows. Unfocused
   it stays transparent: the text itself is already clipped by the container. */
.h365-doc-header .mud-input-control:focus-within .mud-input-control-helper-container:has(.mud-input-helper-onfocus) {
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Rows in a header panel are one field tall and need less air between them than the
   16px the grid's own spacing gives; the columns keep it. */
.h365-doc-header > .mud-grid {
    margin-top: -4px;
    margin-bottom: -4px;
}

.h365-doc-header > .mud-grid > .mud-grid-item {
    padding-top: 4px;
    padding-bottom: 4px;
}