/* Style single-select2 clear icon to look like multi-select tag remove button */
/* .select2-container--default .select2-selection--single .select2-selection__clear {
    background: #eaf7f2;
    border-radius: 4px;
    color: #1a7f5a;
    font-size: 18px;
    margin-left: 8px;
    padding: 0 8px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    top: -2px;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    background: #d1f2e0;
    color: #0c5c3c;
} */
body{
background:#f6f8fb;
font-family:system-ui,-apple-system,Segoe UI,sans-serif;
}

.appointment-card{
width:100%;
max-width:none;
margin:12px 0;
background:#fff;
border:1px solid #dbe4ee;
border-radius:12px;
overflow:hidden;
}

.card-header-custom{
padding:16px 24px;
border-bottom:1px solid #dbe4ee;
display:flex;
justify-content:space-between;
align-items:center;
}

.card-header-custom h4{
margin:0;
font-size:22px;
font-weight:600;
color:#183153;
}

.back-btn{
border:1px solid #adb8c5;
padding:8px 18px;
border-radius:6px;
background:#fff;
text-decoration:none;
color:#4d6072;
font-size:14px;
}

.form-body{
padding:24px;
}

.info-badge{
display:inline-block;
padding:8px 12px;
border:1px solid #d2d9e3;
border-radius:8px;
background:#f9fafb;
font-weight:500;
font-size:14px;
margin-bottom:20px;
}

.form-label{
font-size:15px;
font-weight:500;
margin-bottom:8px;
color:#1f3550;
}

.req{
color:#dc3545;
}

.form-control,
.form-select{
height:44px;
border-radius:8px;
font-size:15px;
border:1px solid #ced4da;
}

textarea.form-control{
height:100px;
padding-top:12px;
}

.readonly-box{
background:#f4f6f8;
}

.action-row{
margin-top:30px;
display:flex;
justify-content:space-between;
align-items:center;
}

.cancel-btn{
padding:10px 24px;
border-radius:30px;
background:#fff;
border:1px solid #8e9aaa;
color:#556575;
font-size:15px;
}

.save-btn{
padding:11px 28px;
border:none;
border-radius:30px;
background:#0f8b83;
color:white;
font-size:15px;
font-weight:600;
box-shadow:0 4px 12px rgba(15,139,131,.18);
}

.save-btn:hover{
background:#0c746d;
}

.doctor-card{
padding:14px;
border:1px solid #dbe4ee;
border-radius:10px;
margin-bottom:10px;
transition:.2s;
}

.doctor-card.available{
border:2px solid #198754;
background:#eefaf4;
cursor:pointer;
}

.doctor-card.disabled{
background:#f4f5f6;
opacity:.6;
pointer-events:none;
}

#doctorFieldBox{
min-height:44px;
border:1px solid #ced4da;
border-radius:8px;
padding:12px;
background:#fff;
}

.doctor-placeholder{
color:#6c757d;
font-size:14px;
}

.doctor-empty{
height:20px;
display:flex;
align-items:center;
font-size:15px;
color:#495057;
margin:0;
padding:0;
}

.field-error{
border:2px solid #dc3545 !important;
box-shadow:0 0 0 .15rem rgba(220,53,69,.12);
}

.error-text{
font-size:13px;
color:#dc3545;
margin-top:6px;
}

@media(max-width:768px){

.appointment-card{
margin:15px;
}

.action-row{
flex-direction:column;
gap:14px;
align-items:stretch;
}

}
/* ===== Compact fit adjustments ===== */

.ov-content{
padding-top:10px !important;
}

.appointment-card{
width:100%;
max-width:none;
margin:8px 0;
}

.card-header-custom{
padding:10px 18px;
}

.card-header-custom h4{
font-size:18px;
}

.form-body{
padding:16px 20px;
}

/* reduce bootstrap row spacing */
.row.g-4{
--bs-gutter-y:1rem;
--bs-gutter-x:1rem;
}

.form-label{
font-size:14px;
margin-bottom:5px;
}

.info-badge{
padding:6px 10px;
font-size:13px;
margin-bottom:12px;
}

.form-control,
.form-select{
height:40px;
font-size:14px;
}

.readonly-box{
height:40px;
}

/* smaller notes box */
textarea.form-control{
height:72px;
padding-top:8px;
}

/* doctor field match input height */
#doctorFieldBox{
min-height:40px;
padding:8px 12px;
}

/* tighter doctor cards if shown */
.doctor-card{
padding:10px;
margin-bottom:8px;
}

.action-row{
margin-top:16px;
}

.cancel-btn,
.save-btn{
padding:8px 20px;
font-size:14px;
}

/* optional: keep textarea from stretching too much */
textarea{
resize:vertical;
min-height:72px;
}


/* =========================================
SELECT2 CUSTOM DESIGN FIX
========================================= */

.multi-select-arrow-wrap{
position:relative;
width:100%;
}

/* hide default select2 arrow (using custom icon) */
.select2-container--default .select2-selection__arrow{
display:none !important;
}

.select2-container{
width:100% !important;
display:block;
}

/* Main input box */
.select2-container--default 
.select2-selection--multiple{

    min-height:40px !important;
    height:auto !important;

    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;

    padding:4px 40px 4px 8px !important;

    border:1px solid #ced4da !important;
    border-radius:8px !important;

    background:#fff !important;

    transition:.2s;
    overflow:hidden;
}


