/* DevExpress sizes its own text from this variable, so it has to follow the design's body
   size too — otherwise grids and inputs stay a size larger than everything around them. */
:root {
    --dxbl-text-font-size: var(--text-size-medium);
}

/* Every button on a page is a DevExpress button - the Yx* roles are classes on .dxbl-btn - and
   the theme sizes them from this variable, so this is the one place that gives them all the
   button role from the type scale. Its value is the theme's own 0.875rem today, so this changes
   where the size comes from, not what it looks like.

   It has to sit on .dxbl-btn and not on :root, which is where the line above it works fine. The
   theme declares --dxbl-text-font-size as `inherit` on .dxbl-text, so a :root value reaches it;
   for .dxbl-btn it declares a concrete .875rem on the element itself, and a value on the element
   beats one inherited from :root. Measured: with the declaration on :root the button stayed at
   14px while the token said 32px; on .dxbl-btn it followed the token. */
.dxbl-btn {
    --dxbl-btn-font-size: var(--text-size-button);
}

/* One text size for every grid in the application, from the two grid roles. Same reason as the
   button above: the theme declares --dxbl-grid-font-size on .dxbl-grid itself, so the value has
   to be set on the element and not on :root. The .dxbl-sm / .dxbl-lg variants are listed because
   they are more specific than .dxbl-grid alone - the column chooser's grid runs on SizeMode.Small
   and would otherwise keep the theme's .75rem. */
.dxbl-grid,
.dxbl-grid.dxbl-sm,
.dxbl-grid.dxbl-lg {
    --dxbl-grid-font-size: var(--text-size-gridcontent);
}

/* The theme sizes header cells from that same variable, so the header needs a rule of its own to
   be a step smaller than the content. Same selector shape as the theme's, and this file loads
   after it. */
.dxbl-grid .dxbl-grid-table > thead > tr > th {
    font-size: var(--text-size-gridheader);
}

/* One thin grey line around every grid in the application. The theme already draws an outer
   border, but it takes its colour from the theme's own --bs-gray-400 (#ced4da), which washes out
   against the page; --border-strong (#b2b2b2) is the design's darker grey and reads as a frame.
   Only the outer border changes: the row lines keep following --dxbl-grid-border-color, so the
   grid gains no ink on the inside. The variable is declared on .dxbl-grid in the theme, so it has
   to be set on the element as well - this file loads after the theme, so the same selector wins.
   A grid that opts out through .dxbl-grid-no-outer-border keeps doing so: that selector is more
   specific. */
.dxbl-grid {
    --dxbl-grid-outer-border-color: var(--border-strong);
}

:root .dxbl-accordion-group {
    --dxbl-accordion-group-header-selected-bg: lightblue;
    --dxbl-accordion-group-header-hover-bg: lightblue;
    --dxbl-accordion-group-item-selection-bg: lightblue;
    --dxbl-accordion-group-item-hover-bg: lightblue;
}

:root .dxbl-accordion-group:hover {
    cursor: pointer;
}

/* Every clickable trigger in the top bar (tenant, tenant menu, support, user menu) is one hit area
   of the same size: as tall as the bar itself and at least as wide as it is tall, so an icon-only
   trigger is square and a trigger with text only grows sideways.
   DxButton draws itself from --dxbl-btn-* variables (`.dxbl-btn` in the DevExpress theme), and its
   own hover rule outranks a plain class selector - so the colours are set through those variables
   instead of with !important, and the same class also styles the plain <button> triggers.
   Lives in this file because the DevExpress theme is loaded after app.css. */
/* The --dxbl-btn-* overrides need two classes: a DxButton defaults to the secondary
   render style, and `.dxbl-btn.dxbl-btn-secondary` sets --dxbl-btn-hover-bg to a light
   grey at specificity (0,2,0). A single `.topbar-trigger` loses that, which is why the
   DevExpress buttons used to hover grey while the plain buttons hovered dark. */
.dxbl-btn.topbar-trigger {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-color: var(--yellow-500);
    --dxbl-btn-hover-bg: var(--topbar-trigger-hover-bg);
    --dxbl-btn-hover-color: var(--yellow-500);
    --dxbl-btn-active-bg: var(--topbar-trigger-active-bg);
    --dxbl-btn-active-color: var(--yellow-500);
    --dxbl-btn-border-radius: 0;
    --dxbl-btn-padding-x: 0.75rem;
    --dxbl-btn-padding-y: 0;
    --dxbl-btn-font-size: var(--topbar-font-size);
    --dxbl-btn-focus-outline-color: var(--topbar-focus-ring);
    --dxbl-btn-focus-outline-size: 2px;
    --dxbl-btn-focus-outline-offset: -2px;
}

