/* ============================================================

   Theme Variables

   Store repeated colors and sizing values in one place.

   ============================================================ */

:root {
    --site-font-family-sans: "Raleway", sans-serif;
    --site-font-family-serif: "Noto Serif", serif;
    --site-font-size-base: 1.1rem;
    --site-font-weight-base: 500;
    --site-text-color: #525757;
    --site-text-dark: #424a57;
    --site-text-black: #000000;
    --kumc-blue-dark: #003459;
    --kumc-blue: #0051ba;
    --kumc-blue-heading: #004373;
    --kumc-red: #e8000d;
    --kumc-light-gray: #d6d7d9;
    --validation-danger-text: #a94442;
    --validation-danger-bg: #f2dede;
    --validation-danger-border: #ebccd1;
    --table-hover-bg: lightblue;
    --table-head-bg: #093266;
    --table-head-text: #ffffff;
    --footer-text: #ffffff;
    --footer-link: #ffffff;
    --skip-link-border: #dde5ee;
    --skip-link-bg: #ffffff;
    --content-max-width: 2000px;
}

 

/* ============================================================
   LIGHT THEME
   ============================================================ */

/* Global page */
html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #ffffff;
    color: #212529;
}

/* General text */
p,
li,
/*span,*/
div,
label,
small {
    color: #212529;
}

h1, h2, h3, h4, h5, h6 {
    color: #212529;
}

/* Home page hero section */
.kns-hero {
    background-color: #ffffff;
    color: #212529;
}

/* If you add an image/svg inside kns-hero-art, keep it from overflowing */
.kns-hero-art img {
    max-width: 100%;
    height: auto;
}

/* Cards section */
.kns-cards {
    background-color: #f8f9fa;
}

/* Full-page wrapper */
.kns-page {
    background-color: #ffffff;
    color: #212529;
/*    padding: .5rem;*/
}

/* Main cards */
.kns-card {
    background-color: #ffffff;
/*    border: 2px solid #cbd5e1 !important;*/
    color: #212529;
}

    /* Keep card images consistent */
    .kns-card .card-img-top {
        height: 220px;
        object-fit: cover;
    }

    /* Card text */
    .kns-card .card-title {
        color: #212529;
    }

    .kns-card .card-text,
    .kns-card p,
    .kns-card li,
/*    .kns-card span,*/
    .kns-card div,
    .kns-card h3,
    .kns-card h4 {
        color: #495057;
    }

/* Card header */
.kns-card-header {
    background-color: #dbeafe;
    border-bottom: 2px solid #cbd5e1 !important;
    color: #093266;
    padding: .5rem;
}

.kns-detail-card-header {
    border-bottom: 2px solid #cbd5e1 !important;
    color: #093266;
    padding: .5rem;
}

.school-header-custom {
    background-color: #093266; /* KUMC dark blue */
    color: #ffffff; /* White text */
}

.containerwithborderred {
    background-color: #ffffff;
    border: 2px solid #ff7f7f !important;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 1.25rem;
    color: #212529;
}

.containerwithborderblue {
    background-color: #f0f5f4;
    border: 2px solid #e3eefa !important;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 1.25rem;
    color: #212529;
}

/* Panels / containers */
.containerwithborder {
    background-color: #ffffff;
    border: 2px solid #cbd5e1 !important;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 1.25rem;
    color: #212529;
}

    .containerwithborder h1,
    .containerwithborder h2,
    .containerwithborder h3,
    .containerwithborder h4,
    .containerwithborder h5,
    .containerwithborder h6 {
        color: #212529;
    }

    .containerwithborder p,
    .containerwithborder li,
    /*.containerwithborder span,*/
    .containerwithborder div,
    .containerwithborder label {
        color: #212529;
    }

    /* Horizontal rules */
    .kns-hr,
    .containerwithborder hr {
        border-color: #cbd5e1 !important;
        opacity: 1 !important;
    }

    /* Form controls */
    .containerwithborder .form-select,
    .containerwithborder .form-control,
    .kns-card .form-select,
    .kns-card .form-control {
        background-color: #ffffff;
        color: #212529;
        border: 2px solid #ced4da !important;
    }

        /* Placeholder text */
        .containerwithborder .form-control::placeholder,
        .kns-card .form-control::placeholder {
            color: #6c757d;
        }

    /* Labels */
    .containerwithborder label,
    .kns-card label {
        color: #212529;
    }

    /* Checkbox / radio row borders */
    .kns-checkrow.border,
    .containerwithborder .border {
        border-color: #cbd5e1 !important;
        border-width: 2px !important;
    }

    /* Info buttons */
    .containerwithborder .btn-outline-secondary {
        border-color: #6c757d !important;
        color: #495057 !important;
    }

        .containerwithborder .btn-outline-secondary:hover {
            background-color: #e9ecef !important;
            color: #212529 !important;
        }

    /* Focus ring for keyboard users */
    .containerwithborder .form-select:focus,
    .containerwithborder .form-control:focus,
    .containerwithborder .form-check-input:focus,
    .containerwithborder .btn:focus,
    .kns-card .form-select:focus,
    .kns-card .form-control:focus,
    .kns-card .form-check-input:focus,
    .kns-card .btn:focus {
        outline: 3px solid #86b7fe !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
    }

    /* Checkbox/radio styling */
    .containerwithborder .form-check-input,
    .kns-card .form-check-input {
        background-color: #ffffff !important;
        border: 2px solid #6c757d !important;
    }

        .containerwithborder .form-check-input:checked,
        .kns-card .form-check-input:checked {
            background-color: #0d6efd !important;
            border-color: #0d6efd !important;
            filter: none !important;
        }

        .containerwithborder .form-check-input:disabled,
        .kns-card .form-check-input:disabled {
            opacity: 0.6 !important;
        }

