/*
 * Responsive layout for Pulse Next (ADO 3120). Loaded after site.css; plain CSS so it does not need the SCSS compiler.
 * Same look and colours as before: these rules only decide how the shell and pages fit at 1366 / 1024 / 768 / 390 px.
 * Breakpoints: 768px (sidebar becomes an overlay, closed by default), 576px (tighter spacing on phones). The header bar's
 * breakpoints (900px, 576px) are in PulseToolbar.razor.css.
 */

/* ---------- Shell: header and body never grow past the viewport ---------- */

/* Radzen's grid uses "auto 1fr"; 1fr cannot shrink below its content, so a wide header or table pushed .rz-header and
   .rz-body past the right edge (clipped Create buttons and grid columns at 1024, audit N4). minmax(0, 1fr) keeps the
   content column inside the viewport; wide content scrolls inside its own container instead. */
.rz-layout.pulse-layout {
    grid-template-columns: auto minmax(0, 1fr);
}

.pulse-layout > .rz-header,
.pulse-layout > .rz-body {
    min-width: 0;
    width: auto;
}

/* Flex columns default to min-width:auto, so one wide table made MainLayout's page column (and every row in it) as
   wide as the table. With min-width:0 the columns stay inside the page and the table scrolls inside its grid. */
.pulse-layout > .rz-body .rz-row > [class*="rz-col"] {
    min-width: 0;
}

/* Page content never forces horizontal scrolling of the page: grids scroll inside themselves. */
.pulse-layout > .rz-body .rz-data-grid {
    max-width: 100%;
}

.pulse-layout > .rz-body img {
    max-width: 100%;
}

/* ---------- Header toolbar ---------- */

/* The header bar's own layout (56px row, tenant picker, shortcuts, user menu and their breakpoints at 900px and 576px)
   lives in PulseWebComponents/Components/Toolbar/PulseToolbar.razor.css. Only the host sizing and the tenant list (Radzen
   moves the open list to <body>, outside the component's scoped styles) are global. */
.pulse-toolbar-host {
    width: 100%;
    min-width: 0;
}

/* Search boxes at the top of dropdown lists: room between the search icon and the text, and keyboard focus underlines the
   whole search row instead of drawing a tight box around the text alone. */
.rz-dropdown-filter-container,
.rz-multiselect-filter-container,
.rz-listbox-filter-container {
    gap: 0.625rem;
    transition: box-shadow 0.15s ease;
}

.rz-dropdown-filter-container .rzi-search,
.rz-multiselect-filter-container .rzi-search,
.rz-listbox-filter-container .rzi-search {
    flex: none;
    color: var(--rz-text-secondary-color);
}

.rz-dropdown-filter-container:focus-within,
.rz-multiselect-filter-container:focus-within,
.rz-listbox-filter-container:focus-within {
    box-shadow: inset 0 -2px 0 var(--rz-primary);
}

.rz-dropdown-filter-container .rz-inputtext:focus,
.rz-dropdown-filter-container .rz-inputtext:focus-visible,
.rz-multiselect-filter-container .rz-inputtext:focus,
.rz-multiselect-filter-container .rz-inputtext:focus-visible,
.rz-listbox-filter-container .rz-inputtext:focus,
.rz-listbox-filter-container .rz-inputtext:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* The open tenant list stays a normal white Radzen list; the current tenant keeps Radzen's selected tint and gets a check. */
#popup-pulse-tenant-dropdown .rz-dropdown-item.rz-state-highlight {
    position: relative;
    padding-right: 2.75rem;
    font-weight: 500;
}

#popup-pulse-tenant-dropdown .rz-dropdown-item.rz-state-highlight::after {
    content: "check" / "";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--rz-icon-font-family);
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
    font-feature-settings: "liga";
}

/* ---------- Sidebar: overlay on small screens (B-12) ---------- */

@media (max-width: 768px) {
    .pulse-layout > .rz-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        max-width: 85vw;
        z-index: 1040 !important;
    }

    .pulse-layout > .rz-sidebar.rz-sidebar-expanded {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    .pulse-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1039;
        background-color: rgba(0, 0, 0, 0.32);
    }
}

@media (min-width: 769px) {
    .pulse-sidebar-backdrop {
        display: none;
    }
}

/* ---------- Page spacing on phones ---------- */

