/* =========================================================================
   TCET CO-PO-PSO System — global UI theme
   Modern design system shared by every page (dashboards + internal pages).
   ========================================================================= */

:root {
    --tc-bg: #f4f6fb;
    --tc-surface: #ffffff;
    --tc-ink: #26324d;
    --tc-ink-soft: #52607a;
    --tc-muted: #8a94a8;
    --tc-navy: #1f2d64;
    --tc-blue: #2e5496;
    --tc-primary: #5b6ef5;
    --tc-border: #eef1f7;
    --tc-line: #e3e8f0;
    --tc-grad: linear-gradient(120deg, #5b6ef5 0%, #8f5bf0 45%, #fc5c7d 100%);
    --tc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background: var(--tc-bg);
    font-family: var(--tc-font);
    color: #24303f;
    font-size: 14px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Sticky footer: .app-main (wraps every page's content, see header.php /
   footer.php) grows to fill whatever's left of the viewport on short pages,
   pushing the footer to the bottom instead of leaving it stranded right
   after the content. On long pages this is a no-op — flex-grow never
   shrinks .app-main below its content's natural height, so nothing here
   changes how tall pages already scroll. */
.app-main { flex: 1 0 auto; }

input, select, textarea, button { font-family: inherit; }

/* ---- Layout ---- */
.container, .container-fluid { padding-top: 28px; padding-bottom: 40px; }

/* ---- Navbar ---- */
.navbar {
    font-size: 0.98rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    background: linear-gradient(120deg, var(--tc-navy) 0%, var(--tc-blue) 100%) !important;
}
/* Bootstrap's own .container-fluid inside the navbar shouldn't inherit the
   page-content padding rule below — that bled a 28/40px gap into the navbar
   and made it look bloated. */
.navbar .container-fluid { padding-top: 0; padding-bottom: 0; }
.navbar-brand { font-size: 1.25rem; letter-spacing: .3px; }
.navbar .nav-link.active, .navbar .nav-link:focus { font-weight: 600; color: #aab8ff !important; }

/* ---- Footer ---- */
footer.footer {
    background: var(--tc-navy) !important;
    border-top: 0;
    font-size: .95rem;
    padding: 18px 0;
}
/* Same fix as the navbar: the footer's inner .container shouldn't inherit
   the page-content padding rule. */
footer.footer .container { padding-top: 0; padding-bottom: 0; }
footer.footer, footer.footer * { color: #e9ecf2 !important; }
footer.footer a { color: #fff !important; text-decoration: none; }
footer.footer a:hover, footer.footer a:focus { text-decoration: underline; }

/* ---- Page titles (internal pages: container > h1/h2) ---- */
.container > h1, .container > h2,
.container-fluid > h1, .container-fluid > h2 {
    font-weight: 700;
    color: var(--tc-navy);
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
    padding-bottom: .55rem;
    position: relative;
}
.container > h1::after, .container > h2::after,
.container-fluid > h1::after, .container-fluid > h2::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 54px; height: 3px; border-radius: 3px; background: var(--tc-grad);
}
h3, h4, h5 { color: var(--tc-navy); font-weight: 700; }

/* ---- Cards ---- */
.card {
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgba(31, 45, 100, .06);
    border: 1px solid var(--tc-border);
    background: var(--tc-surface);
    transition: box-shadow .2s ease, transform .2s ease;
}
.card-title { font-weight: 700; font-size: .98rem; color: var(--tc-navy); }
.card .fs-1, .card .fs-2 { line-height: 1; }

/* ---- Tables (modernised, rounded, no harsh black borders) ---- */
.table {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--tc-surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(31, 45, 100, .06);
    margin-bottom: 1.25rem;
    color: #2a3547;
}
.table thead th {
    background: var(--tc-blue);
    color: #fff;
    font-weight: 600;
    font-size: .86rem;
    letter-spacing: .01em;
    border: 0;
    padding: 11px 12px;
    white-space: nowrap;
}
.table tbody td {
    vertical-align: middle;
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid var(--tc-border);
    font-size: .9rem;
}
.table.table-bordered, .table.table-bordered th, .table.table-bordered td { border-color: var(--tc-border) !important; }
.table tbody tr:nth-child(even) td { background: #f7f9fd; }
.table tbody tr:hover td { background: #eef3fe; }
.table thead th:first-child { border-top-left-radius: 12px; }
.table thead th:last-child { border-top-right-radius: 12px; }
/* action icons in tables */
.table td a[title] { display: inline-flex; align-items: center; margin-right: .35rem; }

.table.table-compact th, .table.table-compact td { padding: 6px 9px; font-size: .85rem; }

/* ---- Buttons ---- */
.btn {
    border-radius: .6rem;
    font-weight: 600;
    padding: .5rem 1rem;
    font-size: .92rem;
    transition: transform .14s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus, .btn:active { box-shadow: 0 0 0 .18rem rgba(91, 110, 245, .25); }
.btn-primary { background: var(--tc-primary); border-color: var(--tc-primary); }
.btn-primary:hover { background: #4a5be0; border-color: #4a5be0; }
.btn-success { background: #21b95c; border-color: #21b95c; }
.btn-success:hover { background: #1ba450; border-color: #1ba450; }
.btn-secondary { background: #eef1f7; border-color: #e3e8f0; color: #45526b; }
.btn-secondary:hover { background: #e3e8f0; color: #2a3547; }
.btn-outline-secondary { color: #52607a; border-color: #cfd7e6; }
.btn-outline-secondary:hover { background: #eef1f7; color: #26324d; border-color: #cfd7e6; }
.btn-lg { border-radius: .7rem; }

/* ---- Forms ---- */
.form-label { font-weight: 600; color: #3a465c; font-size: .9rem; margin-bottom: .3rem; }
.form-control, .form-select {
    border: 1px solid #cfd7e6 !important;
    border-radius: .55rem;
    background: #fff;
    color: #24303f !important;
    padding: .55rem .8rem;
    font-size: .92rem;
    transition: border-color .2s, box-shadow .2s;
}
.form-select { padding: .55rem 2rem .55rem .8rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--tc-primary) !important;
    box-shadow: 0 0 0 .18rem rgba(91, 110, 245, .18);
}
.form-control::placeholder, textarea::placeholder { color: #9aa4b6; opacity: 1; }

/* ---- Badges & alerts ---- */
.badge { font-weight: 600; border-radius: .5rem; padding: .4em .65em; }
.alert { border: 0; border-radius: .7rem; }
.alert-info { background: #e9f1fe; color: #1d3f74; }
.alert-success { background: #e5f8ed; color: #14663a; }
.alert-danger { background: #fdeaea; color: #9b2222; }
.alert-warning { background: #fdf3d8; color: #8a5b00; }

.dropdown-menu { border-radius: .7rem; min-width: 200px; border-color: var(--tc-border); box-shadow: 0 12px 30px rgba(31, 45, 100, .12); }

/* ---- Reusable slim page hero (opt-in via .page-hero on internal pages) ---- */
.page-hero {
    background: var(--tc-grad); color: #fff;
    border-radius: 1rem; padding: 1.1rem 1.4rem; margin-bottom: 1.4rem;
    box-shadow: 0 10px 24px rgba(91, 110, 245, .18);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.page-hero h1, .page-hero h2 { color: #fff; margin: 0; padding: 0; font-size: 1.4rem; }
.page-hero h1::after, .page-hero h2::after { display: none; }
.page-hero .page-hero-sub { color: rgba(255, 255, 255, .85); font-size: .85rem; margin-top: .15rem; }
.page-hero .btn-light { background: rgba(255, 255, 255, .95); color: #4453d6; font-weight: 600; border: 0; }
.page-hero .btn-light:hover { background: #fff; color: #3a48c2; }
.page-hero .btn-light .bi { color: inherit; }

/* Legacy helper kept for any markup still using it */
.bg-gradient-primary, .dashboard-banner { background: var(--tc-grad) !important; color: #fff; }

/* Dashboard quick-link colour cards (legacy) */
.card.bg-primary, .card.bg-success, .card.bg-warning, .card.bg-info, .card.bg-danger, .card.bg-secondary, .card.bg-dark { color: #fff !important; }
.card.bg-primary { background: linear-gradient(90deg, #6a82fb 0%, #3a5ad9 100%) !important; }
.card.bg-success { background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%) !important; }
.card.bg-warning { background: linear-gradient(90deg, #f7971e 0%, #ffd200 100%) !important; }
.card.bg-info { background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%) !important; }
.card.bg-danger { background: linear-gradient(90deg, #f857a6 0%, #ff5858 100%) !important; }
.card.bg-secondary { background: linear-gradient(90deg, #868f96 0%, #596164 100%) !important; }
.card.bg-dark { background: linear-gradient(90deg, #232526 0%, #414345 100%) !important; }

/* =========================================================================
   Functional CSS — preserved from the original (do not simplify away)
   ========================================================================= */

/* Nav tabs (Direct Attainment etc.) */
.nav-tabs { border-bottom: 2px solid #e5e7eb; }
.nav-tabs .nav-link {
    color: #6b7280; font-weight: 500; padding: 8px 16px; border: none;
    border-radius: 8px 8px 0 0; transition: all .3s ease; font-size: 14px;
}
.nav-tabs .nav-link:hover { color: #0d6efd; background-color: #f1f5ff; }
.nav-tabs .nav-link.active {
    color: #fff; background: linear-gradient(135deg, #5b6ef5, #7a5bf0);
    border: none; box-shadow: 0 -2px 8px rgba(91, 110, 245, .3);
}
.nav-tabs .nav-link:focus { outline: none; box-shadow: none; }

/* Direct Attainment tab panes: keep only the active pane visible even if Bootstrap JS fails */
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }
.tab-content > .tab-pane.show.active { display: block; }

/* Responsive tweaks */
@media (max-width: 900px) {
    .container, .container-fluid { padding-top: 14px; padding-bottom: 20px; }
    .card { margin-bottom: 12px; }
    body { font-size: 13px; }
    .page-hero { padding: 1rem 1.1rem; }
}

/* ---- Auth pages (login/register): full-bleed background image ---- */
.auth-bg {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.auth-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 60, .72), rgba(91, 110, 245, .55));
    z-index: 0;
}
.auth-bg > .row { position: relative; z-index: 1; }
/* Frosted-glass card: translucent so the hero image shows through instead
   of a solid white card sitting on top of it. */
.auth-bg .card {
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .5);
}

/* ---- No-scroll hero page (login): body has no navbar (see $hideNav in
   header.php), so pin the footer to its natural height and let .auth-bg
   fill whatever remains of the viewport — the page can never scroll. ---- */
body.no-scroll-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* .auth-bg's "flex: 1 1 auto" below only stretches it if its parent
   (main.app-main) is itself a flex container — .app-main normally isn't
   one, so this is what actually makes the hero fill the remaining
   viewport height instead of shrinking to the login card's height. */
body.no-scroll-page main.app-main {
    display: flex;
    flex-direction: column;
}
body.no-scroll-page .auth-bg {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
body.no-scroll-page footer.footer {
    flex: 0 0 auto;
}

/* WK Statement: cleaner CO multi-select dropdown */
#poSessionsTable .co-multiselect { position: relative; }
#poSessionsTable .co-dropdown-toggle {
    text-align: left; background: #fff; border: 1px dashed #9aa7bf; color: #334155;
    border-radius: 999px; padding: 4px 10px; font-weight: 600; font-size: .82rem; line-height: 1.2;
}
#poSessionsTable .co-dropdown-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1050;
    min-width: 260px; max-height: 210px; overflow-y: auto; border: 1px solid #cfd7e6;
    border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); padding: 6px;
}
#poSessionsTable .co-chip.dropdown-item {
    border-radius: 10px; margin-bottom: 4px; border: 1px solid #d9dfeb; color: #1e293b;
    font-size: .9rem; padding: 8px 12px;
}
#poSessionsTable .co-chip.dropdown-item:hover { background: #f3f6fb; }
#poSessionsTable .co-chip.dropdown-item.active { background: #111827; color: #fff; border-color: #111827; }
#poSessionsTable .selected-tags {
    min-height: 34px; background: #f8fafc; border: 1px solid #dde4f0; border-radius: 10px;
    padding: 6px; align-items: center;
}
#poSessionsTable .selected-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
#poSessionsTable .selected-tags .badge { background: #111827 !important; border-radius: 999px; font-size: .85rem !important; padding: 6px 10px !important; }
#poSessionsTable .selected-tags .btn-close { filter: invert(1); opacity: .9; }