/* =========================================================
   dashboard-mobile.css
   Mobile-first redesign for user + admin dashboards only.
   PC layout unchanged (all rules under max-width: 720px).
   ========================================================= */

@media (max-width: 720px) {
  /* ---- page chrome ---- */
  body.dashboard-page {
    background: #f2f4f7;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.dashboard-page .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e5e7eb;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.dashboard-page .topbar .brand {
    min-width: 0;
    gap: 8px;
  }

  body.dashboard-page .topbar .brand span:not(.brand-mark) {
    font-size: 15px;
  }

  body.dashboard-page .topbar .nav {
    display: none; /* free vertical space; key actions live in block menu */
  }

  body.dashboard-page .topbar .link-button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 13px;
    font-weight: 800;
  }

  body.dashboard-page .dashboard-shell,
  body.dashboard-page .admin-layout,
  body.dashboard-page .user-layout {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 12px 24px;
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* ---- sidebars become block launchers ---- */
  body.dashboard-page .admin-sidebar,
  body.dashboard-page .user-sidebar {
    position: sticky;
    top: 56px;
    z-index: 30;
    max-height: none;
    margin: 0;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  }

  body.dashboard-page .admin-sidebar-title,
  body.dashboard-page .user-sidebar .admin-sidebar-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 2px;
  }

  body.dashboard-page .admin-sidebar-title span,
  body.dashboard-page .user-sidebar .admin-sidebar-title span {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
  }

  body.dashboard-page .admin-sidebar-title strong,
  body.dashboard-page .user-sidebar .admin-sidebar-title strong {
    font-size: 16px;
    color: #111827;
  }

  /* iOS-safe block menu: NEVER use display:contents (breaks clicks on Safari) */
  body.dashboard-page .admin-menu,
  body.dashboard-page .user-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body.dashboard-page .admin-menu-group,
  body.dashboard-page .user-menu-group {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
  }

  body.dashboard-page .admin-menu-group > span,
  body.dashboard-page .user-menu-group-toggle {
    display: none !important; /* hide group labels/toggles on mobile */
  }

  body.dashboard-page .user-menu-items,
  body.dashboard-page .admin-menu-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* admin groups wrap buttons directly (no .user-menu-items wrapper) */
  body.dashboard-page .admin-menu-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.dashboard-page .user-menu-group.is-collapsed .user-menu-items {
    display: grid !important; /* never collapse on mobile */
  }

  body.dashboard-page .admin-menu-item,
  body.dashboard-page .user-menu .admin-menu-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 52px;
    margin: 0;
    padding: 12px 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25;
    white-space: normal !important;
    text-align: left;
    box-shadow: none !important;
  }

  body.dashboard-page .admin-menu-item .menu-count,
  body.dashboard-page .user-menu .menu-count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
  }

  body.dashboard-page .admin-menu-item.is-active,
  body.dashboard-page .user-menu .admin-menu-item.is-active {
    border-color: rgba(15, 118, 110, 0.45) !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.1) !important;
  }

  body.dashboard-page .admin-menu-item.is-active .menu-count,
  body.dashboard-page .user-menu .admin-menu-item.is-active .menu-count {
    background: #0f766e;
    color: #fff;
  }

  /* ---- workspace content ---- */
  body.dashboard-page .admin-workspace,
  body.dashboard-page .user-workspace {
    min-width: 0;
    padding: 0;
  }

  body.dashboard-page .dashboard-hero {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(160deg, #0f766e 0%, #115e59 55%, #134e4a 100%);
    color: #fff;
    border: 0;
  }

  body.dashboard-page .dashboard-hero h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
  }

  body.dashboard-page .dashboard-hero p,
  body.dashboard-page .dashboard-hero .eyebrow {
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
  }

  body.dashboard-page .dashboard-hero .primary-button,
  body.dashboard-page .dashboard-hero .secondary-button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  body.dashboard-page .section-heading,
  body.dashboard-page .dashboard-heading {
    gap: 6px;
    margin-bottom: 10px;
  }

  body.dashboard-page .section-heading h2,
  body.dashboard-page .dashboard-heading h2 {
    font-size: 18px;
  }

  body.dashboard-page .section-heading p,
  body.dashboard-page .dashboard-heading p {
    font-size: 13px;
    color: #6b7280;
  }

  /* metrics as 2-col blocks */
  body.dashboard-page .metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.dashboard-page .metric-card,
  body.dashboard-page button.metric-card-button {
    min-height: 88px;
    padding: 12px !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
  }

  body.dashboard-page .metric-card strong,
  body.dashboard-page button.metric-card-button strong {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  body.dashboard-page .metric-card span,
  body.dashboard-page button.metric-card-button span {
    font-size: 12px;
  }

  /* cards / lists */
  body.dashboard-page .dashboard-card,
  body.dashboard-page .dashboard-list > .dashboard-card,
  body.dashboard-page .empty-state,
  body.dashboard-page .order-summary-card {
    border-radius: 14px;
    border-color: #e5e7eb;
    background: #fff;
  }

  body.dashboard-page .dashboard-card {
    padding: 14px;
  }

  body.dashboard-page .dashboard-card-head {
    gap: 8px;
  }

  body.dashboard-page .dashboard-card-head h2 {
    font-size: 16px;
  }

  body.dashboard-page .detail-grid,
  body.dashboard-page .settings-grid,
  body.dashboard-page .sku-form-grid,
  body.dashboard-page .repayment-highlight,
  body.dashboard-page .admin-list-filter-grid,
  body.dashboard-page .order-filter-grid,
  body.dashboard-page .user-filter-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.dashboard-page .detail-grid > span,
  body.dashboard-page .detail-grid > div {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
  }

  body.dashboard-page .detail-grid strong {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    word-break: break-word;
  }

  /* stacked data rows as cards */
  body.dashboard-page .admin-data-head {
    display: none !important;
  }

  body.dashboard-page .admin-data-row,
  body.dashboard-page .order-summary-row,
  body.dashboard-page .user-list-row,
  body.dashboard-page .installment-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px !important;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  body.dashboard-page .admin-data-row > *,
  body.dashboard-page .order-summary-row > *,
  body.dashboard-page .installment-row > * {
    min-width: 0;
  }

  body.dashboard-page .button-row,
  body.dashboard-page .sku-status-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.dashboard-page .mini-button,
  body.dashboard-page .primary-button,
  body.dashboard-page .secondary-button,
  body.dashboard-page button.mini-button {
    min-height: 42px;
    border-radius: 12px;
    font-weight: 800;
  }

  body.dashboard-page .mini-button {
    flex: 1 1 calc(50% - 8px);
    padding: 8px 10px;
  }

  body.dashboard-page input,
  body.dashboard-page select,
  body.dashboard-page textarea {
    min-height: 44px;
    border-radius: 12px;
    font-size: 16px; /* avoid iOS zoom */
  }

  body.dashboard-page .status-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
  }

  body.dashboard-page .admin-command-card,
  body.dashboard-page .user-summary-card {
    min-height: 96px;
    border-radius: 14px;
    padding: 14px;
  }

  body.dashboard-page .user-overview-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  body.dashboard-page .finance-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body.dashboard-page .finance-tab {
    min-height: 40px;
    border-radius: 999px;
    font-size: 12px;
  }

  body.dashboard-page .admin-stacked-list {
    display: grid;
    gap: 14px;
  }

  body.dashboard-page .reward-wallet-card,
  body.dashboard-page .interest-term-card,
  body.dashboard-page .plan-interest-card {
    border-radius: 14px;
  }

  body.dashboard-page .interest-seg-row {
    grid-template-columns: 1fr 1fr !important;
  }

  body.dashboard-page .interest-seg-row button {
    grid-column: 1 / -1;
  }

  /* hide noisy desktop-only helpers when empty space tight */
  body.dashboard-page .dashboard-hero + .metric-grid {
    margin-top: 0;
  }

  /* bottom safe floating hint for active page name on user */
  body.dashboard-page .user-page.is-active > .dashboard-list:first-child,
  body.dashboard-page .admin-page.is-active > .dashboard-list:first-child {
    scroll-margin-top: 70px;
  }
}

