/**
 * TRBottomNav & TRNavItem Component Styles
 *
 * Bottom navigation bar with grid-based three-column layout.
 * Navigation content constrained by global grid margins.
 * Active indicator line positioned structurally ABOVE icons.
 */

/* ─── Full-Bleed Footer Background ─── */
.tr-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--tr-nav-total-height);
    background: var(--tr-safe-top-bg);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(198, 241, 53, 0.1);
    z-index: var(--tr-z-modal);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--tr-nav-content-offset-y);
}

/* ─── Active Indicator Track (Grid-Constrained) ─── */
.tr-bottom-nav-indicator-track {
    flex-shrink: 0;
    position: relative;
    height: var(--tr-nav-indicator-height);
    margin: 0 var(--tr-grid-margin);
    z-index: 1;
}

/* ─── Active Indicator Line ─── */
.tr-bottom-nav-indicator {
    position: absolute;
    height: 100%;
    background: var(--tr-color-green);
    width: calc(100% / 3);
    left: 0;
    transition: transform var(--tr-transition-normal);
    transform-origin: left center;
}

/* ─── Navigation Items Grid Container ─── */
.tr-bottom-nav-items {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: calc(100% - (2 * var(--tr-grid-margin)));
    margin: var(--tr-nav-indicator-icon-gap) var(--tr-grid-margin) 0;
    z-index: 2;
}

/* ─── Navigation Item ─── */
.tr-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--tr-nav-icon-label-gap);
    background: none;
    border: none;
    color: var(--tr-color-text-dim);
    font-family: var(--tr-font-franklin-demi);
    font-size: var(--tr-header-button-font-size);
    font-weight: 700;
    letter-spacing: var(--tr-header-button-tracking);
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    transition: color var(--tr-transition-fast);
}

/* Icon Container */
.tr-nav-item-icon {
    width: var(--tr-nav-icon-size);
    height: var(--tr-nav-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tr-nav-item-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.tr-nav-item-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Label */
.tr-nav-item-label {
    display: block;
    white-space: nowrap;
}

/* ─── Active State ─── */
.tr-nav-item--active {
    color: var(--tr-color-green);
}