html {
    font-size: 16.5px;
}

html, body {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--mud-palette-background, #121212);
    color: var(--mud-palette-text-primary, #fff);
}

.tiki-mobile-topbar,
.tiki-mobile-bottomnav {
    display: none;
}

.tiki-bottomnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 6px 0;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-size: 0.7rem;
    border: none;
    background: none;
    cursor: pointer;
    gap: 2px;
}

.tiki-bottomnav-item.active {
    color: var(--mud-palette-primary);
}

@media (max-width: 767.98px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .tiki-sidebar,
    .tiki-appbar {
        display: none !important;
    }

    .tiki-mobile-topbar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        z-index: 1299 !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 8px 0 12px !important;
        background: var(--mud-palette-surface) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
    }

    .tiki-mobile-topbar .tiki-header-search {
        max-width: none;
    }

    .tiki-mobile-bottomnav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        z-index: 1299 !important;
        background: var(--mud-palette-surface) !important;
        box-shadow: 0 -1px 6px rgba(0,0,0,0.15) !important;
        justify-content: space-around !important;
        align-items: center !important;
    }

    .tiki-main {
        margin-left: 0 !important;
        margin-top: 56px !important;
        padding: 12px !important;
        padding-bottom: 72px !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

.tiki-signin {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #121212;
    padding: 24px;
}

.tiki-signin-brand {
    color: #f5a623;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Blazor circuit reconnect. Body text is white for the dark app; the overlay is white. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #111;
    font-family: Roboto, Helvetica, Arial, sans-serif;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-retrying {
    display: flex;
}

#components-reconnect-modal .tiki-reconnect-card {
    background: #fff;
    color: #111;
    padding: 1.5rem 1.75rem;
    border-radius: 10px;
    max-width: 22rem;
    text-align: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

#components-reconnect-modal .tiki-reconnect-card,
#components-reconnect-modal .tiki-reconnect-card p,
#components-reconnect-modal .tiki-reconnect-card span {
    color: #111;
}

#components-reconnect-modal .tiki-reconnect-card a {
    color: #1565c0;
}

.tiki-composer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.tiki-composer-body,
.tiki-composer .mud-input-control {
    width: 100%;
}

.tiki-composer textarea {
    display: block;
    width: 100%;
}