/* Use only MudBlazor palette variables (--mud-palette-*) for colors so theme and accent switch without a reload. */

/* 1. Base */
:root {
    color-scheme: var(--mud-native-html-color-scheme, normal);
    --dbot-radius: 8px;
    --dbot-radius-lg: 12px;
    --dbot-radius-xl: 16px;
    --dbot-ease: cubic-bezier(0.2, 0, 0, 1);
    --dbot-duration: 150ms;
    --dbot-page-max-width: 1440px;
    --dbot-nav-active-alpha: 0.12; /* = DashboardTheme.NavActiveTintAlpha */
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-color: rgba(var(--mud-palette-text-primary-rgb), 0.28) transparent;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

/* h1 receives programmatic focus after navigation; a focus ring there is just noise. */
h1:focus {
    outline: none;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
.mud-button-root:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 2. Layout */
.mud-appbar.dbot-appbar {
    background-color: transparent;
    color: var(--mud-palette-appbar-text);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Frosted glass on a pseudo-element: backdrop-filter on the app bar itself would make it the containing block for
   position: fixed descendants, shrinking menu overlays to the bar's height. */
.mud-appbar.dbot-appbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--mud-palette-appbar-background);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
}

.dbot-appbar-toolbar {
    gap: 4px;
}

/* Narrower gutters keep the logout button on screen; Edge.Start's -12px margin would clip the menu button's
   highlight and focus ring at an 8px gutter. */
@media (max-width: 599.98px) {
    .mud-toolbar.dbot-appbar-toolbar.mud-toolbar-gutters {
        padding-inline: 8px;
    }

    .dbot-appbar-toolbar .mud-icon-button.mud-icon-button-edge-start {
        margin-inline-start: 0;
    }
}

/* Only the guild switcher may shrink in the app bar; brand and user block keep their size. */
.dbot-brand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    margin-inline-end: 4px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.dbot-brand-mark {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.dbot-brand-mark .mud-icon-root {
    font-size: 20px;
}

.mud-drawer.dbot-drawer {
    border-inline-end: 1px solid var(--mud-palette-lines-default);
}

.mud-drawer.dbot-drawer .mud-drawer-content {
    padding: 12px;
}

/* MudBlazor uses flex-start, which leaves the smaller 20px icon misaligned with the label. */
.mud-navmenu.dbot-navmenu .mud-nav-link {
    align-items: center;
    margin: 2px 0;
    padding: 8px 12px;
    border-radius: var(--dbot-radius);
    font-weight: 500;
    color: var(--mud-palette-drawer-text);
    transition: background-color var(--dbot-duration) var(--dbot-ease), color var(--dbot-duration) var(--dbot-ease);
}

.mud-navmenu.dbot-navmenu .mud-nav-link .mud-nav-link-icon {
    font-size: 1.25rem;
    color: var(--mud-palette-drawer-icon);
}

.mud-navmenu.dbot-navmenu .mud-nav-link:focus-visible {
    outline-offset: -2px;
}

.mud-navmenu.dbot-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.dbot-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover,
.mud-navmenu.dbot-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible {
    color: var(--mud-palette-primary-darken) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), var(--dbot-nav-active-alpha)) !important;
    font-weight: 600;
}

.mud-navmenu.dbot-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-primary-darken) !important;
}

.dbot-page {
    max-width: var(--dbot-page-max-width);
    margin-inline: auto;
    padding: 28px 32px 48px;
}

@media (max-width: 959.98px) {
    .dbot-page {
        padding: 20px 20px 40px;
    }
}

/* No env(safe-area-inset-bottom): it is always 0 without viewport-fit=cover, and cover would require side insets
   for the notch in landscape too. */
@media (max-width: 599.98px) {
    .dbot-page {
        padding: 16px 16px 32px;
    }
}

/* A long h1 (a command trigger can be 100 chars) must wrap rather than widen the page. */
.dbot-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 16px;
}

.dbot-page-header > h1 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dbot-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-inline-start: auto;
}

