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

Tracker CORE main CSS file.

Please comment the purpose of any styles that you add here! 

Please note!  Bootstrap 4 has a lot of helper classes!  You may want to use
those instead of adding classes for simple things!  For example, the footer needs a white
background... use bg-white.  Think if it needs to be global or specific.

Surround any Tracker CORE opnionated themese with .tracker-core so you can switch it off if you need to.

Any VEIC created classes should have a trk- prefix.

============================================================================ */
:root {
    --veic-main-color: #004564;
    --veic-secondary-color: #FF9D00;
}

/* Always show the vertical scroll bar 
    so the page width does not change when you navigate to a page that has little vertical content. */
body {
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Show a green bar at the top of cards.  Force cards to have a white background. */
.tracker-core .card {
    background-color: white;
    border-top: 4px solid var(--veic-main-color);
    margin-top: 15px;
}

.btn-primary {
    color: #fff !important;
    background-color: var(--veic-main-color) !important;
    border-color: color-mix(in srgb, var(--veic-main-color) 90%, black) !important;
}

    /* Hover: darken both background and border */
    .btn-primary:hover {
        background-color: color-mix(in srgb, var(--veic-main-color) 80%, black) !important;
        border-color: color-mix(in srgb, var(--veic-main-color) 70%, black) !important;
    }

    /* Focus: even darker for emphasis */
    .btn-primary:focus,
    .btn-primary.focus {
        background-color: color-mix(in srgb, var(--veic-main-color) 70%, black) !important;
        border-color: color-mix(in srgb, var(--veic-main-color) 60%, black) !important;
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--veic-main-color) 50%, transparent);
    }

    .btn-primary:disabled,
    .btn-primary.disabled {
        color: var(--veic-main-color) !important;
        background-color: color-mix(in srgb, var(--veic-main-color) 10%, white) !important;
        border-color: color-mix(in srgb, var(--veic-main-color) 30%, white) !important;
        opacity: 1 !important;
        cursor: not-allowed !important;
    }

.btn-outline-primary {
    color: var(--veic-main-color) !important;
    background-color: transparent !important;
    border-color: color-mix(in srgb, var(--veic-main-color) 90%, black) !important;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        color: #fff !important;
        background-color: var(--veic-main-color) !important;
        border-color: var(--veic-main-color) !important;
    }

    .btn-outline-primary:active,
    .btn-outline-primary.active {
        color: #fff !important;
        background-color: color-mix(in srgb, var(--veic-main-color) 80%, black) !important;
        border-color: color-mix(in srgb, var(--veic-main-color) 70%, black) !important;
    }

    .btn-outline-primary:disabled,
    .btn-outline-primary.disabled {
        color: #b9b9b9 !important;
        background-color: transparent !important;
        border-color: #b9b9b9 !important;
    }

.tracker-core .text-bg-info {
    color: #fff !important;
    background-color: color-mix(in srgb, var(--veic-main-color) 50%, white) !important;
}

/* Show tabs with nice green border tops like the cards. */
.tracker-core .nav.nav-tabs .nav-link.active {
    border-top: 4px solid var(--veic-main-color);
    padding-bottom: 5px;
}

.tracker-core header {
    background-color: white;
    padding: 1rem 0;
}

.tracker-core main#cards {
    background-color: #dfe3e7;
    padding: 1rem 0;
}

.tracker core section#tabs {
    background-color: white;
    padding: 1rem 0;
    display: none;
}

/* For pages without much content, make the main area 100% view height - hegith of navbar (58) and footer (48) 
    The number is purposely off a little to force the scroll bar to appear.
    JI 2018-03-20 commented out - main should not have nested sections
main {
    min-height: calc(100vh - 100px);
}
*/

/* All labels should be visually muted.  Let the data speak for itself.  The label is just a helper. */
/* This was styled a bit after the JIRA class called 'name' for name value pairs. */
.tracker-core label,
.tracker-core dt,
.tracker-core .trk-label,
.tracker-core th {
    font-size: 85%;
    font-weight: 400;
    color: #595959 !important;
    margin-bottom: 0;
}

/* display row as inactive. */
.tracker-core .table-inactive td {
    color: #b9b9b9;
}
/* BEGIN: Tracker CORE core entity accent colors */
/* ============================================= */

