html, body {
    font-size: 16px;
    height: 100%;
    margin: 10px 10px 60px 10px;
    /* overflow-y: scroll; */ /* show vert scrollbar always so collapsible clicking doesnt cause content to shift */
}

a {
    text-decoration: none; /* dont do ugly underline */
    /*font-weight: normal; */
}

s .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; /* border flash on click */
}

/********** title bar ***********/
.title-bar {
    background-color: #cce5ff; /* common light blue */
    padding: 10px;
    border-radius: 8px; /* common rounding */
    margin: 0px 0px 10px 0px; /* put space after (on bottom) */
    font-size: 2.0rem; /* make bigger */
    display: flex; 
    align-items: center; /* align picture/text */
    gap: 10px;
}

.title-bar-icon {
    width: 40px;
    height: 40px;
    margin-left: 10px;
}

.title-info { /* small info in title bar to show when content is collapsed */
    font-size: .5em; /* slightly smaller*/
    color: dimgray;
    display: none; /* initially hidden */
}

.title-info div {
    display: inline-block; 
    margin-right: 4px; 
}

.info-bar {
    background-color: #e7e7e7; /* Common dark gray */
    border-radius: 8px; /* Common rounding */
    margin: 0 0 10px 0; /* Space after (on bottom) */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of children */
    align-items: flex-start; /* Align content at the start vertically */
    gap: 5px; /* Add spacing between children */
}

.filter-bar {
    background-color: #e7e7e7; /* Common dark gray */
    border-radius: 8px; /* Common rounding */
    margin: 0 0 10px 0; /* Space after (on bottom) */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of children */
    align-items: flex-start; /* Align content at the start vertically */
    gap: 5px; /* Add spacing between children */
}

.filter-bar .form-group {
    display: flex;
    flex-direction: column; /* Stack label and control vertically */
}

.filter-bar .label-sm {
    font-size: 0.85rem; /* Slightly smaller font */
    margin-bottom: 4px; /* Adds space below the label */
    word-wrap: break-word; /* Ensure long text wraps within the container */
}

.filter-bar .form-control-sm {
    font-size: 0.9rem; /* Ensure the select font matches small form controls */
}

.highlight {
    background-color: yellow;
}

/********** table ***********/
table, table th, table td {
    /* border: 1px solid #aaaaaa !important; */ /* common light gray border */
    min-height: 10px !important;
    /* padding: 10px 10px !important; */
    border-collapse: separate; /* ensure borders are combined */
    border-spacing: 0;
}

table th, table td {
    border-right: 1px !important;
    border-bottom: 1px !important;
    border-style: solid !important;
    border-color: #aaaaaa !important;
    padding: 5px !important;
}

table tr:first-child th {
    border-top: 1px !important;
    border-style: solid !important;
    border-color: #aaaaaa !important;
}

table td:first-child {
    border-left: 1px !important;
    border-style: solid !important;
    border-color: #aaaaaa !important;
}

table th[id^="hdr"] {
    background-color: #cccccc !important;
}

table th[id^="subhdr"] {
    background-color: #dddddd !important;
}

table[id="tbl__forecast"] td {
    min-width: 100px;
}

table[id="tbl__forecast"] th {
    text-align: center;
}

.tbl-project-audit-container,
.tbl-forecast-audit-container,
.tbl-forecast-container {
    width: 100%;
    overflow-y: auto;
}


table[id="forecast-audit-table"] td:nth-child(-n+5),
table[id="forecast-audit-table"] tr:first-child th:nth-child(-n+5),
table[id="tbl__forecast"] td:first-child,
table[id="tbl__forecast"] tr:first-child th:first-child,
table[id="tbl__forecast"] td:nth-child(2),
table[id="tbl__forecast"] tr:first-child th:nth-child(2),
table[id="tbl__forecast"] tr:nth-child(2) th:first-child,
table[id="tbl__forecast"] td:nth-child(3),
table[id="tbl__forecast"] tr:nth-child(2) th:nth-child(2),
table[id="tbl__forecast"] td:nth-child(4),
table[id="tbl__forecast"] tr:nth-child(2) th:nth-child(3) {
    position: sticky;
    background-color: #e9ecef; /* for freezing rows/columns, same color as locked textboxes */
/*  background-color: white; this does not work well for freezing rows/columns
    filter: contrast(85%); */
    z-index: 10;
    border-right: 1px !important;
    border-bottom: 1px !important;
    border-style: solid !important;
    border-color: #aaaaaa !important;
}

table[id="tbl__forecast"] td:first-child,
table[id="tbl__forecast"] tr:first-child th:first-child {
    left: 0px; /* Width of the first column */
}

table[id="tbl__forecast"] td:nth-child(2),
table[id="tbl__forecast"] tr:first-child th:nth-child(2),
table[id="tbl__forecast"] tr:nth-child(2) th:first-child {
    left: 200px; /* Width of the first column */
}

