/* ============================================================
   SATR — Global responsive layout
   Loaded last so it can override page-specific CSS.
   ============================================================ */

html {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}

.layout,
.admin-layout,
.group-detail-layout,
.app-container,
.main-content,
.feed-column,
.dashboard-main,
.profile-main,
.admin-content {
  min-width: 0;
  max-width: 100%;
}

/* Auto-fill grids that previously overflowed below ~360px */
.projects-grid,
.groups-grid,
.devs-grid,
.developers-grid,
.snippets-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

/* ── Tablet ── */
@media (max-width: 1100px) {
  .right-panel,
  .group-right-panel {
    display: none !important;
  }

  .layout {
    grid-template-columns: 240px 1fr !important;
  }

  .group-detail-layout {
    grid-template-columns: 260px 1fr !important;
  }
}

@media (max-width: 1024px) {
  .project-page-layout,
  .code-studio-grid,
  .two-col,
  .two-col-grid,
  .three-col {
    grid-template-columns: 1fr !important;
  }

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

  .admin-layout {
    grid-template-columns: 1fr !important;
  }

  .admin-sidebar {
    position: fixed !important;
    top: 0;
    right: 0;
    width: min(280px, 86vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1150;
    transform: translateX(110%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
  }

  .admin-sidebar.active {
    transform: translateX(0);
  }

  .admin-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px !important;
  }
}

@media (max-width: 900px) {
  .satr-mobile-header {
    display: flex;
  }

  .sidebar:not(.satr-drawer-sidebar) {
    display: none !important;
  }

  .layout,
  .group-detail-layout,
  .app-container {
    grid-template-columns: 1fr !important;
  }

  .layout,
  .group-detail-layout {
    padding-bottom: 74px;
  }

  .main-content,
  .feed-column,
  .dashboard-main,
  .profile-main,
  .admin-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100% !important;
    width: 100%;
  }

  .feed-column {
    border-left: none !important;
  }
}

@media (max-width: 768px) {
  .satr-bottom-nav {
    display: flex;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  .projects-grid,
  .groups-grid,
  .devs-grid,
  .developers-grid,
  .snippets-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .stats-grid,
  .admin-metrics-grid,
  .stats-grid-4,
  .stats-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .hero-quick-stats,
  .project-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
  }

  .projects-hero,
  .code-hero,
  .groups-hero,
  .dash-hero,
  .discovery-hero {
    padding: 20px 16px !important;
    flex-direction: column;
    align-items: flex-start !important;
  }

  .projects-hero h1,
  .code-hero h1,
  .hero-title,
  .hero-headline,
  .hero-name,
  .proj-title,
  .group-title-main,
  .group-detail-name {
    font-size: 1.45rem !important;
  }

  .projects-filter-bar,
  .search-and-sort-bar,
  .feed-header,
  .composer-footer,
  .project-header-top,
  .project-card-footer,
  .snippet-card-header,
  .code-editor-header,
  .feedback-section-header,
  .admin-card-header,
  .modal-header {
    flex-wrap: wrap !important;
  }

  .projects-search-wrap {
    min-width: 0 !important;
    width: 100%;
  }

  .form-row-2col,
  .form-row {
    grid-template-columns: 1fr !important;
  }

  .modal-card,
  .modal-content,
  .code-modal-content,
  .auth-card {
    padding: 16px !important;
    max-width: 100% !important;
  }

  .modal-backdrop,
  .lightbox-modal {
    padding: 10px !important;
    align-items: flex-start;
  }

  .filter-chips-row,
  .filter-chips-container,
  .tech-filter-bar,
  .profile-tabs-header,
  .code-lang-chips,
  .categories-chips-bar,
  .specialty-chips-wrapper,
  .feed-tabs,
  .group-tabs-nav,
  .editor-quick-templates,
  .code-mode-switcher {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-chips-row::-webkit-scrollbar,
  .filter-chips-container::-webkit-scrollbar,
  .tech-filter-bar::-webkit-scrollbar,
  .profile-tabs-header::-webkit-scrollbar,
  .code-lang-chips::-webkit-scrollbar,
  .categories-chips-bar::-webkit-scrollbar,
  .specialty-chips-wrapper::-webkit-scrollbar,
  .feed-tabs::-webkit-scrollbar,
  .group-tabs-nav::-webkit-scrollbar,
  .editor-quick-templates::-webkit-scrollbar,
  .code-mode-switcher::-webkit-scrollbar {
    display: none;
  }

  .code-mode-btn {
    flex: 1 0 auto;
    white-space: nowrap;
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
  }

  .post-actions {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .action-btn {
    flex-shrink: 0;
    padding: 5px 8px !important;
    font-size: 0.8rem !important;
  }

  .project-gallery-main {
    height: 220px !important;
  }

  .code-editor-wrapper {
    min-height: 260px !important;
    max-height: 420px !important;
  }

  .code-textarea,
  .code-line-numbers {
    font-size: 0.82rem !important;
  }

  pre, code, .satr-code-pre, .code-editor-wrapper, .snippet-code-preview {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .toast {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: none;
  }

  input, select, textarea, .form-input, .form-textarea, .form-select {
    font-size: 16px !important;
  }

  .btn {
    white-space: nowrap;
  }

  .dash-hero-inner {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .avatar-section {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .profile-actions {
    width: 100%;
  }

  .profile-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .profile-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .composer-body,
  .composer-row {
    min-width: 0;
  }

  .group-avatar-wrap {
    flex-wrap: wrap;
  }

  .group-banner-content {
    padding: 0 14px 16px !important;
  }

  .group-action-btns {
    width: 100%;
    flex-wrap: wrap;
  }

  .admin-content {
    padding: 16px 12px !important;
  }

  .dash-skeleton-stats,
  .dash-skeleton-two {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .stats-grid,
  .admin-metrics-grid,
  .stats-grid-4,
  .hero-quick-stats {
    grid-template-columns: 1fr !important;
  }

  .stats-bar {
    grid-template-columns: 1fr 1fr !important;
  }

  .satr-bottom-nav-item span {
    font-size: 0.62rem;
  }

  .satr-bottom-nav-item {
    padding: 6px 4px;
    max-width: none;
  }

  .btn-lg {
    padding: 0.65rem 1.1rem !important;
    font-size: 0.95rem !important;
  }

  .auth-card {
    padding: 22px 16px !important;
  }

  .dash-skeleton-stats {
    grid-template-columns: 1fr !important;
  }

  .dash-skeleton-two {
    grid-template-columns: 1fr !important;
  }
}