.topbar-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--topbar-height);
    min-width: var(--topbar-height);
    padding: 0 0.75rem;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: var(--yellow-500);
    font-size: var(--topbar-font-size);
    cursor: pointer;
}

/* One icon size across the bar: our own <i> elements and the image element DevExpress
   renders for IconCssClass. A FontAwesome size class (fa-xl and friends) on the icon is
   a single class and loses to this selector, so the markup does not need to agree. */
.topbar-trigger i,
.topbar-trigger .dxbl-image {
    font-size: var(--topbar-icon-size);
}

.topbar-trigger:hover {
    background-color: var(--topbar-trigger-hover-bg);
    color: var(--yellow-500);
}

.topbar-trigger:active {
    background-color: var(--topbar-trigger-active-bg);
}

/* Keyboard users had no indication at all; DevExpress switches its own outline off. */
.topbar-trigger:focus-visible {
    outline: 2px solid var(--topbar-focus-ring);
    outline-offset: -2px;
}

/* The two names in the bar (tenant, project) are written in white, as in the design. Their
   icons stay brand yellow: the yellow is what marks the pair as the workspace context, and
   as a full-width text colour it competes with the page underneath. */
.dxbl-btn.topbar-trigger-name {
    --dxbl-btn-color: var(--white);
    --dxbl-btn-hover-color: var(--white);
    --dxbl-btn-active-color: var(--white);
}

.topbar-trigger-name,
.topbar-trigger-name:hover {
    color: var(--white);
}

.topbar-trigger-name i,
.dxbl-btn.topbar-trigger-name .dxbl-image {
    color: var(--yellow-500);
}

/* Icon-only triggers on the right of the bar (support, user menu) sit as a group, so they
   carry half the horizontal padding of a trigger with text and drop the square minimum
   width. The full bar height keeps the hit area large enough. They are white: the brand
   yellow belongs to the workspace context on the left, not to the bar's actions. */
.dxbl-btn.topbar-trigger-icon {
    --dxbl-btn-padding-x: 0.375rem;
    --dxbl-btn-color: var(--white);
    --dxbl-btn-hover-color: var(--white);
    --dxbl-btn-active-color: var(--white);
}

.topbar-trigger-icon,
.topbar-trigger-icon:hover {
    min-width: 0;
    padding: 0 0.375rem;
    color: var(--white);
}

/* DxPopup is always rendered at the page root, so component-scoped CSS (.razor.css) never matches it. */
.column-chooser-popup {
    /* DxGrid reads --dxbl-text-font-size directly on its cells/rows, so a plain font-size override on an
       ancestor does not cascade into it - the variable itself must be redefined in scope. */
    --dxbl-text-font-size: var(--text-size-medium);
    font-size: var(--text-size-medium);
}

.column-chooser-popup .column-chooser-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.column-chooser-popup .column-chooser-actions .dxbl-btn {
    min-width: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.column-chooser-popup .column-chooser-filter {
    width: 15rem;
    flex: 0 0 auto;
}

.column-chooser-popup .column-chooser-list {
    height: 20rem;
}

.column-chooser-filter-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.375rem;
    border: 0.0625rem solid black;
    vertical-align: middle;
}

.column-chooser-filter-swatch-all {
    background-color: var(--grey-300);
    border-color: var(--grey-500);
}

/* The avatar DxDropDown is rendered at the page root, so component-scoped CSS (.razor.css) never matches it. */
.dropdown-item.user-menu-item:focus,
.dropdown-item.user-menu-item:focus-visible,
.dropdown-item.user-menu-item:active {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}

.dropdown-item.user-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.dropdown-user-info {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    margin-bottom: 0.35rem;
}

.user-menu-logout {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin-top: 0.35rem;
    padding-top: 0.5rem;
}

/* DxGrid stretches its search box to width:100% (cancelling its own margin-left:auto). Restore the
   fixed token width + margin-left:auto so the search box is right-aligned in the grid's top panel. */
.invitations-grid .dxbl-grid > .dxbl-grid-top-panel > .dxbl-grid-search-box-container {
    width: var(--dxbl-grid-search-box-container-width);
    margin-left: auto;
}

/* DxLoadingPanel wraps its child content in an element that carries no class of ours and is not a
   flex container, so the .fill-region chain in app.css would stop there. Carry it through when the
   panel itself is a .fill-region. DevExpress applies the same fix in its rich-edit styles. */
.fill-region .dxbl-loading-panel-target-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}