/* ═══════════════════════════════════════════════════════════════════
   MUDBLAZOR OVERRIDES — Nordic Banking Premium Design
   Global styles for MudBlazor components across all pages
   Specificity achieved via .app-shell parent selector (not !important)
   ═══════════════════════════════════════════════════════════════════ */

/* NOTE: .mud-theme-primary override REMOVED — NordicTheme.cs now sets Primary = #334155 */
/* NOTE: Typography h1-h3 and body1-body2 font overrides REMOVED — NordicTheme.cs now sets fonts correctly */

/* ─────────────────────────────────────────────────────────────────────
   BASE INPUT CONTROL — Foundation styles
   ───────────────────────────────────────────────────────────────────── */

.app-shell .mud-input-control {
    font-family: var(--font-body);
}

.app-shell .mud-input-control .mud-input-slot {
    font-family: var(--font-body);
    font-size: 0.9375rem;
}

.app-shell .mud-input-control-input-container {
    border-radius: 12px;
}

/* ─────────────────────────────────────────────────────────────────────
   FILLED VARIANT — Premium Nordic Style (Clean Edges)
   Clean white background with subtle border, NO shadow artifacts
   ───────────────────────────────────────────────────────────────────── */

/* Force white background on ALL filled input elements */
.app-shell .mud-input-filled,
.app-shell .mud-input-filled .mud-input-slot,
.app-shell .mud-input-filled .mud-input-control-input-container,
.app-shell .mud-input-control.mud-input-filled,
.app-shell .mud-input-control.mud-input-filled .mud-input-slot {
    background: #FFFFFF;
    background-color: #FFFFFF;
    box-shadow: none;
}

