/* ensure the app layout fills the viewport and places footer at bottom */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    /* let main content take the remaining space and scroll if needed */
    .app-shell .main-content {
        flex: 1 1 auto;
        overflow: auto;
    }

    /* footer stays after the main content (no absolute positioning) */
    .app-shell .footer {
        flex-shrink: 0;
    }

/* Sticky column visual styling */
.sticky-left-cell,
.sticky-left-header {
    background-color: #F4F6F8; /* pale blue-gray; change if you prefer */
}

/* Make sure sticky column overlaps correctly and shows a subtle divider */
.sticky-left-header {
    position: sticky;
    left: 0;
    z-index: 4; /* header above cells */
    box-shadow: 2px 0 4px rgba(0,0,0,0.06);
}

.sticky-left-cell {
    position: sticky;
    left: 0;
    z-index: 3; /* below header but above other cells */
    border-right: 1px solid rgba(0,0,0,0.08);
    box-shadow: 2px 0 4px rgba(0,0,0,0.04);
}

/* Optional hover state */
.sticky-left-cell:hover {
    background-color: #E9EEF3;
}

/* Hanging indent: absolute number + padded container (fixed) */
.hanging {
    /* set a CSS variable for the number gutter width so it's easy to tune */
    --num-width: 1.6rem;
    position: relative;
    margin-left: -0.2rem;
    /* reserve space for the number + small gap */
    padding-left: calc(var(--num-width) + 0.25rem);
    white-space: normal;
/*    word-break: break-word;*/
}

/* number lives in the gutter and is vertically centered */
.hanging-number {
    position: absolute;
    left: 0;
    /*top: 50%;
    transform: translateY(-50%);*/
    width: var(--num-width);
    text-align: right;
    padding-right: 0.25rem;
    font-weight: 600;
    pointer-events: none; /* number won't steal clicks */
    color: inherit;
    /*line-height: 1;*/
}

/* the name flows in the padded area and wraps under the first line */
.hanging-text {
    /*position: absolute;*/
    display: inline-block;
    margin-right: calc(var(--num-width) + 0.25rem);
}

/* Right-align cell content for MudDataGrid cells */
.cell-right {
    text-align: right; /* aligns inline text/numbers */
}

/* Optional: align header text the same way */
.header-right {
    text-align: right;
}

/* Optional: for cells that contain inline elements (icons + text), use flex to align end */
.cell-right-flex {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}