*{
box-sizing:border-box;
}


body{

margin:0;

font-family:Arial, sans-serif;

background:#0f172a;

color:white;

display:flex;

}



/* ================= SIDEBAR ================= */


.sidebar{

width:240px;

height:100vh;

background:#020617;

padding:25px;

position:fixed;

left:0;

top:0;

}


.sidebar h2{

text-align:center;

margin-bottom:30px;

color:#38bdf8;

}



.sidebar a{

display:block;

padding:12px;

margin:10px 0;

border-radius:8px;

text-decoration:none;

color:#cbd5e1;

font-size:15px;

transition:.3s;

}



.sidebar a:hover{

background:#1e293b;

color:white;

}



.sidebar hr{

border:0;

border-top:1px solid #334155;

margin:20px 0;

}





/* ================= MAIN ================= */


.main{

margin-left:240px;

padding:30px;

width:calc(100% - 240px);

}



.main h1{

margin-bottom:30px;

}







/* ================= CARDS ================= */


.cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-bottom:30px;

}



.card{

background:#1e293b;

padding:25px;

border-radius:15px;

text-align:center;

box-shadow:0 5px 15px rgba(0,0,0,.3);

}



.card h3{

color:#cbd5e1;

}



.card p{

font-size:35px;

font-weight:bold;

margin:10px 0;

color:#38bdf8;

}







/* ================= TABLE ================= */


table{

width:100%;

border-collapse:collapse;

background:#020617;

border-radius:12px;

overflow:hidden;

}



thead{

background:#1e293b;

}



th{

padding:15px;

text-align:left;

font-size:14px;

}



td{

padding:12px;

border-bottom:1px solid #1e293b;

font-size:14px;

}



tbody tr:hover{

background:#1e293b;

}







/* ================= STATUS BADGES ================= */


.badge{

padding:6px 12px;

border-radius:20px;

font-size:12px;

font-weight:bold;

display:inline-block;

}


.badge.paid{

background:#22c55e;

}



.badge.pending{

background:#f59e0b;

}



.badge.cancelled{

background:#ef4444;

}







/* ================= ACTION BUTTONS ================= */


button{

border:none;

padding:8px 14px;

border-radius:8px;

color:white;

font-weight:bold;

cursor:pointer;

margin:3px;

transition:.3s;

font-size:13px;

}



/* PAID */

.paid-btn{

background:#16a34a;

}


.paid-btn:hover{

background:#15803d;

transform:scale(1.05);

}




/* PENDING */

.pending-btn{

background:#f59e0b;

}


.pending-btn:hover{

background:#d97706;

transform:scale(1.05);

}





/* CANCEL */

.cancel-btn{

background:#ef4444;

}


.cancel-btn:hover{

background:#dc2626;

transform:scale(1.05);

}






/* DELETE */

.delete-btn{

background:#111827;

}


.delete-btn:hover{

background:#000;

transform:scale(1.05);

}





/* INVOICE */

.invoice-btn{

background:#2563eb;

color:white;

padding:7px 12px;

border-radius:7px;

text-decoration:none;

display:inline-block;

font-weight:bold;

}



.invoice-btn:hover{

background:#1d4ed8;

}









/* ================= MOBILE ================= */


@media(max-width:1000px){


body{

display:block;

}



.sidebar{

position:relative;

width:100%;

height:auto;

}



.main{

margin-left:0;

width:100%;

padding:15px;

}



.cards{

grid-template-columns:1fr;

}



table{

display:block;

overflow-x:auto;

}



}
/*  */
/* =================================
   DASHBOARD ACTION BUTTON COLORS
================================= */


/* ALL BUTTON STYLE */

button {

border:none;
padding:8px 14px;
border-radius:8px;
font-size:13px;
font-weight:bold;
cursor:pointer;
margin:3px;
transition:0.3s ease;
color:white;

}



/* =========================
      PAID BUTTON
========================= */

button[onclick^="approve"]{

background:#16a34a;

}


button[onclick^="approve"]:hover{

background:#15803d;
transform:scale(1.05);

}





/* =========================
      PENDING BUTTON
========================= */

button[onclick^="pending"]{

background:#f59e0b;

}


button[onclick^="pending"]:hover{

background:#d97706;
transform:scale(1.05);

}







/* =========================
      CANCEL BUTTON
========================= */

button[onclick^="cancelBooking"]{

background:#ef4444;

}



button[onclick^="cancelBooking"]:hover{

background:#b91c1c;
transform:scale(1.05);

}







/* =========================
      DELETE BUTTON
========================= */

button[onclick^="deleteBooking"]{

background:#7f1d1d;

}



button[onclick^="deleteBooking"]:hover{

background:#450a0a;
transform:scale(1.05);

}







/* =========================
      INVOICE BUTTON
========================= */

.invoice-btn{


display:inline-block;

background:#2563eb;

color:white;

padding:7px 12px;

border-radius:7px;

text-decoration:none;

font-weight:bold;


}



.invoice-btn:hover{


background:#1d4ed8;

}







/* =========================
      CONTRACT LINKS
========================= */


td a[href*="signature"]{


display:inline-block;

background:#9333ea;

color:white;

padding:7px 12px;

border-radius:7px;

text-decoration:none;

font-weight:bold;


}



td a[href*="signature"]:hover{


background:#7e22ce;


}






td a[href*="signed-contracts"]{


display:inline-block;

background:#0891b2;

color:white;

padding:7px 12px;

border-radius:7px;

text-decoration:none;

font-weight:bold;


}


td a[href*="signed-contracts"]:hover{


background:#0e7490;


}






/* =========================
      STATUS BADGES
========================= */


.badge{


padding:6px 12px;

border-radius:20px;

font-weight:bold;

font-size:12px;

display:inline-block;

}




.badge.paid{

background:#dcfce7;

color:#166534;

}



.badge.pending{

background:#fef3c7;

color:#92400e;

}



.badge.cancelled{

background:#fee2e2;

color:#991b1b;

}







/* =========================
      TABLE BUTTON AREA
========================= */


td:last-child{

min-width:230px;

}




td:last-child button{

display:inline-block;

}