/* ==========================================================================
   CODEORBIT — RESPONSIVE RULES
   Layout is one centred column under a top bar, so phones mostly need
   tighter spacing and a scrollable navigation row.
   ========================================================================== */

@media (max-width: 860px) {
  :root {
    --topbar-height: auto;
  }

  .topbar-inner {
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: var(--space-sm);
  }

  .brand-link {
    flex: 1;
  }

  /* Navigation drops to its own scrollable row under the logo */
  .main-nav {
    order: 3;
    flex-basis: 100%;
    margin: 0 calc(-1 * var(--page-gutter));
    padding: var(--space-xs) var(--page-gutter);
  }

  .content-area {
    padding-top: var(--space-xl);
  }
}

@media (max-width: 520px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-right {
    width: 100%;
    justify-content: space-between;
  }

  .search-box {
    width: 100%;
  }

  .modal-container {
    max-height: 94vh;
    border-radius: var(--radius-md);
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer .btn {
    width: 100%;
  }

  .toast-container {
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: var(--space-sm);
  }

  .home-empty-actions .btn {
    width: 100%;
  }
}

@media print {
  .topbar,
  .app-footer,
  #stars-canvas {
    display: none !important;
  }

  .btn {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }
}