/* Styles for Cart/_CartDetails partial. Loaded once via the css/*.css bundle so
   the partial can be re-injected (getCartDetails / OrgID multi-cart) without
   re-appending inline <style> blocks. */

.ship-destination .btn-patient.active {
    background-color: #1F3276;
    color: white;
}

.ship-destination .btn:not(.active) {
    color: gray;
}

.ship-destination .btn:not(.active):hover,
.ship-destination .btn:not(.active):focus {
    background-color: inherit;
}

.alert-practice {
    background-color: #D7E9EB;
    background-color: #ddf0f6;
    color: #3E8793;
}

.alert-patient {
    background-color: #D8E3F8;
    color: #1F3276;
}

.alert-shipto {
    background-color: #D7E9EB;
    color: #3E8793;
    text-align: center;
    font-weight: 600;
    padding: 10px;
}

.shipping-summary {
    position: relative;
    z-index: 1;
}

.shipping-summary:before {
    position: absolute;
    width: calc(100% + 60px);
    height: 100%;
    top: 0;
    left: -30px;
    content: '';
    background-color: #F9F9F9;
    box-shadow: inset 0 5px 5px -5px rgba(0,0,0,0.15), inset 0 -5px 5px -5px rgba(0,0,0,0.15);
    z-index: -1;
}

/* already exists */
.modal-body .add-patients-tbl .patients-tbl-body {
    margin-bottom: 4px;
    padding: 15px;
    margin-bottom: 0px;
    padding: 5px 0px;
    border-bottom: 1px dashed #9ba4ac;
    border-bottom: 1px solid #daddea;
}

.col-tph .table {
    border-radius: 5px;
    --bs-table-bg: #F2F4F9;
    --bs-table-border-radius: 0.5rem;
    padding-right: 5%;
}

.table-responsive .table tbody td {
    padding: 5px;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: #525252;
    vertical-align: middle;
}

div[class^="col-"] .extric {
    color: #FF3737;
}

.smart-dosage-field {
    user-select: none;
}

.dosage-placeholder {
    color: #9ea6be;
    border-bottom: 1px dashed #007bff;
    padding: 0 2px;
}

.smart-dosage-field:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.dosage-placeholder.editing {
    border-bottom: 1px solid #007bff;
    outline: none;
}

.dosage-placeholder.is-invalid {
    background-color: #f8d7da;
    color: #721c24;
}

.dosage-filled {
    color: #0D9686;
    font-weight: bold;
    user-select: text;
}

.dosage-placeholder.editing {
    border-bottom: 1px solid #007bff;
    outline: none;
    cursor: text;
}

.dosage-placeholder.is-invalid {
    background-color: #f8d7da;
    color: #721c24;
}

.popover-header {
    font-size: 0.9rem;
}

.popover .list-group-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: none;
}

/* Footer "Add New" Form Styles */
.add-row .inner-table {
    margin: 1rem 0 0 0;
    background-color: #f6f7f9;
}

.patient-dosage-section {
    margin-top: 1rem;
}

.form-control.date-format {
    min-height: 33px;
    padding-right: 10px;
}

.pencil-cursor {
    cursor: url('/assets/images/pencil.png'), auto;
}

.table-color.required:after {
    content: " *";
    color: red;
}

.contentRequire:after {
    content: " *";
    color: red;
}

.form-control.dateformat {
    position: relative;
    width: 100px;
}

/* Modal Dropdown/Popover Fixes - Ensure overflow doesn't clip and z-index is above modal */
.patients-tbl-body, .add-patients-tbl {
    overflow: visible !important;
}

/* Bootstrap: .modal-dialog-scrollable .modal-content { overflow: hidden } — clips the patient Select2 list at the bottom of the white panel (z-index does not fix overflow). Scope to Add Patient modals only. */
[id^="addPatient-"].modal .modal-dialog-scrollable .modal-content {
    overflow: visible !important;
}

/* Select2 default 10000 sits below .modal-header/.modal-footer (11000), so the patient list is covered by the footer. Bump only z-index — keep dropdownParent: .modal-content unchanged. */
.select2-container--open {
    z-index: 12050 !important;
}

.select2-dropdown {
    z-index: 12050 !important;
}

.popover {
    z-index: 12055 !important;
}

/* Header/footer above normal modal-body content; stay below open Select2 (12050) */
.modal-header, .modal-footer {
    z-index: 11000 !important;
    background-color: #fff !important;
    position: relative;
}