/* CRMA47 v1.7.77 — Responsive Admin UI Corrections
   Scope: Pairing KPI icons, Check-in KPI icons, Dashboard mobile cards,
   and the Admin mobile/tablet off-canvas menu. No business logic changes. */

/* ------------------------------------------------------------
   Pairing + Check-in KPI icons
   The older generic .stat-card span rule forced icon spans to 13px/block,
   so the icon was rendered small and stuck at the top-left of its tile.
   ------------------------------------------------------------ */
:is(.admin-route-pairing .pairing-overview-stats,
    .admin-route-checkin .checkin-overview-stats) .stat-card {
  grid-template-columns:54px minmax(0,1fr)!important;
  align-items:center!important;
  gap:13px!important;
}

:is(.admin-route-pairing .pairing-overview-stats,
    .admin-route-checkin .checkin-overview-stats) .stat-card > .admin-stat-icon {
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  justify-self:center!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  margin:0!important;
  padding:0!important;
  border-radius:13px!important;
  font-size:25px!important;
  font-weight:400!important;
  line-height:1!important;
  text-align:center!important;
}

:is(.admin-route-pairing .pairing-overview-stats,
    .admin-route-checkin .checkin-overview-stats) .stat-card > .admin-stat-icon > i {
  display:block!important;
  width:1em!important;
  height:1em!important;
  margin:0!important;
  font-size:1em!important;
  line-height:1!important;
}

:is(.admin-route-pairing .pairing-overview-stats,
    .admin-route-checkin .checkin-overview-stats) .stat-card > .admin-stat-icon > i::before {
  display:block!important;
  line-height:1!important;
}

:is(.admin-route-pairing .pairing-overview-stats,
    .admin-route-checkin .checkin-overview-stats) .stat-card > .admin-stat-copy {
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:inherit!important;
  font-size:inherit!important;
  line-height:1.25!important;
}

:is(.admin-route-pairing .pairing-overview-stats,
    .admin-route-checkin .checkin-overview-stats) .admin-stat-copy > span:first-child {
  display:block!important;
  margin:0!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.25!important;
}

:is(.admin-route-pairing .pairing-overview-stats,
    .admin-route-checkin .checkin-overview-stats) .admin-stat-copy > strong {
  display:block!important;
  margin:4px 0 0!important;
  line-height:1!important;
}

:is(.admin-route-pairing .pairing-overview-stats,
    .admin-route-checkin .checkin-overview-stats) .admin-stat-copy > small {
  display:block!important;
  margin:5px 0 0!important;
  line-height:1.25!important;
}

/* ------------------------------------------------------------
   Dashboard mobile KPI cards
   Remove fixed/minimum height and absolute-positioned actions so cards
   grow only with their real content and no text is clipped.
   ------------------------------------------------------------ */
