/* ===== Breadcrumb (below header) ===== */
.breadcrumb-bar{
    width:100%;
    background:#F0F3F8;
    border-bottom:1px solid #DEE3EC;
    padding:14px 6%;
}
.breadcrumb-bar .bc-wrap{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    color:#5B6478;
}
.breadcrumb-bar .bc-wrap a{
    color:#1E5AA8;
    text-decoration:none;
}
.breadcrumb-bar .bc-wrap a:hover{ text-decoration:underline; }
.breadcrumb-bar .bc-wrap .sep{
    color:#A6ADBB;
    display:inline-flex;
    align-items:center;
}
.breadcrumb-bar .bc-wrap .current{
    color:#0F2C58;
    font-weight:700;
}
@media (max-width:900px){
    .breadcrumb-bar{ padding:12px 5%; }
}

/* ===== Login Banner Section ===== */
.login-banner{
    position:relative;
    width:100%;
    min-height:560px;
    background:
        linear-gradient(100deg, rgba(8,26,52,.92) 0%, rgba(15,44,88,.82) 45%, rgba(15,44,88,.35) 100%),
        url('../images/login-banner-bg.jpg') center center / cover no-repeat;
    display:flex;
    align-items:center;
    padding:60px 6%;
}
.login-banner .lb-wrap{
    max-width:1200px;
    margin:0 auto;
    width:100%;
    display:flex;
    align-items:stretch;
    gap:60px;
}

