/* Color tokens pulled directly from the live SAP Horizon theme (both the
   dark and light variants), via getComputedStyle on
   https://sdk.openui5.org/.../toolpageapp — not guessed. The sidebar/
   toolbar use the dark tokens, the main content area uses the light ones,
   per request: dark nav, light page. */
:root {
    /* --- Nav chrome (toolbar + sidebar) — sap_horizon_dark tokens --- */
    --nav-bg: #1d232a;
    --nav-border: #323c48;
    --nav-text: #f5f6f7;
    --nav-text-muted: #8396a8;
    --nav-selection-bg: #1d2d3e;
    --nav-highlight: #4db1ff;
    --nav-shadow: 0 .125rem .5rem 0 rgba(0,0,0,0.4);

    /* --- Content area — sap_horizon (light) tokens --- */
    --content-bg: #f5f6f7;
    --card-bg: #ffffff;
    --card-border: #e5e5e5;
    --content-text: #131e29;
    --content-text-muted: #556b82;
    --field-bg: #ffffff;
    --field-border: #556b81;
    --link: #0064d9;
    --positive: #256f3a;
    --negative: #aa0808;
    --critical: #e76500;
    --content-shadow: 0 0 .125rem 0 rgba(34,53,72,0.2), 0 .125rem .25rem 0 rgba(34,53,72,0.2);

    /* --- Shared --- */
    --brand: #0070f2;
    --toolbar-height: 3rem;
    --sidenav-width: 15.675rem;
    --sidenav-collapsed-width: 3.5rem;
    --font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: var(--font-family);
    background: var(--content-bg);
    color: var(--content-text);
    font-size: 14px;
    line-height: 1.5;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- App shell layout --- */
.shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.toolbar {
    height: var(--toolbar-height);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.75rem;
    background: var(--nav-bg);
    color: var(--nav-text);
    border-bottom: 1px solid var(--nav-border);
}

.app-title {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}
.app-logo {
    height: 1.75rem;
    width: auto;
    display: block;
}
.app-tagline {
    margin-left: 0.6rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--nav-border);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--nav-text-muted);
    white-space: nowrap;
}

.toolbar-spacer { flex: 1 1 auto; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    color: var(--nav-text);
    cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,0.1); }

.user-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.5rem 0.15rem 0.15rem;
}
.user-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    flex: 0 0 auto;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-size: 0.85rem; font-weight: 600; color: var(--nav-text); }
.user-role { font-size: 0.7rem; color: var(--nav-text-muted); text-transform: capitalize; }

