/* Admin Layout Fixes */

/* Safe Area: account for device notch / status bar on iOS and Android edge-to-edge */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  /* Total header height = safe area spacer + 64px nav row */
  --admin-header-height: calc(env(safe-area-inset-top, 0px) + 64px);
}

/* Fix 1: Make header truly fixed */
.admin-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

@media (min-width: 1024px) {
  .admin-header {
    left: 16rem;
  }
}

/* Fix 2: Add padding to main content for fixed header */
.admin-main {
  padding-top: 4rem;
}

/* Fix 3: Remove max-width constraints */
.admin-content {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fix 4: Full width layout */
.full-width-content {
  width: 100%;
  max-width: 100%;
}

/* Fix 5: Ensure sidebar doesn't overlap content on desktop */
@media (min-width: 1024px) {
  .admin-layout {
    padding-left: 16rem;
  }
}

/* ================================================
   MOBILE FIXES (< 1024px)
   Scroll behavior: header is fixed, content scrolls
   in its own bounded container below the header.
   This prevents content from overlapping the header.
   ================================================ */
@media (max-width: 1023px) {

  /* Lock the viewport so only the content div scrolls — not the page.
     Scoped to admin-layout only so login/signup pages can scroll normally. */
  body.admin-page {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  /* The outer min-h-screen wrapper: fill viewport, no overflow (admin only) */
  body.admin-page .min-h-screen {
    height: 100% !important;
    min-height: unset !important;
    overflow: hidden;
  }

  /* lg:pl-64 has no left padding on mobile (no sidebar) */
  body.admin-page .lg\:pl-64 {
    padding-left: 0 !important;
    height: 100%;
    overflow: hidden;
  }

  /* ── MAIN CONTENT SCROLL CONTAINER ──────────────────
     Targets ALL admin <main> elements (via .lg:pl-64 main)
     AND the explicit .admin-main-content-padded class.
     Positioned below the fixed header, fills to bottom.
     Scrolls independently — content can never overlap header.
  ─────────────────────────────────────────────────── */
  body.admin-page .lg\:pl-64 main,
  .admin-main-content-padded {
    position: fixed !important;
    top: var(--admin-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    /* Reset all inline/class padding; inner content handles horizontal */
    padding-top: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 32px !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    background: #F5F6FA;
    box-sizing: border-box !important;
  }

  /* Inner content containers: cap horizontal padding at 16px on mobile */
  body.admin-page .lg\:pl-64 main > div,
  .admin-main-content-padded > div {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Pages that use inline padding on their inner wrapper div (audit_logs, roles, etc.) */
  /* Reduce to 16px on each side instead of 32px */
  body.admin-page .lg\:pl-64 main [style*="padding-left: 32px"],
  body.admin-page .lg\:pl-64 main [style*="padding: 0 32px"],
  body.admin-page .lg\:pl-64 main [style*="padding-left:32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Admin safe area: 16px on mobile (already in admin_chit_groups.css, reinforced here) */
  .admin-safe-area {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Dashboard KPI cards — full width on mobile */
  .dashboard-kpi-card {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }

  /* Dashboard activity panels — full width on mobile */
  .dashboard-activity-panel {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }

  /* Tables: horizontal scroll within the cell instead of breaking layout */
  .data-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── LOGIN PAGE ────────────────────────────────────
     Allow the login page to scroll normally — it is NOT
     an admin page so overflow: hidden must not apply.
     Force html/body to be scrollable for the session layout.
  ─────────────────────────────────────────────────── */
  html:has(body:not(.admin-page)),
  body:not(.admin-page) {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Login page logo sizing on small screens */
  .login-logo {
    width: 140px !important;
  }

  /* ── COLLECT PAYMENT PAGE ──────────────────────────
     Fix horizontal overflow: subscriber card right column
     and the page header back-link row.
  ─────────────────────────────────────────────────── */

  /* Subscriber review card: stack on mobile, hide right column */
  .collect-subscriber-card {
    flex-wrap: wrap !important;
  }
  .collect-subscriber-right {
    display: none !important;
  }

  /* Page header row with back link: wrap on mobile */
  .collect-page-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Reduce p-8 form container padding on mobile */
  body.admin-page .lg\:pl-64 main .rounded-2xl.p-8 {
    padding: 16px !important;
  }

  /* ── PAGES WITH px-8 class on main ────────────────
     Override Tailwind horizontal padding on main
     (already handled by padding-left/right: 0 above,
     but reinforce for specific Tailwind classes)
  ─────────────────────────────────────────────────── */
  body.admin-page .lg\:pl-64 main.px-8,
  body.admin-page .lg\:pl-64 main.px-6,
  body.admin-page .lg\:pl-64 main.p-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Settings page main (uses pt-24 p-6 pb-20 Tailwind classes) */
  body.admin-page .lg\:pl-64 main.p-6 > * {
    padding-left: 16px;
    padding-right: 16px;
  }
  body.admin-page .lg\:pl-64 main.p-6 > .px-0,
  body.admin-page .lg\:pl-64 main.p-6 > [style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}