:root {
    --dxbl-text-font-size: 1rem;
}

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

/* 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: 0.9rem;
    font-size: 0.9rem;
}

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