.body-row {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

/* --- Side navigation (dark) --- */
.sidenav {
    flex-shrink: 0;
    flex-grow: 0;
    min-width: var(--sidenav-width);
    max-width: var(--sidenav-width);
    background: var(--nav-bg);
    color: var(--nav-text);
    border-right: 1px solid var(--nav-border);
    overflow-y: auto;
    transition: min-width 0.15s ease, max-width 0.15s ease;
}
.shell.nav-collapsed .sidenav {
    min-width: var(--sidenav-collapsed-width);
    max-width: var(--sidenav-collapsed-width);
}
.shell.nav-collapsed .nav-label { display: none; }
.shell.nav-collapsed .nav-item { justify-content: center; }

.nav-list { list-style: none; margin: 0; padding: 0.5rem; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.15rem;
    border-radius: 0.375rem;
    color: var(--nav-text);
    white-space: nowrap;
}
.nav-item:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.nav-item.is-active {
    background: var(--nav-selection-bg);
    color: var(--nav-highlight);
    border-left: 3px solid var(--brand);
    padding-left: calc(0.75rem - 3px);
}
.nav-icon { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }
.nav-label { font-size: 0.875rem; flex: 1 1 auto; text-align: left; }

/* --- Expandable nav groups (Invoice, Reports, Admin) --- */
.nav-group-toggle {
    width: 100%;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
.nav-chevron {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    transition: transform 0.15s ease;
}
/* Scoped to each li's OWN direct-child toggle button — a plain descendant
   selector here would also match a nested subgroup's chevron whenever any
   ANCESTOR group is expanded, rotating it regardless of its own state (the
   original bug: nested arrows appeared permanently rotated once their
   parent was opened, since they're descendants of an expanded .nav-group
   either way). */
.nav-group.is-expanded > .nav-item.nav-group-toggle .nav-chevron,
.nav-subgroup.is-expanded > .nav-subitem.nav-group-toggle .nav-chevron { transform: rotate(90deg); }

.nav-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
}
.nav-group.is-expanded .nav-sublist { display: block; }

.nav-subitem {
    display: block;
    padding: 0.5rem 0.75rem 0.5rem 2.6rem;
    margin-bottom: 0.15rem;
    border-radius: 0.375rem;
    color: var(--nav-text-muted);
    font-size: 0.825rem;
    white-space: nowrap;
}
.nav-subitem:hover { background: rgba(255,255,255,0.08); color: var(--nav-text); text-decoration: none; }
.nav-subitem.is-active {
    background: var(--nav-selection-bg);
    color: var(--nav-highlight);
}

/* --- Nested sub-groups (e.g. Admin > Users > Create/Display) --- */
.nav-subitem.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
.nav-subitem.nav-group-toggle .nav-label { flex: 1 1 auto; }
.nav-subitem.nav-group-toggle .nav-chevron { width: 0.85rem; height: 0.85rem; }
.nav-sublist-nested {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    display: none;
}
.nav-subgroup.is-expanded > .nav-sublist-nested { display: block; }

/* Collapsed sidebar is icon-only — no room for a tree, so sub-menus and
   chevrons hide entirely rather than trying to render illegibly. */
.shell.nav-collapsed .nav-chevron,
.shell.nav-collapsed .nav-sublist {
    display: none;
}

/* --- Content area (light) --- */
.content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem;
    overflow-y: auto;
    background: var(--content-bg);
    color: var(--content-text);
}

.content h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 1rem;
}
.content h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    color: var(--content-text-muted);
}
.content h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 1.25rem 0 0.4rem;
}

/* Tables and forms are the two content shapes every page uses — styling
   them as elevated "cards" (rather than editing every template to add a
   wrapper div) gets the tile/panel look with no per-page markup changes. */
.content > table,
.content > form {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    box-shadow: var(--content-shadow);
}

table {
    border-collapse: collapse;
    width: 100%;
    overflow: hidden;
    color: var(--content-text);
}
th, td {
    padding: 0.6rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}
th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--content-text-muted);
    font-weight: 600;
    background: rgba(0,0,0,0.02);
}
/* Totals rows use <th> cells for semantics/scoping, but should read like
   the rest of the table body, not like a small-caps column header. */
tfoot th {
    font-size: inherit;
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(0,0,0,0.02); }

table.sortable th.sortable-col {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem;
}
table.sortable th.sortable-col:hover {
    background: rgba(0,0,0,0.06);
}
table.sortable th.sortable-col::after {
    content: '\2195';
    position: absolute;
    right: 0.6rem;
    opacity: 0.35;
}
table.sortable th.sortable-col[data-sort-dir="asc"]::after {
    content: '\2191';
    opacity: 1;
}
table.sortable th.sortable-col[data-sort-dir="desc"]::after {
    content: '\2193';
    opacity: 1;
}

form {
    padding: 1.25rem 1.5rem;
    max-width: 640px;
}
/* Table-row action forms (Delete/Activate/Deactivate) sit next to a plain
   <a class="button"> (Edit) in the same cell — without this, `form`'s
   block display and padding above push it onto its own line below Edit
   instead of staying side by side. */
form.inline {
    display: inline-flex;
    padding: 0;
    max-width: none;
    margin-left: 0.5rem;
}
/* Forms wrapping a data table (line-item entry, bulk-select lists) need
   the table's full width, not the narrow single-column entry-form width. */