/* Project */
.tracker-core.trk-project .card, .tracker-core.trk-project .nav.nav-tabs .nav-link.active {
    border-top: 4px solid var(--veic-main-color);
}

.tracker-core.trk-project .spinner, .trk-project-color {
    color: var(--veic-main-color);
}
/* Workload Tools */
.tracker-core.trk-workloadtools .card, .tracker-core.trk-workloadtools .nav.nav-tabs .nav-link.active {
    border-top: 4px solid var(--veic-main-color);
}

.tracker-core.trk-workloadtools .spinner, .trk-workloadtools-color {
    color: var(--veic-main-color);
}

/* Site */
.tracker-core.trk-site .card, .tracker-core.trk-site .nav.nav-tabs .nav-link.active {
    border-top: 4px solid var(--veic-main-color);
}

.tracker-core.trk-site div.spinner, .trk-site-color {
    color: var(--veic-main-color);
}

/* Measure */
.tracker-core.trk-measure .card, .tracker-core.trk-measure .nav.nav-tabs .nav-link.active {
    border-top: 4px solid var(--veic-main-color);
}

.tracker-core.trk-measure .fa-cube {
    color: var(--veic-main-color);
}

/* Company */
.tracker-core.trk-company .card, .tracker-core.trk-company .nav.nav-tabs .nav-link.active {
    border-top: 4px solid var(--veic-main-color);
}

.tracker-core.trk-company div.spinner, .trk-company-color {
    color: var(--veic-main-color);
}
/* Utility Customer */
.tracker-core.trk-utilitycustomer .card, .tracker-core.trk-utilitycustomer .nav.nav-tabs .nav-link.active {
    border-top: 4px solid var(--veic-main-color);
}

.tracker-core.trk-utilitycustomer div.spinner, .trk-utilitycustomer-color {
    color: var(--veic-main-color);
}
/* Building */
.tracker-core.trk-building .card, .tracker-core.trk-building .nav.nav-tabs .nav-link.active {
    border-top: 4px solid var(--veic-main-color);
}

.tracker-core.trk-building div.spinner, .trk-building-color {
    color: var(--veic-main-color);
}
/* Person */
.tracker-core.trk-person .card, .tracker-core.trk-person .nav.nav-tabs .nav-link.active {
    border-top: 4px solid var( --veic-secondary-color);
}

.tracker-core.trk-person div.spinner, .trk-person-color {
    color: var( --veic-secondary-color);
}

/* ============================================= */
/*   END: Tracker CORE core entity accent colors */
/* BS4 puts a line on top of the table.  When you have a table in a tab pane, the lines conflict with the tab pane lines.  */
/* JI I don't like this because someties you want the border and this is a sledgehammer approach use .table-notopborder instead */
.tracker-core .table th {
    border-top: none;
}

/* Styling for addresses that use wards (DC) */
.tracker-core .trk-ward {
    font-weight: bold;
}

/* reproduce the BS form field validation classes with jQuery validation selectors */
.form-control.input-validation-error {
    border-color: #dc3545;
}

    .form-control.input-validation-error:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

.field-validation-error {
    color: #dc3545;
}

.validation-summary-valid.alert {
    display: none;
}

/* remove table borders */
.table-borderless th, .table-borderless td {
    border: none;
    line-height: 1;
}

.table-notopborder > thead > tr:first-child > th, .table-notopborder > tbody > tr:first-child > td {
    border-top: none;
}

/* DataTables */
table.dataTable {
    border-collapse: collapse !important;
}

div.dataTables_filter {
    text-align: left !important;
}

div.dataTables_info {
    text-align: right !important;
}

.tracker-core .dt-paging-button.page-item.active > .page-link {
    background-color: var(--veic-main-color) !important;
    border-color: color-mix(in srgb, var(--veic-main-color) 90%, black) !important;
}

/* readonly alert style with same background color as BS .formcontrol[readonly] to notify users that sections of a form are readonly */
.trk-alert-readonly {
    background-color: #e9ecef;
}

input[readonly],
textarea[readonly],
select[readonly] {
    background-color: #e9ecef;
}

