@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/mulish-v18-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/mulish-v18-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/mulish-v18-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/mulish-v18-latin-700.woff2') format('woff2');
}

html, body {
    font-family: 'Mulish', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
}

/* Smooth scrollbar on dark backgrounds */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }

/* Permission level chips on the Commands page. Colour hints follow the
   visual language of the Twitch chat badges (broadcaster camera, mod
   sword, VIP diamond). Everyone uses the default outlined MudChip look.
   All role pills share a fixed width so the column lines up cleanly. */
.permission-chip {
    width: 120px !important;
    justify-content: center !important;
}
.permission-chip .mud-chip-content {
    flex-grow: 1;
    justify-content: center;
}
.permission-subscriber,
.permission-vip,
.permission-moderator,
.permission-broadcaster {
    color: white !important;
    font-weight: 500 !important;
}
.permission-subscriber  { background: #4fc3f7 !important; }  /* light blue */
.permission-vip         { background: #e005b9 !important; }  /* Twitch VIP pink */
.permission-moderator   { background: #00ad03 !important; }  /* Twitch mod green */
.permission-broadcaster { background: #e71a28 !important; }  /* Twitch broadcaster red */

/* Highlighted header for AveloBot data tables. MudTable's HeaderClass
   lands on the <thead> element, so we style its th children. */
.avelobot-table-header {
    background: var(--mud-palette-action-default-hover) !important;
}
.avelobot-table-header th {
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* AppBar user menu: swap MudMenu's StartIcon SVG for the Twitch profile picture.
   Activated when the `--user-avatar-url` CSS var is set on the MudMenu root. */
.avelobot-user-menu-avatar .mud-button-icon-start {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background-image: var(--user-avatar-url);
    background-size: cover;
    background-position: center;
    margin-right: 8px;
}
.avelobot-user-menu-avatar .mud-button-icon-start svg {
    display: none;
}