:root {
    /* Height budget for full-page data grids.
       Subtracted app chrome: .top-row 4.25rem + .content padding 2*2rem
       + .data-panel padding/borders ~2.1rem = ~10.4rem, rounded to 11rem.
       In Development the .dev-status footer adds ~2.1rem, which only makes
       the page scroll slightly further; it does not clip anything. */
    --ziony-grid-viewport-height: max(24rem, calc(100dvh - 11rem));

    /* Secondary grids embedded in detail pages / tabs: bounded but not
       viewport-dominating, so a detail form stays readable. */
    --ziony-grid-embedded-height: min(60dvh, 40rem);
}

.ziony-grid {
    height: var(--ziony-grid-viewport-height);
}

.ziony-grid-embedded {
    height: var(--ziony-grid-embedded-height);
}

/* Row-aware detail grids grow with small result sets, then keep a bounded
   viewport and let DevExpress scroll their rows internally. */
.ziony-grid-adaptive {
    max-height: min(60dvh, 39rem);
}

html {
    /* Global UI scale. 90% of the browser's default (normally 16px -> 14.4px),
       calibrated against "browser zoom at 90% looks right".
       Every rem in Ziony's own CSS and in the DevExpress Blazing Berry theme
       scales from this, so this is the single knob for overall UI size.
       Expressed as a percentage rather than a fixed px so a user's own browser
       font-size preference is still respected. */
    font-size: 90%;
}

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

body {
    background: var(--ziony-color-canvas);
    color: var(--ziony-color-text);
    font-family: var(--ziony-font-sans);
}

.content:has(> .login-page),
.content:has(> .register-page) {
    display: flex;
    flex-direction: column;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--ziony-primary);
}

/* Blazing Berry is retained as the DevExpress base theme, while Ziony owns
   the grid interaction palette. Opaque light-blue cell backgrounds cover the
   vendor theme's purple selection layer and keep selected text dark. */
.dxbl-grid {
    --dxbl-grid-selection-bg: var(--ziony-primary-soft);
    --dxbl-grid-selection-color: var(--ziony-text-strong);
    --dxbl-grid-focus-bg: var(--ziony-primary-soft);
    --dxbl-grid-focus-color: var(--ziony-text-strong);
    --dxbl-grid-focus-frame-color: var(--ziony-primary-soft-hover);
    --dxbl-grid-selection-focus-bg: var(--ziony-primary-soft);
    --dxbl-grid-selection-focus-color: var(--ziony-text-strong);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1:focus {
    outline: none;
}

.page-heading {
    margin-bottom: 1.25rem;
}

.page-heading h1 {
    color: var(--ziony-color-text);
    font-size: var(--ziony-font-size-page-title);
    letter-spacing: 0;
    margin-bottom: 0.35rem;
}

.page-heading p {
    color: var(--ziony-color-text-muted);
    line-height: 1.55;
    max-width: 58rem;
}

.placeholder-panel {
    background: var(--ziony-color-surface);
    border: 1px solid var(--ziony-color-border);
    border-radius: var(--ziony-radius-sm);
    padding: 1.25rem;
}

.placeholder-panel h2 {
    color: var(--ziony-color-text);
    font-size: 1.05rem;
    letter-spacing: 0;
    margin-bottom: 0.45rem;
}

.placeholder-panel p {
    color: var(--ziony-color-text-muted);
    line-height: 1.55;
    margin-bottom: 0;
}

.blazor-error-boundary {
    background: #b32121;
    color: #ffffff;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

body.task-column-resizing {
    cursor: ew-resize;
    user-select: none;
}