/* -- left: side photo -- */
.login-banner .lb-photo{
    flex:0 0 52%;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.login-banner .lb-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/* -- right: login card -- */
.login-banner .lb-card{
    flex:0 0 40%;
    background:#fff;
    border-radius:14px;
    padding:38px 36px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-banner .lb-card h2{
    font-size:24px;
    font-weight:800;
    color:#0F2C58;
    margin-bottom:6px;
}
.login-banner .lb-card p.lb-sub{
    font-size:13.5px;
    color:#5B6478;
    margin-bottom:26px;
    line-height:1.5;
}

.lb-field{ margin-bottom:16px; }
.lb-field label{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#0F2C58;
    margin-bottom:6px;
    letter-spacing:.02em;
}
.lb-input-row{
    display:flex;
    gap:8px;
}
.lb-input-row input[type="email"],
.lb-input-row input[type="text"]{
    flex:1;
    border:1.5px solid #DEE3EC;
    border-radius:8px;
    padding:12px 14px;
    font-size:14px;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.lb-input-row input:focus{
    border-color:#1E5AA8;
    box-shadow:0 0 0 3px rgba(30,90,168,.15);
}

/* "OR" divider between the Email and Employee Code fields */
.lb-or{
    display:flex;
    align-items:center;
    gap:12px;
    margin:6px 0 18px;
    color:#A6ADBB;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.08em;
}
.lb-or::before, .lb-or::after{
    content:"";
    flex:1;
    height:1px;
    background:#DEE3EC;
}

.lb-email-status{
    font-size:12px;
    margin-top:6px;
    min-height:16px;
    font-weight:600;
}
.lb-email-status.checking{ color:#5B6478; }
.lb-email-status.ok{ color:#1a7a3c; }
.lb-email-status.error{ color:#C4433B; }

.btn-otp:disabled{ background:#f0d9a8; cursor:not-allowed; }

.btn-otp{
    white-space:nowrap;
    background:#F2A93B;
    color:#1a1a1a;
    border:none;
    border-radius:8px;
    padding:0 18px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:background .15s ease;
}
.btn-otp:hover{ background:#e0972a; }

/* full-width variant used on the login page (single shared Send OTP button) */
.btn-otp-full{
    display:block;
    width:100%;
    padding:12px 0;
    margin-bottom:20px;
}

.lb-otp-box{
    display:none;
    margin-top:4px;
}
.lb-otp-box.show{ display:block; }

@keyframes shake{
    0%, 100%{ transform:translateX(0); }
    20%{ transform:translateX(-8px); }
    40%{ transform:translateX(8px); }
    60%{ transform:translateX(-6px); }
    80%{ transform:translateX(6px); }
}
.shake{
    animation:shake .4s ease;
    border-color:#C4433B !important;
}

.lb-timer{
    font-size:12px;
    color:#5B6478;
    margin-top:6px;
}
.lb-timer span{ color:#1E5AA8; font-weight:700; }
.lb-timer a{ color:#1E5AA8; font-weight:700; text-decoration:none; margin-left:10px; }
.lb-timer a:hover{ text-decoration:underline; }

.btn-login{
    width:100%;
    background:#0F2C58;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:13px;
    font-size:14.5px;
    font-weight:700;
    letter-spacing:.02em;
    cursor:pointer;
    margin-top:8px;
    transition:background .15s ease;
}
.btn-login:hover{ background:#1E5AA8; }

.lb-msg{
    font-size:12.5px;
    margin-top:10px;
    display:none;
}
.lb-msg.show{ display:block; }
.lb-msg.success{ color:#1a7a3c; }
.lb-msg.error{ color:#C4433B; }

@media (max-width: 900px){
    .login-banner{ padding:40px 5%; }
    .login-banner .lb-wrap{ flex-direction:column; gap:28px; }
    .login-banner .lb-photo{ flex:0 0 auto; width:100%; }
    .login-banner .lb-photo img{ min-height:220px; }
    .login-banner .lb-card{ flex:0 0 auto; width:100%; padding:28px 22px; }
}

/* ===== View Profile / Dashboard Page ===== */
.vp-wrap{
    max-width:1400px;
    margin:0 auto;
    padding:28px 6% 60px;
}

/* search bar */
.vp-search{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:#E9EEF6;
    border:1px solid #D3DCEA;
    border-radius:8px;
    padding:16px 20px;
    margin-bottom:22px;
    flex-wrap:wrap;
}
.vp-search .vp-search-label{
    font-size:14.5px;
    font-weight:700;
    color:#0F2C58;
}
.vp-search .vp-search-box{
    display:flex;
    align-items:center;
    background:#fff;
    border:1px solid #D3DCEA;
    border-radius:8px;
    overflow:hidden;
    min-width:280px;
    flex:1;
    max-width:420px;
}
.vp-search .vp-search-box input{
    border:none;
    outline:none;
    padding:11px 14px;
    font-size:13.5px;
    width:100%;
}
.vp-search .vp-search-box button{
    background:#0F2C58;
    border:none;
    color:#fff;
    padding:11px 16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.vp-search .vp-search-box button:hover{ background:#1E5AA8; }

/* main grid */
.vp-grid{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:22px;
}
@media (max-width:900px){
    .vp-grid{ grid-template-columns:1fr; }
}

/* profile card */
.vp-profile-card{
    background:#F0F3F8;
    border:1px solid #DEE3EC;
    padding:26px;
    display:flex;
    gap:26px;
    margin-bottom:26px;
    flex-wrap:wrap;
}
.vp-profile-card .vp-photo{
    width:180px;
    height:190px;
    flex-shrink:0;
    border:3px solid #0F2C58;
    overflow:hidden;
    background:#fff;
}
.vp-profile-card .vp-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.vp-profile-card .vp-info{ flex:1; min-width:220px; }
.vp-profile-card .vp-info h2{
    font-family:'Archivo',sans-serif;
    font-size:22px;
    font-weight:800;
    color:#0F2C58;
    margin-bottom:12px;
}
.vp-profile-card .vp-info p{
    font-size:14px;
    color:#33394A;
    margin-bottom:9px;
    line-height:1.5;
}
.vp-profile-card .vp-info p b{ color:#0F2C58; font-weight:700; }
.vp-profile-card .vp-info p a{ color:#1E5AA8; text-decoration:none; }
.vp-profile-card .vp-info p a:hover{ text-decoration:underline; }

.vp-btn{
    display:inline-block;
    background:#0F2C58;
    color:#fff;
    border:none;
    border-radius:22px;
    padding:12px 26px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.04em;
    cursor:pointer;
    margin-top:6px;
    text-decoration:none;
    transition:background .15s ease;
}
.vp-btn:hover{ background:#1E5AA8; color:#fff; }

/* request a contact section */
.vp-section-title{
    font-family:'Archivo',sans-serif;
    font-size:16px;
    font-weight:800;
    color:#0F2C58;
    margin-bottom:14px;
}
.vp-table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:20px;
}
.vp-table thead th{
    background:#F0F3F8;
    text-align:left;
    padding:13px 16px;
    font-size:13px;
    font-weight:700;
    color:#0F2C58;
    border:1px solid #DEE3EC;
}
.vp-table tbody td{
    padding:14px 16px;
    font-size:13.5px;
    color:#5B6478;
    border:1px solid #DEE3EC;
}
.vp-table tbody tr.vp-empty td{
    text-align:center;
    color:#A6ADBB;
    padding:22px;
}

/* sidebar */
.vp-sidebar{
    background:#0F2C58;
    overflow:hidden;
    /* align-self:start; */
}
.vp-sidebar .vp-welcome{
    padding:20px 22px;
    font-family:'Archivo',sans-serif;
    font-size:17px;
    font-weight:800;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.15);
}
.vp-sidebar ul{
    list-style:none;
    padding:10px 0;
}
.vp-sidebar ul li a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 22px;
    color:rgba(255,255,255,.88);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    transition:background .15s ease;
}
.vp-sidebar ul li a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.vp-sidebar ul li a svg{ flex-shrink:0; }
.vp-sidebar ul li.vp-logout a{ color:#F2A93B; }

/* ===== View Profile Details (readonly) page ===== */
.vp-topbar{
    display:flex;
    justify-content:flex-end;
    margin-bottom:18px;
}
.vp-back-btn{
    display:inline-block;
    background:#0F2C58;
    color:#fff;
    text-decoration:none;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.03em;
    padding:11px 22px;
    border-radius:22px;
    transition:background .15s ease;
}
.vp-back-btn:hover{ background:#1E5AA8; color:#fff; }

.vp-profile-card-full{
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
}
.vp-updated-block{
    text-align:right;
    flex:0 0 200px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}
.vp-updated-label{
    font-size:12.5px;
    font-weight:700;
    color:#0F2C58;
}
.vp-updated-date{
    font-size:13px;
    color:#5B6478;
    margin-bottom:6px;
}

.vp-detail-section{
    background:#FBF3E4;
    border:1px solid #F0D9A8;
    padding:22px 26px;
    margin-bottom:20px;
}
.vp-detail-section .vp-section-title{
    margin-bottom:6px;
}
.vp-hr{
    border:none;
    border-top:2px solid #0F2C58;
    margin-bottom:18px;
    width:100%;
}
.vp-detail-row{
    display:flex;
    padding:9px 0;
    font-size:14px;
    border-bottom:1px dashed #E7D5A6;
}
.vp-detail-row:last-child{ border-bottom:none; }
.vp-detail-label{
    flex:0 0 220px;
    font-weight:700;
    color:#33394A;
}
.vp-detail-value{
    color:#5B6478;
}
@media (max-width:600px){
    .vp-detail-row{ flex-direction:column; gap:2px; }
    .vp-detail-label{ flex:none; }
}

/* ===== Edit Profile form ===== */
.vp-alert{
    padding:13px 18px;
    border-radius:8px;
    font-size:13.5px;
    font-weight:600;
    margin-bottom:20px;
}
.vp-alert-success{
    background:#E7F6EC;
    border:1px solid #B7E4C4;
    color:#1a7a3c;
}
.vp-alert-error{
    background:#FCEBEA;
    border:1px solid #F3C3C0;
    color:#C4433B;
}

.vp-edit-row{
    margin-bottom:18px;
}
.vp-edit-row:last-child{ margin-bottom:0; }
.vp-edit-label{
    display:block;
    font-size:12.5px;
    font-weight:700;
    color:#0F2C58;
    margin-bottom:6px;
}
.vp-edit-input,
.vp-edit-textarea{
    width:100%;
    border:1.5px solid #E7D5A6;
    border-radius:8px;
    padding:11px 13px;
    font-size:14px;
    font-family:'Manrope',sans-serif;
    outline:none;
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.vp-edit-input:focus,
.vp-edit-textarea:focus{
    border-color:#1E5AA8;
    box-shadow:0 0 0 3px rgba(30,90,168,.13);
}
.vp-edit-input:disabled{
    background:#F0F3F8;
    color:#8890A0;
    cursor:not-allowed;
}
.vp-edit-textarea{ resize:vertical; }
.vp-edit-note{
    display:block;
    font-size:11.5px;
    color:#8890A0;
    margin-top:5px;
}

.vp-edit-form{ margin-top:0; }
.vp-btn-save{
    border:none;
    cursor:pointer;
    font-family:'Manrope',sans-serif;
    margin-right:10px;
}
.vp-btn-cancel{
    background:transparent;
    color:#5B6478;
    border:1.5px solid #DEE3EC;
}
.vp-btn-cancel:hover{
    background:#F0F3F8;
    color:#0F2C58;
}

/* ===== Edit Profile card (screenshot layout) ===== */
.vp-edit-card{
    background:#DCE6F5;
    border:1px solid #C7D6EC;
    padding:26px;
    position:relative;
}
.vp-edit-note-top{
    text-align:right;
    font-size:12.5px;
    font-weight:700;
    color:#33394A;
    margin-bottom:14px;
}

.vp-edit-top{
    display:flex;
    gap:34px;
    margin-bottom:26px;
    flex-wrap:wrap;
}
.vp-edit-photo-block{
    flex:0 0 190px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
}
.vp-edit-photo-block .vp-photo{
    width:190px;
    height:190px;
    flex-shrink:0;
    border:3px solid #0F2C58;
    overflow:hidden;
    background:#fff;
}
.vp-edit-photo-block .vp-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.vp-edit-photo-block .vp-btn{
    width:100%;
    text-align:center;
    border:none;
    cursor:pointer;
    font-family:'Manrope',sans-serif;
}

.vp-edit-top-fields{
    flex:1;
    min-width:280px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.req{ color:#C4433B; }

.vp-edit-readonly-row{
    font-size:14px;
    color:#33394A;
}
.vp-edit-ro-label{
    font-weight:700;
    color:#33394A;
}
.vp-edit-ro-value{
    color:#33394A;
    margin-left:4px;
}
.vp-edit-ro-value-block{
    display:block;
    margin-left:0;
    margin-top:4px;
}
.vp-edit-lock{
    font-size:12.5px;
    color:#33394A;
    font-weight:700;
    margin-left:4px;
}
.vp-info-icon{
    display:inline-block;
    cursor:help;
    color:#5B6478;
}

.vp-edit-row{ margin-bottom:0; }
.vp-edit-label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:#33394A;
    margin-bottom:6px;
}
.vp-edit-input,
.vp-edit-textarea{
    width:100%;
    border:1px solid #C7D6EC;
    border-radius:4px;
    padding:11px 13px;
    font-size:14px;
    font-family:'Manrope',sans-serif;
    outline:none;
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.vp-edit-input:focus,
.vp-edit-textarea:focus{
    border-color:#1E5AA8;
    box-shadow:0 0 0 3px rgba(30,90,168,.13);
}
.vp-edit-input:disabled{
    background:#F0F3F8;
    color:#8890A0;
    cursor:not-allowed;
}
.vp-edit-textarea{ resize:vertical; }
.vp-edit-note{
    display:block;
    font-size:11.5px;
    color:#8890A0;
    margin-top:5px;
}

/* section bars, like "1. Clinic Details" / "2. Personal Details" */
.vp-section-bar{
    background:#0F2C58;
    color:#fff;
    font-family:'Archivo',sans-serif;
    font-size:15px;
    font-weight:800;
    padding:13px 20px;
    margin-bottom:0;
}
.vp-section-body{
    background:#DCE6F5;
    padding:22px 20px 28px;
    margin-bottom:0;
}

.vp-2col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 30px;
}
.vp-2col-item{ align-self:start; }
@media (max-width:700px){
    .vp-2col{ grid-template-columns:1fr; }
}

.vp-edit-actions{
    padding-top:24px;
}