.mud-chip,
.mud-chip-filled,
.mud-chip-outlined,
.mud-chip-default,
.mud-chip-size-small,
.mud-chip-size-medium,
.mud-chip-size-large {
    border-radius: 6px !important;
}

/* Ensure chip children like icons maintain the square look */
.mud-chip .mud-chip-icon,
.mud-chip .mud-chip-avatar,
.mud-chip .mud-chip-content,
.mud-chip .mud-chip-close-button {
    border-radius: 4px !important; /* Slightly smaller radius for inner elements */
}

.m3-chip {
    height: 32px;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
}

/* Assist chip - Used for discrete actions */
.m3-chip-display {
    background-color: var(--md-sys-color-tertiary);
    color: var(--md-sys-color-on-tertiary);
    border: none;
}

    .m3-chip-display:hover {
        background-color: var(--md-sys-color-surface-container-lowest);
    }

    .m3-chip-display.outlined {
        background-color: transparent;
        border: 1px solid var(--md-sys-color-outline);
    }

/* Filter chip - Used for filtering content, toggleable */
.m3-chip-filter {
    background-color: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    border: none;
}

    .m3-chip-filter.selected {
        background-color: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-secondary-container);
        border-color: transparent;
        transform: scale(0.95);
        transition: transform 0.1s ease-in-out;
    }

    .m3-chip-filter.outlined {
        background-color: transparent;
        border: 1px solid var(--md-sys-color-outline);
    }

        .m3-chip-filter.outlined.selected {
            background-color: var(--md-sys-color-secondary-container, #e8def8);
            border-color: transparent;
        }

/* Input chip - Used for discrete pieces of information */
./*m3-chip-input {
    background-color: var(--md-sys-color-surface-container-high, #ece6f0);
    color: var(--md-sys-color-on-surface, #1c1b1f);
    border: none;
    padding-right: 8px;*/ /* Smaller right padding to accommodate close icon */
/*}

    .m3-chip-input .mud-chip-close-button {
        margin-left: 8px;
        font-size: 18px;
    }

    .m3-chip-input.outlined {
        background-color: transparent;
        border: 1px solid var(--md-sys-color-outline, #79747e);
    }*/

/* Suggestion chip - Used for suggested options */
.m3-chip-suggestion {
    background-color: var(--md-sys-color-surface-container-low, #f2f2f2);
    color: var(--md-sys-color-on-surface, #1c1b1f);
    border: none;
    padding-left: 8px; /* Smaller left padding to accommodate icon */
}

    .m3-chip-suggestion .mud-chip-icon {
        margin-right: 8px;
        font-size: 18px;
    }

    .m3-chip-suggestion.outlined {
        background-color: transparent;
        border: 1px solid var(--md-sys-color-outline, #79747e);
    }

/* Common states */
.m3-chip:disabled,
.m3-chip.disabled {
    opacity: 0.38;
    pointer-events: none;
}

/* Elevated variant */
.m3-chip.elevated {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

/* Custom styling for MudBlazor integration */
.mud-chip.m3-chip {
    transition: all 0.2s ease;
}

    .mud-chip.m3-chip .mud-chip-content {
        padding: 0;
    }

/* Animation for selection */
.m3-chip-filter.selected {
    transform: scale(0.95);
    transition: transform 0.1s ease-in-out;
}

.chip-tonal {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: 10px;
    padding: 0 10px;
    height: 28px;
}

/*Chips used in the locationmanagement and also user management */
.role-chip-admin {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

.role-chip-user {
    background-color: var(--md-sys-color-secondary) !important;
    color: var(--md-sys-color-on-secondary) !important;
}

.role-chip-owner {
    background-color: var(--md-sys-color-tertiary) !important;
    color: var(--md-sys-color-on-tertiary) !important;
}

.status-chip-active {
    background-color: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}

.status-chip-pending {
    background-color: var(--md-sys-color-tertiary-container) !important;
    color: var(--md-sys-color-on-tertiary-container) !important;
}

.status-chip-deactivated {
    background-color: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
}

.status-chip-deleted {
    background-color: var(--md-sys-color-error-container) !important;
    color: var(--md-sys-color-on-error-container) !important;
}


/*Timeview*/
.order-chip {
    background-color: var(--md-sys-color-primary-container) !important;
    color: var( --md-sys-color-on-primary-container) !important;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: background-color 0.2s ease;
}

    .order-chip:hover {
        background-color: #3d5636 !important;
    }

    .order-chip.mud-chip:hover {
        box-shadow: none;
    }