:root {
    --enneasoft-red: #96181B;
}

html {
  font-size: 14px;
}

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

.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 {
  margin-bottom: 60px;
}

/*---- enneatime hours validation view */

.row-readonly {
    opacity: 0.7;
    pointer-events: none;
    background-color: #f5f5f5;
}

.hour-input {
    max-width: 6rem;
    display: inline-block;
}

#hoursTable th.sortable {
    cursor: pointer;
    user-select: none;
}

#hoursTable th.sortable .sort-ind {
    opacity: .6;
    margin-left: .25rem;
}
/*-----------*/

/*Bootstrap override*/

.btn-primary {
    background-color: var(--enneasoft-red);
    border: solid 1px var(--enneasoft-red);
}

    .btn-primary:hover {
        opacity: 0.9;
        background-color: var(--enneasoft-red);
        border: solid 1px var(--enneasoft-red);
    }

.form-control:focus {
    border-color: gray; 
    box-shadow: 0 0 0 0.25rem rgb(167 167 167 / 25%); 
    outline: none;
}

.modal-content-fit .modal-content {
    width: auto;
    display: inline-block;
    max-width: 90vw; /* Limit max width for very large content */
}

.modal-content-fit {
    display: inline-flex;
}

/* Target the second modal’s backdrop */
.modal-backdrop.second-backdrop {
    z-index: 1060; /* between first modal and second modal */
}

/* Target second modal specifically */
#globalSecondModal {
    z-index: 1065; /* above first modal */
}

.blockUI{
    z-index: 1090;
}

.ui-autocomplete {
    z-index: 1066 !important; 
    position: absolute;
}

/*background of disabled inputs */
.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef52;
    opacity: 1;
}

.form-select:disabled {
    background-color: #e9ecef52;
}

.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
    opacity: .9;
}


th.sortable {
    cursor: pointer;
}
    th.sortable::after {
        content: "\25B2"; /* ▲ (up triangle) */
        display: inline-block;
        width: 1em; 
        margin-left: 4px;
        font-size: 0.7em;
        visibility: hidden; 
    }

    /* Show icon when sorted ascending */
    th.sortable.asc::after {
        visibility: visible;
        transform: rotate(0deg);
    }

    /* Show icon when sorted descending (flip it) */
    th.sortable.desc::after {
        visibility: visible;
        transform: rotate(180deg);
    }


.js-sortable-table {
    table-layout: fixed;
    width: 100%;
}