/* Placeholder */
.select2-container--default 
.select2-selection--multiple 
.select2-search__field{

margin-top:0 !important;
height:28px !important;
font-size:14px !important;
}


/* Selected tags */
/* ===================================
SELECT2 BADGE FIX (full text visible)
=================================== */

.select2-container--default
.select2-selection--multiple
.select2-selection__choice{

display:inline-flex !important;
align-items:center !important;

width:auto !important;
max-width:none !important;

white-space:nowrap !important;

overflow:visible !important;

padding:0 !important;
margin:4px 8px 4px 0 !important;

background:#e9f7f5 !important;
border:1px solid #b8e4de !important;
border-radius:6px !important;
}

.select2-container--default
.select2-selection--multiple
.select2-selection__choice__remove{

position:relative !important;

display:inline-flex !important;
align-items:center;
justify-content:center;

width:24px !important;
height:24px !important;

margin:0 !important;
padding:0 !important;

border-right:1px solid #b8e4de;

background:#dff3ef;

color:#0f5e58 !important;

font-size:15px;
font-weight:600;

float:none !important;
}

/* ===== DOCTOR LIST STYLES ===== */

.doctor-list-container {
    display: grid;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

.doctor-option {
    padding: 12px 14px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.doctor-option.available {
    cursor: pointer;
    border-color: #ced4da;
}

.doctor-option.available:hover {
    background: #f8f9fa;
    border-color: #0f8b83;
}

.doctor-option.disabled {
    opacity: 0.6;
    background: #f8f9fa;
    pointer-events: none;
}

.doctor-option .form-check-input {
    margin-right: 12px;
    margin-top: 0;
    cursor: pointer;
}

.doctor-option.disabled .form-check-input {
    cursor: not-allowed;
}

.doctor-option .form-check-label {
    margin-bottom:0;
    cursor:pointer;
    flex:1;

    display:flex !important;
    flex-direction:row !important;

    align-items:center !important;
    gap:10px !important;

    white-space:nowrap;
}

.doctor-option .form-check-label strong {
    font-size: 15px;
    color: #1f3550;
}

.doctor-option .form-check-label small {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}


/* FULL SERVICE NAME */
.select2-container--default
.select2-selection--multiple
.select2-selection__choice__display{

display:inline-block !important;

padding-left:8px !important;
padding-right:10px !important;

margin-left:0 !important;

line-height:24px !important;

white-space:nowrap !important;

overflow:visible !important;
text-overflow:unset !important;
}
.select2-selection__choice__display{
overflow:visible !important;
text-overflow:unset !important;
}


/* Focus effect */
.select2-container--default.select2-container--focus
.select2-selection--multiple{

border-color:#0f8b83 !important;

box-shadow:
0 0 0 .15rem rgba(15,139,131,.12) !important;

}


/* Dropdown panel */
.select2-dropdown{

border:1px solid #ced4da !important;
border-radius:8px !important;

overflow:hidden;
box-shadow:
0 6px 20px rgba(0,0,0,.08);

}


/* Dropdown options */
.select2-results__option{

padding:10px 14px !important;
font-size:14px;

}


.select2-results__option--highlighted{
background:#0f8b83 !important;
color:#fff !important;
}


/* Custom right chevron */
.select2-arrow-hint{

position:absolute;
right:14px;
top:50%;

transform:translateY(-50%);

pointer-events:auto;
cursor:pointer;

font-size:14px;
color:#6b7280;

z-index:20;
transition:.2s;

}

.select2-arrow-hint:hover{
color:#0f8b83;
}


/* Validation error support */
.field-error + .select2-container
.select2-selection--multiple{

border:2px solid #dc3545 !important;

box-shadow:
0 0 0 .15rem rgba(220,53,69,.12);

}
.select2-search--inline{
display:none !important;
}

/* Mobile */
@media(max-width:768px){

.select2-container--default
.select2-selection--multiple{

padding-right:34px !important;

}

.select2-arrow-hint{
right:10px;
}

}
.doctor-meta-row{
display:flex;
align-items:center;
flex-wrap:nowwrap;
gap:10px;
margin:0;
line-height:1.4;
}

.doctor-name{
margin:0;
font-weight:600;
}

.doctor-exp,
.doctor-status,
.sep{
display:inline-block;
white-space:nowrap;
}

.sep{
opacity:.6;
}

.form-check{
display:flex;
align-items:center;
gap:12px;
}

.form-check-input{
margin-top:0 !important;
flex-shrink:0;
}
.doctor-radio{
display:none;
}
/* Doctor single select */
.single-select-wrap{
position:relative;
width:100%;
}

.single-arrow{
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
z-index:20;
cursor:pointer;
color:#6b7280;
}

/* hide default select2 arrow */
.select2-container--default
.select2-selection--single
.select2-selection__arrow{
display:none !important;
}

/* doctor select box */
.select2-container--default
.select2-selection--single{

height:40px !important;
border:1px solid #ced4da !important;
border-radius:8px !important;

padding:5px 40px 5px 12px !important;
}

/* text vertically centered */
.select2-selection__rendered{
line-height:28px !important;
}