/* ═══════════════════════════════════════════════════════════════════
   ETH RESPONSIVE — Global mobile-first fixes for endstownhall.com
   Upload to public_html/ alongside all HTML files.
   Injected as the last stylesheet on every page.
═══════════════════════════════════════════════════════════════════ */

/* ─── BASE ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }

/* Prevent iOS from zooming on input focus (font-size must be ≥16px) */
input, textarea, select { font-size: max(16px, 1em) !important; }

/* Ensure code/pre doesn't bust layout */
pre, code { white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }

/* ─── NAVIGATION ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-container, .navbar { padding-left: 1rem !important; padding-right: 1rem !important; }
  .nav-links { gap: 0.6rem !important; }
}

/* ─── CONTAINERS & PADDING ──────────────────────────────────────── */
@media (max-width: 768px) {
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
}
@media (max-width: 480px) {
  .container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}

/* ─── TABLES ────────────────────────────────────────────────────── */
/* Wrap tables so they scroll horizontally instead of busting layout */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 480px; border-collapse: collapse; }

@media (max-width: 768px) {
  /* Auto-wrap any table not already in a .table-wrap */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  td, th { padding: 0.45rem 0.6rem !important; font-size: 0.77rem !important; white-space: nowrap; }
}

/* ─── TABS ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn, [class*="tab-btn-"] {
    flex-shrink: 0 !important;
    white-space: nowrap;
    font-size: 0.7rem !important;
    padding: 0.4rem 0.65rem !important;
  }
}

/* ─── CARDS & GRIDS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card, [class$="-card"], [class*="-card "] {
    padding: 1rem !important;
  }
}

/* Stat/metric cards: 2-col on small, 1-col on tiny */
@media (max-width: 640px) {
  .stats-grid, .stat-grid, .overview-grid, .metrics-grid,
  .overview-stats, .stat-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
}
@media (max-width: 380px) {
  .stats-grid, .stat-grid, .overview-grid, .metrics-grid,
  .overview-stats, .stat-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ─── FORMS ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-row, .input-row, .form-grid {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .form-row > *, .input-row > * { width: 100% !important; }
  .auth-card, .form-card, .settings-card, .setup-card {
    padding: 1.5rem 1.25rem !important;
  }
}
@media (max-width: 480px) {
  .auth-card { padding: 1.25rem 1rem !important; border-radius: 8px !important; }
  .auth-container { max-width: 100% !important; }
}

/* ─── BUTTONS ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .btn-row, .actions-row, .cta-actions, .button-group, .hero-actions {
    flex-direction: column !important;
    width: 100%;
    align-items: stretch !important;
  }
  .btn-row .btn, .actions-row .btn, .cta-actions .btn,
  .button-group .btn, .hero-actions .btn,
  .hero-actions a[class*="btn"] {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ─── MOD PANEL (customer-mod.html) ─────────────────────────────── */
@media (max-width: 900px) {
  .mod-wrapper, #modWrapper, .panel-layout {
    flex-direction: column !important;
  }
  .mod-sidebar, .panel-sidebar, #modSidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,255,255,0.12);
    padding-bottom: 0.75rem;
  }
  .mod-content, .panel-content, #modContent {
    width: 100% !important;
    min-width: 0 !important;
    padding: 1rem !important;
  }
}

/* ─── MODMAIL SPLIT PANEL ───────────────────────────────────────── */
@media (max-width: 768px) {
  .mm-layout, #mmLayout {
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .mm-sidebar, #mmSidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 260px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,255,255,0.12);
    flex-shrink: 0;
  }
  .mm-thread, #mmThread {
    width: 100% !important;
    height: 500px !important;
    min-height: 0 !important;
  }
  .mm-input-row, #mmInputRow {
    padding: 0.75rem !important;
    gap: 0.5rem !important;
  }
}

/* ─── DASHBOARD ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .detail-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
    font-size: 0.8rem;
  }
  .actions-row, .action-cards, .quick-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
}
@media (max-width: 480px) {
  .detail-grid { grid-template-columns: 1fr !important; }
  .actions-row, .action-cards, .quick-actions { grid-template-columns: 1fr !important; }
}

/* ─── SERVERS PAGE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .servers-grid, .server-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .server-card-actions, .server-actions {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
}
@media (max-width: 480px) {
  .server-card-actions .btn,
  .server-actions .btn { flex: 1 1 100% !important; }
}

/* ─── STORE / PRICING ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .plan-card, .pricing-card { padding: 1.5rem 1.25rem !important; }
}

/* ─── HOW-TO-USE / DOCS ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .docs-wrapper, .how-to-wrapper, .page-wrapper {
    flex-direction: column !important;
  }
  .docs-sidebar, .sidebar, .toc-sidebar {
    width: 100% !important;
    position: static !important;
    height: auto !important;
    max-height: 220px;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,255,255,0.1);
    flex-shrink: 0;
  }
  .docs-content, .main-content, .how-to-content {
    padding: 1rem !important;
    min-width: 0 !important;
  }
}
@media (max-width: 768px) {
  .section { padding: 1rem !important; margin-bottom: 1rem !important; }
  .step { padding: 0.75rem 0.85rem !important; }
  .section-title { font-size: 1rem !important; }
}

/* ─── SETTINGS ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .settings-wrapper, .settings-layout {
    flex-direction: column !important;
  }
  .settings-sidebar { width: 100% !important; border-right: none !important; border-bottom: 1px solid rgba(0,255,255,0.1); }
  .settings-content, .settings-main { padding: 1rem !important; min-width: 0 !important; }
}
@media (max-width: 768px) {
  .setting-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  .toggle-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100%;
  }
  .setting-label { max-width: 100% !important; }
}

/* ─── LEGAL PAGES ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .legal-content, .policy-content, .terms-content,
  .policy-container, .legal-container {
    padding: 1.5rem 1rem !important;
  }
  .legal-content h2, .policy-content h2 { font-size: 1.1rem !important; }
}

/* ─── INDEX (home) ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-title { font-size: clamp(2rem, 12vw, 4rem) !important; }
  .hero-subtitle { font-size: clamp(0.85rem, 3vw, 1rem) !important; }
  .community-section, .features-section, .culture-section {
    padding: 3rem 1rem !important;
  }
  .community-list { columns: 1 !important; }
  .atmos-items { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .hero-section { padding: 1rem !important; }
  .atmos-items { grid-template-columns: 1fr !important; }
  .section-title-main { font-size: 1.6rem !important; }
}

/* ─── MISC OVERFLOW SAFETY ──────────────────────────────────────── */
@media (max-width: 768px) {
  .tab-content, .panel-body, .card-body,
  .section-body, .modal-body { overflow-x: hidden; }

  /* User lookup / investigation panels */
  .user-detail-grid, .investigation-grid {
    grid-template-columns: 1fr 1fr !important;
    font-size: 0.78rem !important;
  }

  /* Admin tables */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}