@media (max-width:700px) {
  .admin-route-dashboard .crma-db-kpi-grid {
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .admin-route-dashboard .crma-db-kpi-card {
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    align-items:start!important;
    gap:12px!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:14px!important;
    overflow:visible!important;
  }

  .admin-route-dashboard .crma-db-kpi-icon {
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    margin:0!important;
    font-size:21px!important;
    line-height:1!important;
  }

  .admin-route-dashboard .crma-db-kpi-card > div {
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
  }

  .admin-route-dashboard .crma-db-kpi-card strong {
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }

  .admin-route-dashboard .crma-db-kpi-card em {
    min-height:0!important;
    margin-top:2px!important;
    overflow:visible!important;
  }

  .admin-route-dashboard .crma-db-kpi-trend,
  .admin-route-dashboard .crma-db-mini-progress {
    margin-top:8px!important;
  }

  .admin-route-dashboard .crma-db-kpi-action {
    position:static!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    min-height:36px!important;
    margin-top:11px!important;
    padding:7px 10px!important;
  }
}

@media (max-width:480px) {
  .admin-route-dashboard .crma-db-kpi-card {
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:11px!important;
    min-height:0!important;
    padding:12px!important;
  }

  .admin-route-dashboard .crma-db-kpi-icon {
    width:42px!important;
    height:42px!important;
    font-size:20px!important;
  }

  .admin-route-dashboard .crma-db-kpi-card strong {
    font-size:1.42rem!important;
  }
}

/* ------------------------------------------------------------
   Mobile/tablet Admin drawer
   One menu item per row, compact top area, independent scrolling,
   aligned icon/text/badge, and no horizontal menu wrapping.
   ------------------------------------------------------------ */
@media (max-width:1180px) {
  body.is-admin-page .admin-sidebar {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    position:fixed!important;
    top:70px!important;
    right:auto!important;
    bottom:0!important;
    left:0!important;
    z-index:180!important;
    width:min(360px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
    height:calc(100vh - 70px)!important;
    height:calc(100dvh - 70px)!important;
    max-height:calc(100vh - 70px)!important;
    max-height:calc(100dvh - 70px)!important;
    margin:0!important;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px))!important;
    overflow:hidden!important;
    white-space:normal!important;
    border-radius:0 18px 18px 0!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    box-shadow:20px 0 50px rgba(2,15,28,.30)!important;
  }

  body.admin-sidebar-open .admin-sidebar {
    transform:translateX(0)!important;
  }

  body.is-admin-page .admin-sidebar-brand {
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    gap:10px!important;
    min-height:52px!important;
    margin:0!important;
    padding:0 4px 11px!important;
  }

  body.is-admin-page .admin-sidebar-brand > span:last-of-type {
    min-width:0!important;
    padding-right:42px!important;
  }

  body.is-admin-page .admin-sidebar-close {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:absolute!important;
    top:1px!important;
    right:0!important;
    left:auto!important;
    width:40px!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
  }

  /* The account is already visible in the top bar on mobile. */
  body.is-admin-page .admin-sidebar-user {
    display:none!important;
  }

  body.is-admin-page .admin-sidebar-nav {
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    min-height:0!important;
    width:100%!important;
    margin:0!important;
    padding:3px 2px 10px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    white-space:normal!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(255,255,255,.28) transparent!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.is-admin-page .admin-sidebar-nav::-webkit-scrollbar {
    display:block!important;
    width:6px!important;
  }

  body.is-admin-page .admin-sidebar-nav::-webkit-scrollbar-track {
    background:transparent!important;
  }

  body.is-admin-page .admin-sidebar-nav::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,.26)!important;
    border-radius:999px!important;
  }

  body.is-admin-page .admin-menu-group {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:4px!important;
    width:100%!important;
    margin:0!important;
    padding:8px 0 0!important;
  }

  body.is-admin-page .admin-menu-title {
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:7px 10px 3px!important;
    white-space:normal!important;
  }

  body.is-admin-page .admin-sidebar :is(a,button) {
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr) auto!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:9px!important;
    width:100%!important;
    max-width:100%!important;
    min-height:44px!important;
    margin:0!important;
    padding:9px 11px!important;
    white-space:normal!important;
    text-align:left!important;
  }

  body.is-admin-page .admin-sidebar :is(a,button) > i {
    display:block!important;
    width:22px!important;
    min-width:22px!important;
    margin:0!important;
    text-align:center!important;
  }

  body.is-admin-page .admin-sidebar :is(a,button) > span:not(.admin-menu-badge):not([data-live-badge]) {
    display:block!important;
    min-width:0!important;
    overflow:visible!important;
    white-space:normal!important;
    text-overflow:clip!important;
    line-height:1.3!important;
  }

  body.is-admin-page .admin-sidebar [data-live-badge] {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    min-width:0!important;
    margin-left:auto!important;
  }

  body.is-admin-page .admin-sidebar .admin-menu-badge {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    margin-left:auto!important;
  }

  body.is-admin-page .admin-sidebar-footer {
    display:grid!important;
    flex:0 0 auto!important;
    gap:4px!important;
    width:100%!important;
    margin:8px 0 0!important;
    padding:9px 2px 0!important;
  }

  body.is-admin-page .admin-sidebar-footer form {
    width:100%!important;
    margin:0!important;
  }
}

@media (max-width:480px) {
  :is(.admin-route-pairing .pairing-overview-stats,
      .admin-route-checkin .checkin-overview-stats) .stat-card {
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:11px!important;
    min-height:88px!important;
  }

  :is(.admin-route-pairing .pairing-overview-stats,
      .admin-route-checkin .checkin-overview-stats) .stat-card > .admin-stat-icon {
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    border-radius:11px!important;
    font-size:22px!important;
  }

  body.is-admin-page .admin-sidebar {
    width:min(350px,calc(100vw - 12px))!important;
    max-width:calc(100vw - 12px)!important;
  }
}

@media print {
  body.is-admin-page .admin-sidebar {
    display:none!important;
  }
}