#google_translate_element {
    display: none;
}

.goog-te-banner-frame,
.goog-te-gadget,
.goog-te-gadget-icon,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
#goog-gt-tt,
iframe.skiptranslate {
    display: none !important;
    visibility: hidden !important;
}

body {
    top: 0 !important;
}

.goog-text-highlight {
    background: inherit !important;
    box-shadow: none !important;
}

.VIpgJd-ZVi9od-ORHb,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-R6Lfte,
.VIpgJd-yAWNEb-L7lbkb,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.translateSelector {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 1001;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.translateSelector__button {
    /* Sized and coloured to sit level with the notification, theme and help buttons
       beside it, which are antd Buttons on token.buttonBgColor. The fallback is the
       light value, so a browser that somehow misses the variable still gets a button
       rather than a bare glyph. */
    /* Match the buttons beside it by using antd's own metrics rather than a guessed
       number: default Button is height 32 with padding 0 15px. Those buttons take an
       icon as a CHILD, not via the `icon` prop, so antd does not apply its square
       icon-only sizing - they end up ~46px wide. Hardcoding 32 made this one narrow;
       letting the width follow the same padding keeps them equal whatever the glyph. */
    height: 32px;
    padding: 0 15px;
    /* relative so the tooltip below anchors to the BUTTON, not to whatever ancestor
       happened to be positioned - the same mistake the dropdown once made. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text, rgba(0, 0, 0, 0.88));
    background: var(--app-button-bg, #ffffff);
    border: none;
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
    outline: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover EXACTLY like the buttons beside it. Those are antd default Buttons with
   border:none, so antd's hover - defaultHoverColor/defaultHoverBorderColor, both
   colorPrimaryHover - shows up as an accent glyph and nothing else. This rule reads
   the same token via --brand-primary-hover, so the two can no longer drift apart on
   any tenant palette or in either theme. The previous version washed the background
   with --color-surface, which is colorBgLayout: against --app-button-bg that is
   near-invisible, which is why this button looked dead while its neighbours lit up.
   Do not reintroduce --accent-blue here; it is not the button hover token. */
.translateSelector__button:hover,
.translateSelector__button:focus-visible,
.translateSelector_open .translateSelector__button {
    /* Was a glyph-only tint (colorPrimaryHover): invisible on a dark bar, washed out on a
       navy tenant. The same wash as the bell and theme buttons beside it - and written as
       the `background` SHORTHAND with !important, because the resting rule above uses the
       shorthand too and this one has to win wherever Google's own translate stylesheet
       lands in the cascade (Michael 2026-09-20: still dead in dark after the first fix). */
    background: var(--brand-button-hover-bg, rgba(0, 0, 0, 0.06)) !important;
    color: var(--app-topbar-text, inherit) !important;
}

.translateSelector__button:focus-visible {
    /* Keyboard focus ring in the tenant's own primary, not a fixed blue. */
    box-shadow: 0 0 0 2px var(--brand-primary, #1f2ce8);
}

/* The tooltip, matching the antd <Tooltip> on the buttons beside it.
   Those get color={token.tooltipBgColor} + overlayInnerStyle={{color: token.tooltipColor}};
   this reads the very same tokens through the CSS variables appTheme publishes, so a tenant
   palette or a theme flip moves both together instead of leaving this one behind.
   Geometry is antd's: 6px 8px padding, 6px radius, 14/22 type, boxShadowSecondary, and the
   arrow above the bubble because these buttons sit at the top of the viewport, where antd's
   default "top" placement has no room and flips to bottom. */
.translateSelector__button[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 8px;
    background: var(--tooltip-bg-color, #ffffff);
    color: var(--tooltip-color, #363638);
    border-radius: 6px;
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1100;
}

.translateSelector__button[data-tip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--tooltip-bg-color, #ffffff);
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1101;
}

.translateSelector__button[data-tip]:hover::after,
.translateSelector__button[data-tip]:hover::before,
.translateSelector__button[data-tip]:focus-visible::after,
.translateSelector__button[data-tip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

/* While the menu is open the tooltip is noise - the thing it named is on screen. */
.translateSelector_open .translateSelector__button[data-tip]::after,
.translateSelector_open .translateSelector__button[data-tip]::before {
    opacity: 0;
    visibility: hidden;
}

.translateSelector__icon {
    /* 14px, NOT 16. antd does not size button icons: they inherit the Button's own
       font-size, which is token.fontSize = 14 here (nothing overrides it). An
       earlier note claimed 16 and the globe ended up visibly fatter than the bell
       and sun inside identical buttons - Michael spotted it on the tenant console.
       If the theme ever sets fontSize, this follows it only if changed here too. */
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
}

.translateSelector__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    min-width: 172px;
    max-height: min(400px, calc(100vh - 72px));
    padding: 4px;
    overflow-y: auto;
    background: var(--custom-bg-color, #ffffff);
    border: 1px solid var(--custom-border-color, #ecedf0);
    border-radius: 8px;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

.translateSelector_open .translateSelector__dropdown {
    display: block;
}

.translateSelector__item {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px;
    color: rgba(0, 0, 0, 0.88);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    line-height: 22px;
    text-align: left;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.translateSelector__item:hover,
.translateSelector__item:focus-visible {
    color: var(--color-text, rgba(0, 0, 0, 0.88));
    background: var(--color-surface, rgba(0, 0, 0, 0.04));
    outline: none;
}

/* The current language SHOULD stand out in the brand colour - that part was right.
   The token was not: --accent-blue is undefined here and fell back to a fixed blue,
   or resolved to something unrelated on a tenant palette. */
.translateSelector__item_selected {
    color: var(--brand-primary, #1f2ce8);
    background: var(--color-surface, rgba(0, 0, 0, 0.04));
}

.translateSelector__flag {
    width: 20px;
    height: 14px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 2px;
}

body.dark-theme .translateSelector__button,
body.dark-theme .translateSelector__dropdown {
    color: rgba(255, 255, 255, 0.85);
    background: var(--custom-bg-color, #2a2a2b);
    border-color: var(--custom-border-color, #363638);
}

body.dark-theme .translateSelector__item {
    color: rgba(255, 255, 255, 0.85);
}

/* Menu items may carry the tenant accent - that is a selection state. The wash behind
   them is neutral: it was x's lime at 10%, which is not any tenant's colour. */
body.dark-theme .translateSelector__item:hover,
body.dark-theme .translateSelector__item:focus-visible,
body.dark-theme .translateSelector__item_selected {
    color: var(--accent-green, #8bff00);
    background: rgba(255, 255, 255, 0.08);
}

/* One hover rule for both themes, defined above: the accent glyph comes from
   --brand-primary-hover, which is theme-derived, so dark needs no override. */

@media (max-width: 575px) {
    .translateSelector {
        top: 12px;
        right: 14px;
    }
}

/* When the language selector is relocated into the header icon row (Breadcrumb
   moves it into #translate-slot), it must sit inline, not float in the corner. */
/* HIDDEN UNTIL A PAGE CLAIMS IT.
   The markup is in the static shell, so it paints before the app does. The old rule
   hid it only once React had added a marker class - which is exactly the half-second
   Michael saw: the widget in its fixed corner, then a jump into the header. Inverting
   the default closes that gap for good, on both consoles, because there is no longer
   a moment when the widget is visible and unplaced.
   Two claim points:
     - the header: .translateSelector--in-header, added when a console moves the node
       into its icon row;
     - the corner: html.translate-corner, set by the unauthenticated pages (login,
       sign-up, reset), where the fixed corner IS the right place. */
.translateSelector {
    opacity: 0;
    pointer-events: none;
}
html.translate-corner .translateSelector {
    opacity: 1;
    pointer-events: auto;
}
.translateSelector--in-header {
    /* relative, NOT static: the dropdown is absolutely positioned against this
       wrapper. Static takes it out of the positioning chain, so the menu anchored
       to whatever ancestor happened to be positioned - it rendered pinned to the
       page corner instead of under the globe. */
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    opacity: 1;
    pointer-events: auto;
}