/* Styling for the overall div on the page */
.content-div {
    background-color: white !important;
    border-radius: 10px;
    height: 90vh;
}

.grid-link {
    color: var(--bs-primary);
    text-decoration: underline;
    cursor: pointer;
    flex-direction: row;
    flex: 1 1 auto;
}
div[col-id="Version"] .ag-cell-wrapper, div[col-id="Prospective Customer"] .ag-cell-wrapper {
    width: 100%;
}


/* Styling to have an alert at the top of the page */
.page-alert {
    z-index: 2000;
    position: absolute;
    right: 20px;
    top: 30px;
    max-width: 50%;
}


/* Give buttons the lighter coloring to match wireframe */
.btn {
    padding: 1px 6px 1px 6px;
}
.hide {
    display: none;
}
.unselected-button{
    opacity: 0.5;
    padding: 8px;
}
.btn:hover {
    background-color: var(--bs-blue);
    border-color: var(--bs-blue);
}
.btn.btn-link:hover {
    background-color: transparent !important;
    border-color: transparent !important;
}
.btn-danger:hover {
    background-color: var(--bs-danger-border-subtle);
    border-color: var(--bs-danger-border-subtle);
}
.btn-danger:disabled {
    border-color: transparent;
}
.btn-success:hover {
    background-color: var(--bs-success-border-subtle);
    border-color: var(--bs-success-border-subtle);
}
.btn:disabled {
    background-color: var(--bs-gray-500);
}
.dropdown > button {
    color: var(--bs-gray-600);
    border-width: 1px;
    border-color: var(--bs-gray-400) !important;
    border-radius: 5px;
    background-color: var(--bs-body-bg);
}
.dropdown-toggle::after {
    display:none; /* Remove the caret from the dropdown menus */
}
.dropdown.filter > button {
    color: var(--bs-gray-600);
    border: 0px;
    background-color: white;
}

/* Color for colored buttons */
.color-button {
    background-color: var(--bs-blue);
    border-color: var(--bs-blue);
}
.color-button:hover {
    background-color: var(--bs-primary-border-subtle);
}
.color-link {
    color: var(--bs-blue);
}

/* Shadow */
.shadow {
    box-shadow: 0 2px 4px var(--bs-border-color-translucent);
}

/* Styling for modals */
.modal-footer-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-component {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.modal-content {
    background-color: white !important;
}

/* Putting a spinner on top of content for loading */
.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.7); /* Slight background tint */
    z-index: 2000; /* Ensure it is above other content */
}

/* Place items on a single row in a div */
.single-row {
    display: flex;
    gap: 8px;
    align-items:center;
}

/* Gray for lighter text like subheaders */
.light-text {
    color: var(--bs-gray-600);
}

/* Custom style for inactive tab text */
.nav-tabs .nav-link {
    color: var(--bs-gray-600); /* Set text color for inactive tabs */
}

/* Styling for buttons in the overall header */
.header-button {
    border-width: 1px;
    border-color: var(--bs-gray-400) !important;
    border-radius: 5px;
    background-color: var(--bs-body-bg);
}
.header-icon {
    font-size: x-large;
    cursor: pointer;
}
.header-icon.no-pointer {
    cursor:default;
}
.pseudo-button:active {
    border-style: outset; /* Remove button click animation on the search bar */
    background-color: var(--bs-body-bg) !important;
}
.pseudo-button:hover {
    background-color: var(--bs-body-bg);
}
/* Styling to make the search field look like one thing */
.dbc input:not([type=radio]):not([type=checkbox]).search-field {
    background-color: var(--bs-body-bg) !important;
    border: none;
}
/* Remove the default inner shadow or border on focus */
.dbc input:not([type=radio]):not([type=checkbox]).search-field:focus {
    box-shadow: none;
}
/* Style for the placeholder background */
.dbc input:not([type=radio]):not([type=checkbox]).search-field::placeholder {
    background-color: var(--bs-body-bg) !important;
}


/* Styling for the search field in the invoice review (smaller than the header) */
.dbc input:not([type=radio]):not([type=checkbox]).search-field.small {
    padding: 0 5px 0 5px; /* Center the input field in the box */
}
/* Style for the placeholder background */
.dbc input:not([type=radio]):not([type=checkbox]).search-field.small::placeholder {
    font-size: small;
    height: 30px;
}
.header-button.small {
    font-size: small;
    height: 30px;
}
.header-button.large {
    font-size: large;
}

