/* CIMG custom utilities */

.cimg-hero-gradient {
    background: linear-gradient(135deg, #15488b 0%, #1d6ab8 100%) !important;
}

/* --------------------------------------------------------------------------
   Warning / yellow badges — stronger ink on soft fills (tables, sidebars)
   Default theme pairs pale yellow with #ffcc5a text; contrast is too low.
   -------------------------------------------------------------------------- */
:root {
    --cimg-warning-soft-ink: #4a3500;
    --cimg-warning-solid-ink: #141109;
}

/* Soft-fill + warning text (admin jobs Featured / expiry countdown, nav counts, etc.) */
.badge.bg-soft-warning.text-warning,
a.badge.bg-soft-warning.text-warning {
    color: var(--cimg-warning-soft-ink) !important;
    font-weight: 600;
}

.badge.bg-soft-warning.text-warning i,
.badge.bg-soft-warning.text-warning .bx {
    color: inherit !important;
}

/* Legacy “badge-soft-warning” pill (same low-contrast pairing in theme CSS) */
.badge.badge-soft-warning,
a.badge.badge-soft-warning {
    color: var(--cimg-warning-soft-ink) !important;
    font-weight: 600;
}

.badge.badge-soft-warning[href]:hover,
.badge.badge-soft-warning[href]:focus,
a.badge.badge-soft-warning:hover,
a.badge.badge-soft-warning:focus {
    color: var(--cimg-warning-soft-ink) !important;
}

/* Any compact label using soft warning + text-warning (calendar chips, etc.) */
.bg-soft-warning.text-warning:not(.btn) {
    color: var(--cimg-warning-soft-ink) !important;
    font-weight: 600;
}

/* Solid warning badges — theme default is white on #ffcc5a (low contrast) */
.badge.bg-warning:not(.text-white) {
    color: var(--cimg-warning-solid-ink) !important;
    font-weight: 600;
}

.badge.bg-warning.text-dark i,
.badge.bg-warning.text-dark .bx,
.badge.bg-warning:not(.text-white) i,
.badge.bg-warning:not(.text-white) .bx {
    color: inherit !important;
}

/* Soft warning + dark text (sidebar counts, anywhere pale yellow needs readable copy) */
.badge.bg-soft-warning.text-dark {
    color: var(--cimg-warning-soft-ink) !important;
    font-weight: 600;
    background-color: rgba(255, 204, 90, 0.38) !important;
}

/* Sidebar menu: link + mm-active colours can wash out nested badges — pin contrast */
#sidebar-menu .badge.bg-soft-warning.text-warning,
#sidebar-menu .badge.bg-soft-warning.text-dark,
#sidebar-menu a .badge.bg-soft-warning {
    color: var(--cimg-warning-soft-ink) !important;
    font-weight: 700;
    background-color: rgba(255, 190, 60, 0.45) !important;
}

body[data-sidebar="dark"] #sidebar-menu .badge.bg-soft-warning.text-warning,
body[data-sidebar="dark"] #sidebar-menu .badge.bg-soft-warning.text-dark,
body[data-sidebar="dark"] #sidebar-menu a .badge.bg-soft-warning {
    background-color: #ffcc5a !important;
    color: #1a1308 !important;
    font-weight: 700;
}

/* Dark layout: soft-warning washes read as muddy brown — use vivid fill for dark ink */
body[data-layout-mode="dark"] .badge.bg-soft-warning.text-dark,
body[data-layout-mode="dark"] a.badge.bg-soft-warning.text-dark,
body[data-layout-mode="dark"] .badge.bg-soft-warning.text-warning,
body[data-layout-mode="dark"] a.badge.bg-soft-warning.text-warning,
body[data-layout-mode="dark"] .badge.badge-soft-warning,
body[data-layout-mode="dark"] a.badge.badge-soft-warning {
    background-color: #ffcc5a !important;
    color: #1a1308 !important;
    font-weight: 600;
}

body[data-layout-mode="dark"] .badge.bg-soft-warning.text-dark i,
body[data-layout-mode="dark"] .badge.bg-soft-warning.text-dark .bx,
body[data-layout-mode="dark"] .badge.bg-soft-warning.text-warning i,
body[data-layout-mode="dark"] .badge.bg-soft-warning.text-warning .bx,
body[data-layout-mode="dark"] .badge.badge-soft-warning i,
body[data-layout-mode="dark"] .badge.badge-soft-warning .bx {
    color: inherit !important;
}

body[data-layout-mode="dark"] .badge.badge-soft-warning[href]:hover,
body[data-layout-mode="dark"] .badge.badge-soft-warning[href]:focus,
body[data-layout-mode="dark"] a.badge.badge-soft-warning:hover,
body[data-layout-mode="dark"] a.badge.badge-soft-warning:focus {
    background-color: #f2b93d !important;
    color: #1a1308 !important;
}

