/* Dordle Console app styles.

   Radzen's material3 theme supplies the component styling; this file does three things on top:
   sets Montserrat as the single typeface, applies the Dordle brand colours to the app shell so
   it matches the sign-in screen, and tightens typography/density for a data-heavy console.

   Everything is driven through Radzen's own custom properties where one exists, so the theme
   stays in charge of the details. */

:root {
    /* Radzen renders ALL text through this one variable. The previous value fell back to
       `serif`, which is what actually rendered whenever Montserrat failed to load. */
    --rz-text-font-family: 'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Brand, taken from the design handoff's tokens (css/login.css :root) so the console and
       the sign-in screen are the same product. Navy = brand/authority, blue = the wordmark
       blue used for actions. */
    --dordle-navy: #093f57;
    --dordle-blue: #0e678e;
    --dordle-line: #e2e8eb;

    --rz-primary: var(--dordle-blue);
    --rz-primary-light: #1a7ba6;
    --rz-primary-dark: #0b5474;

    /* App shell: dark header, light rail, faintly tinted canvas so white cards read as raised. */
    --rz-header-background-color: var(--dordle-navy);
    --rz-header-color: #ffffff;
    --rz-header-min-height: 3.5rem;
    --rz-sidebar-background-color: #ffffff;
    --rz-sidebar-border-inline-end: 1px solid var(--dordle-line);
}

/* Set directly: material3 declares --rz-body-background-color but nothing consumes it, so
   overriding the variable alone leaves the canvas white. Uses the handoff's paper tone so the
   console canvas matches the sign-in form pane. */
.rz-body {
    margin-top:20px;
    background: #ffffff;
}

html, body {
    margin: 0;
    font-family: var(--rz-text-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Montserrat is geometrically wide and reads light at UI sizes; slight negative tracking and a
   heavier stem keep headings from looking washed out. */
h1, h2, h3, h4, h5, h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6 {
    font-weight: 600;
    letter-spacing: -0.012em;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.rz-header {
    box-shadow: 0 1px 0 rgba(10, 37, 64, 0.08);
}

.rz-header .app-logo {
    height: 26px;
    width: auto;
    display: block;
}

/* The header sits on navy, so Radzen's link and toggle defaults have to invert. */
.rz-header a,
.rz-header a:hover,
.rz-header .rz-link,
.rz-header .rz-sidebar-toggle {
    color: #ffffff;
}

.rz-header .rz-link:hover {
    color: #cfe0ff;
    text-decoration: underline;
}

.rz-header .app-user {
    color: #a9c2e0;
    font-size: 0.8125rem;
}

.rz-header .app-divider {
    width: 1px;
    height: 1.25rem;
    background: rgba(255, 255, 255, 0.18);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.rz-sidebar {
    padding-block-start: 0.5rem;
}

.rz-navigation-item-link {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.005em;
}

.rz-navigation-item-wrapper-active > .rz-navigation-item-link {
    font-weight: 600;
    color: var(--dordle-blue);
}

/* ── Page canvas ─────────────────────────────────────────────────────────── */

/* Deliberately no max-width: the report and audit grids are wide by nature, and constraining
   them would force horizontal scrolling on exactly the screens this console is used on. */
.app-page {
    padding: 1.5rem 1.75rem 2.5rem;
}

/* ── Data grids ──────────────────────────────────────────────────────────── */

/* Selectors below were checked against the live DOM — Radzen 11.2 renders
   `.rz-data-grid .rz-datatable` with UNCLASSED tbody/tr/td, so the cell rules have to hang off
   the table elements rather than the `.rz-datatable-data` class older versions used. */

/* Tabular figures so amounts, dates and reference numbers align column-wise — the biggest
   readability win in a bureau console, and Montserrat's proportional digits do not align
   without it. Set on the grid root; the cells inherit. */
.rz-data-grid,
.rz-pager {
    font-variant-numeric: tabular-nums;
}

/* Radzen already renders headers at 700; only the tracking needs adjusting for Montserrat. */
.rz-data-grid thead > tr > th {
    letter-spacing: 0.01em;
}

.rz-data-grid tbody > tr:hover > td {
    background: #f2f5fa;
}

.rz-data-grid tbody > tr > td,
.rz-data-grid thead > tr > th {
    padding-block: 0.5rem;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

.rz-form-field-label,
.rz-label {
    font-weight: 500;
}

/* Native controls do not inherit the family on their own. */
input, select, textarea, button {
    font-family: inherit;
}

/* ── Validation (unchanged from the original file) ───────────────────────── */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}