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

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

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

.inv_container{
max-width:1700px;
margin:auto;
padding:32px;
}

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

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

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

.hero p{
max-width:700px;
opacity:.95;
line-height:1.7;
}

.hero small{
color:white;
}

.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
align-self:flex-start;
}

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


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


.kpi-grid{

display:grid;

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

gap:20px;

margin:28px 0;

}

.kpi{

background:white;

padding:28px;

border-radius:24px;

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

}

.kpi strong{

display:block;

font-size:34px;

color:#2563EB;

margin-bottom:10px;

}

.layout{

display:grid;

grid-template-columns:
3fr
1fr;

gap:30px;

}

.card{

background:white;

padding:30px;

border-radius:28px;

margin-bottom:24px;

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

}

.card h2{

margin-bottom:24px;

}

.report-grid{

display:grid;

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

gap:20px;

}

.report{

height:320px;

background:#F8FAFC;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

color:#64748B;

border:1px solid var(--border);

}

.table{

overflow:auto;

}

table{

width:100%;

border-collapse:collapse;

}

th{

text-align:left;

padding:18px;

color:#64748B;

border-bottom:1px solid var(--border);

}

td{

padding:20px 18px;

border-bottom:1px solid #F1F5F9;

}

.status{

padding:8px 14px;

border-radius:999px;

font-size:13px;

font-weight:700;

display:inline-block;

}

.paid{

background:#DCFCE7;

color:#166534;

}

.overdue{

background:#FEE2E2;

color:#991B1B;

}

.outstanding{

background:#FEF3C7;

color:#92400E;

}

.actions{

display:flex;

gap:8px;

flex-wrap:wrap;

}

.action{

padding:8px 12px;

border-radius:10px;

background:#F8FAFC;

text-decoration:none;

color:#0F172A;

}

.setting-grid{

display:grid;

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

gap:20px;

}

.setting{

border:1px solid var(--border);

border-radius:18px;

padding:22px;

}

.setting ul{

padding-left:18px;

margin-top:12px;

line-height:2;

}

.sidebar-card{

background:white;

padding:26px;

border-radius:24px;

margin-bottom:20px;

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

}

.sidebar-btn{

display:block;

padding:14px;

margin-top:10px;

text-align:center;

text-decoration:none;

border-radius:14px;

background:#2563EB;

color:white;

}

.metric{

font-size:34px;

color:#2563EB;

font-weight:800;

margin-bottom:8px;

}

@media(max-width:1400px){

.kpi-grid{

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

}

.layout{

grid-template-columns:1fr;

}

.report-grid{

grid-template-columns:1fr;

}

.setting-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.container{

padding:18px;

}

.hero{
padding:30px;
}

.inv_container{
padding-left:0px;
padding-right:0px;
}


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

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

}