@media (max-width: 768px) {
      .username {display: none}
      body {
        flex-direction: column;
      }
      .left {
        width: 100% !important;
      }
      .right {
        width: 100%;
        max-width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-light);
      }
      .main-grid, .main-grid-task{
        grid-template-columns: 1fr;
      }
    }




@media (max-width: 1024px) {
  .main-grid, .main-grid-task{
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  body {
    flex-direction: column;
  }

  .left {
    width: 100% !important;
  }

  .right {
    width: 100%;
    max-width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-light);
  }

  .main-grid, .main-grid-task{
    grid-template-columns: 1fr;
  }

  header,
  nav.menu {
    border-left: 6px solid var(--accent);
padding: 0 16px;
  }

  .header-actions {
    gap: 8px;
  }

  .avatar-placeholder,
  .username {
    font-size: 13px;
  }
}

/* Hide right panel and menu text on tablet and mobile */
@media (max-width: 1024px) {
  .right {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .right {
    display: none !important;
  }


}



@media (max-width: 1024px) {
  #rightToggle {
    display: none !important;
  }
}