* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  padding: 30px;
  color: white;

  background:
    linear-gradient(
      135deg,
      #141e30,
      #243b55
    );
}


/* Dashboard */

.dashboard {

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

  margin: auto;

  padding: 30px;

  background:
    rgba(255,255,255,0.08);

  border-radius:18px;

  box-shadow:
    0 15px 40px rgba(0,0,0,.45);

  backdrop-filter:blur(10px);

}


/* Heading */

h1 {

  margin:0 0 25px;

  text-align:center;

  color:#4fc3f7;

  font-size:clamp(1.6rem,4vw,2.2rem);

}


/* Controls */

.controls {

  display:flex;

  justify-content:center;

  align-items:center;

  gap:12px;

  margin-bottom:25px;

}


input {

  flex:1;

  max-width:350px;

  padding:14px 20px;

  border:none;

  outline:none;

  border-radius:30px;

  font-size:16px;

}


button {

  padding:14px 28px;

  border:none;

  border-radius:30px;

  background:#4fc3f7;

  color:#111;

  font-weight:bold;

  cursor:pointer;

}


button:hover {

  background:white;

}


/* Info */

#info {

  text-align:center;

  color:#ccc;

  margin-bottom:20px;

}


/* Table wrapper */

.table-container {

  width:100%;

  overflow-x:auto;

  border-radius:12px;

}


/* Table */

table {

  width:100%;

  min-width:700px;

  border-collapse:collapse;

  background:#1f2937;

}


thead {

  background:#4fc3f7;

  color:#111;

}


th {

  padding:15px;

}


td {

  padding:13px;

  text-align:center;

}


tbody tr:nth-child(even){

  background:#263445;

}


tbody tr:hover {

  background:#334155;

}


/* Status */

.online {

  color:#4CAF50;

  font-weight:bold;

}


.offline {

  color:#F44336;

  font-weight:bold;

}


.maintenance {

  color:#FFC107;

  font-weight:bold;

}



/* Mobile */

@media(max-width:700px){


  body {

    padding:10px;

  }


  .dashboard {

    padding:18px;

    border-radius:15px;

  }


  .controls {

    flex-direction:column;

    width:100%;

  }


  input,
  button {

    width:100%;

    max-width:none;

  }


  #info {

    font-size:14px;

  }


  .table-container {

    margin-left:-5px;

    width:calc(100% + 10px);

  }


  table {

    min-width:650px;

  }


  th {

    font-size:14px;

    padding:12px;

  }


  td {

    font-size:14px;

    padding:10px;

  }

}



/* Small phones */

@media(max-width:400px){


  .dashboard {

    padding:14px;

  }


  h1 {

    font-size:1.4rem;

  }


  button,
  input {

    padding:12px;

  }

}