/*
 * 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 (the app: a wide landscape screen): 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 instead of the body, the header on its own: it is outside the target) */
.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)),
body:has(.ai-drawer-target.pinned .fileviewer-panel:not(.undocked)) nav.header-navbar {
	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 */
	/* the app on an iPad: clear of the status bar and the home indicator, like the full-screen popup (0 in a browser) */
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	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 */
	/* (the header is under the panel here either way) */
	.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;
}

/* #1450: the AI chat's and palette's markdown answers - headings at text scale (a bubble is no document), tables and
   code scroll inside the narrow drawer instead of widening it */
/* the user's own text and an error: as typed, line breaks kept */
.ai-plain {
    white-space: pre-wrap;
}

/* long links/paths break instead of widening the bubble; a wide table scrolls the answer (display:block on the table
   would take its rows and columns from screen readers) */
.ai-markdown {
    overflow-wrap: break-word; /* not anywhere: that squeezes a wide table's cells mid-word instead of scrolling */
    overflow-x: auto;
}

/* an editable Markdown field in the detail: rendered, a click opens its memo - the border shows that it is one */
.markdown-click-edit {
    cursor: text;
    padding: .25rem .5rem;
    border: 1px solid transparent;
    border-radius: 4px;
}

.markdown-click-edit:hover, .markdown-click-edit:focus-visible {
    border-color: var(--bogo-hairline-strong);
}

.ai-markdown > :first-child {
    margin-top: 0;
}

.ai-markdown > :last-child {
    margin-bottom: 0;
}

.ai-markdown h1, .ai-markdown h2, .ai-markdown h3, .ai-markdown h4, .ai-markdown h5, .ai-markdown h6 {
    font-size: 1em;
    font-weight: 600;
    margin: .75em 0 .35em;
}

.ai-markdown h1, .ai-markdown h2 {
    font-size: 1.15em;
}

.ai-markdown table {
    border-collapse: collapse;
    margin-bottom: .75em;
}

.ai-markdown th, .ai-markdown td {
    border: 1px solid var(--bogo-hairline-strong);
    padding: .2em .5em;
}

.ai-markdown pre {
    overflow-x: auto;
    padding: .5em .75em;
    border-radius: 4px;
    background: rgba(0, 0, 0, .05);
}

/* --------------------------------------------------------- cell widgets ---- */
/* Grid cells styled by a CellStyle column (View/Components/Grid/CellWidgets, docs/cell-styling-2026-10-27.md).
   Three layers, the same on every widget: --cw-c the mark (icon, dot, bar, avatar circle, pill tint, cell tint; palette
   class or #rrggbb), --cw-fg the text, --cw-bg the background behind the text (a pill; the cell with variant "cell").
   CellWidget sets --cw-fg itself where the text sits on a fill the JSON chose (dark or white by contrast).
   Light theme only: the apps have no dark mode yet.
   One line per widget, ellipsis instead of wrapping, so a widget never changes the row height. */