body[data-layout-mode="dark"] a.badge.bg-soft-warning.text-warning:hover,
body[data-layout-mode="dark"] a.badge.bg-soft-warning.text-warning:focus,
body[data-layout-mode="dark"] a.badge.bg-soft-warning.text-dark:hover,
body[data-layout-mode="dark"] a.badge.bg-soft-warning.text-dark:focus {
    background-color: #f2b93d !important;
    color: #1a1308 !important;
}

body[data-layout-mode="dark"] .bg-soft-warning.text-warning:not(.btn) {
    background-color: #ffcc5a !important;
    color: #1a1308 !important;
    font-weight: 600;
}

body[data-layout-mode="dark"] .badge.bg-warning:not(.text-white) {
    background-color: #ffcc5a !important;
    color: #1a1308 !important;
}

/* --------------------------------------------------------------------------
   Dark mode — readable tables, cards, auth pages, soft badges
   -------------------------------------------------------------------------- */
:root {
    --cimg-dark-body-text: #e9ecef;
    --cimg-dark-muted-text: #adb5bd;
}

.auth-logo .auth-logo-img {
    vertical-align: middle;
}

.auth-content .auth-footer-links a.auth-footer-link,
.auth-footer-links a.auth-footer-link {
    font-weight: 700;
}

body[data-layout-mode="dark"] .auth-content .auth-footer-links a,
body[data-layout-mode="dark"] .auth-content .auth-footer-links a.auth-footer-link,
body[data-layout-mode="dark"] .auth-footer-links a,
body[data-layout-mode="dark"] .auth-footer-links a.auth-footer-link {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none;
}

body[data-layout-mode="dark"] .auth-content .auth-footer-links a:hover,
body[data-layout-mode="dark"] .auth-content .auth-footer-links a:focus,
body[data-layout-mode="dark"] .auth-footer-links a:hover,
body[data-layout-mode="dark"] .auth-footer-links a:focus {
    color: #ffffff !important;
    text-decoration: underline;
}

body[data-layout-mode="dark"] .table:not(.table-dark) tbody td,
body[data-layout-mode="dark"] .table:not(.table-dark) tbody th,
body[data-layout-mode="dark"] table.dataTable tbody td,
body[data-layout-mode="dark"] table.dataTable tbody th,
body[data-layout-mode="dark"] table.dataTable.stripe tbody tr.odd,
body[data-layout-mode="dark"] table.dataTable.stripe tbody tr.even,
body[data-layout-mode="dark"] table.dataTable.display tbody tr.odd,
body[data-layout-mode="dark"] table.dataTable.display tbody tr.even {
    color: var(--cimg-dark-body-text) !important;
}

body[data-layout-mode="dark"] .table thead.table-light,
body[data-layout-mode="dark"] .table thead.table-light th,
body[data-layout-mode="dark"] .table thead.table-light td,
body[data-layout-mode="dark"] table.dataTable thead th,
body[data-layout-mode="dark"] table.dataTable thead td,
body[data-layout-mode="dark"] table.dataTable thead.table-light th,
body[data-layout-mode="dark"] table.dataTable thead.table-light td,
body[data-layout-mode="dark"] .table .table-light > tr > th,
body[data-layout-mode="dark"] .table .table-light > tr > td {
    background-color: #3a4558 !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
    --bs-table-bg: #3a4558 !important;
    --bs-table-accent-bg: #3a4558 !important;
    box-shadow: none !important;
}

/* Theme groups thead.table-light with tbody striping and sets muted grey text */
body[data-layout-mode="dark"] .table thead.table-light,
body[data-layout-mode="dark"] .table .table-light:where(thead) {
    color: #ffffff !important;
    --bs-table-bg: #3a4558 !important;
    --bs-table-accent-bg: #3a4558 !important;
}

body[data-layout-mode="dark"] table.dataTable thead .sorting:before,
body[data-layout-mode="dark"] table.dataTable thead .sorting:after,
body[data-layout-mode="dark"] table.dataTable thead .sorting_asc:before,
body[data-layout-mode="dark"] table.dataTable thead .sorting_asc:after,
body[data-layout-mode="dark"] table.dataTable thead .sorting_desc:before,
body[data-layout-mode="dark"] table.dataTable thead .sorting_desc:after {
    opacity: 0.85;
}

body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_info,
body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_length,
body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_length label,
body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_filter,
body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_filter label {
    color: var(--cimg-dark-muted-text) !important;
}

body[data-layout-mode="dark"] .mini-stats-wid .text-muted.fw-medium,
body[data-layout-mode="dark"] .card-body .text-muted,
body[data-layout-mode="dark"] .table .text-muted,
body[data-layout-mode="dark"] .card .font-size-12.text-muted,
body[data-layout-mode="dark"] .card .font-size-13.text-muted {
    color: var(--cimg-dark-muted-text) !important;
}

