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

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

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

.container{
  margin-left:50px;
  min-height: 100vh;
  background-color: var(--base);
  padding-left:5px;
}

.s1{
  display: flex;
  justify-content: right;
  margin-right:2.5%;
}


.setup-container{
  display: flex;
  flex-wrap:wrap;
  gap:2%;
  row-gap: 20px;
  margin-left:1.8%;
}

.box{
  background-color:var(--nav);
  height: 210px;
  width:470px;
  border-radius:10px ;
  padding: 5px;
}

.s{
  width: 150px;
}

.title-section{
  display:flex;
  justify-content: space-between;
}
.s1{
  display: flex;
  gap:20px;
  margin-bottom:5px;
}

.cards{
  display: flex;
  flex-wrap:wrap;
}



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

.z{
  width:150px;

}

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

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

nav{
  display: flex;
  justify-content: space-between;
  align-items:center ;
  background-color:var(--nav);
  padding:0.1rem 1rem;
  margin-bottom:0.5%;
}

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

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

/*-------------navbar end----------------*/


/*---------------modal start-------*/
 *{padding:0; margin:0; box-sizing:border-box;}
                                            
.modal { 
 position:fixed;
 display:none;
 inset:0; 
 place-items:center; 
 padding:24px;
 background:rgba(2,6,23,.75);
 backdrop-filter:blur(4px); z-index:1000;
}

.modal.open { 
  display:grid;
}

.modal-card {
 width:min(100%,1100px); 
 max-height:90vh; 
 display:flex; 
 gap:16px;
 background:var(--surface);
 border:1px solid var(--outline);
 border-radius:16px;
 overflow:hidden;
 box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.modal-left { 
  flex:1.7; 
  min-width:320px; 
  background:var(--surface-2);
  padding:16px; 
  overflow:auto;
}

.left-title { 
  font-size:16px; 
  font-weight:700; 
  opacity:.9;
}
                                
.section {
 border:1px solid var(--outline);
 border-radius:14px; margin:12px 0;
 background:linear-gradient(180deg,#161f33,#121a2d);
 overflow:hidden;
}

.section-header {
display:flex; 
align-items:center; 
justify-content:space-between;
padding:10px 12px; 
border-bottom:1px solid var(--outline);
}

.section-actions button { 
  background:transparent; 
  border:none; 
  color:white; 
  font-size:18px; 
  cursor:pointer;
}

.list { 
  list-style:none; 
  padding:10px;
}

.item {
display:flex; 
align-items:center; 
gap:10px;
background:#253049; 
border:1px solid var(--outline);
padding:8px 10px; 
border-radius:10px; 
margin:8px 0;
}

.handle { 
  cursor:grab;
  user-select:none;}

.item input[type="text"] {
flex:1; 
background:transparent; 
border:none; 
color:white; 
outline:none;
}

.delete-btn { color:red; cursor:pointer; font-size:18px;}

  /* Right form */
.modal-right { flex:1; display:flex; flex-direction:column; gap:12px; padding:16px;}

.field { display:flex; flex-direction:column; gap:6px;}

.input, textarea {
width:100%; padding:10px; border-radius:10px; border:1px solid var(--outline);
background:#0b1223; color:white;
}

.right-actions { margin-top:auto; display:flex; gap:10px;}

.btn { padding:10px 15px; border:none; border-radius:8px; cursor:pointer;}

.btn.secondary { background:var(--secondary); color:white;}

.btn.success { background:var(--primary); color:white;}
                     
/*--------------modal end--------------*/
/*---------Delete Modal START -----*/
.confirm-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 999;
}

.confirm-modal.active {
  display: flex;
  }

.confirm-box {
background: white;
padding: 20px;
border-radius: 10px;
width: 300px;
text-align: center;
color: #333;
}

.confirm-buttons {
margin-top: 15px;
display: flex;
justify-content: space-between;
gap: 10px;
}

.delete-btn {
flex: 1;
background: red;
color: white;
border: none;
padding: 10px;
border-radius: 6px;
cursor: pointer;
}

.cancel-btn {
flex: 1;
background: #444;
color: white;
border: none;
padding: 10px;
border-radius: 6px;
cursor: pointer;
}
/*--------Delete Modal END -------------*/