/*FINAL UPDATE: 12/05/2025 (ALLEN)*/

/*COLOR PALETTE*/
:root {
    --bg-top-bar: #46a5e5;
    --bg-nav-footer: #899197;
    --bg-bottom-bar: #182945;
    --bg-public-nav: #182945;
    --bg-public-nav-hover: #2c4b7e;
    --ft-dark: #182945;
    /*AUTHENTICATED*/
    --auth-navigation-bg: #899197; /*X*/
    --auth-navigation-btn-hover: #5d6669; /*X*/
}
/*VARIABLE SAMPLE: var(--type-header-dark)*/

html {
    font-size: 14px;
    background-color: var(--bg-bottom-bar);
}

    @media (min-width: 768px) {
      html {
        font-size: 16px;
      }
    }

/*FOR CUSTOM FOCUS OUTLINES ON INTERACTIVE ELEMENTS, MAKING THEM MORE VISIBLE AND STYLED CONSISTENLY.*/
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    --bs-body-font-family: 'Roboto', sans-serif;
    font-family: var(--bs-body-font-family);
}

/*FLOAT PLACEHOLDER RIGHT*/
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

/*ON FOCUS: MOVE PLACEHOLDER LEFT*/
/*ON FOCUS: MOVE LABEL INSIDE OF FIELD*/
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/*REQUIRED FIELDS (ADDS ASTERISK)*/
label.required::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: 600;
}

/* TOP BAR */
.top-bar {
    background-color: var(--bg-top-bar);
    color: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    padding: 0.35rem 0;
}

    .top-bar .nav {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 1rem;
        line-height: 1.2;
    }

    .top-bar .header-link {
        display: inline-block;
        padding: 0.15rem 0;
        text-decoration: none;
        transition: text-decoration 0.2s ease-in-out;
        line-height: 1;
    }

        .top-bar .header-link,
        .top-bar .header-link:visited,
        .top-bar .header-link:hover,
        .top-bar .header-link:active {
            color: #ffffff;
        }

            .top-bar .header-link:hover,
            .top-bar .header-link:focus {
                text-decoration: underline;
            }

    .top-bar .pipe {
        padding: 0 4px;
        font-size: 0.875rem;
        opacity: 0.6;
        line-height: 1;
        user-select: none;
    }

@media (max-width: 767.98px) {
    .top-bar {
        display: none;
    }
}

/* ============================================
   BASE NAVIGATION (Public + Auth)
   ============================================ */
.site-navigation {
    background-color: var(--bg-public-nav) !important;
    padding: 0;
}

    .site-navigation .container-fluid {
        padding-left: 1.20rem !important;
    }

    /* DIVISION ICON */
    .site-navigation .navbar-brand {
        margin: -4px 0 0 0; /*HACK*/
        padding: 0;
    }

    .site-navigation .clhf-icon {
        display: inline-block;
        background-color: transparent;
        border: 1px solid #ffffff;
        color: #ffffff;
        font-weight: bold;
        font-size: 1rem;
        padding: 0 .35rem;
        margin: .25rem .75rem 0 0;
        border-radius: 4px;
        text-decoration: none;
    }

    /* MOBILE MENU ICON */
    .site-navigation .navbar-toggler:focus,
    .site-navigation .navbar-toggler:active:focus {
        box-shadow: none !important;
        outline: none;
    }

    .site-navigation .navbar-toggler .close-icon {
        display: none;
        font-size: 1.5rem;
        color: #ff0000;
    }

    .site-navigation .navbar-toggler.collapsed .navbar-toggler-icon {
        display: inline-block;
    }

    .site-navigation .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
        display: none;
    }

    .site-navigation .navbar-toggler:not(.collapsed) .close-icon {
        display: inline-block;
    }

    .site-navigation .navbar-collapse {
        background-color: var(--bg-public-nav) !important;
    }

    /* ============================================
       BUTTON / NAV LINKS
       ============================================ */
    .site-navigation .nav-link.btn-nav {
        display: inline-block;
        background-color: var(--bg-public-nav);
        color: #ffffff !important;
        padding: .7rem .8rem;
        transition: background-color 0.3s ease-in-out;
        text-decoration: none !important;
    }

        .site-navigation .nav-link.btn-nav:hover,
        .site-navigation .nav-link.btn-nav:focus {
            background-color: var(--bg-public-nav-hover);
            color: #ffffff !important;
        }

    /* Force all nav text to white (Public + Auth) */
    .site-navigation .nav-link,
    .site-navigation .dropdown-toggle,
    .site-navigation .dropdown-item {
        color: #ffffff !important;
    }

    /* ============================================
       DROPDOWN MENU
       ============================================ */
    .site-navigation .dropdown-menu {
        background-color: var(--bg-public-nav);
        border: 0;
        margin: 0;
        border-radius: 0;
        --bs-dropdown-padding-y: 0;
    }

    /* Match dropdown items to .btn-nav height */
    .site-navigation .dropdown-item.btn-nav {
        padding: .7rem .8rem !important;
        background-color: var(--bg-public-nav);
    }

        .site-navigation .dropdown-item.btn-nav:hover {
            background-color: var(--bg-public-nav-hover) !important;
            color: #ffffff !important;
        }

    /* Disabled dropdown items */
    .site-navigation.auth .dropdown-item.disabled {
        color: #000000;
        pointer-events: none;
        background-color: transparent;
    }

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 767.98px) {

    .site-navigation {
        padding-top: .78rem;
        padding-bottom: .75rem;
    }

        .site-navigation .clhf-icon {
            padding: .38rem .35rem;
        }

        .site-navigation .navbar-nav {
            margin-top: .5rem;
        }

            .site-navigation .navbar-nav .nav-link {
                padding-left: 1rem;
                display: block;
            }

        /* Auth-specific mobile tweaks */
        .site-navigation.auth.navbar {
            padding-top: .35rem;
            padding-bottom: .35rem;
        }

        .site-navigation.auth .navbar-toggler {
            margin-left: .40rem;
        }

        .site-navigation.auth .dropdown-menu.show {
            margin-left: .5rem;
        }

        /* Only font-size override — padding now controlled by .btn-nav */
        .site-navigation.auth .dropdown-item {
            font-size: 1.05rem;
        }
}

