/* ============================================================================
   Global UI density
   ----------------------------------------------------------------------------
   The default UI renders oversized at 100% browser zoom. This file shrinks it
   without disturbing page geometry.

   ►► NEVER scale the document with `zoom` (or a root `transform: scale`).

   It looks like a free holistic lever, but it silently breaks every overlay a
   script positions from a measured coordinate — Select2 dropdowns, the
   bootstrap-datepicker, Summernote menus, tooltips and popovers.

   Those libraries read a field's position with jQuery `.offset()`, which
   reports ALREADY-SCALED pixels, then write the value straight back as `top` /
   `left`. The browser scales that write a second time, so the menu lands at
   `factor ×` its intended coordinate — drifting further off the further the
   field sits from the top-left origin, and overlapping the field it belongs
   to. At `zoom: 0.85` a mid-page dropdown missed its field by ~36px across and
   ~53px up, and opened upward with room below (measured, Chrome).

   The root font-size does the same job safely: AdminLTE 3 and Bootstrap 4 size
   almost everything in `rem` (adminlte.min.css carries ~1580 rem-based
   declarations against 35 px font-sizes), so this scales type, padding,
   controls and chrome alike — while leaving the pixel coordinate space that
   overlays measure in untouched.

   ►► TO TUNE: change the two values below. Keep them in step: the font-size is
      the overall scale, the sidebar width is the one piece of chrome that is
      hard-coded in px upstream and so cannot follow a rem.
        16px   / 250px = original size
        15px   / 235px = subtle
        14px   / 215px = moderate (~87.5%)
        13.5px / 210px = current (~84%)
        13px   / 200px = tighter
   ============================================================================ */

html {
    font-size: 13.5px;
}

:root {
    /* Single source of truth: the sidebar and the content offset must always
       agree, or the layout tears. */
    --hr-sidebar-width: 210px;
}

/* adminlte-compatibility.css hard-codes 250px (px, so no rem can reach it) and
   is loaded just before this file, hence the matching !important. */
.main-sidebar,
aside.main-sidebar {
    width: var(--hr-sidebar-width) !important;
    max-width: var(--hr-sidebar-width) !important;
}

.content-wrapper,
.main-content {
    margin-left: var(--hr-sidebar-width) !important;
}