body[data-layout-mode="dark"] .table tbody td.text-danger,
body[data-layout-mode="dark"] table.dataTable tbody td.text-danger {
    color: #f46a6a !important;
}

body[data-layout-mode="dark"] .table tbody td.text-success,
body[data-layout-mode="dark"] table.dataTable tbody td.text-success {
    color: #34c38f !important;
}

body[data-layout-mode="dark"] .card a.text-dark,
body[data-layout-mode="dark"] .card a.text-dark:hover {
    color: var(--cimg-dark-body-text) !important;
}

body[data-layout-mode="dark"] .badge.badge-soft-primary,
body[data-layout-mode="dark"] a.badge.badge-soft-primary,
body[data-layout-mode="dark"] .badge.bg-soft-primary.text-primary,
body[data-layout-mode="dark"] span.bg-soft-primary.text-primary,
body[data-layout-mode="dark"] .bg-soft-primary.text-primary:not(.btn) {
    background-color: rgba(133, 168, 255, 0.32) !important;
    color: #eef2ff !important;
    border: 1px solid rgba(168, 197, 255, 0.28);
    font-weight: 600;
}

body[data-layout-mode="dark"] .badge.bg-soft-primary.text-primary[href]:hover,
body[data-layout-mode="dark"] a.badge.bg-soft-primary.text-primary:hover,
body[data-layout-mode="dark"] a.bg-soft-primary.text-primary:not(.btn):hover {
    background-color: rgba(133, 168, 255, 0.42) !important;
    color: #ffffff !important;
}

body[data-layout-mode="dark"] .badge.badge-soft-secondary,
body[data-layout-mode="dark"] a.badge.badge-soft-secondary,
body[data-layout-mode="dark"] .badge.bg-soft-secondary.text-secondary {
    background-color: rgba(173, 181, 189, 0.22) !important;
    color: #dee2e6 !important;
    font-weight: 600;
}

body[data-layout-mode="dark"] .badge.badge-soft-success,
body[data-layout-mode="dark"] .badge.bg-soft-success.text-success {
    background-color: rgba(52, 195, 143, 0.22) !important;
    color: #9ae6c5 !important;
    font-weight: 600;
}

body[data-layout-mode="dark"] .badge.badge-soft-danger,
body[data-layout-mode="dark"] .badge.bg-soft-danger.text-danger {
    background-color: rgba(244, 106, 106, 0.22) !important;
    color: #ffb3b3 !important;
    font-weight: 600;
}

body[data-layout-mode="dark"] .badge.badge-soft-info,
body[data-layout-mode="dark"] .badge.bg-soft-info.text-info {
    background-color: rgba(80, 165, 241, 0.22) !important;
    color: #a8d4ff !important;
    font-weight: 600;
}

body[data-layout-mode="dark"] .cimg-hero-gradient + .card-body .text-muted {
    color: var(--cimg-dark-muted-text) !important;
}

body[data-layout-mode="dark"] .cimg-hero-gradient + .card-body h5 {
    color: var(--cimg-dark-body-text);
}

body[data-layout-mode="dark"] #pending-courses-table tbody tr > td,
body[data-layout-mode="dark"] #attendance-courses-table tbody tr > td,
body[data-layout-mode="dark"] #completed-courses-table tbody tr > td,
body[data-layout-mode="dark"] #examiner-results-table tbody tr > td {
    color: var(--cimg-dark-body-text) !important;
}

/* --------------------------------------------------------------------------
   Header — logo + hamburger spacing (collapsed desktop + mobile)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    body[data-sidebar-size="sm"] .navbar-header > .d-flex:first-child {
        align-items: center;
        width: auto;
        flex: 0 0 auto;
        gap: 0.375rem;
    }

    body[data-sidebar-size="sm"] .navbar-brand-box {
        width: auto !important;
        padding: 0 0 0 1rem !important;
        margin-right: 0 !important;
        border-right: none;
        flex: 0 0 auto;
    }

    body[data-sidebar-size="sm"] .navbar-brand-box .logo {
        line-height: 1;
    }

    body[data-sidebar-size="sm"] .navbar-brand-box .logo span.logo-sm {
        display: block;
        line-height: 0;
    }

    body[data-sidebar-size="sm"] .navbar-brand-box .logo span.logo-sm img {
        display: block;
        height: 26px;
        width: auto;
    }

    body[data-sidebar-size="sm"] #vertical-menu-btn {
        position: static;
        transform: none;
        margin: 0 !important;
        padding: 0 0.5rem !important;
        width: auto;
        flex-shrink: 0;
    }
}

@media (max-width: 991.98px) {
    .navbar-header > .d-flex:first-child {
        align-items: center;
        gap: 0.25rem;
        flex: 0 0 auto;
    }

    .navbar-brand-box {
        width: auto !important;
        padding: 0 0 0 0.75rem !important;
        margin-right: 0 !important;
    }

    #vertical-menu-btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.25rem !important;
        padding-right: 0.5rem !important;
    }
}