form:has(> table) {
    max-width: none;
}
form label {
    display: block;
    font-size: 0.8rem;
    color: var(--content-text-muted);
    margin-bottom: 0.9rem;
}
form label input,
form label select,
form label textarea {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
}
form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
form label:has(input[type="checkbox"]) input { width: auto; margin: 0; }

/* Invoice entry: fixed header (fields + Post/Reset) above, line items below
   with their own scroll area that fills whatever space remains in the
   viewport — adding many rows grows a scrollbar inside the table, never
   the outer page, regardless of window height. */

/* .content-fill (set via base.twig's content_class block, opt-in per page)
   turns the content area itself into a viewport-bounded flex column. Every
   direct child takes its natural height by default; whichever one is
   marked .fill-remaining grows to fill whatever space is left and becomes
   a flex column itself, so a scrollable grandchild inside it can be the
   one thing that actually scrolls — never the outer page. Other pages are
   untouched — .content keeps its normal page-level scroll by default. */
.content.content-fill {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: calc(100vh - var(--toolbar-height));
    gap: 1rem;
}
.content.content-fill > * {
    flex: 0 0 auto;
}
.content.content-fill > .fill-remaining {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The old app had the whole form as one continuous card — this instead
   makes it a transparent wrapper, with .form-header/.form-items each
   getting their own card (background/border/shadow), same as Display
   Invoice's separate filter-box + results-table-box. */
form.invoice-entry-form,
form.cylinder-entry-form,
form.stock-entry-form {
    max-width: none;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    gap: 1rem;
}
.form-section {
    padding: 1.25rem 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    box-shadow: var(--content-shadow);
}
.form-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.form-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
}
.form-header-row label { margin-bottom: 0; flex: 1 1 180px; min-width: 160px; max-width: 260px; }
/* Checkboxes shouldn't stretch to the same width as text/select fields. */
.form-header-row label:has(input[type="checkbox"]) {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
}
.form-header-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}
.form-items {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.form-items h2,
.form-items #addRowBtn,
.form-items > p {
    flex: 0 0 auto;
}
.form-items #addRowBtn {
    /* .form-items is a column flex container, whose default cross-axis
       stretch would otherwise force this button to the full container
       width — pin it to its natural content width instead. */
    align-self: flex-start;
}
.line-items-scroll {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    border: 1px solid var(--card-border);
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
}
/* Wide report tables (e.g. one column per product) scroll horizontally
   within their own box instead of pushing the whole page wider. Carries its
   own card styling (background/border/shadow) rather than relying on
   `.content > table`, since wrapping the table in this div breaks that
   direct-child selector. width: fit-content shrink-wraps the card to the
   table's actual width (a narrow table like Section 2/3 shouldn't stretch
   the card across the full page) — max-width caps it back to the container
   so a wide table (Section 1) still triggers overflow-x scroll instead of
   pushing the page wider. */
.table-scroll-x {
    overflow-x: auto;
    margin-bottom: 1rem;
    width: fit-content;
    max-width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    box-shadow: var(--content-shadow);
}
.table-scroll-x table { margin: 0; border: none; box-shadow: none; }
/* The global `table { width: 100% }` uses automatic layout, where a <th>'s
   own width is only a hint the browser overrides based on cell content —
   it never actually constrains the column. table-layout: fixed makes
   declared widths (via <colgroup><col> here) binding instead of advisory;
   width: auto (overriding the 100%) lets the table's natural width be the
   sum of its columns, so it can genuinely exceed its container and trigger
   .table-scroll-x's horizontal scroll rather than being squeezed to fit. */
.table-fixed-layout {
    table-layout: fixed;
    width: auto;
}

