/* =============================================================================================
   Corrections to the imdstandard Radzen theme.

   Loaded from App.razor immediately after <RadzenTheme>, which is the whole point: every rule
   here matches a theme rule at the same specificity and wins on document order, so none of it
   needs !important and none of it will silently stop applying when a selector is nudged.
   ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
   Outlined "Light" buttons.

   The theme paints --rz-base-200 (#e9eaed, a near-white grey) onto both the label and the inset
   ring that stands in for the border:

       .rz-button.rz-variant-outlined.rz-light.rz-shade-default {
           box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200);
           color: var(--rz-base-200);
       }

   That colour only reads on a dark surface, and this application does not have one — every panel
   it puts these on is white. The result is a button that is genuinely invisible rather than
   merely quiet: the document builder's block palette, and the Add and Paste controls in its
   editors, were all reported as buttons nobody could see.

   Two things had defeated the local attempts to patch this. The pale ring is a box-shadow, not a
   border, so overriding border-color changed nothing at all; and the theme's selector carries
   four classes, so a component's `.vt-palette .rz-button` was two short of reaching it. Both are
   dealt with here, once, for every such button in the application.

   Kept deliberately subdued. These are secondary actions sitting beside a filled primary one, and
   the fix is meant to make them visible, not to make them compete.
   --------------------------------------------------------------------------------------------- */

.rz-button.rz-variant-outlined.rz-light,
.rz-button.rz-variant-outlined.rz-light.rz-shade-default {
    color: #334155;
    background-color: #fff;
    box-shadow: inset 0 0 0 var(--rz-border-width, 1px) #94a3b8;
}

/* The icon inherits its own colour from the theme, so it needs saying separately or a button
   ends up with a readable label and an invisible glyph. */
.rz-button.rz-variant-outlined.rz-light .rzi,
.rz-button.rz-variant-outlined.rz-light i {
    color: #475569;
}

@media (hover: hover) and (pointer: fine) {
    .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):not(:disabled):hover {
        color: #0f172a;
        background-color: #f1f5f9;
        background-image: none;
        box-shadow: inset 0 0 0 var(--rz-border-width, 1px) #64748b;
    }
}

.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):not(:disabled):active {
    background-color: #e2e8f0;
    background-image: none;
}

/* Unavailable has to stay distinguishable from merely quiet — which is the distinction the
   original pale grey destroyed, by making every button look switched off. A dashed ring says it
   at a glance, without relying on the reader comparing two greys. */
.rz-button.rz-variant-outlined.rz-light:disabled,
.rz-button.rz-variant-outlined.rz-light.rz-state-disabled {
    color: #94a3b8;
    background-color: #f8fafc;
    box-shadow: none;
    border: 1px dashed #cbd5e1;
    opacity: 1;
}

.rz-button.rz-variant-outlined.rz-light:disabled .rzi,
.rz-button.rz-variant-outlined.rz-light:disabled i,
.rz-button.rz-variant-outlined.rz-light.rz-state-disabled .rzi,
.rz-button.rz-variant-outlined.rz-light.rz-state-disabled i {
    color: #cbd5e1;
}