/* Mobile-only overrides for the dashboard.
   This keeps your original `style.css` and `app.js` unchanged. */

@media (max-width: 820px){
  body{
    padding: 14px;
  }

  .top-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .layout{
    flex-direction: column;
    gap: 14px;
  }

  .left,
  .right{
    width: 100%;
  }

  .right{
    gap: 12px;
  }

  .card{
    height: auto;
    min-height: 220px;
  }

  .card canvas{
    max-height: 220px;
  }

  .day{
    padding: 14px;
    border-radius: 14px;
  }

  #calendar{
    gap: 8px;
  }

  .weekdays{
    gap: 8px;
  }

  .modalContent{
    width: min(92vw, 360px);
  }

  .rex-widget{
    transform: scale(0.9);
    transform-origin: top left;
    left: 8px;
    top: 8px;
  }
}

@media (max-width: 420px){
  .top-stats{
    grid-template-columns: 1fr;
  }

  .top-stats div{
    padding: 12px;
  }

  .day{
    padding: 12px;
  }
}