@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-follower,
.permission-subscriber,
.permission-vip,
.permission-moderator,
.permission-broadcaster {
    color: white !important;
    font-weight: 500 !important;
}
.permission-follower    { background: #7d6ff0 !important; }  /* Twitch heart purple */
.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;
}

/* Page-level header (see PageHeader.razor). The title carries the AveloBot
   primary-coloured underline accent; the layout puts an optional actions
   slot on the trailing edge. align-self lets the underline hug the title
   text instead of stretching across the column. */
.avelobot-page-header__title {
    border-bottom: 3px solid var(--mud-palette-primary);
    display: inline-block;
    padding-bottom: 6px;
    align-self: flex-start;
}
.avelobot-page-header__actions {
    align-self: flex-end;
}

/* Section header within a page (see SectionHeader.razor). The left accent
   bar visually anchors the section title without competing with the
   page-level underline. */
.avelobot-section-header__title {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 12px;
}

/* AlertPreview — admin-side stand-in for the OBS browser-source
   toast. The structure mirrors wwwroot/overlays/alerts/alerts.css
   (same class names, same layout modifiers) so the preview reads as
   "what OBS will paint" minus animation/sound. Everything is scoped
   under .avelobot-alert-preview so the global selectors of the live
   overlay can't leak into the admin UI. */
.avelobot-alert-preview__stage {
    background:
        /* Subtle vignette so the foreground text doesn't drown when
           the streamer picks a near-white accent against the dark
           preview surface. */
        radial-gradient(circle at center, rgba(255,255,255,0.04) 0%, transparent 70%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 8px, transparent 8px 16px),
        #1a1f24;
    border-radius: 8px;
    padding: 24px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avelobot-alert-preview .toast {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-family);
    color: var(--text-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    max-width: 100%;
}
.avelobot-alert-preview .toast.layout-left   { flex-direction: row;            text-align: left;   }
.avelobot-alert-preview .toast.layout-right  { flex-direction: row-reverse;    text-align: right;  }
.avelobot-alert-preview .toast.layout-top    { flex-direction: column;         text-align: center; align-items: center; }
.avelobot-alert-preview .toast.layout-bottom { flex-direction: column-reverse; text-align: center; align-items: center; }
.avelobot-alert-preview .toast-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    line-height: 1;
}
.avelobot-alert-preview .toast-icon img {
    max-width: var(--image-max-size, 160px);
    max-height: var(--image-max-size, 160px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.avelobot-alert-preview .toast-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.avelobot-alert-preview .toast-title {
    /* Title scales with the same --font-size custom prop that drives
       the subtitle, with a fixed offset so the headline stays larger.
       At the 18 px subtitle default this resolves to 28 px — matches
       the hardcoded value the old layout shipped with, so existing
       configs paint identically. */
    font-size: calc(var(--font-size, 18px) + 10px);
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avelobot-alert-preview .toast-subtitle {
    font-size: var(--font-size, 18px);
    font-weight: var(--font-weight, 400);
    opacity: 0.9;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avelobot-alert-preview .alert-var {
    color: var(--accent, inherit);
}
.avelobot-alert-preview .toast-message {
    font-size: calc(var(--font-size, 18px) * 0.85);
    font-weight: var(--font-weight, 400);
    color: var(--text-color, inherit);
    opacity: 0.75;
    margin-top: 4px;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
}

/* 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;
}