/*
============================================================
Club OS Studio
Datei: responsive.css
Zweck: Responsive Studio-Anpassungen
Phase: 13.3 - Studio Shell
============================================================
*/

@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-sections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 880px) {
  .studio-sidebar {
    transform: translateX(-100%);

    transition: transform var(--studio-transition);
  }

  .studio-sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    z-index: 950;
    inset: 0;

    display: block;

    visibility: hidden;

    background: rgba(0, 0, 0, 0.58);
    opacity: 0;

    transition:
      opacity var(--studio-transition),
      visibility var(--studio-transition);
  }

  .sidebar-overlay.is-visible {
    visibility: visible;
    opacity: 1;
  }

  .studio-main {
    margin-left: 0;
  }

  .topbar-mobile-button {
    display: inline-grid;

    place-items: center;
  }

  .studio-topbar {
    padding: 0 18px;
  }

  .studio-content {
    padding: 24px 18px;
  }
}

@media (max-width: 620px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .studio-button {
    width: 100%;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .topbar-user__info {
    display: none;
  }

  .topbar-logout-button {
    padding: 8px 10px;

    font-size: 0;
  }

  .topbar-logout-button::after {
    font-size: 1rem;

    content: "↪";
  }

  .login-card {
    padding: 28px 22px;
  }
}