:root {
    --kendo-border-radius-md: var(--mud-default-borderradius); /* Radius of buttons, etc. */
    --kendo-color-app-surface: var(--mud-palette-background); /* Main background color */
    --kendo-color-on-app-surface: var(--mud-palette-text-primary); /*Text color in table header (active) and table body */
    --kendo-color-subtle: var(--mud-palette-text-secondary); /* Text color in table header (inactive) */
    --kendo-color-surface: var(--mud-palette-surface); /* Background color of some components */
    --kendo-color-surface-alt: var(--mud-palette-surface); /* Background color of table body */
    /* The 'base' colors are too gray (desaturated) in dark mode and have no corresponding
        variables in Mud Blazor, so they are manually overridden here.
        They are given a blue tint to coordinate better with the main background color.
    */
    --kendo-color-base-subtle: #525263;
    --kendo-color-base-subtle-hover: #454555;
    --kendo-color-base-subtle-active: #3C3C4A;
    --kendo-color-base: #616173;
    --kendo-color-base-hover: #525263; /* Hover in the items per page selector */
    --kendo-color-base-active: #3C3C4A; /* Hover (active item) in the items per page selector */
    --kendo-color-base-emphasis: #c2c2cc;
    --kendo-color-base-on-subtle: #ebebee;
    --kendo-color-on-base: #ebebee;
    --kendo-color-base-on-surface: #d6d6dd; /* Icon color in table */
    /* End manual override of 'base' colors. */
    --kendo-color-primary-subtle: var(--mud-palette-primary);
    --kendo-color-primary-subtle-hover: var(--mud-palette-primary-lighten);
    --kendo-color-primary-subtle-active: var(--mud-palette-primary-darken);
    --kendo-color-primary: var(--mud-palette-primary);
    --kendo-color-primary-hover: var(--mud-palette-primary-lighten);
    --kendo-color-primary-active: var(--mud-palette-primary-darken);
    --kendo-color-primary-emphasis: var(--mud-palette-primary-lighten);
    --kendo-color-primary-on-subtle: var(--mud-palette-primary-text);
    --kendo-color-on-primary: var(--mud-palette-primary-text);
    --kendo-color-primary-on-surface: var(--mud-palette-primary); /* Text color of table pager */
    --kendo-color-secondary-subtle: var(--mud-palette-secondary);
    --kendo-color-secondary-subtle-hover: var(--mud-palette-secondary-lighten);
    --kendo-color-secondary-subtle-active: var(--mud-palette-secondary-darken);
    --kendo-color-secondary: var(--mud-palette-secondary); /* Color of selected item in items per page selector */
    --kendo-color-secondary-hover: var(--mud-palette-secondary-lighten);
    --kendo-color-secondary-active: var(--mud-palette-secondary-darken);
    --kendo-color-secondary-emphasis: var(--mud-palette-secondary-lighten);
    --kendo-color-secondary-on-subtle: var(--mud-palette-secondary-text);
    --kendo-color-on-secondary: var(--mud-palette-secondary-text);
    --kendo-color-secondary-on-surface: var(--mud-palette-secondary);
    --kendo-color-tertiary-subtle: var(--mud-palette-tertiary);
    --kendo-color-tertiary-subtle-hover: var(--mud-palette-tertiary-lighten);
    --kendo-color-tertiary-subtle-active: var(--mud-palette-tertiary-darken);
    --kendo-color-tertiary: var(--mud-palette-tertiary);
    --kendo-color-tertiary-hover: var(--mud-palette-tertiary-lighten);
    --kendo-color-tertiary-active: var(--mud-palette-tertiary-darken);
    --kendo-color-tertiary-emphasis: var(--mud-palette-tertiary-lighten);
    --kendo-color-tertiary-on-subtle: var(--mud-palette-tertiary-text);
    --kendo-color-on-tertiary: var(--mud-palette-tertiary-text);
    --kendo-color-tertiary-on-surface: var(--mud-palette-tertiary);
    --kendo-color-info-subtle: var(--mud-palette-info);
    --kendo-color-info-subtle-hover: var(--mud-palette-info-lighten);
    --kendo-color-info-subtle-active: var(--mud-palette-info-darken);
    --kendo-color-info: var(--mud-palette-info);
    --kendo-color-info-hover: var(--mud-palette-info-lighten);
    --kendo-color-info-active: var(--mud-palette-info-darken);
    --kendo-color-info-emphasis: var(--mud-palette-info-lighten);
    --kendo-color-info-on-subtle: var(--mud-palette-info-text);
    --kendo-color-on-info: var(--mud-palette-info-text);
    --kendo-color-info-on-surface: var(--mud-palette-info);
    --kendo-color-success-subtle: var(--mud-palette-success);
    --kendo-color-success-subtle-hover: var(--mud-palette-success-lighten);
    --kendo-color-success-subtle-active: var(--mud-palette-success-darken);
    --kendo-color-success: var(--mud-palette-success);
    --kendo-color-success-hover: var(--mud-palette-success-lighten);
    --kendo-color-success-active: var(--mud-palette-success-darken);
    --kendo-color-success-emphasis: var(--mud-palette-success-lighten);
    --kendo-color-success-on-subtle: var(--mud-palette-success-text);
    --kendo-color-on-success: var(--mud-palette-success-text);
    --kendo-color-success-on-surface: var(--mud-palette-success);
    --kendo-color-warning-subtle: var(--mud-palette-warning);
    --kendo-color-warning-subtle-hover: var(--mud-palette-warning-lighten);
    --kendo-color-warning-subtle-active: var(--mud-palette-warning-darken);
    --kendo-color-warning: var(--mud-palette-warning);
    --kendo-color-warning-hover: var(--mud-palette-warning-lighten);
    --kendo-color-warning-active: var(--mud-palette-warning-darken);
    --kendo-color-warning-emphasis: var(--mud-palette-warning-lighten);
    --kendo-color-warning-on-subtle: var(--mud-palette-warning-text);
    --kendo-color-on-warning: var(--mud-palette-warning-text);
    --kendo-color-warning-on-surface: var(--mud-palette-warning);
    --kendo-color-error-subtle: var(--mud-palette-error);
    --kendo-color-error-subtle-hover: var(--mud-palette-error-lighten);
    --kendo-color-error-subtle-active: var(--mud-palette-error-darken);
    --kendo-color-error: var(--mud-palette-error);
    --kendo-color-error-hover: var(--mud-palette-error-lighten);
    --kendo-color-error-active: var(--mud-palette-error-darken);
    --kendo-color-error-emphasis: var(--mud-palette-error-lighten);
    --kendo-color-error-on-subtle: var(--mud-palette-error-text);
    --kendo-color-on-error: var(--mud-palette-error-text);
    --kendo-color-error-on-surface: var(--mud-palette-error);
    /* --kendo-color-light: #f5f5f5; /* Overlay while table is loading */
    /* --kendo-color-dark: #424242; /* Overlay while page is loading */
}

.moffet-grid .k-button-solid-base {
    background-color: var(--mud-palette-background);
    border: none;
}
    .moffet-grid .k-button-solid-base:hover, .k-button-solid-base.k-hover {
        background-color: var(--kendo-color-base-hover);
    }

/* The following styles are common between light and dark themes. */

.moffet-grid span.k-input-value-text {
    font-size: 0.875rem;
}

.moffet-grid .k-input-md .k-input-inner, .k-picker-md .k-input-inner {
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
}

/* Highlight selected grid rows in dark mode */
.moffet-grid .k-grid-table tr.k-state-selected,
.moffet-grid .k-grid-table tr.k-state-selected:hover {
    background-color: rgba(33, 150, 243, 0.25) !important;
    border-left: 3px solid #42A5F5 !important;
}

.moffet-grid .k-grid-table tr.k-state-selected td {
    background-color: transparent;
    font-weight: 500;
}