/* Theme Material Web components from MD3 system tokens
 * Icons: https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined
 */

md-icon {
    --md-icon-font: 'Material Symbols Outlined';
    --md-icon-size: 1.25rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

md-filled-button,
md-filled-tonal-button,
md-text-button {
    --md-filled-button-container-shape: var(--md-sys-shape-corner-full);
    --md-filled-tonal-button-container-shape: var(--md-sys-shape-corner-full);
    --md-text-button-container-shape: var(--md-sys-shape-corner-full);
    --md-filled-button-container-color: var(--md-sys-color-primary);
    --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-button-hover-state-layer-color: var(--md-sys-color-on-primary);
    --md-filled-button-pressed-state-layer-color: var(--md-sys-color-on-primary);
    --md-filled-button-label-text-font: var(--md-sys-typescale-font);
    --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size);
    --md-filled-button-label-text-weight: var(--md-sys-typescale-label-large-weight);
    --md-filled-button-container-elevation: 0;
    --md-filled-button-hover-container-elevation: 0;
    --md-filled-button-pressed-container-elevation: 0;
    --md-filled-button-focus-container-elevation: 0;
    --md-filled-tonal-button-container-color: var(--md-sys-color-secondary-container);
    --md-filled-tonal-button-label-text-color: var(--md-sys-color-on-secondary-container);
    --md-filled-tonal-button-label-text-font: var(--md-sys-typescale-font);
    --md-filled-tonal-button-container-elevation: 0;
    --md-filled-tonal-button-hover-container-elevation: 0;
    --md-filled-tonal-button-pressed-container-elevation: 0;
    --md-filled-tonal-button-focus-container-elevation: 0;
    --md-text-button-label-text-color: var(--md-sys-color-primary);
    --md-text-button-label-text-font: var(--md-sys-typescale-font);
}

md-filled-button.md-btn-error {
    --md-filled-button-container-color: var(--md-sys-color-error-container);
    --md-filled-button-label-text-color: var(--md-sys-color-on-error-container);
    --md-filled-button-hover-state-layer-color: var(--md-sys-color-on-error-container);
    --md-filled-button-pressed-state-layer-color: var(--md-sys-color-on-error-container);
}

md-icon-button,
md-filled-icon-button {
    --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
    --md-icon-button-state-layer-height: 2.5rem;
    --md-icon-button-state-layer-width: 2.5rem;
    --md-icon-button-icon-size: 1.25rem;
    --md-filled-icon-button-container-color: var(--md-sys-color-primary);
    --md-filled-icon-button-icon-color: var(--md-sys-color-on-primary);
    --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-full);
}

md-icon-button.close-soundboard {
    --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
}

/* Filled text fields — host must constrain min-content from inner <input> */
md-filled-text-field,
md-outlined-text-field {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    resize: none;
    --md-filled-text-field-container-shape: var(--md-sys-shape-corner-medium);
    --md-filled-text-field-container-color: var(--md-sys-color-surface-container-highest);
    --md-filled-text-field-input-text-color: var(--md-sys-color-on-surface);
    --md-filled-text-field-label-text-color: var(--md-sys-color-on-surface-variant);
    --md-filled-text-field-input-text-font: var(--md-sys-typescale-font);
    --md-filled-text-field-label-text-font: var(--md-sys-typescale-font);
    --md-filled-text-field-active-indicator-color: var(--md-sys-color-on-surface-variant);
    --md-filled-text-field-hover-active-indicator-color: var(--md-sys-color-on-surface);
    --md-filled-text-field-focus-active-indicator-color: var(--md-sys-color-primary);
    /* Hide underline everywhere by default */
    --md-filled-text-field-active-indicator-height: 0;
    --md-filled-text-field-hover-active-indicator-height: 0;
    --md-filled-text-field-focus-active-indicator-height: 0;
    --md-filled-text-field-disabled-active-indicator-height: 0;
    --md-filled-text-field-input-text-placeholder-color: var(--md-sys-color-outline);
    --md-outlined-text-field-container-shape: var(--md-sys-shape-corner-medium);
    --md-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);
    --md-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);
    --md-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);
    --md-outlined-text-field-hover-outline-color: var(--md-sys-color-on-surface-variant);
    --md-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);
    --md-outlined-text-field-input-text-font: var(--md-sys-typescale-font);
    --md-outlined-text-field-label-text-font: var(--md-sys-typescale-font);
}

