@media (min-width: 768px) and (max-width: 979px) {
    /* No specific rules needed here with the new flexbox model */
}

@media (max-width: 768px) {
  .header {
    position: relative;
  }
  
  #sidebar {
    position: fixed;
    left: -210px;
    top: 0;
    height: 100vh;
    transition: left 0.3s ease-in-out;
    z-index: 1050;
  }

  #main-content {
    margin-left: 0 !important;
    transition: margin-left 0.3s ease-in-out;
  }

  #container.sidebar-visible #sidebar {
    left: 0;
  }

  /* Add an overlay to the main content when the sidebar is visible */
  #container.sidebar-visible #main-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
  }
  
  .wrapper {
    padding-top: 60px; /* Add padding to prevent content from going under the fixed header */
  }

  .form-panel, .content-panel {
    padding: 15px;
  }

  .form-horizontal .form-group, .form-group {
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .form-group .col-sm-3,
  .form-group .col-sm-6,
  .form-group .col-sm-9,
  .form-group .btn,
  .form-group input,
  .form-group select,
  .form-group textarea {
      width: 100% !important;
      margin-bottom: 10px;
      float: none;
  }
  
  .table-responsive {
    border: none;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .action-buttons .btn {
      margin-bottom: 5px !important;
  }
}

@media (max-width: 480px) {
  .header .brand {
      font-size: 18px;
  }
  .form-input-half {
      width: 100%;
  }
}