/* ============================================================================
   Layout-widths.css — viewport-relative sizing tokens for HD → 4K screens.
   Loaded after Layout.css so its rules take precedence on shared selectors.

   Targets desktop only (1280px → 3840px). The fixed-pixel widths in
   Layout.css were postage-stamp on 4K; here we clamp so panels grow with the
   viewport but stay within readable bounds.
   ========================================================================== */

/* ----- Left navigation panel: clamp width to viewport ----- */
/* Add .app-nav-panel as a second class on the existing .nav-panel element.
   The double-class selector beats Layout.css's plain .nav-panel rule. */
.nav-panel.app-nav-panel {
    width: min(320px, 18vw);
    min-width: 240px;
    /* Keep the collapse-offset in sync with the fluid width.
       (Layout.css's .nav-panel.nav-collapsed sets margin-left: -220px which
       leaves a sliver visible when the panel is wider than 220px.) */
}

.nav-panel.app-nav-panel.nav-collapsed {
    margin-left: calc(-1 * max(240px, min(320px, 18vw)));
}

/* When the nav panel is wider than 220px, the content's left margin needs to
   match. Layout.css hard-codes 220px; override on .app-content.
   max(240px, ...) keeps the content past the panel's 240px floor on
   narrow viewports where 18vw drops below 240. */
.app-content {
    margin-left: max(240px, min(320px, 18vw));
}

/* ----- Content area: cap reading width, keep left-aligned ----- */
/* Don't auto-center: the sidebar is on the left, so content should stay
   pinned to the sidebar edge and just stop growing past 1600px on wide
   screens. The right padding keeps text off the screen edge. */
.app-content {
    max-width: 1600px;
    padding-right: 28px;
    margin-right: auto; /* eats remaining space on the right; left margin
                           still clears the sidebar. */
}

/* When the user collapses the nav panel, drop the left margin to 0. */
.app-content.nav-collapsed {
    margin-left: 0;
}

/* ----- Reusable popup widths ----- */
/* Apply via PopupElementCssClass / ControlStyle.CssClass on DevExpress
   PopupControl, or via Styles.PopupEditForm.CssClass on a GridView's
   SettingsPopup.EditForm. Width clamps so the popup fills more of the
   screen on 4K but doesn't become uselessly wide. */

.cams-popup--bounded,
.cams-popup--bounded.dxpc-main {
    min-width: 600px;
    max-width: 1100px;
    width: clamp(600px, 50vw, 1100px) !important;
}

.cams-popup--wide,
.cams-popup--wide.dxpc-main {
    min-width: 800px;
    max-width: 1400px;
    width: clamp(800px, 65vw, 1400px) !important;
}

/* DevExpress wraps popup content in a table with its own width attribute.
   Force the inner table to follow the outer popup width so the form
   stretches to fill the popup. */
.cams-popup--bounded table.dxpc-content,
.cams-popup--wide table.dxpc-content,
.cams-popup--bounded .dxpc-contentWrapper,
.cams-popup--wide .dxpc-contentWrapper {
    width: 100% !important;
}