@font-face {
    font-family: 'Chevalier';
    src: url('../fonts/chevalier_becker_stripes_caps.ttf') format('truetype');
}

/* shrink text on app bar title when in xs breakpoint */
@media (max-width: 599.9px) {
    .appbar-title {
        font-size: 1.25rem;
    }
}

h1 { margin-bottom: 1em;}

.compact-tree .mud-treeview-item-label {
    font-size: 0.85rem;
}

.compact-tree .mud-icon-root {
    font-size: 1rem;
}

.compact-tree .mud-treeview-item-arrow {
    min-height: unset;
    width: 0.5rem;
}

/*DRAWER STYLES*/
.drawer-resize-handle {
    position: fixed;
    left: 240px; /* Will be updated dynamically via inline style */
    top: 64px; /* AppBar height */
    bottom: 0;
    width: 5px;
    cursor: ew-resize;
    background: transparent;
    z-index: 1001;
    pointer-events: auto;
}

    .drawer-resize-handle:hover {
        background: rgba(126, 111, 255, 0.3);
    }

/* MUD TABLE STYLES */

.mud-table-cell {
    border-bottom-width: 0px; /*removes default border separating rows */
}

/* SELECTED ROW STYLES - Adaptive to Light/Dark Mode */

.selected-row {
    background: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-primary) 15%, transparent) 0%, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) 100%) !important;
    transition: all 0.2s ease;
}

    .selected-row .mud-table-cell {
        color: var(--mud-palette-text-primary) !important;
        border-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent) !important;
    }

    .selected-row:hover {
        background: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-primary) 22%, transparent) 0%, color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) 100%) !important;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    }

/* GROUPED TABLE STYLES */

.grouped-table .mud-table-row .mud-table-cell:first-child {
    width: 30px !important;
    max-width: 30px !important;
    padding-inline-end: 6px !important;
}

/* Active state for MudNavLink without Href (no anchor tag) */
.mud-nav-item.nav-active {
    color: var(--mud-palette-primary);
}

/* form-field is a class put on custom form components; this overrides MudBlazor's setting of the placeholder to 1em [This is currently commented out because the Shrunken label is relative to the main label size. So shrinking the main label from 1em to .875 causes the shrunken label to get too small.]*/
/*.form-field .mud-input-control-input-container > .mud-input-label-inputcontrol
{
    font-size: 0.875rem;*/ /* MudBlazor's body1 size specified in MainLayout */
/*}*/

/* Apply body2 typography to all read-only MudTextField inputs 
input.mud-input-root[readonly] {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.43;
    letter-spacing: .01071em;
}
    */

/* ─── RECONNECT MODAL ─────────────────────────────────────────── */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.65);
    align-items: center;
    justify-content: center;
}

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

.reconnect-box {
    background: var(--mud-palette-surface, #1e1e2d);
    color: var(--mud-palette-text-primary, #b2b0bf);
    border-radius: 8px;
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    min-width: 260px;
}

.reconnect-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(126, 111, 255, 0.2);
    border-top-color: #7e6fff;
    border-radius: 50%;
    animation: reconnect-spin 0.9s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes reconnect-spin {
    to { transform: rotate(360deg); }
}

/* Hide failure elements during reconnect attempt */
.reconnect-failed-msg,
.reconnect-reload-btn {
    display: none;
}

/* Show failure elements only when reconnect has given up */
#components-reconnect-modal.components-reconnect-failed .reconnect-failed-msg,
#components-reconnect-modal.components-reconnect-rejected .reconnect-failed-msg,
#components-reconnect-modal.components-reconnect-failed .reconnect-reload-btn,
#components-reconnect-modal.components-reconnect-rejected .reconnect-reload-btn {
    display: block;
}

/* Hide spinner/progress message when reconnect has given up */
#components-reconnect-modal.components-reconnect-failed .reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .reconnect-spinner,
#components-reconnect-modal.components-reconnect-failed .reconnect-msg,
#components-reconnect-modal.components-reconnect-rejected .reconnect-msg {
    display: none;
}

.reconnect-reload-btn {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    background: #7e6fff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
}

    .reconnect-reload-btn:hover {
        background: #6a5ddb;
    }
/* ─────────────────────────────────────────────────────────────── */