@media (max-width: 576px) {
    .pulse-layout > .rz-body {
        padding: 0.5rem;
    }

}

/* ---------- Page toolbars (C-18): title, filters, search and primary action wrap instead of overflowing ---------- */

.pulse-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.pulse-page-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}

.pulse-page-toolbar .rz-button {
    white-space: nowrap;
}

.pulse-page-toolbar-search {
    flex: 1 1 220px;
    max-width: 320px;
    min-width: 0;
}

@media (max-width: 576px) {
    .pulse-page-toolbar-actions {
        justify-content: flex-start;
    }

    .pulse-page-toolbar .rz-button {
    white-space: nowrap;
}

.pulse-page-toolbar-search {
        max-width: none;
    }
}

/* ---------- Dialogs: never wider than the screen ---------- */

.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
    max-width: 95vw;
}

@media (max-width: 768px) {
    .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        max-width: 100vw;
    }

    .rz-dialog-confirm,
    .rz-dialog-alert {
        max-width: min(355px, 95vw);
    }
}

/* ---------- Long lists (C-13): header stays visible while the rows scroll ---------- */

.pulse-scroll-grid {
    max-height: calc(100vh - 260px);
}

/* ---------- Tabs and pagers on narrow screens ---------- */

/* Tab strips (Scripts, Administrator, System Administrator, Log details) wrap instead of pushing the page sideways. */
@media (max-width: 768px) {
    .pulse-layout > .rz-body .rz-tabview-nav {
        flex-wrap: wrap;
    }
}

/* Card pages (Logs, Intro, Projects) keep a 3rem gap above the card for a breadcrumb that is never shown; on tablets and
   phones that space is better used by content. */
@media (max-width: 768px) {
    .pulse-layout > .rz-body .rz-card.pulse-card {
        margin-top: 0.5rem;
        padding: 1rem;
    }
}

/* Contrast with real data (found by the accessibility scan on dev): errored cells and secondary text on the striped grid
   rows, and the amber "multiple processors" note, were just under 4.5:1. Same colours, one step darker. */
table td .rz-cell-data.invalid {
    color: #b3261e;
}

.rz-data-grid .text-secondary {
    color: #545b62 !important;
}

.text-warning {
    color: #8a5200 !important;
}

/* 3145: connector DLLs with their deployed versions (Package Versions tab, System Administrator companies). */
.pulse-dll-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pulse-dll-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; line-height: 1.45; }
.pulse-dll-name { overflow-wrap: anywhere; }
.pulse-dll-version { font-family: ui-monospace, Consolas, monospace; white-space: nowrap; color: #37474f; }
.pulse-module-dlls { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.75rem 1.5rem; }
.pulse-module-dlls-item { min-width: 0; }
.pulse-module-dlls-name { font-weight: 600; margin-bottom: 0.25rem; }

/* Connections: when each token was generated, under the signed-in identity. */
.pulse-conn-identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pulse-conn-identity > span:first-child { overflow-wrap: anywhere; }
.pulse-conn-generated { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: #545b62; }
.pulse-conn-generated .rzi { font-size: 15px; }

/* Script editor header: buttons keep their full labels and wrap to the next line instead of clipping. */
.script-editor-actions { row-gap: 0.5rem; align-self: end; }
.script-editor-actions .rz-button { flex: none; white-space: nowrap; }

/* Script editor fullscreen: the code and the errors panel fill the window together (dialogs still open above it). */
.script-editor-fullscreen {
    position: fixed !important;
    inset: 0;
    z-index: 1000;
    background: var(--rz-base-background-color, #fff);
    padding: 0.5rem;
    height: 100vh !important;
    min-height: 0;
}
.script-editor-fullscreen .editor-column,
.script-editor-fullscreen .editor-surface { height: 100%; }
.code-editor-fullscreen-actions { display: inline-flex; gap: 0.375rem; margin-right: 0.75rem; }
.code-editor-fullscreen-actions .rz-button { white-space: nowrap; }
/* Radzen gives .rz-body transform: translateZ(0), which makes position: fixed relative to the page body rather than the
   window; lift it (and put the body above the header and sidebar) only while the editor is fullscreen. */
.rz-layout .rz-body:has(.script-editor-fullscreen) { transform: none; z-index: 1000; }