/* Mobile-only layout hardening. Desktop styles remain untouched. */
@media (max-width: 991.98px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { min-width: 0 !important; }
  img, svg, video, canvas, iframe { max-width: 100%; }
  iframe { width: 100%; }
  #page-container, #m3-main-content, main, .main-content { width: 100%; max-width: 100%; min-width: 0; }
  #m3-main-content { margin-left: 0 !important; }
  #m3-navigation-rail { display: none !important; }
  #m3-top-bar { left: 0 !important; right: 0 !important; width: auto !important; padding-left: max(12px, env(safe-area-inset-left)) !important; padding-right: max(12px, env(safe-area-inset-right)) !important; }
  #m3-top-bar h1, #m3-top-bar .h5 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .container, .container-fluid, .content, .content-wrap { max-width: 100%; }
  .row > * { min-width: 0; }
  .table-responsive { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .m3-card, .block, .card { max-width: 100%; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .btn, .btn-m3, button, input, select, textarea { max-width: 100%; }
  input, select, textarea { font-size: 16px !important; }
  /* Keep every page's mobile drawer on the same, reliable transform model. */
  #m3-nav-drawer {
    box-sizing: border-box !important;
    display: flex !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: min(86vw, 320px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 320px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-top: max(20px, env(safe-area-inset-top)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    transform: translateX(calc(100% + 40px)) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility 0s linear .3s !important;
    will-change: transform;
  }
  #m3-nav-drawer.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: -8px 0 28px rgba(0,0,0,.22) !important;
    transition-delay: 0s !important;
  }
  #m3-nav-drawer .drawer-item {
    width: 100% !important;
    min-width: 0;
    flex: 0 0 56px;
    box-sizing: border-box;
  }
  #m3-nav-drawer > .d-flex:first-child { flex: 0 0 auto; min-width: 0; }
  #m3-nav-drawer > .d-flex:first-child span { min-width: 0; overflow-wrap: anywhere; }
  .drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1090 !important;
    margin: 0 !important;
    background: rgba(20,18,24,.52) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: block !important;
    transition: opacity .25s, visibility 0s linear .25s !important;
  }
  .drawer-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s !important;
  }
  #m3-drawer-toggle {
    position: relative;
    z-index: 1;
    flex: 0 0 44px;
    width: 44px !important;
    min-width: 44px;
    height: 44px;
  }
}

@media (max-width: 575.98px) {
  body { font-size: 15px; }
  .container, .container-fluid, .content, .content-wrap { padding-left: max(14px, env(safe-area-inset-left)) !important; padding-right: max(14px, env(safe-area-inset-right)) !important; }
  #m3-top-bar { height: 58px !important; }
  #m3-main-content { padding-top: 58px !important; }
  #m3-top-bar .content-header, #m3-top-bar > div { min-width: 0; }
  #m3-top-bar img { max-width: 32px; flex: 0 0 auto; }
  .hero-banner { min-height: 250px !important; height: auto !important; padding: 52px 16px 76px !important; border-radius: 0 0 24px 24px !important; }
  .hero-title { font-size: clamp(1.9rem, 10vw, 2.65rem) !important; overflow-wrap: anywhere; }
  .hero-subtitle, .hero-banner p { max-width: 100%; }
  .content-wrap { margin-top: -28px !important; padding-bottom: 48px !important; }
  .m3-card:not(.server-project-card):not(.trad-server-card), .card, .block { padding: 18px !important; border-radius: 20px !important; margin-bottom: 14px !important; }
  .m3-card.p-0, .card.p-0, .block.p-0 { padding: 0 !important; }
  .server-project-card, .trad-server-card { margin-bottom: 0 !important; }
  .section-heading { align-items: flex-start; gap: 10px; margin-bottom: 16px; }
  .section-heading h1, .section-heading h2, .section-heading h3 { min-width: 0; overflow-wrap: anywhere; }
  .d-flex.flex-wrap.gap-3 > .status-box { min-width: calc(50% - 8px) !important; }
  .status-box { padding: 14px 8px !important; }
  .status-val { font-size: 1.55rem !important; }
  .info-row { align-items: flex-start !important; gap: 10px !important; }
  .info-label { flex: 0 0 auto; }
  .info-value { min-width: 0; overflow-wrap: anywhere; }
  .btn-m3 { width: 100%; min-height: 50px; padding: 0 18px !important; }
  .m3-dialog-overlay { align-items: flex-end !important; padding: 0 !important; }
  .m3-dialog { max-width: none !important; border-radius: 26px 26px 0 0 !important; padding: 24px 18px max(22px, env(safe-area-inset-bottom)) !important; }
  .m3-snackbar { bottom: max(14px, env(safe-area-inset-bottom)) !important; }
  .gallery-img { border-radius: 15px !important; }
  footer, #m3-footer { padding-bottom: max(28px, env(safe-area-inset-bottom)) !important; }
  .footer-social-btn { width: 48px; height: 48px; }
}

@media (max-width: 359.98px) {
  .container, .container-fluid, .content, .content-wrap { padding-left: 10px !important; padding-right: 10px !important; }
  .m3-card, .card, .block { padding: 15px !important; }
  .d-flex.flex-wrap.gap-3 > .status-box { min-width: 100% !important; }
}