/*
 * bogo-modern.css - visual skin for the blue office go web apps.
 *
 * Pure presentation: no component, markup or behaviour is changed here.
 * Direction: "instrument panel" - a recessed neutral canvas, white surfaces that
 * float on it, hairline borders, tabular numerals, and exactly one saturated
 * accent (the customer colour) doing all of the signalling.
 *
 * Load order matters: link this AFTER site.css and <App>.styles.css so it wins
 * over the scoped component styles at equal specificity.
 * --bogo-accent is published by View/Theming/Theming.razor.
 */

:root {
    /* neutrals - cool, not cream */
    --bogo-canvas: #ffffff;
    --bogo-surface: #ffffff;
    --bogo-hairline: #e4e7eb;
    --bogo-hairline-strong: #d4d9df;
    --bogo-ink: #1b2430;
    /* 7.7:1 on white. The first try (#5d6b7a) sat at 5.4:1 and read grey next to the old
       near-black chrome - secondary has to stay a step down in weight, not in legibility. */
    --bogo-ink-muted: #475467;

    /* accent tints derived from the customer colour */
    --bogo-accent-06: color-mix(in srgb, var(--bogo-accent, #005df8) 6%, transparent);
    --bogo-accent-12: color-mix(in srgb, var(--bogo-accent, #005df8) 12%, transparent);
    --bogo-accent-24: color-mix(in srgb, var(--bogo-accent, #005df8) 24%, transparent);
    /* accent pulled towards ink so accent-on-white text stays readable for light brand colours */
    --bogo-accent-ink: color-mix(in srgb, var(--bogo-accent, #005df8) 72%, #101828);

    --bogo-radius-surface: 12px;
    --bogo-radius-control: 8px;
    --bogo-shadow-surface: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .06);
    --bogo-shadow-raised: 0 4px 14px rgba(16, 24, 40, .12);
}

/* ---------------------------------------------------------------- type ---- */

html, body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "cv05" 1; /* single-storey l gets a tail - fewer 1/l/I mix-ups in article numbers */
    color: var(--bogo-ink);
}

/* numbers in data surfaces line up in columns */
.dxbl-grid-table td,
.dxbl-pager,
.dxbl-text-edit-input {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- canvas ---- */

.page-layout .layout-item.content {
    background-color: var(--bogo-canvas);
}

/* ---------------------------------------------------------------- header ---- */

/* .p-0 is on the element (Header.razor) and only serves to outrank the scoped
   .navbar.header-navbar[b-xxx] rule (0,3,1 vs 0,3,0) - same trick as the burger below. */
nav.navbar.header-navbar.p-0 {
    background-color: var(--bogo-surface);
    border-bottom: 1px solid var(--bogo-hairline);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
    align-items: center;
    gap: .25rem;
}

/* The burger was a full-height slab: Header.razor.css stretches it and pads it
   horizontally, so it came out 40x56 with the icon off-centre. This selector carries
   .customerBgColor purely to outrank that scoped rule (0,3,1 vs 0,3,0) - the accent
   fill still comes from .customerBgColor itself. */
nav.header-navbar .navbar-toggler.customerBgColor {
    align-self: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: .625rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bogo-radius-control);
    box-shadow: 0 1px 2px var(--bogo-accent-24);
    transition: box-shadow .12s ease;
}

/* chrome, not an action - it deepens, it does not lift */
nav.header-navbar .navbar-toggler.customerBgColor:hover {
    box-shadow: 0 3px 8px var(--bogo-accent-24);
    transform: none; /* the generic .customerBgColor:hover lift below would otherwise apply */
}

/* the icon span is 2rem in the scoped sheet - too big to breathe inside a 2.5rem tile.
   .customerBgColor again only to outrank the scoped rule (0,4,1 vs 0,4,0). */
nav.header-navbar .navbar-toggler.customerBgColor .navbar-toggler-icon {
    height: 1.4rem;
    width: 1.4rem;
    background-position: center;
    background-size: contain;
}

nav.header-navbar .title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--bogo-ink);
}

/* --------------------------------------------------------------- sidebar ---- */

.page-layout .sidebar {
    background-color: var(--bogo-surface);
    border-right: 1px solid var(--bogo-hairline);
    box-shadow: none;
    padding-top: .5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--bogo-hairline-strong) transparent;
}

/* the floating drawer on small screens still needs to lift off the content */
@media (max-width: 999.98px) {
    .page-layout .sidebar.expand {
        box-shadow: var(--bogo-shadow-raised);
        border-right: none;
    }
}

.app-sidebar {
    --dxbl-treeview-item-border-radius: 10px;
    --dxbl-treeview-item-spacing-y: 2px;
    --dxbl-treeview-text-padding-y: .42rem;
    --dxbl-treeview-item-hover-bg: var(--bogo-accent-06);
    --dxbl-treeview-item-hover-color: var(--bogo-accent-ink);
    --dxbl-treeview-item-selection-color: #fff;
}

/* one weight step separates the current list from the rest - the bold-everything
   sidebar has no hierarchy left to spend. The 600 for the active item is set on the
   item container below (dxbl-active lives there, not on :first-child). */
.app-sidebar.dxbl-treeview .root-item > :first-child {
    --dxbl-treeview-font-weight: 500;
}

.app-sidebar .dxbl-treeview-item-container {
    color: var(--bogo-ink);
    transition: background-color .12s ease, color .12s ease;
}

/* selected list = rounded accent pill instead of a full-bleed slab */
.app-sidebar .dxbl-treeview-item-container.dxbl-active {
    --dxbl-treeview-font-weight: 600;
    box-shadow: 0 2px 6px var(--bogo-accent-24);
}

.app-sidebar .dxbl-treeview-item-text {
    letter-spacing: -.005em;
}

/* lists configured without an icon still start in the same text column
   (icon 14px + image spacing 6px) */
.app-sidebar .dxbl-treeview-item-container:not(:has(> .dxbl-image)) > .dxbl-treeview-item-text-container {
    margin-left: 20px;
}

/* icons read as quiet metadata until the row is active */
.app-sidebar .dxbl-treeview-item-container > .dxbl-image {
    color: var(--bogo-ink-muted);
}

.app-sidebar .dxbl-treeview-item-container:hover > .dxbl-image,
.app-sidebar .dxbl-treeview-item-container.dxbl-active > .dxbl-image {
    color: inherit;
}

/* --------------------------------------------------------------- surfaces ---- */

.content .dxbl-grid {
    --dxbl-grid-border-radius: var(--bogo-radius-surface);
    --dxbl-grid-border-color: var(--bogo-hairline);
    --dxbl-grid-outer-border-color: var(--bogo-hairline);
    --dxbl-grid-h-line-color: #edf0f3;
    --dxbl-grid-v-line-color: #edf0f3;
    --dxbl-grid-header-bg: var(--bogo-surface);
    --dxbl-grid-header-color: var(--bogo-ink);
    --dxbl-grid-header-font-weight: 600;
    /* Inter sets about a percent wider than the stack it replaces - enough to clip a
       "31.08.2026 09:31" out of a date column that fitted it exactly before. A pixel back from
       each side of every cell buys that difference for all columns at once.
       ponytail: if a later font needs more than these 2px, widen the column, don't shave further. */
    --dxbl-grid-text-cell-padding-x: .3125rem;
    box-shadow: var(--bogo-shadow-surface);
}

/* a chart is a surface too - without a card it floats loose on the canvas */
.content .dxbl-chart-root {
    background-color: var(--bogo-surface);
    border: 1px solid var(--bogo-hairline);
    border-radius: var(--bogo-radius-surface);
    box-shadow: var(--bogo-shadow-surface);
    padding: .75rem;
}

/* The sticky right-hand cell (row menu) and the trailing filler cell carry their own
   opaque white background so horizontally scrolled cells cannot show through them.
   On a row with a configured colour that white punches a hole in the colour band, so
   those two inherit the row's colour. Only safe when the <tr> is opaque, so BoGoGrid
   sets .bogo-row-opaque exactly when it painted an opaque row colour (zebra stripe or
   an rgb(), #hex or rgba(...,1) row colour; other rgba() and keyword colours stay white). */
.dxbl-grid .dxbl-grid-table > tbody > tr.bogo-row-opaque > td.dxbl-grid-fixed-cell,
.dxbl-grid .dxbl-grid-table > tbody > tr.bogo-row-opaque > td.dxbl-grid-empty-cell {
    background-color: inherit;
}

/* Row hover. BoGoGrid writes the zebra stripe and any configured row colour as an
   inline style on the <tr>, so the hover is a neutral darkening layer on the cells
   rather than a colour: it reads the same on white, on the stripe and on every
   configured colour, and never washes a semantic row colour towards the accent.
   Not scoped to .content: that class comes from the web hosts' MainLayout, which the
   MAUI shell does not render - the hover is wanted on every host, the card/canvas
   rules below stay web-only on purpose.
   The cell exclusions are DevExpress's own: a detail cell holds a whole expanded sub-list,
   so without them the wash landed as a grey band behind that sub-list's toolbar and margins
   whenever the pointer was anywhere inside it. Same for the indent cell and the edit form. */
.dxbl-grid .dxbl-grid-table > tbody > tr:hover > td:not(.dxbl-grid-detail-cell):not(.dxbl-grid-indent-cell):not(.dxbl-grid-edit-form) {
    /* has to beat the zebra stripe, not just the white row */
    background-image: linear-gradient(rgba(16, 24, 40, .11), rgba(16, 24, 40, .11));
}

/* The theme paints headers as color-mix(#000 5%, --dxbl-*-header-bg), so setting the
   variable to white still lands on #ededef. Both header kinds are overridden directly;
   the hairline below them carries the separation instead of a grey slab. */
.content .dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell) {
    background-color: var(--bogo-surface);
}

.content .dxbl-grid .dxbl-grid-header-row th {
    letter-spacing: .015em;
    border-bottom: 1px solid var(--bogo-hairline-strong);
}

/* the toolbar and group panel are part of the same white card as the header */
.content .dxbl-grid .dxbl-toolbar,
.content .dxbl-grid .dxbl-grid-group-panel-container {
    background-color: var(--bogo-surface);
}

/* the group panel is a hint, not a headline */
.dxbl-grid-group-panel-container {
    color: var(--bogo-ink-muted);
    font-size: .875rem;
}

/* detail form: each group becomes its own card on the canvas.
   Scoped to .dxbl-fl-group so the page-level DxFormLayout in MainLayout is untouched. */
.content .dxbl-fl-group {
    --dxbl-fl-group-border-radius: var(--bogo-radius-surface);
    --dxbl-fl-group-header-border-radius: var(--bogo-radius-surface) var(--bogo-radius-surface) 0 0;
    /* a tint, not the canvas colour - a collapsed group must still read as a card */
    --dxbl-fl-group-header-bg: #fafbfc;
    --dxbl-fl-group-header-color: var(--bogo-ink);
    --dxbl-fl-group-header-font-weight: 600;
}

/* the card itself is the inner dxbl-group; the fl-group is only a grid cell */
.content .dxbl-fl-group > .dxbl-group {
    border-color: var(--bogo-hairline);
    box-shadow: var(--bogo-shadow-surface);
}

/* the header is a caption on the card, separated by a hairline, not a grey bar.
   ::before is the theme's 5%-black wash - see the grid header above. */
.content .dxbl-fl-group > .dxbl-group.expanded > .dxbl-group-header {
    border-bottom: 1px solid var(--bogo-hairline);
}

.content .dxbl-fl-group > .dxbl-group > .dxbl-group-header::before {
    background-color: var(--bogo-surface);
}

.content .dxbl-fl-group .dxbl-fl-cpt {
    color: var(--bogo-ink-muted);
}

/* a field with an EditDescription is wrapped in SfTooltip's .e-control div, which Syncfusion
   sets to 12px system-ui - plain content in it (read-only Html, Text) must keep the form font.
   Not scoped to .content: a detail can also open in a popup. */
.dxbl-fl .e-control.e-tooltip {
    font-family: inherit;
    font-size: inherit;
}

/* tabs sit on the canvas under a hairline instead of inside a white slab -
   the card below is the surface, the tab strip is navigation */
.content .dxbl-tabs .dxbl-tabs-tablist {
    background-color: transparent;
    border-bottom-color: var(--bogo-hairline);
}

.content .dxbl-tabs .dxbl-tabs-item:hover:not(.dxbl-active) {
    background-color: var(--bogo-accent-06);
}

/* ----------------------------------------------------------------- modals ---- */
/* Modals render in a portal outside .content, so they need their own rules.
   Scoped through .dxbl-modal so dropdowns and flyouts keep their own sizing. */

.dxbl-modal .dxbl-popup {
    border-radius: 14px;
    border-color: var(--bogo-hairline);
}

.dxbl-modal .dxbl-modal-content {
    border-radius: 13px;
    box-shadow: 0 20px 48px rgba(16, 24, 40, .18), 0 4px 12px rgba(16, 24, 40, .08);
}

.dxbl-modal .dxbl-modal-header,
.dxbl-modal .dxbl-modal-footer {
    background-color: #fafbfc;
    border-color: var(--bogo-hairline);
}

.dxbl-modal .dxbl-modal-header {
    border-radius: 13px 13px 0 0;
    color: var(--bogo-ink);
}

.dxbl-modal .dxbl-modal-footer {
    border-radius: 0 0 13px 13px;
}

/* --------------------------------------------------------------- controls ---- */

.dxbl-btn {
    --dxbl-btn-border-radius: var(--bogo-radius-control);
    --dxbl-btn-hover-border-radius: var(--bogo-radius-control);
    --dxbl-btn-active-border-radius: var(--bogo-radius-control);
    --dxbl-btn-focus-border-radius: var(--bogo-radius-control);
    --dxbl-btn-disabled-border-radius: var(--bogo-radius-control);
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.dxbl-btn-outline-secondary,
.dxbl-btn-secondary {
    --dxbl-btn-border-color: var(--bogo-hairline-strong);
    --dxbl-btn-hover-border-color: var(--bogo-accent, #005df8);
    --dxbl-btn-hover-bg: var(--bogo-accent-06);
    --dxbl-btn-hover-color: var(--bogo-accent-ink);
}

/* the accent buttons get a soft brand-tinted lift instead of a flat rectangle */
.customerBgColor {
    border-radius: var(--bogo-radius-control);
    box-shadow: 0 1px 2px var(--bogo-accent-24);
    transition: box-shadow .12s ease, transform .12s ease, filter .12s ease;
}

/* Toolbar buttons (Save/Delete) hover through two pseudo-elements, not background-color:
   ::after repaints the button in --dxbl-btn-root-bg (#fff) at z-index -2 and ::before lays
   5% black over it. Both sit above our accent fill, so hovering washed the button white
   with an invisible white label. Drop them and let the filter below give the feedback -
   brightness works for the customer colour and the red delete alike. */
.customerBgColor:hover::before,
.customerBgColor:hover::after {
    content: none !important;
}

.customerBgColor:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px var(--bogo-accent-24);
    filter: brightness(.93);
}

.customerBgColor:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px var(--bogo-accent-24);
}

.dxbl-text-edit,
.dxbl-memo-edit {
    --dxbl-text-edit-border-radius: var(--bogo-radius-control);
    --dxbl-text-edit-border-color: var(--bogo-hairline-strong);
    --dxbl-text-edit-focus-border-color: var(--bogo-accent, #005df8);
    --dxbl-text-edit-focus-shadow-color: var(--bogo-accent-24);
    --dxbl-text-edit-focus-shadow-blur: 0;
    --dxbl-text-edit-focus-shadow-spread: 3px;
}

/* the grid search box reads as a search field, not a text box */
.dxbl-grid-search-box .dxbl-text-edit,
.dxbl-grid-search-box-container .dxbl-text-edit {
    --dxbl-text-edit-border-radius: 999px;
}

/* DevExpress puts that radius on the <input> too, and Chrome clips the caret to the rounded
   box - at position 0 the pill has already curved away, so the caret of an empty search box
   shrinks to ~10px. The input is transparent, so squaring it changes nothing visually. */
.dxbl-grid-search-box .dxbl-text-edit > .dxbl-text-edit-input,
.dxbl-grid-search-box-container .dxbl-text-edit > .dxbl-text-edit-input {
    border-radius: 0;
}

/* a reload without the loading overlay is running (search keystroke, filter chip; BoGoGrid adds
   bogo-search-pending): the magnifier turns into a spinner - only after 1s, so a fast one never flickers.
   spinner-border is Bootstrap's rotate keyframe, shipped by all three hosts */
.bogo-search-pending .dxbl-grid-search-box > .dxbl-btn-icon {
    position: relative;
}

.bogo-search-pending .dxbl-grid-search-box > .dxbl-btn-icon > .dxbl-image {
    animation: bogo-search-hide 0s 1s forwards;
}

.bogo-search-pending .dxbl-grid-search-box > .dxbl-btn-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
    animation: bogo-search-show 0s 1s forwards, spinner-border .75s linear infinite;
}

@keyframes bogo-search-hide { to { opacity: 0; } }
@keyframes bogo-search-show { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .bogo-search-pending .dxbl-grid-search-box > .dxbl-btn-icon::after {
        animation: bogo-search-show 0s 1s forwards; /* a static ring */
    }
}

.dxbl-pager {
    --dxbl-pager-border-radius: var(--bogo-radius-control);
}

.dxbl-pager .dxbl-btn {
    --dxbl-btn-border-radius: var(--bogo-radius-control);
}

/* the AI chat launcher is the one deliberately raised element on the page */
.dxbl-chatui-chat-button {
    box-shadow: var(--bogo-shadow-raised);
    transition: transform .15s ease, box-shadow .15s ease;
}

.dxbl-chatui-chat-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(16, 24, 40, .18);
}

/* ------------------------------------------------------------ scrollbars ---- */

.content,
.dxbl-scroll-viewer-content {
    scrollbar-width: thin;
    scrollbar-color: var(--bogo-hairline-strong) transparent;
}

/* ----------------------------------------------------------- quality floor ---- */

:focus-visible {
    outline: 2px solid var(--bogo-accent, #005df8);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    nav.header-navbar .navbar-toggler,
    .dxbl-btn,
    .customerBgColor,
    .dxbl-chatui-chat-button,
    .app-sidebar .dxbl-treeview-item-container {
        transition: none;
    }

    .customerBgColor:hover:not(:disabled),
    .dxbl-chatui-chat-button:hover {
        transform: none;
    }
}

/* ---- moved from FileViewer.razor (was an inline <style> rendered per component instance) ---- */
/* The popup body is a top-aligned block, so it never centers its content and fixed vh
   heights overflow the (screen-capped) popup on mobile. Make THIS popup's body a
   centered flex column; content then centers in the popup's real height (the dialog
   has a definite height, so vertical centering works), with no forced vh sizes. */
.fileviewer-popup .dxbl-modal-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* The DevExpress modal chain (dialog → content → body → loading panel) leaves every flex
   item at min-height:auto, so the body can't shrink below the image's intrinsic height and
   the image spills past the popup's 95vh frame on short/wide windows. Let the chain shrink
   to the dialog's definite height and pass that height down (height:100%) so the image caps
   to the popup body instead of the viewport. */
.fileviewer-popup .dxbl-modal-content,
.fileviewer-popup .dxbl-modal-body,
.fileviewer-popup .dxbl-loading-panel:not(.file-viewer-loading) {
	min-height: 0;
}

.fileviewer-popup .dxbl-loading-panel-target-content {
	height: 100%;
	min-height: 0;
}

/* the popup header's back arrow (FileViewer.razor PopupHeader): phone only, below */
.fileviewer-popup-back {
	display: none;
}

/* Phone (DevExpress' popup adaptivity breakpoint): the full-size popup takes the whole screen, like a native
   viewer. Without this a wide element (a table in a rendered Markdown) widened the adaptive dialog past the
   screen - it kept its 1.75rem left margin and was cut off on the right. !important: Width/Height of the
   DxPopup and a header drag (transform) are inline styles. */
@media (max-width: 576px) {
	.dxbl-modal > .dxbl-modal-root > .dxbl-popup.fileviewer-popup-full {
		--dxbl-popup-margin: 0;
		width: 100% !important;
		height: 100vh !important; /* WebViews without dvh (Android < 108, iOS < 15.4) */
		height: 100dvh !important;
		transform: none !important;
		border: 0;
		border-radius: 0;
	}

	.fileviewer-popup-full .dxbl-modal-content {
		border-radius: 0;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* a page, not a dialog: closed by the back arrow on the left instead of DevExpress' close button */
	.fileviewer-popup-full .fileviewer-popup-back {
		display: block;
	}

	.fileviewer-popup-full .dxbl-popup-header-button {
		display: none !important;
	}
}

/* FileViewer in the browser: a side panel instead of the popup, the view shrinks beside it so the data
   stays visible. --fileviewer-panel-share: its share of the width right of the view, dragged at the grip
   and remembered by FileViewer.razor.js. --fileviewer-panel-right: what is docked right of it. */
/* docked: once a file shows, not while the first one loads (FileViewer.razor, Docked) */
body:has(.fileviewer-panel:not(.undocked)) {
	margin-right: calc(100vw * var(--fileviewer-panel-share, .5));
}

/* BoGoMasterView's scroll-to-top button, bottom-right of the viewport: beside the panel, not under it */
body:has(.fileviewer-panel:not(.undocked)) .list-to-top {
	right: calc(100vw * var(--fileviewer-panel-share, .5) + 2rem);
}

/* the beta AI drawer pinned at the right edge: the panel docks left of it and takes its share of what is left,
   the view shrinks by both (on the drawer's target, where its --ai-w lives, instead of the body) */
.ai-drawer-target.pinned {
	--fileviewer-panel-right: var(--ai-w);
}

body:has(.ai-drawer-target.pinned .fileviewer-panel) {
	margin-right: 0;
}

.ai-drawer-target.pinned:has(.fileviewer-panel:not(.undocked)) {
	margin-right: calc(var(--ai-w) + (100vw - var(--ai-w)) * var(--fileviewer-panel-share, .5));
}

.ai-drawer-target.pinned:has(.fileviewer-panel:not(.undocked)) .list-to-top {
	right: calc(var(--ai-w) + (100vw - var(--ai-w)) * var(--fileviewer-panel-share, .5) + 2rem);
}

.fileviewer-panel {
	position: fixed;
	top: 0;
	right: var(--fileviewer-panel-right, 0px);
	bottom: 0;
	z-index: 1034; /* under the AI drawer's tab (1035), backdrop and overlay (1039/1040), DevExpress popups (1050 and up) */
	width: calc((100vw - var(--fileviewer-panel-right, 0px)) * var(--fileviewer-panel-share, .5));
	display: flex;
	flex-direction: column;
	padding-left: .75rem; /* the grip */
	background: var(--bs-body-bg, #fff);
	box-shadow: -4px 0 24px rgba(0, 0, 0, .18);
}

.fileviewer-panel-grip {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: .75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: ew-resize;
	touch-action: none; /* else a touch drag scrolls and cancels the pointer */
}

.fileviewer-panel-grip::before {
	content: "";
	width: .25rem;
	height: 2.75rem;
	border-radius: 1rem;
	background: #ced4da;
}

.fileviewer-panel-header,
.fileviewer-popup-header {
	display: flex;
	align-items: center;
	gap: .25rem;
	width: 100%;
	font-weight: 600;
}

.fileviewer-panel-header {
	padding: .4rem .5rem .4rem 0;
}

.fileviewer-panel-header span,
.fileviewer-popup-header span {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fileviewer-panel-header button,
.fileviewer-popup-header button {
	border: 0;
	background: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	color: inherit;
}

.fileviewer-panel-header button:hover,
.fileviewer-popup-header button:hover {
	background: rgba(0, 0, 0, .06);
}

/* same height chain as the popup's body above: the content caps to the panel, centered */
.fileviewer-panel-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 .5rem .5rem 0;
}

.fileviewer-panel .dxbl-loading-panel:not(.file-viewer-loading),
.fileviewer-panel .pdf-viewer-container {
	min-height: 0;
}

.fileviewer-panel .dxbl-loading-panel-target-content {
	height: 100%;
	min-height: 0;
}

/* phone-sized window: no room for both, the panel takes the screen */
@media (max-width: 767.98px) {
	body:has(.fileviewer-panel:not(.undocked)) { /* as specific as the rule it resets */
		margin-right: 0;
	}

	/* a narrow desktop window with the AI drawer pinned: the panel takes what the drawer leaves */
	.ai-drawer-target.pinned:has(.fileviewer-panel:not(.undocked)) {
		margin-right: var(--ai-w);
	}

	.fileviewer-panel {
		width: calc(100vw - var(--fileviewer-panel-right, 0px));
		padding-left: 0;
	}

	.fileviewer-panel-grip {
		display: none;
	}

	/* phone: less frame, smaller headings in a rendered document */
	:is(.fileviewer-popup, .fileviewer-panel) .rendered-document {
		padding: 0 .75rem 1rem;
		font-size: .95rem;
	}

	:is(.fileviewer-popup, .fileviewer-panel) .rendered-document h1 {
		font-size: 1.5rem;
	}

	:is(.fileviewer-popup, .fileviewer-panel) .rendered-document h2 {
		font-size: 1.25rem;
	}
}

/* Cap the image to its (now definite) container height, not the viewport. */
.limited-height-image {
	max-height: 100%;
}

.centered-content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	min-height: 0;
}

.navigation-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; /* full width so the absolute nav arrows sit at the popup edges */
	height: 100%;
	min-height: 0;
}

.nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	font-size: 2rem;
	cursor: pointer;
}

.left-arrow {
	left: 0;
	margin-left: 1rem;
}

.right-arrow {
	right: 0;
	margin-right: 1rem;
}

.responsive-video {
	width: 100%;
	height: auto;
	max-height: 100%; /* cap to the (definite) container height, matching the image */
	display: block;
}

.audio-content {
	display: flex;
	justify-content: center;
	padding: 1rem;
}

/* During load the content is gated out, so the panel has no intrinsic height and the
   absolutely-positioned indicator would clip to a 0-area box. A small min-height gives
   the spinner room; the body rule above centers this box in the popup. */
.file-viewer-loading {
	min-height: 8rem;
	position: relative;
}

/* Rendered Markdown/HTML documents: a scrollable, top-aligned text page inside the
   (centered, flex) popup body - stretch cancels the body's horizontal centering so long
   lines use the full width. */
.rendered-document {
	align-self: stretch;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: auto;
	padding: 0 1rem 1rem 1rem;
	text-align: left;
	word-wrap: break-word;
}

.rendered-document img {
	max-width: 100%;
}

.rendered-document pre {
	overflow-x: auto;
	padding: 0.5rem;
	background-color: rgba(0, 0, 0, 0.05);
	border-radius: 0.25rem;
}

.rendered-document table {
	border-collapse: collapse;
}

.rendered-document table th,
.rendered-document table td {
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 0.25rem 0.5rem;
}

.rendered-document blockquote {
	margin-left: 0;
	padding-left: 1rem;
	border-left: 4px solid rgba(0, 0, 0, 0.2);
}

/* SfPdfViewer2/iframe use Height="100%", which needs a parent with definite height.
   height:100% fills the popup body's real height (so it can't overflow a screen-capped
   popup like a fixed vh would); min-height is a floor in case an ancestor (the loading
   panel's internal wrapper) doesn't pass a definite height, so it never collapses to 0. */
.pdf-viewer-container {
	height: 100%;
	min-height: 50vh;
}

/* ---- moved from FolderOrFileNode.razor (was an inline <style> rendered per component instance) ---- */
.folder-view-template {
    display: flex;
    justify-content: space-between;
}

/* ---- moved from ConfirmationPopup.razor (was an inline <style> rendered per component instance) ---- */
.msg-text {
    white-space: pre-wrap;
}

/* ---- moved from Dropdown.razor (was an inline <style> rendered per dropdown column) ---- */
/* scoped to the BoGo Dropdown's own list boxes (CssClass): was an unscoped .dxbl-list-box rule that also
   stripped the border of every other DevExpress list box / combo popup on the page */
.dxbl-list-box.bogo-dropdown-list {
    --dxbl-list-box-border-width: 0px
}

.dropdown-popup-scroll-container {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(80vh - 60px); /* Subtract header and footer height */
    max-height: calc(80vh - 60px);
    display: block;
}

.selection-text-box-big {
    height: 300px
}

/* inline-edit bool: the drawn checkbox is only ~20px wide, so most clicks into the (much wider) cell
   missed it. The transparent overlay makes the whole cell toggle it. */
.bogo-inline-bool {
    display: flex;
    justify-content: center;
}

/* the cell is the positioning context, so the hit area is the whole td whatever the row height or cell
   padding (not the sticky row-menu cell: relative would break its sticky) */
.dxbl-grid .dxbl-grid-table > tbody > tr > td:not(.dxbl-grid-fixed-cell):has(> .bogo-inline-bool) {
    position: relative;
}

.bogo-inline-bool-hit {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

/* the configured colour of a list symbol (WLD_ListSymbolColor, BoGoColors.SymbolColor): the variable sits on the icon or
   an element around it. !important: the menu, the start page and DevExpress colour their icons with stronger selectors */
.bogo-symbol-color {
    color: var(--bogo-symbol-color) !important;
}

/* the selected menu entry keeps its white icon on the accent background: a dark symbol colour would vanish there */
.app-sidebar .dxbl-treeview-item-container.dxbl-active > .bogo-symbol-color {
    color: inherit !important;
}