/*
 * 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() row colour; rgba() and unresolved colour values 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);
}

/* 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;
}

.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;
    }
}