659 lines
9.8 KiB
CSS
659 lines
9.8 KiB
CSS
/* 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;
|
|
} |