body {
  color: var(--navy);

}

.hero {
  max-height: 600px;
  color: var(--light);
}

/* Dashboard Cards */
.cards {

  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:30px;

}

.card {

  flex:1;
  min-width:180px;
  background:white;
  padding:20px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);

}

.card:hover {

  background: #ecf3fd;
  transition: 0.2s;

}

.card h3 {

  margin:0;
  font-size:15px;
  color:#555;

}

.card p {

  font-size:24px;
  margin-top:10px;
  font-weight:bold;
  color: var(--green);

}


/* CONTROLS */
.dashboard-controls {

  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  flex-wrap:wrap; /* prevents overlap */
  gap:10px;

}

/* button {

  background: var(--green);
  border:none;
  padding:10px 18px;
  color:white;
  border-radius:8px;
  cursor:pointer;
  font-weight:bold;

} */

/* Dashboard Sort */
select {

  padding:10px;
  border-radius:8px;
  border:1px solid var(--border);

}


/* Dashboard Table */
.table-cards {

  border-radius: 10px; 
  overflow: hidden;    

}

table {
  width: 100%;
  background:white;
  border: none;
  border-collapse: collapse;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);

}

/* KEY mobile fix */
th {
  
  background: var(--navy);
  color:white;
  text-align:left;
  padding:14px;

}

td {

  padding:14px;
  border-bottom:1px solid var(--border);

}

.table-cards {
  width: 100%;

}

td button {
  float: right;
  margin-right: 10px;

  width: 8%;

}

tr:hover {

  background: #ecf3fd;
  transition: 0.2s;

}


/* CHART */

.chart-container {

  background:white;
  padding:20px;
  border-radius:10px;
  margin-top:30px;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);

}

/* Dashboard Tablet */
@media(max-width: 768px){

  .container {

    padding:20px;

  }

  .navbar {

    padding:16px;

  }

  .logout-btn {

    font-size:16px;
    padding:8px 14px;

  }

  .cards {

    flex-direction:column;

  }

  .card {

    width:100%;

  }

  .dashboard-controls {

    flex-direction:column;
    align-items:stretch;

  }

  select, button {

    width:100%;

  }

  td button {

    width: 25%;

  }
  
}


/* SMALL PHONE */

@media(max-width:480px){

  .container {

    padding:15px;

  }

  .card p {

    font-size:20px;

  }

  .chart-container {

    padding:15px;

  }

  table {
    font-size:14px;

  }
}