/* ==========================================================================
   SCHOLNEXA — Bootstrap-based stylesheet (adapted from the Demo template)
   Brand color: #2c56d1 (matches the old Tailwind brand-600)
   ========================================================================== */

:root {
    --bs-primary: #2c56d1;
    --bs-primary-rgb: 44, 86, 209;
    --bs-link-color: #2c56d1;
    --bs-link-hover-color: #23459f;
}

body {
    background-color: #f4f6f9;
    --bs-body-color: #1f2937;
    color: #1f2937;
}
[data-bs-theme="dark"] body {
    background-color: #12161c;
}

.card {
    border: none;
    border-radius: 12px;
}

.btn-primary {
    background-color: #2c56d1;
    border-color: #2c56d1;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #23459f !important;
    border-color: #23459f !important;
}
.btn-outline-primary {
    color: #2c56d1;
    border-color: #2c56d1;
}
.btn-outline-primary:hover {
    background-color: #2c56d1;
    border-color: #2c56d1;
}

/* --- Stat / KPI tiles (dashboards) --- */
.stat-card {
    border-radius: 12px;
    color: #fff;
    padding: 1.25rem;
}
.stat-card h3 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}
.stat-card p {
    margin: 0;
    opacity: .9;
    font-weight: 600;
}
.kpi-tile,
.kpi-tile:link,
.kpi-tile:visited,
.kpi-tile:hover,
.kpi-tile:focus,
.kpi-tile * {
    text-decoration: none !important;
}
.kpi-tile {
    display: block;
    color: inherit;
    height: 100%;
    transition: transform .12s ease, box-shadow .12s ease;
}
a.kpi-tile:hover, a.kpi-tile:focus {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    color: inherit;
}
.kpi-tile .card { height: 100%; }
.kpi-label { font-size: .72rem; font-weight: 600; opacity: .85; line-height: 1.2; }
.kpi-value { font-weight: 700; font-size: 1.3rem; line-height: 1.25; }
.kpi-blue   { background-color: #e7f1fd; color: #1c4c86; }
.kpi-purple { background-color: #f0ebfb; color: #5b3a9e; }
.kpi-amber  { background-color: #fff4e0; color: #8a5a00; }
.kpi-green  { background-color: #e8f8ee; color: #1e7a41; }
.kpi-pink   { background-color: #fdeaec; color: #a13350; }
[data-bs-theme="dark"] .kpi-blue   { background-color: #1c3a5e; color: #a9cdfb; }
[data-bs-theme="dark"] .kpi-purple { background-color: #3a2c5e; color: #cbb8f5; }
[data-bs-theme="dark"] .kpi-amber  { background-color: #5c4419; color: #ffd98a; }
[data-bs-theme="dark"] .kpi-green  { background-color: #1f4a30; color: #94e0ae; }
[data-bs-theme="dark"] .kpi-pink   { background-color: #5c2430; color: #f5a8ba; }

/* ==========================================================================
   APP SHELL — left sidebar + main content column
   .app-sidebar is a Bootstrap "responsive offcanvas" (offcanvas-lg): a
   slide-in panel below the lg breakpoint, and a plain, always-visible
   column at lg and above. See includes/header.php / footer.php.
   ========================================================================== */
.app-shell { min-height: 100vh; }

.app-sidebar {
    --bs-offcanvas-width: 260px;
    background-color: #ffffff;
    border-right: 1px solid #eef0f4;
}
[data-bs-theme="dark"] .app-sidebar {
    background-color: #10141b;
    border-right-color: #2a2f3a;
}
@media (min-width: 992px) {
    .app-sidebar {
        width: 260px;
        flex: 0 0 260px;
    }
}

.sidebar-nav { gap: .15rem; }
.sidebar-nav .nav-link,
.sidebar-nav .nav-link.btn {
    color: var(--bs-body-color);
    border-radius: .5rem;
    padding: .55rem .75rem;
    font-size: .92rem;
    font-weight: 500;
}
.sidebar-nav .nav-link i { width: 1.1rem; text-align: center; flex-shrink: 0; }
.sidebar-nav > li > .nav-link:hover,
.sidebar-nav > li > .nav-link.btn:hover,
.sidebar-nav > li > .nav-link:focus,
.sidebar-nav > li > .nav-link.btn:focus {
    /* .btn:hover in Bootstrap always sets color/background from
       --bs-btn-hover-color/--bs-btn-hover-bg — undefined on a plain
       .btn with no color variant, which some browsers resolve in a way
       that leaves near-white text on a light background. Pin both
       explicitly so a sidebar item never becomes unreadable on hover. */
    background-color: rgba(44, 86, 209, .08);
    color: var(--bs-body-color) !important;
}
.sidebar-nav .nav-link.active {
    background-color: var(--bs-primary);
    color: #fff !important;
}
.sidebar-caret { transition: transform .15s ease; margin-left: auto; }
.sidebar-nav .nav-link.btn[aria-expanded="true"] .sidebar-caret { transform: rotate(180deg); }
.sidebar-subnav { padding-left: 1.6rem; }
.sidebar-subnav .nav-link { font-size: .87rem; padding: .4rem .75rem; }
.sidebar-subnav .nav-link:hover,
.sidebar-subnav .nav-link:focus { background-color: rgba(44, 86, 209, .08); color: var(--bs-body-color) !important; }
.sidebar-subnav .nav-link.active { background-color: rgba(44, 86, 209, .12); color: var(--bs-primary) !important; font-weight: 600; }
.sidebar-subheader {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d); padding: .6rem .75rem .15rem;
    letter-spacing: .03em;
}
.sidebar-brand img { display: block; }

.app-topbar {
    background-color: #ffffff;
    border-bottom: 1px solid #eef0f4;
    min-height: 56px;
}
[data-bs-theme="dark"] .app-topbar {
    background-color: #10141b;
    border-bottom-color: #2a2f3a;
}

/* --- Table toolbar (search / export / import / print) --- */
.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.table-toolbar .form-control, .table-toolbar .form-select {
    min-width: 10rem;
}
.dataTables_wrapper .dataTables_filter input { margin-left: .5rem; }
.dataTables_wrapper .dataTables_length select { margin: 0 .35rem; }
.dataTables_wrapper .dataTables_length { margin-top: 1rem; margin-bottom: .5rem; }
.dataTables_wrapper .dataTables_filter { margin-top: 1rem; margin-bottom: .5rem; }

/* --- DataTables export/column toolbar: separate pill buttons, not a
   joined btn-group, so each export action reads as its own icon button. --- */
.table-toolbar .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.table-toolbar .dt-buttons > .btn,
.table-toolbar .dt-buttons > .btn-group > .btn {
    border-radius: .375rem !important;
}
.table-toolbar .dt-buttons .btn-group { margin: 0; }
.table-toolbar .dataTables_filter { margin-left: auto; }
.table-toolbar .dataTables_filter label { display: flex; align-items: center; gap: .35rem; margin: 0; font-weight: 500; }

/* --- App footer --- */
.app-footer { background-color: #fff; }
[data-bs-theme="dark"] .app-footer { background-color: #1a1f28; }

/* --- Mobile support --- */
.card-body.p-0 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.d-flex.justify-content-between.align-items-center {
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 575.98px) {
    .app-content.container-fluid { padding-left: .75rem; padding-right: .75rem; }
}

@media print {
    .app-sidebar, .app-topbar, .table-toolbar, form.filter-form, .btn, .no-print, .card-header .btn,
    .dataTables_filter, .dataTables_length, .dataTables_paginate, .dataTables_info {
        display: none !important;
    }
    body { background: #fff !important; }
    .card { box-shadow: none !important; }
}

/* ==========================================================================
   PHONE LAYOUT — every data table becomes a stack of cards below 768px.
   Driven entirely off table.data-table + form.filter-form; no per-page CSS
   needed. See includes/footer.php for the JS that labels each cell.
   ========================================================================== */
@media (max-width: 767.98px) {
    table.data-table thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    table.data-table, table.data-table tbody, table.data-table tr, table.data-table td {
        display: block; width: 100%;
    }
    table.data-table, table.data-table.dataTable {
        width: 100% !important; max-width: 100% !important; margin: 0 !important;
    }
    table.data-table tr, table.data-table td { max-width: 100%; }
    table.data-table tr {
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: .6rem;
        margin-bottom: .6rem;
        padding: .3rem .1rem;
        background: var(--bs-body-bg, #fff);
    }
    table.data-table > tbody > tr > td,
    table.data-table > tfoot > tr > td,
    table.data-table.table-striped > tbody > tr:nth-of-type(odd) > td {
        --bs-table-accent-bg: transparent;
        --bs-table-bg-type: transparent;
        --bs-table-color-type: inherit;
        background-color: transparent;
        box-shadow: none;
    }
    table.data-table > tbody > tr.table-danger { border-color: var(--bs-danger); border-left-width: 4px; }
    table.data-table > tbody > tr.table-warning { border-color: var(--bs-warning); border-left-width: 4px; }
    table.data-table > tbody > tr.table-success { border-color: var(--bs-success); border-left-width: 4px; }
    table.data-table > tbody > tr.table-secondary { opacity: .72; }
    table.data-table, table.data-table tbody, table.data-table tr, table.data-table td,
    table.data-table td > .cell-value { box-sizing: border-box !important; }
    table.data-table td {
        display: grid;
        grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
        align-items: baseline;
        column-gap: .75rem;
        border: 0;
        padding: .3rem .8rem;
        min-width: 0;
        max-width: 100%;
        word-break: break-word;
    }
    table.data-table td::before {
        content: attr(data-label);
        min-width: 0; text-align: left; font-weight: 600; font-size: .82rem;
        color: var(--bs-secondary-color, #6c757d);
    }
    table.data-table td > .cell-value {
        min-width: 0; max-width: 100%; text-align: right; overflow-wrap: anywhere;
    }
    table.data-table td.cell-block,
    table.data-table td[data-label=""] {
        grid-template-columns: minmax(0, 1fr); row-gap: .15rem;
    }
    table.data-table td.cell-block > .cell-value { text-align: left; }
    table.data-table td[data-label=""]::before { content: none; }
    table.data-table td.card-title-cell {
        font-size: 1.05rem; font-weight: 700; padding: .5rem .8rem .35rem;
        text-align: left; border-bottom: 1px solid var(--bs-border-color, #dee2e6);
        margin-bottom: .2rem; grid-template-columns: minmax(0, 1fr);
    }
    table.data-table td.card-title-cell::before { content: none; }
    table.data-table td.card-title-cell > .cell-value { text-align: left; }
    table.data-table td:empty { display: none; }
    table.data-table td.actions-cell {
        display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-start;
        padding: .5rem .8rem .6rem; border-top: 1px solid var(--bs-border-color, #dee2e6);
        margin-top: .2rem; text-align: left;
        order: 10;
    }
    table.data-table td.actions-cell::before { content: none; }
    table.data-table td.actions-cell .btn {
        min-height: 40px; min-width: 44px; display: inline-flex;
        align-items: center; justify-content: center;
    }
    table.data-table td.actions-cell form.d-inline { display: inline-flex; }
    /* An actions column placed first in the table still renders as a
       flex-ordered LAST element in each mobile card (order: 10 above);
       this requires the row itself to be a flex container. */
    table.data-table tr:has(> td.actions-cell) {
        display: flex; flex-direction: column;
    }
    table.data-table tfoot { display: block; }
    table.data-table tfoot tr {
        border: 0; border-top: 2px solid var(--bs-border-color, #dee2e6);
        background: transparent; font-weight: 700;
    }
    table.data-table tfoot td { text-align: right; }
    table.data-table tfoot td:first-child { border-bottom: 0; font-size: 1rem; }
    table.data-table tfoot td:empty { display: none; }
    .card-body.p-0 { overflow-x: visible; }
    .card-body.p-0 > table.data-table, .card-body.p-0 > .dataTables_wrapper { padding: .6rem; }
    .table-responsive { overflow-x: visible; }
    .dataTables_filter, .dataTables_length, .dataTables_info { display: none !important; }
    .dataTables_paginate { float: none !important; text-align: center; padding-top: .5rem; }
    .dataTables_paginate .pagination { justify-content: center; flex-wrap: wrap; margin-bottom: 0; }
    .dataTables_paginate .page-link { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }

    form.filter-form .filter-extra { display: none; }
    form.filter-form.filters-open .filter-extra { display: block; }
    form.filter-form:not(.filters-open) { margin-bottom: .5rem !important; }
    form.filter-form .filter-toggle {
        min-height: 44px; white-space: nowrap; width: 100%;
        display: flex; align-items: center; justify-content: center; gap: .4rem;
    }
    form.filter-form .filter-toggle .badge { margin-left: .1rem; }
    form.filter-form .filter-toggle .filter-caret { transition: transform .15s ease; }
    form.filter-form.filters-open .filter-toggle .filter-caret { transform: rotate(180deg); }
    .alert .text-nowrap, .card-header .text-nowrap { white-space: normal; }
    .alert .text-nowrap .btn { margin-bottom: .25rem; }
    .table-toolbar { gap: .4rem; }
    .table-toolbar .btn { font-size: .82rem; padding: .35rem .6rem; min-height: 38px; }
    .table-toolbar .btn[onclick^="printDataTable"] { display: none; }
    .btn { min-height: 40px; }
    .btn-sm { min-height: 38px; }
    .form-control, .form-select { min-height: 44px; font-size: 1rem; }
    body.has-bottom-nav { padding-bottom: 4.5rem; }
}

/* --- Bottom bar (phones only), rendered by includes/footer.php --- */
.bottom-nav { display: none; }
@media (max-width: 767.98px) {
    .bottom-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        background: var(--bs-body-bg, #fff);
        border-top: 1px solid var(--bs-border-color, #dee2e6);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
    }
    .bottom-nav a {
        flex: 1 1 0; min-width: 0; padding: .45rem .2rem .5rem; text-align: center;
        text-decoration: none; color: var(--bs-secondary-color, #6c757d);
        font-size: .68rem; line-height: 1.15; display: flex; flex-direction: column;
        align-items: center; gap: .15rem;
    }
    .bottom-nav a i { font-size: 1.25rem; }
    .bottom-nav a.active { color: var(--bs-primary, #2c56d1); font-weight: 600; }
    .bottom-nav a span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media print { .bottom-nav { display: none !important; } }
@media (min-width: 768px) {
    form.filter-form .filter-toggle-col { display: none !important; }
}

/* Dark-mode safety net for Bootstrap utilities that don't auto-adapt */
[data-bs-theme="dark"] .bg-light { background-color: #1e232c !important; }
[data-bs-theme="dark"] .bg-white { background-color: #1a1f28 !important; }
[data-bs-theme="dark"] .text-dark { color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .table-light { --bs-table-bg: #1e232c; --bs-table-color: var(--bs-body-color); }