.tf-utility-navbar,
.tf-module-navbar {
    display: flex;
    align-items: center;
    gap: var(--tf-space-2);
    width: 100%;
    box-sizing: border-box;
}

.tf-utility-navbar {
    min-height: var(--tf-utility-navbar-height);
    padding: var(--tf-space-1) var(--tf-space-4);
    background: var(--tf-color-gray-900);
    color: var(--tf-text-inverse);
    font-size: var(--tf-font-size-sm);
}

.tf-module-navbar {
    min-height: var(--tf-navbar-height);
    padding: var(--tf-space-2) var(--tf-space-4);
    background: var(--tf-bg-surface);
    border-bottom: var(--tf-border-default);
    box-shadow: var(--tf-shadow-xs);
}

.tf-navbar-item {
    display: inline-flex;
    align-items: center;
    min-height: 100%;
}

.tf-navbar-link {
    display: inline-flex;
    align-items: center;
    gap: var(--tf-space-2);
    min-height: 34px;
    padding: 0 var(--tf-space-3);
    border-radius: var(--tf-radius-md);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--tf-transition-fast), color var(--tf-transition-fast);
}

.tf-navbar-link:hover {
    background: var(--tf-color-primary-soft);
    color: var(--tf-color-primary);
}

.tf-navbar-active,
.tf-navbar-link[aria-current="page"] {
    background: var(--tf-color-primary);
    color: var(--tf-text-inverse);
}

.tf-footer {
    background: var(--tf-bg-surface);
    border-top: var(--tf-border-default);
    color: var(--tf-text-main);
    box-shadow: var(--tf-shadow-xs);
}

.tf-footer-meta {
    color: var(--tf-text-muted);
}

.tf-footer-icon {
    color: var(--tf-color-primary);
}

@media (max-width: 640px) {
    .tf-utility-navbar,
    .tf-module-navbar {
        align-items: stretch;
        flex-direction: column;
    }
}