/* STYLES EXTRACTED FROM INTERNAL.CSS (Mobile Layout) */
/* This file is loaded dynamically with a media query in head.hbs */
@media (max-width: 1020px) {
  :root {
    --sidebar-width: 0px;
  }
  aside#sidebar {
    transform: translateX(-100%);
    width: 280px;
  }
  aside#sidebar.open {
    transform: translateX(0);
  }
  .collapse-toggle-btn {
    display: none;
  }

  .menu-overlay.open {
    opacity: 1;
    visibility: visible;
  }
  main {
    margin-left: 0;
    padding: 90px 20px 40px 20px;
  }

  .mobile-header {
    display: flex;
  }

  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
  }

  .controls-group {
    flex-direction: column;
    width: 100%;
    gap: 15px;
    align-items: stretch;
  }

  .search-input {
    width: 100%;
  }

  .status-filter-group {
    width: 100%;
    justify-content: space-around;
  }

  .new-btn {
    width: 100%;
    justify-content: center;
  }

  /* Also include specific overrides that were in square.css for consistency if classes exist */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
  }

  .header-actions {
    width: 100%;
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .btn-new-topic {
    width: 100%;
    justify-content: center;
  }
}