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

body{
  background-color:#efefef;
  height: 100vh;
  margin-left: 55px;
  
}

/*====NOTIFICATION Code START====*/
.notification-box {

position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
border-radius: 8px;
color: white;
font-size: 15px;
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
z-index: 1002;
}

.notification-box.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}


.notification-box.success{
background:#2ecc71;
color:white;
}

.notification-box.error{
background:#e74c3c;
color:white;
}

.notification-box.warning{
background:#f39c12;
color:white;
}

.notification-box.info{
background:#3498db;
color:white;
}
                                                                                                          
/*=====NOTIFICATION CODE END =======*/
/*---------------Navbar start-------------------*/
nav{
display: flex;
justify-content: space-between;
align-items:center ;
background-color:#7e7e7e;
padding:0.1rem 1rem;
margin-bottom:0.5%;
}

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

nav button {
background-color:#333 ;
color:#fff; 
border-radius:5px;
border:none;
padding:0.4rem 0.8rem ;
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--------------*/
/* ==================================================
CALENDAR CONTAINER
================================================== */

.container{
width:100%;
height:650px;
background:#fff;
padding:10px;
border-radius:10px;
overflow:hidden;
display:flex;
flex-direction:column;
}


/* Monthly + Yearly profitable day */
.profitable-day {
    background: rgba(22, 199, 132, 0.25);
    }


    /* Monthly + Yearly losing day */
    .loss-day {
        background: rgba(239, 83, 80, 0.25);
        }


        /* Optional: keep rounded corners */
        .date.profitable-day,
        .date.loss-day,
        .mini-day.profitable-day,
        .mini-day.loss-day {
            border-radius: 8px;
            }


/* ==================================================
VIEW TOGGLE
================================================== */
.calendar-view-toggle{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:10px;
}

.view-btn{
border:none;
cursor:pointer;
padding:8px 18px;
border-radius:6px;
font-size:13px;
background:#efefef;
transition:.2s;
}

.view-btn.active{
background:#111;
color:#fff;
}

/* ==================================================
MONTH NAVIGATION
================================================== */
.calendar-header,
.year-navigation{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

.calendar-header button,
.year-navigation button{
background:#111;
color:#fff;
border:none;
cursor:pointer;
padding:6px 12px;
border-radius:4px;
}

.calendar-title{
font-weight:bold;
font-size:16px;
}

/* ==================================================
MONTHLY VIEW
================================================== */
.calendar-wrapper{
display:flex;
flex:1;
gap:10px;
overflow:hidden;
}

.calendar{
flex:3;
display:flex;
flex-direction:column;
}

.calendar-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:4px;
flex:1;
}

.day{
text-align:center;
font-size:11px;
font-weight:bold;
padding:6px;
background:#efefef;
border-radius:4px;
}

.date{
background:#f6f6f6;
border-radius:4px;
min-height:60px;
position:relative;
cursor:pointer;
padding:4px;
transition:.2s;
}

.date:hover{
transform:scale(1.02);
}

.day-number{
font-size:12px;
font-weight:bold;
}

.trade-count{
position:absolute;
right:4px;
bottom:4px;
font-size:10px;
}

/* ==================================================
TODAY
================================================== */

.today{
border:2px solid #2196f3;
}

/* ==================================================
P/L HEATMAP COLORS
================================================== */
.profitable-day{
background:rgba(34,197,94,.22);
}

.loss-day{
background:rgba(239,68,68,.22);
}

.break-even-day{
background:#f6f6f6;
}

/* ==================================================
INACTIVE DAYS
================================================== */
.inactive{
opacity:.35;
}

/* ==================================================
WEEKLY SUMMARY
================================================== */
.weekly-summary{
flex:1;
border-left:1px solid #ddd;
padding-left:8px;
overflow-y:auto;
}

.weekly-summary h3{
margin-top:0;
margin-bottom:8px;
}

.week{
cursor:pointer;
padding:6px;
border-bottom:1px solid #ddd;
display:flex;
flex-direction:column;
gap:4px;
}

.week:hover{
background:#f3f3f3;
}

/* ==================================================
YEARLY VIEW
================================================== */
.yearly-view{
flex:1;
overflow-y:auto;
display:grid;
grid-template-columns:
repeat(4,minmax(180px,1fr));
gap:12px;
padding-right:5px;
}

.mini-month{
  border:1px solid #ddd;
  border-radius:8px;
  padding:8px;
  min-height:170px;
  }


.mini-month h4{
margin:0 0 6px;
text-align:center;
font-size:12px;
}

.mini-calendar{
  display:grid;
  grid-template-columns:
  repeat(7,1fr);

  gap:3px;
  }


.mini-day{
  font-size:9px;
  font-weight:600;

  text-align:center;
  border-radius:2px;

  cursor:pointer;

  padding:2px;
  min-height:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#f4f4f4;
  color:#333;
  }


.mini-day:hover{
transform:scale(1.15);
}

/* ==================================================
MINI CALENDAR COLORS
================================================== */

.mini-day.profitable-day{
background:rgba(34,197,94,.22);
}

.mini-day.loss-day{
background:rgba(239,68,68,.22);
}

.mini-day.today{
border:1px solid #2196f3;
}

/* ==================================================
UTILITY
================================================== */
.hidden{
display:none !important;
}

/* ==================================================
MODAL
================================================== */
.calender-modal{
display:none;
}

.calender-modal.active{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.25);
z-index:9999;
}

