:root{
    --primary:#2563EB;
    --primary-light:#DBEAFE;
    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;
    --bg:#F8FAFC;
    --card:#FFFFFF;
    --border:#E2E8F0;
    --dark:#0F172A;
    --text:#64748B;
}

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

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

.sr_container{
    max-width:1600px;
    margin:auto;
    padding-top: 50px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
}

.sr_container2{
    max-width:1600px;
    margin:auto;
    padding-top: 0px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
}

.sr_hero{
    background:linear-gradient(135deg,#2563EB,#1D4ED8);
    color:white;
    border-radius:30px;
    padding:50px;
    margin-bottom:30px;
//    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sr_detail-hero{
    background:linear-gradient(135deg,#2563EB,#1D4ED8);
    color:white;
    border-radius:30px;
    padding:50px;
    margin-bottom:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}


.sr_hero h1{
    font-size:42px;
    margin-bottom:10px;
}

.sr_hero p{
    opacity:.95;
    font-size:18px;
}

.sr_hero small{
    color:white;
}

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

.sr_hero-tag{
background:rgba(255,255,255,.15);
padding:8px 14px;
border-radius:999px;
font-size:14px;
}

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

.sr_breadcrumb a{
    color: #CBD5E1;
}



.sr_property-layout{
display:grid;
grid-template-columns:1fr 500px;
gap:30px;
align-items:center;
}

.sr_property-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-top:25px;
}

.sr_property-stat{
background:#F8FAFC;
padding:15px;
border-radius:14px;
border:1px solid var(--border);
}

#propertyMap{
height:340px;
border-radius:20px;
overflow:hidden;
border:1px solid var(--border);
}


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

.kpi-grid2{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:30px;
}

.kpi-grid3{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom:30px;
}



