/* SIMHSYCN Phase 1 — Responsive foundation */
@media (max-width: 1380px) {
  body.simh-app .menu-btn { display: inline-flex !important; }

  body.simh-app .app-sidebar {
    transform: translateX(-105%) !important;
    transition: transform .2s ease !important;
  }

  body.simh-app.menu-open .app-sidebar { transform: translateX(0) !important; }
  body.simh-app.menu-open .mobile-backdrop { display: block !important; }

  body.simh-app .app-main { margin-left: 0 !important; }
}

@media (max-width: 980px) {
  body.simh-app .content-area { padding: 20px 18px 32px !important; }
  body.simh-app .topbar { padding: 0 15px !important; }
  body.simh-app .top-status-pill { display: none !important; }

  body.simh-app .grid,
  body.simh-app .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  body.simh-app .native-hero { min-height: 132px !important; padding: 20px !important; }
}

@media (max-width: 720px) {
  :root {
    --simh-topbar-height: 60px;
    --simh-sidebar-width: min(286px, 88vw);
  }

  body.simh-app { font-size: 13px; }
  body.simh-app .topbar { gap: 10px !important; padding: 0 11px !important; }
  body.simh-app .top-brand strong { max-width: 56vw; font-size: 14px !important; }
  body.simh-app .brand-mark,
  body.simh-app .top-brand .brand-mark {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  body.simh-app .menu-btn,
  body.simh-app .top-icon-btn {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  body.simh-app .content-area { padding: 17px 12px 26px !important; }
  body.simh-app .page-title { margin-bottom: 15px !important; padding-bottom: 13px !important; }
  body.simh-app .page-title h1 { font-size: 21px !important; }
  body.simh-app .page-title p { font-size: 12px !important; }

  body.simh-app .grid,
  body.simh-app .stats { grid-template-columns: 1fr !important; gap: 12px !important; }

  body.simh-app .card,
  body.simh-app .panel,
  body.simh-app .form-card,
  body.simh-app .detail-card { padding: 15px !important; }

  body.simh-app .native-hero {
    min-height: 0 !important;
    padding: 17px !important;
    align-items: flex-start !important;
  }

  body.simh-app .native-hero-icon {
    min-width: 54px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 15px !important;
    font-size: 24px !important;
  }

  body.simh-app .section-head { align-items: center !important; }

  body.simh-app table {
    min-width: 640px;
    font-size: 12px !important;
  }

  body.simh-app .card:has(> table),
  body.simh-app .panel:has(> table) { overflow-x: auto; }

  body.simh-app .site-footer {
    min-height: 46px !important;
    padding: 9px 12px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 10.5px !important;
  }

  body.simh-app .site-footer span + span { display: none !important; }
}

@media (max-width: 440px) {
  body.simh-app .top-brand strong { max-width: 48vw; }
  body.simh-app .native-hero-icon { display: none !important; }
  body.simh-app .section-head { align-items: flex-start !important; flex-direction: column !important; }
  body.simh-app .btn { width: 100%; }
  body.simh-app .btn.inline,
  body.simh-app .tiny-view-link,
  body.simh-app .view-link { width: auto; }
}

@supports not selector(:has(*)) {
  @media (max-width: 720px) {
    body.simh-app .content-area { overflow-x: hidden; }
    body.simh-app table { display: block; overflow-x: auto; }
  }
}


/* Phase 2 desktop/navigation breakpoint: keep the sidebar visible on normal laptops. */
@media (max-width: 1160px) {
  body.simh-app .menu-btn { display: inline-flex !important; }

  body.simh-app .app-sidebar {
    transform: translateX(-105%) !important;
    transition: transform .2s ease !important;
  }

  body.simh-app.menu-open .app-sidebar { transform: translateX(0) !important; }
  body.simh-app.menu-open .mobile-backdrop { display: block !important; }
  body.simh-app .app-main { margin-left: 0 !important; }
}

@media (min-width: 1161px) {
  body.simh-app .menu-btn { display: none !important; }
  body.simh-app .app-sidebar { transform: none !important; }
  body.simh-app .app-main { margin-left: var(--simh-sidebar-width) !important; }
}

@media (max-width: 720px) {
  body.simh-app .page-title {
    min-height: 76px !important;
    padding: 15px 18px 15px 21px !important;
  }

  body.simh-app .page-title::after { display: none; }
  body.simh-app .content-area { padding: 17px 12px 28px !important; }
}


/* --------------------------------------------------------------------------
   Phase 2 desktop correction — authoritative sidebar breakpoint
   The legacy layout-fixes stylesheet hides the sidebar up to 1380px using
   visibility:hidden. These rules deliberately override that behavior.
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
  body.simh-app:not(.auth-page) .menu-btn {
    display: none !important;
  }

  body.simh-app:not(.auth-page) .app-sidebar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  body.simh-app:not(.auth-page) .mobile-backdrop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 1100px) {
  body.simh-app:not(.auth-page) .menu-btn {
    display: inline-flex !important;
  }

  body.simh-app:not(.auth-page) .app-sidebar {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateX(-105%) !important;
    transition: transform .2s ease, opacity .2s ease, visibility .2s ease !important;
  }

  body.simh-app.menu-open:not(.auth-page) .app-sidebar {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  body.simh-app.menu-open:not(.auth-page) .mobile-backdrop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}