.mud-typography.dbot-page-caption {
    flex-basis: 100%;
    margin-top: -4px;
}

/* Negative margin aligns the text button's label with the content edge. */
.mud-button-root.dbot-page-back {
    margin-inline-start: -8px;
    margin-bottom: 4px;
}

/* 3. User menu and guild switcher */
.dbot-user {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.dbot-user-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.dbot-logout-form {
    display: flex;
    margin: 0;
}

/* The guild icon is a decorative overlay on the left padding of MudMenu's built-in button. */
.dbot-guild-switcher-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.dbot-guild-switcher-avatar {
    position: absolute;
    inset-inline-start: 8px;
    top: 50%;
    z-index: 1;
    display: flex;
    transform: translateY(-50%);
    pointer-events: none;
}

.mud-menu.dbot-guild-switcher {
    min-width: 0;
    max-width: 100%;
}

.dbot-guild-switcher .mud-button-root.mud-menu-button-activator {
    position: relative;
    min-width: 0;
    max-width: 100%;
    padding: 4px 28px 4px 8px;
    border-radius: var(--dbot-radius);
    font-weight: 600;
}

.dbot-guild-switcher-has-avatar .dbot-guild-switcher .mud-button-root.mud-menu-button-activator {
    padding-inline-start: 40px;
}

/* MudMenu's Label is a bare text node, so the ellipsis goes on the label block. The expand icon is absolutely
   positioned into the button's right padding so it stays on the same line for any name length. */
.dbot-guild-switcher .mud-menu-button-activator .mud-button-label {
    display: block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dbot-guild-switcher .mud-menu-button-activator .mud-button-icon-end {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    display: inline-flex;
    margin: 0;
    transform: translateY(-50%);
}

@media (max-width: 599.98px) {
    .dbot-guild-switcher .mud-menu-button-activator .mud-button-label {
        max-width: 30vw;
    }
}

@media (pointer: coarse) {
    .dbot-guild-switcher .mud-button-root.mud-menu-button-activator {
        min-height: 40px;
    }
}

/* Anchored to the button's left edge, the menu overflowed the right edge on phones. MudPopover sets left and
   max-width inline, hence !important. */
@media (max-width: 599.98px) {
    .mud-popover.dbot-guild-switcher-popover {
        left: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }
}

.dbot-guild-switcher-error {
    display: inline-flex;
    border-radius: var(--dbot-radius);
}

.dbot-guild-switcher-error:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.dbot-guild-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

/* 150px reserves room for the icon, check mark and paddings so the menu fits a 360px screen. */
.dbot-guild-option-name {
    max-width: min(280px, calc(100vw - 150px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dbot-guild-option-current.mud-icon-root {
    margin-inline-start: auto;
    color: var(--mud-palette-primary);
}

/* 4. Surfaces and MudBlazor components */
.mud-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dbot-radius-lg);
}

.mud-card > .mud-card-content.mud-card-content-padding {
    padding: 20px;
}

.mud-card > .mud-card-actions.mud-card-actions-padding {
    padding: 8px 20px 16px;
    gap: 8px;
}

@media (max-width: 599.98px) {
    .mud-card > .mud-card-content.mud-card-content-padding {
        padding: 16px;
    }

    .mud-card > .mud-card-actions.mud-card-actions-padding {
        padding: 8px 16px 16px;
    }
}

.mud-table.mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dbot-radius-lg);
    box-shadow: none;
    overflow: hidden;
}

/* At 600px and below MudTable renders rows as "label — value" cards; keep a long value from squeezing the label. */
@media (max-width: 600px) {
    .mud-xs-table .mud-table-cell::before {
        flex-shrink: 0;
    }
}

.mud-table-root .mud-table-head .mud-table-cell,
.mud-simple-table table thead th {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background-color: rgba(var(--mud-palette-text-primary-rgb), 0.03);
}

.mud-popover.mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
}

.mud-dialog {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dbot-radius-xl);
}

.mud-snackbar,
.mud-alert {
    border-radius: var(--dbot-radius-lg);
}

