/*
 * Component-targeting rules that are NOT expressible as tokens (MudBlazor internals, the right
 * rail's layout). Values still come only from tokens.css's governed set (design.md D3 — this file
 * replaces ApplicationStylesComponent.razor and its 40 `!important` overrides, none of which
 * survive: once values come from html:root there is nothing left to force).
 */

.mud-table-root .mud-table-head .mud-table-cell {
    font-weight: 600;
}

/* Grid/page loading indicators get the shell's own dark navy identity - the same recipe as the nav
   drawer/login panel (tokens.css's --dtx-gradient-shell) - instead of a flat colour that read as an
   odd, disconnected accent for a "loading" cue rather than a brand surface (mock-up feedback). Two
   distinct call-site colours needed covering here: LoadingProgressColor="Color.Tertiary" (the two
   MudDataGrid instances) and the many page-level "still loading this record" MudProgressLinear
   instances across the app, all of which pass Color="Color.Info" (UserRegister/UserEdit/CompanyEdit/
   the PowerBi-embedding components, etc.) - both are scoped to their own colour class so plain
   Action-role buttons / genuine info alerts elsewhere keep their flat green/blue untouched. */
/* !important: MudBlazor's own rule for these is qualified with :not(.mud-progress-linear-buffer),
   which despite reading as "lower priority" outranks a plain class chain on specificity (a :not()
   argument counts on the class tier same as an ordinary class) - confirmed needed the same way
   .mud-table-cell's font-size override above did. */
.mud-progress-linear.mud-progress-linear-color-tertiary .mud-progress-linear-bar,
.mud-progress-linear.mud-progress-linear-color-tertiary::before,
.mud-progress-linear.mud-progress-linear-color-info .mud-progress-linear-bar,
.mud-progress-linear.mud-progress-linear-color-info::before {
    background: var(--dtx-gradient-shell) !important;
}

/* Grid/table body text down to the same size as the left nav's own link labels (mock-up feedback:
   MudBlazor's default subtitle2/body2 cell typography read distinctly larger than the rest of the
   shell). Matches NavMenu.razor.css's .nav-link__text literal - same precedent, not a new one.
   !important because MudBlazor's own rule (.mud-table-root .mud-table-body .mud-table-cell) carries
   higher specificity (three classes vs. one) - confirmed via DevTools showing this declaration
   present but struck through/overridden without it. */
.mud-table-cell {
    font-size: 15px !important;
}

/* PRS-1: the mock-ups render button labels in normal case ("Add scheme"), not MudBlazor's default
   all-caps transform - a CSS presentation choice, not something the localized copy itself should
   have to fight (the resx values are already normal case). */
.mud-button-root {
    text-transform: none;
}

/* PRS-4: a handful of pre-existing call sites still pass Color.Error + Variant.Filled directly
   (not yet migrated to ButtonRole.Destructive/LoadingButton - SK.Domain.Core.Enums.ButtonRole),
   which renders a solid red button. Destructive MUST NOT be filled at rest (see tokens.css's own
   .dtx-btn--destructive), so this brings every such call site in line without touching each one
   individually. */
.mud-button-filled.mud-button-filled-error {
    background-color: var(--dtx-surface-card);
    color: var(--dtx-btn-destructive-text);
    border: 1px solid var(--dtx-btn-destructive-border);
}

.mud-button-filled.mud-button-filled-error:hover,
.mud-button-filled.mud-button-filled-error:focus-visible {
    background-color: var(--dtx-btn-destructive-bg-hover);
    color: var(--dtx-btn-destructive-text);
}

.mud-button-filled.mud-button-filled-error:active {
    background-color: var(--dtx-btn-destructive-bg-pressed);
    color: var(--dtx-text-on-fill);
}

.mud-tabs.mud-tabs-rounded .mud-tabs-tabbar {
    border-radius: 0;
}

/* Top-bar links: a subtle translucent chip on hover, matching the hamburger toggle's chip size. */
.app-topbar .top-menu__link {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 var(--dtx-space-4);
    border-radius: var(--dtx-radius);
    transition: background-color var(--dtx-motion-base) var(--dtx-motion-easing),
                color var(--dtx-motion-base) var(--dtx-motion-easing);
}