/* Login username/password: keep underline, square bottom corners */
#loginform md-filled-text-field {
    --md-filled-text-field-active-indicator-height: 1px;
    --md-filled-text-field-hover-active-indicator-height: 1px;
    --md-filled-text-field-focus-active-indicator-height: 2px;
    --md-filled-text-field-disabled-active-indicator-height: 1px;
    --md-filled-text-field-container-shape-start-start: var(--md-sys-shape-corner-medium);
    --md-filled-text-field-container-shape-start-end: var(--md-sys-shape-corner-medium);
    --md-filled-text-field-container-shape-end-end: 0;
    --md-filled-text-field-container-shape-end-start: 0;
}

md-filled-text-field.form-control {
    margin-bottom: 1.25rem;
}

.sidebar-search md-filled-text-field {
    --md-filled-text-field-container-shape: var(--md-sys-shape-corner-full);
    --md-filled-text-field-top-space: 0.35rem;
    --md-filled-text-field-bottom-space: 0.35rem;
    --md-filled-text-field-leading-space: 0.75rem;
    --md-filled-text-field-trailing-space: 0.75rem;
    --md-filled-text-field-input-text-size: var(--md-sys-typescale-body-small-size);
}

#inputform md-filled-text-field.form-reply,
md-filled-text-field.form-reply {
    flex: 1 1 auto;
    width: auto;
    --md-filled-text-field-container-shape: var(--md-sys-shape-corner-full);
    --md-filled-text-field-top-space: 0.55rem;
    --md-filled-text-field-bottom-space: 0.55rem;
    --md-filled-text-field-leading-space: 1rem;
    --md-filled-text-field-trailing-space: 1rem;
    --md-filled-text-field-input-text-size: var(--md-sys-typescale-body-medium-size);
}

#inputform md-filled-icon-button {
    flex-shrink: 0;
    --md-filled-icon-button-container-color: var(--md-sys-color-primary);
    --md-filled-icon-button-icon-color: var(--md-sys-color-on-primary);
    --md-filled-icon-button-hover-icon-color: var(--md-sys-color-on-primary);
    --md-filled-icon-button-pressed-icon-color: var(--md-sys-color-on-primary);
    --md-filled-icon-button-focus-icon-color: var(--md-sys-color-on-primary);
    --md-filled-icon-button-hover-state-layer-color: var(--md-sys-color-on-primary);
    --md-filled-icon-button-pressed-state-layer-color: var(--md-sys-color-on-primary);
    --md-filled-icon-button-focus-state-layer-color: var(--md-sys-color-on-primary);
    --md-filled-icon-button-container-elevation: 0;
    --md-filled-icon-button-hover-container-elevation: 0;
    --md-filled-icon-button-pressed-container-elevation: 0;
    --md-filled-icon-button-focus-container-elevation: 0;
}

.nav-menu md-filled-button {
    --md-filled-button-container-height: 2.5rem;
    --md-filled-button-leading-space: 1rem;
    --md-filled-button-trailing-space: 1rem;
    --md-filled-button-with-leading-icon-leading-space: 0.75rem;
    --md-filled-button-with-leading-icon-trailing-space: 1rem;
}

.nav-menu .present-toggle-slot {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.nav-menu .present-toggle-slot md-filled-button {
    min-width: 6.5rem;
}

.connect md-filled-button {
    width: 100%;
    display: inline-flex;
}

.connection-banner-inner md-text-button {
    --md-text-button-label-text-color: inherit;
    --md-text-button-hover-label-text-color: inherit;
}

md-filled-button.logout-btn {
    --md-filled-button-container-color: var(--md-sys-color-surface-container-highest);
    --md-filled-button-label-text-color: var(--md-sys-color-on-surface-variant);
    --md-filled-button-container-height: 2.25rem;
    --md-filled-button-container-shape: var(--md-sys-shape-corner-medium);
    --md-filled-button-label-text-size: 0.75rem;
    flex-shrink: 0;
    padding-inline: 0.75rem;
}

md-filled-button.logout-btn:hover {
    --md-filled-button-container-color: var(--md-sys-color-error-container);
    --md-filled-button-label-text-color: var(--md-sys-color-on-error-container);
    --md-filled-button-hover-state-layer-color: var(--md-sys-color-on-error-container);
}

#participants-toggle {
    margin-left: auto;
    flex-shrink: 0;
}

/* Left sidebar (participants + chat) — controls sit on canvas-toned surface */
.coln-left md-filled-text-field {
    --md-filled-text-field-container-color: var(--app-sidebar-control-bg-strong);
}

