/* ===========================================
   Responsive Styles - Media Queries
   =========================================== */

/* Tablet (max-width: 992px) */
@media (max-width: 992px) {
  .header-status-container {
    gap: 1rem;
  }

  .circular-meter-sm {
    width: 50px;
    height: 50px;
  }

  .circular-meter-sm .meter-value {
    font-size: 0.8rem;
  }
}

/* Small Tablet / Large Mobile (max-width: 768px) */
@media (max-width: 768px) {
  :root {
    --cell-size: 60px;
    --emoji-size: 2rem;
  }

  .header-status-container {
    gap: 0.75rem;
  }

  .header-title h1 {
    font-size: 1rem !important;
  }

  .circular-meter-sm {
    width: 45px;
    height: 45px;
  }

  .circular-meter-sm .meter-value {
    font-size: 0.75rem;
  }

  .circular-meter-sm .meter-label {
    font-size: 0.45rem;
  }

  .status-label {
    font-size: 0.65rem;
  }
}

/* Mobile (max-width: 576px) */
@media (max-width: 576px) {
  :root {
    --cell-size: 50px;
    --emoji-size: 1.5rem;
  }

  .header-status-container {
    flex-direction: column;
    gap: 0.5rem;
  }

  .header-status-group {
    flex-direction: row;
    gap: 0.5rem;
  }
}