/* =========================================================
GLOBAL
========================================================= */

body{
margin:0;
padding:0;
background:#f4f6f9;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
color:#111827;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

/* =========================================================
LAYOUT
========================================================= */

.vcs-wrap{
width:100%;
max-width:980px;
margin:40px auto;
padding:16px;
box-sizing:border-box;
}

.vcs-card{
background:#ffffff;
border-radius:32px;
padding:24px;
box-shadow:
0 12px 40px rgba(0,0,0,0.06),
0 2px 8px rgba(0,0,0,0.03);
border:1px solid rgba(0,0,0,0.04);
overflow:hidden;
}

/* =========================================================
LOGO
========================================================= */

.vcs-logo-wrap{
text-align:center;
margin-bottom:28px;
}

.vcs-logo{
max-width:240px;
width:100%;
height:auto;
display:inline-block;
}

/* =========================================================
HEADINGS
========================================================= */

.vcs-title{
font-size:34px;
font-weight:800;
line-height:1.05;
letter-spacing:-1px;
margin:0 0 16px;
text-align:center;
color:#111827;
}

.vcs-subtitle{
font-size:16px;
line-height:1.6;
color:#6b7280;
text-align:center;
margin:0 auto 34px;
max-width:640px;
}

/* =========================================================
GRID
========================================================= */

.vcs-grid{
display:grid;
grid-template-columns:1fr;
gap:18px;
}

/* =========================================================
FORM ELEMENTS
========================================================= */

.vcs-wrap label{
display:block;
font-size:14px;
font-weight:700;
margin-bottom:8px;
color:#111827;
}

.vcs-wrap input,
.vcs-wrap select,
.vcs-wrap textarea{
width:100%;
padding:16px;
border-radius:18px;
border:1px solid #d1d5db;
background:#fff;
box-sizing:border-box;
font-size:15px;
transition:all .2s ease;
margin-bottom:18px;
outline:none;
}

.vcs-wrap textarea{
min-height:140px;
resize:vertical;
}

.vcs-wrap input:focus,
.vcs-wrap select:focus,
.vcs-wrap textarea:focus{
border-color:#6a0dad;
box-shadow:0 0 0 4px rgba(106,13,173,0.10);
}

/* =========================================================
BUTTONS
========================================================= */

.vcs-btn{
display:flex;
align-items:center;
justify-content:center;
width:100%;
padding:18px;
border:none;
border-radius:20px;
background:#6a0dad;
color:#fff !important;
font-size:16px;
font-weight:700;
cursor:pointer;
text-align:center;
text-decoration:none;
transition:all .2s ease;
}

.vcs-btn:hover{
transform:translateY(-1px);
opacity:.95;
}

.vcs-btn:active{
transform:translateY(0);
}

.vcs-logout{
margin-top:22px;
background:#111827;
}

/* =========================================================
SECTIONS
========================================================= */

.vcs-section{
padding:28px 0;
border-top:1px solid #ececec;
}

.vcs-section:first-of-type{
border-top:none;
padding-top:0;
}

.vcs-section-title{
font-size:24px;
font-weight:800;
margin:0 0 22px;
line-height:1.2;
color:#111827;
}

/* =========================================================
PROGRESS
========================================================= */

.vcs-progress-wrap{
width:100%;
height:12px;
background:#ececec;
border-radius:999px;
overflow:hidden;
margin:22px 0 30px;
}

.vcs-progress-bar{
height:100%;
background:#6a0dad;
border-radius:999px;
transition:width .3s ease;
}

/* =========================================================
SUMMARY BOX
========================================================= */

.vcs-summary-box{
background:#f7f1ff;
padding:26px;
border-radius:24px;
margin:28px 0;
border:1px solid rgba(106,13,173,0.10);
}

.vcs-summary-box h3{
margin:0 0 12px;
font-size:20px;
font-weight:800;
}

.vcs-summary-box p{
margin:0;
line-height:1.7;
color:#374151;
}

/* =========================================================
DASHBOARD GRID
========================================================= */

.vcs-dashboard-grid{
display:grid;
grid-template-columns:1fr;
gap:18px;
margin-top:32px;
}

/* =========================================================
MINI CARDS
========================================================= */

.vcs-mini-card{
background:#fafafa;
padding:22px;
border-radius:24px;
border:1px solid #ececec;
transition:all .2s ease;
}

.vcs-mini-card:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.04);
}

.vcs-mini-card h4{
margin:0 0 12px;
font-size:16px;
font-weight:800;
color:#111827;
}

.vcs-mini-card p{
margin:0;
font-size:15px;
line-height:1.5;
color:#4b5563;
}

/* =========================================================
APPLICATION STATUS BADGES
========================================================= */

