/* Dashboard full-screen view. Paired with js/ui-helper/fullscreen.js and
   DashboardFullScreenController. Two paths:
   1. Native Fullscreen API — the browser paints only .Dashboard-canvas, so the
      shell chrome is gone for free; we only restyle the canvas to fill the
      screen and float an exit button.
   2. Fallback (API denied/unavailable) — a body class hides the chrome and
      pins the canvas over the viewport. */

/* ---- Native full screen ---- */
/* The fullscreened element is the only scroll container: outside full screen
   the XAF .main-content (overflow-auto) scrolls the dashboard, but the browser
   paints only .Dashboard-canvas's subtree here, so that ancestor is gone. The
   canvas is normally a flex column whose inner .grid-canvas-sizer pins
   overflow-y:hidden (it relies on the page to scroll); in full screen that
   clips tall dashboards. Make the canvas a plain block scroll container and let
   the inner wrappers grow past it so this element scrolls. */
.Dashboard-canvas:fullscreen {
    display: block;
    background: var(--dxbl-panel-bg, var(--dxbl-body-bg, #ffffff));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    box-sizing: border-box;
}

/* ---- Fallback: hide the XAF shell and expand the canvas ---- */
body.dashboard-fullscreen-fallback .header,
body.dashboard-fullscreen-fallback .xaf-sidebar.sidebar,
body.dashboard-fullscreen-fallback .sidebar-sm-shadow {
    display: none !important;
}

body.dashboard-fullscreen-fallback .Dashboard-canvas {
    display: block;
    position: fixed;
    inset: 0;
    /* Below DevExpress popups/modals (z-index 1050+), so the row-click and New dialogs open above it. */
    z-index: 1000;
    background: var(--dxbl-panel-bg, var(--dxbl-body-bg, #ffffff));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    box-sizing: border-box;
}

/* "Last refreshed" label + refresh button: pinned directly BELOW the exit control, right-aligned to the
   same edge, so the two stack as one cluster and stay put while the dashboard scrolls. 50px = the exit
   button's 12px top inset + its ~30px height + an 8px gap; the 30px height matches the exit button so
   the refresh icon is as tall as it. */
body.dashboard-fullscreen-fallback .Dashboard-canvas .Dashboard-header__meta {
    position: fixed;
    top: 50px;
    right: 12px;
    height: 30px;
    z-index: 2147482999;
    /* Opaque, so dashboard content scrolling underneath never shows through the label. */
    padding: 0 4px 0 10px;
    background: var(--dxbl-panel-bg, var(--dxbl-body-bg, #ffffff));
    border-radius: 6px;
}

/* Already full screen: the exit control replaces the header's Full Screen button, which would only
   duplicate it (and re-enter) here. */
body.dashboard-fullscreen-fallback .Dashboard-canvas .Dashboard-header__fullscreen-btn {
    display: none !important;
}

/* Inner wrappers must not clip vertically once the canvas is the scroll
   container. The sizer's overflow-y:hidden and the grid root's inline overflow
   would otherwise trap the content at the visible height; let both grow so the
   canvas above scrolls the full dashboard. Scoped to full screen only. */
.Dashboard-canvas:fullscreen .grid-canvas-sizer,
body.dashboard-fullscreen-fallback .Dashboard-canvas .grid-canvas-sizer {
    overflow: visible;
}

.Dashboard-canvas:fullscreen .grid-canvas,
body.dashboard-fullscreen-fallback .Dashboard-canvas .grid-canvas {
    overflow: visible !important;
}

/* ---- Floating exit control (both paths) ---- */
.dashboard-fullscreen-exit {
    /* fixed, not absolute: inside a fullscreen element `fixed` anchors to that
       element's own viewport, so the exit control stays pinned to the corner
       while the dashboard scrolls (absolute would scroll away with content).
       In the fallback path the canvas is itself position:fixed inset:0, so a
       fixed child pins to the viewport corner just the same. */
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1;
    color: var(--dxbl-text-color, #212529);
    background: var(--dxbl-panel-bg, #ffffff);
    border: 1px solid var(--dxbl-border-color, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.dashboard-fullscreen-exit:hover {
    background: var(--dxbl-body-bg, #f3f3f3);
}

.dashboard-fullscreen-exit svg {
    flex: 0 0 auto;
}