/* Participants search — aligned to toolbar row */
.participants-toolbar .md-search-bar {
    --md-filled-text-field-top-space: 0.55rem;
    --md-filled-text-field-bottom-space: 0.55rem;
    --md-filled-text-field-leading-space: 0.85rem;
    --md-filled-text-field-trailing-space: 0.85rem;
    --md-filled-text-field-input-text-size: var(--md-sys-typescale-body-large-size);
    width: 100%;
    min-width: 0;
}

.participants-toolbar #participants-toggle {
    margin-left: auto;
    --md-icon-button-state-layer-size: 3rem;
    --md-icon-button-icon-size: 1.375rem;
}

.participants-panel.collapsed #participants-toggle md-icon {
    transform: rotate(180deg);
}

#invite-dialog {
    border: none;
    border-radius: var(--md-sys-shape-corner-extra-large);
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    padding: var(--md-sys-spacing-6);
    box-shadow: var(--md-sys-elevation-3);
}

#invite-dialog::backdrop {
    background: color-mix(in srgb, var(--md-sys-color-scrim) 50%, transparent);
}

#invite-dialog form {
    display: flex;
    flex-direction: column;
    gap: var(--md-sys-spacing-3);
}

#invite-dialog .invite-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--md-sys-spacing-2);
    margin-top: var(--md-sys-spacing-2);
}

#invite-dialog input[type="datetime-local"] {
    background: var(--md-sys-color-surface-container-highest);
    border: none;
    border-radius: var(--md-sys-shape-corner-medium);
    color: var(--md-sys-color-on-surface);
    padding: 0.75rem 1rem;
    font: inherit;
}

#groupform md-filled-text-field.form-control-inline {
    flex: 1;
    min-width: 0;
    width: auto;
    margin-bottom: 0;
}

form#passwordform {
    display: flex;
    flex-direction: column;
    gap: var(--md-sys-spacing-3);
    max-width: 28rem;
}

form#passwordform md-filled-text-field {
    width: 100%;
}

/* Switches */
md-switch {
    flex-shrink: 0;
    --md-switch-selected-track-color: var(--md-sys-color-primary);
    --md-switch-selected-handle-color: var(--md-sys-color-on-primary);
    --md-switch-selected-hover-track-color: var(--md-sys-color-primary);
    --md-switch-selected-pressed-track-color: var(--md-sys-color-primary);
    --md-switch-track-color: var(--md-sys-color-surface-container-highest);
    --md-switch-handle-color: var(--md-sys-color-outline);
    --md-switch-hover-handle-color: var(--md-sys-color-on-surface-variant);
}

/* Radios */
md-radio {
    --md-radio-icon-color: var(--md-sys-color-on-surface-variant);
    --md-radio-selected-icon-color: var(--md-sys-color-primary);
    --md-radio-hover-icon-color: var(--md-sys-color-on-surface);
    --md-radio-pressed-icon-color: var(--md-sys-color-on-surface);
}

/* Selects */
md-filled-select,
md-outlined-select {
    width: 100%;
    --md-filled-select-text-field-container-color: var(--md-sys-color-surface-container-highest);
    --md-filled-select-text-field-container-shape: var(--md-sys-shape-corner-medium);
    --md-filled-select-text-field-input-text-color: var(--md-sys-color-on-surface);
    --md-filled-select-text-field-label-text-color: var(--md-sys-color-on-surface-variant);
    --md-filled-select-text-field-input-text-font: var(--md-sys-typescale-font);
    --md-filled-select-text-field-label-text-font: var(--md-sys-typescale-font);
    --md-filled-select-text-field-active-indicator-height: 0;
    --md-filled-select-text-field-hover-active-indicator-height: 0;
    --md-filled-select-text-field-focus-active-indicator-height: 0;
}

md-filled-select::part(menu),
md-outlined-select::part(menu) {
    --md-menu-container-color: var(--md-sys-color-surface-container-high);
    --md-menu-container-shape: var(--md-sys-shape-corner-medium);
    --md-menu-item-label-text-font: var(--md-sys-typescale-font);
    --md-menu-item-supporting-text-font: var(--md-sys-typescale-font);
    --md-menu-item-label-text-size: var(--md-sys-typescale-body-large-size);
    --md-menu-item-label-text-color: var(--md-sys-color-on-surface);
    --md-menu-item-selected-label-text-color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-font);
}