.vcs-status{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 14px;
border-radius:999px;
font-size:12px;
font-weight:700;
line-height:1;
color:#fff;
white-space:nowrap;
}

.vcs-status-new{
background:#0073aa;
}

.vcs-status-contacted{
background:#6a0dad;
}

.vcs-status-interested{
background:#ff9800;
}

.vcs-status-pending-payment{
background:#f57c00;
}

.vcs-status-registered{
background:#2e7d32;
}

.vcs-status-completed{
background:#1b5e20;
}

.vcs-status-cancelled{
background:#c62828;
}

.vcs-status-no-response{
background:#757575;
}

/* =========================================================
CRM ACTION BUTTONS
========================================================= */

.vcs-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
min-width:180px;
}

.vcs-action-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 14px;
border-radius:999px;
font-size:12px;
font-weight:700;
text-decoration:none;
color:#fff !important;
line-height:1;
transition:all .2s ease;
white-space:nowrap;
}

.vcs-action-btn:hover{
opacity:.92;
transform:translateY(-1px);
}

.vcs-whatsapp{
background:#25D366;
}

.vcs-call{
background:#0073aa;
}

.vcs-edit{
background:#111827;
}

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

.vcs-timeline{
display:flex;
flex-direction:column;
gap:14px;
padding-top:10px;
}

.vcs-timeline-item{
position:relative;
padding:14px 14px 14px 18px;
background:#fafafa;
border-radius:16px;
border:1px solid #ececec;
font-size:13px;
line-height:1.5;
}

.vcs-timeline-item::before{
content:'';
position:absolute;
left:0;
top:0;
width:4px;
height:100%;
background:#6a0dad;
border-radius:20px;
}

.vcs-timeline-item strong{
display:block;
margin-bottom:6px;
font-size:13px;
font-weight:700;
color:#111827;
}

.vcs-timeline-item small{
font-size:11px;
color:#6b7280;
}

/* =========================================================
FOLLOWUPS DASHBOARD
========================================================= */

.vcs-followups{
display:flex;
flex-direction:column;
gap:14px;
}

.vcs-followup-item{
padding:16px;
background:#fafafa;
border:1px solid #ececec;
border-radius:16px;
}

.vcs-followup-item h4{
margin:0 0 10px;
font-size:15px;
font-weight:700;
color:#111827;
}

.vcs-followup-item p{
margin:0 0 14px;
font-size:13px;
line-height:1.6;
color:#4b5563;
}

/* =========================================================
CRM DASHBOARD
========================================================= */

.vcs-admin-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:16px;
margin-top:10px;
}

.vcs-admin-card{
background:#fff;
border:1px solid #ececec;
border-radius:18px;
padding:22px;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,0.03);
}

.vcs-admin-card h3{
margin:0 0 10px;
font-size:34px;
font-weight:800;
line-height:1;
color:#6a0dad;
}

.vcs-admin-card p{
margin:0;
font-size:14px;
font-weight:600;
color:#4b5563;
}

/* =========================================================
ADMIN METABOX STYLING
========================================================= */

#vcs_application_details .inside,
#vcs_application_timeline .inside{
padding:18px;
background:#fff;
}

#vcs_application_details label,
#vcs_application_timeline label{
font-weight:700;
font-size:13px;
color:#111827;
}

#vcs_application_details input,
#vcs_application_details select,
#vcs_application_details textarea{
border:1px solid #d1d5db;
border-radius:14px;
padding:12px 14px;
font-size:14px;
box-shadow:none;
transition:all .2s ease;
}

#vcs_application_details input:focus,
#vcs_application_details select:focus,
#vcs_application_details textarea:focus{
border-color:#6a0dad;
box-shadow:0 0 0 3px rgba(106,13,173,0.08);
outline:none;
}

/* =========================================================
ADMIN TABLE IMPROVEMENTS
========================================================= */

.wp-list-table .column-status{
width:140px;
}

.wp-list-table .column-actions{
width:260px;
}

.wp-list-table .column-phone{
width:150px;
}

.wp-list-table .column-consultant{
width:170px;
}

.wp-list-table td{
vertical-align:middle;
}

/* =========================================================
MOBILE OPTIMIZATION
========================================================= */

@media(max-width:782px){

.vcs-actions{
flex-direction:column;
align-items:flex-start;
}

.vcs-action-btn{
width:100%;
justify-content:center;
}

.vcs-status{
width:100%;
justify-content:center;
}

}

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

@media(min-width:768px){

.vcs-grid{
grid-template-columns:1fr 1fr;
}

.vcs-dashboard-grid{
grid-template-columns:1fr 1fr;
}

.vcs-card{
padding:48px;
}

.vcs-title{
font-size:52px;
}

}

@media(min-width:1200px){

.vcs-dashboard-grid{
grid-template-columns:1fr 1fr 1fr;
}

}