/* Styling to make the prospect name in the details look not like an input */
.dbc input:not([type=radio]):not([type=checkbox]).prospect-details {
    background-color: white !important;
    border: none;
    justify-items: center !important;
    font-size: xx-large !important;
    font-weight: bold !important;
    width: 100% !important;
    padding: 0;
}
.unallowed {
    border: 2px solid red !important;
}
/* Style for the placeholder background */
.dbc input:not([type=radio]):not([type=checkbox]).prospect-details::placeholder {
    background-color: transparent !important;
    text-align: center !important;
    width: 100%;
}
/* Style for the Rep input field in the prospect details panel */
.dbc input:not([type=radio]):not([type=checkbox]).prospect-details.small {
    font-size:medium !important;
    font-weight: normal !important;
    width: 50% !important;
    padding: 0;
}
.dbc input:not([type=radio]):not([type=checkbox]).prospect-details.small:disabled {
    background-color: var(--bs-gray-400) !important;
    text-align:center !important;
}






/* Styling for the status dropdown in the Prospect Grid */
.status-dropdown {
    width: 50%;
    height: 100%;
    border: 1px solid var(--bs-secondary-bg-subtle);
    border-radius: 25px;
    font-size: 16px;
    color: white;
    text-align: center;
    appearance: none;  /* Removes default arrow */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    cursor: pointer;
}
.status-dropdown.inprogress {
    background-color: var(--bs-blue);
}
.status-dropdown.sent {
    background-color: var(--bs-warning);
}
.status-dropdown.closed {
    background-color: var(--bs-success);
}
.status-dropdown.lost {
    background-color: var(--bs-danger);
}
.ag-cell .status-dropdown {
    display: block;
    margin: 0 auto;  /* Center horizontally within the grid column*/
}
.status-dropdown-option {
    background-color: var(--bs-gray-600);
}
.status-dropdown.prospect-pane {
    width: 75% !important;
}
.form-select.prospect-pane {
    background-image: none !important; /* Ensures no custom arrow appears */
}
#prospect-rep-input:hover, #prospect-name-input:hover, #prospect-num-input:hover, #prospect-territory-dropdown:hover {
    transition: background-color 0.35s;
    background-color: var(--bs-gray-200) !important;
    cursor:text !important;
}
#prospect-rep-input, #prospect-name-input, #prospect-num-input, #prospect-territory-dropdown {
    transition: background-color 0.35s;
}
#prospect-territory-dropdown:disabled {
    background-color: white;
}
#prospect-territory-dropdown:disabled:hover {
    background-color: white !important;
    cursor: default !important;
}
#prospect-territory-dropdown {
    border: none;
}
.uneditable {
    color: var(--bs-gray-600);
}


/* Center the grid column header text horizontally */
.ag-header-cell-label {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ag-header-cell .ag-header-icon {
    margin-left: -18px; /* Adjust header icon margin to perfect visual alignment */
}
/* Style for required fields on invoice review */
.header-required {
    background-color: var(--bs-primary-border-subtle) !important;
}

/* Let the longer content in the columns wrap to the next row */
.ag-cell {
    display: flex !important;
    justify-content:center !important;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    max-width: 100%;
}

/* Left side of prospect details page */
.prospect-details {
    border-right: 1px solid var(--bs-gray-400);
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor:default;
}
.preview-div {
    border-right: 1px solid var(--bs-gray-400);
    padding-right: 25px;
    margin-right: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
}


/* Styling to make the AG grids white */
.ag-header-cell {
    background-color: white; /* Remove alternating row colors */
}
.ag-row-odd {
    background-color: white !important;
}
.ag-root-wrapper {
    border-top: 1px solid var(--bs-gray-400);
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
}
.ag-paging-panel {
    background-color: white !important;
}
.ag-body {
    background-color: white !important;
}


/* Styling for the dashed upload invoice box */
#invoice-upload-box {
    color: var(--bs-secondary-color);
    width: 100%;
    height: 100%;
    border-style: dashed;
    border-width: 3px;
    border-radius: 5px;
    line-height: 55px;
    margin: 10px;
}
#invoice-upload-box:hover {
    color: var(--bs-emphasis-color);
    cursor: pointer;
}


