@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');


* {
  box-sizing: border-box;
}


body {

  margin:0;

  background:
    radial-gradient(
      circle at top,
      #1b1b1b,
      #090909 70%
    );

  color:#f5f5f5;

  font-family:
    "Rajdhani",
    Arial,
    sans-serif;

}



/* TOP BAR */

.topbar {

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:
    25px 54px;

}



.brand {

  display:flex;

  align-items:center;

  gap:16px;

}



.logo {

  width:58px;

  height:58px;

  object-fit:cover;

  border-radius:14px;

  border:
    1px solid #c79a3b;

  box-shadow:
    0 0 15px rgba(199,154,59,.35);

}



.brand h1 {

  margin:0;

  font-size:30px;

  font-weight:700;

  letter-spacing:.5px;

}



.brand p {

  margin:
    3px 0 0;

  color:#c4b27a;

  font-size:15px;

}



/* BUTTON */

.refresh-button {

  background:
    linear-gradient(
      135deg,
      #d6a947,
      #8f651d
    );

  color:#111;

  border:none;

  border-radius:12px;

  padding:
    12px 22px;

  font-weight:700;

  font-size:15px;

  cursor:pointer;

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

}



.refresh-button:hover {

  transform:
    translateY(-2px);

}





main {

  padding:
    0 54px 40px;

}



/* STATS */


.stats-grid {

  display:grid;

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

  gap:18px;

  margin-bottom:28px;

}



.stat-card {


  background:
    linear-gradient(
      145deg,
      #181818,
      #101010
    );


  border:
    1px solid #3a3020;


  border-radius:18px;


  padding:24px;


  min-height:145px;


  transition:.2s;


}



.stat-card:hover {

  border-color:#c79a3b;

  transform:
    translateY(-3px);

}



.stat-icon {

  font-size:28px;

  margin-bottom:14px;

}



.stat-label {

  color:#b9a46c;

  font-size:15px;

}



.stat-value {

  font-size:32px;

  font-weight:700;

}





/* ORDERS PANEL */


.orders-panel {

  background:
    #121212;


  border:
    1px solid #332919;


  border-radius:18px;


  overflow:hidden;


}



.orders-header {


  display:flex;

  justify-content:space-between;

  align-items:center;


  padding:
    22px;


  border-bottom:
    1px solid #332919;


}



.orders-header h2 {

  margin:0;

  font-size:23px;

}





.filters {

  display:flex;

  gap:12px;

}



.filters input,
.filters select {


  background:#090909;


  color:white;


  border:
    1px solid #514126;


  border-radius:10px;


  padding:
    12px 14px;


  font-family:inherit;


}



.filters input:focus,
.filters select:focus {

  outline:none;

  border-color:#d6a947;

}



.filters input {

  width:250px;

}



.filters select {

  width:190px;

}





.table-wrapper {

  overflow-x:auto;

}



table {

  width:100%;

  border-collapse:collapse;

  min-width:1200px;

}



thead {

  background:#0c0c0c;

}



th {


  text-align:left;


  padding:
    17px 15px;


  color:#c79a3b;


  font-size:13px;


  letter-spacing:.5px;


}



td {


  padding:
    17px 15px;


  border-top:
    1px solid #292929;


  font-size:14px;


}



tbody tr {


  cursor:pointer;


  transition:.15s;


}



tbody tr:hover {


  background:
    rgba(199,154,59,.08);


}





.order-link {

  color:#d6a947;

  font-weight:700;

}





/* STATUS */


.status {


  display:inline-block;


  padding:
    6px 13px;


  border-radius:20px;


  font-size:13px;


  font-weight:700;


}



.status-pending {

  background:#5a430c;

  color:#ffd96a;

}



.status-completed {

  background:#083b27;

  color:#56e6a5;

}



.status-unable {

  background:#541018;

  color:#ff9299;

}



.status-cancelled {

  background:#333;

  color:#bbb;

}





/* MODAL */


.modal {

  position:fixed;

  inset:0;

  z-index:1000;

}



.modal.hidden {

  display:none;

}



.modal-overlay {

  position:absolute;

  inset:0;


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


  backdrop-filter:
    blur(5px);


}



.modal-box {


  position:relative;


  width:
    min(650px,calc(100% - 30px));


  max-height:90vh;


  overflow-y:auto;


  margin:
    5vh auto;


  background:
    linear-gradient(
      145deg,
      #171717,
      #0d0d0d
    );


  border:
    1px solid #57431d;


  border-radius:18px;


  box-shadow:
    0 20px 80px rgba(0,0,0,.7);


}



.modal-header {


  display:flex;


  justify-content:space-between;


  align-items:center;


  padding:22px;


  border-bottom:
    1px solid #332919;


}



.modal-header h2 {

  margin:0;

}



.close-button {


  background:none;


  border:none;


  color:#d6a947;


  font-size:32px;


  cursor:pointer;


}





.order-details {


  padding:22px;


}



.detail-grid {


  display:grid;


  grid-template-columns:
    1fr 1fr;


  gap:14px;


}



.detail-item {


  background:#111;


  border:
    1px solid #302719;


  border-radius:12px;


  padding:15px;


}



.detail-label {


  color:#b89b58;


  font-size:13px;


}



.detail-value {


  margin-top:5px;


  font-size:16px;


}





/* ACTION BUTTONS */


.order-actions {


  display:flex;


  gap:12px;


  padding:
    0 22px 22px;


}



.action-button {


  border:none;


  border-radius:10px;


  padding:
    12px 18px;


  font-weight:700;


  cursor:pointer;


}



.action-button:hover {

  transform:
    translateY(-2px);

}



.action-complete {

  background:#087f55;

  color:white;

}



.action-unable {

  background:#a81d28;

  color:white;

}



.action-cancel {

  background:#555;

  color:white;

}



.action-comment {

  background:#b88628;

  color:black;

}





/* TOAST */


.toast {


  position:fixed;


  right:25px;


  bottom:25px;


  background:#171717;


  border:
    1px solid #c79a3b;


  color:white;


  padding:
    14px 20px;


  border-radius:10px;


  opacity:0;


  transform:
    translateY(20px);


  transition:.2s;


}



.toast.show {


  opacity:1;


  transform:
    translateY(0);


}





@media(max-width:900px){


.topbar,
main {

padding:
20px;

}



.stats-grid {

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

}


.orders-header {

flex-direction:column;

gap:15px;

}


.filters {

width:100%;

flex-direction:column;

}


.filters input,
.filters select {

width:100%;

}


}



@media(max-width:550px){


.stats-grid {

grid-template-columns:1fr;

}


.brand h1 {

font-size:22px;

}


.detail-grid {

grid-template-columns:1fr;

}


}