@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');

:root{
--brand:#005D6D;
--brand-dark:#0E3F46;
--sidebar:#0F2A30;
--bg:#F4F7F9;
--panel:#ffffff;
--text:#1d2a2f;
--text-light:#7a8b91;
--border:#E1E7EA;
}

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

body{
font-family:'Readex Pro',sans-serif;
background:
linear-gradient(#eef3f6 1px, transparent 1px),
linear-gradient(90deg,#eef3f6 1px, transparent 1px);
background-size:22px 22px;
color:var(--text);
height:100vh;
overflow:hidden;
}

.topbar{
height:70px;
background:var(--panel);
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
}

.brand{
display:flex;
align-items:center;
gap:12px;
}

.brand img{
height:46px;
width:auto;
}

.brand-title{
font-weight:600;
font-size:18px;
}

.top-actions{
display:flex;
align-items:center;
gap:20px;
}

.menu-toggle{
cursor:pointer;
font-size:20px;
color:var(--text);
}

.search{
background:#f1f5f7;
border-radius:6px;
padding:7px 12px;
}

.search input{
border:none;
background:transparent;
outline:none;
font-size:14px;
font-family:'Readex Pro',sans-serif;
}

.layout{
display:flex;
height:calc(100vh - 70px);
}

.sidebar{
width:250px;
background:var(--sidebar);
color:white;
padding-top:20px;
transition:all .25s ease;
}

.sidebar.collapsed{
width:70px;
}

.menu-title{
padding:12px 24px;
font-size:12px;
opacity:.6;
}

.menu a{
display:flex;
align-items:center;
gap:12px;
padding:14px 24px;
color:#d7e2e5;
text-decoration:none;
font-size:14px;
transition:.2s;
}

.menu a:hover{
background:#123a42;
}

.menu a.active{
background:var(--brand);
}

.menu i{
width:20px;
text-align:center;
}

.sidebar.collapsed .menu a{
justify-content:center;
}

.sidebar.collapsed .menu a span{
display:none;
}

.sidebar.collapsed .menu-title{
display:none;
}

.workspace{
flex:1;
padding:30px;
overflow:auto;
animation:fade .25s ease;
}

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

.page-title{
font-size:24px;
font-weight:600;
}

.breadcrumb{
font-size:13px;
color:var(--text-light);
}

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

.card{
background:var(--panel);
padding:25px;
border-radius:8px;
box-shadow:0 8px 22px rgba(0,0,0,0.04);
transition:.25s;
}

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

.stat{
font-size:26px;
font-weight:600;
margin-top:8px;
}

button{
font-family:'Readex Pro',sans-serif;
background:var(--brand);
border:none;
color:white;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
transition:.2s;
}

button:hover{
background:var(--brand-dark);
}

input,select,textarea{
font-size:14px;
font-family:'Readex Pro',sans-serif;
}

@keyframes fade{
from{
opacity:0;
transform:translateY(6px);
}
to{
opacity:1;
}
}

@media (max-width:900px){
.sidebar{
position:absolute;
left:-250px;
height:100%;
z-index:5;
}
.sidebar.show{
left:0;
}
}