.facility-banner {
    background-color: #198754;
    border-bottom: 2px solid rgba(0,0,0,0.15);
    color: #ffffff;
    text-align: center;
    display: flex;
    align-items: center; /* vertically centers text */
    justify-content: center;
    height: 46px; /* matches navbar height */
}
    .facility-banner p {
        margin: .5rem 0;
        font-weight: 400;
    }

/*MAIN*/
main {
    padding: 1rem 0.35rem 0.35rem 0.35rem;
}

main a {
    text-decoration: underline;
}

    main a:hover {
        text-decoration: none;
    }

    main a:focus-visible {
        outline: 2px solid #005fcc;
        outline-offset: 2px;
    }

.company-logo svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/*PAGE TITLE*/
h1 {
    font-size: 1.6rem;
    font-weight: 400;
    margin-top: .55rem;
    margin-bottom: .75rem;
    color: var(--ft-dark);
}

/*H2 PAGE SUBTITLE*/
.page-subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: -.85rem;
    margin-bottom: .75rem;
    margin-left: .25rem;
    color: var(--ft-dark);
}

/*PARAGRAPGH HEADING*/
h3 {
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 1.25rem;
    margin-bottom: .25rem;
    color: var(--ft-dark);
}

/*TABLE HEADER LINK*/
.table thead a {
    text-decoration: underline;
}

    .table thead a:hover,
    .table thead a:focus {
        text-decoration: none;
    }

/*ACTION TABLES*/
/*1ST COLUMN WITH DOWNLOAD LINK*/
.table-action {
    table-layout: auto;
}

    /*ACTION COLUMN*/
    table.table-action td.col-action {
        width: 1%;
        white-space: nowrap;
        padding-left: .5rem;
        padding-right: 0;
    }

        /*KEEP THE FORM FROM STRETCHING*/
        .table-action td.col-action form {
            display: inline-block;
        }

/*DATA TABLES*/
/*FOR FACILITY LISTS, SEARCH RESULTS, REPORTS*/
.table-data {
    table-layout: auto;
}

/*ADMIN TABLES*/
/*FOR DASHBOARDS, INTERAL TOOLS, 4-8 COLUMMS*/
.table-admin {
    table-layout: fixed;
    font-size: .875rem;
}

.resource-sort-link {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}

    .resource-sort-link:hover {
        color: #fff;
        text-decoration: none;
    }

/*MISCELLANEOUS*/
.bg-custom-lite {
    background-color: #ededed;
}

.no-records {
    background-color: #e7f1ff !important;
    /*color: #6c757d;  Bootstrap muted tone */
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-size: 1rem;
    color: var(--ft-dark);
}

    .no-records i {
        margin-right: 0.25rem;
    }

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

    .form-check-input {
        transform: scale(1.4);
        margin-top: 0.2rem;
    }


/*NAVIGATION FOOTER*/
.nav-footer {
    background-color: var(--bg-nav-footer);
    color: #ffffff;
    padding: 1.35rem .35rem 1rem .35rem;
    font-size: .9rem;
}

.nav-footer a {
    color: inherit;
    text-decoration: none;
}

    .nav-footer a:hover,
    .nav-footer a:focus {
        text-decoration: underline;
    }

