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

portal_body{
    font-family:'Inter',sans-serif;
    background:#F8FAFC;
    color:#0F172A;
    line-height:1.7;
}

.portal_container{
    max-width:1500px;
    margin:auto;
    padding:40px;
    --primary: #2563EB;
    --dark: #0F172A;
    --bg: #F8FAFC;
    --card: #FFFFFF;
    --border: #E2E8F0;
    --text: #475569;
    --success: #16A34A;
    --warning: #F59E0B;
}

h1,h2,h3{
    margin-bottom:10px;
}


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

/* HERO */

.hero{
    background:linear-gradient(135deg,#2563EB,#1D4ED8);
    color:white;
    border-radius:32px;
    padding:60px;
    margin-bottom:30px;
    margin-top:30px;
}

.hero h1{
    font-size:48px;
    margin-bottom:15px;
}

.hero p{
    max-width:700px;
    font-size:20px;
    opacity:.95;
}

.hero-stats{
display:flex;
gap:40px;
margin-top:30px;
flex-wrap:wrap;
}

.hero-stat strong{
display:block;
font-size:32px;
font-weight:800;
}

/* HOME HEALTH */

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

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

.health-card .icon{
    font-size:30px;
    margin-bottom:10px;
}


/* HEADER */

.portal-header{
    background:white;
    border-radius:32px;
    padding:40px;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    margin-bottom:30px;
    margin-top:30px;
}

.portal-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.portal-title portal_h1{
    font-size:42px;
    margin-bottom:10px;
}

.portal-title p{
    color:#64748B;
}

.customer-badge{
    background:#DBEAFE;
    color:#1D4ED8;
    padding:10px 18px;
    border-radius:999px;
    font-weight:600;
}

/* KPI */

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

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

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

.kpi-card h4{
    color:#64748B;
    margin-bottom:8px;
}

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

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

/* QUICK ACTIONS */

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

.quick-card{
    background:white;
    padding:25px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    transition:.3s;
}

.quick-card:hover{
    transform:translateY(-4px);
}

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

/* GRID */

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

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

.card portal_h2{
    margin-bottom:25px;
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}


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

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

.report-card{
background:#F8FAFC;
border:1px solid var(--border);
border-radius:20px;
padding:25px;
}

.report-row{
display:flex;
justify-content:space-between;
padding:10px 0;
border-bottom:1px solid #E2E8F0;
}

.filters{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:15px;
}

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


/* 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;
}

/* PROJECTS */

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

.portal_progress{
    height:10px;
    background:#E2E8F0;
    border-radius:10px;
    overflow:hidden;
    margin-top:15px;
}

.portal_progress-bar{
    height:100%;
    background:var(--primary);
}

/* TABLE */

table{
    width:100%;
    border-collapse:collapse;
}

th,td{
    padding:15px;
    text-align:left;
    border-bottom:1px solid var(--border);
}

/* ASSETS */

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

.asset{
    border:1px solid var(--border);
    border-radius:20px;
    padding:20px;
}

.asset-icon{
    font-size:30px;
    margin-bottom:10px;
}

/* PROFILE */

.profile-grid{
    display:grid;
    gap:15px;
}

.profile-item{
    background:#F8FAFC;
    padding:15px;
    border-radius:14px;
}

/* PROVIDER */

.provider-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.provider-card{
    background:white;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
    transition:.3s;
}

.provider-card:hover{
    transform:translateY(-4px);
}

.provider-image{
    height:180px;
    background:#E2E8F0;
}

.provider-body{
    padding:25px;
}

.provider{
    text-align:center;
}

.provider-logo{
    width:90px;
    height:90px;
    border-radius:20px;
    background:#DBEAFE;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    margin:auto;
    margin-bottom:20px;
}

.hub_provider-logo{
    position:sticky;
    top:140px;
    left:25px;

    width:60px;
    height:60px;
    border-radius:14px;
 #   background:var(--primary-light);
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    margin-top:-50px;
    margin-bottom:15px;
    border:4px solid white;
    z-index:10;
}

.provider-details{
    text-align:left;
    margin-top:20px;
}

.provider-details div{
    margin-bottom:10px;
}

.provider-buttons{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.provider-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin:20px 0;
}

.stat-box{
    background:#F8FAFC;
    padding:12px;
    border-radius:12px;
    text-align:center;
}

.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;
}