md-select-option,
md-menu-item {
    --md-menu-item-label-text-font: var(--md-sys-typescale-font);
    --md-menu-item-supporting-text-font: var(--md-sys-typescale-font);
    font-family: var(--md-sys-typescale-font);
}

md-select-option [slot="headline"],
md-menu-item [slot="headline"] {
    font-family: var(--md-sys-typescale-font);
}

/* Sliders — Material 3 Expressive tokens (Android Widget.Material3.Slider) */
md-slider {
    width: 100%;
    min-width: 0;
    /* Track */
    --md-slider-active-track-height: 16px;
    --md-slider-inactive-track-height: 16px;
    --md-slider-active-track-shape: 8px;
    --md-slider-inactive-track-shape: 8px;
    --md-slider-active-track-color: var(--md-sys-color-primary);
    --md-slider-inactive-track-color: var(--md-sys-color-secondary-container);
    /* Handle */
    --md-slider-handle-width: 4px;
    --md-slider-handle-height: 44px;
    --md-slider-handle-shape: 9999px;
    --md-slider-handle-color: var(--md-sys-color-primary);
    --md-slider-focus-handle-color: var(--md-sys-color-primary);
    --md-slider-hover-handle-color: var(--md-sys-color-primary);
    --md-slider-pressed-handle-color: var(--md-sys-color-primary);
    --md-slider-handle-elevation: 0;
    --md-slider-handle-shadow-color: transparent;
    --md-slider-state-layer-size: 48px;
    /* Label / ticks */
    --md-slider-label-container-color: var(--md-sys-color-inverse-surface);
    --md-slider-label-text-color: var(--md-sys-color-inverse-on-surface);
    --md-slider-with-tick-marks-container-size: 0px;
    --md-slider-with-overlap-handle-outline-width: 0px;
    --md-slider-hover-state-layer-opacity: 0;
    --md-slider-pressed-state-layer-opacity: 0;
}

md-slider.mic-boost-zone {
    --md-slider-active-track-color: var(--md-sys-color-tertiary);
    --md-slider-handle-color: var(--md-sys-color-tertiary);
    --md-slider-focus-handle-color: var(--md-sys-color-tertiary);
    --md-slider-hover-handle-color: var(--md-sys-color-tertiary);
    --md-slider-pressed-handle-color: var(--md-sys-color-tertiary);
}

.slider-touch-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    touch-action: none;
    cursor: pointer;
    background: transparent;
}

/* Lists */
md-list {
    --md-list-container-color: transparent;
    background: transparent;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

md-list-item.user-row {
    --md-list-item-container-color: transparent;
    --md-list-item-top-space: 0.35rem;
    --md-list-item-bottom-space: 0.35rem;
    --md-list-item-one-line-container-height: 3.25rem;
    --md-list-item-two-line-container-height: 3.75rem;
    --md-list-item-label-text-color: var(--md-sys-color-on-surface);
    --md-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);
    --md-list-item-leading-icon-color: var(--md-sys-color-on-surface-variant);
    --md-list-item-trailing-icon-color: var(--md-sys-color-on-surface-variant);
    --md-list-item-label-text-font: var(--md-sys-typescale-font);
    --md-list-item-supporting-text-font: var(--md-sys-typescale-font);
    width: 100%;
    border-radius: var(--md-sys-shape-corner-large);
}

md-list-item.user-row[data-self="1"] {
    --md-list-item-container-color: color-mix(in srgb, var(--md-sys-color-primary) 10%, var(--app-sidebar-bg));
}

.coln-left md-list-item.user-row:hover {
    --md-list-item-container-color: var(--app-sidebar-control-bg);
}

md-list-item.user-row.hidden-by-search {
    display: none !important;
}

/* M3 Search bar (dedicated Search component is not in Material Web yet) */
md-filled-text-field.md-search-bar {
    --md-filled-text-field-container-shape: var(--md-sys-shape-corner-full);
    --md-filled-text-field-input-text-size: var(--md-sys-typescale-body-large-size);
    --md-filled-text-field-top-space: 0.65rem;
    --md-filled-text-field-bottom-space: 0.65rem;
    --md-filled-text-field-leading-space: 1rem;
    --md-filled-text-field-trailing-space: 1rem;
    --md-filled-text-field-active-indicator-height: 0;
    --md-filled-text-field-hover-active-indicator-height: 0;
    --md-filled-text-field-focus-active-indicator-height: 0;
}

/* Dividers */
md-divider {
    --md-divider-color: var(--md-sys-color-outline-variant);
    --md-divider-thickness: 1px;
    width: 100%;
}