table[id="tbl__forecast"] td:nth-child(3),
table[id="tbl__forecast"] tr:nth-child(2) th:nth-child(2) {
    left: 311px; /* Width of first + second column */
}

table[id="tbl__forecast"] td:nth-child(4),
table[id="tbl__forecast"] tr:nth-child(2) th:nth-child(3) {
    left: 422px; /* Width of first + second + third column */
}


table[id="forecast-audit-table"] td:first-child,
table[id="forecast-audit-table"] tr:first-child th:first-child {
    left: 0px; /* Width of the first column */
}

table[id="forecast-audit-table"] td:nth-child(2),
table[id="forecast-audit-table"] tr:first-child th:nth-child(2) {
    left: 60px; 
}

table[id="forecast-audit-table"] td:nth-child(3),
table[id="forecast-audit-table"] tr:first-child th:nth-child(3) {
    left: 260px;
}

table[id="forecast-audit-table"] td:nth-child(4),
table[id="forecast-audit-table"] tr:first-child th:nth-child(4) {
    left: 410px;
}

table[id="forecast-audit-table"] td:nth-child(5),
table[id="forecast-audit-table"] tr:first-child th:nth-child(5) {
    left: 510px;
}

.datepicker .table-condensed { /* for datepicker calendar */
    cursor: pointer;
    text-align: center;
}

table th { /* override bootstrap */
    background-color: #cccccc !important; /* common dark gray */
}

table th a { /* override bootstrap */
    color: #333333 !important; /* dont make ugly blue, use dark gray instead */
}

th.sortable {
    position: relative; /* Ensure positioning for clickable area */
    cursor: pointer;
}

th.sortable a { /* Make the link inside the th span the entire cell */
    display: block; /* Make the <a> tag a block-level element */
    height: 100%; /* Ensure the link takes up the entire height */
    width: 100%; /* Ensure the link takes up the entire width */
    text-align: center; /* Center the text in the header */
    text-decoration: none; /* Optionally, remove the underline */
    padding: 5px; /* Optional padding for better clickable area */
}

th.sortable a:hover {
    background-color: #cccccc !important; /* slightly darker gray */
}

.currency-field, .percent-field, .integer-field {
    text-align: right; /* right-align the text */
}

/********** paging ***********/
li.page-item {
    cursor: pointer;
}

/********** dropdown ***********/
.dropdown-arrow {
    padding-right: 30px; /* Space for the icon */
    position: relative;
    appearance: none; /* Remove default dropdown styling */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 20 20"><polygon points="0,0 20,0 10,10"/></svg>'); /* Down arrow icon */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

/********** collapsible content ***********/
.collapsible-content {
    overflow: hidden; 
    max-height: 2000px; /* has to be very big on max-height for it to work */
    transition: max-height 0.3s ease-in-out; /* Slow down to 0.5 seconds */
    margin: 0px 0px 0px 0px; /* indent? */
    display: block;
}

.collapsible-content.collapsed {
    max-height: 0px; /* rolled up */
}

.collapsible-title:hover {
    filter: contrast(110%); /* highlight during hover */
    cursor: pointer;
}

/********** chart ***********/
.chart-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    text-align: center;
}

.chart-box {
    width: 100%;
    max-width: 400px;
}

/********** icon ***********/
.triangle-char {
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    align-self: flex-start;
    margin-top: 3px; /* Adjust to match checkbox alignment */
}

.action-wrapper {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    gap: 10px; /* Spacing between child elements */
}

.icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0px !important; /* Add spacing between icons */
    margin-left:  0px !important; /* Add spacing between icons */
}

.hover-icon {
    position: relative;
    display: inline-block; /* Ensure the image and the hover effect align properly */
}

.hover-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%; /* Adjust circle size as needed */
    height: 150%;
    border-radius: 50%; /* Makes it a circle */
    background-color: rgba(128, 128, 128, 0.4); /* Soft gray with transparency */
    transform: translate(-50%, -50%) scale(0); /* Start with no circle */
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 0; /* Place it behind the image */
}

.hover-icon:hover::before {
    transform: translate(-50%, -50%) scale(1); /* Show the circle on hover */
    opacity: 1;
}

.hover-icon img {
    display: block;
    position: relative; /* Keeps the image above the pseudo-element */
}

.env-label {
    color: white;
    border-radius: 7px;
    padding: 1px 3px;
    font-size: 12px;
    display: inline-block;
}

.info-box {
    background-color: #eeeeee; /* light gray */
    border-radius: 6px;
    padding: 2px 8px;
    display: inline-block;
    margin: 2px 4px 2px 0;
    font-weight: 500;
    white-space: nowrap;
}