.kpi{
    background:white;
    padding:25px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.kpi-card{
    background:white;
    padding:25px;
    border-radius:24px;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.kpi-card h4{
    color:var(--text);
    margin-bottom:10px;
}

.kpi-value{
    font-size:36px;
    font-weight:800;
    color:var(--primary);
}


.sr_layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
}

.sr_page-layout{
    display:grid;
    grid-template-columns:3fr 1fr;
    gap:30px;
}

.sr_stack{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.sr_grid-two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.info-row{
    padding:12px 0;
    border-bottom:1px solid var(--border);
}

.info-row:last-child{
    border-bottom:none;
}

.action-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.sr_btn{
    display:block;
    text-align:center;
    text-decoration:none;
    padding:14px;
    border-radius:14px;
    font-weight:600;
    border: none;
}

.sr_btn-primary{
    background:var(--primary);
    color:white;
    border: none;
}

.sr_btn-secondary{
    background:#F1F5F9;
    color:var(--dark);
    border: none;
}

.chat{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.message{
    max-width:80%;
    padding:18px;
    border-radius:18px;
}

.customer{
    background:#F1F5F9;
    align-self:flex-start;
}

.business{
    background:#DBEAFE;
    align-self:flex-end;
}

.message small{
    display:block;
    margin-top:10px;
    color:var(--text);
}

.timeline-item{
    display:flex;
    gap:15px;
    margin-bottom:20px;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--primary);
    margin-top:8px;
}

.quote-card,
.appointment-card,
.task-card{
    background:#F8FAFC;
    border:1px solid var(--border);
    border-radius:18px;
    padding:20px;
    margin-bottom:15px;
}

.task{
    display:flex;
    gap:12px;
    padding:8px 0;
}

textarea{
    width:100%;
    min-height:140px;
    border:1px solid var(--border);
    border-radius:16px;
    padding:15px;
    font-family:inherit;
}

.filters{
    background:white;
    padding:20px;
    border-radius:24px;
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:30px;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.filters input,
.filters select{
    padding:12px 16px;
    border:1px solid var(--border);
    border-radius:12px;
}

.sr_board{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:30px;
}

.sr_board-column{
    background:white;
    border-radius:24px;
    padding:20px;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.sr_board-column h3{
    margin-bottom:20px;
}

.sr_count{
    background:var(--primary-light);
    color:var(--primary);
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
}

.sr_mini-card{
    background:#F8FAFC;
    border-radius:16px;
    padding:15px;
    margin-bottom:15px;
    border:1px solid var(--border);
}

.sr_content{
    display:grid;
    grid-template-columns:3fr 1fr;
    gap:30px;
}

.sr_card{
    background:white;
    border-radius:28px;
    padding:30px;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
    margin-bottom:30px;
}

.sr_card sr_h2{
margin-bottom:25px;
font-size: 2em;
}

.sr_relationship{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
overflow:auto;
}

.sr_rel-item{
min-width:180px;
flex:1;
padding:20px;
border-radius:20px;
background:#F8FAFC;
border:1px solid var(--border);
text-align:center;
}

.sr_rel-icon{
font-size:34px;
margin-bottom:10px;
}

.sr_arrow{
font-size:28px;
font-weight:700;
color:var(--primary);
}


.sr_enquiry{
    border:1px solid var(--border);
    border-radius:20px;
    padding:25px;
    margin-bottom:20px;
}

.enquiry-card{
    border:1px solid var(--border);
    border-radius:24px;
    padding:25px;
    margin-bottom:20px;
    transition:.3s;
}

.enquiry-card:hover{
    transform:translateY(-2px);
}

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

.sr_provider{
    display:flex;
    align-items:center;
    gap:15px;
}

.sr_provider-logo{
    width:55px;
    height:55px;
    border-radius:14px;
    background:var(--primary-light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:var(--primary);
}

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

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

.sr_status-quote{
    background:#DCFCE7;
    color:#166534;
}

.sr_status-project{
    background:#EDE9FE;
    color:#6D28D9;
}

.sr_status-awaiting{
    background:#FEF3C7;
    color:#92400E;
}

.sr_new{
    background:#DBEAFE;
    color:#1D4ED8;
}

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

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

.sr_converted{
    background:#EDE9FE;
    color:#6D28D9;
}

.sr_enquiry-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-bottom:20px;
}

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

.meta{
    background:#F8FAFC;
    padding:15px;
    border-radius:12px;
}

.message-preview{
    background:#F8FAFC;
    border-left:4px solid var(--primary);
    padding:18px;
    border-radius:12px;
    margin-bottom:20px;
}

.sr_info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.sr_info{
background:#F8FAFC;
padding:18px;
border-radius:14px;
border:1px solid var(--border);
}


.sr_actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.btn{
    text-decoration:none;
    padding:10px 16px;
    border-radius:12px;
    font-weight:600;
}

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

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

.sr_quote-banner{
    background:#DCFCE7;
    border:1px solid #BBF7D0;
    padding:18px;
    border-radius:16px;
    margin-bottom:20px;
}

.sr_timeline-item{
    display:flex;
    gap:12px;
    margin-bottom:18px;
}
.activity{
    display:flex;
    gap:12px;
    margin-bottom:18px;
}

.dot2{
    width:10px;
    height:10px;
    background:var(--primary);
    border-radius:50%;
    margin-top:8px;
}

.sr_asset-tag{
    display:inline-block;
    background:#F1F5F9;
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    margin-top:10px;
}

.sidebar-card{
    margin-bottom:20px;
}

@media(max-width:1200px){

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

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

.kpi-grid3,
.sr_content{
    grid-template-columns:1fr;
}

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

.kpi-grid2,
.kpi-grid{
    grid-template-columns:1fr 1fr;
}

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

.sr_relationship{
flex-direction:column;
}

.sr_arrow{
transform:rotate(90deg);
}

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


}

@media(max-width:768px){

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

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

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

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

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

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

.sr_container{
    padding-top: 50px;
    padding-bottom: 40px;
    padding-left: 0px;
    padding-right: 0px;
}

.sr_container2{
    padding-top: 0px;
    padding-bottom: 40px;
    padding-left: 0px;
    padding-right: 0px;
}





}