.app-shell .mud-input-filled .mud-input-slot {
    border: 1.5px solid var(--color-border, #E2E8F0);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    min-height: 48px;
    transition: border-color 200ms cubic-bezier(0.33, 1, 0.68, 1);
    overflow: visible;
}

/* Remove ALL pseudo-elements and internal MudBlazor decorations */
/* These resets use !important on display/content ONLY — framework pseudo-elements
   cannot be overridden by specificity alone */
.app-shell .mud-input-filled .mud-input-slot::before,
.app-shell .mud-input-filled .mud-input-slot::after,
.app-shell .mud-input-filled .mud-input-control-input-container::before,
.app-shell .mud-input-filled .mud-input-control-input-container::after,
.app-shell .mud-input-filled::before,
.app-shell .mud-input-filled::after,
.app-shell .mud-input-control.mud-input-filled::before,
.app-shell .mud-input-control.mud-input-filled::after {
    display: none !important;
    border: none;
    box-shadow: none;
    background: none;
    background-color: transparent;
    content: none !important;
}

/* Remove any internal MudBlazor underline/highlight effects */
.app-shell .mud-input-filled .mud-input-underline::before,
.app-shell .mud-input-filled .mud-input-underline::after,
.app-shell .mud-input-underline::before,
.app-shell .mud-input-underline::after {
    display: none !important;
    border: none;
    background: transparent;
}

/* Remove MudBlazor's default filled background (usually gray) */
.app-shell .mud-input-slot.mud-input-root.mud-input-root-filled,
.app-shell .mud-input-root-filled {
    background: #FFFFFF;
    background-color: #FFFFFF;
}

.app-shell .mud-input-filled:hover .mud-input-slot {
    border-color: var(--color-ink-300, #CBD5E1);
    box-shadow: none;
    background: #FFFFFF;
}

.app-shell .mud-input-filled.mud-focused .mud-input-slot {
    border-color: var(--color-ink-700, #334155);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.12);
    background: #FFFFFF;
}

/* Filled Input Text */
.app-shell .mud-input-filled .mud-input-slot input,
.app-shell .mud-input-filled .mud-input-slot textarea {
    padding: 0;
    margin-top: 0.125rem;
    color: var(--color-ink, #0F172A);
}

/* ─────────────────────────────────────────────────────────────────────
   FILLED LABEL — Premium Non-floating Label
   Prevents text clipping (like "g" in "Slag")
   ───────────────────────────────────────────────────────────────────── */

.app-shell .mud-input-filled .mud-input-label,
.app-shell .mud-input-label,
.app-shell .mud-input-label-filled,
.app-shell .mud-input-label-inputcontrol {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-ink-500, #64748B);
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    transition: color 200ms ease;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    line-height: 1.4;
    padding-bottom: 2px;
}

/* Label when focused */
.app-shell .mud-input-filled.mud-focused .mud-input-label {
    color: var(--color-ink-700, #334155);
}

/* Ensure label container doesn't clip text */
.app-shell .mud-input-filled .mud-input-label-filled,
.app-shell .mud-input-filled .mud-input-label-inputcontrol,
.app-shell .mud-input-control .mud-input-label-animated {
    overflow: visible;
    clip: unset;
    -webkit-clip-path: none;
    clip-path: none;
}

/* Required asterisk */
.app-shell .mud-input-filled .mud-input-label-filled.mud-input-label-required::after {
    color: var(--color-error, #DC2626);
}

/* Error State */
.app-shell .mud-input-filled.mud-input-error .mud-input-slot {
    border-color: var(--color-error, #DC2626);
}

.app-shell .mud-input-filled.mud-input-error .mud-input-label {
    color: var(--color-error, #DC2626);
}

.app-shell .mud-input-filled.mud-input-error.mud-focused .mud-input-slot {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* Helper Text */
.app-shell .mud-input-helper-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-ink-500, #64748B);
    margin-top: 0.375rem;
    padding-left: 1rem;
}

.app-shell .mud-input-error .mud-input-helper-text {
    color: var(--color-error, #DC2626);
}

/* ─────────────────────────────────────────────────────────────────────
   OUTLINED VARIANT — Clean Border Style
   ───────────────────────────────────────────────────────────────────── */

.app-shell .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--color-border, #E2E8F0);
    border-radius: 12px;
    border-width: 1.5px;
}

.app-shell .mud-input-outlined:hover .mud-input-outlined-border,
.app-shell .mud-input-outlined.mud-input-adorned-start:hover .mud-input-outlined-border {
    border-color: var(--color-ink-300, #CBD5E1);
}

.app-shell .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--color-ink-700, #334155);
    border-width: 1.5px;
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.12);
}

.app-shell .mud-input-outlined .mud-input-label {
    font-family: var(--font-body);
    font-weight: 500;
    background: var(--color-surface-primary, #FFFFFF);
    padding: 0 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────
   SELECT DROPDOWN — Premium Compact Style
   ───────────────────────────────────────────────────────────────────── */

.app-shell .mud-select .mud-input-slot {
    cursor: pointer;
}

.app-shell .mud-select-input {
    cursor: pointer;
}

/* Dropdown icon */
.app-shell .mud-input-adornment-end svg {
    color: var(--color-ink-400, #94A3B8);
    transition: transform 200ms ease;
}

.app-shell .mud-select.mud-focused .mud-input-adornment-end svg {
    transform: rotate(180deg);
    color: var(--color-ink-700, #334155);
}

/* Popover Menu - Standard MudBlazor positioning */
.app-shell .mud-popover-open {
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
    border-radius: 8px;
    border: 1px solid var(--color-border, #E2E8F0);
    background: #FFFFFF;
}

/* Select Popover specific - prevent double scrollbar */
.app-shell .mud-popover-cascading-value {
    max-height: none;
    overflow: visible;
}

.app-shell .mud-select-menu {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
}

.app-shell .mud-list {
    padding: 0.25rem;
    max-height: none;
    overflow: visible;
}

.app-shell .mud-list-item {
    font-family: var(--font-body);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    margin: 0.125rem 0;
    transition: background 150ms ease;
    min-height: 32px;
}

.app-shell .mud-list-item:hover {
    background: var(--color-surface-secondary, #F8FAFC);
}

.app-shell .mud-list-item.mud-selected {
    background: rgba(51, 65, 85, 0.08);
    color: var(--color-ink-800, #1E293B);
}

.app-shell .mud-list-item.mud-selected:hover {
    background: rgba(51, 65, 85, 0.12);
}

/* Dense list items for compact dropdowns */
.app-shell .mud-list-item-dense {
    padding: 0.375rem 0.75rem;
    min-height: 28px;
}

/* ─────────────────────────────────────────────────────────────────────
   DIALOG STYLING — Premium Modal Design
   ───────────────────────────────────────────────────────────────────── */

.app-shell .mud-dialog {
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    border: 1px solid var(--color-border, #E2E8F0);
    overflow: hidden;
}

/* Remove any internal shadows from dialog paper */
.app-shell .mud-dialog .mud-paper {
    box-shadow: none;
}

.app-shell .mud-dialog-container {
    box-shadow: none;
}

.app-shell .mud-dialog-title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-ink, #0F172A);
    padding: 1.25rem 1.5rem 0.75rem;
    text-transform: uppercase;
}

.app-shell .mud-dialog-content {
    padding: 0 1.5rem 1rem;
}

.app-shell .mud-dialog-actions {
    padding: 0.75rem 1.5rem 1.25rem;
    gap: 0.75rem;
}

/* Dialog backdrop */
.app-shell .mud-overlay-dialog {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}

/* ─────────────────────────────────────────────────────────────────────
   GRID SPACING FIX & SHADOW REMOVAL
   ───────────────────────────────────────────────────────────────────── */

.app-shell .mud-grid.mb-4 {
    margin-bottom: 1rem;
}

.app-shell .mud-grid .mud-grid-item .mud-input-control {
    margin-bottom: 0;
}

/* Ensure consistent spacing in dialogs */
.app-shell .mud-dialog-content .mud-input-control.mb-4 {
    margin-bottom: 1rem;
}

/* Remove ALL shadows from inputs in dialogs and grids */
.app-shell .mud-dialog .mud-input-slot,
.app-shell .mud-grid .mud-input-slot,
.app-shell .mud-grid-item .mud-input-slot {
    box-shadow: none;
}

/* Nuclear option: remove all internal MudBlazor input decorations */
.app-shell .mud-input-control *::before,
.app-shell .mud-input-control *::after {
    box-shadow: none;
}

/* Ensure clean edges on grid items */
.app-shell .mud-grid-item {
    box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────────
   BUTTON OVERRIDES — Nordic Banking Design
   ───────────────────────────────────────────────────────────────────── */

.app-shell .mud-button-root {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: var(--radius-md, 10px);
    text-transform: none;
    letter-spacing: 0;
}

/* PRIMARY FILLED BUTTON — Force white text with maximum specificity */
.app-shell .mud-button-root.mud-button-filled.mud-button-filled-primary,
.app-shell button.mud-button-root.mud-button-filled.mud-button-filled-primary,
.app-shell .mud-button-filled-primary {
    background: var(--mud-palette-primary, #334155);
    background-color: var(--mud-palette-primary, #334155);
    color: #FFFFFF;
    box-shadow: none;
    min-height: 40px;
    padding: 0.5rem 1.25rem;
}

.app-shell .mud-button-root.mud-button-filled.mud-button-filled-primary .mud-button-label,
.app-shell button.mud-button-root.mud-button-filled.mud-button-filled-primary .mud-button-label,
.app-shell .mud-button-filled-primary .mud-button-label,
.app-shell .mud-button-filled-primary span {
    color: #FFFFFF;
}

.app-shell .mud-button-filled.mud-button-filled-primary:hover {
    background: var(--color-ink-800, #1E293B);
    background-color: var(--color-ink-800, #1E293B);
}

/* Dialog action buttons - maximum specificity for white text */
.app-shell .mud-dialog .mud-dialog-actions .mud-button-root.mud-button-filled,
.app-shell .mud-dialog .mud-dialog-actions button.mud-button-filled,
.app-shell .mud-dialog-actions .mud-button-filled {
    color: #FFFFFF;
}

.app-shell .mud-dialog .mud-dialog-actions .mud-button-root.mud-button-filled .mud-button-label,
.app-shell .mud-dialog .mud-dialog-actions button.mud-button-filled .mud-button-label,
.app-shell .mud-dialog-actions .mud-button-filled .mud-button-label,
.app-shell .mud-dialog-actions .mud-button-filled span {
    color: #FFFFFF;
}

/* Dialog text button (Cancel/Avbrjt) styling - HIGHLY VISIBLE */
.app-shell .mud-dialog-actions .mud-button-root.mud-button-text,
.app-shell .mud-dialog-actions .mud-button-text,
.app-shell button.mud-button-text {
    color: var(--color-ink-600, #475569);
    font-weight: 500;
    min-height: 40px;
    padding: 0.5rem 1rem;
    background: transparent;
}

.app-shell .mud-dialog-actions .mud-button-root.mud-button-text .mud-button-label,
.app-shell .mud-dialog-actions .mud-button-text .mud-button-label {
    color: var(--color-ink-600, #475569);
}

.app-shell .mud-dialog-actions .mud-button-root.mud-button-text:hover,
.app-shell .mud-dialog-actions .mud-button-text:hover {
    background: var(--color-ink-100, #F1F5F9);
}

/* Remove any stray icons/content from buttons */
.app-shell .mud-dialog-actions .mud-button-root::before,
.app-shell .mud-dialog-actions .mud-button-root::after {
    content: none !important;
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   CARD OVERRIDES
   ───────────────────────────────────────────────────────────────────── */

.app-shell .mud-card {
    border-radius: var(--radius-lg, 14px);
    border: 1px solid var(--color-border, #E2E8F0);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
}

/* ─────────────────────────────────────────────────────────────────────
   TABS OVERRIDES
   ───────────────────────────────────────────────────────────────────── */

.app-shell .mud-tabs-panels {
    font-family: var(--font-body);
}

.app-shell .mud-tab {
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   BLAZOR INPUTTEXT WITH ICONS — Override for proper left padding
   InputText components don't inherit scoped CSS, needs global rule
   Uses full padding property to override shorthand conflicts
   ───────────────────────────────────────────────────────────────────── */

.app-shell input[class*="has-icon"],
.app-shell input.has-icon,
.app-shell .form-input.has-icon,
.app-shell .input-wrapper input.has-icon,
.app-shell .input-wrapper .has-icon {
    padding: 0.75rem 1rem 0.75rem 48px;
}