.app-topbar .top-menu__link:hover,
.app-topbar .top-menu__link:focus-visible {
    color: var(--sk-shell-accent);
    background-color: var(--sk-shell-hover-bg);
}

/* Keep secondary (e.g. Cancel) readable on hover: on-fill text on a darker fill, instead of
   text that blends into the fill. --dtx-btn-secondary-bg-pressed is the LIGHT "pressed" shade
   from the .dtx-btn--secondary button-role system (white-at-rest, per tokens.css's own
   --dtx-color-btn-secondary-rest); a raw MudButton with Color.Secondary Variant.Filled instead
   renders dark-at-rest via the --mud-palette-secondary mapping, so pairing it with that light
   token put near-white text on a near-white background on hover - affected every un-migrated
   Color.Secondary button: Manage/Email, Manage/TwoFactorAuthentication, the three Power BI
   report-action components. Composing a lighter tint of the dark rest colour
   itself (both already-governed role tokens) keeps the darker-fill intent without borrowing a
   token from the other button system. */
.mud-button-filled.mud-button-filled-secondary:hover,
.mud-button-filled.mud-button-filled-secondary:focus-visible {
    color: var(--dtx-text-on-fill);
    background-color: color-mix(in srgb, var(--dtx-btn-secondary-text) 82%, var(--dtx-text-on-fill));
}

/* ==========================================================================
   Right rail (design.md D17) — Chat / Feedback / language switcher, plus
   sign-out. Figma node 9:1842 confirms this is a PERSISTENT, full-height
   white column (72px, left divider border) - a third layout column sitting
   beside the sidebar and the main content, not a floating overlay centred on
   the viewport. app.css reserves the 72px via --sk-rail-width on .sk-shell so
   page content never renders underneath it.

   Sign-out sits near the top of the column (mock-up omission (c)); a flexible
   spacer pushes Chat/Feedback/the language switcher down to the lower third,
   matching the Figma layout (Chat at ~72% down, Feedback+Help clustered near
   the bottom).
   ========================================================================== */

/* z-index above the chat drawer's own 1300 (app.css's .sk-chat-drawer): the rail establishes its
   own stacking context, so a descendant popup that pops outward from it (the language switcher's
   menu, opening left over the drawer's area) can never outrank a separate sibling context with a
   higher z-index no matter what z-index the popup itself declares - the WHOLE rail context paints
   at whichever value is set here. Confirmed needed: with the rail below the drawer, the language
   menu rendered visually behind the open chat drawer (mock-up feedback). */
.dtx-rail {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: var(--sk-rail-width);
    z-index: 1310;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dtx-space-3);
    padding: var(--dtx-space-4) 0 var(--dtx-space-5);
    box-sizing: border-box;
    background: var(--dtx-surface-card);
    border-left: 1px solid var(--dtx-border-divider);
}

.dtx-rail__spacer {
    flex: 1 1 auto;
}

.dtx-rail__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Rounded square (Figma cornerRadius 12), not a circle - the ghost/outline treatment is the
   default (Logout, Feedback, the language switcher); only Chat is filled (see --action below). */
.dtx-rail__button {
    width: 44px;
    height: 44px;
    border-radius: var(--dtx-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dtx-border-divider);
    background: var(--dtx-surface-card);
    cursor: pointer;
    color: var(--dtx-text-secondary);
    transition: background-color var(--dtx-motion-base) var(--dtx-motion-easing),
                transform var(--dtx-motion-fast) var(--dtx-motion-easing);
}

.dtx-rail__button:hover {
    transform: scale(1.05);
    background: var(--dtx-surface-sunken);
}

/* Chat: the sole filled/prominent rail action (Figma fill matches --dtx-btn-action-bg - the Action role colour). */
.dtx-rail__button--action {
    border-color: transparent;
    color: var(--dtx-text-on-fill);
    background: var(--dtx-btn-action-bg);
}

.dtx-rail__button--action:hover {
    background: var(--dtx-btn-action-bg-hover);
}

