/* Cloud Design v1.3.32 — NAV ACTIVE FIX + DESKTOP USERS REBUILD */

/* Desktop users: replace the oversized technical table with the already existing rich cards. */
@media (min-width: 901px) {
  .dashboard-main{
    min-width:0!important;
  }

  .mobile-users-list-v1314{
    display:grid!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
  }

  .users-table-v1217{
    display:none!important;
  }

  .mobile-user-card-v1314{
    display:grid!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
    padding:18px 20px!important;
    border:1px solid var(--line)!important;
    border-radius:18px!important;
    background:
      linear-gradient(135deg,color-mix(in srgb,var(--surface) 98%,var(--accent) 2%),var(--surface))!important;
    box-shadow:0 8px 28px rgba(0,0,0,.08)!important;
  }

  .mobile-user-card-v1314:hover{
    border-color:color-mix(in srgb,var(--accent) 18%,var(--line))!important;
  }

  .mobile-user-card-v1314.is-primary-owner{
    border-color:color-mix(in srgb,var(--accent) 24%,var(--line))!important;
  }

  .mobile-user-card-v1314.is-blocked-v1331{
    border-color:rgba(255,73,96,.26)!important;
    background:linear-gradient(135deg,rgba(255,73,96,.045),var(--surface))!important;
  }

  .mobile-user-head-v1314{
    display:grid!important;
    grid-template-columns:46px minmax(160px,1fr) auto auto!important;
    align-items:center!important;
    gap:12px!important;
    min-width:0!important;
    padding-bottom:13px!important;
    border-bottom:1px solid color-mix(in srgb,var(--line) 85%,transparent)!important;
  }

  .mobile-user-avatar-v1314{
    width:46px!important;
    height:46px!important;
    border-radius:14px!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 46px!important;
    background:color-mix(in srgb,var(--accent) 13%,var(--soft))!important;
    border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line))!important;
    color:#ddd4ff!important;
    font-size:1rem!important;
    font-weight:800!important;
  }

  .mobile-user-name-v1314{
    min-width:0!important;
    display:grid!important;
    gap:3px!important;
  }

  .mobile-user-name-v1314 strong{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:1.03rem!important;
  }

  .mobile-user-name-v1314 small{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:var(--muted)!important;
  }

  .mobile-user-role-pill-v1314,
  .user-block-status-v1331{
    justify-self:end!important;
    max-width:220px!important;
    white-space:nowrap!important;
  }

  .mobile-user-protected-v1314{
    padding:10px 12px!important;
    border-radius:12px!important;
    border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line))!important;
    background:color-mix(in srgb,var(--accent) 5%,transparent)!important;
    color:var(--muted)!important;
    font-size:.78rem!important;
  }

  .mobile-user-facts-v1314{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
    gap:10px!important;
    min-width:0!important;
  }

  .mobile-user-fact-v1314{
    display:grid!important;
    align-content:start!important;
    gap:6px!important;
    min-width:0!important;
    min-height:74px!important;
    padding:12px 13px!important;
    border:1px solid color-mix(in srgb,var(--line) 88%,transparent)!important;
    border-radius:13px!important;
    background:color-mix(in srgb,var(--soft) 56%,transparent)!important;
  }

  .mobile-user-fact-v1314 > span:first-child{
    color:var(--muted)!important;
    font-size:.68rem!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }

  .mobile-user-fact-v1314 > span:last-child{
    min-width:0!important;
    overflow-wrap:anywhere!important;
    color:var(--text)!important;
    font-size:.84rem!important;
  }

  .mobile-user-badges-v1314{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
  }

  .mobile-user-block-control-v1331{
    margin:0!important;
    padding-top:13px!important;
    border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)!important;
  }

  .mobile-user-block-control-v1331 .user-block-form-v1331{
    display:flex!important;
    justify-content:flex-start!important;
  }

  .mobile-user-block-control-v1331 .user-block-btn-v1331{
    width:auto!important;
    min-width:150px!important;
  }

  .mobile-user-admin-v1314{
    display:grid!important;
    gap:12px!important;
    min-width:0!important;
    padding-top:13px!important;
    border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)!important;
  }

  .mobile-role-form-v1314{
    display:grid!important;
    grid-template-columns:minmax(240px,1fr) auto!important;
    align-items:end!important;
    gap:10px!important;
    width:min(620px,100%)!important;
  }

  .mobile-role-form-v1314 label{
    display:grid!important;
    gap:6px!important;
    min-width:0!important;
  }

  .mobile-role-form-v1314 label > span{
    color:var(--muted)!important;
    font-size:.72rem!important;
    font-weight:750!important;
  }

  .mobile-role-form-v1314 select{
    width:100%!important;
    min-width:0!important;
  }

  .mobile-role-form-v1314 .primary-btn{
    min-width:120px!important;
    justify-content:center!important;
  }

  .mobile-user-secondary-actions-v1314{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    align-items:center!important;
  }

  .mobile-user-secondary-actions-v1314 form{
    margin:0!important;
  }

  .mobile-user-secondary-actions-v1314 .ghost-btn{
    width:auto!important;
    max-width:100%!important;
    white-space:normal!important;
  }

  .user-block-help-v1331{
    margin-bottom:14px!important;
  }
}

/* Compact desktop / notebook widths: preserve the card layout instead of introducing horizontal scroll. */
@media (min-width:901px) and (max-width:1180px){
  .mobile-user-head-v1314{
    grid-template-columns:44px minmax(0,1fr) auto!important;
  }
  .mobile-user-head-v1314 .user-block-status-v1331{
    grid-column:2 / -1!important;
    justify-self:start!important;
  }
  .mobile-user-facts-v1314{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (min-width:901px) and (max-width:1030px){
  .mobile-user-facts-v1314{
    grid-template-columns:1fr!important;
  }
  .mobile-role-form-v1314{
    grid-template-columns:1fr!important;
  }
  .mobile-role-form-v1314 .primary-btn{
    width:100%!important;
  }
}