/*
 * public/assets/css/app.css
 *
 * Custom styles that extend Bootstrap.
 * Bootstrap's classes cover most things; this file handles the gaps.
 */

/* ── Overall page layout ───────────────────────────────────────────────────── */

/*
 * Make the page fill the full viewport height.
 * Even if the content is short, the footer stays at the bottom.
 */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
}

main {
    flex: 1;  /* Main content takes all available vertical space */
}

/* ── Word table — sticky header fix ───────────────────────────────────────── */
/*
 * Bootstrap's sticky-top doesn't account for the card's padding.
 * This makes the table header actually stick when scrolling inside
 * the fixed-height word table wrapper.
 */
#wordTableWrapper thead.sticky-top th {
    background-color: #f8f9fa;
    box-shadow: 0 1px 0 #dee2e6;
}

/* ── Form polish ───────────────────────────────────────────────────────────── */

/* Make disabled nav links look clearly unavailable */
.nav-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Breadcrumb spacing ────────────────────────────────────────────────────── */
.breadcrumb {
    margin-bottom: 0.25rem;
}

/* ── Card tweaks ───────────────────────────────────────────────────────────── */
.card {
    border-radius: 0.5rem;
}

.card-header {
    font-weight: 600;
    font-size: 0.9rem;
    background-color: #f8f9fa;
}

/* ── Responsive table font ─────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .table {
        font-size: 0.85rem;
    }
}

/* ── Word table row fade animation ─────────────────────────────────────────── */
#wordTableBody tr {
    transition: opacity 0.2s ease;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer {
    font-size: 0.8rem;
}