/*==============================================================
 REGAL HMS FRAMEWORK
 profile.css
 Version : 1.0
==============================================================*/


/*==============================================================
 PROFILE CARD
==============================================================*/

.profile-card{

    background:#ffffff;

    border-radius:10px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    overflow:hidden;

    margin-bottom:20px;

}


/*==============================================================
 PROFILE HEADER
==============================================================*/

.profile-header{

    background:#0d6efd;

    color:#ffffff;

    padding:30px;

    text-align:center;

}


/*==============================================================
 PROFILE PHOTO
==============================================================*/

.profile-photo{

    width:140px;

    height:140px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #ffffff;

    background:#ffffff;

}


/*==============================================================
 PROFILE NAME
==============================================================*/

.profile-name{

    margin-top:15px;

    font-size:24px;

    font-weight:700;

}


/*==============================================================
 PROFILE CODE
==============================================================*/

.profile-code{

    font-size:14px;

    opacity:.9;

}


/*==============================================================
 PROFILE BODY
==============================================================*/

.profile-body{

    padding:25px;

}


/*==============================================================
 PROFILE SECTION
==============================================================*/

.profile-section{

    margin-bottom:30px;

}


/*==============================================================
 PROFILE TITLE
==============================================================*/

.profile-title{

    font-size:18px;

    font-weight:600;

    color:#0d6efd;

    margin-bottom:15px;

    border-bottom:1px solid #dee2e6;

    padding-bottom:8px;

}


/*==============================================================
 PROFILE TABLE
==============================================================*/

.profile-table{

    width:100%;

}

.profile-table th{

    width:220px;

    padding:10px;

    font-weight:600;

    color:#495057;

}

.profile-table td{

    padding:10px;

}


/*==============================================================
 PROFILE LABEL
==============================================================*/

.profile-label{

    font-weight:600;

    color:#6c757d;

}


/*==============================================================
 PROFILE VALUE
==============================================================*/

.profile-value{

    color:#212529;

}


/*==============================================================
 STATUS BADGE
==============================================================*/

.profile-status{

    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

}


/*==============================================================
 PART-1 END
==============================================================*/
/*==============================================================
 INFORMATION CARD
==============================================================*/

.info-card{

    background:#ffffff;

    border:1px solid #dee2e6;

    border-radius:10px;

    padding:20px;

    margin-bottom:20px;

    transition:.25s;

}

.info-card:hover{

    box-shadow:0 4px 15px rgba(0,0,0,.10);

}


/*==============================================================
 CONTACT CARD
==============================================================*/

.contact-card{

    background:#f8f9fa;

    border-left:4px solid #0d6efd;

    border-radius:8px;

    padding:15px;

    margin-bottom:15px;

}

.contact-card i{

    color:#0d6efd;

    margin-right:8px;

}


/*==============================================================
 ADDRESS CARD
==============================================================*/

.address-card{

    background:#ffffff;

    border:1px dashed #ced4da;

    border-radius:8px;

    padding:15px;

    margin-bottom:15px;

}


/*==============================================================
 MEDICAL CARD
==============================================================*/

.medical-card{

    background:#fff8e6;

    border-left:5px solid #ffc107;

    border-radius:8px;

    padding:15px;

    margin-bottom:20px;

}


/*==============================================================
 AUDIT CARD
==============================================================*/

.audit-card{

    background:#f8f9fa;

    border:1px solid #dee2e6;

    border-radius:8px;

    padding:20px;

}


/*==============================================================
 PROFILE STATS
==============================================================*/