.dtx-rail__button svg,
.dtx-rail__button .mud-icon-root {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

/* --dtx-type-xs (secondary/meta text), not --dtx-type-2xs: that token is the governed uppercase
   micro-label style for badges/nav section headers (tokens.css) - it isn't meant for these rail
   captions. Per design, "Chat"/"Feedback" render as-is (their resource strings are already
   sentence-cased), not upper-cased or bolded. */
.dtx-rail__label {
    font: var(--dtx-type-xs);
    color: var(--dtx-text-muted);
    text-align: center;
}

/* The language switcher's own markup (SK.Blazor.Components.Shared/Components/LanguageSwitcher.razor)
   is a pill-shaped code+chevron trigger; collapsed here to the rail's rounded-square footprint, showing
   the two-letter language code alone (LOC-5). The chevron is the only part hidden: hiding the trigger's
   spans, as an earlier flag-based version did, would blank the code. */
.dtx-rail .sk-language-switcher {
    margin: 0;
}

.dtx-rail .sk-language-switcher__trigger {
    width: 44px;
    height: 44px;
    border-radius: var(--dtx-radius);
    justify-content: center;
    border: 1px solid var(--dtx-border-divider);
    background: var(--dtx-surface-card);
    padding: 0;
}

.dtx-rail .sk-language-switcher__chevron {
    display: none;
}

/* Opens upward and to the left of the trigger (not the base rule's "below, right-aligned"): the
   switcher sits near the foot of a full-height rail, so a menu that opens downward from there
   renders off-screen, below the viewport - the exact bug this fixes. */
.dtx-rail .sk-language-switcher__menu {
    top: auto;
    bottom: 0;
    right: calc(100% + var(--dtx-space-2));
    left: auto;
}

/* ==========================================================================
   BUTTON ROLES — PRS-4. Four roles, six states each. Destructive is never
   filled at rest. Label colour is constant across states of the same role.
   Size never changes while loading (the loading spinner replaces the label
   in place; see LoadingButton / StaticSubmitButton).

   These live HERE, not in tokens.css, for the reason this file's own header
   gives: they are plain class selectors at (0,1,0) that land on the same
   elements as MudBlazor's .mud-button-* rules, which are also (0,1,0).
   tokens.css is linked BEFORE MudBlazor.min.css (App.razor), so while these
   sat there MudBlazor won every tie: .mud-button/.mud-button-outlined padding
   beat .dtx-btn's governed spacing outright, and .mud-button-outlined's
   `border` shorthand reset the Secondary/Destructive border colour to a
   translucent value built from an unbridged --mud-palette-*-rgb. The fills
   and label colours only survived by coincidence of the bridge mapping.
   Values below still come exclusively from tokens.css's governed set.
   ========================================================================== */

.dtx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dtx-space-2);
    height: var(--dtx-control-height-default);
    padding: 0 var(--dtx-space-4);
    border-radius: var(--dtx-radius);
    border: 1px solid transparent;
    font: var(--dtx-type-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dtx-motion-base) var(--dtx-motion-easing),
                border-color var(--dtx-motion-base) var(--dtx-motion-easing),
                color var(--dtx-motion-base) var(--dtx-motion-easing);
}

/* Dense: the governed sizing for a button that shares a row with MudBlazor's own Size.Small
   buttons - a data-grid cell action, where .dtx-btn's default 40px height next to an
   un-migrated small button (Organisations: Spend beside Suspend) reads as two different
   controls. Role, colours and states are unchanged; only the size is. */
.dtx-btn--dense {
    height: var(--dtx-control-height-dense);
    padding: 0 var(--dtx-space-3);
    font: var(--dtx-type-xs);
    font-weight: 600;
}

.dtx-btn:disabled,
.dtx-btn[aria-disabled="true"] {
    background: var(--dtx-btn-disabled-bg) !important;
    border-color: var(--dtx-btn-disabled-border) !important;
    color: var(--dtx-btn-disabled-text) !important;
    cursor: not-allowed;
}

.dtx-btn--primary {
    background: var(--dtx-btn-primary-bg);
    color: var(--dtx-text-on-fill);
}