.calender-modal-container{
width:520px;
height:340px;
background:#fff;
border-radius:10px;
padding:15px;
}

.calender-modal-container-section-A{
display:flex;
justify-content:space-between;
align-items:center;
}

.calender-add-sec{
display:flex;
align-items:center;
gap:.7rem;
}

.calender-add-btn{
border:none;
cursor:pointer;
color:#fff;
background:#555;
border-radius:4px;
padding:5px 12px;
}

.calender-modal-chart-container{
width:100%;
height:150px;
background:#efefef;
border-radius:6px;
margin:12px 0;
}

.calender-modal-table{
width:100%;
border-collapse:collapse;
}

.calender-modal-table th,
.calender-modal-table td{
padding:6px;
text-align:center;
}

.calender-modal-container-section-C{
max-height:95px;
overflow-y:auto;
}

.calender-modal-table thead th{
position:sticky;
top:0;
background:#efefef;
z-index:10;
}

/* ==================================================
TABLET
================================================== */
@media(max-width:900px){
.yearly-view{
grid-template-columns:
repeat(3,minmax(160px,1fr));
}
 }

/* ==================================================
MOBILE
================================================== */
@media(max-width:700px){
.calendar-wrapper{
flex-direction:column;
}

.weekly-summary{
border-left:none;
border-top:1px solid #ddd;
padding-top:8px;
}

.yearly-view{
grid-template-columns:
repeat(2,minmax(140px,1fr));
}

.calender-modal-container{
width:95%;
}
}

/*==== OPEN MODAL CODE START ====*/
.modal-overlay {
display: none; /* hidden by default */
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
z-index: 1000;
}


/* Modal container */
.modal-1-container {
background-color: #fff;
width: 470px;
height: 280px; /* fixed height */
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
overflow: hidden;
display: flex;
flex-direction: column;
}

/* Modal header */
.modal-1-container .header {
background-color: #efefef;
padding: 5px 10px;
border-bottom: 1px solid #ddd;
}

.modal-1-container .header h1 {
font-size: 22px;
color: #333;
}

/* Modal body */
.modal-1 {
padding: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100% - 50px);
}

.m1-s1 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
}

.m1-s1 h1 {
font-size: 16px;
color: #444;
}

.m1Bts {
display: flex;
justify-content: space-between;
gap: 1px;
}

.status-toggle{
display:inline-flex;
border:1px solid #ccc;
border-radius:8px;
overflow:hidden;
background:#f5f5f5;
}

.status-toggle .status-btn{
border:none;
border-radius:0;
width:90px;
padding:8px 16px;
background:transparent;
color:#555;
font-size:14px;
transition:all .25s ease;
}

.status-toggle .status-btn:hover{
background:#e9e9e9;
color:#333;
}

.status-toggle .status-btn.active{
background:#333;
color:#fff;
}

.status-toggle .status-btn:first-child{
border-right:1px solid #ccc;
}


.m1-s2 {
display: flex;
justify-content: space-between;
gap: 10px;
flex-wrap: nowrap;
align-items: flex-start;
}

.m1-s2 .in {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}

.setup-container {
flex: 0.7;
}

#m-result{
  height:100% ;
    width:7.2rem ;
      border-radius:6px ;
        outline: none;
        }

        .m1-s2 input,
        .m1-s2 select{
        padding: 8px;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 6px;
        outline: none;
        font-size: 14px;
        transition: border-color 0.25s ease;
        }

        .m1-s2 input:focus,
        .m1-s2 select:focus {
        border-color: #333;
        }

        .m1-s3 {
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #eee;
        padding-top: 15px;
        }

        .form-button {
        display: flex;
        justify-content: space-between;
        width: 100%;
        }

        .form-button button {
        padding: 8px 18px;
        border-radius: 6px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.25s ease;
        }

        .form-button button:first-child {
        background-color: #333;
        color: #fff;
        }

        .form-button button:first-child:hover {
        background-color: #0069d9;
        }

        .form-button button:last-child {
        background-color: #f5f5f5;
        color: #333;
        border: 1px solid #ccc;
        }

        .form-button button:last-child:hover {
        background-color: #e0e0e0;
        }

        /* Fix input/button heights */
        input, select, .m-button  {
        min-height: 36px;
        }

        /* Modal arrows */
        .modal-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 30px;
        color: rgb(5, 1, 1);
        cursor: pointer;
        z-index: 1001;
        user-select: none;
        transition: color 0.2s ease;
        }

        #modal-prev {
        left: 260px; /* distance from modal left edge */
        }



        #modal-next {
        right: 260px; /* distance from modal right edge */
        }

        .modal-arrow:hover {
        color: #0d73e0;
        }

        /*=======OPEN MODAL CODE END ====*/