/* ── CreatorOS Mobile / Responsive Rules ─────────────────────────────────── */

.mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg, #0A0A0F);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 50;
}

@media (max-width: 768px) {
  .mobile-topbar {
    display: flex !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -280px !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    -webkit-transition: left 0.3s ease !important;
    transition: left 0.3s ease !important;
  }

  .sidebar.open {
    left: 0 !important;
  }

  .mobile-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 9998 !important;
  }

  .mobile-overlay.open {
    display: block !important;
  }

  .main, .main-content, .content-area, .content-wrap, .page-content, .scrollable {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .cal-grid {
    overflow-x: auto;
  }

  .row2, .row3 {
    grid-template-columns: 1fr !important;
  }

  .topbar-title {
    font-size: 13px !important;
  }

  .scrollable, .main-content, .page-content {
    padding: 12px !important;
  }
}