.dtx-btn--primary:hover {
    background: var(--dtx-btn-primary-bg-hover);
}

.dtx-btn--primary:active {
    background: var(--dtx-btn-primary-bg-pressed);
}

.dtx-btn--action {
    background: var(--dtx-btn-action-bg);
    color: var(--dtx-text-on-fill);
}

.dtx-btn--action:hover {
    background: var(--dtx-btn-action-bg-hover);
}

.dtx-btn--action:active {
    background: var(--dtx-btn-action-bg-pressed);
}

/* Destructive: unfilled at rest and on hover (PRS-4 — "MUST NOT be presented filled while at
   rest"), filled only on press. Distinguished from Action by shape (outline, not fill) and by
   an icon at the call site (design.md D5), not by colour alone. */
.dtx-btn--destructive {
    background: transparent;
    border-color: var(--dtx-btn-destructive-border);
    color: var(--dtx-btn-destructive-text);
}

.dtx-btn--destructive:hover {
    background: var(--dtx-btn-destructive-bg-hover);
}

/* Bug 90: MudBlazor's own .mud-button-outlined.mud-button-outlined-error:active rule (specificity
   0,2,1) sets the SAME hover-tint background on :active, beating this rule's plain
   .dtx-btn--destructive:active (0,1,1) - the pressed state rendered as the hover tint instead of
   the solid fill (color still came from here, since MudBlazor's rule never touches color). Paired
   with .mud-button-outlined-error - the class MudButton always adds for Role=Destructive's
   Variant.Outlined+Color.Error combo - to match/exceed that specificity, same technique already
   used above for .mud-button-filled.mud-button-filled-error. */
.dtx-btn--destructive.mud-button-outlined-error:hover {
    background: var(--dtx-btn-destructive-bg-hover);
}

.dtx-btn--destructive.mud-button-outlined-error:active {
    background: var(--dtx-btn-destructive-bg-pressed);
    border-color: var(--dtx-btn-destructive-bg-pressed);
    color: var(--dtx-text-on-fill);
}

.dtx-btn--secondary {
    background: var(--dtx-btn-secondary-bg);
    border-color: var(--dtx-btn-secondary-border);
    color: var(--dtx-btn-secondary-text);
}

.dtx-btn--secondary:hover {
    background: var(--dtx-btn-secondary-bg-hover);
}

.dtx-btn--secondary:active {
    background: var(--dtx-btn-secondary-bg-pressed);
}

/* Loading: label is hidden (not removed) and a spinner takes its place, so the button's box
   size cannot change (PRS-4's "no size change while loading"). Two things that both bit this
   before working:
   1. LoadingButton always sets Disabled while IsBusy, and MudBlazor's own
      "button.mud-button-root:disabled { color: ... !important }" rule has higher specificity
      (0,2,0) than a bare ".dtx-btn--loading" (0,1,0) - both !important, so specificity decided
      and MudBlazor's disabled colour was winning, leaving the label visible under the spinner
      (bug 94 follow-up). Fixed by adding the element type + ":disabled" to clear (0,2,1),
      which always beats MudBlazor's (0,2,0) regardless of stylesheet order.
   2. The spinner (::after) must never share the "color" property with the label. It used to
      read "currentColor", so making it visible for a filled role (below) meant overriding
      "color" on the button itself - which also made the "hidden" label visible again, since
      both were reading the very same property. The spinner now reads its own
      "--dtx-btn-spinner-color" custom property instead, completely decoupled from the label's
      "color: transparent". */
.dtx-btn--loading {
    position: relative;
    pointer-events: none;
    --dtx-btn-spinner-color: var(--dtx-text-body);
}

button.dtx-btn--loading:disabled {
    color: transparent !important;
}

.dtx-btn--loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid var(--dtx-btn-spinner-color);
    border-top-color: transparent;
    animation: dtx-spin var(--dtx-motion-slow) linear infinite;
}

.dtx-btn--primary.dtx-btn--loading,
.dtx-btn--action.dtx-btn--loading {
    --dtx-btn-spinner-color: var(--dtx-text-on-fill);
}

@keyframes dtx-spin {
    to {
        transform: rotate(360deg);
    }
}