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

}

body{
background-color: var(--base);
}

:root{
--aside:#202020;
--base:#efefef;
--cbase:#fff; 
--nav:grey;
}


.main-container{
margin-left:55px;
}

/*----------------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-------------------*/

/*----------------------main content start-------------*/

.button-container{
display: flex;
gap:5px;
font-size:19px;
border-bottom:1px solid;
width:99%;
margin-left:1px;
}

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


.container {
display: flex;
width: 100%;
gap: 20px;
}


.left-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
background:var(--cbase);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.text-box{
background:#efefef;
border-radius:16px;
padding:15px;
border:1px solid #374151;
}

.text-box h3{
margin-bottom:15px;
font-size:18px;
}

.criteria-list{
display:flex;
flex-direction:column;
gap:12px;
}

.criteria-item{
background:#fff;
border-radius:12px;
padding:14px;
position:relative;
overflow:hidden;
transition:.2s;
}

.criteria-item::before{
content:"";
position:absolute;
left:0;
top:0;
width:7px;
height:100%;
background:#333;
}

.criteria-item:hover{
transform:translateX(4px);
}

.criteria-text{
padding-left:8px;
line-height:1.5;
font-size:14px;
}



.right-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
background: var(--cbase);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.img-container {
width: 100%;
height: 250px;
background:var(--base);
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

.notes-container {
background: var(--base);
padding: 15px;
border-radius: 8px;
flex: 1;
}


.notes-container textarea {
width: 100%;
height: 150px;
background: var(--cbase);
border: none;
outline: none;
color: #333;
padding: 10px;
border-radius: 6px;
font-size: 14px;
resize: none;
}

@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}

/*----------------------main content end---------------*/

/*---------------navbar start-------------------------*/

nav{
display: flex;
justify-content: space-between;
background-color: var(--nav);
align-items: center;
margin-bottom:5px;
padding:0;
}

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

.link-container button{
 background-color:#333;
 color:#fff;
 border:none;
 border-radius:5px;
 padding:0.4rem 0.8rem;
 cursor:pointer;
}

/*----------------navbar end-------------------------*/
/*---------UPLOAD  MODAL START----------*/
.modal{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:rgba(0,0,0,.45);

  display:none;

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

  padding:20px;

  }

  .modal.show{

  display:flex;

  }

  .modal-content{

  background:white;

  width:100%;
  max-width:420px;

  border-radius:22px;

  padding:25px;

  position:relative;

  }

  .close{

  position:absolute;

  top:15px;
  right:15px;

  border:none;

  background:none;

  font-size:26px;

  cursor:pointer;

  color:#555;

  }

  h2{

  text-align:center;

  margin-bottom:25px;

  color:#222;

  }

  .actions{

  display:flex;

  flex-direction:column;

  gap:15px;

  }

  .action-btn{

  display:flex;

  align-items:center;

  gap:15px;

  padding:18px;

  border:2px solid #e5e7eb;

  border-radius:15px;

  background:white;

  cursor:pointer;

  text-align:left;

  transition:.2s;

  }

  .action-btn:hover{

  border-color:#2563eb;

  }

  .icon{

  width:50px;
  height:50px;

  border-radius:50%;

  background:#eff6ff;

  display:flex;

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

  font-size:22px;

  }

  .text h3{

  margin-bottom:4px;

  color:#222;

  }

  .text p{

  font-size:13px;

  color:#666;

  }

  .remove:hover{

  border-color:#dc2626;

  }

  @media(min-width:768px){

  .modal-content{

  max-width:480px;

  }

  .action-btn{

  padding:20px;

  }

  }

/* ==============================
FULL SCREEN IMAGE VIEWER
============================== */

.image-viewer{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
padding:20px;
}

.image-viewer.show{
display:flex;
}

.image-viewer-content{
position:relative;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}

.image-viewer img{
max-width:100%;
max-height:100%;
object-fit:contain;
border-radius:12px;
}

#closeImageViewer{
position:absolute;
top:20px;
right:20px;
width:45px;
height:45px;
border:none;
border-radius:50%;
background:white;
font-size:22px;
cursor:pointer;
}
/*---------UPLOAD MODAL END-------------*/