/* ==========================================================================
   Compact View — user-toggleable density mode (Settings > User Interface).
   Applied via a "compact-view" class MainLayout.razor.cs toggles on <html>
   whenever SettingsModel.CompactView is on (see SyncCompactViewAttributeAsync).

   Radzen already drives almost all of its own component spacing through CSS
   custom properties (see material3-base.css) - overriding those here reaches
   every RadzenCard/RadzenDataGrid/RadzenPanel/etc. without a rule per
   component or a specificity fight. The one thing that ISN'T behind a
   variable is the app's own convention of inline `Style="margin: 1rem"` on
   RadzenRow/RadzenColumn (used across nearly every Add/Edit dialog) - those
   need an explicit !important override further down, since a plain inline
   style otherwise always wins over a stylesheet rule.
   ========================================================================== */
html.compact-view {
    --rz-card-padding: 0.5rem;
    --rz-panel-padding: 0.5rem;
    --rz-panel-content-margin: 0;
    --rz-fieldset-padding: 0 0.5rem 0.5rem;
    --rz-dialog-content-padding: 0.5rem;
    --rz-layout-body-padding: 0.5rem;
    --rz-layout-body-margin: 0 0.375rem 0.375rem;
    --rz-tabs-padding: 0.5rem;
    --rz-row-gap: 0.5rem;
    --rz-gap: 0.5rem;

    --rz-grid-cell-padding: 0.125rem 0.375rem;
    --rz-grid-header-cell-padding: 0.125rem 0;
    --rz-grid-header-padding: 0.125rem 0.5rem;
    --rz-grid-filter-padding: 0.125rem 0.375rem;
    --rz-grid-group-header-padding: 0.125rem;
    --rz-grid-group-header-gap: 0.125rem;
    --rz-pager-padding: 0.125rem;
    --rz-pager-gap: 0.125rem;
    --rz-pager-summary-padding: 0.25rem;

    --rz-panel-menu-item-padding-block: 0.4rem;
    --rz-panel-menu-item-padding-inline: 0.5rem;
    --rz-panel-menu-item-2nd-level-padding-block: 0.3rem;

    --rz-dropdown-item-padding: 0.4rem 0.5rem;
    --rz-listbox-item-padding: 0.4rem 0.5rem;
    --rz-datalist-item-padding: 0.5rem;

    --rz-alert-padding: 0.5rem;
    --rz-alert-margin: 0.25rem 0;
    --rz-alert-gap: 0.5rem;
}

/* RadzenRow/RadzenColumn's ubiquitous Style="margin: 1rem" and RadzenStack's
   Gap="1rem" both render as inline styles - a stylesheet rule needs
   !important to beat those, same way mobile.css already does for its own
   viewport-based overrides. This flattens per-component gap/margin choices
   uniformly; a known, deliberate simplification for a first density pass. */
html.compact-view .rz-row,
html.compact-view .rz-col {
    margin: 0.4rem !important;
}

html.compact-view .rz-stack {
    gap: 0.5rem !important;
}

/* Own app-level classes (pims-card grid, page header) - see mobile.css for
   the same pattern keyed off a viewport breakpoint instead of this toggle. */
html.compact-view .pims-card {
    padding: 0.5rem !important;
}

html.compact-view .page-header {
    padding: 0.5rem 1rem !important;
}