@layer utilities {
    .button,
    .btn[data-button-color],
    .btn:not(.dropdown-toggle):is(.btn-fill, .btn-success, .btn-danger, .btn-warning, .btn-primary, .btn-info, .btn-default),
    :is(.btn-fill, .btn-success, .btn-danger, .btn-warning, .btn-primary, .btn-info, .btn-default):not(.dropdown-toggle) {
        --button-accent: var(--text);
        --button-alpha: color-mix(in srgb, var(--button-accent) 12%, transparent);
        --button-bg: var(--elevation);
        --button-color: var(--text);
        --button-border: transparent;
        --button-height: var(--control-height);
        --button-padding-block: var(--control-padding-block);
        --button-padding-inline: var(--control-padding-inline);
        --button-radius: var(--control-radius);
        --button-font-size: var(--control-font-size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--button-height) !important;
        padding: var(--button-padding-block) var(--button-padding-inline) !important;
        border: 1px solid var(--button-border) !important;
        border-radius: var(--button-radius) !important;
        font-weight: 600 !important;
        cursor: pointer;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
        gap: 6px;
        font-size: var(--button-font-size) !important;
        line-height: 1.2 !important;
        color: var(--button-color) !important;
        background-color: var(--button-bg) !important;
        text-decoration: none !important;
        vertical-align: middle;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .button.green,
    .button[data-button-color="green"],
    .btn[data-button-color="green"],
    .btn-success {
        --button-accent: var(--green);
        --button-alpha: var(--alpha-green);
        --button-bg: var(--green);
        --button-color: var(--white);
    }

    .button.blue,
    .button[data-button-color="blue"],
    .btn[data-button-color="blue"],
    .btn-info,
    .btn-primary {
        --button-accent: var(--blue);
        --button-alpha: var(--alpha-blue);
        --button-bg: var(--blue);
        --button-color: var(--white);
    }

    .button.orange,
    .button[data-button-color="orange"],
    .btn[data-button-color="orange"],
    .btn-warning,
    .btn.rescheduled {
        --button-accent: var(--orange);
        --button-alpha: var(--alpha-orange);
        --button-bg: var(--orange);
        --button-color: var(--white);
    }

    .button.purple,
    .button[data-button-color="purple"],
    .btn[data-button-color="purple"] {
        --button-accent: var(--purple);
        --button-alpha: var(--alpha-purple);
        --button-bg: var(--purple);
        --button-color: var(--white);
    }

    .button.dark-red,
    .button.red,
    .button[data-button-color="red"],
    .button[data-button-color="dark-red"],
    .btn[data-button-color="red"],
    .btn[data-button-color="dark-red"],
    .btn-danger {
        --button-accent: var(--red);
        --button-alpha: var(--alpha-red);
        --button-bg: var(--red);
        --button-color: var(--white);
    }

    .button.light-blue,
    .button[data-button-color="light-blue"],
    .btn[data-button-color="light-blue"] {
        --button-accent: var(--color-blue);
        --button-alpha: var(--alpha-blue);
        --button-bg: var(--color-blue);
        --button-color: var(--white);
    }

    .button.dark-blue,
    .button[data-button-color="dark-blue"],
    .btn[data-button-color="dark-blue"] {
        --button-accent: var(--dark-blue);
        --button-alpha: color-mix(in srgb, var(--dark-blue) 12%, transparent);
        --button-bg: var(--dark-blue);
        --button-color: var(--white);
    }

    .button.neutral,
    .button[data-button-color="neutral"],
    .btn[data-button-color="neutral"],
    .btn-default {
        --button-accent: var(--text);
        --button-alpha: color-mix(in srgb, var(--button-accent) 10%, transparent);
        --button-bg: var(--elevation);
        --button-color: var(--text);
        --button-border: var(--table-border);
    }

    .button[data-button-variant="outline"],
    .btn[data-button-variant="outline"] {
        --button-bg: var(--surface);
        --button-color: var(--button-accent);
        --button-border: color-mix(in srgb, var(--button-accent) 24%, var(--table-border));
    }

    .button[data-button-variant="ghost"],
    .btn[data-button-variant="ghost"] {
        --button-bg: transparent;
        --button-color: var(--button-accent);
        --button-border: transparent;
    }

    .button[data-button-shape="square"],
    .btn[data-button-shape="square"] {
        --button-padding-block: 0;
        --button-padding-inline: 0;
        width: var(--control-height);
        min-width: var(--control-height);
    }

    .button.large {
        --button-height: 42px;
        --button-padding-block: 10px;
        --button-padding-inline: 18px;
        --button-font-size: 15px;
    }

    .button:not(:disabled):not([aria-disabled="true"]):hover,
    .btn[data-button-color]:not(:disabled):not([aria-disabled="true"]):hover,
    .btn:not(.dropdown-toggle):is(.btn-fill, .btn-success, .btn-danger, .btn-warning, .btn-primary, .btn-info, .btn-default):not(:disabled):not([aria-disabled="true"]):hover,
    :is(.btn-fill, .btn-success, .btn-danger, .btn-warning, .btn-primary, .btn-info, .btn-default):not(.dropdown-toggle):not(:disabled):not([aria-disabled="true"]):hover {
        background-color: var(--button-alpha) !important;
        border-color: color-mix(in srgb, var(--button-accent) 28%, transparent) !important;
        color: var(--button-accent) !important;
        text-decoration: none !important;
    }

    .button:focus-visible,
    .btn[data-button-color]:focus-visible,
    .btn:not(.dropdown-toggle):is(.btn-fill, .btn-success, .btn-danger, .btn-warning, .btn-primary, .btn-info, .btn-default):focus-visible,
    :is(.btn-fill, .btn-success, .btn-danger, .btn-warning, .btn-primary, .btn-info, .btn-default):not(.dropdown-toggle):focus-visible {
        outline: 3px solid var(--button-alpha) !important;
        outline-offset: 2px;
    }

    .button:disabled,
    .button[aria-disabled="true"],
    .btn:disabled,
    .btn[aria-disabled="true"] {
        cursor: not-allowed;
        opacity: 0.55 !important;
    }

    .button.hidden,
    .btn.hidden {
        display: none !important;
    }

    .button-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        font-size: 0.95em;
        line-height: 1;
    }

    .btn-xs {
        --button-height: 28px;
        --button-padding-block: 4px;
        --button-padding-inline: 8px;
        --button-font-size: 12px;
        gap: 5px;
    }

    .btn-sm {
        --button-height: 30px;
        --button-padding-block: 5px;
        --button-padding-inline: 10px;
        --button-font-size: 13px;
        gap: 5px;
    }

    .btn-block {
        display: flex;
        width: 100%;
    }

    .btn-wd {
        min-width: 96px;
    }

    /* Navigation Utilities (Legacy compatibility) */
    .nav {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        gap: 10px;
        flex-wrap: wrap;
    }

    .nav-icons {
        align-items: center;
    }

    .cat-btns {
        margin-bottom: 20px;
    }

    .cat-btns li {
        display: inline-block;
    }

    .cat-btns li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: var(--text);
        padding: 10px;
        border-radius: var(--radius-md);
        background-color: var(--elevation);
        min-width: 80px;
        font-size: 12px;
    }

    .cat-btns li.active a,
    .cat-btns li a:hover {
        background-color: var(--overlay);
    }
}