/* ============================================================
   Clockwork.Design — MudBlazor Component Overrides
   Only include in MudBlazor-consuming apps
   ============================================================ */

/* --- Paper & Card Transitions --- */
.mud-paper {
    transition: box-shadow var(--cwe-transition-med),
                background-color var(--cwe-transition-med);
}

.mud-card {
    transition: box-shadow var(--cwe-transition-med),
                transform var(--cwe-transition-med);
    position: relative;
    overflow: hidden;
}

.mud-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cwe-accent-glow) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--cwe-transition-med);
    pointer-events: none;
    z-index: 0;
}

.mud-card:hover::before {
    opacity: 1;
}

/* --- Chip & Button Transitions --- */
.mud-chip {
    transition: background-color var(--cwe-transition-fast),
                box-shadow var(--cwe-transition-fast);
}

.mud-button-root {
    transition: background-color var(--cwe-transition-fast),
                box-shadow var(--cwe-transition-fast),
                transform var(--cwe-transition-fast);
}

.mud-button-root:hover {
    box-shadow: var(--cwe-shadow-sm);
    transform: translateY(-2px);
}

.mud-button-root.mud-button-filled:hover {
    box-shadow: 0 8px 24px rgba(217, 115, 0, 0.25);
}

.mud-button-root:active {
    transform: scale(0.98);
}

/* --- Button Padding: match btn-*-cwe sizing (0.85rem 2rem) --- */
.mud-button-root.mud-button-size-large {
    padding: 0.85rem 2rem;
    font-size: 0.95rem;
}

/* --- Outlined Button: neutral border + white text to match btn-outline-cwe --- */
.mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--cwe-border);
    color: var(--cwe-text-primary);
}

.mud-button-outlined.mud-button-outlined-primary:hover {
    border-color: var(--cwe-accent);
    background: var(--cwe-accent-glow);
    color: var(--cwe-text-primary);
}

/* --- Input Focus Glow --- */
.mud-input-control .mud-input:focus-within {
    box-shadow: 0 0 0 3px var(--cwe-accent-glow-strong);
}

/* --- Touch Target Overrides (Coarse Pointers) --- */
@media (pointer: coarse) {
    .mud-button-root {
        min-height: 44px;
        min-width: 44px;
    }

    .mud-icon-button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* --- Dialog Styling --- */
@keyframes dialogEnter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mud-dialog {
    border-radius: var(--cwe-radius-lg) !important;
    animation: dialogEnter var(--cwe-transition-med) var(--cwe-ease-out-expo) both;
}

.mud-dialog .mud-dialog-title {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 12px;
}

.mud-dialog .mud-dialog-actions {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 12px;
}