/* TrainFlow brand styles (loaded on the AdminLTE panel and the auth pages). */
:root {
    --tf-ink: #0b2e33;
    --tf-ink-2: #114049;
    --tf-teal: #0e9f8e;
    --tf-teal-dark: #0b7f72;
    --tf-mint: #5eead4;
    --tf-amber: #f5a524;
}

body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ---------- Panel ---------- */
.app-sidebar { background: var(--tf-ink) !important; }
.app-sidebar .brand-link { border-bottom-color: rgba(255, 255, 255, .08) !important; }
.app-sidebar .brand-text { color: #fff; }
.app-sidebar .brand-text b { color: var(--tf-mint); }
.app-sidebar .nav-link { color: #c3dcd8; border-radius: .5rem; }
.app-sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.app-sidebar .nav-link.active,
.app-sidebar .nav-item.menu-open > .nav-link.active { background: var(--tf-teal) !important; color: #fff !important; }
.app-sidebar .nav-header { color: #7fa9a3; font-size: .72rem; letter-spacing: .08em; }
.sidebar-menu { padding: 0 .5rem; }

.btn-primary { --bs-btn-active-border-color: var(--tf-teal-dark); --bs-btn-disabled-bg: var(--tf-teal); --bs-btn-disabled-border-color: var(--tf-teal); --bs-btn-bg: var(--tf-teal); --bs-btn-border-color: var(--tf-teal); --bs-btn-hover-bg: var(--tf-teal-dark); --bs-btn-hover-border-color: var(--tf-teal-dark); --bs-btn-active-bg: var(--tf-teal-dark); }
.card { border: 0; box-shadow: 0 1px 3px rgba(11, 46, 51, .08), 0 1px 2px rgba(11, 46, 51, .04); border-radius: .75rem; }
.card-header { background: transparent; }
.table > thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #5f7a78; font-weight: 600; }
.table td, .table th { vertical-align: middle; }

/* Action columns must keep their buttons on one line. */
.table .actions, .table th.actions, .table td.actions { white-space: nowrap; width: 1%; text-align: right; }

.tf-stat { display: flex; align-items: center; gap: 1rem; }
.tf-stat-icon { width: 52px; height: 52px; border-radius: .75rem; display: grid; place-items: center; font-size: 1.5rem; flex-shrink: 0; }
.tf-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.tf-stat-label { color: #5f7a78; font-size: .85rem; }

/* ---------- Auth ---------- */
.tf-auth { background: #f3f8f7; min-height: 100vh; }
.tf-auth-shell { display: flex; min-height: 100vh; }
.tf-auth-hero {
    position: relative; flex: 0 0 50%; color: #fff; overflow: hidden;
    background-color: var(--tf-ink); background-size: cover; background-position: center bottom;
}
.tf-auth-hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8, 34, 38, .92) 0%, rgba(8, 34, 38, .55) 55%, rgba(8, 34, 38, .75) 100%);
}
.tf-auth-hero-inner { position: relative; height: 100%; display: flex; flex-direction: column; padding: 3rem 3.5rem; }
.tf-auth-tagline { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 2rem 0 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #9cc9c3; }
.tf-auth-pitch { margin-top: auto; max-width: 460px; }
.tf-auth-pitch h2 { font-size: 2.6rem; font-weight: 800; line-height: 1.12; }
.tf-auth-pitch .lead { color: var(--tf-mint); font-weight: 600; margin: 1rem 0 .5rem; }
.tf-auth-pitch p { color: #c6e2de; }
.tf-auth-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; font-size: .8rem; font-weight: 600; text-align: center; }
.tf-auth-features span { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto .5rem; border-radius: 50%; border: 1.5px solid rgba(94, 234, 212, .6); color: var(--tf-mint); font-size: 1.25rem; background: rgba(11, 46, 51, .5); }
.tf-auth-footnote { margin: 2.5rem 0 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #9cc9c3; }

.tf-auth-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.tf-auth-form { width: 100%; max-width: 420px; background: #fff; border-radius: 1rem; padding: 2.5rem 2.25rem; box-shadow: 0 10px 40px rgba(11, 46, 51, .08); }
.tf-auth-title { font-size: 2rem; font-weight: 800; color: var(--tf-ink); margin-bottom: .25rem; }
.tf-auth-title small { display: block; font-size: 1rem; font-weight: 500; color: #5f7a78; }
.tf-auth-title span { color: var(--tf-teal); }
.tf-auth-subtitle { color: #5f7a78; margin-bottom: 1.75rem; }
.tf-quick-login { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed #cfe3df; }
.tf-quick-login-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #86a09d; margin-bottom: .6rem; }
.tf-quick-login .btn small { font-size: .75rem; }
.tf-auth-legal { margin-top: 1.5rem; font-size: .8rem; color: #86a09d; }

.tf-input { position: relative; }
.tf-input > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #86a09d; }
.tf-input .form-control { padding: .7rem 2.75rem .7rem 2.5rem; border-radius: .6rem; }
.tf-input-action { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #86a09d; padding: .25rem .5rem; }
.tf-btn { padding: .75rem; border-radius: .6rem; font-weight: 600; }
.tf-link { color: var(--tf-teal); text-decoration: none; font-weight: 500; }
.tf-link:hover { text-decoration: underline; }

.tf-brand { display: flex; align-items: center; gap: .75rem; }
.tf-brand-mark { width: 44px; height: 33px; }
.tf-brand-lg .tf-brand-mark { width: 60px; height: 45px; }
.tf-brand-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.tf-brand-lg .tf-brand-name { font-size: 2rem; }
.tf-brand-name span { color: var(--tf-mint); }
.tf-brand-sub { font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: #9cc9c3; }

@media (max-width: 991.98px) {
    .tf-auth-shell { flex-direction: column; }
    .tf-auth-hero { flex-basis: auto; }
    .tf-auth-hero-inner { padding: 2rem 1.5rem; }
    .tf-auth-pitch { margin-top: 2rem; }
    .tf-auth-pitch h2 { font-size: 1.9rem; }
    .tf-auth-features { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- TrainFlow ---------- */
a { color: var(--tf-teal-dark); }
.text-bg-primary, .bg-primary { background-color: var(--tf-teal) !important; }
.bg-primary-subtle { background-color: rgba(14, 159, 142, .12) !important; }
.text-primary { color: var(--tf-teal-dark) !important; }
.btn-outline-primary { --bs-btn-color: var(--tf-teal-dark); --bs-btn-border-color: var(--tf-teal); --bs-btn-hover-bg: var(--tf-teal); --bs-btn-hover-border-color: var(--tf-teal); --bs-btn-active-bg: var(--tf-teal-dark); --bs-btn-active-border-color: var(--tf-teal-dark); }
.form-control:focus, .form-select:focus { border-color: var(--tf-teal); box-shadow: 0 0 0 .2rem rgba(14, 159, 142, .2); }
.form-check-input:checked { background-color: var(--tf-teal); border-color: var(--tf-teal); }
.page-link { color: var(--tf-teal-dark); }
.active > .page-link, .page-link.active { background-color: var(--tf-teal); border-color: var(--tf-teal); }
.app-header { border-bottom: 3px solid var(--tf-amber); }

.tf-code { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--tf-teal-dark); background: rgba(14, 159, 142, .1); border-radius: .3rem; padding: .05rem .4rem; }
.tf-cover { max-height: 280px; object-fit: cover; }
.tf-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--bs-border-color); }
.tf-facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; }
.tf-facts dt { font-weight: 600; color: #5f7a78; font-size: .85rem; }
.tf-facts dd { margin: 0; overflow-wrap: anywhere; }
.tf-pre { background: var(--tf-ink); color: #d9f5f0; padding: 1rem; border-radius: .6rem; font-size: .8rem; max-height: 480px; overflow: auto; white-space: pre; }
.tf-pre code { color: inherit; }
.tf-session-row { background: #f7fbfa; box-shadow: none; border: 1px solid #dcebe8; }
.tf-auth-form.tf-auth-form-wide { max-width: 640px; }
.tf-brand-name span { color: var(--tf-mint); }
.tf-auth-pitch .lead { color: var(--tf-amber); }

/* ---------- Phones ---------- */
/*
 * Below 768px, data tables become stacked cards: one card per row, each cell
 * on its own line with its column name (data-label, set by layouts/app) on the left.
 */
@media (max-width: 767.98px) {
    .table.tf-stack > thead { display: none; }
    .table.tf-stack, .table.tf-stack > tbody { display: block; width: 100%; }
    .table.tf-stack > tbody > tr { display: block; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
    .table.tf-stack > tbody > tr:last-child { border-bottom: 0; }
    .table.tf-stack > tbody > tr > * {
        display: block; position: relative; width: auto !important; min-width: 0 !important;
        padding: .2rem 0 .2rem 38%; border: 0; text-align: left !important; white-space: normal;
        box-shadow: none; overflow-wrap: anywhere;
    }
    .table.tf-stack > tbody > tr > *::before {
        content: attr(data-label); position: absolute; left: 0; top: .2rem; width: 35%;
        font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #5f7a78;
        line-height: 1.6; overflow-wrap: normal;
    }
    /* Unlabelled cells (first column, actions, empty-state rows) use the full width. */
    .table.tf-stack > tbody > tr > :first-child,
    .table.tf-stack > tbody > tr > [data-label=""],
    .table.tf-stack > tbody > tr > .tf-stack-full { padding-left: 0; }
    .table.tf-stack > tbody > tr > :first-child::before,
    .table.tf-stack > tbody > tr > [data-label=""]::before,
    .table.tf-stack > tbody > tr > .tf-stack-full::before { content: none; }
    .table.tf-stack > tbody > tr > :first-child { padding-bottom: .4rem; }
    .table.tf-stack > tbody > tr > .tf-stack-full { text-align: center !important; }
    .table.tf-stack > tbody > tr > .actions { white-space: nowrap; padding-top: .5rem; }
    .table.tf-stack select { min-width: 0; max-width: 100%; }
    /* Label / value tables (e.g. Settings > Email status) stack the label above the value. */
    .tf-kv-table > tbody > tr > th, .tf-kv-table > tbody > tr > td { display: block; width: auto !important; border: 0; padding-left: 1rem; padding-right: 1rem; }
    .tf-kv-table > tbody > tr > th { padding-bottom: 0; }
    .tf-kv-table > tbody > tr { display: block; border-bottom: 1px solid var(--bs-border-color); padding: .4rem 0; }
    .tf-kv-table > tbody > tr:last-child { border-bottom: 0; }

    .app-content-header h1 { font-size: 1.35rem; }
}