/* Styling to make the grids all flex instead of using viewport */
.flex-parent {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.tab-content {
    flex:1 1 auto;
}
div[role="tabpanel"] > * {
    /* This allows the tabs to flex so the grid is able to flex */
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}


/* CSS for the Admin Page */
.admin-row {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin-left: 50px;
    margin-bottom: 10px;
}
.admin-page {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.admin-section {
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--bs-gray-400);
}
.admin-dropdown {
    background-color: var(--bs-gray-100) !important;
}
.admin-input {
    width: 200px;
    margin-left: 25px;
}


/* Styling for the notification circles */
/* Container for the icon and badge */
.icon-container {
    position: relative;
    display: inline-block;
}
/* Badge style */
.icon-badge {
    position: absolute;
    top: 0;
    left: 12px;
    width: 15px;
    height: 15px;
    border-radius: 50%; /* Makes it a circle */
    border: 2px solid white; 
    display: inline-block;
    z-index: 1; /* Appear above the icon */
}
.icon-badge.danger {
    background-color: var(--bs-danger);
}
.icon-badge.warning {
    background-color: var(--bs-warning);
}
.icon-badge.success {
    display: none;
}


/* Colors for the invoice upload box */
.success {
    background-color: var(--bs-success-border-subtle);
}
.error {
    background-color: var(--bs-danger-border-subtle);
}
.warning {
    background-color: var(--bs-warning-border-subtle);
}


/* Styling for the cost analysis page */
.template-container {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 16px;
    padding-top: 8px;
}
.program-divider {
    border-radius: 22px;
    max-width: 10px;
    background-color: var(--bs-gray-300);
    cursor: default !important;
}
.template-card {
    width: 16rem !important;
    cursor: pointer;
    border: 1px solid var(--bs-gray-400);
    font-size: 14px;
    flex: 0 0 auto; /* Prevent shrinking */
}
.template-card.success {
    color: white;
    background-color: #568a2c !important;
}
.template-card.danger {
    color: white;
    background-color: #a73f2f !important;
}
.template-card.secondary {
    color: black;
    background-color: #adb5bd !important;
}
.template-card.selected {
    border: 4px solid var(--bs-warning);
}
.template-card.unselected {
    border: 4px solid transparent;
}
.template-row {
    justify-content: space-between;
}
.template-row p:first-child {
    margin-right: 20px;
}
.template-row p:nth-child(2) { /* Wrapping for the template values */
    white-space: normal; /* Ensure text wraps within the element */
    word-wrap: break-word; /* Break long words if necessary */
    text-align: end;
}
.kpi-row {
    display: flex;
    justify-content: space-between;
    gap:24px;
}
.kpi-card {
    flex: 1;
    background-color: white !important;
    max-height: 35vh;
    overflow-y: auto;
}
.kpi-card.danger {
    border: 2px solid red;
}
.report-card {
    flex: 1;
    background-color: white !important;
}

/* Styling for the invoice fee buttons on the invoice review */
#invoice_fee_percent_toggle:disabled, #invoice_fee_dollar_toggle:disabled {
    background-color: var(--bs-blue);
    opacity: 100;
}
#invoice_fee_percent_toggle:hover, #invoice_fee_dollar_toggle:hover {
    background-color: white;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.top-stick {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
}

/* Collapse styling for the prospect search box */
.search-results {
    position: absolute;
    z-index: 2000;
    top: 100%;
    right: 0;
    border-radius: 5px;
    width: 100%;
    background-color: white;
    padding: 5px 10px 5px 10px;
    max-height: 25vh;
    overflow-y: scroll;
}


/* Styling for the div that overlays the grids */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    z-index: 1000; /* Appears above the grid */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Gloabl styling for table data */
Td.export {
    vertical-align: middle !important;
    justify-items: center !important;
    padding: 0;
}
Th.export {
    font-weight:500;
}
Td.mapping {
    width: 33% !important;
    align-content: center;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
Th.mapping {
    padding-left: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.experiment-table > Td, Th {
    align-content: center !important;
    text-align: center;
}
.experiment-card > Td {
    padding: 5px;
}
#map-columns-modal > div {
    height: 90vh; /* Make the modal scroll instead of flex */
}
#bulk-edit-modal > div {
    max-height: 90vh;
    min-height: 70vh;
}

.bulk-row-component {
    width: 100%;
}
.bulk-row-placeholder {
    width: 100%;
    margin-bottom: 0px;
    text-align: center;
}


/* Date picker styling */
.SingleDatePicker, .SingleDatePickerInput, .DateInput {
    width: 100%;
    border-radius: 5px;
}
.DateInput_input {
    border-radius: 5px;
    width: 100%;
    background-color: var(--bs-body-bg);
    font-size: 16px;
    font-weight: 400;
    height: 58px;
}


/* Style for select all rows span on invoice rerview */
.select-all {
    cursor: pointer;
    color: var(--bs-primary);
}
.select-all.reports {
    font-size: small;
}


/* Remove margin from the switches */
.form-switch > label {
    margin: 0;
}


.no-fee-div {
    color: black;
    font-size: 20px;
    text-align: center;
    min-height: 10vh;
    align-content: center;
    border-bottom: 1px solid var(--bs-gray-300);
}

.weeks-header {
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.form-select {
    background-color: white;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse {
  animation: pulse 1.5s infinite;
}