/* ===========================================
MASTER
=========================================== */

/* Card */
.card {
    border: none;
    border-radius: 10px;
}

.card-header {
    font-weight: 600;
}

/* Form */
.form-label {
    font-weight: 600;
    margin-bottom: .35rem;
}

.form-control,
.form-select {
    border-radius: 6px;
}

.form-control:focus,
.form-select:focus {
    box-shadow: none;
    border-color: #0d6efd;
}

/* Required Field */
.text-danger {
    font-weight: bold;
}

/* Section Heading */
.section-title,
h6.border-bottom {
    font-size: 15px;
    font-weight: 600;
    color: #0d6efd;
}

/* Photo Preview */
#preview {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
}

/* Buttons */
.btn {
    border-radius: 6px;
}

/* Validation Message */
#mobileMsg,
#aadhaarMsg {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
}

/* Readonly Fields */
input[readonly] {
    background: #f8f9fa;
}

/* Card Body */
.card-body {
    padding: 1.5rem;
}

/* Table */
.table td,
.table th {
    vertical-align: middle;
}

/*****************************************************************
 PAGE TOOLBAR
*****************************************************************/

.page-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

    gap:10px;

    flex-wrap:wrap;

}

.page-toolbar-info{

    color:#6c757d;

    font-size:14px;

}

/*****************************************************************
 PATIENT TABLE
*****************************************************************/

.fs-7 { font-size: 0.8rem; }
.tracking-wider { letter-spacing: 0.05em; }

/* Customizing the table header */
#example thead th {
    color: #4a5568;
    font-weight: 600;
    border-bottom: 2px solid #e2e8f0;
    padding: 12px;
}

/* Row padding and smooth hover state */
#example tbody td {
    padding: 8px;
    border-bottom: 1px solid #f1f5f9;
}
#example tbody tr {
    transition: background-color 0.2s ease;
}

/* Customizing DataTables search and length inputs to match Bootstrap 5.3 */
.dt-search input {
    border-radius: 8px !important;
    padding: 6px 12px !important;
    border: 1px solid #cbd5e1 !important;
}
.dt-length select {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
}



.dataTables_wrapper{

    padding-top:10px;

}

.dataTables_filter input{

    border-radius:8px;

    min-width:250px;

}

.dataTables_length select{

    border-radius:8px;

}

.dt-buttons{

    display:flex;

    gap:6px;

    flex-wrap:wrap;

}

/* ---------------------------------------------------- */
/* 1. Global & Compact Row Spacing Rules (Minus Space)  */
/* ---------------------------------------------------- */
.table-premium {
  /* Changed separate to collapse to allow fluid shrinking on mobile widths */
  border-collapse: collapse !important; 
  width: 100% !important;
}
.table-premium thead th {
  background-color: #f8f9fa !important;
  color: #5c677d !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700 !important;
  padding: 10px 12px !important; 
  border-bottom: 2px solid #e9ecef !important;
}
.table-premium tbody td {
  padding: 8px 12px !important; 
  font-size: 12px;
  border-bottom: 1px solid #f1f3f5 !important;
  color: #333333;
}
.table-premium tbody tr:hover {
  background-color: #fdfdfd !important; 
}

/* ---------------------------------------------------- */
/* 2. Professional Element Styling                      */
/* ---------------------------------------------------- */
.btn-action-edit {
  padding: 4px 8px !important;
  font-size: 13px !important;
  color: #0d6efd !important;
  background-color: #f0f5ff !important;
  border: 1px solid #d0e1ff !important;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.btn-action-edit:hover {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}

/*****************************************************************
 ACTION BUTTONS
*****************************************************************/

.action-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:.35rem;

    flex-wrap:nowrap;

}

.action-buttons .btn{

    width:34px;

    height:34px;

    padding:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:8px;

    transition:.25s ease;

}

.action-btn:hover{

    transform:translateY(-2px);

}
.action-buttons .btn i{

    font-size:14px;

}



@media(max-width:991.98px){

     .action-buttons{

       gap:.20rem;

    }

    .action-buttons .btn{

        width:30px;

        height:30px;

    }
    .action-btn i{

    font-size:12px;

    }

    .page-toolbar{

        flex-direction:column;

        align-items:flex-start;

    }
    .dt-buttons{

        margin-bottom:12px;

    }

    .dataTables_filter{

        margin-top:10px;

    }

    .dataTables_filter input{

        width:100%;

        min-width:100%;

    }

}
/*****************************************************************
 DATATABLE
*****************************************************************/
.badge{

    min-width:78px;

}
.dataTables_empty{

    text-align:center;

    padding:35px !important;

    color:#6c757d;

}
.dataTables_filter input{

    border-radius:8px;

}
.dataTables_length select{

    border-radius:8px;

}
div.dataTables_processing{

    border-radius:10px;

}
.page-link{

    border-radius:6px !important;

}
#example th:last-child,

#example td:last-child{

    width:110px;

    text-align:center;

}

@media (max-width: 768px) {
    table.table-premium td, 
    table.table-premium th {
        font-size: 10px !important;
        padding: 4px 6px !important;

   }

}