/* ==========================================================================
   compact.css — UI density / "fits without browser zoom" layer
   --------------------------------------------------------------------------
   Loaded LAST in resources/views/layouts/app.blade.php so it wins over
   bootstrap.min.css, app.min.css and the Bootstrap 5 CDN stylesheet.

   Goal: make every backend screen fit at 100% browser zoom and show more data
   per screen, instead of forcing users to zoom the browser out manually.

   Why the app looked oversized:
   The theme was authored for --bs-body-font-size: 0.9rem, but the Bootstrap 5
   stylesheet that the layout loads *after* app.min.css re-declares
   --bs-body-font-size: 1rem, so everything rendered ~11% larger than designed
   and users had to zoom the browser out to fit more data on screen.

   How this fixes it (single uniform scale — a baked-in browser zoom-out):
   1. `html { zoom: 0.88 }` scales the ENTIRE page uniformly — rem AND px,
      layout geometry AND text — exactly like the browser's own zoom-out.
      Because it is a uniform transform, the coupled px values in the theme
      (sidebar 250px, top bar 70px, .main-content/.page-content offsets, the
      collapsed-sidebar flyouts, table/card/form paddings) all shrink together
      and can never misalign with each other.
   2. --bs-body-font-size is re-asserted so body copy stays at a comfortable
      absolute size (0.95rem x 16px x 0.88 = ~13.4px) instead of the Bootstrap
      5 CDN's 1rem. Under zoom this keeps text exactly the same size the
      previous font-size-based approach produced, while additionally shrinking
      all px geometry — the part that was still forcing users to zoom out.

   `zoom` is a uniform scale (spec: CSS Viewport, supported in Chrome, Edge,
   Safari and Firefox 126+) — it does not re-flow the layout the way a font
   size change does, so no colour, border, radius, shadow or individual layout
   rule is modified. The design, look and feel are unchanged, just denser.
   ========================================================================== */

/* --- 1. Whole-page scale (equivalent to browser zoom-out to 88%) ---------- */
html {
    zoom: 0.90;
}

/* Fallback for engines without `zoom` support (all modern Chrome/Edge/Safari
   and Firefox 126+ support it): shrink rem-based sizing only. This is the
   same partial result the earlier font-size-only approach produced. */
@supports not (zoom: 0.90) {
    html {
        font-size: 88%;
    }
}

/* --- 2. Bootstrap body tokens --------------------------------------------- */
:root {
    /* Re-assert the theme's intended body size against the Bootstrap 5 CDN
       override. 0.95rem x 16px x 0.88 = ~13.4px — comfortable for dense data
       entry screens. */
    --bs-body-font-size: 0.95rem;
    /* Slightly tighter leading reinforces the "more per screen" feel. */
    --bs-body-line-height: 1.45;
}