.inv_btn{
padding:12px 18px;
border-radius:12px;
text-decoration:none;
font-weight:600;
}

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

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

.export-btn{
display:block;
width:100%;
text-align:center;
padding:12px;
margin-top:10px;
border-radius:12px;
background:#F8FAFC;
text-decoration:none;
color:#0F172A;
}

.hub_status-good{
    background:#DCFCE7;
    color:#166534;
}

.hub_status-warning{
    background:#FEF3C7;
    color:#92400E;
}
.hub_status{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    margin-bottom:15px;
}

/* MESSAGES */

.message{
    display:flex;
    gap:15px;
    background:#F8FAFC;
    padding:15px;
    border-radius:16px;
    margin-bottom:15px;
}

.message.unread{
    border-left:4px solid var(--primary);
}

.avatar{
    width:42px;
    height:42px;
    background:var(--primary);
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.message small{
    color:#64748B;
}

/* HEALTH */

.health-item{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid var(--border);
}

.good{
    color:var(--success);
    font-weight:600;
}

.warn{
    color:var(--warning);
    font-weight:600;
}

/* ACTIVITY */

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

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

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


/* 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;
}

/* INVOICES */

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

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

.invoice-card:hover{
box-shadow:0 10px 25px rgba(15,23,42,.08);
}

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

.amount{
    font-size:32px;
    font-weight:700;
    margin:10px 0;
}

.inv_actions{
display:flex;
gap:12px;
margin-top:20px;
flex-wrap:wrap;
}


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

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

.outstanding{
background:rgb(245, 158, 11);
color:rgb(15, 23, 42);
#color:#991B1B;
}

.overdue{
background:#DC2626;
color:#fff;
}


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

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

.sidebar-card h3{
margin-bottom:15px;
}

.health-score{
font-size:54px;
font-weight:800;
color:var(--success);
text-align:center;
}

.export-btn{
display:block;
width:100%;
text-align:center;
padding:12px;
margin-top:10px;
border-radius:12px;
background:#F8FAFC;
text-decoration:none;
color:#0F172A;
}

####  quick filter bar

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

.quick-filter{
    width:100%;
    padding:18px 22px;
    border:none;
    background:white;
    border-radius:20px;
    border:1px solid #E2E8F0;
    text-align:left;
    cursor:pointer;
    transition:.2s;
    box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.quick-filter:hover{
    transform:translateY(-2px);
}

.quick-filter strong{
    display:block;
    font-size:24px;
    color:#2563EB;
}

.quick-filter small{
    color:#64748B;
}

.quick-filter.warning{
    border-left:5px solid #F59E0B;
}

.quick-filter.danger{
    border-left:5px solid #DC2626;
}

.quick-filter.success{
    border-left:5px solid #16A34A;
}

.qf_active{
    background:#2563EB;
}

.qf_active strong,
.qf_active small{
    color:white;
}




@media(max-width:1400px){

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

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

.filters{
grid-template-columns:repeat(2,1fr);
}

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

.invoice-grid{
grid-template-columns:repeat(2,1fr);
}

}



@media(max-width:1000px){

.provider-grid,
.invoice-grid,
.kpi-grid,
.health-grid{
    grid-template-columns:1fr;
}

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

.invoice-grid2{
grid-template-columns:repeat(2,1fr);
}

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

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

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

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

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

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

}


@media(max-width:768px){

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


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

.container{
padding:20px;
}

.hero{
padding:30px;
}

}