/* Shared shape token for form controls and compact summary values. */
:root {
    --app-field-radius: 12px;
    --app-button-radius: 8px;
}

/* Keep every MudBlazor field type consistent across pages and hosts. */
.mud-input-outlined,
.mud-input-outlined-border,
.mud-input-filled {
    border-radius: var(--app-field-radius) !important;
}

/* Gives totals and other summary values the same rounded-rectangle shape as inputs. */
.app-summary-field {
    border-radius: var(--app-field-radius) !important;
}

/* One button shape throughout the application, including login and portaled UI. */
#app button,
#app .mud-button-root,
#app .mud-icon-button,
#app .mud-button-group-root,
#app input[type="button"],
#app input[type="submit"],
#app input[type="reset"] {
    border-radius: var(--app-button-radius) !important;
}

/* Keep hover/focus ripples clipped to the same rounded rectangle. */
#app .mud-button-root .mud-button-root-ripple,
#app .mud-button-root .mud-ripple,
#app button .mud-ripple {
    border-radius: inherit !important;
}

/* Keep row actions in every search page as clean icon buttons. Action-specific
   colors and icons remain, while the old filled color tiles are removed. */
#app .row-action-btn,
#app .row-action-btn:hover,
#app .row-action-btn:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
}

#app .row-action-btn:hover,
#app .row-action-btn:focus-visible {
    background: color-mix(in srgb, currentColor 11%, transparent) !important;
}

#app .row-action-info,
#app .row-action-info:hover,
#app .row-action-info:focus-visible {
    color: var(--mud-palette-primary) !important;
}

#app .row-action-edit,
#app .row-action-edit:hover,
#app .row-action-edit:focus-visible {
    color: var(--mud-palette-warning) !important;
}

#app .row-action-copy,
#app .row-action-copy:hover,
#app .row-action-copy:focus-visible {
    color: var(--mud-palette-info) !important;
}

#app .row-action-restore,
#app .row-action-restore:hover,
#app .row-action-restore:focus-visible,
#app .row-action-delete,
#app .row-action-delete:hover,
#app .row-action-delete:focus-visible {
    color: var(--mud-palette-error) !important;
}

#app .row-action-print,
#app .row-action-print:hover,
#app .row-action-print:focus-visible {
    color: var(--mud-palette-secondary) !important;
}

#app .row-action-more,
#app .row-action-more:hover,
#app .row-action-more:focus-visible {
    color: var(--mud-palette-text-secondary) !important;
}

/* Home header controls use the same rounded rectangle instead of circles or pills. */
.home-shell .logo-container,
.home-shell .home-logo-image,
.home-shell .quick-link,
.home-shell .quick-link-icon,
.home-shell .home-page-search .mud-input-adornment-start,
.home-shell .contact-btn,
.home-shell .notification-btn,
.home-shell .home-actions-menu .mud-icon-button {
    border-radius: var(--app-field-radius) !important;
}

/* Reusable application surfaces matching the product-page MudPaper treatment.
   Apply these classes to page-level papers, not utility or popover papers. */
.app-surface {
    position: relative;
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    background: linear-gradient(
        165deg,
        var(--glass-bg-strong, color-mix(in srgb, var(--mud-palette-surface) 78%, transparent)) 0%,
        var(--glass-bg, color-mix(in srgb, var(--mud-palette-surface) 58%, transparent)) 100%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.7);
    backdrop-filter: blur(22px) saturate(1.7);
    border: 0;
    border-radius: 20px !important;
    box-shadow: 0 12px 30px rgba(2, 8, 20, 0.07) !important;
}

.app-surface--content {
    min-width: 0;
}

.app-surface-logo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        165deg,
        var(--glass-bg-strong, color-mix(in srgb, var(--mud-palette-surface) 78%, transparent)) 0%,
        var(--glass-bg, color-mix(in srgb, var(--mud-palette-surface) 58%, transparent)) 100%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border: 0;
    box-shadow: 0 8px 22px rgba(2, 8, 20, 0.06) !important;
}