/* Footer */
#footer {
    background-color: #f8f9fa;
}

.kns-footer {
    background-color: #f8f9fa;
    color: #495057;
}

    .kns-footer p,
    .kns-footer span,
    .kns-footer div,
    .kns-footer li {
        color: #495057;
    }

    .kns-footer-link,
    .kns-footer a {
        color: #0d6efd;
        text-decoration: underline;
    }

        .kns-footer-link:hover,
        .kns-footer a:hover {
            color: #0a58ca;
            text-decoration: underline;
        }

/* Navbar dropdown */
.navbar .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #ced4da;
}

    .navbar .dropdown-menu .dropdown-item {
        color: #212529;
        background-color: transparent;
    }

        .navbar .dropdown-menu .dropdown-item:hover,
        .navbar .dropdown-menu .dropdown-item:focus {
            background-color: #f1f3f5;
            color: #212529;
        }

        .navbar .dropdown-menu .dropdown-item.active,
        .navbar .dropdown-menu .dropdown-item:active {
            background-color: #dbeafe;
            color: #093266;
        }

.navbar .nav-link.dropdown-toggle {
    color: #212529;
}

.form-text {
    color: #000000 !important;
}

#homePathSelect {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ced4da !important;
}

    #homePathSelect option {
        background-color: #ffffff;
        color: #000000;
    }

/* ============================================================
   FORCE BOOTSTRAP POPOVERS TO LIGHT MODE
   This keeps popovers white even if Bootstrap dark theme
   variables are being applied in production.
   ============================================================ */
.popover {
    --bs-popover-bg: #ffffff;
    --bs-popover-border-color: #ced4da;
    --bs-popover-header-bg: #f8f9fa;
    --bs-popover-header-color: #212529;
    --bs-popover-body-color: #212529;
    --bs-popover-arrow-border: #ced4da;
    --bs-popover-max-width: 320px;
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
}

    .popover .popover-header {
        background-color: #f8f9fa !important;
        color: #212529 !important;
        border-bottom: 1px solid #ced4da !important;
    }

    .popover .popover-body {
        background-color: #ffffff !important;
        color: #212529 !important;
    }

    .popover ul,
    .popover li,
    .popover span,
    .popover div,
    .popover p {
        color: #212529 !important;
    }

/* ============================================================
   Table Styles
   Minimal table helpers that still work with Bootstrap 5.
   ============================================================ */
.table.table-auto {
    width: auto !important;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: var(--table-hover-bg);
}

.table-bordered thead td,
.table-bordered thead th {
    background-color: var(--table-head-bg);
    color: var(--table-head-text);
}

.text-white-btn,
.text-white-btn:hover,
.text-white-btn:focus,
.text-white-btn:active {
    color: #ffffff !important;
}

    .text-white-btn span {
        color: #ffffff !important;
    }

/* ============================================================
   DataTables Theme Overrides
   Place near the bottom of site.css so these styles override
   DataTables and Bootstrap defaults.
   ============================================================ */

/* Match the empty table area / body background to your page */
table.dataTable tbody td,
table.dataTable tbody th {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Specifically style the "No data available in table" row */
table.dataTable tbody tr.odd td,
table.dataTable tbody tr.even td {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Keep striped rows light instead of dark */
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

table.dataTable.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Hover color */
table.dataTable.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover-bg) !important;
    color: #212529 !important;
}

/* ============================================================
   Reusable Rich Text Content Styling
   Used for HTML content rendered from Summernote or other
   WYSIWYG editors so it displays cleanly and consistently.
   ============================================================ */
