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

:root{
--side:#202020;
--base:#efefef;
--cbase:#fff;
--nav:#7e7e7e;
}

.container{
margin-left:55px;
background-color: var(--base);
width:calc(100% - 55px);
min-height: 100vh;
display:grid ;
grid-template-rows: 30px 1fr;
}
/*---------main content start----------*/
main{
padding:5px 5px;
}

.button-container{
display: flex;
width: 100%;
gap:5px;
border-bottom:1px solid;
font-size:19px;
text-decoration:none;
}

.button-container a{
text-decoration:none;
background-color:var(--side);
color:var(--cbase);
border-radius:5px;
padding:1px 11px;
}

.header{
display: flex;
width: 100%;
justify-content: space-between;
padding-right:100px;
margin-bottom:5px;
margin-top:2px;
}

.s1{
display:flex;
margin-bottom:10px;
width:100%;
gap:15%;
}

.cards{
display:flex;
gap:5px;
}

.c{
background-color: var(--cbase);
height: 70px;
width: 200px;
padding:10px;
display: grid;
gap:20px;
border-radius:5px;
border-left:8px solid green;
}

.chart{
background-color:var(--cbase);
}

/* TABLE WRAPPER */
.s2{
width:100%;
max-height:200px;
overflow-y:auto;
background:#f4f6fb;
margin-bottom:5px ;
border:1px solid #e2e8f0;
}

/* TABLE */
table{
width:100%;
border-collapse:collapse;
color:#334155;
font-size:13px;
background:#f4f6fb;
}

/* HEADER */
thead th{
position:sticky;
top:0;
background:#ffffff;
color:#8e97a9;
font-weight:500;
text-align:left;
padding:14px 18px;
white-space:nowrap;
border-bottom:1px solid #e2e8f0;
}

/* ROWS */
tbody tr{
background:#ffffff;
transition:.15s;
}

tbody tr:nth-child(even){
background:#f8fafc ;
}

tbody tr:hover{
background:#eef4ff;
}

/* CELLS */
tbody td{
padding:16px 18px;
color:#333;
white-space:nowrap;
}

/* SYMBOL COLUMN */
tbody td:first-child{
font-weight:500;
color:#333;
}

/* P/L */
.profit{
color:#6fd37a;
}

.loss{
color:#ff6d7d;
}

/* SCROLLBAR */
.s2::-webkit-scrollbar{
width:6px;
}

.s2::-webkit-scrollbar-track{
background:#f1f5f9;
}

.s2::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:10px;
}

/* HEADER SHADOW */
thead{
box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.s3, .s4, .s5{
display: flex;
gap:5px;
margin-bottom:10px;
}

.ch{
background-color: var(--cbase);
width:49%;
height:300px;
}
/*-----main content end---------*/

/*-----------navbar start--------*/
nav{
background-color: var(--nav);
display: flex;
width:100%;
justify-content: space-between;
padding:0.2rem 0.7rem;
}


nav h1{
  font-size:1.2rem;
  color:#fff;
}

.nav-links button{
  background-color: #333;
  color:#fff;
  border:none;
  height:25px;
  padding:0 0.8rem;
  border-radius:5px;
  cursor:pointer;
}
/*-------navbar end------------*/

/*--------sidebar start--------*/
aside{
position: fixed;
top:0;
left: 0;
background-color:#202020;
min-height:100vh;
width:55px;
align-items: center;
justify-content: center;
padding-left: 10px;
}

.logo{
padding-bottom:25%;
}

.logo i{
color:blue;
font-size:30px;
font-weight:1000;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}


.list-items ul li a,
.profile ul li a{
color:white;
text-decoration:none;
line-height: 30px;
font-size: 16px;
padding-left: 8px;
}

.profile{
position:absolute;
bottom:0;
}

/*---------sidebar end---------*/
/*------progress bar start--------*/
.performance-container {
background: var(--cbase);
width: 100%;
height: 100%;
padding: 10px 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

#performanceBars{
  width:100% ;
}

.bar-row {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1; /* equal height for all rows */
}

.bar-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
margin-bottom: 4px;
color: black;
}

.loss-value {
color: #ef5350;
text-align: left;
}

.profit-value {
color: #16c784;
text-align: right;
}

.day-label {
flex: 1;
text-align: center;
color: black;
font-weight: 500;
font-size:15px;
}

.bar-track {
position: relative;
background: #21262d;
height: 14px;
border-radius: 6px;
overflow: hidden;
margin-bottom:5px;
}

.bar-fill {
position: absolute;
top: 0;
bottom: 0;
background: linear-gradient(90deg, #ef5350, #b71c1c, #0f9d58, #16c784);
width: 0%;
border-radius: 6px;
transition: width 0.8s ease-in-out;
}

/*-----Summary table code START--------*/
.table-modal nav{
  width:100%;
}
.table-modal{
display:none ;
position:fixed ;
top:0;
left:0;
height:100vh;
width:100vw;
overflow-y:auto;
overflow-x:hidden;
background-color:#efefef;
}

.btn-sec{
  display:flex;
  justify-content: space-between;
  margin: 1% 0.5%;
}

.btn-sec button {
  background:#2b2b2b;
  color:#fff;
  border:none;
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
  min-width:80px;
}

.m-s1{
display:flex;
justify-content:space-between;
}

.m-s2{
display:flex;
justify-content:right;
gap:1%;
margin-bottom:2%;
}

.m-card{
background-color:#fff;
width:30%;
border-radius:5%;
padding:2%;
}

.m-result{
display:flex;
justify-content:space-between;
}

.m-s3{
background-color:#fff;
width:100vw;
min-height:30vh;
padding:1%;
max-height:80vh;
border-radius:3%;
}

/*table{
width:97vw; 
}*/

th{
background-color:var(--nav);
}

.m-canvis-container{
  margin-top:3%;
}

.m-c-header{
  display:flex;
  justify-content: space-between;
}
/*-----Summary table code START--------*/