.body{
margin:0;
padding:0;

background:#f8fafc;

font-family:
Arial,
sans-serif;

}

.panel-wrapper{
display:flex;

min-height:100vh;

}

.sidebar{
width:260px;

background:#0f172a;

color:white;

min-height:100vh;
}

.sidebar-logo{
padding:25px;

text-align:center;

font-size:22px;

font-weight:bold;

border-bottom:
1px solid
rgba(255,255,255,.1);

}

.sidebar-menu{

list-style:none;

margin:0;
padding:0;

}

.sidebar-menu li a{

display:block;

color:white;

text-decoration:none;

padding:15px 20px;

transition:.3s;

}

.sidebar-menu li a:hover{

background:#2563eb;

}

.main-content{

flex:1;

padding:30px;

}

.stats{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;

}

.stat-card{

background:white;

border-radius:12px;

padding:25px;

box-shadow:
0 2px 8px
rgba(0,0,0,.08);

}

.stat-card h3{

margin:0 0 10px;

color:#64748b;

}

.stat-card p{

margin:0;

font-size:26px;

font-weight:bold;

color:#2563eb;

}

.card{

background:white;

border-radius:12px;

padding:25px;

box-shadow:
0 2px 8px
rgba(0,0,0,.08);

}

.table{

width:100%;

border-collapse:collapse;

}

.table th{

background:#2563eb;

color:white;

padding:14px;

text-align:left;
}

.table td{

padding:14px;

border-bottom:
1px solid #e5e7eb;
}

.table tr:hover{

background:#f8fafc;

}

.form-group{

margin-bottom:15px;

}

.form-control{


width:100%;

padding:12px;

border:1px solid #d1d5db;

border-radius:8px;

box-sizing:border-box;

}

.btn-success{

display:inline-block;

padding:10px 18px;

background:#16a34a;

color:white;

text-decoration:none;

border:none;

border-radius:8px;

cursor:pointer;

}

.btn-danger{

display:inline-block;

padding:10px 18px;

background:#dc2626;

color:white;

text-decoration:none;

border:none;

border-radius:8px;

cursor:pointer;

}

.progress-bar{


width:100%;

height:20px;

background:#e5e7eb;

border-radius:20px;

overflow:hidden;

margin-top:10px;

}

.progress-fill{

height:100%;

background:#22c55e;

}
.notification-box{
    background:#f8fafc;
    border-left:5px solid #2563eb;
    padding:15px;
    border-radius:10px;
}

@media(max-width:900px){
    .panel-wrapper{display:block}
    .sidebar{width:100%;min-height:auto}
    .sidebar-logo{padding:18px}
    .sidebar-menu{display:flex;overflow-x:auto;white-space:nowrap}
    .sidebar-menu li{flex:0 0 auto}
    .main-content{padding:20px 14px;min-width:0}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .card{padding:18px;overflow-x:auto}
    .table{min-width:680px}
}

@media(max-width:520px){.stats{grid-template-columns:1fr}}

.notification-box h4{
    margin-bottom:8px;
    color:#1e293b;
}

.notification-box p{
    margin-bottom:8px;
    color:#475569;
}

/* User panel mobile layout */
.user-page .sidebar-menu a[aria-current="page"]{
    background:#2563eb;
    color:#fff;
}

.form-help{
    display:block;
    margin-top:7px;
    color:#64748b;
    line-height:1.5;
}

.saved-bank-account{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin:0 0 24px;
    padding:18px;
    border:1px solid #bfdbfe;
    border-radius:12px;
    background:#eff6ff;
}

.saved-bank-account div{display:grid;gap:4px;min-width:0}
.saved-bank-account span,.saved-bank-account small{color:#64748b}
.saved-bank-account strong{color:#1e3a8a;overflow-wrap:anywhere}
.saved-bank-account a{color:#1d4ed8;font-weight:700;white-space:nowrap}

@media(max-width:900px){
    .user-page .panel-wrapper{display:block;min-height:100vh}
    .user-page .sidebar{width:100%;min-height:auto;padding:0}
    .user-page .sidebar-logo{margin:0;padding:18px;font-size:20px}
    .user-page .sidebar-menu{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        padding:10px;
        overflow:visible;
        white-space:normal;
    }
    .user-page .sidebar-menu li{margin:0;min-width:0}
    .user-page .sidebar-menu li a{
        display:flex;
        align-items:center;
        justify-content:center;
        height:100%;
        padding:11px 9px;
        border-radius:8px;
        background:rgba(255,255,255,.06);
        font-size:14px;
        line-height:1.25;
        text-align:center;
        white-space:normal;
        overflow-wrap:anywhere;
    }
    .user-page .main-content{padding:20px 14px;min-width:0}
    .user-page .topbar{padding:16px;margin-bottom:18px}
    .user-page .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .user-page .card{padding:18px;min-width:0;max-width:100%;overflow:hidden}
    .user-page .table-responsive{
        display:block;
        width:100%;
        max-width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-inline:contain;
        touch-action:pan-x pan-y;
        border-radius:10px;
    }
    .user-page .table-responsive>.table{
        display:table!important;
        width:max-content;
        min-width:680px;
        margin:0;
        white-space:nowrap;
    }
    .user-page .quick-actions{gap:10px}
}

@media(max-width:520px){
    .user-page .stats{grid-template-columns:1fr}
    .user-page .sidebar-menu{gap:6px;padding:8px}
    .user-page .sidebar-menu li a{font-size:13px;padding:10px 7px}
    .user-page .main-content{padding:14px 10px}
    .user-page .card{padding:12px;border-radius:10px}
    .user-page .quick-actions{display:grid;grid-template-columns:1fr}
    .user-page .action-btn{text-align:center}
    .saved-bank-account{align-items:flex-start;flex-direction:column}
}