@media (max-width: 380px) {
  /* keep menus 2-col; only metrics may go single on very narrow screens */
  body.dashboard-page .metric-grid,
  body.dashboard-page .user-overview-grid {
    grid-template-columns: 1fr !important;
  }

  body.dashboard-page .mini-button {
    flex: 1 1 100%;
  }
}

/* hard-guarantee panel visibility when active (mobile) */
@media (max-width: 720px) {
  body.dashboard-page .user-page {
    display: none !important;
  }
  body.dashboard-page .user-page.is-active:not([hidden]) {
    display: grid !important;
    gap: 12px !important;
    min-height: 40vh;
  }
  body.dashboard-page .admin-page {
    display: none !important;
  }
  body.dashboard-page .admin-page.is-active {
    display: grid !important;
    gap: 12px !important;
    min-height: 40vh;
  }
  body.dashboard-page .user-workspace,
  body.dashboard-page .admin-workspace {
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
  }
  /* menu stays compact; content starts clearly below */
  body.dashboard-page .admin-sidebar,
  body.dashboard-page .user-sidebar {
    position: relative !important; /* sticky was covering/confusing content after click */
    top: auto !important;
    max-height: none !important;
  }
}

/* user backend panel hard switch (mobile + desktop safety) */
body.dashboard-page .user-page[hidden],
body.dashboard-page .user-page:not(.is-active) {
  display: none !important;
}
body.dashboard-page .user-page.is-active:not([hidden]) {
  display: grid !important;
  gap: 12px !important;
  min-height: 30vh;
  width: 100%;
}
body.dashboard-page .user-workspace {
  display: grid !important;
  gap: 12px !important;
  width: 100%;
  min-width: 0 !important;
}
@media (max-width: 720px) {
  body.dashboard-page .user-menu.admin-menu,
  body.dashboard-page #userMenuNav {
    display: block !important;
  }
  body.dashboard-page #userMenuNav .admin-menu-group,
  body.dashboard-page .user-menu .admin-menu-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* single content host for user backend */
