:root{
--primary:#2563EB;
--bg:#F8FAFC;
--card:#FFFFFF;
--border:#E2E8F0;
--dark:#0F172A;
--text:#64748B;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Inter,sans-serif;
background:var(--bg);
color:var(--dark);
}

.cust_container{
max-width:1800px;
margin:auto;
padding:30px;
}

.hero{

background:
linear-gradient(
135deg,
#2563EB,
#1D4ED8
);

padding:50px;
border-radius:32px;
color:white;
display:flex;
justify-content:space-between;
gap:30px;
flex-wrap:wrap;
margin-bottom:24px;
}

.hero h1{
font-size:46px;
margin-bottom:12px;
}

.hero small{
    color:white;
}


.hero p{
max-width:720px;
line-height:1.8;
}

.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
height: fit-content;
}


.cust_breadcrumb {
    #color: #CBD5E1;
    margin-bottom: 25px;
    font-size: 14px;
}

.cust_breadcrumb a{
    #color: #CBD5E1;
}


.cust_btn{
background:white;
color:#2563EB;
padding:14px 20px;
border-radius:14px;
font-weight:700;
text-decoration:none;
}

.cust_btn-primary{
    background: var(--primary);
    color: white;
}


.cust_btn-secondary{
    background:#F1F5F9;
    color:var(--dark);
}

.hub_btn{
    display:block;
    text-align:center;
    background:var(--primary);
    color:white;
    text-decoration:none;
    padding:12px;
    border-radius:14px;
    font-weight:600;
    margin-top:15px;
}

.hub_btn{
    padding:12px;
    border-radius:14px;
    text-decoration:none;
    text-align:center;
    font-weight:600;
}


.hub_btn-primary{
    background:var(--primary);
    color:white;
}

.hub_btn-secondary{
    background:#F1F5F9;
    color:var(--dark);
}



.filters{
display:grid;
grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr));
gap:14px;
margin-bottom:22px;
}

.filter{
background:white;
padding:18px;
border-radius:18px;
border:1px solid var(--border);
cursor:pointer;
}

.filter.active{
background:#2563EB;
color:white;
}

.kpis{
display:grid;
grid-template-columns: repeat( 3, 1fr); 
gap:20px;
margin-bottom:24px;
}

.kpi{
background:white;
padding:24px;
border-radius:24px;
}

.kpi strong{
display:block;
font-size:34px;
color:#2563EB;
margin-bottom:8px;
}

.layout{
display:grid;
grid-template-columns: 2fr 420px; gap:24px; 
}

.grid{
display:grid;
grid-template-columns: 1fr 1fr; gap:24px;
margin-bottom:24px;
}

#map{
height:320px;
border-radius:20px;
}

.cust_card{
background:white;
padding:28px;
border-radius:28px;
margin-bottom:24px;
}

.favourites{
display:grid;
grid-template-columns: repeat( auto-fit, minmax( 340px, 1fr)); 
gap:20px;
}