/* fg/bg never inherit from a tinted <td> or another widget: the cell's "bg" is not the pill's */
.cw { --cw-c: #64748b; --cw-fg: initial; --cw-bg: initial; --cw-ink: color-mix(in srgb, var(--cw-c) 68%, #101828); }
.cw-c-yellow { --cw-c: #ca8a04; }
.cw-c-blue { --cw-c: #2563eb; }
.cw-c-red { --cw-c: #dc2626; }
.cw-c-green { --cw-c: #16a34a; }
.cw-c-orange { --cw-c: #ea6c0a; }
.cw-c-blue-green { --cw-c: #0d9488; }
.cw-c-purple { --cw-c: #7c3aed; }
.cw-c-pink { --cw-c: #db2777; }
.cw-c-gray { --cw-c: #64748b; }

.cw-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the icon never shrinks: a narrow column cuts the text at its end. The icon is a mark: "color"; in a pill it is part
   of the text (a "color" icon would vanish on a solid pill) */
.cw .bi { flex: none; line-height: 1; color: var(--cw-c); }
.cw-pill .bi { color: inherit; }

.cw-pill {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%; vertical-align: middle;
    font-size: .78rem; font-weight: 550; line-height: 1.2; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    background: var(--cw-bg, color-mix(in srgb, var(--cw-c) 15%, transparent));
    color: var(--cw-fg, var(--cw-ink));
}
.cw-pill.cw-solid { background: var(--cw-bg, var(--cw-c)); color: var(--cw-fg, #fff); }
.cw-pill.cw-outline { background: var(--cw-bg, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cw-c) 55%, transparent); }
.cw-pill.cw-tag { border-radius: 6px; font-weight: 500; padding: 2px 7px; flex: none; }
/* whole tags, not every tag squeezed to "E…": only the last one shrinks, the rest of the row is clipped (title lists all) */
.cw-pill.cw-tag:last-child { flex: 0 1 auto; min-width: 2.5em; }
.cw-tags { display: inline-flex; flex-wrap: nowrap; gap: 4px; max-width: 100%; overflow: hidden; vertical-align: middle; }

/* the text of every non-pill widget: "fg", else the normal text colour */
.cw-text, .cw-dot, .cw-avatar, .cw-twoline, .cw-progress-label { color: var(--cw-fg, inherit); }
.cw-text, .cw-dot, .cw-avatar { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: nowrap; vertical-align: middle; }
.cw-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cw-c); flex: none; }

.cw-progress { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cw-progress-label { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; line-height: 1.2; white-space: nowrap; }
.cw-progress-text { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.cw-progress-label b { font-weight: 600; flex: none; }
.cw-track { height: 6px; border-radius: 3px; background: rgba(128, 128, 128, .22); overflow: hidden; }
.cw-bar { height: 100%; border-radius: 3px; background: var(--cw-c); }

/* the circle with the initials is the mark: "color" only */
.cw-circle {
    width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
    font-size: .64rem; font-weight: 650; letter-spacing: .02em;
    background: color-mix(in srgb, var(--cw-c) 15%, transparent); color: var(--cw-ink);
}

.cw-twoline { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cw-twoline > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-t1 { display: flex; align-items: center; gap: 5px; min-width: 0; font-weight: 600; }
.cw-t2 { font-size: .78rem; font-weight: 400; color: var(--cw-fg, var(--bogo-ink-muted)); min-height: 1.25em; }

/* "weight": the main text, against the widget's own (bold first line, semibold pill, bold percent) */
.cw.cw-w-normal, .cw-w-normal .cw-t1, .cw-w-normal .cw-progress-label b { font-weight: 400; }
.cw.cw-w-bold, .cw-w-bold .cw-t1, .cw-w-bold .cw-progress-label b { font-weight: 650; }

/* variant "cell": BoGoGrid puts these on the real <td>. Opaque (mixed with white, not with transparent) so the cell
   colour wins over a row colour; the hover layer above (background-image on the cells) still darkens it */
.dxbl-grid .dxbl-grid-table > tbody > tr > td.cw-cell {
    --cw-c: #64748b;
    background-color: var(--cw-bg, color-mix(in srgb, var(--cw-c) 14%, #fff));
}
.dxbl-grid .dxbl-grid-table > tbody > tr > td.cw-cell.cw-c-yellow { --cw-c: #ca8a04; }
.dxbl-grid .dxbl-grid-table > tbody > tr > td.cw-cell.cw-c-blue { --cw-c: #2563eb; }
.dxbl-grid .dxbl-grid-table > tbody > tr > td.cw-cell.cw-c-red { --cw-c: #dc2626; }
.dxbl-grid .dxbl-grid-table > tbody > tr > td.cw-cell.cw-c-green { --cw-c: #16a34a; }
.dxbl-grid .dxbl-grid-table > tbody > tr > td.cw-cell.cw-c-orange { --cw-c: #ea6c0a; }
.dxbl-grid .dxbl-grid-table > tbody > tr > td.cw-cell.cw-c-blue-green { --cw-c: #0d9488; }
.dxbl-grid .dxbl-grid-table > tbody > tr > td.cw-cell.cw-c-purple { --cw-c: #7c3aed; }
.dxbl-grid .dxbl-grid-table > tbody > tr > td.cw-cell.cw-c-pink { --cw-c: #db2777; }
/* the detail has no cell: the widget's own tinted box (CellWidget TintsItself) */
/* block: a progress bar spans the field as without the tint. No own --cw-c default: it would beat the palette class */
.cw-cellbox {
    display: block; padding: 3px 8px; border-radius: 6px;
    background-color: var(--cw-bg, color-mix(in srgb, var(--cw-c, #64748b) 14%, #fff));
}
/* the text in a tinted cell: "fg" (CellWidget derives it from a "bg"), else the ink of the tint */
.cw-cellval { color: var(--cw-fg, color-mix(in srgb, var(--cw-c) 68%, #101828)); font-weight: 550; }