/* "Freeze pane" — Ref No./Customer(/Transaction) stay pinned to the left
   edge while the rest of the row scrolls underneath, Excel-style. An
   explicit background is required on sticky cells — otherwise they're
   transparent and scrolling columns show through underneath.

   Both overrides below are required for position: sticky to work at all
   here: the global `table` rule sets `overflow: hidden` (for rounded-corner
   clipping) and `border-collapse: collapse` — every major browser treats
   `overflow: hidden` on the table itself as the sticky cell's scrolling
   container instead of the intended `.table-scroll-x` wrapper, and ignores
   `position: sticky` on table cells entirely once border-collapse is
   `collapse`. Confirmed by scripting the actual scroll offset in a real
   browser: with these two overrides removed, a frozen cell moves in exact
   lockstep with the scrollbar instead of staying put.

   `left` offsets beyond the first column (which is always `left: 0`) are
   NOT set here as class defaults — they must be supplied per table as
   inline `style="left: Xpx"`, in px, not `ch`. `ch` resolves against each
   *individual* cell's own font-size, and `th` (0.75rem, ~12px) and `td`
   (inherits body's 14px) legitimately have different font-sizes by
   design — so a `left: Nch` default computes a different pixel offset in
   a frozen thead cell than in the matching frozen tbody cell for the same
   column, and the header cell drifts out of alignment while scrolling.
   Confirmed the same way: scripting real scroll offsets showed the tbody
   cell staying perfectly put while the thead cell drifted by exactly the
   px gap between `Nch` evaluated at 12px vs 14px. */
.freeze-pane {
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible;
}
.freeze-pane .freeze-col-1,
.freeze-pane .freeze-col-2,
.freeze-pane .freeze-col-3 {
    position: sticky;
    z-index: 2;
    background: var(--card-bg);
}
.freeze-pane .freeze-col-1 { left: 0; }
.freeze-pane thead .freeze-col-1,
.freeze-pane thead .freeze-col-2,
.freeze-pane thead .freeze-col-3 {
    z-index: 3;
}

/* Collapsible report sections. */
.content details {
    margin: 1.25rem 0;
}
.content summary {
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    list-style: revert;
}
.content details[open] summary {
    margin-bottom: 0.4rem;
}
.line-items-scroll table { border: none; margin: 0; }
.line-items-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Report-style selection screens (filter fields in a row, results table
   below) — stretches full width instead of the narrow single-column
   entry-form default, and lays fields out left-to-right in DOM order. */
form.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
    max-width: none;
}
form.filter-form label {
    margin-bottom: 0;
    flex: 1 1 150px;
    min-width: 130px;
    max-width: 200px;
}
form.filter-form button,
form.filter-form a.button {
    flex: 0 0 auto;
}

/* Keeps Date From/Date To adjacent as one unit — wraps together as a pair
   rather than landing on separate rows independently. */
.filter-date-group {
    display: flex;
    gap: 0.75rem;
    flex: 0 0 auto;
}
.filter-date-group label {
    flex: 0 0 auto;
    min-width: 130px;
    max-width: 150px;
}

.filter-form-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

/* Report results: fills remaining vertical space (see .fill-remaining) and
   scrolls internally, matching the same pattern as invoice line items. */
.results-section h2 {
    flex: 0 0 auto;
}
.results-scroll {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    box-shadow: var(--content-shadow);
}
.results-scroll table { border: none; margin: 0; }
.results-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 0.25rem;
    color: var(--content-text);
    padding: 0.45rem 0.6rem;
    font-family: inherit;
    font-size: 0.875rem;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--link);
    box-shadow: 0 0 0 1px var(--link);
}

/* Forms embed a line-item <table> inline (invoice/cylinder entry) — that
   inner table shouldn't get the outer card treatment again. */
form table {
    border: 1px solid var(--card-border);
    border-radius: 0.375rem;
    margin: 0.5rem 0 1rem;
    width: 100%;
}