.favourite{
border-radius:24px;
padding:26px;
background: linear-gradient( 135deg, #EFF6FF, white); 
border:1px solid #DBEAFE;
}

.customer-top{
display:flex;
gap:18px;
align-items:center;
margin-bottom:18px;
}

.customer-row{
display:flex;
gap:20px;
align-items:center;
}

.avatar{
width:72px;
height:72px;
border-radius:20px;
background:#DBEAFE;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:800;
color:#2563EB;
}

.stats{
display:grid;
grid-template-columns: repeat( 4, 1fr); 
gap:12px;
margin-top:20px;
}

.stat{
padding:14px;
background:white;
border-radius:14px;
text-align:center;
}

.customer-grid{
display:grid;
grid-template-columns: repeat( auto-fit, minmax( 380px, 1fr)); 
gap:20px;
}

.customer{
border:1px solid var(--border);
padding:24px;
border-radius:22px;
}

.cust_tags{
display:flex;
gap:8px;
margin:16px 0;
flex-wrap:wrap;
}

.cust_tag{
padding:8px 12px;
border-radius:999px;
background:#DBEAFE;
color:#2563EB;
font-size:12px;
font-weight:700;
}

.cust_actions{
display:flex;
gap:10px;
margin-top:20px;
flex-wrap:wrap;
}

.cust_action{
padding:12px 16px;
background:#2563EB;
color:white;
border-radius:12px;
text-decoration:none;
}

.side-card{
background:white;
padding:24px;
border-radius:24px;
margin-bottom:20px;
}

.feed{
display:flex;
flex-direction:column;
gap:16px;
}

.feed-item{
padding-bottom:14px;
border-bottom:1px solid #F1F5F9;
}

.metric{
font-size:34px;
color:#2563EB;
font-weight:800;
margin-bottom:8px;
}

//# added alphabet filter

.alpha-toolbar{

margin-top:20px;

}

.alpha-grid{

display:grid;

grid-template-columns:
repeat(
14,
1fr
);

gap:10px;

}

.alpha{

height:46px;

border:none;

border-radius:14px;

background:#F8FAFC;

cursor:pointer;

font-weight:700;

transition:.2s;

}

.alpha:hover{

background:#DBEAFE;

}

.alpha.active{

background:#2563EB;

color:white;

}

.alpha-summary{

margin-top:18px;

color:var(--text);

}


//##### project related 
.project2{}

.project{
border:1px solid var(--border);
border-radius:22px;
padding:26px;
margin-bottom:18px;
}

.project-top{
display:flex;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
margin-bottom:18px;
}

.progress{
height:14px;
background:#E2E8F0;
border-radius:999px;
overflow:hidden;
margin:18px 0;
}

.progress-fill{
height:100%;
background:
linear-gradient( 90deg, #2563EB, #60A5FA);
}

.meta{
display:grid;
grid-template-columns: repeat( 2, 1fr);
gap:14px;
margin-top:20px;
}

.meta-box{
background:#F8FAFC;
padding:18px;
border-radius:16px;
}

.tasks{
margin-top:20px;
display:flex;
flex-direction:column;
gap:12px;
}

.task{
display:flex;
justify-content:space-between;
gap:20px;
padding:16px;
background:#F8FAFC;
border-radius:16px;
}

.task-left{
display:flex;
gap:14px;
align-items:center;
}

.task-right{
display:flex;
gap:14px;
align-items:right;
}


.task input{
width:20px;
height:20px;
}

.jobs_toggle{
padding:6px 10px;
border-radius:999px;
background:#DBEAFE;
color:#2563EB;
font-size:12px;
font-weight:700;
}

.cust_actions{
display:flex;
gap:10px;
margin-top:20px;
flex-wrap:wrap;
}

.cust_action{
padding:12px 16px;
background:#2563EB;
color:white;
border-radius:12px;
text-decoration:none;
}

/* APPOINTMENTS */

.appointment{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border:1px solid var(--border);
    border-radius:20px;
    margin-bottom:15px;
}

.status{
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.confirmed{
    background:#DCFCE7;
    color:#166534;
}

.pending{
    background:#FEF3C7;
    color:#92400E;
}

/* ENQUIRIES */

.enquiry-card{
    border:1px solid #E2E8F0;
    border-radius:20px;
    padding:24px;
    margin-bottom:20px;
}

.enquiry-top{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
}

.enquiry-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.enquiry-meta{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:20px;
}

.enquiry-response{
    background:#F8FAFC;
    padding:20px;
    border-radius:16px;
    margin-bottom:20px;
}

.enquiry-actions{
    display:flex;
    gap:12px;
}

.status-new{
    background:#DBEAFE;
    color:#1D4ED8;
}

.status-waiting{
    background:#FEF3C7;
    color:#92400E;
}

.status-quoted{
    background:#DCFCE7;
    color:#166534;
}

.status-accepted{
    background:#D1FAE5;
    color:#065F46;
}

.quote{
    background:#F8FAFC;
    padding:15px;
    border-radius:14px;
    margin-top:20px;
}


@media(max-width:1000px){

.alpha-grid{
grid-template-columns: repeat( 7, 1fr); }
}

@media(max-width:640px){

.alpha-grid{
grid-template-columns: repeat( 4, 1fr); 
}

}





@media(max-width:900px){

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

grid-template-columns:
repeat( 6, 1fr); } 
}

@media(max-width:520px){

.alpha-grid{
grid-template-columns: repeat( 4, 1fr); } 
}

@media(max-width:1400px){

.kpis{
grid-template-columns: repeat( 3, 1fr); 
}

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

}

@media(max-width:768px){

.cust_container{
padding-left:0px;
padding-right:0px;
padding-top:13px;
padding-bottom:13px;
}

.kpis{
grid-template-columns: repeat( 3, 1fr); 
gap: 5px;

}

.customer-grid{
display:grid;
grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr));
gap:20px;
}

.cust_card{
padding-left:5px;
padding-right:5px;
}


}