.rich-text-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #212529;
    padding: 0.75rem 0;
}

    /* Remove extra spacing above the first rendered HTML element */
    .rich-text-content > :first-child {
        margin-top: 0;
    }

    /* Remove extra spacing below the last rendered HTML element */
    .rich-text-content > :last-child {
        margin-bottom: 0;
    }

    /* Improve paragraph spacing */
    .rich-text-content p {
        margin-bottom: 1rem;
    }

    /* Improve unordered and ordered list spacing */
    .rich-text-content ul,
    .rich-text-content ol {
        padding-left: 1.5rem;
        margin-bottom: 1rem;
    }

    /* Improve list item readability */
    .rich-text-content li {
        margin-bottom: 0.35rem;
    }

    /* Keep headings from looking too cramped */
    .rich-text-content h1,
    .rich-text-content h2,
    .rich-text-content h3,
    .rich-text-content h4,
    .rich-text-content h5,
    .rich-text-content h6 {
        margin-top: 1rem;
        margin-bottom: 0.75rem;
        color: #003459;
    }

    /* Make links match your site styling better */
    .rich-text-content a {
        color: #0051ba;
        text-decoration: underline;
    }

    /* Keep images responsive if added through the editor */
    .rich-text-content img {
        max-width: 100%;
        height: auto;
    }

    /* Style tables inserted from the editor, if any */
    .rich-text-content table {
        width: 100%;
        margin-bottom: 1rem;
        border-collapse: collapse;
    }

    .rich-text-content th,
    .rich-text-content td {
        padding: 0.75rem;
        border: 1px solid #d6d7d9;
    }

.school-detail-label {
    font-weight: 700; /* Bold text */
    margin-bottom: 0.25rem; /* Small spacing below label */
    display: block; /* Ensures it sits above the value */
}

.bg-northwest {
    background-color: #b7dde6 !important;
    color: black !important;
}

.bg-northcentral {
    background-color: #fbf295 !important;
    color: black !important;
}

.bg-northeast {
    background-color: #fdd3ab !important;
    color:black !important;
}

.bg-southwest {
    background-color: #e6b8b8 !important;
    color: black !important;
}

.bg-southcentral {
    background-color: #c2d699 !important;
    color: black !important;
}

.bg-southeast {
    background-color: #dda5ca !important;
    color: black !important;
}

.bg-kcmetro {
    background-color: #e6ffb3 !important;
    color: black !important;
}

.danger {
     color:red !important;
}

/* Custom button using #093266 (dark gray/black) */
.btn-dark-custom {
    background-color: #093266;
    border-color: #093266;
    color: #ffffff;
}

    /* Hover state for better UX */
    .btn-dark-custom:hover {
        background-color: #1c1f23;
        border-color: #1c1f23;
        color: #ffffff;
    }

/* Center Acronym + URL columns */
.kns-html-table-orgs th:nth-child(2),
.kns-html-table-orgs td:nth-child(2),
.kns-html-table-orgs th:nth-child(3),
.kns-html-table-orgs td:nth-child(3) {
    text-align: center;
}


/* Styling for tables associated with Nursing Statistics */

.rn-practice-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    color: #1f2d3d;
}

    .rn-practice-table caption {
        caption-side: top;
        text-align: left;
        background-color: #c73808;
        color: #ffffff;
        font-weight: bold;
        font-size: 1.1rem;
        padding: 0.6rem;
    }

    .rn-practice-table thead th {
        background-color: #0b3973;
        color: #ffffff;
        text-align: center;
        padding: 0.6rem;
        font-weight: bold;
        border: 2px solid #ffffff;
    }

    .rn-practice-table tbody th,
    .rn-practice-table tbody td {
        padding: 0.55rem;
        border: 2px solid #ffffff;
    }

    .rn-practice-table tbody th {
        text-align: left;
        font-weight: normal;
    }

    .rn-practice-table tbody td {
        text-align: center;
    }

    .rn-practice-table tbody tr:nth-child(even) {
        background-color: #dcecf7;
    }

    .rn-practice-table tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .kns-footer {
        background-color: #ffffff !important;
        color: #212529 !important;
    }

    .kns-footer .container {
        background-color: #ffffff !important;
    }

    /*Footer Styles*/

    .kns-footer p,
    .kns-footer .small,
    .kns-footer b,
    .kns-footer span,
    .kns-footer div {
        color: #212529 !important;
    }

    .kns-footer a:not(.btn) {
        color: #0d6efd !important;
    }

    .kns-footer hr {
        border-top: 1px solid #dee2e6 !important;
        opacity: 1 !important;
    }