button, a.button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
button:hover { background: #0059c1; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Row of actions above a list (e.g. "+ New X" and "Delete Selected"). */
.page-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.button-danger {
    background: var(--negative);
    border-color: var(--negative);
}
.button-danger:hover { background: #8a0606; }

.button-success {
    background: var(--positive);
    border-color: var(--positive);
}
.button-success:hover { background: #1c5a2e; }

/* Explanatory copy above a form or table — quieter than body text so it
   reads as guidance rather than content. */
.hint {
    color: var(--content-text-muted);
    font-size: 0.85rem;
    max-width: 46rem;
    margin: 0 0 1rem;
}
.hint-inline {
    color: var(--content-text-muted);
    font-size: 0.78rem;
}

/* Buttons rendered inside a table cell (per-row Edit) are smaller in both
   dimensions than page-level actions. */
td .button {
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
}

/* Narrower than a normal button, but same height — keep the default's
   vertical padding and font-size, only shrink the horizontal padding. */
.button-small {
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
}

/* Table-row Delete buttons read as plain text links rather than filled
   buttons, matching Fiori's convention of one primary action per view.
   (Edit/Cancel are already plain <a> tags, styled by the base `a` rule
   above — no override needed for those.) */
td form.inline button {
    background: transparent;
    border: none;
    color: var(--link);
    padding: 0;
    font-weight: 500;
}
td form.inline button:hover { text-decoration: underline; background: transparent; }

/* Activate/Deactivate are a deliberate, less-common action (they affect
   whether an account can log in at all) — worth standing out as a real
   filled button rather than blending in as another plain-text link next
   to Edit. Sized to match `td .button` so it lines up with Edit. */
td form.inline button.button-solid {
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    border-radius: 0.25rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
}
td form.inline button.button-solid:hover {
    background: #0059c1;
    text-decoration: none;
}
/* Same specificity as .button-solid above, so these actually win instead of
   losing to its blue background — Deactivate reads as a warning (red),
   Activate as a positive action (green). */
td form.inline button.button-solid.button-danger {
    background: var(--negative);
    border-color: var(--negative);
}
td form.inline button.button-solid.button-danger:hover { background: #8a0606; }
td form.inline button.button-solid.button-success {
    background: var(--positive);
    border-color: var(--positive);
}
td form.inline button.button-solid.button-success:hover { background: #1c5a2e; }

.error {
    color: var(--negative);
    background: rgba(170, 8, 8, 0.06);
    border: 1px solid rgba(170, 8, 8, 0.25);
    border-radius: 0.375rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}
.success {
    color: var(--positive);
    background: rgba(37, 111, 58, 0.06);
    border: 1px solid rgba(37, 111, 58, 0.25);
    border-radius: 0.375rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

/* --- Login page (no shell chrome, follows the light content theme) --- */
.login-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--content-bg);
}
.login-box {
    width: 320px;
    padding: 2rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    box-shadow: var(--content-shadow);
}
.login-box h1 {
    font-size: 1.2rem;
    margin: 0 0 1.25rem;
    text-align: center;
    color: var(--content-text);
}
.login-box label {
    display: block;
    font-size: 0.8rem;
    color: var(--content-text-muted);
    margin-bottom: 1rem;
}
.login-box input {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
}
.login-box button { width: 100%; justify-content: center; margin-top: 0.5rem; }

.home-logo {
    text-align: left;
    margin: 1rem 0 1.5rem;
    background: #f5f6f7;
}
.home-logo img {
    max-width: 520px;
    width: 100%;
    height: auto;
}

@media (max-width: 720px) {
    .sidenav { position: fixed; top: var(--toolbar-height); bottom: 0; left: 0; z-index: 10; box-shadow: var(--nav-shadow); }
    .shell:not(.nav-collapsed) .sidenav { width: var(--sidenav-width); }
    .shell.nav-collapsed .sidenav { width: 0; border: none; overflow: hidden; }
    .content { padding: 1rem; }
    .app-tagline { display: none; }
}

/* Header clock. Sits just before the user chip; tabular figures so the
   width doesn't jitter as the minute changes. */
.app-clock {
    font-size: 0.8rem;
    color: var(--nav-text-muted);
    white-space: nowrap;
    margin-right: 0.85rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
/* On a narrow screen the username and actions matter more than the clock. */
@media (max-width: 640px) {
    .app-clock { display: none; }
}