.user-page-host,
#userPageHost {
  display: block !important;
  width: 100%;
  min-height: 40vh;
  min-width: 0;
}
.user-page-host .user-page-root,
#userPageHost .user-page-root {
  display: grid !important;
  gap: 12px;
  width: 100%;
}
#userHeroBlock[hidden] {
  display: none !important;
}

/* === BLOCK MENU FORCE (user preferred) === */
/* Keep 2-column block tiles on phones; do not fall back to single-column list. */
@media (max-width: 900px) {
  body.dashboard-page .user-sidebar .user-menu,
  body.dashboard-page .user-sidebar #userMenuNav,
  body.dashboard-page .admin-sidebar .admin-menu {
    display: block !important;
  }

  body.dashboard-page .user-sidebar .admin-menu-group,
  body.dashboard-page .user-sidebar .user-menu-group,
  body.dashboard-page #userMenuNav .admin-menu-group,
  body.dashboard-page .admin-sidebar .admin-menu-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.dashboard-page .user-sidebar .admin-menu-item,
  body.dashboard-page #userMenuNav .admin-menu-item,
  body.dashboard-page .admin-sidebar .admin-menu-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 14px 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: left !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04) !important;
  }

  body.dashboard-page .user-sidebar .admin-menu-item.is-active,
  body.dashboard-page #userMenuNav .admin-menu-item.is-active,
  body.dashboard-page .admin-sidebar .admin-menu-item.is-active {
    border-color: rgba(15, 118, 110, 0.5) !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.12) !important;
  }

  body.dashboard-page .user-sidebar .menu-count,
  body.dashboard-page #userMenuNav .menu-count,
  body.dashboard-page .admin-sidebar .menu-count {
    align-self: flex-end;
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
  }

  body.dashboard-page .user-sidebar .admin-menu-item.is-active .menu-count,
  body.dashboard-page #userMenuNav .admin-menu-item.is-active .menu-count {
    background: #0f766e;
    color: #fff;
  }
}

@media (max-width: 360px) {
  body.dashboard-page .user-sidebar .admin-menu-item,
  body.dashboard-page #userMenuNav .admin-menu-item,
  body.dashboard-page .admin-sidebar .admin-menu-item {
    min-height: 64px !important;
    padding: 12px 10px !important;
    font-size: 13px !important;
  }
}