/* ======================================
   CANAHR CLIENT PORTAL
====================================== */

.canahr-client-portal{

max-width:1100px;

margin:50px auto;

padding:40px;

background:#ffffff;

border-radius:22px;

box-shadow:0 20px 60px rgba(0,0,0,.08);

overflow:hidden;

}

.canahr-client-portal h2{

font-size:38px;

font-weight:700;

text-align:center;

margin-bottom:10px;

color:#0f172a;

}

.canahr-client-portal p{

text-align:center;

color:#64748b;

margin-bottom:30px;

}
/* ======================================
   SEARCH BOX
====================================== */

.canahr-client-portal form{

display:flex;

gap:15px;

justify-content:center;

align-items:center;

flex-wrap:wrap;

margin-bottom:45px;

}

.canahr-client-portal input[type="text"]{

width:420px;

max-width:100%;

height:56px;

padding:0 20px;

border:1px solid #dbe4ee;

border-radius:14px;

font-size:16px;

outline:none;

transition:.3s;

background:#f8fafc;

}

.canahr-client-portal input[type="text"]:focus{

border-color:#2563eb;

background:#fff;

box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.canahr-client-portal button{

height:56px;

padding:0 28px;

border:none;

border-radius:14px;

background:#2563eb;

color:#fff;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.canahr-client-portal button:hover{

background:#1d4ed8;

transform:translateY(-2px);

box-shadow:0 12px 30px rgba(37,99,235,.25);

}

/* ======================================
   CLIENT INFORMATION CARD
====================================== */

.canahr-client-header{

display:grid;

grid-template-columns:90px 1fr;

align-items:center;

gap:25px;

background:#ffffff;

border:1px solid #e5e7eb;

border-radius:22px;

padding:30px;

margin-bottom:35px;

box-shadow:0 15px 40px rgba(15,23,42,.06);

}

.canahr-client-header h3{

margin:0 0 20px;

font-size:28px;

font-weight:700;

color:#111827;

}

.canahr-client-header p{

display:flex;

justify-content:space-between;

align-items:center;

margin:12px 0;

padding-bottom:12px;

border-bottom:1px solid #f1f5f9;

font-size:15px;

color:#374151;

text-align:left;

}

.canahr-client-header p:last-child{

border-bottom:none;

padding-bottom:0;

}

.canahr-client-header strong{

color:#0f172a;

font-weight:600;

}

.canahr-status{

display:inline-block;

padding:8px 16px;

border-radius:999px;

font-size:13px;

font-weight:700;

background:#dcfce7;

color:#166534;

}

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

.canahr-timeline-card{

background:#ffffff;

border:1px solid #e5e7eb;

border-left:5px solid #2563eb;

border-radius:18px;

padding:25px;

margin-bottom:25px;

box-shadow:0 10px 25px rgba(15,23,42,.05);

transition:all .3s ease;

}

.canahr-timeline-card:hover{

transform:translateY(-3px);

box-shadow:0 18px 40px rgba(15,23,42,.10);

}

.canahr-timeline-card h4{

margin:0 0 18px;

font-size:22px;

font-weight:700;

color:#111827;

}

.canahr-timeline-card p{

display:flex;

justify-content:space-between;

align-items:center;

margin:12px 0;

padding-bottom:10px;

border-bottom:1px solid #f3f4f6;

text-align:left;

}

.canahr-timeline-card p:last-of-type{

border-bottom:none;

}

.canahr-timeline-card strong{

color:#374151;

}

.canahr-timeline-card small{

display:block;

margin-top:18px;

color:#6b7280;

font-size:13px;

}

.canahr-timeline-card .button{

display:inline-block;

margin-top:15px;

background:#2563eb;

color:#ffffff;

padding:12px 22px;

border-radius:12px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.canahr-timeline-card .button:hover{

background:#1d4ed8;

}


/* ======================================
   BADGES
====================================== */

.canahr-badge{

display:inline-block;

padding:6px 14px;

border-radius:50px;

font-size:13px;

font-weight:600;

}

.canahr-approved{

background:#dcfce7;

color:#166534;

}

.canahr-processing{

background:#dbeafe;

color:#1d4ed8;

}

.canahr-pending{

background:#fef3c7;

color:#92400e;

}

.canahr-rejected{

background:#fee2e2;

color:#991b1b;

}

.canahr-paid{

background:#dcfce7;

color:#166534;

}

.canahr-unpaid{

background:#fef3c7;

color:#92400e;

}

.canahr-refunded{

background:#e0e7ff;

color:#4338ca;

}

/* ======================================
   NO RECORD CARD
====================================== */

.canahr-no-updates{

background:#ffffff;

border:1px solid #e5e7eb;

border-radius:18px;

padding:35px;

text-align:center;

margin-top:30px;

box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.canahr-no-updates p{

margin:0;

font-size:16px;

color:#6b7280;

}

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

@media(max-width:768px){

.canahr-client-portal{

margin:20px;

padding:22px;

border-radius:16px;

}

.canahr-client-portal h2{

font-size:28px;

}

.canahr-client-header{

padding:20px;

}

.canahr-client-header h3{

font-size:22px;

}

.canahr-client-header{
    grid-template-columns:60px 1fr;
    gap:15px;
    padding:18px;
}

.canahr-avatar{
    width:60px;
    height:60px;
    font-size:28px;
}

.canahr-client-header h3{
    font-size:26px;
    margin-bottom:18px;
    text-align:left;
}

.canahr-client-header p{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    font-size:14px;
    margin:10px 0;
    text-align:left;
}

.canahr-client-header strong{
    min-width:120px;
}

.canahr-status{
    padding:6px 14px;
    font-size:12px;
}

.canahr-timeline-card{

padding:18px;

}

.canahr-timeline-card h4{

font-size:18px;

}

.canahr-timeline-card p{

display:block;

}

.canahr-client-portal input[type=text]{

width:100%;

}

.canahr-client-portal button{

width:100%;

}

}

.canahr-avatar{

width:80px;

height:80px;

border-radius:50%;

background:#eff6ff;

display:flex;

align-items:center;

justify-content:center;

font-size:38px;

}

.canahr-client-info h3{

margin:0 0 28px;

font-size:30px;

font-weight:700;

color:#0f172a;

}

.canahr-info-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

margin:8px 0;

border-top:1px solid #eef2f7;

font-size:16px;

}

.canahr-info-row:first-of-type{

border-top:none;

}

.canahr-label{

font-weight:600;

color:#64748b;

}

.canahr-value{

font-weight:600;

color:#111827;

}


.canahr-client-info{
width:100%;
}

.canahr-info-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
flex-wrap:nowrap;
}

.canahr-label{
white-space:nowrap;
font-weight:700;
}

.canahr-value{
text-align:right;
font-weight:600;
}

@media(max-width:768px){

.canahr-client-header{
grid-template-columns:60px 1fr;
padding:18px;
gap:15px;
}

.canahr-info-row{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:nowrap;
}

.canahr-label{
font-size:14px;
}

.canahr-value{
font-size:14px;
text-align:right;
}

}