.profile-stats{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.profile-stat{

    flex:1;

    min-width:150px;

    background:#ffffff;

    border-radius:10px;

    border:1px solid #dee2e6;

    text-align:center;

    padding:20px;

}

.profile-stat h3{

    font-size:28px;

    font-weight:700;

    color:#0d6efd;

}

.profile-stat p{

    margin:0;

    color:#6c757d;

}


/*==============================================================
 TIMELINE
==============================================================*/

.profile-timeline{

    border-left:3px solid #0d6efd;

    padding-left:20px;

    margin-left:20px;

}

.timeline-item{

    position:relative;

    margin-bottom:20px;

}

.timeline-item::before{

    content:"";

    width:12px;

    height:12px;

    background:#0d6efd;

    border-radius:50%;

    position:absolute;

    left:-27px;

    top:6px;

}


/*==============================================================
 QR CODE
==============================================================*/

.profile-qr{

    text-align:center;

    margin-top:20px;

}

.profile-qr img{

    width:120px;

    height:120px;

}


/*==============================================================
 SIGNATURE
==============================================================*/

.signature-box{

    text-align:center;

    margin-top:30px;

}

.signature-box img{

    max-height:70px;

}

.signature-label{

    font-size:13px;

    color:#6c757d;

}


/*==============================================================
 ATTACHMENTS
==============================================================*/

.attachment-list{

    list-style:none;

    padding:0;

    margin:0;

}

.attachment-list li{

    padding:10px;

    border-bottom:1px solid #eee;

}

.attachment-list li:last-child{

    border-bottom:none;

}

.attachment-list i{

    color:#0d6efd;

    margin-right:8px;

}


/*==============================================================
 PROFILE ACTIONS
==============================================================*/

.profile-actions{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-top:20px;

}


/*==============================================================
 INFO ROW
==============================================================*/

.info-row{

    display:flex;

    border-bottom:1px solid #eee;

    padding:10px 0;

}

.info-row:last-child{

    border-bottom:none;

}

.info-label{

    width:200px;

    font-weight:600;

    color:#495057;

}

.info-value{

    flex:1;

}


/*==============================================================
 PART-2 END
==============================================================*/
/*==============================================================
 PROFILE SUMMARY
==============================================================*/

.profile-summary{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:15px;

    margin-bottom:25px;

}

.summary-card{

    background:#ffffff;

    border:1px solid #dee2e6;

    border-radius:10px;

    padding:20px;

    text-align:center;

    transition:.25s;

}

.summary-card:hover{

    transform:translateY(-3px);

    box-shadow:0 5px 15px rgba(0,0,0,.10);

}

.summary-card i{

    font-size:32px;

    color:#0d6efd;

    margin-bottom:10px;

}

.summary-title{

    font-size:14px;

    color:#6c757d;

}

.summary-value{

    font-size:24px;

    font-weight:700;

    color:#212529;

}


/*==============================================================
 GALLERY
==============================================================*/

.profile-gallery{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.profile-gallery img{

    width:100px;

    height:100px;

    object-fit:cover;

    border-radius:8px;

    border:1px solid #dee2e6;

    transition:.20s;

}

.profile-gallery img:hover{

    transform:scale(1.05);

}


/*==============================================================
 DOCUMENTS
==============================================================*/

.document-card{

    display:flex;

    align-items:center;

    gap:15px;

    padding:12px;

    border:1px solid #dee2e6;

    border-radius:8px;

    margin-bottom:10px;

    transition:.20s;

}

.document-card:hover{

    background:#f8f9fa;

}

.document-icon{

    font-size:28px;

    color:#0d6efd;

}

.document-name{

    font-weight:600;

}

.document-size{

    font-size:12px;

    color:#6c757d;

}


/*==============================================================
 ID CARD
==============================================================*/

.id-card{

    width:350px;

    margin:auto;

    border-radius:12px;

    border:1px solid #dee2e6;

    overflow:hidden;

    background:#fff;

}

.id-card-header{

    background:#0d6efd;

    color:#fff;

    text-align:center;

    padding:12px;

    font-weight:700;

}

.id-card-body{

    padding:20px;

    text-align:center;

}

.id-card-photo{

    width:110px;

    height:110px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #dee2e6;

}

.id-card-footer{

    background:#f8f9fa;

    padding:10px;

    text-align:center;

}


/*==============================================================
 PROFILE TAGS
==============================================================*/

.profile-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.profile-tag{

    background:#e9ecef;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

}


/*==============================================================
 STATUS COLORS
==============================================================*/

.status-active{

    background:#198754;

    color:#fff;

}

.status-inactive{

    background:#dc3545;

    color:#fff;

}

.status-pending{

    background:#ffc107;

    color:#212529;

}


/*==============================================================
 RESPONSIVE
==============================================================*/

@media(max-width:768px){

.profile-header{

    padding:20px;

}

.profile-photo{

    width:100px;

    height:100px;

}

.profile-name{

    font-size:20px;

}

.profile-table th{

    width:130px;

    display:block;

}

.profile-table td{

    display:block;

    padding-bottom:15px;

}

.info-row{

    flex-direction:column;

}

.info-label{

    width:100%;

    margin-bottom:5px;

}

.profile-actions .btn{

    width:100%;

}

.id-card{

    width:100%;

}

}


/*==============================================================
 PRINT
==============================================================*/

@media print{

.profile-actions,

.no-print{

    display:none !important;

}

.profile-card{

    box-shadow:none;

    border:1px solid #000;

}

body{

    background:#fff;

}

}


/*==============================================================
 DARK MODE
==============================================================*/

body.dark-mode .profile-card,

body.dark-mode .info-card,

body.dark-mode .summary-card,

body.dark-mode .id-card{

    background:#2c2c2c;

    color:#fff;

}

body.dark-mode .profile-header{

    background:#1e1e1e;

}

body.dark-mode .profile-table th,

body.dark-mode .info-label{

    color:#ddd;

}

body.dark-mode .profile-value,

body.dark-mode .info-value{

    color:#fff;

}


/*==============================================================
 ANIMATION
==============================================================*/

.profile-card,

.info-card,

.summary-card{

    animation:fadeProfile .30s ease-in-out;

}

@keyframes fadeProfile{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==============================================================
 UTILITIES
==============================================================*/

.profile-center{

    text-align:center;

}

.profile-right{

    text-align:right;

}

.profile-left{

    text-align:left;

}

.profile-shadow{

    box-shadow:0 2px 10px rgba(0,0,0,.10);

}

.profile-rounded{

    border-radius:10px;

}

.profile-border{

    border:1px solid #dee2e6;

}


/*==============================================================
 PROFILE.CSS COMPLETED
 VERSION : 1.0
==============================================================*/