.mud-alert-text-info {
    border: 1px solid rgba(var(--mud-palette-info-rgb), 0.28);
}

.mud-alert-text-success {
    border: 1px solid rgba(var(--mud-palette-success-rgb), 0.28);
}

.mud-alert-text-warning {
    border: 1px solid rgba(var(--mud-palette-warning-rgb), 0.28);
}

.mud-alert-text-error {
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.28);
}

/* Long unbroken error text (URLs, JSON) must wrap inside the alert. */
.mud-alert-message {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dbot-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    margin: 4px 0 -4px -8px;
}

.mud-expansion-panels {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dbot-radius-lg);
    box-shadow: none;
}

.mud-chip {
    font-weight: 500;
}

/* Checked MudCheckBox/MudRadio with Color.Default take the accent color. Explicit colors (Color.Success etc.)
   do not get mud-default-text and are unaffected. */
.mud-checkbox > .mud-icon-button.mud-default-text.mud-checkbox-true,
.mud-checkbox > .mud-icon-button.mud-default-text.mud-checkbox-null,
.mud-radio > .mud-icon-button.mud-default-text.mud-checked {
    color: var(--mud-palette-primary);
}

@media (hover: hover) and (pointer: fine) {
    .mud-checkbox > .mud-icon-button.mud-default-text.mud-checkbox-true:hover,
    .mud-checkbox > .mud-icon-button.mud-default-text.mud-checkbox-null:hover,
    .mud-radio > .mud-icon-button.mud-default-text.mud-checked:hover {
        background-color: var(--mud-palette-primary-hover);
    }
}

.mud-skeleton {
    border-radius: var(--dbot-radius);
}

.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:focus-visible,
.mud-button-filled:active {
    box-shadow: none;
}

.mud-typography-caption {
    color: var(--mud-palette-text-secondary);
}

.mud-tabs-tabbar {
    background-color: transparent;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* MudBlazor uppercases tabs in its .mud-tab rule, bypassing the theme typography. */
.mud-tabs .mud-tab {
    text-transform: none;
    letter-spacing: normal;
}

/* 5. Calendar (Heron.MudCalendar) */
/* The 1px border is part of Calendar.MonthHeaderHeight: changing it requires recalculating the month row height there. */
.mud-calendar {
    --mud-cal-cell-hover: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-text-primary));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dbot-radius-lg);
}

@media (hover: hover) {
    .mud-calendar .mud-cal-month-link:hover,
    .mud-calendar .mud-cal-week-link:hover {
        background-color: var(--mud-palette-action-default-hover);
    }
}

.mud-calendar .cell-selected {
    background-color: var(--mud-palette-action-default-hover);
}

/* 6. Public and status pages */
.dbot-public {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px;
    background-color: var(--mud-palette-background);
    background-image: radial-gradient(60rem 30rem at 50% -10%, rgba(var(--mud-palette-primary-rgb), 0.16), transparent 70%);
}

.dbot-public-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 32px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dbot-radius-xl);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--mud-elevation-8);
}

/* grid, not inline-grid: an inline box adds descender space below the logo. */
.dbot-brand-mark.dbot-public-mark {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 14px;
}

.dbot-brand-mark.dbot-public-mark .mud-icon-root {
    font-size: 28px;
}

@media (max-width: 599.98px) {
    .dbot-public-card {
        padding: 24px 20px;
    }
}

.dbot-status-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 480px;
    margin: 48px auto;
    text-align: center;
}

.dbot-status-icon.mud-icon-root {
    margin-bottom: 16px;
    font-size: 48px;
}

.dbot-status-text {
    color: var(--mud-palette-text-secondary);
}

/* 7. Guild list */
.mud-card.dbot-guild-card {
    height: 100%;
    transition: border-color var(--dbot-duration) var(--dbot-ease), box-shadow var(--dbot-duration) var(--dbot-ease);
}

.mud-card.dbot-guild-card:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.45);
    box-shadow: var(--mud-elevation-4);
}