.nav-footer .pipe {
    padding: 0 4px;
    font-size: 0.875rem; /*14px*/
    opacity: 0.6;
    line-height: 1;
    user-select: none;
}

.nav-footer .heading {
    display: block;
    font-size: 1rem;
    margin: 0 0 .25rem 0;
    font-weight: 700;
    line-height: 1.2;
}

    .nav-footer .no-link {
        color: #000;
    }

    .nav-footer .first-col {
        padding-left: 0;
        line-height: 1.3rem;
    }

        .nav-footer .first-col .company-logo {
            margin-bottom: .25rem;
        }

    .nav-footer .social-link {
        display: inline-block;
        margin-top: .75rem;
        padding: 0;
    }

    .nav-footer .social-icon {
        display: block;
        width: 24px;
        height: 24px;
    }

@media (max-width: 878px) {
    .nav-footer {
        display: block;
    }

        .nav-footer .mid-col,
        .nav-footer .last-col {
            padding-left: 0;
            padding-top: .75rem;
        }
}

/*BOTTOM BAR*/
.bottom-bar {
    background-color: var(--bg-bottom-bar);
    color: #ffffff;
    padding: 0.35rem;
    font-size: 0.875rem; /*14px - cleaner for footer*/
}

    .bottom-bar .footer-link {
        text-decoration: none;
        padding: 0.35rem;
        transition: text-decoration 0.2s ease-in-out;
    }

        .bottom-bar .footer-link,
        .bottom-bar .footer-link:visited,
        .bottom-bar .footer-link:hover,
        .bottom-bar .footer-link:active {
            color: #ffffff;
        }

            .bottom-bar .footer-link:hover,
            .bottom-bar .footer-link:focus {
                text-decoration: underline;
            }

@media (max-width: 768.98px) {
    .bottom-bar {
        padding-bottom: 2rem !important;
    }
        .bottom-bar .container-fluid {
            flex-direction: column;
        }
}

/*COOKIES*/
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050 !important;
    opacity: 0;
    animation: fadeIn 1.5s ease-in forwards;
}
    /*COOKIES*/
    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }

/*PROCESSING*/
#processing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

    #processing-overlay.active {
        display: flex;
        opacity: 1;
    }

        .overlay-content {
            text-align: center;
        }

            #processing-spinner {
                display: none;
                opacity: 0;
                transition: opacity 0.3s ease-in;
            }

                #processing-spinner.active {
                    display: block;
                    opacity: 1;
                }

/*HACK: TO FIX MOBILE FIELD HIGHLIGHTING*/
.form-floating .form-control {
    overflow: hidden;
}
    @media (max-width: 767.98px) {

        /* Stop iOS zooming */
        input,
        textarea,
        select {
            font-size: 16px !important;
        }

        /* Remove iOS hidden focus padding */
        .form-control:focus,
        .btn:focus {
            outline: 1px solid #258cfb;
            outline-offset: 0;
            box-shadow: none !important;
        }

        /* Prevent input-group overflow */
        .input-group {
            overflow: hidden;
        }
    }



/*TABLES**/
.auto-expand {
    overflow: hidden;
    resize: none;
}


/*APPLICATION STATUS BAR*/
.app-status-bar {
    background-color: #2c2c2c;
    padding: .5rem 1rem;
    color: white;
}

.app-status-bar-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem 0;
}

.app-status-bar-title {
    font-size: 1rem;
    font-weight: normal;
}

    .app-status-bar-title .step {
        font-size: .9rem;
        opacity: .85;
        margin-left: .2rem;
    }

.app-status-bar-actions {
    display: flex;
    gap: .5rem;
    margin-left: auto; /*KEEP BUTTON TO THE RIGHT*/
}

.app-section-title {
    font-size: 1.1rem;
    font-weight: 400;
    color: #2c2c2c;
    margin: 1rem 0 .5rem .25rem;
}

/*CAP STATUS BAR*/
.cap-header {
    background: #f8f9fa;
    border: 1px solid #e1e1e1;
    padding: .75rem 1rem;
    border-radius: 4px;
}

.cap-header-left h5 {
    font-weight: 500;
    color: #2c2c2c;
}

    .cap-header-left p {
        margin-top: .25rem;
        margin-bottom: 0; /* IMPORTANT */
    }

.cap-header-right {
    min-width: 220px;
    padding-bottom: 0; /* IMPORTANT */
}

@media (max-width: 991.98px) {
    .cap-header {
        padding: .75rem .75rem;
    }

    .cap-header-right {
        text-align: left !important;
        margin-left: 0 !important;
        min-width: auto;
        width: 100%;
    }

    .cap-header-left {
        width: 100%;
    }

    .cap-header .d-flex {
        align-items: flex-start !important;
    }
}