/* Shared responsive hardening for public, admin, client, auth, and document screens. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }

@media (max-width: 900px) {
  .admin-body, .client-body { padding: 1rem !important; }
  .admin-topbar, .client-header { padding: .8rem 1rem !important; }
  .admin-topbar { align-items: stretch !important; }
  .topbar-right, .header-user-meta { width: 100%; overflow-x: auto; padding-bottom: .2rem; }
  .topbar-right > *, .header-user-meta > * { flex: 0 0 auto; }
  .panel-header, .portal-card-header { align-items: flex-start !important; gap: .8rem !important; }
  .panel-header { flex-direction: column; }
  .panel-header > .btn, .panel-header > a, .panel-header > button { width: 100%; justify-content: center; }
  .admin-body [style*="grid-template-columns: 300px 1fr 320px"] { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .admin-body [style*="grid-template-columns: 1.2fr 0.8fr"],
  .admin-body [style*="grid-template-columns:1.2fr 0.8fr"] { grid-template-columns: 1fr !important; }
  .admin-body .form-grid, .client-body .form-grid { grid-template-columns: 1fr !important; }
  .admin-modal { padding: .75rem !important; align-items: flex-start !important; }
  .admin-modal-card { width: 100% !important; max-width: none !important; max-height: calc(100dvh - 1.5rem) !important; margin: 0 !important; }
  .admin-modal-body { padding: 1rem !important; overflow-y: auto; }
  .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; }
  table { min-width: 680px; }
  th, td { white-space: normal; vertical-align: top; }
}

@media (max-width: 768px) {
  body { -webkit-text-size-adjust: 100%; }
  .container { width: min(calc(100% - 1.5rem), var(--content-width, 1280px)) !important; }
  main > section { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
  main > section:first-child { padding-top: 2.5rem !important; }
  main h1, .hero-title { font-size: clamp(2rem, 9vw, 2.65rem) !important; line-height: 1.12 !important; overflow-wrap: anywhere; }
  main h2, .section-title { font-size: clamp(1.55rem, 7vw, 2rem) !important; line-height: 1.18 !important; }
  main h3 { overflow-wrap: anywhere; }
  main p { overflow-wrap: anywhere; }
  .top-info-bar { display: none !important; }
  .site-header .container { min-height: 68px; gap: .5rem; }
  .site-header .brand-logo { min-width: 0; }
  .site-header .logo-name { font-size: 1rem !important; }
  .site-header .logo-sub { font-size: .58rem !important; }
  .site-header .header-actions > a { display: none !important; }
  .mobile-menu-btn { min-width: 44px; min-height: 44px; }
  .mobile-drawer { width: min(88vw, 360px) !important; }
  .drawer-nav-link { min-height: 46px; }
  .btn { min-height: 42px; white-space: normal; text-align: center; justify-content: center; }
  .btn-sm { min-height: 38px; }
  input, select, textarea, .form-control { font-size: 16px !important; min-height: 44px; }
  textarea, textarea.form-control { min-height: 110px; }
  [style*="minmax(350px"], [style*="minmax(340px"], [style*="minmax(320px"],
  [style*="minmax(300px"], [style*="minmax(280px"], [style*="minmax(260px"],
  [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 2fr"], [style*="grid-template-columns:2fr 1fr 2fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="grid-column:1/-1"], [style*="grid-column: 1 / -1"] { min-width: 0; }
  .pricing-grid, .project-cards-grid, .deliverables-grid, .quota-grid, .portal-columns,
  .hero-stats-showcase, .transformation-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .pricing-card, .video-card, .proj-card, .portal-card, .panel-card { min-width: 0; padding: 1.15rem !important; }
  .pricing-card-ribbon { position: static !important; display: inline-flex; margin-bottom: .8rem; }
  .pricing-card-header { padding-right: 0 !important; }
  .plan-price { font-size: 1.8rem !important; }
  .hero-stats-showcase { gap: .8rem !important; }
  .hero-stat-card { padding: 1rem !important; }
  .floating-wa-btn { width: 52px !important; height: 52px !important; right: 14px !important; bottom: 14px !important; font-size: 1.55rem !important; }
  .site-footer { padding: 3rem 0 5rem !important; }
  .site-footer .container > div:first-child { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .site-footer .container > div:last-child { align-items: flex-start !important; flex-direction: column !important; }
  .site-footer .container > div:last-child > div:last-child { gap: .6rem !important; flex-wrap: wrap; }
  .modal-overlay { padding: .65rem !important; }
  .modal-overlay > div { max-height: calc(100dvh - 1.3rem); overflow-y: auto !important; border-radius: 8px !important; }
  .crop-ratio-btn { font-size: .7rem !important; }
  .login-container, .register-container, .install-container { width: 100% !important; }
  .auth-card, .register-card { padding: 1.35rem 1rem !important; border-radius: 8px !important; }
  .demo-btn-group { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .container { width: min(calc(100% - 1rem), var(--content-width, 1280px)) !important; }
  .admin-body, .client-body { padding: .65rem !important; }
  .panel-card, .portal-card, .pricing-card { padding: .9rem !important; border-radius: 6px !important; }
  .admin-topbar .topbar-title h2 { font-size: 1rem !important; }
  .brand-header { margin-bottom: 1.25rem !important; }
  .toolbar { padding: 0 .5rem; flex-wrap: wrap; }
  .toolbar .btn { flex: 1; }
}