/* TrainTrack brand styles (loaded on the AdminLTE panel and the auth pages). */
:root {
    --tt-navy: #0f2344;
    --tt-navy-2: #16305c;
    --tt-blue: #1a73e8;
    --tt-blue-dark: #0f58c2;
    --tt-sky: #6fb1ff;
}

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

/* ---------- Panel ---------- */
.app-sidebar { background: var(--tt-navy) !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(--tt-sky); }
.app-sidebar .nav-link { color: #c3cee3; 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(--tt-blue) !important; color: #fff !important; }
.app-sidebar .nav-header { color: #7f93b8; font-size: .72rem; letter-spacing: .08em; }
.sidebar-menu { padding: 0 .5rem; }

.btn-primary { --bs-btn-bg: var(--tt-blue); --bs-btn-border-color: var(--tt-blue); --bs-btn-hover-bg: var(--tt-blue-dark); --bs-btn-hover-border-color: var(--tt-blue-dark); --bs-btn-active-bg: var(--tt-blue-dark); }
.card { border: 0; box-shadow: 0 1px 3px rgba(15, 35, 68, .08), 0 1px 2px rgba(15, 35, 68, .04); border-radius: .75rem; }
.card-header { background: transparent; }
.table > thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6c7a93; 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; }

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

.tt-course-card { transition: transform .15s ease, box-shadow .15s ease; }
.tt-course-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 35, 68, .12); }
/* Catalog cards: black = pulled from the central course library, white = added locally. */
.tt-course-card.is-central { background: #0d1626; border: 1px solid #0d1626; color: #e7edf7 !important; }
.tt-course-card.is-central .tt-course-code { color: var(--tt-sky); }
.tt-course-card.is-local { background: #fff; border: 1px solid #dfe6f1; color: #1c2b45 !important; }
.tt-source-tag { margin-left: .4rem; padding: .1rem .45rem; border-radius: 99px; font-size: .68rem; font-weight: 600; background: rgba(127, 147, 184, .18); color: inherit; opacity: .85; }
.tt-source-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; font-size: .875rem; color: var(--bs-secondary-color); }
.tt-source-swatch { display: inline-block; width: 1rem; height: 1rem; margin-right: .2rem; vertical-align: -.15rem; border-radius: .25rem; }
.tt-source-swatch.is-central { background: #0d1626; border: 1px solid #56657f; }
.tt-source-swatch.is-local { background: #fff; border: 1px solid #b8c3d6; }
.tt-course-code { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--tt-blue); }

.tt-exam-timer { position: sticky; top: 1rem; z-index: 10; }
.tt-question + .tt-question { border-top: 1px solid var(--bs-border-color); }
.tt-option { display: block; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .65rem .9rem; cursor: pointer; margin-bottom: .5rem; }
.tt-option:hover { border-color: var(--tt-blue); }
.tt-option:has(input:checked) { border-color: var(--tt-blue); background: rgba(26, 115, 232, .08); }
.tt-option.is-correct { border-color: var(--bs-success); background: rgba(25, 135, 84, .08); }
.tt-option.is-wrong { border-color: var(--bs-danger); background: rgba(220, 53, 69, .08); }

.tt-attendance-table select { min-width: 110px; }

/* ---------- Auth ---------- */
.tt-auth { background: #f4f7fc; min-height: 100vh; }
.tt-auth-shell { display: flex; min-height: 100vh; }
.tt-auth-hero {
    position: relative; flex: 0 0 50%; color: #fff; overflow: hidden;
    background-color: var(--tt-navy); background-size: cover; background-position: center bottom;
}
.tt-auth-hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 25, 52, .92) 0%, rgba(10, 25, 52, .55) 55%, rgba(10, 25, 52, .75) 100%);
}
.tt-auth-hero-inner { position: relative; height: 100%; display: flex; flex-direction: column; padding: 3rem 3.5rem; }
.tt-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: #9fb4d9; }
.tt-auth-pitch { margin-top: auto; max-width: 460px; }
.tt-auth-pitch h2 { font-size: 2.6rem; font-weight: 800; line-height: 1.12; }
.tt-auth-pitch .lead { color: var(--tt-sky); font-weight: 600; margin: 1rem 0 .5rem; }
.tt-auth-pitch p { color: #c8d4ea; }
.tt-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; }
.tt-auth-features span { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto .5rem; border-radius: 50%; border: 1.5px solid rgba(111, 177, 255, .6); color: var(--tt-sky); font-size: 1.25rem; background: rgba(15, 35, 68, .5); }
.tt-auth-footnote { margin: 2.5rem 0 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #9fb4d9; }

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

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

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

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

/* ---------- Help ---------- */
.tt-help-btn { white-space: nowrap; }
.tt-help-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-blue); }
.tt-help-body { line-height: 1.65; }
.tt-help-body h2 { font-size: 1.15rem; font-weight: 700; margin: 1.4rem 0 .6rem; }
.tt-help-body h3 { font-size: 1rem; font-weight: 700; margin: 1.2rem 0 .5rem; }
.tt-help-body ol, .tt-help-body ul { padding-left: 1.3rem; }
.tt-help-body li { margin-bottom: .35rem; }
.tt-help-body blockquote { margin: 1rem 0; padding: .75rem 1rem; border-left: 4px solid var(--tt-blue); background: #eef4fe; border-radius: 0 .5rem .5rem 0; }
.tt-help-body blockquote p:last-child { margin-bottom: 0; }
.tt-help-body code { background: #f1f4f9; padding: .1rem .35rem; border-radius: .25rem; color: var(--tt-navy); }
.tt-help-hero { background: radial-gradient(120% 140% at 100% 0%, #1d4a8f 0%, var(--tt-navy-2) 40%, var(--tt-navy) 80%); color: #fff; }

/* ---------- Resellers ---------- */
.tt-qr { width: 180px; height: 180px; }
.tt-qr svg { width: 100%; height: 100%; }

/* Employee photos */
.tt-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bs-secondary-bg); box-shadow: 0 0 0 2px var(--bs-body-bg); }
.tt-person { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.tt-person > div { min-width: 0; }
.tt-profile-photo { display: block; margin: 0 auto 1rem; box-shadow: 0 0 0 4px var(--bs-body-bg), 0 0 0 5px var(--bs-border-color); }
.tt-photo-field { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }