﻿
/******   Dark Mode   *******/
:root {
    --msi-navy-blue: #1B365D;
    --msi-techy-teal: #6F9BA4;
    --msi-green-apple: #A4D65E;
    --msi-builder-white: #FFFFFF;
    --msi-accent-coastal-mist: #BBDDE6;
    --msi-accent-keller-kiwi: #C2E189;
    --msi-accent-premium-black: #373A36;
    --msi-accent-future-fog: #54585A;
}
body.dark-theme {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    background-color: #121212;
}

.dark-theme .card {
    border: solid thin #353535;
}
.dark-theme h3,
.dark-theme h1{
    color: #c1c1c1;
}

.dark-theme #headingOne {
    background-color: #181818;
    color: #c1c1c1;
    border: none;
}


/*nav side bar*/

.dark-theme .btn-secondary {
    background-color: #4a4a4a;
    color: #c1c1c1;
    border: solid thin #5a5a5a;
}

    .dark-theme .btn-secondary:focus,
    .dark-theme .btn-secondary.focus {
        background-color: #4a4a4a;
        color: #c1c1c1;
        border: solid thin #5a5a5a;
    }

    .dark-theme .btn-secondary:hover {
        background-color: #5a5a5a;
        color: #c1c1c1;
        border: solid thin #5a5a5a;
    }

    .dark-theme .show > .dropdown-toggle.btn-secondary {
        background-color: #222222;
        color: #c1c1c1;
        border: solid thin #353535;
    }


.dark-theme .btn-secondary,
.dark-theme .dropdown-menu {
    background-color: #222222;
    color: #c1c1c1;
}

.dark-theme .dropdown-menu > li > a,
.dark-theme .dropdown-menu .dropdown-item {
    color: #c1c1c1;
}

.dark-theme .dropdown-menu > li > a:hover,
.dark-theme .dropdown-menu .dropdown-item:hover {
    background-color: #1e1e1e;
    color: #c1c1c1;
}


/*form on homepage "policy search"*/

.dark-theme .required-group {
    background-color: #222222;
    border: solid thin #353535;
    color: #c1c1c1;
}

.dark-theme .form-signin-heading {
    color: #c1c1c1;
}

/* footer */

.dark-theme .footer {
    background-color: #222222;
}

.dark-theme .text-muted {
    --bs-secondary-color: #999999;
    --bs-secondary-rgb: 153, 153, 153;
    color: #999999 !important;
}

.dark-theme .footer,
.dark-theme .footer div,
.dark-theme .footer p {
    color: #999999;
}

.dark-theme .input-group-text {
    background-color: #1d1d1d;
    border: solid thin #353535;
}

.dark-theme .modal-dialog modal-lg,
.dark-theme .modal-header,
.dark-theme .modal-body,
.dark-theme .modal-content {
    background-color: #181818;
    color: #c1c1c1;
    border-bottom: 1px solid #353535;
}

.dark-theme .modal-footer {
    border-top: 1px solid #353535;
}

/*prevents autofill from changing background color of form fields*/
.dark-theme input:-webkit-autofill,
.dark-theme textarea:-webkit-autofill,
.dark-theme select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #222222 inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 600000s 0s, color 600000s 0s;
}


.dark-theme .form-control {
    border-color: #353535;
}

.dark-theme .form-control {
    /*background-color: #141414;*/
    background-color: #222222;
    border: solid thin #303030;
    color: #c1c1c1;
}

    .dark-theme .form-control[readonly],
    .dark-theme .form-control:disabled,
    .dark-theme .form-select[readonly],
    .dark-theme .form-select:disabled,
    .dark-theme select.form-control[readonly],
    .dark-theme select.form-control:disabled {
        background-color: #141414;
        border: solid thin #212121;
        color: #888888;
    }

    /* Mute the dropdown chevron on disabled/readonly selects in dark theme too (bugs 102680, 102701) */
    .dark-theme .form-select[readonly],
    .dark-theme .form-select:disabled,
    .dark-theme select.form-control[readonly],
    .dark-theme select.form-control:disabled {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23555555' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

.dark-theme .form-control::placeholder {
    color: #888888;
    opacity: 1;
}

.dark-theme .invalid-signin {
    color: #e0a0a0;
}

.dark-theme .alert,
.dark-theme .alert-info,
.dark-theme .alert-danger {
    background-color: #4a2d2d;
    border: solid thin #353535;
    color: #c1c1c1;
}

.dark-theme .dropdown-menu {
    color: #c1c1c1;
}

/* Links - use a visible blue color that works on both dark and light backgrounds */
.dark-theme a {
    color: #6ea8fe;
}

.dark-theme a:hover {
    color: #8bb9fe;
}

/* Override bg-light for dark theme - replaces old .well styling */
.dark-theme .bg-light {
    background-color: #1e1e1e !important;
    color: #c1c1c1;
}

/* Ensure borders on "well" style containers are visible in dark mode */
.dark-theme .bg-light.border {
    border-color: #353535 !important;
}

.dark-theme #countyCodeList,
.dark-theme #cityList,
.dark-theme #zipCodeList {
    background-color: #141414;
}
.dark-theme .card-header {
    background-color: #222222;
    border: solid thin #353535;
    color: #c1c1c1;
}


.dark-theme hr {
    border: 1px solid #353535;
}

.dark-theme .progress {
    background-color: #181818;
}


.dark-theme .card-body {
    background-color: #121212;
    border-top: none !important;
    color: #c1c1c1;
}

.dark-theme .mimic-hyperlink-text {
    color: #1818b5;
}

/* Dark Theme buttons */

.dark-theme .btn-primary {
    background-color: #2b5275;
    border-color: #2b5275;
    color: #e0e0e0;
}

    .dark-theme .btn-primary:hover {
        background-color: #203d57;
        border-color: #203d57;
    }

.dark-theme .btn-info {
    background-color: #3d8499;
    border-color: #3d8499;
    color: #e0e0e0;
}

    .dark-theme .btn-info:hover {
        background-color: #2a5c6a;
        border-color: #2a5c6a;
    }

.dark-theme .btn-warning {
        background-color: #b58541;
        border-color: #b58541;
        color: #e0e0e0;
    }
    .dark-theme .btn-warning:hover {
        background-color: #a36e24;
        border-color: #a36e24;
    }
.dark-theme .btn-danger {
    background-color: #a6312d;
    border-color: #a6312d;
    color: #e0e0e0;
}


.dark-theme .btn-success {
    background-color: #2d612d;
    border-color: #2d612d;
    color: #e0e0e0;
}

    .dark-theme .btn-danger:hover {
        background-color: #7a2522;
        border-color: #7a2522;
    }

.dark-theme .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

        /* dark mode toggle btn */
.dark-theme .btn-toggle {
    background-color: #222222;
    border: solid thin #353535;
    color: #c1c1c1;
    border: none;
    padding: 0 !important;
    font-family: arial, sans-serif;
    cursor: pointer;
    padding: 3px 20px;
}
    .dark-theme .btn-toggle:hover {
        background-color: #1e1e1e;
    }

        /* cancel / close / plain buttons */

.dark-theme .btn-cancel,
.dark-theme .modal .btn:not(.btn-primary):not(.btn-info):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-secondary):not(.btn-close) {
    background-color: #4a4a4a;
    border: solid thin #5a5a5a;
    color: #c1c1c1;
}

.dark-theme .btn-cancel:hover,
.dark-theme .modal .btn:not(.btn-primary):not(.btn-info):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-secondary):not(.btn-close):hover {
    background-color: #5a5a5a;
    border: solid thin #5a5a5a;
    color: #c1c1c1;
}

/* Data Tables */

.dark-theme table.dataTable,
.dark-theme table.dataTable th,
.dark-theme table.dataTable td {
    background-color: #222222;
    border: solid thin #353535;
    color: #c1c1c1;
}
.dark-theme .dataTables_wrapper .dataTables_filter input {
    border: solid thin #353535;
}

.dark-theme .dataTables_wrapper .dataTables_length select {
    border: solid thin #353535;
}

.dark-theme td {
    background-color: #222222;
    border-top: solid thin #353535;
    color: #c1c1c1;
}

.dark-theme th {
    background-color: #222222;
    color: #c1c1c1;
}

.dark-theme .dataTables_wrapper .dataTables_length,
.dark-theme .dataTables_wrapper .dataTables_filter,
.dark-theme .dataTables_wrapper .dataTables_info,
.dark-theme .dataTables_wrapper .dataTables_processing,
.dark-theme .dataTables_wrapper .dataTables_paginate {
    color: #c1c1c1;
}


.dark-theme .table > tbody > tr > td {
    border-top: solid thin #353535;
}

.dark-theme .table-striped tbody tr.highlight td {
    background-color: #1e1e1e;
}

.dark-theme .table {
    border: none;
}

.dark-theme .table-hover tbody tr:hover td,
.dark-theme .table-hover tbody tr:hover th {
    background-color: #1e1e1e;
}

/* calendars */

.dark-theme .fa-calendar {
    color: #c1c1c1;
}

/* Flatpickr dark mode */
.dark-theme .flatpickr-calendar {
    background: #222222;
    border-color: #353535;
    box-shadow: 1px 0 0 #353535, -1px 0 0 #353535, 0 1px 0 #353535, 0 -1px 0 #353535, 0 3px 13px rgba(0,0,0,0.3);
}
.dark-theme .flatpickr-calendar.arrowTop:after { border-bottom-color: #222222; }
.dark-theme .flatpickr-calendar.arrowTop:before { border-bottom-color: #353535; }
.dark-theme .flatpickr-calendar.arrowBottom:after { border-top-color: #222222; }
.dark-theme .flatpickr-calendar.arrowBottom:before { border-top-color: #353535; }
.dark-theme .flatpickr-months .flatpickr-month,
.dark-theme .flatpickr-current-month .flatpickr-monthDropdown-months,
.dark-theme .flatpickr-current-month input.cur-year {
    color: #c1c1c1;
    fill: #c1c1c1;
}
.dark-theme .flatpickr-months .flatpickr-prev-month,
.dark-theme .flatpickr-months .flatpickr-next-month {
    color: #c1c1c1;
    fill: #c1c1c1;
}
.dark-theme .flatpickr-months .flatpickr-prev-month:hover svg,
.dark-theme .flatpickr-months .flatpickr-next-month:hover svg { fill: #6ea8fe; }
.dark-theme span.flatpickr-weekday { color: #888; }
.dark-theme .flatpickr-day {
    color: #c1c1c1;
}
.dark-theme .flatpickr-day:hover,
.dark-theme .flatpickr-day:focus {
    background: #1e1e1e;
    border-color: #353535;
}
.dark-theme .flatpickr-day.today {
    border-color: #6ea8fe;
}
.dark-theme .flatpickr-day.today:hover,
.dark-theme .flatpickr-day.today:focus {
    background: #6ea8fe;
    border-color: #6ea8fe;
    color: #121212;
}
.dark-theme .flatpickr-day.selected,
.dark-theme .flatpickr-day.selected:hover {
    background: #2b5275;
    border-color: #2b5275;
    color: #e0e0e0;
}
.dark-theme .flatpickr-day.flatpickr-disabled,
.dark-theme .flatpickr-day.prevMonthDay,
.dark-theme .flatpickr-day.nextMonthDay {
    color: rgba(193,193,193,0.3);
}
.dark-theme .flatpickr-time input,
.dark-theme .flatpickr-time .flatpickr-time-separator,
.dark-theme .flatpickr-time .flatpickr-am-pm {
    color: #c1c1c1;
}
.dark-theme .flatpickr-time input:hover,
.dark-theme .flatpickr-time .flatpickr-am-pm:hover {
    background: #1e1e1e;
}
.dark-theme .numInputWrapper span {
    border-color: rgba(193,193,193,0.15);
}
.dark-theme .numInputWrapper:hover { background: rgba(255,255,255,0.05); }
.dark-theme .numInputWrapper span.arrowUp:after { border-bottom-color: #c1c1c1; }
.dark-theme .numInputWrapper span.arrowDown:after { border-top-color: #c1c1c1; }
.dark-theme .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: #c1c1c1; }
.dark-theme .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: #c1c1c1; }

/* Sidebar - override light theme sidebar styles for dark mode */
.dark-theme #sidebar-wrapper .btn-secondary {
    color: #c1c1c1;
    background-color: #222222;
    border-color: #353535;
}

.dark-theme #sidebar-wrapper .btn-secondary:hover,
.dark-theme #sidebar-wrapper .btn-secondary:focus {
    color: #c1c1c1;
    background-color: #1e1e1e;
    border-color: #353535;
}

.dark-theme #sidebar-wrapper .btn-secondary:active,
.dark-theme #sidebar-wrapper .btn-secondary.active,
.dark-theme #sidebar-wrapper .btn-secondary.show {
    color: #c1c1c1;
    background-color: #1a1a1a;
    border-color: #353535;
}

.dark-theme #sidebar-wrapper .dropdown-menu > li > a {
    color: #c1c1c1;
}

.dark-theme #sidebar-wrapper .dropdown-menu > li > a:hover {
    background-color: #1e1e1e;
}

/* Sidebar wrapper background for dark mode */
.dark-theme #sidebar-wrapper {
    background-color: #1a1a1a;
}

.dark-theme .sidebar-nav {
    background-color: #1a1a1a;
}

.dark-theme .sidebar-nav.navbar-nav {
    --bs-nav-link-color: #c1c1c1;
    --bs-nav-link-hover-color: #fff;
    background-color: #1a1a1a;
}

/* Dark theme validation border colors */
.dark-theme div.is-invalid > .form-control,
.dark-theme div.is-invalid > .form-select,
.dark-theme div.is-invalid > span > .form-control,
.dark-theme div.is-invalid > span > .form-select,
.dark-theme div.is-invalid > span > span > .form-control,
.dark-theme div.is-invalid .input-group > .form-control,
.dark-theme div.is-invalid .input-group > .form-select,
.dark-theme .input-group.is-invalid > .form-control,
.dark-theme .input-group.is-invalid > .form-select {
    border-color: #ea868f !important;
}

.dark-theme div.is-invalid .input-group > .input-group-text,
.dark-theme .input-group.is-invalid > .input-group-text {
    border-color: #ea868f !important;
    color: #f5c2c7 !important;
    background-color: #58151c !important;
}

.dark-theme div.is-valid > .form-control,
.dark-theme div.is-valid > .form-select,
.dark-theme div.is-valid > span > .form-control,
.dark-theme div.is-valid > span > .form-select,
.dark-theme div.is-valid > span > span > .form-control,
.dark-theme div.is-valid .input-group > .form-control,
.dark-theme div.is-valid .input-group > .form-select,
.dark-theme .input-group.is-valid > .form-control,
.dark-theme .input-group.is-valid > .form-select {
    border-color: #75b798 !important;
}

.dark-theme div.is-valid .input-group > .input-group-text,
.dark-theme .input-group.is-valid > .input-group-text {
    border-color: #75b798 !important;
}

/* Suppress double icon in dark mode too */
.dark-theme .input-group > .form-control.is-invalid,
.dark-theme .input-group > .form-select.is-invalid,
.dark-theme .input-group > .form-control.is-valid,
.dark-theme .input-group > .form-select.is-valid {
    background-image: none !important;
    padding-right: 0.75rem !important;
}

/* Hide green validation checkmark on empty, readonly, and disabled fields in dark mode */
.dark-theme .form-control.is-valid[readonly],
.dark-theme .form-control.is-valid:disabled,
.dark-theme .form-select.is-valid[readonly],
.dark-theme .form-select.is-valid:disabled {
    background-image: none !important;
    border-color: #495057 !important;
}

.dark-theme div.is-valid > .form-control[readonly],
.dark-theme div.is-valid > .form-control:disabled,
.dark-theme div.is-valid > .form-select[readonly],
.dark-theme div.is-valid > .form-select:disabled,
.dark-theme div.is-valid > span > .form-control[readonly],
.dark-theme div.is-valid > span > .form-control:disabled {
    background-image: none !important;
    border-color: #495057 !important;
}

/* BS5: dark theme arrow for select.form-control — uses light gray stroke */
.dark-theme select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