.dbot-guild-card-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.mud-skeleton.dbot-guild-card-skeleton {
    border-radius: var(--dbot-radius-lg);
}

/* 8. Appearance menu */
.dbot-appearance {
    position: relative;
    display: inline-flex;
}

.dbot-appearance-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 300px;
    max-width: calc(100vw - 24px);
    padding: 16px;
}

.dbot-appearance-heading {
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dbot-mode-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background-color: rgba(var(--mud-palette-text-primary-rgb), 0.06);
}

.dbot-mode-option {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    padding: 6px 4px;
    border: 0;
    border-radius: var(--dbot-radius);
    background-color: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dbot-duration) var(--dbot-ease), color var(--dbot-duration) var(--dbot-ease);
}

.dbot-mode-option .mud-icon-root {
    font-size: 20px;
}

@media (hover: hover) {
    .dbot-mode-option:hover {
        color: var(--mud-palette-text-primary);
        background-color: rgba(var(--mud-palette-text-primary-rgb), 0.06);
    }
}

.dbot-mode-option[aria-pressed="true"],
.dbot-mode-option[aria-pressed="true"]:hover {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.dbot-accent-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: center;
    gap: 12px;
}

.dbot-accent-swatch {
    appearance: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--dbot-swatch-light);
    color: var(--dbot-swatch-contrast-light);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: box-shadow var(--dbot-duration) var(--dbot-ease);
}

.dbot-accent-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px var(--dbot-swatch-light);
}

/* light-dark() follows the root color-scheme set from --mud-native-html-color-scheme, including in System mode. */
@supports (color: light-dark(white, black)) {
    .dbot-accent-swatch {
        background-color: light-dark(var(--dbot-swatch-light), var(--dbot-swatch-dark));
        color: light-dark(var(--dbot-swatch-contrast-light), var(--dbot-swatch-contrast-dark));
    }

    .dbot-accent-swatch[aria-pressed="true"] {
        box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px light-dark(var(--dbot-swatch-light), var(--dbot-swatch-dark));
    }
}

.dbot-accent-swatch .mud-icon-root {
    font-size: 20px;
}

.dbot-accent-swatch:focus-visible {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: 4px;
}

.dbot-appearance-note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

@media (forced-colors: active) {
    .dbot-accent-swatch {
        forced-color-adjust: none;
    }

    .dbot-mode-option[aria-pressed="true"],
    .dbot-accent-swatch[aria-pressed="true"] {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

/* Language switcher */
.dbot-language {
    position: relative;
    display: inline-flex;
}

summary.dbot-language-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border-radius: var(--dbot-radius);
    color: inherit;
    list-style: none;
    cursor: pointer;
    transition: background-color var(--dbot-duration) var(--dbot-ease);
}

summary.dbot-language-trigger::-webkit-details-marker {
    display: none;
}

summary.dbot-language-trigger:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.dbot-language-code {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.dbot-language-panel {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-end: 0;
    z-index: 10;
    min-width: 200px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dbot-radius-lg);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--mud-elevation-8);
}

.dbot-language-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dbot-language-option {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--dbot-radius);
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.dbot-language-option:hover:not(:disabled) {
    background-color: var(--mud-palette-action-default-hover);
}

.dbot-language-option:disabled {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    cursor: default;
}

.dbot-language-note {
    margin: 8px 0 0;
    padding: 0 4px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.dbot-public-language {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
}

@media (max-width: 599.98px) {
    .dbot-language-appbar .dbot-language-code {
        display: none;
    }
}

/* 9. Blazor validation and error UI */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    /* Right padding reserves room for the absolutely positioned dismiss button. */
    padding: 0.75rem 2.75rem 0.75rem 1rem;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    box-shadow: var(--mud-elevation-8);
}

#blazor-error-ui .reload {
    color: var(--mud-palette-error-text);
    margin-inline-start: 0.5rem;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    border: none;
    background: none;
    color: var(--mud-palette-error-text);
    font-size: 1rem;
    cursor: pointer;
}