.trk-required {
    font-weight: bold;
    color: #ed1c24;
}
/* Format hyperlinks 
*/
div.trkr-file-link-display a::before {
    content: "\a• ";
    white-space: pre;
}

div.trkr-file-link-display a::after {
    content: "\000A";
    white-space: pre;
}

.tracker-core a, .tracker-core .btn-link {
    text-decoration: none
}
    .tracker-core a:hover, .tracker-core .btn-link:hover {
        text-decoration: underline
    }

/* Give a visual indicator that a element has a title attribute.
    In the future we can do something to make this work for touch as well.
*/
label[title], span[title], div[title], button[title] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
}

/* select doesn't support readonly, disable options and use a readonly class */
select.readonly {
    background-color: #e9ecef;
    opacity: 1;
    pointer-events: none;
}

input[type=checkbox].readonly, input[type=checkbox].readonly + label.form-check-label {
    color: #6c757d;
    pointer-events: none;
}
/* hover support for displaying row contextual buttons.  See linking of entities. */
.table-hover > tbody > tr .show-on-hover {
    visibility: hidden
}

.table-hover > tbody > tr:hover .show-on-hover {
    visibility: visible
}

.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}

/* datatables buttons smaller in stature. */
div.dt-buttons > .btn {
    line-height: 1;
}

/* The normal bootstrap bg classes have a very dark color which makes reading text hard.  
    Here are some additional classes with a lighter color for subtle text background shading. */
.bg-primary-light {
    background-color: rgb(234, 250, 255);
}

.bg-secondary-light {
    background-color: rgb(249, 249, 249);
}

.bg-success-light {
    background-color: rgb(231, 255, 231);
}

.bg-danger-light {
    background-color: rgb(255, 239, 242);
}

.bg-warning-light {
    background-color: rgb(255, 255, 244);
}

/* make text wrapping tighter in tables (default is 150%) */
table td, table th {
    line-height: 130%;
}

/* Swap the toggle text for BS 4 collapse componenets https://stackoverflow.com/a/31967516/1804678 */
[data-bs-toggle="collapse"].collapsed .if-not-collapsed,
[data-bs-toggle="collapse-all"].collapsed .if-not-collapsed {
    display: none;
}

[data-bs-toggle="collapse"]:not(.collapsed) .if-collapsed,
[data-bs-toggle="collapse-all"]:not(.collapsed) .if-collapsed {
    display: none;
}

/* Bold the active navbar item */
.navbar-nav li a.active {
    background-color: rgb(255, 158, 24);
    border-radius: 5px;
    font-weight: bold;
}

/* Begin HTMX Enhancements */

/*
    HTMX Use Case: Completely hide the spinner.
    The htmx-request class is added to elements temporarily during an HTMX request.
    The built-in htmx-indicator class uses opacity to show an element (spinner) during the HTMX request.
    If you want to use display:none instead, use the htmx-indicator-d class as shown below.
    This class is used by _HtmxSpinner.cshtml and FullPageSpinner.cshtml.
    Reference: https://htmx.org/attributes/hx-indicator/
*/
.htmx-indicator-d {
    display: none;
}

.htmx-request .htmx-indicator-d {
    display: block;
}

.htmx-request.htmx-indicator-d {
    display: block;
}
/* End HTMX Enhancements */

/* Give a disabled table row a gray appearance. */
.tracker-core tr.disabled>td {
    background-color: rgba(0, 0, 0, .075) !important;
}

/* For forms that use inline-edit and the fieldset is disabled (display mode), show disabled inputs as more like spans. */
fieldset[data-in-edit-mode="enable"]:disabled input,
fieldset[data-in-edit-mode="enable"]:disabled select,
fieldset[data-in-edit-mode="enable"]:disabled textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: initial;
}

/* With the Bootstrap 5 upgrade, it was identified that some of Tracker's buttons were being overlaid by JavaScript DataTables, preventing users from clicking on them. 
   To restore button functionality, a z-index has been added here. */
.tracker-button-overlay-datatable {
    position: relative;
    z-index: 10;
}

/* The Project Estimates Modal is unique in that the form becomes more distorted as the screen size decreases. 
    This code prevents the modal from becoming too small as the screen size gets smaller. */
@media (max-width: 1200px) {
    .project-estimates-modal {
        max-width: 95% !important;
    }
}